diff --git a/src/theme/avatar.ts b/src/theme/avatar.ts index 0b332463..d85158b2 100644 --- a/src/theme/avatar.ts +++ b/src/theme/avatar.ts @@ -13,19 +13,19 @@ export default { '2xs': { root: 'size-5 text-[10px]' }, - xs: { + 'xs': { root: 'size-6 text-xs' }, - sm: { + 'sm': { root: 'size-7 text-sm' }, - md: { + 'md': { root: 'size-8 text-base' }, - lg: { + 'lg': { root: 'size-9 text-lg' }, - xl: { + 'xl': { root: 'size-10 text-xl' }, '2xl': { diff --git a/src/theme/button.ts b/src/theme/button.ts index 8f40b8cf..20d70684 100644 --- a/src/theme/button.ts +++ b/src/theme/button.ts @@ -25,27 +25,27 @@ export default (config: { colors: string[] }) => ({ leadingIcon: 'size-4', trailingIcon: 'size-4' }, - xs: { + 'xs': { base: 'px-2.5 py-1.5 text-xs gap-x-1.5', leadingIcon: 'size-4', trailingIcon: 'size-4' }, - sm: { + 'sm': { base: 'px-2.5 py-1.5 text-sm gap-x-1.5', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - md: { + 'md': { base: 'px-3 py-2 text-sm gap-x-2', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - lg: { + 'lg': { base: 'px-3.5 py-2.5 text-sm gap-x-2.5', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - xl: { + 'xl': { base: 'px-3.5 py-2.5 text-base gap-x-2.5', leadingIcon: 'size-6', trailingIcon: 'size-6' diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts index ec15564a..575dfd8c 100644 --- a/src/theme/checkbox.ts +++ b/src/theme/checkbox.ts @@ -17,27 +17,27 @@ export default (config: { colors: string[] }) => ({ container: 'h-4', wrapper: 'text-xs' }, - xs: { + 'xs': { base: 'size-3.5', container: 'h-4', wrapper: 'text-xs' }, - sm: { + 'sm': { base: 'size-4', container: 'h-5', wrapper: 'text-sm' }, - md: { + 'md': { base: 'size-[18px]', container: 'h-5', wrapper: 'text-sm' }, - lg: { + 'lg': { base: 'size-5', container: 'h-6', wrapper: 'text-base' }, - xl: { + 'xl': { base: 'size-[22px]', container: 'h-6', wrapper: 'text-base' @@ -62,7 +62,7 @@ export default (config: { colors: string[] }) => ({ true: '' } }, - compoundVariants: config.colors.flatMap((color) => ([{ + compoundVariants: config.colors.flatMap(color => ([{ color, checked: true, class: `ring-2 ring-inset 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 43269161..fd1440ea 100644 --- a/src/theme/chip.ts +++ b/src/theme/chip.ts @@ -13,11 +13,11 @@ export default (config: { colors: string[] }) => ({ size: { '3xs': 'h-[4px] min-w-[4px] text-[4px]', '2xs': 'h-[5px] min-w-[5px] text-[5px]', - xs: 'h-[6px] min-w-[6px] text-[6px]', - sm: 'h-[7px] min-w-[7px] text-[7px]', - md: 'h-[8px] min-w-[8px] text-[8px]', - lg: 'h-[9px] min-w-[9px] text-[9px]', - xl: 'h-[10px] min-w-[10px] text-[10px]', + 'xs': 'h-[6px] min-w-[6px] text-[6px]', + 'sm': 'h-[7px] min-w-[7px] text-[7px]', + 'md': 'h-[8px] min-w-[8px] text-[8px]', + 'lg': 'h-[9px] min-w-[9px] text-[9px]', + 'xl': 'h-[10px] min-w-[10px] text-[10px]', '2xl': 'h-[11px] min-w-[11px] text-[11px]', '3xl': 'h-[12px] min-w-[12px] text-[12px]' }, diff --git a/src/theme/form-field.ts b/src/theme/form-field.ts index b28e8712..c5d8da89 100644 --- a/src/theme/form-field.ts +++ b/src/theme/form-field.ts @@ -13,15 +13,14 @@ export default { variants: { size: { '2xs': { root: 'text-xs' }, - xs: { root: 'text-xs' }, - sm: { root: 'text-sm' }, - md: { root: 'text-sm' }, - lg: { root: 'text-base' }, - xl: { root: 'text-base' } + 'xs': { root: 'text-xs' }, + 'sm': { root: 'text-sm' }, + 'md': { root: 'text-sm' }, + 'lg': { root: 'text-base' }, + 'xl': { root: 'text-base' } }, required: { true: { - // eslint-disable-next-line quotes label: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400` } } diff --git a/src/theme/input.ts b/src/theme/input.ts index a1d9ca46..69a1ebec 100644 --- a/src/theme/input.ts +++ b/src/theme/input.ts @@ -17,35 +17,35 @@ export default (config: { colors: string[] }) => { leadingIcon: 'size-4', trailingIcon: 'size-4' }, - xs: { + 'xs': { base: 'text-sm gap-x-1.5 px-2.5 py-1', leading: 'px-2.5', trailing: 'px-2.5', leadingIcon: 'size-4', trailingIcon: 'size-4' }, - sm: { + 'sm': { base: 'text-sm gap-x-1.5 px-2.5 py-1.5', leading: 'px-2.5', trailing: 'px-2.5', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - md: { + 'md': { base: 'text-sm gap-x-1.5 px-3 py-2', leading: 'px-3', trailing: 'px-3', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - lg: { + 'lg': { base: 'text-sm gap-x-2.5 px-3.5 py-2.5', leading: 'px-3.5', trailing: 'px-3.5', leadingIcon: 'size-5', trailingIcon: 'size-5' }, - xl: { + 'xl': { base: 'text-base gap-x-2.5 px-3.5 py-2.5', leading: 'px-3.5', trailing: 'px-3.5', diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts index ad334dd3..08a90f63 100644 --- a/src/theme/radio-group.ts +++ b/src/theme/radio-group.ts @@ -3,12 +3,10 @@ export default (config: { colors: string[] }) => ({ root: 'relative', fieldset: 'flex flex-col', legend: 'mb-1 block font-medium text-gray-700 dark:text-gray-200', - option: 'flex items-start', base: 'rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900', indicator: 'flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full', container: 'flex items-center', - wrapper: 'ms-2', label: 'block font-medium text-gray-700 dark:text-gray-200', description: 'text-gray-500 dark:text-gray-400' @@ -18,7 +16,6 @@ export default (config: { colors: string[] }) => ({ base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`, indicator: `bg-${color}-500 dark:bg-${color}-400` }])), - size: { '2xs': { fieldset: 'gap-0.5', @@ -27,35 +24,35 @@ export default (config: { colors: string[] }) => ({ container: 'h-4', indicator: 'after:size-1' }, - xs: { + 'xs': { fieldset: 'gap-0.5', base: 'size-3.5', option: 'text-xs', container: 'h-4', indicator: 'after:size-1' }, - sm: { + 'sm': { fieldset: 'gap-1', base: 'size-4', option: 'text-sm', container: 'h-5', indicator: 'after:size-1.5' }, - md: { + 'md': { fieldset: 'gap-1', base: 'size-[18px]', option: 'text-sm', container: 'h-5', indicator: 'after:size-1.5' }, - lg: { + 'lg': { fieldset: 'gap-1.5', base: 'size-5', option: 'text-base', container: 'h-6', indicator: 'after:size-2' }, - xl: { + 'xl': { fieldset: 'gap-1.5', base: 'size-[22px]', option: 'text-base', @@ -63,21 +60,18 @@ export default (config: { colors: string[] }) => ({ indicator: 'after:size-2' } }, - disabled: { true: { base: 'cursor-not-allowed opacity-75', label: 'cursor-not-allowed opacity-75' } }, - required: { true: { legend: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400' } } }, - defaultVariants: { size: 'sm', color: 'primary' diff --git a/src/theme/separator.ts b/src/theme/separator.ts index c40f8637..06af9eab 100644 --- a/src/theme/separator.ts +++ b/src/theme/separator.ts @@ -28,11 +28,11 @@ export default (config: { colors: string[] }) => ({ }, size: { '2xs': '', - xs: '', - sm: '', - md: '', - lg: '', - xl: '' + 'xs': '', + 'sm': '', + 'md': '', + 'lg': '', + 'xl': '' }, type: { solid: { diff --git a/src/theme/switch.ts b/src/theme/switch.ts index 071ed59a..3b35be27 100644 --- a/src/theme/switch.ts +++ b/src/theme/switch.ts @@ -15,27 +15,27 @@ export default (config: { colors: string[] }) => ({ thumb: 'size-2 data-[state=checked]:translate-x-2', icon: 'size-1' }, - xs: { + 'xs': { root: 'h-4 w-7', thumb: 'size-3 data-[state=checked]:translate-x-3', icon: 'size-2' }, - sm: { + 'sm': { root: 'h-5 w-9', thumb: 'size-4 data-[state=checked]:translate-x-4', icon: 'size-3' }, - md: { + 'md': { root: 'h-6 w-11', thumb: 'size-5 data-[state=checked]:translate-x-5', icon: 'size-4' }, - lg: { + 'lg': { root: 'h-7 w-[52px]', thumb: 'size-6 data-[state=checked]:translate-x-6', icon: 'size-5' }, - xl: { + 'xl': { root: 'h-8 w-[60px]', thumb: 'size-7 data-[state=checked]:translate-x-7', icon: 'size-6' diff --git a/src/theme/textarea.ts b/src/theme/textarea.ts index 160ff4e1..b3462f41 100644 --- a/src/theme/textarea.ts +++ b/src/theme/textarea.ts @@ -3,42 +3,37 @@ export default (config: { colors: string[] }) => ({ 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: { '2xs': { base: 'text-xs gap-x-1 px-2 py-1' }, - xs: { + 'xs': { base: 'text-sm gap-x-1.5 px-2.5 py-1' }, - sm: { + 'sm': { base: 'text-sm gap-x-1.5 px-2.5 py-1.5' }, - md: { + 'md': { base: 'text-sm gap-x-1.5 px-3 py-2' }, - lg: { + 'lg': { base: 'text-sm gap-x-2.5 px-3.5 py-2.5' }, - xl: { + 'xl': { base: 'text-base gap-x-2.5 px-3.5 py-2.5' } }, - 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, @@ -54,7 +49,6 @@ export default (config: { colors: string[] }) => ({ 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: 'sm', color: 'white', diff --git a/src/theme/tooltip.ts b/src/theme/tooltip.ts index 6f0b15a0..6a0d7cfb 100644 --- a/src/theme/tooltip.ts +++ b/src/theme/tooltip.ts @@ -3,7 +3,6 @@ export default { content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity]', arrow: 'fill-gray-200 dark:fill-gray-800', text: 'truncate', - // eslint-disable-next-line quotes shortcuts: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['ยท'] before:mr-0.5` }, variants: {