@neynar/ui 0.1.1

package/src/components/ui/stories/hover-card.stories.tsx

@@ -0,0 +1,355 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Calendar, User } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card";
+
+const meta = {
+  title: "Overlays/HoverCard",
+  component: HoverCard,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A hover card component for displaying rich content when hovering over a trigger element. Built with Radix UI and Tailwind CSS 4.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    openDelay: {
+      control: { type: "number" },
+      description: "The delay in milliseconds before the hover card opens",
+    },
+    closeDelay: {
+      control: { type: "number" },
+      description: "The delay in milliseconds before the hover card closes",
+    },
+  },
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Interactive playground with all customizable props
+export const Interactive: Story = {
+  args: {
+    openDelay: 700,
+    closeDelay: 300,
+  },
+  argTypes: {
+    openDelay: {
+      control: { type: "range", min: 0, max: 2000, step: 100 },
+      description: "Delay in milliseconds before opening",
+    },
+    closeDelay: {
+      control: { type: "range", min: 0, max: 1000, step: 50 },
+      description: "Delay in milliseconds before closing",
+    },
+  },
+  render: (args) => (
+    <div className="flex justify-center p-8">
+      <HoverCard openDelay={args.openDelay} closeDelay={args.closeDelay}>
+        <HoverCardTrigger asChild>
+          <Button variant="link">@nextjs</Button>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-80">
+          <div className="flex justify-between gap-4">
+            <Avatar>
+              <AvatarImage src="https://github.com/vercel.png" />
+              <AvatarFallback>VC</AvatarFallback>
+            </Avatar>
+            <div className="space-y-1">
+              <h4 className="text-sm font-semibold">@nextjs</h4>
+              <p className="text-sm text-muted-foreground">
+                The React Framework – created and maintained by @vercel.
+              </p>
+              <div className="flex items-center pt-2">
+                <Calendar className="mr-2 h-4 w-4 opacity-70" />
+                <span className="text-xs text-muted-foreground">
+                  Joined December 2021
+                </span>
+              </div>
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive playground to test all hover card props and behaviors. Adjust the timing controls to see how delays affect the user experience.",
+      },
+    },
+  },
+};
+
+// Showcase of different variants and positioning options
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 p-8">
+      {/* User Profile */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">User Profile</h3>
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Button variant="ghost" className="justify-start">
+              <Avatar className="h-6 w-6 mr-2">
+                <AvatarImage src="https://github.com/shadcn.png" />
+                <AvatarFallback>CN</AvatarFallback>
+              </Avatar>
+              @shadcn
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-80">
+            <div className="flex justify-between gap-4">
+              <Avatar>
+                <AvatarImage src="https://github.com/shadcn.png" />
+                <AvatarFallback>CN</AvatarFallback>
+              </Avatar>
+              <div className="space-y-1">
+                <h4 className="text-sm font-semibold">@shadcn</h4>
+                <p className="text-sm text-muted-foreground">
+                  Creator of shadcn/ui. Building beautiful, accessible components.
+                </p>
+                <div className="flex gap-1 pt-2">
+                  <Badge variant="secondary" className="text-xs">TypeScript</Badge>
+                  <Badge variant="secondary" className="text-xs">React</Badge>
+                </div>
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      </div>
+
+      {/* Repository Info */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Repository</h3>
+        <p className="text-sm">
+          Check out{" "}
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Button variant="link" className="p-0 h-auto">
+                shadcn/ui
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-72">
+              <div className="space-y-2">
+                <h4 className="text-sm font-semibold">shadcn/ui</h4>
+                <p className="text-sm text-muted-foreground">
+                  Beautifully designed components built with Radix UI and Tailwind CSS.
+                </p>
+                <div className="flex items-center gap-4 pt-2 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                    TypeScript
+                  </span>
+                  <span>⭐ 45.2k</span>
+                  <span>🍴 2.1k</span>
+                </div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </p>
+      </div>
+
+      {/* Custom Positioning */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Custom Position</h3>
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Button variant="outline">Top Aligned</Button>
+          </HoverCardTrigger>
+          <HoverCardContent side="top" align="start" className="w-60">
+            <div className="space-y-1">
+              <h4 className="font-semibold">Custom Position</h4>
+              <p className="text-sm text-muted-foreground">
+                This card appears above with start alignment.
+              </p>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      </div>
+
+      {/* Simple Text */}
+      <div className="space-y-4">
+        <h3 className="font-semibold">Simple Content</h3>
+        <p className="text-sm">
+          Learn about{" "}
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Button variant="link" className="p-0 h-auto">
+                React 19
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent>
+              <div className="space-y-1">
+                <h4 className="font-semibold">React 19</h4>
+                <p className="text-sm text-muted-foreground">
+                  Latest React with Compiler and improved performance.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of different hover card variants including user profiles, repository information, custom positioning, and simple text content.",
+      },
+    },
+  },
+};
+
+// Real-world usage in a dashboard-like interface
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Header with user profile */}
+      <div className="flex items-center justify-between border-b pb-4">
+        <h1 className="text-2xl font-bold">Project Dashboard</h1>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-muted-foreground">Welcome back,</span>
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Button variant="ghost" className="p-1">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src="https://github.com/vercel.png" />
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent align="end" className="w-72">
+              <div className="space-y-3">
+                <div className="flex items-center gap-3">
+                  <Avatar>
+                    <AvatarImage src="https://github.com/vercel.png" />
+                    <AvatarFallback>JD</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <h4 className="font-semibold">John Doe</h4>
+                    <p className="text-sm text-muted-foreground">Product Manager</p>
+                  </div>
+                </div>
+                <div className="border-t pt-2">
+                  <div className="flex flex-col gap-1">
+                    <Button size="sm" variant="ghost" className="justify-start">
+                      <User className="mr-2 h-4 w-4" />
+                      View Profile
+                    </Button>
+                    <Button size="sm" variant="ghost" className="justify-start">
+                      Settings
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      </div>
+
+      {/* Team section with multiple hover cards */}
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold">Team Members</h2>
+        <div className="flex gap-4">
+          {[
+            { name: "Alice Johnson", role: "Frontend Dev", avatar: "https://github.com/vercel.png", initials: "AJ" },
+            { name: "Bob Smith", role: "Backend Dev", avatar: "https://github.com/shadcn.png", initials: "BS" },
+            { name: "Carol White", role: "Designer", avatar: "https://github.com/vercel.png", initials: "CW" },
+          ].map((member, i) => (
+            <HoverCard key={i}>
+              <HoverCardTrigger asChild>
+                <Button variant="outline" className="h-auto p-3">
+                  <Avatar className="h-8 w-8 mr-2">
+                    <AvatarImage src={member.avatar} />
+                    <AvatarFallback>{member.initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="text-left">
+                    <div className="font-medium text-sm">{member.name}</div>
+                    <div className="text-xs text-muted-foreground">{member.role}</div>
+                  </div>
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent className="w-80">
+                <div className="flex gap-4">
+                  <Avatar>
+                    <AvatarImage src={member.avatar} />
+                    <AvatarFallback>{member.initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="space-y-1 flex-1">
+                    <h4 className="font-semibold">{member.name}</h4>
+                    <p className="text-sm text-muted-foreground">{member.role}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Available • Last seen 2h ago
+                    </p>
+                    <div className="flex gap-2 pt-2">
+                      <Button size="sm" variant="outline">Message</Button>
+                      <Button size="sm" variant="ghost">View Tasks</Button>
+                    </div>
+                  </div>
+                </div>
+              </HoverCardContent>
+            </HoverCard>
+          ))}
+        </div>
+      </div>
+
+      {/* Project links */}
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold">Active Projects</h2>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 border rounded-lg">
+            <h3 className="font-medium mb-2">Frontend Redesign</h3>
+            <p className="text-sm text-muted-foreground mb-3">
+              Built with{" "}
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <Button variant="link" className="p-0 h-auto text-sm">
+                    Next.js 15
+                  </Button>
+                </HoverCardTrigger>
+                <HoverCardContent>
+                  <div className="space-y-2">
+                    <h4 className="font-semibold">Next.js 15</h4>
+                    <p className="text-sm text-muted-foreground">
+                      The React Framework with App Router, Server Components, and improved performance.
+                    </p>
+                  </div>
+                </HoverCardContent>
+              </HoverCard>
+              {" and "}
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <Button variant="link" className="p-0 h-auto text-sm">
+                    Tailwind CSS
+                  </Button>
+                </HoverCardTrigger>
+                <HoverCardContent>
+                  <div className="space-y-2">
+                    <h4 className="font-semibold">Tailwind CSS</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Utility-first CSS framework for rapidly building modern websites.
+                    </p>
+                  </div>
+                </HoverCardContent>
+              </HoverCard>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world example showing hover cards in a dashboard interface. Demonstrates user profiles, team member info, and contextual information throughout the UI.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,289 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Eye, EyeOff, Lock, Mail, Search } from "lucide-react";
+import { useState } from "react";
+import { Input } from "../input";
+
+const meta = {
+  title: "Form & Input/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A form input field component based on shadcn/ui patterns. Supports all HTML input types with consistent styling, accessibility features, and form integration.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: [
+        "text",
+        "email",
+        "password",
+        "number",
+        "tel",
+        "url",
+        "search",
+        "file",
+      ],
+      description: "The HTML input type",
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text displayed when input is empty",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the input and prevents user interaction",
+    },
+    value: {
+      control: { type: "text" },
+      description: "The current value of the input",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply to the input",
+    },
+  },
+  args: {
+    placeholder: "Enter text...",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all input properties and variants.
+ * Use the controls panel to test different combinations of props.
+ */
+export const Interactive: Story = {
+  args: {
+    type: "text",
+    placeholder: "Try different props using the controls below",
+  },
+};
+
+/**
+ * Showcase of all available input types and states.
+ * Demonstrates the visual variations available for different use cases.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      {/* Input Types */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Input Types
+        </h3>
+        <div className="space-y-2">
+          <Input type="text" placeholder="Text input" />
+          <Input type="email" placeholder="Email input" />
+          <Input type="password" placeholder="Password input" />
+          <Input type="number" placeholder="Number input" />
+          <Input type="tel" placeholder="Phone input" />
+          <Input type="url" placeholder="URL input" />
+          <Input type="search" placeholder="Search input" />
+          <Input type="file" />
+        </div>
+      </div>
+
+      {/* States */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">States</h3>
+        <div className="space-y-2">
+          <Input placeholder="Default state" />
+          <Input value="Filled input" readOnly />
+          <Input disabled placeholder="Disabled input" />
+          <Input aria-invalid="true" placeholder="Invalid input" />
+        </div>
+      </div>
+
+      {/* Sizes */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">Sizes</h3>
+        <div className="space-y-2">
+          <Input className="h-8 text-sm" placeholder="Small (h-8)" />
+          <Input placeholder="Default (h-9)" />
+          <Input className="h-10" placeholder="Large (h-10)" />
+          <Input className="h-12 text-lg" placeholder="Extra large (h-12)" />
+        </div>
+      </div>
+
+      {/* With Icons */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Icons
+        </h3>
+        <div className="space-y-2">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+            <Input className="pl-10" placeholder="Search..." />
+          </div>
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+            <Input
+              type="email"
+              className="pl-10"
+              placeholder="Email with icon"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of all input types, states, sizes, and icon integration patterns.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples in context of forms and applications.
+ * Shows how inputs work in practical scenarios for design and business teams.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [showPassword, setShowPassword] = useState(false);
+    const [email, setEmail] = useState("");
+    const [searchQuery, setSearchQuery] = useState("");
+
+    return (
+      <div className="space-y-8 w-96">
+        {/* Login Form */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Login Form</h3>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <label htmlFor="login-email" className="text-sm font-medium">
+                Email
+              </label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+                <Input
+                  id="login-email"
+                  type="email"
+                  className="pl-10"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <label htmlFor="login-password" className="text-sm font-medium">
+                Password
+              </label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+                <Input
+                  id="login-password"
+                  type={showPassword ? "text" : "password"}
+                  className="pl-10 pr-10"
+                  placeholder="Enter your password"
+                />
+                <button
+                  type="button"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? (
+                    <EyeOff className="size-4" />
+                  ) : (
+                    <Eye className="size-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Search Interface</h3>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+            <Input
+              className="pl-10 h-11 text-base"
+              placeholder="Search products, users, or content..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          {searchQuery && (
+            <p className="text-sm text-muted-foreground">
+              Searching for: &quot;{searchQuery}&quot;
+            </p>
+          )}
+        </div>
+
+        {/* Newsletter Subscription */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Newsletter Subscription</h3>
+          <div className="flex w-full items-center space-x-2">
+            <Input
+              type="email"
+              placeholder="Enter your email"
+              className="flex-1"
+            />
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90">
+              Subscribe
+            </button>
+          </div>
+        </div>
+
+        {/* Profile Form */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Profile Information</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <label htmlFor="first-name" className="text-sm font-medium">
+                First Name
+              </label>
+              <Input id="first-name" placeholder="John" />
+            </div>
+            <div className="space-y-1">
+              <label htmlFor="last-name" className="text-sm font-medium">
+                Last Name
+              </label>
+              <Input id="last-name" placeholder="Doe" />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <label htmlFor="phone" className="text-sm font-medium">
+              Phone Number
+            </label>
+            <Input id="phone" type="tel" placeholder="+1 (555) 123-4567" />
+          </div>
+          <div className="space-y-1">
+            <label htmlFor="website" className="text-sm font-medium">
+              Website
+            </label>
+            <Input
+              id="website"
+              type="url"
+              placeholder="https://yourwebsite.com"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing inputs in login forms, search interfaces, subscriptions, and profile forms. Demonstrates proper labeling, icon integration, and user interaction patterns.",
+      },
+    },
+  },
+};