From 980a4009a82ab9f4e64c66d94257326febfcd1e9 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Mon, 13 Nov 2023 12:47:17 +0300
Subject: [PATCH] packages/ui: add select

---
 packages/ui/index.tsx  |  1 +
 packages/ui/select.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 packages/ui/select.tsx

diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 1d691d8..de3ce7d 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -10,3 +10,4 @@ export * from './header';
 export * from './heading';
 export * from './http-error';
 export * from './input';
+export * from './select';
diff --git a/packages/ui/select.tsx b/packages/ui/select.tsx
new file mode 100644
index 0000000..75e5a65
--- /dev/null
+++ b/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>
+  )
+);