switch
switch
ts
export default {
slots: {
root: 'relative flex items-start',
base: 'inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-colors duration-200',
container: 'flex items-center',
thumb: 'group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
icon: 'absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200',
wrapper: 'ms-2',
label: 'block font-medium text-default',
description: 'text-muted',
},
variants: {
color: {
primary: {
base: 'data-[state=checked]:bg-primary focus-visible:outline-primary',
icon: 'group-data-[state=checked]:text-primary',
},
secondary: {
base: 'data-[state=checked]:bg-secondary focus-visible:outline-secondary',
icon: 'group-data-[state=checked]:text-secondary',
},
success: {
base: 'data-[state=checked]:bg-success focus-visible:outline-success',
icon: 'group-data-[state=checked]:text-success',
},
info: {
base: 'data-[state=checked]:bg-info focus-visible:outline-info',
icon: 'group-data-[state=checked]:text-info',
},
warning: {
base: 'data-[state=checked]:bg-warning focus-visible:outline-warning',
icon: 'group-data-[state=checked]:text-warning',
},
error: {
base: 'data-[state=checked]:bg-error focus-visible:outline-error',
icon: 'group-data-[state=checked]:text-error',
},
neutral: {
base: 'data-[state=checked]:bg-inverted focus-visible:outline-inverted',
icon: 'group-data-[state=checked]:text-highlighted',
},
},
size: {
xs: {
base: 'w-7',
container: 'h-4',
thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
wrapper: 'text-xs',
},
sm: {
base: 'w-8',
container: 'h-4',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
wrapper: 'text-xs',
},
md: {
base: 'w-9',
container: 'h-5',
thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
wrapper: 'text-sm',
},
lg: {
base: 'w-10',
container: 'h-5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
wrapper: 'text-sm',
},
xl: {
base: 'w-11',
container: 'h-6',
thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
wrapper: 'text-base',
},
},
checked: {
true: {
icon: 'group-data-[state=checked]:opacity-100',
},
},
unchecked: {
true: {
icon: 'group-data-[state=unchecked]:opacity-100',
},
},
loading: {
true: {
icon: 'animate-spin',
},
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-error',
},
},
disabled: {
true: {
base: 'cursor-not-allowed opacity-75',
label: 'cursor-not-allowed opacity-75',
description: 'cursor-not-allowed opacity-75',
},
},
},
compoundVariants: [
{
color: 'secondary',
class: 'data-[state=checked]:bg-secondary focus-visible:outline-secondary',
} as const,
{
color: 'success',
class: 'data-[state=checked]:bg-success focus-visible:outline-success',
} as const,
{
color: 'info',
class: 'data-[state=checked]:bg-info focus-visible:outline-info',
} as const,
{
color: 'warning',
class: 'data-[state=checked]:bg-warning focus-visible:outline-warning',
} as const,
{
color: 'error',
class: 'data-[state=checked]:bg-error focus-visible:outline-error',
} as const,
],
defaultVariants: {
color: 'primary',
size: 'md',
} as const,
}ts
export default {
slots: {
root: 'relative flex items-start',
base: 'inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-colors duration-200',
container: 'flex items-center',
thumb: 'group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
icon: 'absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200',
wrapper: 'ms-2',
label: 'block font-medium text-default',
description: 'text-muted',
},
variants: {
color: {
primary: {
base: 'data-[state=checked]:bg-primary focus-visible:outline-primary',
icon: 'group-data-[state=checked]:text-primary',
},
secondary: {
base: 'data-[state=checked]:bg-secondary focus-visible:outline-secondary',
icon: 'group-data-[state=checked]:text-secondary',
},
success: {
base: 'data-[state=checked]:bg-success focus-visible:outline-success',
icon: 'group-data-[state=checked]:text-success',
},
info: {
base: 'data-[state=checked]:bg-info focus-visible:outline-info',
icon: 'group-data-[state=checked]:text-info',
},
warning: {
base: 'data-[state=checked]:bg-warning focus-visible:outline-warning',
icon: 'group-data-[state=checked]:text-warning',
},
error: {
base: 'data-[state=checked]:bg-error focus-visible:outline-error',
icon: 'group-data-[state=checked]:text-error',
},
neutral: {
base: 'data-[state=checked]:bg-inverted focus-visible:outline-inverted',
icon: 'group-data-[state=checked]:text-highlighted',
},
},
size: {
xs: {
base: 'w-7',
container: 'h-4',
thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
wrapper: 'text-xs',
},
sm: {
base: 'w-8',
container: 'h-4',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
wrapper: 'text-xs',
},
md: {
base: 'w-9',
container: 'h-5',
thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
wrapper: 'text-sm',
},
lg: {
base: 'w-10',
container: 'h-5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
wrapper: 'text-sm',
},
xl: {
base: 'w-11',
container: 'h-6',
thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
wrapper: 'text-base',
},
},
checked: {
true: {
icon: 'group-data-[state=checked]:opacity-100',
},
},
unchecked: {
true: {
icon: 'group-data-[state=unchecked]:opacity-100',
},
},
loading: {
true: {
icon: 'animate-spin',
},
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-error',
},
},
disabled: {
true: {
base: 'cursor-not-allowed opacity-75',
label: 'cursor-not-allowed opacity-75',
description: 'cursor-not-allowed opacity-75',
},
},
},
compoundVariants: [
{
color: 'secondary',
class: 'data-[state=checked]:bg-secondary focus-visible:outline-secondary',
} as const,
{
color: 'success',
class: 'data-[state=checked]:bg-success focus-visible:outline-success',
} as const,
{
color: 'info',
class: 'data-[state=checked]:bg-info focus-visible:outline-info',
} as const,
{
color: 'warning',
class: 'data-[state=checked]:bg-warning focus-visible:outline-warning',
} as const,
{
color: 'error',
class: 'data-[state=checked]:bg-error focus-visible:outline-error',
} as const,
],
defaultVariants: {
color: 'primary',
size: 'md',
} as const,
}