ai-design-system 0.1.0

package/components/primitives/Drawer/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Drawer Primitive
+ *
+ * Central export point for the Drawer primitive component and its related types.
+ */
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './Drawer'
+
+export type {
+  DrawerProps,
+  DrawerOverlayProps,
+  DrawerContentProps,
+  DrawerHeaderProps,
+  DrawerFooterProps,
+  DrawerTitleProps,
+  DrawerDescriptionProps,
+} from './Drawer'

package/components/primitives/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./DropdownMenu"
+import { Button } from "../Button"
+import * as React from "react"
+
+const meta = {
+  title: "Primitives/DropdownMenu",
+  component: DropdownMenu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Actions</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          New File
+          <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Save
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Print
+          <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const WithCheckboxes: Story = {
+  render: () => {
+    const [showPanel, setShowPanel] = React.useState(true)
+    const [showToolbar, setShowToolbar] = React.useState(false)
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">View</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Panels</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            checked={showPanel}
+            onCheckedChange={setShowPanel}
+          >
+            Side Panel
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showToolbar}
+            onCheckedChange={setShowToolbar}
+          >
+            Toolbar
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  },
+}
+
+export const WithRadioGroup: Story = {
+  render: () => {
+    const [position, setPosition] = React.useState("bottom")
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Position</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  },
+}
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Open Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+}

package/components/primitives/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import {
+  DropdownMenu as ShadcnDropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu"
+
+/**
+ * DropdownMenu Primitive
+ *
+ * Displays a menu with actions or options triggered by a button.
+ * Built on Radix UI DropdownMenu primitive with WCAG 2.1 Level AA compliance.
+ *
+ * @see https://ui.shadcn.com/docs/components/dropdown-menu
+ * @see https://www.radix-ui.com/primitives/docs/components/dropdown-menu
+ */
+
+export type DropdownMenuProps = React.ComponentProps<typeof ShadcnDropdownMenu>
+
+/**
+ * DropdownMenu component
+ *
+ * Displays a menu with actions or options triggered by a button.
+ * Built on Radix UI DropdownMenu primitive with full accessibility support.
+ *
+ * Features:
+ * - Keyboard navigation
+ * - Checkbox and radio item support
+ * - Submenu support
+ * - Keyboard shortcuts display
+ * - ARIA attributes
+ * - Dark mode support
+ */
+export const DropdownMenu = React.forwardRef<
+  React.ElementRef<typeof ShadcnDropdownMenu>,
+  DropdownMenuProps
+>((props, ref) => {
+  return <ShadcnDropdownMenu {...props} />
+})
+
+DropdownMenu.displayName = "DropdownMenu"
+
+/**
+ * Re-export DropdownMenu sub-components for composition
+ */
+export {
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+}

package/components/primitives/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from "./DropdownMenu"

package/components/primitives/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCard";
+
+const meta: Meta<typeof HoverCard> = {
+  title: "Primitives/HoverCard",
+  component: HoverCard,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger>Hover me</HoverCardTrigger>
+      <HoverCardContent>
+        <div className="space-y-2">
+          <h4 className="text-sm font-semibold">@username</h4>
+          <p className="text-sm">Additional information appears here.</p>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};

package/components/primitives/HoverCard/HoverCard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import {
+  HoverCard as ShadcnHoverCard,
+  HoverCardContent as ShadcnHoverCardContent,
+  HoverCardTrigger as ShadcnHoverCardTrigger,
+} from "@/components/ui/hover-card";
+
+export type HoverCardProps = React.ComponentProps<typeof ShadcnHoverCard>;
+export type HoverCardTriggerProps = React.ComponentProps<typeof ShadcnHoverCardTrigger>;
+export type HoverCardContentProps = React.ComponentProps<typeof ShadcnHoverCardContent>;
+
+export const HoverCard = React.memo<HoverCardProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnHoverCard>, HoverCardProps>(
+    (props, ref) => {
+      return <ShadcnHoverCard {...props} />;
+    }
+  )
+);
+HoverCard.displayName = "HoverCard";
+
+export const HoverCardTrigger = React.memo<HoverCardTriggerProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnHoverCardTrigger>, HoverCardTriggerProps>(
+    (props, ref) => {
+      return <ShadcnHoverCardTrigger ref={ref} {...props} />;
+    }
+  )
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
+
+export const HoverCardContent = React.memo<HoverCardContentProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnHoverCardContent>, HoverCardContentProps>(
+    (props, ref) => {
+      return <ShadcnHoverCardContent ref={ref} {...props} />;
+    }
+  )
+);
+HoverCardContent.displayName = "HoverCardContent";

package/components/primitives/HoverCard/index.ts

@@ -0,0 +1,8 @@
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  type HoverCardProps,
+  type HoverCardContentProps,
+  type HoverCardTriggerProps,
+} from "./HoverCard";

package/components/primitives/Icon/Icon.stories.tsx

@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon } from "./Icon";
+import { iconRegistry } from "@/registry/icons";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Icon> = {
+  title: "Primitives/Icon",
+  component: Icon,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    name: {
+      control: "select",
+      options: iconRegistry.getNames(),
+      description: "Name of the icon from the registry",
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "default", "lg", "xl"],
+      description: "Size variant of the icon",
+    },
+    "aria-label": {
+      control: "text",
+      description: "Accessibility label for screen readers",
+    },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default icon display
+ */
+export const Default: Story = {
+  args: {
+    name: "check",
+    size: "default",
+  },
+};
+
+/**
+ * Icon gallery showing all available icons
+ */
+export const AllIcons: Story = {
+  render: () => {
+    const iconNames = iconRegistry.getNames();
+
+    return (
+      <div className="space-y-6">
+        <div>
+          <h3 className="mb-4 font-semibold text-lg">
+            All Available Icons ({iconNames.length})
+          </h3>
+          <div className="grid grid-cols-8 gap-4 md:grid-cols-12">
+            {iconNames.map((name) => (
+              <div
+                key={name}
+                className="flex flex-col items-center gap-2 rounded-md border border-border p-3 hover:bg-accent"
+              >
+                <Icon name={name} size="default" aria-label={name} />
+                <span className="text-center text-muted-foreground text-xs">
+                  {name}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Size variants comparison
+ */
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="flex items-center gap-8">
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="check" size="xs" />
+          <span className="text-muted-foreground text-xs">xs (12px)</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="check" size="sm" />
+          <span className="text-muted-foreground text-xs">sm (16px)</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="check" size="default" />
+          <span className="text-muted-foreground text-xs">default (20px)</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="check" size="lg" />
+          <span className="text-muted-foreground text-xs">lg (24px)</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="check" size="xl" />
+          <span className="text-muted-foreground text-xs">xl (32px)</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Icons with different colors (inherits from currentColor)
+ */
+export const WithColor: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="check-circle" size="lg" className="text-green-600" />
+        <span className="text-muted-foreground text-xs">Success</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="alert-circle" size="lg" className="text-yellow-600" />
+        <span className="text-muted-foreground text-xs">Warning</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="info" size="lg" className="text-blue-600" />
+        <span className="text-muted-foreground text-xs">Info</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="x" size="lg" className="text-red-600" />
+        <span className="text-muted-foreground text-xs">Error</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Icon name="settings" size="lg" className="text-purple-600" />
+        <span className="text-muted-foreground text-xs">Custom</span>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Accessible icons with aria-label
+ */
+export const Accessible: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="rounded-md border border-border bg-muted p-4">
+        <p className="mb-4 text-sm">
+          Icons with aria-label are announced by screen readers:
+        </p>
+        <div className="flex items-center gap-4">
+          <Icon name="check" size="default" aria-label="Success" />
+          <Icon name="x" size="default" aria-label="Error" />
+          <Icon name="info" size="default" aria-label="Information" />
+          <Icon name="warning" size="default" aria-label="Warning" />
+        </div>
+      </div>
+      <div className="rounded-md border border-border bg-muted p-4">
+        <p className="mb-4 text-sm">
+          Decorative icons without aria-label are hidden from screen readers:
+        </p>
+        <div className="flex items-center gap-4">
+          <Icon name="chevron-right" size="sm" />
+          <Icon name="menu" size="sm" />
+          <Icon name="more-horizontal" size="sm" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Error handling for missing icons
+ */
+export const NotFound: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="rounded-md border border-border bg-muted p-4">
+        <p className="mb-4 text-sm">
+          Missing icons are handled gracefully (returns null and logs warning in
+          dev):
+        </p>
+        <div className="flex items-center gap-4">
+          <Icon name="check" size="default" />
+          <Icon name="invalid-icon-name" size="default" />
+          <Icon name="x" size="default" />
+        </div>
+        <p className="mt-4 text-muted-foreground text-xs">
+          Open browser console to see the warning for "invalid-icon-name"
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Icons in buttons
+ */
+export const InButtons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button>
+        <Icon name="plus" size="sm" className="mr-2" />
+        Add Item
+      </Button>
+      <Button variant="secondary">
+        <Icon name="download" size="sm" className="mr-2" />
+        Download
+      </Button>
+      <Button variant="outline">
+        <Icon name="settings" size="sm" className="mr-2" />
+        Settings
+      </Button>
+      <Button variant="ghost">
+        <Icon name="refresh-cw" size="sm" className="mr-2" />
+        Refresh
+      </Button>
+      <Button variant="destructive">
+        <Icon name="x" size="sm" className="mr-2" />
+        Delete
+      </Button>
+      <Button size="icon" variant="outline">
+        <Icon name="search" size="sm" aria-label="Search" />
+      </Button>
+      <Button size="icon" variant="ghost">
+        <Icon name="more-vertical" size="sm" aria-label="More options" />
+      </Button>
+    </div>
+  ),
+};
+
+/**
+ * Loading spinner animation
+ */
+export const LoadingSpinner: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Icon
+        name="loader-2"
+        size="default"
+        className="animate-spin"
+        aria-label="Loading"
+      />
+      <Icon
+        name="loader-2"
+        size="lg"
+        className="animate-spin text-primary"
+        aria-label="Loading"
+      />
+      <Icon
+        name="loader-2"
+        size="xl"
+        className="animate-spin text-muted-foreground"
+        aria-label="Loading"
+      />
+    </div>
+  ),
+};
+
+/**
+ * Navigation icons
+ */
+export const Navigation: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="mb-3 font-semibold text-sm">Chevrons</h4>
+        <div className="flex items-center gap-4">
+          <Icon name="chevron-up" size="default" />
+          <Icon name="chevron-down" size="default" />
+          <Icon name="chevron-left" size="default" />
+          <Icon name="chevron-right" size="default" />
+          <Icon name="chevrons-up-down" size="default" />
+        </div>
+      </div>
+      <div>
+        <h4 className="mb-3 font-semibold text-sm">Arrows</h4>
+        <div className="flex items-center gap-4">
+          <Icon name="arrow-left" size="default" />
+          <Icon name="arrow-right" size="default" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/components/primitives/Icon/Icon.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { iconRegistry, type IconName } from "@/registry/icons";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+/**
+ * Icon Primitive
+ *
+ * A reusable icon component that uses the centralized icon registry.
+ * All icons MUST use this component or the iconRegistry directly.
+ *
+ * Features:
+ * - Size variants (xs, sm, default, lg, xl)
+ * - Accessibility support with aria-label
+ * - Error handling for missing icons
+ * - Color inherits from currentColor
+ */
+
+const iconVariants = cva("inline-block flex-shrink-0", {
+  variants: {
+    size: {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      default: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-8 w-8",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export interface IconProps
+  extends Omit<React.SVGProps<SVGSVGElement>, "viewBox" | "children">,
+    VariantProps<typeof iconVariants> {
+  /**
+   * Name of the icon from the icon registry
+   * Type-safe: only accepts valid icon names
+   */
+  name: IconName | string;
+  /**
+   * Optional aria-label for accessibility
+   * If provided, aria-hidden will be false
+   */
+  "aria-label"?: string;
+}
+
+/**
+ * Icon component - renders icons from the icon registry
+ */
+export const Icon = React.memo<IconProps>(
+  ({ name, size, className, "aria-label": ariaLabel, ...props }) => {
+    const icon = iconRegistry.get(name);
+
+    if (!icon) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn(
+          `Icon "${name}" not found in registry. Available icons:`,
+          iconRegistry.getNames().join(", ")
+        );
+      }
+      return null;
+    }
+
+    return (
+      <svg
+        viewBox={icon.viewBox}
+        className={cn(iconVariants({ size }), className)}
+        aria-hidden={!ariaLabel}
+        aria-label={ariaLabel}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d={icon.path} />
+      </svg>
+    );
+  }
+);
+
+Icon.displayName = "Icon";