@emara/ui 1.1.0

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

@@ -0,0 +1,270 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiMoreLine,
+  RiShareLine,
+  RiUserAddLine,
+} from "@remixicon/react";
+
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Overlays/DropdownMenu",
+  component: DropdownMenu,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" aria-label="More actions">
+          <RiMoreLine />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="md">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuItem icon={<RiEditLine />}>Edit</DropdownMenuItem>
+        <DropdownMenuItem icon={<RiShareLine />}>Share</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" icon={<RiDeleteBinLine />}>
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">File</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="md">
+        <DropdownMenuItem icon={<RiEditLine />} kbd={["⌘", "S"]}>
+          Save
+        </DropdownMenuItem>
+        <DropdownMenuItem icon={<RiShareLine />} kbd={["⌘", "⇧", "S"]}>
+          Save as…
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem icon={<RiUserAddLine />} kbd={["⌘", "I"]}>
+          Invite collaborators
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Account</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="lg">
+        <DropdownMenuItem icon={<RiEditLine />} description="Update your profile information.">
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          icon={<RiShareLine />}
+          description="Manage your active sessions and tokens."
+        >
+          Security
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          variant="destructive"
+          icon={<RiDeleteBinLine />}
+          description="Permanently delete your account and data."
+        >
+          Delete account
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const CheckboxItems: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [showStatus, setShowStatus] = useState(true);
+      const [showActivity, setShowActivity] = useState(false);
+      const [showPanel, setShowPanel] = useState(false);
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">View</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent width="md">
+            <DropdownMenuLabel>Panels</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+              Status bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={showActivity} onCheckedChange={setShowActivity}>
+              Activity feed
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+              Side panel
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const RadioItems: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [position, setPosition] = useState("bottom");
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Panel position: {position}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent width="md">
+            <DropdownMenuLabel>Position</DropdownMenuLabel>
+            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+              <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const Submenus: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Settings</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="md">
+        <DropdownMenuLabel>Account</DropdownMenuLabel>
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Team</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Members</DropdownMenuItem>
+            <DropdownMenuItem>Roles</DropdownMenuItem>
+            <DropdownMenuItem>Invitations</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Notifications</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>SMS</DropdownMenuItem>
+            <DropdownMenuItem>Push</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm">
+            sm
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="sm">
+          <DropdownMenuItem icon={<RiEditLine />}>Compact item</DropdownMenuItem>
+          <DropdownMenuItem icon={<RiShareLine />}>Share</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="default">
+            md
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="md">
+          <DropdownMenuItem icon={<RiEditLine />}>Comfortable item</DropdownMenuItem>
+          <DropdownMenuItem icon={<RiShareLine />}>Share</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+};
+
+export const LoadingItem: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Actions</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="md">
+        <DropdownMenuItem icon={<RiEditLine />}>Edit</DropdownMenuItem>
+        <DropdownMenuItem icon={<RiShareLine />} loading>
+          Publishing…
+        </DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" icon={<RiDeleteBinLine />}>
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const Grouped: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">My account</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent width="md">
+        <DropdownMenuLabel>My account</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem icon={<RiEditLine />}>
+            Profile
+            <DropdownMenuShortcut keys={["⌘", "P"]} />
+          </DropdownMenuItem>
+          <DropdownMenuItem icon={<RiShareLine />}>
+            Billing
+            <DropdownMenuShortcut keys={["⌘", "B"]} />
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Team</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem icon={<RiUserAddLine />}>Invite users</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

package/components/ui/dropdown-menu.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-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 §5.
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+// ----------------------------------------------------------------------------
+// DropdownMenuContent + size/width variants
+// ----------------------------------------------------------------------------
+
+const dropdownContentVariants = 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 [&_[data-slot=item]]:py-1 [&_[data-slot=item]]:ps-7 [&_[data-slot=item]]:pe-2",
+        md: "py-1 text-sm [&_[data-slot=item]]:py-1.5 [&_[data-slot=item]]:ps-8 [&_[data-slot=item]]:pe-2",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type DropdownWidth = "fit" | "trigger" | "sm" | "md" | "lg" | number;
+
+const WIDTH_PX: Record<Exclude<DropdownWidth, "fit" | "trigger" | number>, number> = {
+  sm: 192,
+  md: 256,
+  lg: 320,
+};
+
+function resolveWidthStyle(width: DropdownWidth | undefined): React.CSSProperties | undefined {
+  if (width === undefined) return undefined;
+  if (width === "fit") return { width: "max-content" };
+  if (width === "trigger") return { width: "var(--radix-dropdown-menu-trigger-width)" };
+  if (typeof width === "number") return { width: width };
+  return { width: WIDTH_PX[width] };
+}
+
+type DropdownMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> &
+  VariantProps<typeof dropdownContentVariants> & {
+    width?: DropdownWidth;
+  };
+
+const DropdownMenuContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(function DropdownMenuContent({ className, size, width, sideOffset = 4, style, ...props }, ref) {
+  return (
+    <DropdownMenuPortal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        style={{ ...resolveWidthStyle(width), ...style }}
+        className={cn(dropdownContentVariants({ size }), className)}
+        {...props}
+      />
+    </DropdownMenuPortal>
+  );
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+// ----------------------------------------------------------------------------
+// Shared item visuals
+// ----------------------------------------------------------------------------
+
+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(" ");
+
+// ----------------------------------------------------------------------------
+// DropdownMenuItem (Emara additions: variant/icon/description/kbd/loading)
+// ----------------------------------------------------------------------------
+
+type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  variant?: "default" | "destructive";
+  icon?: React.ReactNode;
+  description?: React.ReactNode;
+  kbd?: string[];
+  loading?: boolean;
+  /**
+   * `true` keeps the menu open after selection (useful for filter-style menus
+   * that toggle multiple options). Default is `false` (menu closes).
+   */
+  inset?: boolean;
+};
+
+const DropdownMenuItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemProps
+>(function DropdownMenuItem(
+  {
+    className,
+    variant = "default",
+    icon,
+    description,
+    kbd,
+    loading = false,
+    inset = false,
+    children,
+    onSelect,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      data-slot="item"
+      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}
+    </DropdownMenuPrimitive.Item>
+  );
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+// ----------------------------------------------------------------------------
+// DropdownMenuCheckboxItem
+// ----------------------------------------------------------------------------
+
+const DropdownMenuCheckboxItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(function DropdownMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      data-slot="item"
+      className={cn(itemBase, className)}
+      {...props}
+    >
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCheckLine className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      <span className="flex-1">{children}</span>
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+// ----------------------------------------------------------------------------
+// DropdownMenuRadioItem
+// ----------------------------------------------------------------------------
+
+const DropdownMenuRadioItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      data-slot="item"
+      className={cn(itemBase, className)}
+      {...props}
+    >
+      <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCircleFill className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      <span className="flex-1">{children}</span>
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+// ----------------------------------------------------------------------------
+// DropdownMenuLabel / Separator / Shortcut
+// ----------------------------------------------------------------------------
+
+const DropdownMenuLabel = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(function DropdownMenuLabel({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+const DropdownMenuSeparator = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+/**
+ * DropdownMenuShortcut — display-only keyboard hint at the end of an item.
+ * Renders inline kbd-styled keys, separated by `+`. Stays LTR in RTL.
+ */
+function DropdownMenuShortcut({ 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>
+  );
+}
+
+// ----------------------------------------------------------------------------
+// DropdownMenuSubTrigger / DropdownMenuSubContent
+// ----------------------------------------------------------------------------
+
+const DropdownMenuSubTrigger = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    icon?: React.ReactNode;
+  }
+>(function DropdownMenuSubTrigger({ className, icon, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      data-slot="item"
+      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" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+});
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+const DropdownMenuSubContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.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}
+    />
+  );
+});
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  dropdownContentVariants,
+};
+export type { DropdownMenuContentProps, DropdownMenuItemProps };