@neynar/ui 0.1.1

package/src/components/ui/stories/container.stories.tsx

@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Container } from "../container";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Layout and Structure/Container",
+  component: Container,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A responsive container component that provides consistent max-width and padding across different screen sizes. Perfect for constraining content width and maintaining readable line lengths.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg", "xl", "full"],
+      description: "Maximum width preset: sm (3xl), md (5xl), lg (7xl), xl (none), full (full)",
+      defaultValue: "lg",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply to the container",
+    },
+    children: {
+      control: false,
+      description: "Content to be rendered inside the container",
+    },
+  },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    size: "lg",
+    className: "",
+    children: (
+      <div className="py-12">
+        <h1 className="text-3xl font-bold mb-4">Interactive Container</h1>
+        <p className="text-muted-foreground">
+          Use the controls below to test different container sizes and see how they affect
+          max-width constraints. The container automatically centers content and applies
+          responsive horizontal padding (px-4 on mobile, px-6 on small screens, px-8 on large screens).
+        </p>
+        <div className="mt-6 p-4 bg-muted rounded-lg">
+          <p className="text-sm text-muted-foreground">
+            This gray box helps visualize the container boundaries. Try different sizes
+            and resize your browser to see the responsive behavior.
+          </p>
+        </div>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground to test all container props and variants using Storybook controls.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="bg-red-50 dark:bg-red-950/20">
+        <Container size="sm">
+          <div className="py-6 text-center">
+            <h3 className="font-semibold mb-2">Small (max-w-3xl / 48rem)</h3>
+            <p className="text-sm text-muted-foreground">
+              Optimal for reading content, articles, and blog posts
+            </p>
+          </div>
+        </Container>
+      </div>
+      <div className="bg-orange-50 dark:bg-orange-950/20">
+        <Container size="md">
+          <div className="py-6 text-center">
+            <h3 className="font-semibold mb-2">Medium (max-w-5xl / 64rem)</h3>
+            <p className="text-sm text-muted-foreground">
+              Suitable for forms, documentation, and medium-width layouts
+            </p>
+          </div>
+        </Container>
+      </div>
+      <div className="bg-green-50 dark:bg-green-950/20">
+        <Container size="lg">
+          <div className="py-6 text-center">
+            <h3 className="font-semibold mb-2">Large (max-w-7xl / 80rem) - Default</h3>
+            <p className="text-sm text-muted-foreground">
+              Ideal for main application content and dashboards
+            </p>
+          </div>
+        </Container>
+      </div>
+      <div className="bg-blue-50 dark:bg-blue-950/20">
+        <Container size="xl">
+          <div className="py-6 text-center">
+            <h3 className="font-semibold mb-2">Extra Large (max-w-none)</h3>
+            <p className="text-sm text-muted-foreground">
+              No max-width constraint but maintains responsive padding
+            </p>
+          </div>
+        </Container>
+      </div>
+      <div className="bg-purple-50 dark:bg-purple-950/20">
+        <Container size="full">
+          <div className="py-6 text-center">
+            <h3 className="font-semibold mb-2">Full Width (max-w-full)</h3>
+            <p className="text-sm text-muted-foreground">
+              Full width container for edge-to-edge designs
+            </p>
+          </div>
+        </Container>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Visual showcase of all container size variants with color-coded backgrounds to illustrate different max-width constraints.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="min-h-screen bg-background">
+      {/* Header with navigation */}
+      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+        <Container>
+          <div className="flex h-16 items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 bg-primary rounded-lg" />
+              <h1 className="text-xl font-semibold">Neynar App</h1>
+            </div>
+            <nav className="flex gap-6">
+              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Dashboard
+              </a>
+              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Analytics
+              </a>
+              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Settings
+              </a>
+            </nav>
+          </div>
+        </Container>
+      </header>
+
+      {/* Hero section with narrow container for readability */}
+      <section className="py-16 bg-gradient-to-b from-muted/50">
+        <Container size="md">
+          <div className="text-center space-y-4">
+            <h2 className="text-4xl font-bold tracking-tight">Welcome to Your Dashboard</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              This example demonstrates how containers work in real-world applications,
+              providing consistent layouts across different content sections.
+            </p>
+          </div>
+        </Container>
+      </section>
+
+      {/* Main content with default container */}
+      <section className="py-12">
+        <Container>
+          <div className="grid gap-6 md:grid-cols-3">
+            <Card>
+              <CardHeader>
+                <CardTitle>Total Users</CardTitle>
+                <CardDescription>Active users this month</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">12,345</div>
+                <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Revenue</CardTitle>
+                <CardDescription>Total revenue this month</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">$45,231.89</div>
+                <p className="text-xs text-muted-foreground">+15.2% from last month</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Growth Rate</CardTitle>
+                <CardDescription>Month over month growth</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+12.5%</div>
+                <p className="text-xs text-muted-foreground">+2.1% from last month</p>
+              </CardContent>
+            </Card>
+          </div>
+        </Container>
+      </section>
+
+      {/* Article section with small container for optimal reading */}
+      <section className="py-12 bg-muted/30">
+        <Container size="sm">
+          <article className="prose prose-gray dark:prose-invert max-w-none">
+            <h3 className="text-2xl font-bold mb-4">Recent Updates</h3>
+            <p className="text-muted-foreground leading-7">
+              This section uses a small container to create optimal line lengths for reading.
+              Research shows that lines between 45-75 characters are easiest to read, which
+              is exactly what the small container size provides.
+            </p>
+            <p className="text-muted-foreground leading-7">
+              Notice how the content feels more comfortable to read compared to the full-width
+              sections above. This demonstrates the importance of choosing the right container
+              size for your content type.
+            </p>
+          </article>
+        </Container>
+      </section>
+
+      {/* Footer with full container */}
+      <footer className="border-t bg-muted/50">
+        <Container>
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            <p>© 2025 Neynar. Built with Container components for consistent layouts.</p>
+          </div>
+        </Container>
+      </footer>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world application example showing how different container sizes work together in a complete page layout. Notice how different sections use appropriate container sizes for their content type.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,446 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Copy,
+  Edit,
+  Trash2,
+  Download,
+  Share2,
+  Star,
+  ExternalLink,
+  Settings,
+  User,
+  Mail,
+  FileText,
+  Image,
+  Archive,
+  Folder,
+} from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+} from "../context-menu";
+
+const meta = {
+  title: "Navigation & Menus/ContextMenu",
+  component: ContextMenu,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A contextual menu component built on Radix UI primitives. Displays contextual actions when right-clicking on elements. Supports sub-menus, checkboxes, radio groups, keyboard shortcuts, and custom variants for different action types.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // Root component props are primarily event handlers from Radix
+    onOpenChange: {
+      description: "Callback fired when the menu open state changes",
+      control: false,
+    },
+    modal: {
+      description: "Whether the menu is modal",
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    modal: true,
+  },
+  render: (args) => {
+    const [showAdvanced, setShowAdvanced] = React.useState(false);
+    const [showGrid, setShowGrid] = React.useState(true);
+    const [theme, setTheme] = React.useState("light");
+
+    return (
+      <div className="flex h-[300px] w-[400px] items-center justify-center rounded-md border border-dashed text-sm">
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="flex h-full w-full items-center justify-center">
+            Right-click for interactive menu
+          </ContextMenuTrigger>
+          <ContextMenuContent className="w-64">
+            <ContextMenuLabel>File Actions</ContextMenuLabel>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit
+              <ContextMenuShortcut>⌘E</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>
+              <Copy className="mr-2 h-4 w-4" />
+              Copy
+              <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <Share2 className="mr-2 h-4 w-4" />
+                Share
+              </ContextMenuSubTrigger>
+              <ContextMenuPortal>
+                <ContextMenuSubContent>
+                  <ContextMenuItem>
+                    <Mail className="mr-2 h-4 w-4" />
+                    Email
+                  </ContextMenuItem>
+                  <ContextMenuItem>
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                    Copy Link
+                  </ContextMenuItem>
+                </ContextMenuSubContent>
+              </ContextMenuPortal>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+
+            <ContextMenuLabel>View Options</ContextMenuLabel>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem
+              checked={showGrid}
+              onCheckedChange={setShowGrid}
+            >
+              Show Grid
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem
+              checked={showAdvanced}
+              onCheckedChange={setShowAdvanced}
+            >
+              Advanced Mode
+            </ContextMenuCheckboxItem>
+
+            <ContextMenuSeparator />
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <Settings className="mr-2 h-4 w-4" />
+                Theme
+              </ContextMenuSubTrigger>
+              <ContextMenuPortal>
+                <ContextMenuSubContent>
+                  <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+                    <ContextMenuRadioItem value="light">
+                      Light
+                    </ContextMenuRadioItem>
+                    <ContextMenuRadioItem value="dark">
+                      Dark
+                    </ContextMenuRadioItem>
+                    <ContextMenuRadioItem value="system">
+                      System
+                    </ContextMenuRadioItem>
+                  </ContextMenuRadioGroup>
+                </ContextMenuSubContent>
+              </ContextMenuPortal>
+            </ContextMenuSub>
+
+            <ContextMenuSeparator />
+            <ContextMenuItem variant="destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+              <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground showcasing all context menu features: basic items, sub-menus, checkboxes, radio groups, shortcuts, variants, and proper grouping with labels and separators.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      {/* Basic menu items with variants */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Menu Item Variants</h3>
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[120px] w-full items-center justify-center rounded-md border border-dashed bg-muted/50 text-sm">
+            Basic Items
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem>
+              <Edit className="mr-2 h-4 w-4" />
+              Default Item
+            </ContextMenuItem>
+            <ContextMenuItem variant="destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Destructive Item
+            </ContextMenuItem>
+            <ContextMenuItem disabled>
+              <Settings className="mr-2 h-4 w-4" />
+              Disabled Item
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      </div>
+
+      {/* Inset alignment */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Inset Alignment</h3>
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[120px] w-full items-center justify-center rounded-md border border-dashed bg-muted/50 text-sm">
+            Inset Items
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuLabel inset>With Icons</ContextMenuLabel>
+            <ContextMenuItem>
+              <User className="mr-2 h-4 w-4" />
+              Has Icon
+            </ContextMenuItem>
+            <ContextMenuItem inset>No Icon (Inset)</ContextMenuItem>
+            <ContextMenuSubTrigger inset>
+              Sub-menu (Inset)
+            </ContextMenuSubTrigger>
+          </ContextMenuContent>
+        </ContextMenu>
+      </div>
+
+      {/* Checkbox states */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Checkbox Items</h3>
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[120px] w-full items-center justify-center rounded-md border border-dashed bg-muted/50 text-sm">
+            Checkboxes
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuCheckboxItem checked={true}>
+              Checked Item
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem checked={false}>
+              Unchecked Item
+            </ContextMenuCheckboxItem>
+            <ContextMenuCheckboxItem checked={true} disabled>
+              Disabled Checked
+            </ContextMenuCheckboxItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      </div>
+
+      {/* Radio group */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Radio Groups</h3>
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-[120px] w-full items-center justify-center rounded-md border border-dashed bg-muted/50 text-sm">
+            Radio Options
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuRadioGroup value="option2">
+              <ContextMenuRadioItem value="option1">
+                Option 1
+              </ContextMenuRadioItem>
+              <ContextMenuRadioItem value="option2">
+                Option 2 (Selected)
+              </ContextMenuRadioItem>
+              <ContextMenuRadioItem value="option3">
+                Option 3
+              </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all context menu variants: default and destructive items, disabled states, inset alignment for mixed icon usage, checkbox states, and radio group selections.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-lg font-semibold mb-2">File Manager Interface</h2>
+        <p className="text-sm text-muted-foreground">
+          Right-click on any file for contextual actions
+        </p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        {/* Document file */}
+        <div className="space-y-2">
+          <ContextMenu>
+            <ContextMenuTrigger className="group flex h-[100px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-background transition-colors hover:bg-muted/50">
+              <FileText className="h-8 w-8 text-blue-500 mb-2" />
+              <span className="text-xs font-medium">document.pdf</span>
+              <span className="text-xs text-muted-foreground">2.4 MB</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem>
+                <ExternalLink className="mr-2 h-4 w-4" />
+                Open
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Edit className="mr-2 h-4 w-4" />
+                Rename
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Copy
+              </ContextMenuItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger>
+                  <Share2 className="mr-2 h-4 w-4" />
+                  Share
+                </ContextMenuSubTrigger>
+                <ContextMenuPortal>
+                  <ContextMenuSubContent>
+                    <ContextMenuItem>
+                      <Mail className="mr-2 h-4 w-4" />
+                      Email
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                      <ExternalLink className="mr-2 h-4 w-4" />
+                      Copy Link
+                    </ContextMenuItem>
+                  </ContextMenuSubContent>
+                </ContextMenuPortal>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Star className="mr-2 h-4 w-4" />
+                Add to Favorites
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Archive className="mr-2 h-4 w-4" />
+                Compress
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem variant="destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Move to Trash
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        </div>
+
+        {/* Image file */}
+        <div className="space-y-2">
+          <ContextMenu>
+            <ContextMenuTrigger className="group flex h-[100px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-gradient-to-br from-purple-50 to-pink-50 transition-colors hover:from-purple-100 hover:to-pink-100">
+              <Image className="h-8 w-8 text-purple-500 mb-2" />
+              <span className="text-xs font-medium">photo.jpg</span>
+              <span className="text-xs text-muted-foreground">1.8 MB</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem>
+                <Image className="mr-2 h-4 w-4" />
+                View
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Edit className="mr-2 h-4 w-4" />
+                Edit in Photos
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Copy Image
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Download className="mr-2 h-4 w-4" />
+                Save As...
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem variant="destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        </div>
+
+        {/* Folder */}
+        <div className="space-y-2">
+          <ContextMenu>
+            <ContextMenuTrigger className="group flex h-[100px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-gradient-to-br from-blue-50 to-cyan-50 transition-colors hover:from-blue-100 hover:to-cyan-100">
+              <Folder className="h-8 w-8 text-blue-500 mb-2" />
+              <span className="text-xs font-medium">Projects</span>
+              <span className="text-xs text-muted-foreground">12 items</span>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem>
+                <ExternalLink className="mr-2 h-4 w-4" />
+                Open
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <Edit className="mr-2 h-4 w-4" />
+                Rename
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuSub>
+                <ContextMenuSubTrigger>
+                  <FileText className="mr-2 h-4 w-4" />
+                  New
+                </ContextMenuSubTrigger>
+                <ContextMenuPortal>
+                  <ContextMenuSubContent>
+                    <ContextMenuItem>
+                      <FileText className="mr-2 h-4 w-4" />
+                      Text File
+                    </ContextMenuItem>
+                    <ContextMenuItem>
+                      <Folder className="mr-2 h-4 w-4" />
+                      Folder
+                    </ContextMenuItem>
+                  </ContextMenuSubContent>
+                </ContextMenuPortal>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuItem>
+                <Archive className="mr-2 h-4 w-4" />
+                Compress
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem variant="destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        </div>
+      </div>
+
+      <div className="text-center text-xs text-muted-foreground mt-4">
+        This demonstrates how context menus provide relevant actions based on
+        file type and context
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world file manager interface showing how context menus provide contextually relevant actions. Each file type (document, image, folder) offers appropriate actions like view, edit, share, and compress based on its capabilities.",
+      },
+    },
+  },
+};