radio-group
radio-group
ts
export default {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: 'flex items-start',
container: 'flex items-center',
base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted',
},
variants: {
color: {
primary: {
base: 'focus-visible:outline-primary',
indicator: 'bg-primary',
},
secondary: {
base: 'focus-visible:outline-secondary',
indicator: 'bg-secondary',
},
success: {
base: 'focus-visible:outline-success',
indicator: 'bg-success',
},
error: {
base: 'focus-visible:outline-error',
indicator: 'bg-error',
},
warning: {
base: 'focus-visible:outline-warning',
indicator: 'bg-warning',
},
info: {
base: 'focus-visible:outline-info',
indicator: 'bg-info',
},
neutral: {
base: 'focus-visible:outline-inverted',
indicator: 'bg-inverted',
},
},
variant: {
list: {
item: '',
},
card: {
item: 'border border-muted rounded-lg',
},
table: {
item: 'border border-muted',
},
},
orientation: {
horizontal: {
fieldset: 'flex-row',
},
vertical: {
fieldset: 'flex-col',
},
},
indicator: {
start: {
item: 'flex-row',
wrapper: 'ms-2',
},
end: {
item: 'flex-row-reverse',
wrapper: 'me-2',
},
hidden: {
base: 'sr-only',
wrapper: 'text-center',
},
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1',
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3.5',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1',
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5',
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4.5',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5',
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
base: 'size-5',
item: 'text-base',
container: 'h-6',
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-error',
},
},
},
compoundVariants: [
{
size: 'xs' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-2.5' },
},
{
size: 'sm' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-3' },
},
{
size: 'md' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-3.5' },
},
{
size: 'lg' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-4' },
},
{
size: 'xl' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-4.5' },
},
{
orientation: 'horizontal',
variant: 'table',
class: {
item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
fieldset: 'gap-0 -space-x-px',
},
} as const,
{
orientation: 'vertical',
variant: 'table',
class: {
item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
fieldset: 'gap-0 -space-y-px',
},
} as const,
{
color: 'primary',
variant: 'card',
class: {
item: `has-data-[state=checked]:border-primary`,
},
} as const,
{
color: 'secondary',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-secondary',
},
} as const,
{
color: 'success',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-success',
},
} as const,
{
color: 'error',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-error',
},
} as const,
{
color: 'warning',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-warning',
},
} as const,
{
color: 'info',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-info',
},
} as const,
{
color: 'neutral',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-inverted',
},
} as const,
{
color: 'primary',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'secondary',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'success',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'info',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'error',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'warning',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'neutral',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]',
},
} as const,
{
variant: ['card' as const, 'table' as const],
disabled: true,
class: {
item: 'cursor-not-allowed opacity-75',
},
},
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start',
} as const,
}ts
export default {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: 'flex items-start',
container: 'flex items-center',
base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted',
},
variants: {
color: {
primary: {
base: 'focus-visible:outline-primary',
indicator: 'bg-primary',
},
secondary: {
base: 'focus-visible:outline-secondary',
indicator: 'bg-secondary',
},
success: {
base: 'focus-visible:outline-success',
indicator: 'bg-success',
},
error: {
base: 'focus-visible:outline-error',
indicator: 'bg-error',
},
warning: {
base: 'focus-visible:outline-warning',
indicator: 'bg-warning',
},
info: {
base: 'focus-visible:outline-info',
indicator: 'bg-info',
},
neutral: {
base: 'focus-visible:outline-inverted',
indicator: 'bg-inverted',
},
},
variant: {
list: {
item: '',
},
card: {
item: 'border border-muted rounded-lg',
},
table: {
item: 'border border-muted',
},
},
orientation: {
horizontal: {
fieldset: 'flex-row',
},
vertical: {
fieldset: 'flex-col',
},
},
indicator: {
start: {
item: 'flex-row',
wrapper: 'ms-2',
},
end: {
item: 'flex-row-reverse',
wrapper: 'me-2',
},
hidden: {
base: 'sr-only',
wrapper: 'text-center',
},
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1',
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3.5',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1',
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5',
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4.5',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5',
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
base: 'size-5',
item: 'text-base',
container: 'h-6',
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-error',
},
},
},
compoundVariants: [
{
size: 'xs' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-2.5' },
},
{
size: 'sm' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-3' },
},
{
size: 'md' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-3.5' },
},
{
size: 'lg' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-4' },
},
{
size: 'xl' as const,
variant: ['card' as const, 'table' as const],
class: { item: 'p-4.5' },
},
{
orientation: 'horizontal',
variant: 'table',
class: {
item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
fieldset: 'gap-0 -space-x-px',
},
} as const,
{
orientation: 'vertical',
variant: 'table',
class: {
item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
fieldset: 'gap-0 -space-y-px',
},
} as const,
{
color: 'primary',
variant: 'card',
class: {
item: `has-data-[state=checked]:border-primary`,
},
} as const,
{
color: 'secondary',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-secondary',
},
} as const,
{
color: 'success',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-success',
},
} as const,
{
color: 'error',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-error',
},
} as const,
{
color: 'warning',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-warning',
},
} as const,
{
color: 'info',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-info',
},
} as const,
{
color: 'neutral',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-inverted',
},
} as const,
{
color: 'primary',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'secondary',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'success',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'info',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'error',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'warning',
variant: 'table',
class: {
item: `has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]`,
},
} as const,
{
color: 'neutral',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]',
},
} as const,
{
variant: ['card' as const, 'table' as const],
disabled: true,
class: {
item: 'cursor-not-allowed opacity-75',
},
},
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start',
} as const,
}