@emara/ui 1.1.0

package/components/ui/drawer.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "./button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+const meta: Meta<typeof Drawer> = {
+  title: "Overlays/Drawer",
+  component: Drawer,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>Refine results without leaving the page.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p className="text-sm">Filter controls go here.</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="ghost">Cancel</Button>
+          </DrawerClose>
+          <Button>Apply</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(["start", "end", "top", "bottom"] as const).map((p) => (
+        <Drawer key={p}>
+          <DrawerTrigger asChild>
+            <Button variant="outline" size="sm">
+              {p}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent position={p}>
+            <DrawerHeader>
+              <DrawerTitle>position=&quot;{p}&quot;</DrawerTitle>
+              <DrawerDescription>
+                Slides in from the {p === "start" ? "leading" : p === "end" ? "trailing" : p} edge.
+                {p === "start" || p === "end" ? " Flips in RTL." : ""}
+              </DrawerDescription>
+            </DrawerHeader>
+            <DrawerBody>
+              <p className="text-sm">Content for the {p} drawer.</p>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(["xs", "sm", "md", "lg", "xl", "full"] as const).map((s) => (
+        <Drawer key={s}>
+          <DrawerTrigger asChild>
+            <Button variant="outline" size="sm">
+              {s}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent size={s}>
+            <DrawerHeader>
+              <DrawerTitle>size=&quot;{s}&quot;</DrawerTitle>
+              <DrawerDescription>End-positioned drawer.</DrawerDescription>
+            </DrawerHeader>
+            <DrawerBody>
+              <p className="text-sm">
+                Horizontal widths: xs 280, sm 360, md 440 (default), lg 560, xl 720, full
+                full-screen.
+              </p>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </div>
+  ),
+};
+
+export const Scrollable: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Long content</Button>
+      </DrawerTrigger>
+      <DrawerContent scrollable>
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>Scroll the body when needed.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          {Array.from({ length: 40 }, (_, i) => (
+            <p key={i} className="mb-2 text-sm">
+              Filter option {i + 1}
+            </p>
+          ))}
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="ghost">Reset</Button>
+          </DrawerClose>
+          <Button>Apply</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+/**
+ * Opt out of body scroll. The whole drawer becomes a single scroll surface
+ * — header + body + footer flow together. Useful for short forms or when
+ * you want the entire content to scroll as one (e.g. a fixed-footer CTA
+ * that should scroll away with the body).
+ */
+export const NonScrollableBody: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Non-scrollable body</Button>
+      </DrawerTrigger>
+      <DrawerContent scrollable={false}>
+        <DrawerHeader>
+          <DrawerTitle>Short form</DrawerTitle>
+          <DrawerDescription>Body sizes to content; no inner scroll.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p className="text-sm">Just two lines.</p>
+          <p className="mt-2 text-sm">No overflow region.</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button>OK</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const Dismissible: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Non-dismissible drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent dismissible={false}>
+        <DrawerHeader>
+          <DrawerTitle>Action required</DrawerTitle>
+          <DrawerDescription>
+            No X, no Esc, no overlay click — use the explicit action below to close.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody />
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Acknowledge</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const ConfirmBeforeClose: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open (confirm on close)</Button>
+      </DrawerTrigger>
+      <DrawerContent confirmBeforeClose>
+        <DrawerHeader>
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Outside-click prompts confirmation — useful for dirty forms.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p className="text-sm">Try clicking on the overlay.</p>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open (loading)</Button>
+      </DrawerTrigger>
+      <DrawerContent loading />
+    </Drawer>
+  ),
+};

package/components/ui/drawer.tsx

@@ -0,0 +1,329 @@
+"use client";
+
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { RiCloseLine } from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Skeleton } from "./skeleton";
+
+// Context lets DrawerBody pick up the `scrollable` flag set on DrawerContent
+// without consumers having to thread it through.
+type DrawerContextValue = { scrollable: boolean };
+const DrawerContext = createContext<DrawerContextValue>({ scrollable: true });
+const useDrawerContext = () => useContext(DrawerContext);
+
+// Per docs/emara-ui-phase-3-components.md §2. Built on Radix Dialog (not Vaul)
+// so the slide animation, focus trap, and Esc handling stay consistent with
+// the rest of the system.
+
+const Drawer = DialogPrimitive.Root;
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerPortal = DialogPrimitive.Portal;
+const DrawerClose = DialogPrimitive.Close;
+
+// ----------------------------------------------------------------------------
+// DrawerOverlay — same as Dialog's overlay.
+// ----------------------------------------------------------------------------
+
+const DrawerOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(function DrawerOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "z-modal bg-foreground/50 fixed inset-0",
+        "data-[state=open]:animate-[fade-in_var(--duration-normal)_var(--ease-out)]",
+        "data-[state=closed]:animate-[fade-out_var(--duration-fast)_var(--ease-in)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+
+// ----------------------------------------------------------------------------
+// DrawerContent
+// ----------------------------------------------------------------------------
+
+type DrawerPosition = "start" | "end" | "top" | "bottom";
+
+const drawerContentVariants = cva(
+  ["fixed z-modal flex flex-col bg-card text-card-foreground shadow-xl", "border-border"].join(" "),
+  {
+    variants: {
+      position: {
+        // Logical sides — `start-0` is left in LTR, right in RTL.
+        start:
+          "inset-y-0 start-0 h-full border-e " +
+          "data-[state=open]:animate-[slide-in-from-start_var(--duration-normal)_var(--ease-out)] " +
+          "data-[state=closed]:animate-[slide-in-from-start_var(--duration-fast)_var(--ease-in)_reverse]",
+        end:
+          "inset-y-0 end-0 h-full border-s " +
+          "data-[state=open]:animate-[slide-in-from-end_var(--duration-normal)_var(--ease-out)] " +
+          "data-[state=closed]:animate-[slide-in-from-end_var(--duration-fast)_var(--ease-in)_reverse]",
+        top:
+          "inset-x-0 top-0 w-full border-b " +
+          "data-[state=open]:animate-[slide-in-from-top_var(--duration-normal)_var(--ease-out)] " +
+          "data-[state=closed]:animate-[slide-in-from-top_var(--duration-fast)_var(--ease-in)_reverse]",
+        bottom:
+          "inset-x-0 bottom-0 w-full border-t " +
+          "data-[state=open]:animate-[slide-in-from-bottom_var(--duration-normal)_var(--ease-out)] " +
+          "data-[state=closed]:animate-[slide-in-from-bottom_var(--duration-fast)_var(--ease-in)_reverse]",
+      },
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        full: "",
+      },
+    },
+    compoundVariants: [
+      // Horizontal (start/end) — width scale (tokens in design-tokens §11b)
+      { position: "start", size: "xs", class: "w-drawer-xs" },
+      { position: "start", size: "sm", class: "w-drawer-sm" },
+      { position: "start", size: "md", class: "w-drawer-md" },
+      { position: "start", size: "lg", class: "w-drawer-lg" },
+      { position: "start", size: "xl", class: "w-drawer-xl" },
+      { position: "start", size: "full", class: "w-screen" },
+      { position: "end", size: "xs", class: "w-drawer-xs" },
+      { position: "end", size: "sm", class: "w-drawer-sm" },
+      { position: "end", size: "md", class: "w-drawer-md" },
+      { position: "end", size: "lg", class: "w-drawer-lg" },
+      { position: "end", size: "xl", class: "w-drawer-xl" },
+      { position: "end", size: "full", class: "w-screen" },
+      // Vertical (top/bottom) — height scale
+      { position: "top", size: "xs", class: "h-drawer-xs" },
+      { position: "top", size: "sm", class: "h-drawer-sm" },
+      { position: "top", size: "md", class: "h-drawer-md" },
+      { position: "top", size: "lg", class: "h-drawer-lg" },
+      { position: "top", size: "xl", class: "h-drawer-xl" },
+      { position: "top", size: "full", class: "h-screen" },
+      { position: "bottom", size: "xs", class: "h-drawer-xs" },
+      { position: "bottom", size: "sm", class: "h-drawer-sm" },
+      { position: "bottom", size: "md", class: "h-drawer-md" },
+      { position: "bottom", size: "lg", class: "h-drawer-lg" },
+      { position: "bottom", size: "xl", class: "h-drawer-xl" },
+      { position: "bottom", size: "full", class: "h-screen" },
+    ],
+    defaultVariants: {
+      position: "end",
+      size: "md",
+    },
+  },
+);
+
+type DrawerContentVariants = VariantProps<typeof drawerContentVariants>;
+
+type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  DrawerContentVariants & {
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    confirmBeforeClose?: boolean | (() => boolean | Promise<boolean>);
+    loading?: boolean;
+    scrollable?: boolean;
+    hideCloseButton?: boolean;
+    /**
+     * When `false`, the drawer can only be closed programmatically:
+     * - hides the close X
+     * - blocks overlay click
+     * - blocks Escape
+     */
+    dismissible?: boolean;
+  };
+
+const DrawerContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(function DrawerContent(
+  {
+    className,
+    position,
+    size,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    confirmBeforeClose,
+    loading = false,
+    scrollable = true,
+    hideCloseButton = false,
+    dismissible = true,
+    onPointerDownOutside,
+    onEscapeKeyDown,
+    onInteractOutside,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const guardedClose = async (e: Event): Promise<void> => {
+    if (!confirmBeforeClose) return;
+    if (typeof confirmBeforeClose === "function") {
+      const ok = await confirmBeforeClose();
+      if (!ok) e.preventDefault();
+      return;
+    }
+    const ok = window.confirm("Discard unsaved changes?");
+    if (!ok) e.preventDefault();
+  };
+
+  const allowOverlayClose = dismissible && closeOnOverlayClick;
+  const allowEscape = dismissible && closeOnEscape;
+
+  const drawerCtx = useMemo<DrawerContextValue>(() => ({ scrollable }), [scrollable]);
+
+  return (
+    <DrawerContext.Provider value={drawerCtx}>
+      <DrawerPortal>
+        <DrawerOverlay />
+        <DialogPrimitive.Content
+          ref={ref}
+          onPointerDownOutside={(e) => {
+            if (!allowOverlayClose) e.preventDefault();
+            onPointerDownOutside?.(e);
+          }}
+          onEscapeKeyDown={(e) => {
+            if (!allowEscape) e.preventDefault();
+            onEscapeKeyDown?.(e);
+          }}
+          onInteractOutside={async (e) => {
+            if (confirmBeforeClose && allowOverlayClose) {
+              await guardedClose(e as unknown as Event);
+            }
+            onInteractOutside?.(e);
+          }}
+          className={cn(drawerContentVariants({ position, size }), className)}
+          {...props}
+        >
+          {loading ? (
+            <div className="space-y-3 p-6" aria-busy="true" aria-live="polite">
+              <Skeleton className="h-6 w-2/5" />
+              <Skeleton className="h-4 w-3/5" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-10/12" />
+              <Skeleton className="h-4 w-4/5" />
+            </div>
+          ) : (
+            children
+          )}
+
+          {dismissible && !hideCloseButton && !loading ? (
+            <DialogPrimitive.Close
+              aria-label="Close"
+              className={cn(
+                "absolute end-3 top-3 inline-flex size-7 items-center justify-center rounded-md",
+                "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "[&_svg]:size-4 [&_svg]:shrink-0",
+              )}
+            >
+              <RiCloseLine />
+            </DialogPrimitive.Close>
+          ) : null}
+
+          {/* Overflow + scroll containment is owned by DrawerBody — the
+            `scrollable` flag on DrawerContent gates how DrawerBody styles
+            itself via DrawerContext. */}
+        </DialogPrimitive.Content>
+      </DrawerPortal>
+    </DrawerContext.Provider>
+  );
+});
+DrawerContent.displayName = "DrawerContent";
+
+// ----------------------------------------------------------------------------
+// DrawerHeader / Title / Description / Body / Footer
+// ----------------------------------------------------------------------------
+
+const DrawerHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DrawerHeader({ className, ...props }, ref) {
+    return (
+      <div ref={ref} className={cn("space-y-1.5 p-6 pe-12 text-start", className)} {...props} />
+    );
+  },
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DrawerTitle({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn("text-lg leading-snug font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+});
+DrawerTitle.displayName = "DrawerTitle";
+
+const DrawerDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DrawerDescription({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+});
+DrawerDescription.displayName = "DrawerDescription";
+
+/**
+ * Scroll region between header and footer. Always flex-1; overflow behavior
+ * follows DrawerContent's `scrollable` flag (default true) — when false, the
+ * body sizes to its content and DrawerContent's own height controls overflow.
+ */
+const DrawerBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DrawerBody({ className, ...props }, ref) {
+    const { scrollable } = useDrawerContext();
+    return (
+      <div
+        ref={ref}
+        className={cn("flex-1 px-6 pb-6", scrollable && "overflow-y-auto", className)}
+        {...props}
+      />
+    );
+  },
+);
+DrawerBody.displayName = "DrawerBody";
+
+const DrawerFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DrawerFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "border-border flex flex-col-reverse items-stretch gap-2 border-t p-4 sm:flex-row sm:items-center sm:justify-end",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+  drawerContentVariants,
+};
+export type { DrawerContentProps, DrawerPosition };