129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const dataTableRootVariants = cva("grid gap-4 text-[var(--color-foreground)]");
|
|
|
|
export const dataTableToolbarVariants = cva(
|
|
"flex flex-wrap items-center justify-between gap-3"
|
|
);
|
|
|
|
export const dataTableContentVariants = cva(
|
|
[
|
|
"overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
|
|
getMotionRecipeClassNames("transition", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
loading: {
|
|
false: "",
|
|
true: "opacity-90"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
loading: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");
|
|
|
|
export const dataTableHeaderVariants = cva(
|
|
"bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_74%,var(--ui-card-default-bg))]"
|
|
);
|
|
|
|
export const dataTableHeaderCellVariants = cva(
|
|
[
|
|
"px-4 text-sm font-medium uppercase tracking-[var(--tracking-caps)]",
|
|
"text-[var(--color-muted-foreground)]"
|
|
],
|
|
{
|
|
variants: {
|
|
align: {
|
|
start: "text-left",
|
|
center: "text-center",
|
|
end: "text-right"
|
|
},
|
|
density: {
|
|
comfortable: "py-3",
|
|
compact: "py-2.5 text-xs"
|
|
},
|
|
sortable: {
|
|
false: "",
|
|
true: "select-none"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
align: "start",
|
|
density: "comfortable",
|
|
sortable: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableBodyVariants = cva("");
|
|
|
|
export const dataTableRowVariants = cva(
|
|
[
|
|
"border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]",
|
|
"transition-colors duration-200"
|
|
],
|
|
{
|
|
variants: {
|
|
interactive: {
|
|
false: "",
|
|
true: "hover:bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_72%,var(--ui-card-default-bg))]"
|
|
},
|
|
selected: {
|
|
false: "",
|
|
true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg))]"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
interactive: true,
|
|
selected: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableCellVariants = cva(
|
|
"px-4 text-[var(--color-card-foreground)]",
|
|
{
|
|
variants: {
|
|
align: {
|
|
start: "text-left",
|
|
center: "text-center",
|
|
end: "text-right"
|
|
},
|
|
density: {
|
|
comfortable: "py-3 text-sm leading-6",
|
|
compact: "py-2.5 text-[0.8125rem] leading-5"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
align: "start",
|
|
density: "comfortable"
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableSearchContainerVariants = cva(
|
|
"w-full max-w-[22rem] min-w-[14rem]"
|
|
);
|
|
|
|
export const dataTablePaginationVariants = cva(
|
|
"flex flex-wrap items-center justify-between gap-3 px-4 py-3"
|
|
);
|
|
|
|
export const dataTableSelectionBarVariants = cva(
|
|
[
|
|
"flex flex-wrap items-center justify-between gap-3 rounded-[var(--ui-card-radius)]",
|
|
"border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]",
|
|
"bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--ui-card-default-bg))] px-4 py-3",
|
|
"shadow-[var(--ui-card-subtle-shadow)]"
|
|
]
|
|
);
|
|
|
|
export const dataTableStatusVariants = cva(
|
|
"grid min-h-52 place-items-center px-6 py-8"
|
|
);
|