@neynar/ui 0.1.1

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

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+import { Label } from "../label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Form & Input/Select",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A dropdown selection component built on Radix UI that displays a list of options for users to pick from. Features keyboard navigation, grouping, accessibility support, and flexible styling.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "text",
+      description: "The controlled value of the select",
+    },
+    defaultValue: {
+      control: "text",
+      description: "The default value when uncontrolled",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the select is disabled",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the select is required in forms",
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all Select component features.
+ * Use the controls panel to experiment with different props and states.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultValue: "apple",
+    disabled: false,
+    required: false,
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <Select {...args}>
+        <SelectTrigger className="w-[280px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Citrus Fruits</SelectLabel>
+            <SelectItem value="orange">Orange</SelectItem>
+            <SelectItem value="lemon">Lemon</SelectItem>
+            <SelectItem value="lime">Lime</SelectItem>
+            <SelectItem value="grapefruit">Grapefruit</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Stone Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="peach">Peach</SelectItem>
+            <SelectItem value="pear" disabled>
+              Pear (Out of season)
+            </SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Berries</SelectLabel>
+            <SelectItem value="strawberry">Strawberry</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="raspberry">Raspberry</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      
+      <div className="space-y-2">
+        <Label>Size Variants</Label>
+        <div className="flex items-center gap-4">
+          <Select defaultValue="sm">
+            <SelectTrigger size="sm" className="w-[120px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="sm">Small</SelectItem>
+              <SelectItem value="other">Other</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          <Select defaultValue="default">
+            <SelectTrigger className="w-[120px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">Default</SelectItem>
+              <SelectItem value="other">Other</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all Select variants, states, and composition patterns.
+ * Demonstrates grouping, separators, disabled items, sizes, and styling options.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 w-full max-w-4xl">
+      {/* Basic Select */}
+      <div className="space-y-2">
+        <Label>Basic Select</Label>
+        <Select defaultValue="option2">
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Choose option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* With Groups */}
+      <div className="space-y-2">
+        <Label>Grouped Options</Label>
+        <Select>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Select client" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Official</SelectLabel>
+              <SelectItem value="warpcast">Warpcast</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Community</SelectLabel>
+              <SelectItem value="supercast">Supercast</SelectItem>
+              <SelectItem value="yup">Yup</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Disabled State */}
+      <div className="space-y-2">
+        <Label>Disabled Select</Label>
+        <Select disabled>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Disabled" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="item1">Item 1</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* With Disabled Items */}
+      <div className="space-y-2">
+        <Label>Disabled Items</Label>
+        <Select>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Select feature" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="available">Available</SelectItem>
+            <SelectItem value="coming" disabled>
+              Coming Soon
+            </SelectItem>
+            <SelectItem value="beta" disabled>
+              Beta Feature
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Size Variants */}
+      <div className="space-y-2">
+        <Label>Size Variants</Label>
+        <div className="flex items-center gap-2">
+          <Select>
+            <SelectTrigger size="sm" className="w-[100px]">
+              <SelectValue placeholder="SM" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="small">Small</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select>
+            <SelectTrigger className="w-[100px]">
+              <SelectValue placeholder="Default" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">Default</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Custom Styling */}
+      <div className="space-y-2">
+        <Label>Custom Styled</Label>
+        <Select>
+          <SelectTrigger className="w-[200px] border-primary/50 bg-primary/5">
+            <SelectValue placeholder="Custom style" />
+          </SelectTrigger>
+          <SelectContent className="border-primary/50">
+            <SelectItem value="styled">Styled option</SelectItem>
+            <SelectItem value="another">Another option</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage example showing Select in a practical Farcaster application context.
+ * Demonstrates form integration, controlled state, and typical user workflows.
+ */
+export const InContext: Story = {
+  render: function SelectInContext() {
+    const [formData, setFormData] = React.useState({
+      channel: "dev",
+      visibility: "public",
+      client: "warpcast",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log("Cast configuration:", formData);
+    };
+
+    return (
+      <Card className="w-[500px]">
+        <CardHeader>
+          <CardTitle>Create Farcaster Cast</CardTitle>
+          <CardDescription>
+            Configure your cast settings before publishing to the Farcaster network
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Channel Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="channel-select">Post to Channel</Label>
+              <Select
+                value={formData.channel}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({ ...prev, channel: value }))
+                }
+              >
+                <SelectTrigger id="channel-select">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="home">Home Feed</SelectItem>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Popular Channels</SelectLabel>
+                    <SelectItem value="dev">/dev</SelectItem>
+                    <SelectItem value="design">/design</SelectItem>
+                    <SelectItem value="founders">/founders</SelectItem>
+                    <SelectItem value="product">/product</SelectItem>
+                  </SelectGroup>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Community</SelectLabel>
+                    <SelectItem value="farcaster">/farcaster</SelectItem>
+                    <SelectItem value="neynar">/neynar</SelectItem>
+                    <SelectItem value="frames">/frames</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Visibility Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="visibility-select">Cast Visibility</Label>
+              <Select
+                value={formData.visibility}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({ ...prev, visibility: value }))
+                }
+              >
+                <SelectTrigger id="visibility-select">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="public">
+                    <span className="flex items-center gap-2">
+                      🌐 Public
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="followers">
+                    <span className="flex items-center gap-2">
+                      👥 Followers Only
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="mentioned">
+                    <span className="flex items-center gap-2">
+                      @ Mentioned Only
+                    </span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Client Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="client-select">Preferred Client</Label>
+              <Select
+                value={formData.client}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({ ...prev, client: value }))
+                }
+              >
+                <SelectTrigger id="client-select">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Official Clients</SelectLabel>
+                    <SelectItem value="warpcast">Warpcast</SelectItem>
+                  </SelectGroup>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Community Clients</SelectLabel>
+                    <SelectItem value="supercast">Supercast</SelectItem>
+                    <SelectItem value="yup">Yup</SelectItem>
+                    <SelectItem value="launchcaster">Launchcaster</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Configuration Summary */}
+            <div className="p-4 bg-muted/50 rounded-md space-y-1">
+              <h4 className="text-sm font-medium">Configuration Summary</h4>
+              <div className="text-sm text-muted-foreground space-y-1">
+                <p>Channel: <span className="font-medium">/{formData.channel}</span></p>
+                <p>Visibility: <span className="font-medium">{formData.visibility}</span></p>
+                <p>Client: <span className="font-medium">{formData.client}</span></p>
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                type="button"
+                className="flex-1 rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                Save Draft
+              </button>
+              <button
+                type="submit"
+                className="flex-1 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+              >
+                Publish Cast
+              </button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    );
+  },
+};

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

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "../separator";
+
+const meta = {
+  title: "Layout and Structure/Separator",
+  component: Separator,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A visual or semantic separator for dividing content sections. Built on Radix UI primitives with support for both horizontal and vertical orientations, decorative and semantic modes for accessibility.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the separator",
+    },
+    decorative: {
+      control: { type: "boolean" },
+      description: "Whether the separator is decorative (hidden from screen readers)",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+  args: {
+    orientation: "horizontal",
+    decorative: true,
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all separator props and variations.
+ * Use the controls panel to experiment with different orientations and decorative settings.
+ */
+export const Interactive: Story = {
+  args: {
+    orientation: "horizontal",
+    decorative: true,
+  },
+  render: (args) => (
+    <div className="w-96 space-y-4">
+      <p className="text-sm text-muted-foreground">Content above the separator</p>
+      <Separator {...args} />
+      <p className="text-sm text-muted-foreground">Content below the separator</p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive separator where you can control orientation and decorative properties using the controls panel.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of all separator variants and orientations available.
+ * Demonstrates horizontal and vertical separators in different contexts.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Horizontal Separators */}
+      <div>
+        <h4 className="text-sm font-semibold mb-4">Horizontal Separators</h4>
+        <div className="w-96 space-y-4">
+          <div>
+            <p className="text-sm">Default horizontal separator</p>
+            <Separator className="my-4" />
+            <p className="text-sm">Content after separator</p>
+          </div>
+          
+          <div>
+            <p className="text-sm">Thick separator</p>
+            <Separator className="my-4 h-1 bg-primary" />
+            <p className="text-sm">With custom styling</p>
+          </div>
+          
+          <div>
+            <p className="text-sm">Semantic separator (non-decorative)</p>
+            <Separator 
+              decorative={false} 
+              aria-label="Section divider"
+              className="my-4" 
+            />
+            <p className="text-sm">Announced to screen readers</p>
+          </div>
+        </div>
+      </div>
+      
+      {/* Vertical Separators */}
+      <div>
+        <h4 className="text-sm font-semibold mb-4">Vertical Separators</h4>
+        <div className="space-y-6">
+          <div className="flex items-center h-12 space-x-4">
+            <span className="text-sm">Left</span>
+            <Separator orientation="vertical" />
+            <span className="text-sm">Center</span>
+            <Separator orientation="vertical" />
+            <span className="text-sm">Right</span>
+          </div>
+          
+          <div className="flex items-center p-2 border rounded-lg">
+            <button className="px-3 py-1 text-sm hover:bg-muted rounded">Bold</button>
+            <button className="px-3 py-1 text-sm hover:bg-muted rounded">Italic</button>
+            <Separator orientation="vertical" className="mx-2 h-6" />
+            <button className="px-3 py-1 text-sm hover:bg-muted rounded">Link</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of horizontal and vertical separators with different styling options and use cases.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing separator in a dashboard-style interface.
+ * Demonstrates how separators improve content organization in business applications.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-md mx-auto p-6 border rounded-lg bg-card">
+      {/* Header Section */}
+      <div className="mb-4">
+        <h2 className="text-xl font-semibold">User Dashboard</h2>
+        <p className="text-sm text-muted-foreground">Welcome back, John Doe</p>
+      </div>
+      
+      <Separator className="my-4" />
+      
+      {/* Navigation Menu */}
+      <nav className="mb-4">
+        <h3 className="text-sm font-medium mb-2">Navigation</h3>
+        <div className="space-y-1">
+          <a href="#" className="block py-2 text-sm hover:text-primary">Dashboard</a>
+          <a href="#" className="block py-2 text-sm hover:text-primary">Projects</a>
+          <a href="#" className="block py-2 text-sm hover:text-primary">Settings</a>
+        </div>
+      </nav>
+      
+      <Separator className="my-4" />
+      
+      {/* Actions Section */}
+      <div className="mb-4">
+        <h3 className="text-sm font-medium mb-2">Quick Actions</h3>
+        <div className="flex items-center space-x-2">
+          <button className="px-3 py-1 text-xs bg-primary text-primary-foreground rounded">
+            New Project
+          </button>
+          <Separator orientation="vertical" className="h-6" />
+          <button className="px-3 py-1 text-xs border rounded">
+            Import
+          </button>
+          <Separator orientation="vertical" className="h-6" />
+          <button className="px-3 py-1 text-xs border rounded">
+            Export
+          </button>
+        </div>
+      </div>
+      
+      <Separator className="my-4" />
+      
+      {/* Footer */}
+      <div className="text-center">
+        <p className="text-xs text-muted-foreground">Last updated: 2 minutes ago</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world dashboard interface showing how separators organize content sections and group related functionality for better user experience.",
+      },
+    },
+  },
+};