Initial Commit

packages/ui/react/react-ui/src/components/sheet/sheet.variants.md

@@ -0,0 +1,66 @@
+# Sheet Variants (cva config)
+
+## Purpose
+
+`sheetOverlayVariants`, `sheetContentVariants`, `sheetHeaderVariants`, `sheetFooterVariants`, `sheetTitleVariants`, `sheetDescriptionVariants`, and `sheetCloseButtonVariants` are the cva configurations powering every `<Sheet>` slot. They are split from `sheet.tsx` into their own module so an ejected source copy under `npx shadcn@latest add @suaveplan/sheet` keeps the cva configurations in a dedicated file. Theme overrides flow through `useThemedVariants("Sheet<Slot>")`.
+
+The content cva is the only slot with a variant axis (`side`); all other slots are layout-only so consumers can compose freely.
+
+## Features
+
+- Overlay: `fixed inset-0 bg-black/80` with fade animations driven by Radix's `data-state`.
+- Content: four sides (`top`, `right`, `bottom`, `left`) with matching slide-in/slide-out animations and edge anchoring.
+- `start-0` / `end-0` (logical properties) on `left`/`right` so RTL flips automatically.
+- Header / footer / title / description: layout-only utilities matching the shadcn upstream `sheet` recipe.
+- Close button: pinned at `end-4 top-4` (logical), focus-ring + opacity hover.
+- `motion-reduce:animate-none motion-reduce:transition-none` on the content so the slide collapses under reduced-motion.
+
+## Usage: Basic Example
+
+```ts
+import { sheetContentVariants, sheetTitleVariants } from "@suaveplan/react-ui";
+
+const contentClassName = sheetContentVariants({ side: "right" });
+const titleClassName = sheetTitleVariants();
+```
+
+## Usage: Advanced Example
+
+```ts
+import { sheetContentVariants, cn } from "@suaveplan/react-ui";
+
+export function CustomSidePanel() {
+    return (
+        <div
+            role="dialog"
+            aria-modal="true"
+            className={cn(
+                sheetContentVariants({ side: "left" }),
+                "border-l-4 border-primary"
+            )}
+        >
+            …
+        </div>
+    );
+}
+```
+
+## API Reference
+
+### `sheetOverlayVariants(): string`
+
+Returns the overlay backdrop classes; takes no arguments.
+
+### `sheetContentVariants(props?: { side?: "top" | "right" | "bottom" | "left" }): string`
+
+Returns the panel classes. Omitted side falls back to `defaultVariants.side = "right"`.
+
+### `sheetHeaderVariants(): string` / `sheetFooterVariants(): string` / `sheetTitleVariants(): string` / `sheetDescriptionVariants(): string` / `sheetCloseButtonVariants(): string`
+
+Each returns a single class string. None take arguments.
+
+## Implementation Notes
+
+- The `left` and `right` side classes use logical properties (`start-0` / `end-0` and `border-s` / `border-e`) so the panel anchors correctly in both LTR and RTL — RTL automatically flips `start` ↔ `end` via the CSS spec.
+- The chassis NEVER assigns a numeric `z-index`. Radix's portal hosts the content above all page content via DOM placement.
+- The slide-in/out class names (`slide-in-from-top`, `slide-out-to-right`, …) require the consumer's Tailwind setup to load `tailwindcss-animate` — the chassis ships this via `@suaveplan/react-ui/styles/global.css`.