forked from cerc-io/snowballtools-base
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { tv, type VariantProps } from 'tailwind-variants';
|
|
|
|
export const getCheckboxVariant = tv({
|
|
slots: {
|
|
wrapper: ['group', 'flex', 'gap-3'],
|
|
indicator: [
|
|
'grid',
|
|
'place-content-center',
|
|
'text-transparent',
|
|
'group-hover:text-controls-disabled',
|
|
'focus-visible:text-controls-disabled',
|
|
'group-focus-visible:text-controls-disabled',
|
|
'data-[state=checked]:text-elements-on-primary',
|
|
'data-[state=checked]:group-focus-visible:text-elements-on-primary',
|
|
'data-[state=indeterminate]:text-elements-on-primary',
|
|
'data-[state=checked]:data-[disabled]:text-elements-on-disabled-active',
|
|
],
|
|
icon: ['w-3', 'h-3', 'stroke-current', 'text-current'],
|
|
input: [
|
|
'h-5',
|
|
'w-5',
|
|
'group',
|
|
'border',
|
|
'border-border-interactive/10',
|
|
'bg-controls-tertiary',
|
|
'rounded-md',
|
|
'transition-all',
|
|
'duration-150',
|
|
'focus-ring',
|
|
'shadow-button',
|
|
'group-hover:border-border-interactive/[0.14]',
|
|
'group-hover:bg-controls-tertiary',
|
|
'data-[state=checked]:bg-controls-primary',
|
|
'data-[state=checked]:hover:bg-controls-primary-hovered',
|
|
'data-[state=checked]:focus-visible:bg-controls-primary-hovered',
|
|
'data-[disabled]:bg-controls-disabled',
|
|
'data-[disabled]:shadow-none',
|
|
'data-[disabled]:hover:border-border-interactive/10',
|
|
'data-[disabled]:cursor-not-allowed',
|
|
'data-[state=checked]:data-[disabled]:bg-controls-disabled-active',
|
|
],
|
|
label: [
|
|
'text-sm',
|
|
'tracking-[-0.006em]',
|
|
'text-elements-high-em',
|
|
'flex',
|
|
'flex-col',
|
|
'gap-1',
|
|
'px-1',
|
|
],
|
|
description: ['text-xs', 'text-elements-low-em'],
|
|
},
|
|
variants: {
|
|
disabled: {
|
|
true: {
|
|
wrapper: ['cursor-not-allowed'],
|
|
indicator: ['group-hover:text-transparent'],
|
|
input: [
|
|
'group-hover:border-border-interactive/[0.14]',
|
|
'group-hover:bg-controls-disabled',
|
|
],
|
|
label: ['cursor-not-allowed'],
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export type CheckboxVariants = VariantProps<typeof getCheckboxVariant>;
|