169 lines
6.7 KiB
TypeScript
169 lines
6.7 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 rounded-[calc(var(--ui-card-radius)-0.25rem)]",
|
|
"border border-[color-mix(in_oklch,var(--ui-card-subtle-border)_84%,transparent)] [border-width:var(--ui-card-border-width)]",
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_82%,white_18%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,white_12%))]",
|
|
"px-3 py-3 shadow-[var(--ui-card-subtle-shadow)] sm:px-4",
|
|
"transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
|
|
"focus-within:border-[color-mix(in_oklch,var(--color-primary)_14%,var(--ui-card-subtle-border))]",
|
|
"focus-within:shadow-[0_16px_32px_color-mix(in_oklch,var(--color-primary)_8%,transparent),inset_0_1px_0_rgba(255,255,255,0.42)]"
|
|
]
|
|
);
|
|
|
|
export const dataTableContentVariants = cva(
|
|
[
|
|
"relative overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] [border-width:var(--ui-card-border-width)]",
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_74%,white_26%),color-mix(in_oklch,var(--ui-card-default-bg)_92%,var(--ui-card-subtle-bg)))]",
|
|
"shadow-[var(--ui-card-default-shadow)]",
|
|
"before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-16 before:bg-[linear-gradient(180deg,color-mix(in_oklch,white_54%,transparent),transparent)] before:content-['']",
|
|
getMotionRecipeClassNames("transition", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
loading: {
|
|
false: "",
|
|
true: "opacity-95 saturate-[0.96]"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
loading: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");
|
|
|
|
export const dataTableHeaderVariants = cva(
|
|
[
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-default-bg)_82%,var(--ui-card-subtle-bg)))]",
|
|
"shadow-[inset_0_-1px_0_color-mix(in_oklch,var(--color-border)_74%,transparent)]"
|
|
]
|
|
);
|
|
|
|
export const dataTableHeaderCellVariants = cva(
|
|
[
|
|
"relative px-4 first:pl-5 last:pr-5 align-middle text-[0.72rem] 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-4",
|
|
compact: "py-3 text-[0.68rem]"
|
|
},
|
|
sortable: {
|
|
false: "",
|
|
true: "select-none"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
align: "start",
|
|
density: "comfortable",
|
|
sortable: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableBodyVariants = cva("");
|
|
|
|
export const dataTableRowVariants = cva(
|
|
[
|
|
"group/row",
|
|
"border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]",
|
|
"transition-[background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
|
|
"[&>td]:transition-[background-color,box-shadow] [&>td]:duration-[var(--dur-base)] [&>td]:ease-[var(--ease-standard)]",
|
|
"motion-reduce:[&>td]:transition-none"
|
|
],
|
|
{
|
|
variants: {
|
|
interactive: {
|
|
false: "",
|
|
true:
|
|
[
|
|
"hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,var(--ui-card-subtle-bg)))]",
|
|
"hover:shadow-[inset_0_1px_0_color-mix(in_oklch,white_34%,transparent),0_10px_20px_color-mix(in_oklch,var(--color-primary)_5%,transparent)]",
|
|
"hover:[&>td]:bg-[color-mix(in_oklch,var(--color-surface-bright)_62%,transparent)]",
|
|
"hover:[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent)]"
|
|
]
|
|
},
|
|
selected: {
|
|
false: "",
|
|
true:
|
|
[
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_64%,white_36%),color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg)))]",
|
|
"shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent),0_14px_24px_color-mix(in_oklch,var(--color-primary)_7%,transparent)]",
|
|
"[&>td]:bg-[color-mix(in_oklch,var(--color-primary-container)_26%,transparent)]",
|
|
"[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_40%,transparent)]"
|
|
]
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
interactive: true,
|
|
selected: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableCellVariants = cva(
|
|
"px-4 first:pl-5 last:pr-5 align-top text-[var(--color-card-foreground)]",
|
|
{
|
|
variants: {
|
|
align: {
|
|
start: "text-left",
|
|
center: "text-center",
|
|
end: "text-right"
|
|
},
|
|
density: {
|
|
comfortable: "py-4 text-sm leading-6",
|
|
compact: "py-3 text-[0.8125rem] leading-5"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
align: "start",
|
|
density: "comfortable"
|
|
}
|
|
}
|
|
);
|
|
|
|
export const dataTableSearchContainerVariants = cva(
|
|
"w-full max-w-[23.5rem] min-w-[15rem]"
|
|
);
|
|
|
|
export const dataTablePaginationVariants = cva(
|
|
[
|
|
"flex flex-wrap items-center justify-between gap-3 border-t px-5 py-3",
|
|
"border-[color-mix(in_oklch,var(--color-border)_72%,transparent)]",
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%))]",
|
|
"transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
|
|
"[&>*]:transition-[background-color,border-color,box-shadow,opacity] [&>*]:duration-[var(--dur-base)] [&>*]:ease-[var(--ease-standard)]",
|
|
"motion-reduce:[&>*]:transition-none"
|
|
]
|
|
);
|
|
|
|
export const dataTableSelectionBarVariants = cva(
|
|
[
|
|
"flex flex-wrap items-center justify-between gap-3 rounded-[calc(var(--ui-card-radius)-0.2rem)]",
|
|
"border border-[color-mix(in_oklch,var(--color-primary)_26%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]",
|
|
"bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_70%,white_30%),color-mix(in_oklch,var(--color-primary)_6%,var(--ui-card-default-bg)))] px-4 py-3.5",
|
|
"shadow-[var(--ui-card-subtle-shadow)]",
|
|
"motion-enter-fade motion-enter-rise",
|
|
"transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
|
|
"[&>*]:transition-opacity [&>*]:duration-[var(--dur-fast)] [&>*]:ease-[var(--ease-standard)]",
|
|
"motion-reduce:[&>*]:transition-none"
|
|
]
|
|
);
|
|
|
|
export const dataTableStatusVariants = cva(
|
|
"grid min-h-52 place-items-center px-6 py-8"
|
|
);
|