From 3f2b1b12cd510660a236946f7652e08ed9d652a4 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 5 Jun 2024 22:12:11 +0200 Subject: [PATCH] chore(theme): improve options type --- src/theme/alert.ts | 14 +- src/theme/badge.ts | 14 +- src/theme/button.ts | 17 ++- src/theme/checkbox.ts | 8 +- src/theme/chip.ts | 6 +- src/theme/input-menu.ts | 5 +- src/theme/input.ts | 273 +++++++++++++++++------------------ src/theme/navigation-menu.ts | 14 +- src/theme/progress.ts | 6 +- src/theme/radio-group.ts | 6 +- src/theme/select-menu.ts | 5 +- src/theme/select.ts | 5 +- src/theme/separator.ts | 6 +- src/theme/slider.ts | 6 +- src/theme/switch.ts | 6 +- src/theme/tabs.ts | 10 +- src/theme/textarea.ts | 5 +- src/theme/toast.ts | 6 +- 18 files changed, 220 insertions(+), 192 deletions(-) diff --git a/src/theme/alert.ts b/src/theme/alert.ts index 01b03a6c..e389cc56 100644 --- a/src/theme/alert.ts +++ b/src/theme/alert.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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: { diff --git a/src/theme/badge.ts b/src/theme/badge.ts index 7412f5c6..6f2ecb26 100644 --- a/src/theme/badge.ts +++ b/src/theme/badge.ts @@ -1,8 +1,10 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` diff --git a/src/theme/button.ts b/src/theme/button.ts index ae9708d0..7946d4e0 100644 --- a/src/theme/button.ts +++ b/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) => ({ 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` diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts index 58a5a22c..2ae72b42 100644 --- a/src/theme/checkbox.ts +++ b/src/theme/checkbox.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` diff --git a/src/theme/chip.ts b/src/theme/chip.ts index b4c16581..a88eef06 100644 --- a/src/theme/chip.ts +++ b/src/theme/chip.ts @@ -1,11 +1,13 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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' diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts index fb0bbdf3..427d2d1e 100644 --- a/src/theme/input-menu.ts +++ b/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) => { return defu({ slots: { arrow: 'fill-gray-200 dark:fill-gray-800', @@ -62,5 +63,5 @@ export default (config: { colors: string[] }) => { } } } - }, input(config)) + }, input(options)) } diff --git a/src/theme/input.ts b/src/theme/input.ts index 8c615b69..647534b7 100644 --- a/src/theme/input.ts +++ b/src/theme/input.ts @@ -1,147 +1,146 @@ +import type { ModuleOptions } from '../module' import { buttonGroupVariantWithRoot } from './button-group' -export default (config: { colors: string[] }) => { - return { - slots: { - 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', - trailing: 'absolute inset-y-0 end-0 flex items-center', - trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500' - }, - variants: { - ...buttonGroupVariantWithRoot, - size: { - xs: { - base: 'px-2 py-1 text-xs gap-1', - leading: 'pl-2', - trailing: 'pr-2', - leadingIcon: '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' - } +export default (options: Required) => ({ + slots: { + 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', + trailing: 'absolute inset-y-0 end-0 flex items-center', + trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500' + }, + variants: { + ...buttonGroupVariantWithRoot, + size: { + xs: { + base: 'px-2 py-1 text-xs gap-1', + leading: 'pl-2', + trailing: 'pr-2', + leadingIcon: 'size-4', + trailingIcon: 'size-4' }, - variant: { - outline: '', - none: 'bg-transparent' + 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' }, - color: { - ...Object.fromEntries(config.colors.map((color: string) => [color, ''])), - white: '', - gray: '' + 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' }, - leading: { - true: '' + lg: { + base: 'px-3 py-2 text-sm gap-2', + leading: 'pl-3', + trailing: 'pr-3', + leadingIcon: 'size-5', + trailingIcon: 'size-5' }, - trailing: { - true: '' - }, - loading: { - true: '' - }, - type: { - file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none' + xl: { + base: 'px-3 py-2 text-base gap-2', + leading: 'pl-3', + trailing: 'pr-3', + leadingIcon: 'size-6', + trailingIcon: 'size-6' } }, - 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-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' + variant: { + outline: '', + none: 'bg-transparent' + }, + color: { + ...Object.fromEntries(options.colors.map((color: string) => [color, ''])), + white: '', + gray: '' + }, + leading: { + true: '' + }, + trailing: { + true: '' + }, + loading: { + true: '' + }, + type: { + file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none' } + }, + 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' } -} +}) diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts index 8c23ba0c..314ef0aa 100644 --- a/src/theme/navigation-menu.ts +++ b/src/theme/navigation-menu.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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, diff --git a/src/theme/progress.ts b/src/theme/progress.ts index a5e57095..d59ebb2f 100644 --- a/src/theme/progress.ts +++ b/src/theme/progress.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` }])), diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts index 91831f96..e005a4ea 100644 --- a/src/theme/radio-group.ts +++ b/src/theme/radio-group.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` }])), diff --git a/src/theme/select-menu.ts b/src/theme/select-menu.ts index 32608e50..599d3b4f 100644 --- a/src/theme/select-menu.ts +++ b/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) => { 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)) } diff --git a/src/theme/select.ts b/src/theme/select.ts index eef4e455..9701cfcf 100644 --- a/src/theme/select.ts +++ b/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) => { 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)) } diff --git a/src/theme/separator.ts b/src/theme/separator.ts index 0155d6f5..bd692b01 100644 --- a/src/theme/separator.ts +++ b/src/theme/separator.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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' } diff --git a/src/theme/slider.ts b/src/theme/slider.ts index 5af496c8..348fdffb 100644 --- a/src/theme/slider.ts +++ b/src/theme/slider.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` }])), diff --git a/src/theme/switch.ts b/src/theme/switch.ts index d370ccf8..1732737a 100644 --- a/src/theme/switch.ts +++ b/src/theme/switch.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` }])), diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts index ca75cdc8..c61878dc 100644 --- a/src/theme/tabs.ts +++ b/src/theme/tabs.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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: { diff --git a/src/theme/textarea.ts b/src/theme/textarea.ts index c6871684..5d8b2850 100644 --- a/src/theme/textarea.ts +++ b/src/theme/textarea.ts @@ -1,5 +1,6 @@ +import type { ModuleOptions } from '../module' import input from './input' -export default (config: { colors: string[] }) => { - return input(config) +export default (options: Required) => { + return input(options) } diff --git a/src/theme/toast.ts b/src/theme/toast.ts index b33a1043..e9f27ee4 100644 --- a/src/theme/toast.ts +++ b/src/theme/toast.ts @@ -1,4 +1,6 @@ -export default (config: { colors: string[] }) => ({ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ 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` }])),