chore(theme): improve options type

src/theme/alert.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
     wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
@@ -11,7 +13,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       white: '',
       gray: '',
       black: ''
@@ -33,25 +35,25 @@ export default (config: { colors: string[] }) => ({
       }
     }
   },
-  compoundVariants: [...config.colors.map((color: string) => ({
+  compoundVariants: [...options.colors.map((color: string) => ({
     color,
     variant: 'solid',
     class: {
       root: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
     }
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'outline',
     class: {
       root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
     }
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'soft',
     class: {
       root: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
     }
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'subtle',
     class: {

src/theme/badge.ts

@@ -1,8 +1,10 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   base: 'rounded-md font-medium inline-flex items-center',
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       white: '',
       gray: '',
       black: ''
@@ -19,19 +21,19 @@ export default (config: { colors: string[] }) => ({
       lg: 'text-sm px-2 py-1'
     }
   },
-  compoundVariants: [...config.colors.map((color: string) => ({
+  compoundVariants: [...options.colors.map((color: string) => ({
     color,
     variant: 'solid',
     class: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'outline',
     class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'soft',
     class: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'subtle',
     class: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`

src/theme/button.ts

@@ -1,6 +1,7 @@
+import type { ModuleOptions } from '../module'
 import { buttonGroupVariant } from './button-group'
 
-export default (config: { colors: string[] }) => ({
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
     label: '',
@@ -11,7 +12,7 @@ export default (config: { colors: string[] }) => ({
   variants: {
     ...buttonGroupVariant,
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       white: '',
       gray: '',
       black: ''
@@ -75,27 +76,27 @@ export default (config: { colors: string[] }) => ({
       true: ''
     }
   },
-  compoundVariants: [...config.colors.map((color: string) => ({
+  compoundVariants: [...options.colors.map((color: string) => ({
     color,
     variant: 'solid',
     class: `shadow-sm text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'outline',
     class: `ring ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'soft',
     class: `text-${color}-500 dark:text-${color}-400 bg-${color}-50 hover:bg-${color}-100 disabled:bg-${color}-50 dark:bg-${color}-950 dark:hover:bg-${color}-900 dark:disabled:bg-${color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'subtle',
     class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'ghost',
     class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...config.colors.map((color: string) => ({
+  })), ...options.colors.map((color: string) => ({
     color,
     variant: 'link',
     class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`

src/theme/checkbox.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
     base: 'shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
@@ -10,7 +12,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
       black: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
     },
     size: {
@@ -56,7 +58,7 @@ export default (config: { colors: string[] }) => ({
       true: ''
     }
   },
-  compoundVariants: [...config.colors.map((color: string) => ({
+  compoundVariants: [...options.colors.map((color: string) => ({
     color,
     checked: true,
     class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`

src/theme/chip.ts

@@ -1,11 +1,13 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative inline-flex items-center justify-center shrink-0',
     base: 'rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
       gray: 'bg-gray-500 dark:bg-gray-400',
       white: 'bg-white dark:bg-gray-900',
       black: 'bg-gray-900 dark:bg-white'

src/theme/input-menu.ts

@@ -1,7 +1,8 @@
 import { defu } from 'defu'
+import type { ModuleOptions } from '../module'
 import input from './input'
 
-export default (config: { colors: string[] }) => {
+export default (options: Required<ModuleOptions>) => {
   return defu({
     slots: {
       arrow: 'fill-gray-200 dark:fill-gray-800',
@@ -62,5 +63,5 @@ export default (config: { colors: string[] }) => {
         }
       }
     }
-  }, input(config))
+  }, input(options))
 }

src/theme/input.ts

@@ -1,147 +1,146 @@
+import type { ModuleOptions } from '../module'
 import { buttonGroupVariantWithRoot } from './button-group'
 
-export default (config: { colors: string[] }) => {
+export default (options: Required<ModuleOptions>) => ({
-  return {
+  slots: {
-    slots: {
+    root: 'relative inline-flex items-center',
-      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',
-      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',
-      leading: 'absolute inset-y-0 start-0 flex items-center',
+    leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
-      leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
+    leadingAvatar: 'shrink-0',
-      leadingAvatar: 'shrink-0',
+    trailing: 'absolute inset-y-0 end-0 flex items-center',
-      trailing: 'absolute inset-y-0 end-0 flex items-center',
+    trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
-      trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
+  },
-    },
+  variants: {
-    variants: {
+    ...buttonGroupVariantWithRoot,
-      ...buttonGroupVariantWithRoot,
+    size: {
-      size: {
+      xs: {
-        xs: {
+        base: 'px-2 py-1 text-xs gap-1',
-          base: 'px-2 py-1 text-xs gap-1',
+        leading: 'pl-2',
-          leading: 'pl-2',
+        trailing: 'pr-2',
-          trailing: 'pr-2',
+        leadingIcon: 'size-4',
-          leadingIcon: 'size-4',
+        trailingIcon: 'size-4'
-          trailingIcon: 'size-4'
-        },
-        sm: {
-          base: 'px-2.5 py-1.5 text-xs gap-1.5',
-          leading: 'pl-2.5',
-          trailing: 'pr-2.5',
-          leadingIcon: 'size-4',
-          trailingIcon: 'size-4'
-        },
-        md: {
-          base: 'px-2.5 py-1.5 text-sm gap-1.5',
-          leading: 'pl-2.5',
-          trailing: 'pr-2.5',
-          leadingIcon: 'size-5',
-          trailingIcon: 'size-5'
-        },
-        lg: {
-          base: 'px-3 py-2 text-sm gap-2',
-          leading: 'pl-3',
-          trailing: 'pr-3',
-          leadingIcon: 'size-5',
-          trailingIcon: 'size-5'
-        },
-        xl: {
-          base: 'px-3 py-2 text-base gap-2',
-          leading: 'pl-3',
-          trailing: 'pr-3',
-          leadingIcon: 'size-6',
-          trailingIcon: 'size-6'
-        }
       },
-      variant: {
+      sm: {
-        outline: '',
+        base: 'px-2.5 py-1.5 text-xs gap-1.5',
-        none: 'bg-transparent'
+        leading: 'pl-2.5',
+        trailing: 'pr-2.5',
+        leadingIcon: 'size-4',
+        trailingIcon: 'size-4'
       },
-      color: {
+      md: {
-        ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+        base: 'px-2.5 py-1.5 text-sm gap-1.5',
-        white: '',
+        leading: 'pl-2.5',
-        gray: ''
+        trailing: 'pr-2.5',
+        leadingIcon: 'size-5',
+        trailingIcon: 'size-5'
       },
-      leading: {
+      lg: {
-        true: ''
+        base: 'px-3 py-2 text-sm gap-2',
+        leading: 'pl-3',
+        trailing: 'pr-3',
+        leadingIcon: 'size-5',
+        trailingIcon: 'size-5'
       },
-      trailing: {
+      xl: {
-        true: ''
+        base: 'px-3 py-2 text-base gap-2',
-      },
+        leading: 'pl-3',
-      loading: {
+        trailing: 'pr-3',
-        true: ''
+        leadingIcon: 'size-6',
-      },
+        trailingIcon: 'size-6'
-      type: {
-        file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
       }
     },
-    compoundVariants: [...config.colors.map((color: string) => ({
+    variant: {
-      color,
+      outline: '',
-      variant: 'outline',
+      none: 'bg-transparent'
-      class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    },
-    })), {
+    color: {
-      color: 'white',
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
-      variant: 'outline',
+      white: '',
-      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-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+      gray: ''
-    }, {
+    },
-      color: 'gray',
+    leading: {
-      variant: 'outline',
+      true: ''
-      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-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    },
-    }, {
+    trailing: {
-      leading: true,
+      true: ''
-      size: 'xs',
+    },
-      class: 'pl-7'
+    loading: {
-    }, {
+      true: ''
-      leading: true,
+    },
-      size: 'sm',
+    type: {
-      class: 'pl-8'
+      file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
-    }, {
-      leading: true,
-      size: 'md',
-      class: 'pl-9'
-    }, {
-      leading: true,
-      size: 'lg',
-      class: 'pl-10'
-    }, {
-      leading: true,
-      size: 'xl',
-      class: 'pl-11'
-    }, {
-      trailing: true,
-      size: 'xs',
-      class: 'pr-7'
-    }, {
-      trailing: true,
-      size: 'sm',
-      class: 'pr-8'
-    }, {
-      trailing: true,
-      size: 'md',
-      class: 'pr-9'
-    }, {
-      trailing: true,
-      size: 'lg',
-      class: 'pr-10'
-    }, {
-      trailing: true,
-      size: 'xl',
-      class: 'pr-11'
-    }, {
-      loading: true,
-      leading: true,
-      class: {
-        leadingIcon: 'animate-spin'
-      }
-    }, {
-      loading: true,
-      leading: false,
-      trailing: true,
-      class: {
-        trailingIcon: 'animate-spin'
-      }
-    }],
-    defaultVariants: {
-      size: 'md',
-      color: 'white',
-      variant: 'outline'
     }
+  },
+  compoundVariants: [...options.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-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible: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-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible: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-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    leading: true,
+    size: 'xs',
+    class: 'pl-7'
+  }, {
+    leading: true,
+    size: 'sm',
+    class: 'pl-8'
+  }, {
+    leading: true,
+    size: 'md',
+    class: 'pl-9'
+  }, {
+    leading: true,
+    size: 'lg',
+    class: 'pl-10'
+  }, {
+    leading: true,
+    size: 'xl',
+    class: 'pl-11'
+  }, {
+    trailing: true,
+    size: 'xs',
+    class: 'pr-7'
+  }, {
+    trailing: true,
+    size: 'sm',
+    class: 'pr-8'
+  }, {
+    trailing: true,
+    size: 'md',
+    class: 'pr-9'
+  }, {
+    trailing: true,
+    size: 'lg',
+    class: 'pr-10'
+  }, {
+    trailing: true,
+    size: 'xl',
+    class: 'pr-11'
+  }, {
+    loading: true,
+    leading: true,
+    class: {
+      leadingIcon: 'animate-spin'
+    }
+  }, {
+    loading: true,
+    leading: false,
+    trailing: true,
+    class: {
+      trailingIcon: 'animate-spin'
+    }
+  }],
+  defaultVariants: {
+    size: 'md',
+    color: 'white',
+    variant: 'outline'
   }
-}
+})

src/theme/navigation-menu.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex gap-1.5',
     list: 'isolate min-w-0',
@@ -29,11 +31,11 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       black: ''
     },
     highlightColor: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       black: ''
     },
     variant: {
@@ -95,7 +97,7 @@ export default (config: { colors: string[] }) => ({
       link: 'hover:text-gray-900 dark:hover:text-white transition-colors hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors',
       linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
     }
-  }, ...config.colors.map((color: string) => ({
+  }, ...options.colors.map((color: string) => ({
     color,
     variant: 'pill',
     active: true,
@@ -133,7 +135,7 @@ export default (config: { colors: string[] }) => ({
       link: 'hover:text-gray-900 dark:hover:text-white transition-colors',
       linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
     }
-  }, ...config.colors.map((color: string) => ({
+  }, ...options.colors.map((color: string) => ({
     color,
     variant: 'link',
     active: true,
@@ -149,7 +151,7 @@ export default (config: { colors: string[] }) => ({
       link: 'text-gray-900 dark:text-white',
       linkLeadingIcon: 'text-gray-900 dark:text-white'
     }
-  }, ...config.colors.map((highlightColor: string) => ({
+  }, ...options.colors.map((highlightColor: string) => ({
     highlightColor,
     highlight: true,
     active: true,

src/theme/progress.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'gap-2',
     base: 'relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
@@ -15,7 +17,7 @@ export default (config: { colors: string[] }) => ({
       'elastic': ''
     },
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
         indicator: `bg-${color}-500 dark:bg-${color}-400`,
         steps: `text-${color}-500 dark:text-${color}-400`
       }])),

src/theme/radio-group.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative',
     fieldset: 'flex',
@@ -13,7 +15,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
         base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
         indicator: `bg-${color}-500 dark:bg-${color}-400`
       }])),

src/theme/select-menu.ts

@@ -1,12 +1,13 @@
 import { defu } from 'defu'
+import type { ModuleOptions } from '../module'
 import select from './select'
 
-export default (config: { colors: string[] }) => {
+export default (options: Required<ModuleOptions>) => {
   return defu({
     slots: {
       value: 'truncate',
       placeholder: 'truncate text-current/50',
       input: 'text-sm px-2.5 py-1.5 placeholder-gray-400 dark:placeholder-gray-500 border-0 border-b border-gray-200 dark:border-gray-800 focus:outline-none'
     }
-  }, select(config))
+  }, select(options))
 }

src/theme/select.ts

@@ -1,7 +1,8 @@
 import { defu } from 'defu'
+import type { ModuleOptions } from '../module'
 import input from './input'
 
-export default (config: { colors: string[] }) => {
+export default (options: Required<ModuleOptions>) => {
   return defu({
     slots: {
       arrow: 'fill-gray-200 dark:fill-gray-800',
@@ -24,5 +25,5 @@ export default (config: { colors: string[] }) => {
       base: 'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
       value: 'truncate group-data-placeholder:text-current/50'
     }
-  }, input(config))
+  }, input(options))
 }

src/theme/separator.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'flex items-center align-center text-center',
     border: '',
@@ -9,7 +11,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
       white: { border: 'border-white dark:border-gray-900' },
       gray: { border: 'border-gray-200 dark:border-gray-800' },
       black: { border: 'border-gray-900 dark:border-white' }

src/theme/slider.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-center select-none touch-none',
     track: 'relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow',
@@ -7,7 +9,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
         range: `bg-${color}-500 dark:bg-${color}-400`,
         thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
       }])),

src/theme/switch.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
     base: 'inline-flex items-center shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
@@ -11,7 +13,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+      ...Object.fromEntries(options.colors.map((color: string) => [color, {
         base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
       }])),

src/theme/tabs.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'flex items-center gap-2',
     list: 'relative flex p-1 group',
@@ -11,7 +13,7 @@ export default (config: { colors: string[] }) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
       white: '',
       black: ''
     },
@@ -64,7 +66,7 @@ export default (config: { colors: string[] }) => ({
       list: 'border-l',
       indicator: '-left-px w-px'
     }
-  }, ...config.colors.map((color: string) => ({
+  }, ...options.colors.map((color: string) => ({
     color,
     variant: 'pill',
     class: {
@@ -85,7 +87,7 @@ export default (config: { colors: string[] }) => ({
       indicator: 'bg-gray-900 dark:bg-white',
       trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
     }
-  }, ...config.colors.map((color: string) => ({
+  }, ...options.colors.map((color: string) => ({
     color,
     variant: 'link',
     class: {

src/theme/textarea.ts

@@ -1,5 +1,6 @@
+import type { ModuleOptions } from '../module'
 import input from './input'
 
-export default (config: { colors: string[] }) => {
+export default (options: Required<ModuleOptions>) => {
-  return input(config)
+  return input(options)
 }

src/theme/toast.ts

@@ -1,4 +1,6 @@
-export default (config: { colors: string[] }) => ({
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5',
     wrapper: 'w-0 flex-1 flex flex-col gap-1',
@@ -11,7 +13,7 @@ export default (config: { colors: string[] }) => ({
     close: 'p-0'
   },
   variants: {
-    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+    color: Object.fromEntries(options.colors.map((color: string) => [color, {
       icon: `text-${color}-500 dark:text-${color}-400`,
       progress: `bg-${color}-500 dark:bg-${color}-400`
     }])),