82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { dialogOverlayVariants } from "./dialog.variants";
|
|
|
|
export const sheetOverlayVariants = dialogOverlayVariants;
|
|
|
|
export const sheetContentVariants = cva(
|
|
[
|
|
"fixed z-50 grid gap-5 overflow-y-auto",
|
|
"border bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
|
|
"[border-width:var(--ui-panel-border-width)] border-[var(--ui-panel-border)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
|
|
"px-5 py-6 sm:px-6",
|
|
"transition-[transform,opacity,box-shadow] duration-[var(--dur-slow)] ease-[var(--ease-emphasized)]",
|
|
"data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
|
|
],
|
|
{
|
|
variants: {
|
|
side: {
|
|
right: [
|
|
"inset-y-0 right-0 h-full rounded-l-[var(--ui-panel-radius)] border-l border-y-0 border-r-0",
|
|
"data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
|
|
],
|
|
left: [
|
|
"inset-y-0 left-0 h-full rounded-r-[var(--ui-panel-radius)] border-r border-y-0 border-l-0",
|
|
"data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full"
|
|
],
|
|
bottom: [
|
|
"bottom-0 left-1/2 max-h-[min(85vh,42rem)] w-[min(calc(100vw-1rem),52rem)] -translate-x-1/2",
|
|
"rounded-t-[var(--ui-panel-radius)] border-b-0",
|
|
"data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full"
|
|
]
|
|
},
|
|
size: {
|
|
sm: "",
|
|
md: "",
|
|
lg: ""
|
|
}
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
side: ["left", "right"],
|
|
size: "sm",
|
|
class: "w-[min(calc(100vw-1rem),22rem)]"
|
|
},
|
|
{
|
|
side: ["left", "right"],
|
|
size: "md",
|
|
class: "w-[min(calc(100vw-1rem),28rem)]"
|
|
},
|
|
{
|
|
side: ["left", "right"],
|
|
size: "lg",
|
|
class: "w-[min(calc(100vw-1rem),36rem)]"
|
|
},
|
|
{
|
|
side: "bottom",
|
|
size: "sm",
|
|
class: "pb-5"
|
|
},
|
|
{
|
|
side: "bottom",
|
|
size: "md",
|
|
class: "pb-5"
|
|
},
|
|
{
|
|
side: "bottom",
|
|
size: "lg",
|
|
class: "pb-6"
|
|
}
|
|
],
|
|
defaultVariants: {
|
|
side: "right",
|
|
size: "md"
|
|
}
|
|
}
|
|
);
|
|
|
|
export const sheetHeaderVariants = cva(["flex flex-col gap-2 text-left"]);
|
|
|
|
export const sheetFooterVariants = cva([
|
|
"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
|
|
]);
|