@emara/ui 1.1.0

package/components/ui/dialog.stories.tsx

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+const meta: Meta<typeof Dialog> = {
+  title: "Overlays/Dialog",
+  component: Dialog,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete this item?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. The item will be permanently removed.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <p className="text-sm">All related references will be cleared as well.</p>
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="ghost">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive">Delete</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(["xs", "sm", "md", "lg", "xl", "full"] as const).map((s) => (
+        <Dialog key={s}>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              {s}
+            </Button>
+          </DialogTrigger>
+          <DialogContent size={s}>
+            <DialogHeader>
+              <DialogTitle>size=&quot;{s}&quot;</DialogTitle>
+              <DialogDescription>Max width follows the size scale.</DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <p className="text-sm">
+                Body content. xs = 320px, sm = 420px, md = 560px (default), lg = 720px, xl = 960px,
+                full = viewport-fill with margin.
+              </p>
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button>OK</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      ))}
+    </div>
+  ),
+};
+
+export const Scrollable: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Long content</Button>
+      </DialogTrigger>
+      <DialogContent scrollable>
+        <DialogHeader>
+          <DialogTitle>Terms of service</DialogTitle>
+          <DialogDescription>Scroll to read everything.</DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          {Array.from({ length: 30 }, (_, i) => (
+            <p key={i} className="mb-3 text-sm">
+              Paragraph {i + 1}: lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+          ))}
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="ghost">Decline</Button>
+          </DialogClose>
+          <Button>I agree</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const ConfirmBeforeClose: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open (confirm on close)</Button>
+      </DialogTrigger>
+      <DialogContent confirmBeforeClose>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Closing this dialog will prompt to confirm — useful when fields are dirty.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <p className="text-sm">Try clicking outside or pressing Escape.</p>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open (loading)</Button>
+      </DialogTrigger>
+      <DialogContent loading />
+    </Dialog>
+  ),
+};
+
+export const NoCloseButton: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open (no X)</Button>
+      </DialogTrigger>
+      <DialogContent hideCloseButton>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>
+            Use the explicit footer buttons to dismiss this dialog.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="ghost">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button>Confirm</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const DisableOverlayClick: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Click outside won&apos;t close</Button>
+      </DialogTrigger>
+      <DialogContent closeOnOverlayClick={false}>
+        <DialogHeader>
+          <DialogTitle>Sticky dialog</DialogTitle>
+          <DialogDescription>
+            Use the X or Cancel button to dismiss. Outside-clicks are ignored.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>OK</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/components/ui/dialog.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { forwardRef } 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";
+
+// Per docs/emara-ui-phase-3-components.md §1.
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+// ----------------------------------------------------------------------------
+// DialogOverlay
+// ----------------------------------------------------------------------------
+
+const DialogOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(function DialogOverlay({ 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}
+    />
+  );
+});
+DialogOverlay.displayName = "DialogOverlay";
+
+// ----------------------------------------------------------------------------
+// DialogContent
+// ----------------------------------------------------------------------------
+
+const dialogContentVariants = cva(
+  [
+    "fixed start-1/2 top-1/2 z-modal grid w-full -translate-x-1/2 -translate-y-1/2 gap-0",
+    "rounded-lg border border-border bg-card text-card-foreground shadow-xl",
+    "data-[state=open]:animate-[scale-in_var(--duration-normal)_var(--ease-out)]",
+    "data-[state=closed]:animate-[scale-out_var(--duration-fast)_var(--ease-in)]",
+    // The start/-translate-x trick centers via logical start in LTR. RTL flips:
+    "rtl:start-auto rtl:end-1/2 rtl:translate-x-1/2",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "max-w-dialog-xs",
+        sm: "max-w-dialog-sm",
+        md: "max-w-dialog-md",
+        lg: "max-w-dialog-lg",
+        xl: "max-w-dialog-xl",
+        full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type DialogContentVariants = VariantProps<typeof dialogContentVariants>;
+
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  DialogContentVariants & {
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    confirmBeforeClose?: boolean | (() => boolean | Promise<boolean>);
+    loading?: boolean;
+    scrollable?: boolean;
+    hideCloseButton?: boolean;
+  };
+
+const DialogContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(function DialogContent(
+  {
+    className,
+    size,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    confirmBeforeClose,
+    loading = false,
+    scrollable = false,
+    hideCloseButton = false,
+    onPointerDownOutside,
+    onEscapeKeyDown,
+    onInteractOutside,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const guardedClose = async (e: Event): Promise<boolean> => {
+    if (!confirmBeforeClose) return false;
+    if (typeof confirmBeforeClose === "function") {
+      const ok = await confirmBeforeClose();
+      if (!ok) {
+        e.preventDefault();
+        return true;
+      }
+      return false;
+    }
+    const ok = window.confirm("Discard unsaved changes?");
+    if (!ok) {
+      e.preventDefault();
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        onPointerDownOutside={(e) => {
+          if (!closeOnOverlayClick) e.preventDefault();
+          onPointerDownOutside?.(e);
+        }}
+        onEscapeKeyDown={(e) => {
+          if (!closeOnEscape) e.preventDefault();
+          onEscapeKeyDown?.(e);
+        }}
+        onInteractOutside={async (e) => {
+          if (confirmBeforeClose) await guardedClose(e as unknown as Event);
+          onInteractOutside?.(e);
+        }}
+        className={cn(
+          dialogContentVariants({ size }),
+          // Optional internal scroll. When scrollable, the body slot becomes
+          // the overflow region (see DialogBody).
+          scrollable ? "max-h-[85vh]" : "",
+          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
+        )}
+
+        {!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}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = "DialogContent";
+
+// ----------------------------------------------------------------------------
+// DialogHeader / DialogTitle / DialogDescription / DialogBody / DialogFooter
+// ----------------------------------------------------------------------------
+
+const DialogHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DialogHeader({ className, ...props }, ref) {
+    return (
+      <div ref={ref} className={cn("space-y-1.5 p-6 pe-12 text-start", className)} {...props} />
+    );
+  },
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn("text-lg leading-snug font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+
+/**
+ * Emara addition — explicit body slot that owns padding + scroll behavior.
+ * Use inside DialogContent so the header and footer stay fixed while the body
+ * scrolls when content overflows.
+ */
+const DialogBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DialogBody({ className, ...props }, ref) {
+    return (
+      <div ref={ref} className={cn("flex-1 overflow-y-auto px-6 pb-6", className)} {...props} />
+    );
+  },
+);
+DialogBody.displayName = "DialogBody";
+
+const DialogFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function DialogFooter({ 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}
+      />
+    );
+  },
+);
+DialogFooter.displayName = "DialogFooter";
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogClose,
+  dialogContentVariants,
+};
+export type { DialogContentProps };

package/components/ui/divider.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Divider } from "./divider";
+
+const meta: Meta<typeof Divider> = {
+  title: "Foundations/Divider",
+  component: Divider,
+  parameters: { layout: "centered" },
+  argTypes: {
+    orientation: { control: "select", options: ["horizontal", "vertical"] },
+    variant: { control: "select", options: ["solid", "dashed", "dotted"] },
+    spacing: { control: "select", options: ["none", "sm", "md", "lg"] },
+    labelPosition: { control: "select", options: ["start", "center", "end"] },
+    decorative: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <Divider {...args} />
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="w-80 space-y-4">
+      <Divider variant="solid" />
+      <Divider variant="dashed" />
+      <Divider variant="dotted" />
+    </div>
+  ),
+};
+
+export const SpacingScale: Story = {
+  render: () => (
+    <div className="w-80 rounded-md border border-border p-2">
+      <p className="text-sm">none</p>
+      <Divider spacing="none" />
+      <p className="text-sm">sm</p>
+      <Divider spacing="sm" />
+      <p className="text-sm">md</p>
+      <Divider spacing="md" />
+      <p className="text-sm">lg</p>
+      <Divider spacing="lg" />
+      <p className="text-sm">end</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-12 items-center gap-3 text-sm">
+      <span>Section A</span>
+      <Divider orientation="vertical" />
+      <span>Section B</span>
+      <Divider orientation="vertical" variant="dashed" />
+      <span>Section C</span>
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-80 space-y-6">
+      <Divider label="OR" />
+      <Divider label="Section" labelPosition="start" />
+      <Divider label="Section" labelPosition="end" />
+    </div>
+  ),
+};
+
+export const NonDecorative: Story = {
+  args: { decorative: false },
+  render: (args) => (
+    <div className="w-80">
+      <Divider {...args} />
+    </div>
+  ),
+};

package/components/ui/divider.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-1-components.md §8.
+
+const lineVariants = cva("shrink-0 bg-transparent", {
+  variants: {
+    orientation: {
+      horizontal: "w-full h-px border-t",
+      vertical: "h-full w-px border-s",
+    },
+    variant: {
+      solid: "border-solid border-border",
+      dashed: "border-dashed border-border",
+      dotted: "border-dotted border-border",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+  },
+});
+
+const spacingVariants = cva("", {
+  variants: {
+    orientation: {
+      horizontal: "",
+      vertical: "",
+    },
+    spacing: {
+      none: "",
+      sm: "",
+      md: "",
+      lg: "",
+    },
+  },
+  compoundVariants: [
+    { orientation: "horizontal", spacing: "sm", class: "my-2" },
+    { orientation: "horizontal", spacing: "md", class: "my-4" },
+    { orientation: "horizontal", spacing: "lg", class: "my-6" },
+    { orientation: "vertical", spacing: "sm", class: "mx-2" },
+    { orientation: "vertical", spacing: "md", class: "mx-4" },
+    { orientation: "vertical", spacing: "lg", class: "mx-6" },
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    spacing: "none",
+  },
+});
+
+type DividerVariants = VariantProps<typeof lineVariants> & VariantProps<typeof spacingVariants>;
+
+type DividerProps = Omit<
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
+  "orientation" | "decorative"
+> &
+  DividerVariants & {
+    decorative?: boolean;
+    label?: React.ReactNode;
+    labelPosition?: "start" | "center" | "end";
+  };
+
+const Divider = forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  DividerProps
+>(function Divider(
+  {
+    className,
+    orientation = "horizontal",
+    variant = "solid",
+    spacing = "none",
+    decorative = true,
+    label,
+    labelPosition = "center",
+    ...props
+  },
+  ref,
+) {
+  const hasLabel = label !== undefined && label !== null && orientation === "horizontal";
+
+  if (!hasLabel) {
+    return (
+      <SeparatorPrimitive.Root
+        ref={ref}
+        orientation={orientation ?? "horizontal"}
+        decorative={decorative}
+        className={cn(
+          lineVariants({ orientation, variant }),
+          spacingVariants({ orientation, spacing }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+
+  // Labeled divider — render label between two flex-grown lines. We provide
+  // role/aria ourselves because we're no longer a single <hr>/<div role=separator>.
+  return (
+    <div
+      ref={ref as unknown as React.Ref<HTMLDivElement>}
+      role={decorative ? "presentation" : "separator"}
+      aria-orientation={decorative ? undefined : "horizontal"}
+      className={cn(
+        "flex w-full items-center gap-3 text-sm text-muted-foreground",
+        spacingVariants({ orientation: "horizontal", spacing }),
+        className,
+      )}
+      {...props}
+    >
+      {labelPosition !== "start" ? (
+        <span
+          aria-hidden="true"
+          className={cn(lineVariants({ orientation: "horizontal", variant }), "flex-1")}
+        />
+      ) : null}
+      <span>{label}</span>
+      {labelPosition !== "end" ? (
+        <span
+          aria-hidden="true"
+          className={cn(lineVariants({ orientation: "horizontal", variant }), "flex-1")}
+        />
+      ) : null}
+    </div>
+  );
+});
+Divider.displayName = "Divider";
+
+export { Divider, lineVariants };
+export type { DividerProps };