397 lines
9.0 KiB
Plaintext
397 lines
9.0 KiB
Plaintext
import {
|
|
colorVariants
|
|
} from "./chunk-GQT3YUX3.mjs";
|
|
import {
|
|
tv
|
|
} from "./chunk-UWE6H66T.mjs";
|
|
import {
|
|
dataFocusVisibleClasses
|
|
} from "./chunk-GH5E4FQB.mjs";
|
|
|
|
// src/components/tabs.ts
|
|
var tabs = tv({
|
|
slots: {
|
|
base: "inline-flex",
|
|
tabList: [
|
|
"flex",
|
|
"p-1",
|
|
"h-fit",
|
|
"gap-2",
|
|
"items-center",
|
|
"flex-nowrap",
|
|
"overflow-x-scroll",
|
|
"scrollbar-hide",
|
|
"bg-default-100"
|
|
],
|
|
tab: [
|
|
"z-0",
|
|
"w-full",
|
|
"px-3",
|
|
"py-1",
|
|
"flex",
|
|
"group",
|
|
"relative",
|
|
"justify-center",
|
|
"items-center",
|
|
"outline-none",
|
|
"cursor-pointer",
|
|
"transition-opacity",
|
|
"tap-highlight-transparent",
|
|
"data-[disabled=true]:cursor-not-allowed",
|
|
"data-[disabled=true]:opacity-30",
|
|
"data-[hover-unselected=true]:opacity-disabled",
|
|
...dataFocusVisibleClasses
|
|
],
|
|
tabContent: [
|
|
"relative",
|
|
"z-10",
|
|
"text-inherit",
|
|
"whitespace-nowrap",
|
|
"transition-colors",
|
|
"text-default-500",
|
|
"group-data-[selected=true]:text-foreground"
|
|
],
|
|
cursor: ["absolute", "z-0", "bg-white"],
|
|
panel: [
|
|
"py-3",
|
|
"px-1",
|
|
"outline-none",
|
|
"data-[inert=true]:hidden",
|
|
...dataFocusVisibleClasses
|
|
],
|
|
wrapper: []
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
cursor: "inset-0"
|
|
},
|
|
light: {
|
|
tabList: "bg-transparent dark:bg-transparent",
|
|
cursor: "inset-0"
|
|
},
|
|
underlined: {
|
|
tabList: "bg-transparent dark:bg-transparent",
|
|
cursor: "h-[2px] w-[80%] bottom-0 shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]"
|
|
},
|
|
bordered: {
|
|
tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-sm",
|
|
cursor: "inset-0"
|
|
}
|
|
},
|
|
color: {
|
|
default: {},
|
|
primary: {},
|
|
secondary: {},
|
|
success: {},
|
|
warning: {},
|
|
danger: {}
|
|
},
|
|
size: {
|
|
sm: {
|
|
tabList: "rounded-medium",
|
|
tab: "h-7 text-tiny rounded-small",
|
|
cursor: "rounded-small"
|
|
},
|
|
md: {
|
|
tabList: "rounded-medium",
|
|
tab: "h-8 text-small rounded-small",
|
|
cursor: "rounded-small"
|
|
},
|
|
lg: {
|
|
tabList: "rounded-large",
|
|
tab: "h-9 text-medium rounded-medium",
|
|
cursor: "rounded-medium"
|
|
}
|
|
},
|
|
radius: {
|
|
none: {
|
|
tabList: "rounded-none",
|
|
tab: "rounded-none",
|
|
cursor: "rounded-none"
|
|
},
|
|
sm: {
|
|
tabList: "rounded-medium",
|
|
tab: "rounded-small",
|
|
cursor: "rounded-small"
|
|
},
|
|
md: {
|
|
tabList: "rounded-medium",
|
|
tab: "rounded-small",
|
|
cursor: "rounded-small"
|
|
},
|
|
lg: {
|
|
tabList: "rounded-large",
|
|
tab: "rounded-medium",
|
|
cursor: "rounded-medium"
|
|
},
|
|
full: {
|
|
tabList: "rounded-full",
|
|
tab: "rounded-full",
|
|
cursor: "rounded-full"
|
|
}
|
|
},
|
|
fullWidth: {
|
|
true: {
|
|
base: "w-full",
|
|
tabList: "w-full"
|
|
}
|
|
},
|
|
isDisabled: {
|
|
true: {
|
|
tabList: "opacity-disabled pointer-events-none"
|
|
}
|
|
},
|
|
disableAnimation: {
|
|
true: {
|
|
tab: "transition-none",
|
|
tabContent: "transition-none"
|
|
}
|
|
},
|
|
placement: {
|
|
top: {},
|
|
start: {
|
|
tabList: "flex-col",
|
|
panel: "py-0 px-3",
|
|
wrapper: "flex"
|
|
},
|
|
end: {
|
|
tabList: "flex-col",
|
|
panel: "py-0 px-3",
|
|
wrapper: "flex flex-row-reverse"
|
|
},
|
|
bottom: {
|
|
wrapper: "flex flex-col-reverse"
|
|
}
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
color: "default",
|
|
variant: "solid",
|
|
size: "md",
|
|
fullWidth: false,
|
|
isDisabled: false
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "default",
|
|
class: {
|
|
cursor: ["bg-background", "dark:bg-default", "shadow-small"],
|
|
tabContent: "group-data-[selected=true]:text-default-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "primary",
|
|
class: {
|
|
cursor: colorVariants.solid.primary,
|
|
tabContent: "group-data-[selected=true]:text-primary-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "secondary",
|
|
class: {
|
|
cursor: colorVariants.solid.secondary,
|
|
tabContent: "group-data-[selected=true]:text-secondary-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "success",
|
|
class: {
|
|
cursor: colorVariants.solid.success,
|
|
tabContent: "group-data-[selected=true]:text-success-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "warning",
|
|
class: {
|
|
cursor: colorVariants.solid.warning,
|
|
tabContent: "group-data-[selected=true]:text-warning-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: ["solid", "bordered", "light"],
|
|
color: "danger",
|
|
class: {
|
|
cursor: colorVariants.solid.danger,
|
|
tabContent: "group-data-[selected=true]:text-danger-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "default",
|
|
class: {
|
|
cursor: "bg-foreground",
|
|
tabContent: "group-data-[selected=true]:text-foreground"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "primary",
|
|
class: {
|
|
cursor: "bg-primary",
|
|
tabContent: "group-data-[selected=true]:text-primary"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "secondary",
|
|
class: {
|
|
cursor: "bg-secondary",
|
|
tabContent: "group-data-[selected=true]:text-secondary"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "success",
|
|
class: {
|
|
cursor: "bg-success",
|
|
tabContent: "group-data-[selected=true]:text-success"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "warning",
|
|
class: {
|
|
cursor: "bg-warning",
|
|
tabContent: "group-data-[selected=true]:text-warning"
|
|
}
|
|
},
|
|
{
|
|
variant: "underlined",
|
|
color: "danger",
|
|
class: {
|
|
cursor: "bg-danger",
|
|
tabContent: "group-data-[selected=true]:text-danger"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
variant: "underlined",
|
|
class: {
|
|
tab: [
|
|
"after:content-['']",
|
|
"after:absolute",
|
|
"after:bottom-0",
|
|
"after:h-[2px]",
|
|
"after:w-[80%]",
|
|
"after:opacity-0",
|
|
"after:shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
|
|
"data-[selected=true]:after:opacity-100"
|
|
]
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "default",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-default data-[selected=true]:text-default-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "primary",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "secondary",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-secondary data-[selected=true]:text-secondary-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "success",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-success data-[selected=true]:text-success-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "warning",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-warning data-[selected=true]:text-warning-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "danger",
|
|
variant: ["solid", "bordered", "light"],
|
|
class: {
|
|
tab: "data-[selected=true]:bg-danger data-[selected=true]:text-danger-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "default",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-foreground"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "primary",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-primary"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "secondary",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-secondary"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "success",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-success"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "warning",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-warning"
|
|
}
|
|
},
|
|
{
|
|
disableAnimation: true,
|
|
color: "danger",
|
|
variant: "underlined",
|
|
class: {
|
|
tab: "data-[selected=true]:after:bg-danger"
|
|
}
|
|
}
|
|
],
|
|
compoundSlots: [
|
|
{
|
|
variant: "underlined",
|
|
slots: ["tab", "tabList", "cursor"],
|
|
class: ["rounded-none"]
|
|
}
|
|
]
|
|
});
|
|
|
|
export {
|
|
tabs
|
|
};
|