Sheet

1"use client";
2 
3import * as React from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { cva, type VariantProps } from "class-variance-authority";
6import { X } from "lucide-react";
7 
8import { cn } from "@/lib/utils";
9import {
10  overlaySurfaceVariants,
11  overlayVariants,
12  type OverlayProps,
13  type OverlaySurfaceProps,
14} from "@/components/ui/recipes";
15 
16/* ================================================================== */
17/*  SHEET — Full-height side panel (left / right / top / bottom)       */
18/* ================================================================== */
19 
20const Sheet = DialogPrimitive.Root;
21 
22const SheetTrigger = DialogPrimitive.Trigger;
23 
24const SheetClose = DialogPrimitive.Close;
25 
26const SheetPortal = DialogPrimitive.Portal;
27 
28/* ── Overlay ──────────────────────────────────────────────────────── */
29 
30const SheetOverlay = React.forwardRef<
31  React.ElementRef<typeof DialogPrimitive.Overlay>,
32  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & OverlayProps
33>(({ className, tone, ...props }, ref) => (
34  <DialogPrimitive.Overlay
35    ref={ref}
36    className={cn(overlayVariants({ tone }), className)}
37    {...props}
38  />
39));
40SheetOverlay.displayName = "SheetOverlay";
41 
42/* ── Content ──────────────────────────────────────────────────────── */
43 
44const sheetContentVariants = cva(
45  [
46    "fixed z-50 gap-4 p-6",
47    "data-[state=open]:animate-in data-[state=closed]:animate-out",
48    "motion-reduce:duration-100",
49  ].join(" "),
50  {
51    variants: {
52      side: {
53        top: "inset-x-0 top-0 border-t-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
54        bottom:
55          "inset-x-0 bottom-0 border-b-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
56        left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-l-0 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
57        right:
58          "inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-r-0 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
59      },
60    },
61    defaultVariants: {
62      side: "right",
63    },
64  },
65);
66 
67export interface SheetContentProps
68  extends
69// … truncated