feat(Select): new component (#92)

src/theme/index.ts

@@ -26,6 +26,7 @@ export { default as navigationMenu } from './navigation-menu'
 export { default as pagination } from './pagination'
 export { default as popover } from './popover'
 export { default as radioGroup } from './radio-group'
+export { default as select } from './select'
 export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'

src/theme/input-menu.ts

@@ -1,21 +1,27 @@
-export default {
-  slots: {
-    root: 'relative',
-    input: '',
-    trigger: 'inline-flex items-center',
-    arrow: 'fill-gray-200 dark:fill-gray-800',
-    content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
-    viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
-    group: 'p-1 isolate',
-    empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
-    label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
-    separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-    item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
-    itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
-    itemLeadingAvatar: 'shrink-0',
-    itemLeadingChip: 'shrink-0 mx-1.5',
-    itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-    itemTrailingSelectedIcon: 'shrink-0 size-5',
-    itemLabel: 'truncate'
-  }
+import { defu } from 'defu'
+import input from './input'
+
+export default (config: { colors: string[] }) => {
+  return defu({
+    slots: {
+      arrow: 'fill-gray-200 dark:fill-gray-800',
+      content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+      viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
+      group: 'p-1 isolate',
+      empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
+      label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
+      separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
+      item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
+      itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
+      itemLeadingAvatar: 'shrink-0',
+      itemLeadingChip: 'shrink-0 mx-1.5',
+      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+      itemTrailingSelectedIcon: 'shrink-0 size-5',
+      itemLabel: 'truncate'
+    }
+  }, {
+    slots: {
+      trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
+    }
+  }, input(config))
 }

src/theme/input.ts

@@ -3,8 +3,8 @@ import { buttonGroupVariantWithRoot } from './button-group'
 export default (config: { colors: string[] }) => {
   return {
     slots: {
-      root: 'relative',
-      base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500',
+      root: 'relative inline-flex items-center',
+      base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
       leading: 'absolute inset-y-0 start-0 flex items-center',
       leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
       leadingAvatar: 'shrink-0',

src/theme/select.ts

@@ -0,0 +1,28 @@
+import { defu } from 'defu'
+import input from './input'
+
+export default (config: { colors: string[] }) => {
+  return defu({
+    slots: {
+      arrow: 'fill-gray-200 dark:fill-gray-800',
+      content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+      viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
+      group: 'p-1 isolate',
+      empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
+      label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
+      separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
+      item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
+      itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
+      itemLeadingAvatar: 'shrink-0',
+      itemLeadingChip: 'shrink-0 mx-1.5',
+      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+      itemTrailingSelectedIcon: 'shrink-0 size-5',
+      itemLabel: 'truncate'
+    }
+  }, {
+    slots: {
+      base: 'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+      placeholder: 'truncate group-data-placeholder:text-current/50'
+    }
+  }, input(config))
+}

src/theme/textarea.ts

@@ -1,54 +1,5 @@
-export default (config: { colors: string[] }) => ({
-  slots: {
-    root: 'relative',
-    base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500'
-  },
-  variants: {
-    size: {
-      xs: {
-        base: 'px-2 py-1 text-xs'
-      },
-      sm: {
-        base: 'px-2.5 py-1.5 text-xs'
-      },
-      md: {
-        base: 'px-2.5 py-1.5 text-sm'
-      },
-      lg: {
-        base: 'px-3 py-2 text-sm'
-      },
-      xl: {
-        base: 'px-3 py-2 text-base'
-      }
-    },
-    variant: {
-      outline: '',
-      none: 'bg-transparent focus:ring-0 focus:shadow-none'
-    },
-    color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
-      white: '',
-      gray: ''
-    }
-  },
-  compoundVariants: [
-    ...config.colors.map((color: string) => ({
-      color,
-      variant: 'outline',
-      class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus:ring-2 focus:ring-${color}-500 dark:focus:ring-${color}-400`
-    })), {
-      color: 'white',
-      variant: 'outline',
-      class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
-    }, {
-      color: 'gray',
-      variant: 'outline',
-      class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
-    }
-  ],
-  defaultVariants: {
-    size: 'md',
-    color: 'white',
-    variant: 'outline'
-  }
-})
+import input from './input'
+
+export default (config: { colors: string[] }) => {
+  return input(config)
+}