feat: add sheet component and docs qa baseline

2026-03-19 18:46:20 +08:00
parent 71ebb010b9
commit f318f94c9a
28 changed files with 1799 additions and 91 deletions
@@ -0,0 +1,79 @@
+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(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "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(--radius-lg)] 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(--radius-lg)] 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(--radius-lg)] 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 px-5 pt-6 sm:px-6"
+      },
+      {
+        side: "bottom",
+        size: "md",
+        class: "pb-5 px-5 pt-6 sm:px-6"
+      },
+      {
+        side: "bottom",
+        size: "lg",
+        class: "pb-6 px-5 pt-6 sm:px-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"
+]);