@emara/ui 1.1.0

package/components/ui/context-menu.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiFileCopyLine,
+  RiShareLine,
+} from "@remixicon/react";
+
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+
+const meta: Meta<typeof ContextMenu> = {
+  title: "Overlays/ContextMenu",
+  component: ContextMenu,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContextMenu>;
+
+function Surface({ label }: { label: string }) {
+  return (
+    <div className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
+      {label}
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <Surface label="Right-click anywhere in this area" />
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLabel>Actions</ContextMenuLabel>
+        <ContextMenuItem icon={<RiEditLine />}>Edit</ContextMenuItem>
+        <ContextMenuItem icon={<RiFileCopyLine />}>Duplicate</ContextMenuItem>
+        <ContextMenuItem icon={<RiShareLine />}>Share</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive" icon={<RiDeleteBinLine />}>
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <Surface label="Right-click for shortcuts" />
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem icon={<RiFileCopyLine />}>
+          Copy
+          <ContextMenuShortcut keys={["⌘", "C"]} />
+        </ContextMenuItem>
+        <ContextMenuItem icon={<RiEditLine />}>
+          Paste
+          <ContextMenuShortcut keys={["⌘", "V"]} />
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive" icon={<RiDeleteBinLine />}>
+          Delete
+          <ContextMenuShortcut keys={["⌫"]} />
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const CheckboxItems: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [grid, setGrid] = useState(true);
+      const [guides, setGuides] = useState(false);
+      const [snap, setSnap] = useState(false);
+      return (
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <Surface label="Right-click — view toggles" />
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuLabel>View</ContextMenuLabel>
+            <ContextMenuCheckboxItem checked={grid} onCheckedChange={setGrid}>
+              Show grid
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem checked={guides} onCheckedChange={setGuides}>
+              Show guides
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem checked={snap} onCheckedChange={setSnap}>
+              Snap to grid
+            </ContextMenuCheckboxItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const RadioItems: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [zoom, setZoom] = useState("100");
+      return (
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <Surface label={`Right-click — zoom ${zoom}%`} />
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuLabel>Zoom</ContextMenuLabel>
+            <ContextMenuRadioGroup value={zoom} onValueChange={setZoom}>
+              <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="100">100%</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="150">150%</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="200">200%</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const Submenus: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <Surface label="Right-click for submenus" />
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Open</ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>Open with…</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>Visual Studio Code</ContextMenuItem>
+            <ContextMenuItem>Sublime Text</ContextMenuItem>
+            <ContextMenuItem>Vim</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>Documents</ContextMenuItem>
+            <ContextMenuItem>Downloads</ContextMenuItem>
+            <ContextMenuItem>Trash</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <Surface label="Right-click for descriptions" />
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          icon={<RiEditLine />}
+          description="Open the rich text editor."
+        >
+          Edit content
+        </ContextMenuItem>
+        <ContextMenuItem
+          icon={<RiShareLine />}
+          description="Generate a shareable link."
+        >
+          Share
+        </ContextMenuItem>
+        <ContextMenuItem
+          variant="destructive"
+          icon={<RiDeleteBinLine />}
+          description="Permanently remove."
+        >
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};

package/components/ui/context-menu.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { RiArrowRightSLine, RiCheckLine, RiCircleFill, RiLoader2Line } from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-3-components.md §6. Same API shape as DropdownMenu;
+// the only difference is `Trigger` wraps any element and listens for the
+// context-menu event (right-click / long-press) instead of being a button.
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+// ----------------------------------------------------------------------------
+// ContextMenuContent
+// ----------------------------------------------------------------------------
+
+const contextContentVariants = cva(
+  [
+    "z-popover min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+    "data-[state=open]:animate-[scale-in_var(--duration-fast)_var(--ease-out)]",
+    "data-[state=closed]:animate-[scale-out_var(--duration-fast)_var(--ease-in)]",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1 text-xs",
+        md: "py-1 text-sm",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> &
+  VariantProps<typeof contextContentVariants>;
+
+const ContextMenuContent = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(function ContextMenuContent({ className, size, ...props }, ref) {
+  return (
+    <ContextMenuPortal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(contextContentVariants({ size }), className)}
+        {...props}
+      />
+    </ContextMenuPortal>
+  );
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+
+// ----------------------------------------------------------------------------
+// Shared item base
+// ----------------------------------------------------------------------------
+
+const itemBase = [
+  "relative flex cursor-pointer select-none items-start gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none",
+  "transition-colors",
+  "focus:bg-accent focus:text-accent-foreground",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "aria-busy:cursor-progress",
+].join(" ");
+
+// ----------------------------------------------------------------------------
+// ContextMenuItem (Emara additions: variant/icon/description/kbd/loading)
+// ----------------------------------------------------------------------------
+
+type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+  variant?: "default" | "destructive";
+  icon?: React.ReactNode;
+  description?: React.ReactNode;
+  kbd?: string[];
+  loading?: boolean;
+  inset?: boolean;
+};
+
+const ContextMenuItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(function ContextMenuItem(
+  {
+    className,
+    variant = "default",
+    icon,
+    description,
+    kbd,
+    loading = false,
+    inset = false,
+    children,
+    onSelect,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      aria-busy={loading || undefined}
+      onSelect={(e) => {
+        if (loading) {
+          e.preventDefault();
+          return;
+        }
+        onSelect?.(e);
+      }}
+      className={cn(
+        itemBase,
+        variant === "destructive" &&
+          "text-destructive focus:bg-destructive/10 focus:text-destructive",
+        inset && "ps-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center text-current">
+        {loading ? <RiLoader2Line className="size-3.5 animate-spin" /> : (icon ?? null)}
+      </span>
+      <span className="flex flex-1 flex-col gap-0.5 leading-none">
+        <span>{children}</span>
+        {description ? <span className="text-muted-foreground text-xs">{description}</span> : null}
+      </span>
+      {kbd ? (
+        <span className="text-muted-foreground ms-auto inline-flex items-center gap-0.5 text-xs">
+          {kbd.map((k, i) => (
+            <kbd
+              key={`${k}-${i}`}
+              className="border-border bg-muted min-w-[1em] rounded border px-1 font-mono text-[10px] leading-tight"
+            >
+              {k}
+            </kbd>
+          ))}
+        </span>
+      ) : null}
+    </ContextMenuPrimitive.Item>
+  );
+});
+ContextMenuItem.displayName = "ContextMenuItem";
+
+// ----------------------------------------------------------------------------
+// CheckboxItem / RadioItem
+// ----------------------------------------------------------------------------
+
+const ContextMenuCheckboxItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem ref={ref} className={cn(itemBase, className)} {...props}>
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <RiCheckLine className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      <span className="flex-1">{children}</span>
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+const ContextMenuRadioItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem ref={ref} className={cn(itemBase, className)} {...props}>
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <RiCircleFill className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      <span className="flex-1">{children}</span>
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+// ----------------------------------------------------------------------------
+// Label / Separator / Shortcut
+// ----------------------------------------------------------------------------
+
+const ContextMenuLabel = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>
+>(function ContextMenuLabel({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+const ContextMenuSeparator = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      ref={ref}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+function ContextMenuShortcut({ keys, className }: { keys: string[]; className?: string }) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground ms-auto inline-flex items-center gap-0.5 text-xs",
+        className,
+      )}
+      dir="ltr"
+    >
+      {keys.map((k, i) => (
+        <span key={`${k}-${i}`} className="inline-flex items-center gap-0.5">
+          {i > 0 ? <span className="opacity-70">+</span> : null}
+          <kbd className="border-border bg-muted min-w-[1em] rounded border px-1 font-mono text-[10px] leading-tight">
+            {k}
+          </kbd>
+        </span>
+      ))}
+    </span>
+  );
+}
+
+// ----------------------------------------------------------------------------
+// SubTrigger / SubContent
+// ----------------------------------------------------------------------------
+
+const ContextMenuSubTrigger = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    icon?: React.ReactNode;
+  }
+>(function ContextMenuSubTrigger({ className, icon, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        itemBase,
+        "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center">
+        {icon ?? null}
+      </span>
+      <span className="flex-1">{children}</span>
+      <RiArrowRightSLine className="rtl-mirror ms-auto size-4" aria-hidden="true" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+
+const ContextMenuSubContent = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "border-border bg-popover text-popover-foreground z-popover min-w-32 overflow-hidden rounded-md border py-1 text-sm shadow-md",
+        "data-[state=open]:animate-[scale-in_var(--duration-fast)_var(--ease-out)]",
+        "data-[state=closed]:animate-[scale-out_var(--duration-fast)_var(--ease-in)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  contextContentVariants,
+};
+export type { ContextMenuContentProps, ContextMenuItemProps };