@neynar/ui 0.1.1

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

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { User } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+
+const meta = {
+  title: "Data Display/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible avatar component for displaying user profile pictures with fallback support. Built on Radix UI primitives with automatic loading states and accessibility features.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for styling and sizing",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all Avatar props and variants.
+ * Use the controls panel to experiment with different sizes, styles, and content.
+ */
+export const Interactive: Story = {
+  args: {
+    className: "size-10",
+  },
+  argTypes: {
+    className: {
+      control: { type: "select" },
+      options: [
+        "size-6",
+        "size-8", 
+        "size-10",
+        "size-12",
+        "size-16",
+        "size-10 rounded-lg",
+        "size-10 rounded-md",
+        "size-10 rounded-none",
+      ],
+      description: "Size and shape variants",
+    },
+  },
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Experiment with different Avatar sizes and styles using the controls panel.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all Avatar variants and combinations.
+ * Displays different sizes, fallback types, shapes, and grouping patterns.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Size Variants */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Size Variants</h3>
+        <div className="flex items-end gap-4">
+          <div className="text-center space-y-2">
+            <Avatar className="size-6">
+              <AvatarImage src="https://github.com/shadcn.png" alt="XS" />
+              <AvatarFallback className="text-xs">XS</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">size-6</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="size-8">
+              <AvatarImage src="https://github.com/shadcn.png" alt="SM" />
+              <AvatarFallback className="text-xs">SM</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">size-8</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="size-10">
+              <AvatarImage src="https://github.com/shadcn.png" alt="MD" />
+              <AvatarFallback>MD</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">size-10</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="size-12">
+              <AvatarImage src="https://github.com/shadcn.png" alt="LG" />
+              <AvatarFallback>LG</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">size-12</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="size-16">
+              <AvatarImage src="https://github.com/shadcn.png" alt="XL" />
+              <AvatarFallback className="text-lg">XL</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">size-16</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Fallback Types */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Fallback Types</h3>
+        <div className="flex items-center gap-4">
+          <div className="text-center space-y-2">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="With Image" />
+              <AvatarFallback>WI</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">With Image</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar>
+              <AvatarImage src="" alt="Initials" />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Initials</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar>
+              <AvatarImage src="" alt="Icon" />
+              <AvatarFallback>
+                <User className="size-4" />
+              </AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Icon</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar>
+              <AvatarImage src="" alt="Colored" />
+              <AvatarFallback className="bg-blue-500 text-white">CB</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Colored</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Shape Variants */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Shape Variants</h3>
+        <div className="flex items-center gap-4">
+          <div className="text-center space-y-2">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="Round" />
+              <AvatarFallback>RO</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Default Round</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="rounded-lg">
+              <AvatarImage src="https://github.com/vercel.png" alt="Rounded" />
+              <AvatarFallback>RL</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Rounded Large</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="rounded-md">
+              <AvatarImage src="" alt="Medium" />
+              <AvatarFallback>RM</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Rounded Medium</div>
+          </div>
+          <div className="text-center space-y-2">
+            <Avatar className="rounded-none">
+              <AvatarImage src="" alt="Square" />
+              <AvatarFallback>SQ</AvatarFallback>
+            </Avatar>
+            <div className="text-xs text-muted-foreground">Square</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Avatar Group */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Avatar Group</h3>
+        <div className="flex -space-x-2">
+          <Avatar className="border-2 border-background">
+            <AvatarImage src="https://github.com/shadcn.png" alt="User 1" />
+            <AvatarFallback>U1</AvatarFallback>
+          </Avatar>
+          <Avatar className="border-2 border-background">
+            <AvatarImage src="https://github.com/vercel.png" alt="User 2" />
+            <AvatarFallback>U2</AvatarFallback>
+          </Avatar>
+          <Avatar className="border-2 border-background">
+            <AvatarImage src="" alt="User 3" />
+            <AvatarFallback>U3</AvatarFallback>
+          </Avatar>
+          <Avatar className="border-2 border-background">
+            <AvatarFallback>+5</AvatarFallback>
+          </Avatar>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all Avatar variants including sizes, fallback types, shapes, and grouping patterns.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing Avatar in a user profile context.
+ * Demonstrates how the component integrates with other UI elements in production scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-6 max-w-md">
+      {/* User Profile Header */}
+      <div className="flex items-center gap-4 p-4 border rounded-lg">
+        <Avatar className="size-16">
+          <AvatarImage src="https://github.com/shadcn.png" alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+        <div className="flex-1">
+          <h3 className="font-semibold text-lg">John Doe</h3>
+          <p className="text-sm text-muted-foreground">Product Designer</p>
+          <p className="text-sm text-muted-foreground">john.doe@company.com</p>
+        </div>
+        <div className="relative">
+          <Avatar className="size-3 absolute -bottom-1 -right-1">
+            <div className="size-3 bg-green-500 rounded-full border-2 border-background" />
+          </Avatar>
+        </div>
+      </div>
+
+      {/* Comment Section */}
+      <div className="space-y-4">
+        <h4 className="font-medium">Recent Comments</h4>
+        <div className="space-y-3">
+          <div className="flex gap-3">
+            <Avatar className="size-8">
+              <AvatarImage src="https://github.com/shadcn.png" alt="Alice" />
+              <AvatarFallback>AL</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-sm">Alice Cooper</span>
+                <span className="text-xs text-muted-foreground">2 hours ago</span>
+              </div>
+              <p className="text-sm text-muted-foreground">Great work on the new design! The user flow is much clearer now.</p>
+            </div>
+          </div>
+
+          <div className="flex gap-3">
+            <Avatar className="size-8">
+              <AvatarImage src="" alt="Bob" />
+              <AvatarFallback>BC</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-sm">Bob Chen</span>
+                <span className="text-xs text-muted-foreground">4 hours ago</span>
+              </div>
+              <p className="text-sm text-muted-foreground">Could we adjust the spacing on mobile? It feels a bit cramped.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Team Members */}
+      <div className="space-y-4">
+        <h4 className="font-medium">Team Members</h4>
+        <div className="flex items-center justify-between">
+          <div className="flex -space-x-2">
+            <Avatar className="size-8 border-2 border-background">
+              <AvatarImage src="https://github.com/shadcn.png" alt="Team member" />
+              <AvatarFallback>TM</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8 border-2 border-background">
+              <AvatarImage src="https://github.com/vercel.png" alt="Team member" />
+              <AvatarFallback>TM</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8 border-2 border-background">
+              <AvatarImage src="" alt="Team member" />
+              <AvatarFallback>TM</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8 border-2 border-background">
+              <AvatarFallback className="text-xs">+12</AvatarFallback>
+            </Avatar>
+          </div>
+          <button className="text-sm text-blue-600 hover:text-blue-500">View all</button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world example showing Avatar in user profiles, comment sections, and team member displays with proper spacing and interactions.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertTriangle, Check, X, Star, Bell } from "lucide-react";
+import { Badge } from "../badge";
+
+const meta = {
+  title: "Data Display/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile badge component for displaying status indicators, labels, counts, and notifications. Built with accessibility in mind and supports multiple visual variants for different semantic meanings.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "secondary", "destructive", "outline"],
+      description: "The visual style variant of the badge",
+    },
+    asChild: {
+      control: { type: "boolean" },
+      description: "When true, renders as its child element instead of a span",
+    },
+    children: {
+      control: { type: "text" },
+      description: "The content of the badge",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+  args: {
+    children: "Badge",
+    asChild: false,
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all badge props and variants.
+ * Use the controls panel to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    variant: "default",
+    children: "Interactive Badge",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use the controls panel to test different badge configurations and see how they affect the appearance and behavior.",
+      },
+    },
+  },
+};
+
+/**
+ * Complete showcase of all available badge variants and their combinations.
+ * This demonstrates the visual hierarchy and semantic meaning of each variant.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      {/* Basic Variants */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Basic Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="default">Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </div>
+      </div>
+
+      {/* With Icons */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">With Icons</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge>
+            <Check />
+            Success
+          </Badge>
+          <Badge variant="destructive">
+            <X />
+            Error
+          </Badge>
+          <Badge variant="secondary">
+            <AlertTriangle />
+            Warning
+          </Badge>
+          <Badge variant="outline">
+            <Star />
+            Featured
+          </Badge>
+        </div>
+      </div>
+
+      {/* Status Indicators */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Status Indicators</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge className="bg-green-500 hover:bg-green-600">
+            <Check />
+            Active
+          </Badge>
+          <Badge className="bg-yellow-500 hover:bg-yellow-600 text-black">
+            <AlertTriangle />
+            Pending
+          </Badge>
+          <Badge variant="destructive">
+            <X />
+            Inactive
+          </Badge>
+          <Badge variant="secondary">Draft</Badge>
+        </div>
+      </div>
+
+      {/* Notification Badges */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Notification Counts</h3>
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <Bell className="size-6" />
+            <Badge className="absolute -top-2 -right-2 size-5 p-0 text-xs">3</Badge>
+          </div>
+          <div className="relative">
+            <Bell className="size-6" />
+            <Badge variant="destructive" className="absolute -top-2 -right-2 size-5 p-0 text-xs">
+              12
+            </Badge>
+          </div>
+          <div className="relative">
+            <Bell className="size-6" />
+            <Badge className="absolute -top-2 -right-2 size-2 p-0 bg-green-500" />
+          </div>
+        </div>
+      </div>
+
+      {/* Removable Tags */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Removable Tags</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge className="pr-1">
+            React
+            <button className="ml-1 hover:bg-primary-foreground/20 rounded-full p-0.5">
+              <X className="size-3" />
+            </button>
+          </Badge>
+          <Badge variant="secondary" className="pr-1">
+            TypeScript
+            <button className="ml-1 hover:bg-secondary-foreground/20 rounded-full p-0.5">
+              <X className="size-3" />
+            </button>
+          </Badge>
+          <Badge variant="outline" className="pr-1">
+            Next.js
+            <button className="ml-1 hover:bg-accent rounded-full p-0.5">
+              <X className="size-3" />
+            </button>
+          </Badge>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all badge variants including basic styles, icons, status indicators, notification counts, and removable tags. This demonstrates the full range of badge capabilities and their appropriate use cases.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world example showing badges in a typical application context.
+ * This demonstrates how badges integrate with other UI elements in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-md mx-auto space-y-6 p-4 border rounded-lg bg-card">
+      {/* User Profile Section */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="size-10 rounded-full bg-muted flex items-center justify-center font-medium">
+            JD
+          </div>
+          <div>
+            <h3 className="font-medium">John Doe</h3>
+            <p className="text-sm text-muted-foreground">Product Manager</p>
+          </div>
+        </div>
+        <Badge variant="secondary">Pro</Badge>
+      </div>
+
+      {/* Project Status */}
+      <div className="space-y-3">
+        <h4 className="font-medium">Recent Projects</h4>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between p-2 rounded border">
+            <span className="text-sm">Website Redesign</span>
+            <Badge className="bg-green-500">
+              <Check />
+              Complete
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between p-2 rounded border">
+            <span className="text-sm">Mobile App</span>
+            <Badge className="bg-yellow-500 text-black">
+              <AlertTriangle />
+              In Progress
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between p-2 rounded border">
+            <span className="text-sm">API Integration</span>
+            <Badge variant="outline">Planning</Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Skills/Tags */}
+      <div className="space-y-3">
+        <h4 className="font-medium">Skills</h4>
+        <div className="flex flex-wrap gap-1.5">
+          <Badge variant="outline">React</Badge>
+          <Badge variant="outline">TypeScript</Badge>
+          <Badge variant="outline">Design Systems</Badge>
+          <Badge variant="outline">Product Strategy</Badge>
+        </div>
+      </div>
+
+      {/* Notifications */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h4 className="font-medium">Notifications</h4>
+          <div className="relative">
+            <Bell className="size-5" />
+            <Badge className="absolute -top-1 -right-1 size-4 p-0 text-xs">5</Badge>
+          </div>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          You have unread messages and project updates.
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world example showing how badges work in a typical user interface. This includes user status indicators, project statuses, skill tags, and notification counts within a cohesive design context.",
+      },
+    },
+  },
+};