tabs
tabs
ts
export default {
slots: {
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: 'group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors',
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
label: 'truncate',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
pill: {
list: 'bg-elevated rounded-lg',
trigger: 'flex-1 w-full',
indicator: 'rounded-md shadow-xs',
},
link: {
list: 'border-default',
indicator: 'rounded-full',
},
},
orientation: {
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
trigger: 'justify-center',
},
vertical: {
list: 'flex-col',
indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)',
},
},
size: {
xs: {
trigger: 'px-2 py-1 text-xs gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
},
sm: {
trigger: 'px-2.5 py-1.5 text-xs gap-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
},
md: {
trigger: 'px-3 py-1.5 text-sm gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
},
lg: {
trigger: 'px-3 py-2 text-sm gap-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
},
xl: {
trigger: 'px-3 py-2 text-base gap-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
},
},
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'pill',
class: {
indicator: 'inset-y-1',
},
} as const,
{
orientation: 'horizontal',
variant: 'link',
class: {
list: 'border-b -mb-px',
indicator: '-bottom-px h-px',
},
} as const,
{
orientation: 'vertical',
variant: 'pill',
class: {
indicator: 'inset-x-1',
list: 'items-center',
},
} as const,
{
orientation: 'vertical',
variant: 'link',
class: {
list: 'border-s -ms-px',
indicator: '-start-px w-px',
},
} as const,
{
color: 'primary',
variant: 'pill',
class: {
indicator: 'bg-primary',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
},
} as const,
{
color: 'primary',
variant: 'link',
class: {
indicator: 'bg-primary',
trigger: 'data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
} as const,
{
color: 'secondary',
variant: 'pill',
class: {
indicator: 'bg-secondary',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary',
},
} as const,
{
color: 'secondary',
variant: 'link',
class: {
indicator: 'bg-secondary',
trigger: 'data-[state=active]:text-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
} as const,
{
color: 'success',
variant: 'pill',
class: {
indicator: 'bg-success',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success',
},
} as const,
{
color: 'success',
variant: 'link',
class: {
indicator: 'bg-success',
trigger: 'data-[state=active]:text-success focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
},
} as const,
{
color: 'info',
variant: 'pill',
class: {
indicator: 'bg-info',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info',
},
} as const,
{
color: 'info',
variant: 'link',
class: {
indicator: 'bg-info',
trigger: 'data-[state=active]:text-info focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
} as const,
{
color: 'warning',
variant: 'pill',
class: {
indicator: 'bg-warning',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning',
},
} as const,
{
color: 'warning',
variant: 'link',
class: {
indicator: 'bg-warning',
trigger: 'data-[state=active]:text-warning focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
} as const,
{
color: 'error',
variant: 'pill',
class: {
indicator: 'bg-error',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error',
},
} as const,
{
color: 'error',
variant: 'link',
class: {
indicator: 'bg-error',
trigger: 'data-[state=active]:text-error focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
} as const,
{
color: 'neutral',
variant: 'pill',
class: {
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted',
},
} as const,
{
color: 'neutral',
variant: 'link',
class: {
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'pill',
size: 'md',
} as const,
}ts
export default {
slots: {
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: 'group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden transition-colors',
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
label: 'truncate',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
pill: {
list: 'bg-elevated rounded-lg',
trigger: 'flex-1 w-full',
indicator: 'rounded-md shadow-xs',
},
link: {
list: 'border-default',
indicator: 'rounded-full',
},
},
orientation: {
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
trigger: 'justify-center',
},
vertical: {
list: 'flex-col',
indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)',
},
},
size: {
xs: {
trigger: 'px-2 py-1 text-xs gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
},
sm: {
trigger: 'px-2.5 py-1.5 text-xs gap-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
},
md: {
trigger: 'px-3 py-1.5 text-sm gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
},
lg: {
trigger: 'px-3 py-2 text-sm gap-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
},
xl: {
trigger: 'px-3 py-2 text-base gap-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
},
},
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'pill',
class: {
indicator: 'inset-y-1',
},
} as const,
{
orientation: 'horizontal',
variant: 'link',
class: {
list: 'border-b -mb-px',
indicator: '-bottom-px h-px',
},
} as const,
{
orientation: 'vertical',
variant: 'pill',
class: {
indicator: 'inset-x-1',
list: 'items-center',
},
} as const,
{
orientation: 'vertical',
variant: 'link',
class: {
list: 'border-s -ms-px',
indicator: '-start-px w-px',
},
} as const,
{
color: 'primary',
variant: 'pill',
class: {
indicator: 'bg-primary',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
},
} as const,
{
color: 'primary',
variant: 'link',
class: {
indicator: 'bg-primary',
trigger: 'data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
} as const,
{
color: 'secondary',
variant: 'pill',
class: {
indicator: 'bg-secondary',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary',
},
} as const,
{
color: 'secondary',
variant: 'link',
class: {
indicator: 'bg-secondary',
trigger: 'data-[state=active]:text-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
} as const,
{
color: 'success',
variant: 'pill',
class: {
indicator: 'bg-success',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success',
},
} as const,
{
color: 'success',
variant: 'link',
class: {
indicator: 'bg-success',
trigger: 'data-[state=active]:text-success focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
},
} as const,
{
color: 'info',
variant: 'pill',
class: {
indicator: 'bg-info',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info',
},
} as const,
{
color: 'info',
variant: 'link',
class: {
indicator: 'bg-info',
trigger: 'data-[state=active]:text-info focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
} as const,
{
color: 'warning',
variant: 'pill',
class: {
indicator: 'bg-warning',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning',
},
} as const,
{
color: 'warning',
variant: 'link',
class: {
indicator: 'bg-warning',
trigger: 'data-[state=active]:text-warning focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
} as const,
{
color: 'error',
variant: 'pill',
class: {
indicator: 'bg-error',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error',
},
} as const,
{
color: 'error',
variant: 'link',
class: {
indicator: 'bg-error',
trigger: 'data-[state=active]:text-error focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
} as const,
{
color: 'neutral',
variant: 'pill',
class: {
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted',
},
} as const,
{
color: 'neutral',
variant: 'link',
class: {
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'pill',
size: 'md',
} as const,
}