separator
separator
ts
export default {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-default flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm',
},
variants: {
color: {
primary: { border: 'border-primary' },
secondary: { border: 'border-secondary' },
success: { border: 'border-success' },
info: { border: 'border-info' },
warning: { border: 'border-warning' },
error: { border: 'border-error' },
neutral: { border: 'border-default' },
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap',
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2',
},
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: '',
},
type: {
solid: {
border: 'border-solid',
},
dashed: {
border: 'border-dashed',
},
dotted: {
border: 'border-dotted',
},
},
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: { border: 'border-t' },
} as const,
{
orientation: 'horizontal',
size: 'sm',
class: { border: 'border-t-[2px]' },
} as const,
{
orientation: 'horizontal',
size: 'md',
class: { border: 'border-t-[3px]' },
} as const,
{
orientation: 'horizontal',
size: 'lg',
class: { border: 'border-t-[4px]' },
} as const,
{
orientation: 'horizontal',
size: 'xl',
class: { border: 'border-t-[5px]' },
} as const,
{
orientation: 'vertical',
size: 'xs',
class: { border: 'border-s' },
} as const,
{
orientation: 'vertical',
size: 'sm',
class: { border: 'border-s-[2px]' },
} as const,
{
orientation: 'vertical',
size: 'md',
class: { border: 'border-s-[3px]' },
} as const,
{
orientation: 'vertical',
size: 'lg',
class: { border: 'border-s-[4px]' },
} as const,
{
orientation: 'vertical',
size: 'xl',
class: { border: 'border-s-[5px]' },
} as const,
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid',
} as const,
}ts
export default {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-default flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm',
},
variants: {
color: {
primary: { border: 'border-primary' },
secondary: { border: 'border-secondary' },
success: { border: 'border-success' },
info: { border: 'border-info' },
warning: { border: 'border-warning' },
error: { border: 'border-error' },
neutral: { border: 'border-default' },
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap',
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2',
},
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: '',
},
type: {
solid: {
border: 'border-solid',
},
dashed: {
border: 'border-dashed',
},
dotted: {
border: 'border-dotted',
},
},
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: { border: 'border-t' },
} as const,
{
orientation: 'horizontal',
size: 'sm',
class: { border: 'border-t-[2px]' },
} as const,
{
orientation: 'horizontal',
size: 'md',
class: { border: 'border-t-[3px]' },
} as const,
{
orientation: 'horizontal',
size: 'lg',
class: { border: 'border-t-[4px]' },
} as const,
{
orientation: 'horizontal',
size: 'xl',
class: { border: 'border-t-[5px]' },
} as const,
{
orientation: 'vertical',
size: 'xs',
class: { border: 'border-s' },
} as const,
{
orientation: 'vertical',
size: 'sm',
class: { border: 'border-s-[2px]' },
} as const,
{
orientation: 'vertical',
size: 'md',
class: { border: 'border-s-[3px]' },
} as const,
{
orientation: 'vertical',
size: 'lg',
class: { border: 'border-s-[4px]' },
} as const,
{
orientation: 'vertical',
size: 'xl',
class: { border: 'border-s-[5px]' },
} as const,
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid',
} as const,
}