@payfit/unity-components
Version:
37 lines (36 loc) • 2.33 kB
JavaScript
import { uyTv as e } from "@payfit/unity-themes";
//#region src/components/tabs/Tabs.variant.ts
var t = e({
slots: {
base: "uy:w-full",
tabList: "uy:flex uy:gap-250 uy:mb-25",
scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
tab: [
"uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:text-content-neutral-lowest-enabled uy:py-125 uy:cursor-pointer",
"uy:theme-legacy:typography-action uy:theme-legacy:rounded-75",
"uy:theme-rebrand:z-10 uy:theme-rebrand:min-h-[44px] uy:theme-rebrand:items-center uy:theme-rebrand:justify-center uy:theme-rebrand:typography-action-large uy:theme-rebrand:sm:typography-action uy:theme-rebrand:rounded-100",
"uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:block uy:data-[selected]:after:content:\" \" uy:data-[selected]:after:w-full uy:data-[selected]:after:h-25 uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-0 uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:after:rounded-pill",
"uy:data-[status=active]:text-content-form-enabled uy:data-[status=active]:after:block uy:data-[status=active]:after:content:\" \" uy:data-[status=active]:after:w-full uy:data-[status=active]:after:h-25 uy:data-[status=active]:after:absolute uy:data-[status=active]:after:bottom-0 uy:data-[status=active]:after:left-0 uy:data-[status=active]:after:right-0 uy:data-[status=active]:after:rounded-pill",
"uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:theme-legacy:focus-visible:outline-offset-[4px] uy:theme-rebrand:focus-visible:outline-offset-0"
]
},
variants: {
variant: {
primary: { tab: ["uy:theme-legacy:data-[selected]:after:bg-border-neutral-active uy:theme-legacy:data-[status=active]:after:bg-border-neutral-active", "uy:theme-rebrand:data-[selected]:after:bg-surface-primary uy:theme-rebrand:data-[status=active]:after:bg-surface-primary"] },
neutral: { tab: "uy:data-[selected]:after:bg-content-neutral uy:data-[status=active]:after:bg-content-neutral" }
},
scrollable: {
true: { tabList: "" },
false: {
base: "",
scroller: ""
}
}
},
defaultVariants: {
variant: "primary",
scrollable: !1
}
});
//#endregion
export { t as tabsVariant };