@dilipod/ui 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/select.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  error?: boolean
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, error, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background',
+          'placeholder:text-gray-500',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          error
+            ? 'border-red-500 focus-visible:ring-red-500'
+            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+          className
+        )}
+        aria-invalid={error ? 'true' : undefined}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = 'Select'
+
+export { Select }

package/src/index.ts

@@ -62,6 +62,9 @@ export type { LabelProps } from '@radix-ui/react-label'
 export { Textarea } from './components/textarea'
 export type { TextareaProps } from './components/textarea'
 
+export { Select } from './components/select'
+export type { SelectProps } from './components/select'
+
 export { Checkbox } from './components/checkbox'
 export type { CheckboxProps } from './components/checkbox'