arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(theme): improve options type

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-05 22:12:11 +02:00
parent ecc2240df0
commit 3f2b1b12cd
18 changed files with 220 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/theme/alert.ts
View File

@@ -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: {

14
src/theme/badge.ts
View File

@@ -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`

17
src/theme/button.ts
View File

@@ -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`

8
src/theme/checkbox.ts
View File

@@ -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`

6
src/theme/chip.ts
View File

@@ -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'

5
src/theme/input-menu.ts
View File

@@ -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))
}

273
src/theme/input.ts
View File

@@ -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<ModuleOptions>) => ({
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'
}
}
})

14
src/theme/navigation-menu.ts
View File

@@ -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,

6
src/theme/progress.ts
View File

@@ -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`
}])),

6
src/theme/radio-group.ts
View File

@@ -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`
}])),

5
src/theme/select-menu.ts
View File

@@ -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))
}

5
src/theme/select.ts
View File

@@ -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))
}

6
src/theme/separator.ts
View File

@@ -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' }

6
src/theme/slider.ts
View File

@@ -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`
}])),

6
src/theme/switch.ts
View File

@@ -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`
}])),

10
src/theme/tabs.ts
View File

@@ -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: {

5
src/theme/textarea.ts
View File

@@ -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<ModuleOptions>) => {
return input(options)
}

6
src/theme/toast.ts
View File

@@ -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`
}])),