94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const emptyStateVariants = cva(
|
|
[
|
|
"grid gap-6 rounded-[var(--ui-card-radius)] border shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
|
|
"text-[var(--color-card-foreground)]",
|
|
getMotionRecipeClassNames("transition", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
tone: {
|
|
default: "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
|
|
subtle:
|
|
"border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
|
|
accent:
|
|
"border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
|
|
},
|
|
layout: {
|
|
default: "p-8 sm:p-10",
|
|
compact:
|
|
"gap-4 p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center sm:[&>[data-slot=media]]:row-span-2 sm:[&>[data-slot=header]]:justify-items-start sm:[&>[data-slot=actions]]:col-start-2 sm:[&>[data-slot=actions]]:justify-start",
|
|
split:
|
|
"p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:[&>[data-slot=media]]:col-start-2 lg:[&>[data-slot=media]]:row-span-2 lg:[&>[data-slot=media]]:justify-self-end lg:[&>[data-slot=header]]:col-start-1 lg:[&>[data-slot=actions]]:col-start-1 lg:[&>[data-slot=actions]]:justify-start"
|
|
},
|
|
align: {
|
|
center: "justify-items-center text-center",
|
|
start: "justify-items-start text-left"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
tone: "default",
|
|
layout: "default",
|
|
align: "center"
|
|
}
|
|
}
|
|
);
|
|
|
|
export const emptyStateMediaVariants = cva(
|
|
[
|
|
"grid place-items-center rounded-[var(--ui-card-radius)] border [border-width:var(--ui-card-border-width)]",
|
|
"border-[var(--ui-card-subtle-border)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--ui-card-subtle-bg))]",
|
|
"text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]"
|
|
],
|
|
{
|
|
variants: {
|
|
size: {
|
|
compact: "min-h-16 min-w-16 p-3",
|
|
default: "min-h-20 min-w-20 p-4",
|
|
hero: "min-h-28 min-w-28 p-6"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: "default"
|
|
}
|
|
}
|
|
);
|
|
|
|
export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2", {
|
|
variants: {
|
|
align: {
|
|
center: "justify-items-center text-center",
|
|
start: "justify-items-start text-left"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
align: "center"
|
|
}
|
|
});
|
|
|
|
export const emptyStateEyebrowVariants = cva(
|
|
"text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
|
|
);
|
|
|
|
export const emptyStateTitleVariants = cva(
|
|
"text-2xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
|
|
);
|
|
|
|
export const emptyStateDescriptionVariants = cva(
|
|
"max-w-[30rem] text-sm leading-6 text-[var(--color-muted-foreground)]"
|
|
);
|
|
|
|
export const emptyStateActionsVariants = cva("flex flex-wrap items-center gap-3", {
|
|
variants: {
|
|
layout: {
|
|
inline: "justify-center",
|
|
stack: "flex-col justify-start sm:flex-row"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
layout: "inline"
|
|
}
|
|
});
|