forked from cerc-io/snowballtools-base
97 lines
3.5 KiB
TypeScript
97 lines
3.5 KiB
TypeScript
import { tv, type VariantProps } from 'tailwind-variants';
|
||
|
||
export type TabsVariants = VariantProps<typeof tabsTheme>;
|
||
|
||
export const tabsTheme = tv({
|
||
slots: {
|
||
root: ['flex', 'data-[orientation=horizontal]:w-full'],
|
||
triggerWrapper: [
|
||
// Horizontal – default
|
||
'px-1',
|
||
'cursor-default',
|
||
'select-none',
|
||
'text-elements-low-em',
|
||
'border-b-2',
|
||
'border-transparent',
|
||
'hover:border-border-interactive/10',
|
||
'hover:text-elements-mid-em',
|
||
'focus-within:border-border-interactive/10',
|
||
'data-[state=active]:font-medium',
|
||
'data-[state=active]:text-elements-high-em',
|
||
'data-[state=active]:border-elements-high-em',
|
||
// Vertical
|
||
'data-[orientation=vertical]:px-3',
|
||
'data-[orientation=vertical]:py-3',
|
||
'data-[orientation=vertical]:w-full',
|
||
'data-[orientation=vertical]:focus-ring',
|
||
'data-[orientation=vertical]:rounded-xl',
|
||
'data-[orientation=vertical]:border-transparent',
|
||
'data-[orientation=vertical]:hover:bg-base-bg-emphasized',
|
||
'data-[orientation=vertical]:hover:text-elements-mid-em',
|
||
'data-[orientation=vertical]:hover:border-transparent',
|
||
'data-[orientation=vertical]:focus-visible:border-transparent',
|
||
'data-[orientation=vertical]:focus-visible:bg-base-bg-emphasized',
|
||
'data-[orientation=vertical]:focus-visible:text-elements-mid-em',
|
||
'data-[orientation=vertical]:data-[state=active]:font-normal',
|
||
'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized',
|
||
'data-[orientation=vertical]:data-[state=active]:border-transparent',
|
||
'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
|
||
'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
|
||
// TODO: demo additions
|
||
'data-[orientation=vertical]:data-[state=active]:bg-snowball-200',
|
||
'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200',
|
||
'data-[orientation=vertical]:data-[state=active]:text-snowball-800',
|
||
'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800',
|
||
'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]',
|
||
],
|
||
trigger: [
|
||
'flex',
|
||
'gap-1.5',
|
||
'cursor-default',
|
||
'select-none',
|
||
'items-center',
|
||
'justify-center',
|
||
'outline-none',
|
||
'leading-none',
|
||
'tracking-[-0.006em]',
|
||
'text-sm',
|
||
'rounded-md',
|
||
// Horizontal – default
|
||
'data-[orientation=horizontal]:focus-ring',
|
||
'data-[orientation=horizontal]:h-10',
|
||
// select direct child of data-[orientation=horizontal]
|
||
'[&[data-orientation=horizontal]_>_*]:h-full',
|
||
// Vertical
|
||
'data-[orientation=vertical]:gap-2',
|
||
'data-[orientation=vertical]:justify-start',
|
||
],
|
||
triggerList: [
|
||
'flex',
|
||
'shrink-0',
|
||
'gap-5',
|
||
'border-b',
|
||
'border-transparent',
|
||
'overflow-auto',
|
||
// Horizontal – default
|
||
'data-[orientation=horizontal]:border-border-interactive/10',
|
||
// Vertical
|
||
'data-[orientation=vertical]:flex-col',
|
||
'data-[orientation=vertical]:gap-0.5',
|
||
'data-[orientation=vertical]:w-full',
|
||
],
|
||
content: ['text-elements-high-em', 'grow', 'outline-none', 'tab-content'],
|
||
},
|
||
variants: {
|
||
fillWidth: {
|
||
true: {
|
||
trigger: ['flex-1'],
|
||
},
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
fillWidth: false,
|
||
},
|
||
});
|
||
|
||
export type TabsTheme = VariantProps<typeof tabsTheme>;
|