packages/ui: add select

packages/ui/index.tsx

@@ -10,3 +10,4 @@ export * from './header';
 export * from './heading';
 export * from './http-error';
 export * from './input';
+export * from './select';

packages/ui/select.tsx

@@ -0,0 +1,26 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { SelectHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+const variants = cva(
+  'focus:ring-0 hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
+);
+
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> &
+  VariantProps<typeof variants> & {
+    readonly options: Array<{ name: string; value: string | number }>;
+  };
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, options, ...props }, ref) => (
+    <select id={props.id} className={cn(variants({ className }))} ref={ref} {...props}>
+      {options.map(({ name, value }) => (
+        <option key={value} value={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  )
+);