@neynar/ui 0.4.0 → 1.0.0

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

@@ -1,5 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import {
+  CloudIcon,
+  GlobeIcon,
+  ServerIcon,
+  SettingsIcon,
+  UserIcon,
+  UsersIcon,
+} from "lucide-react";
+import { useState } from "react";
+
 import {
   Select,
   SelectContent,
@@ -10,379 +20,635 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../select";
-import { Label } from "../label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
 
-const meta = {
-  title: "Form & Input/Select",
+const meta: Meta<typeof Select> = {
+  title: "Components/Core Inputs/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.",
-      },
-    },
+  },
+  args: {
+    onValueChange: fn(),
   },
   argTypes: {
-    value: {
-      control: "text",
-      description: "The controlled value of the select",
-    },
     defaultValue: {
       control: "text",
-      description: "The default value when uncontrolled",
+      description: "The default selected value",
     },
     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.
+ * API Configuration - A realistic scenario showing selects for choosing
+ * API version, region, and environment in the Neynar Dashboard.
  */
-export const Interactive: Story = {
-  args: {
-    defaultValue: "apple",
-    disabled: false,
-    required: false,
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  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>
+  render: () => {
+    function APIConfiguration() {
+      const [apiVersion, setApiVersion] = useState("v2");
+      const [region, setRegion] = useState("us-east-1");
+      const [environment, setEnvironment] = useState("production");
+
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          {/* Header */}
+          <div>
+            <h2 className="text-lg font-semibold">API Configuration</h2>
+            <p className="text-muted-foreground text-sm">
+              Configure your Neynar API settings for optimal performance.
+            </p>
+          </div>
+
+          {/* Configuration Form */}
+          <div className="border-border bg-card space-y-6 rounded-lg border p-6">
+            {/* API Version */}
+            <div className="space-y-2">
+              <label htmlFor="api-version" className="text-sm font-medium">
+                API Version
+              </label>
+              <Select
+                value={apiVersion}
+                onValueChange={(v) => v && setApiVersion(v)}
+              >
+                <SelectTrigger id="api-version" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Stable Versions</SelectLabel>
+                    <SelectItem value="v2">
+                      <CloudIcon data-icon="inline-start" />
+                      v2 - Latest (Recommended)
+                    </SelectItem>
+                    <SelectItem value="v1">
+                      <ServerIcon data-icon="inline-start" />
+                      v1 - Stable
+                    </SelectItem>
+                  </SelectGroup>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Beta Versions</SelectLabel>
+                    <SelectItem value="v3-beta">
+                      v3 - Beta (Experimental)
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground text-xs">
+                Choose the API version for your application.
+              </p>
+            </div>
+
+            {/* Region */}
+            <div className="space-y-2">
+              <label htmlFor="region" className="text-sm font-medium">
+                Region
+              </label>
+              <Select value={region} onValueChange={(v) => v && setRegion(v)}>
+                <SelectTrigger id="region" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>North America</SelectLabel>
+                    <SelectItem value="us-east-1">
+                      <GlobeIcon data-icon="inline-start" />
+                      US East (N. Virginia)
+                    </SelectItem>
+                    <SelectItem value="us-west-2">
+                      <GlobeIcon data-icon="inline-start" />
+                      US West (Oregon)
+                    </SelectItem>
+                  </SelectGroup>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Europe</SelectLabel>
+                    <SelectItem value="eu-west-1">
+                      <GlobeIcon data-icon="inline-start" />
+                      EU (Ireland)
+                    </SelectItem>
+                    <SelectItem value="eu-central-1">
+                      <GlobeIcon data-icon="inline-start" />
+                      EU (Frankfurt)
+                    </SelectItem>
+                  </SelectGroup>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Asia Pacific</SelectLabel>
+                    <SelectItem value="ap-southeast-1">
+                      <GlobeIcon data-icon="inline-start" />
+                      Asia Pacific (Singapore)
+                    </SelectItem>
+                    <SelectItem value="ap-northeast-1">
+                      <GlobeIcon data-icon="inline-start" />
+                      Asia Pacific (Tokyo)
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground text-xs">
+                Select the region closest to your users for lowest latency.
+              </p>
+            </div>
+
+            {/* Environment */}
+            <div className="space-y-2">
+              <label htmlFor="environment" className="text-sm font-medium">
+                Environment
+              </label>
+              <Select
+                value={environment}
+                onValueChange={(v) => v && setEnvironment(v)}
+              >
+                <SelectTrigger id="environment" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="production">Production</SelectItem>
+                  <SelectItem value="staging">Staging</SelectItem>
+                  <SelectItem value="development">Development</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground text-xs">
+                Choose the environment for your API key.
+              </p>
+            </div>
+
+            {/* Summary */}
+            <div className="border-border bg-muted/50 rounded-md border p-4">
+              <h4 className="mb-2 text-sm font-medium">
+                Configuration Summary
+              </h4>
+              <dl className="text-muted-foreground space-y-1 text-sm">
+                <div className="flex justify-between">
+                  <dt>API Version:</dt>
+                  <dd className="font-mono">{apiVersion}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt>Region:</dt>
+                  <dd className="font-mono">{region}</dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt>Environment:</dt>
+                  <dd className="font-mono capitalize">{environment}</dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+
+          {/* User Role Selection */}
+          <div className="border-border bg-card space-y-4 rounded-lg border p-6">
+            <div>
+              <h3 className="font-medium">Team Member Permissions</h3>
+              <p className="text-muted-foreground text-sm">
+                Assign roles to control access levels.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="role" className="text-sm font-medium">
+                Role
+              </label>
+              <Select defaultValue="developer">
+                <SelectTrigger id="role" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin">
+                    <SettingsIcon data-icon="inline-start" />
+                    Admin - Full access
+                  </SelectItem>
+                  <SelectItem value="developer">
+                    <UserIcon data-icon="inline-start" />
+                    Developer - API access
+                  </SelectItem>
+                  <SelectItem value="viewer">
+                    <UsersIcon data-icon="inline-start" />
+                    Viewer - Read only
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  ),
+      );
+    }
+
+    return <APIConfiguration />;
+  },
 };
 
 /**
- * Showcase of all Select variants, states, and composition patterns.
- * Demonstrates grouping, separators, disabled items, sizes, and styling options.
+ * Complete design system reference showing all select variants, sizes, and patterns.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   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" />
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Basic Usage */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Select</h3>
+          <p className="text-muted-foreground text-sm">
+            Simple select with a list of options.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-4">
+          <Select defaultValue="option2">
+            <SelectTrigger className="w-[200px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+              <SelectItem value="option3">Option 3</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </section>
+
+      {/* Sizes */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Sizes</h3>
+          <p className="text-muted-foreground text-sm">
+            Select components in different sizes for various contexts.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="space-y-2">
+            <label className="text-xs text-muted-foreground">Small</label>
+            <Select defaultValue="sm">
+              <SelectTrigger size="sm" className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sm">Small option</SelectItem>
+                <SelectItem value="sm2">Another small</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <label className="text-xs text-muted-foreground">Default</label>
+            <Select defaultValue="default">
+              <SelectTrigger className="w-[200px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="default">Default option</SelectItem>
+                <SelectItem value="default2">Another default</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </section>
+
+      {/* With Icons */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Icons</h3>
+          <p className="text-muted-foreground text-sm">
+            Enhance options with icons for better visual clarity.
+          </p>
+        </div>
+        <Select defaultValue="admin">
+          <SelectTrigger className="w-[280px]">
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
+            <SelectItem value="admin">
+              <SettingsIcon data-icon="inline-start" />
+              Administrator
+            </SelectItem>
+            <SelectItem value="user">
+              <UserIcon data-icon="inline-start" />
+              Regular User
+            </SelectItem>
+            <SelectItem value="team">
+              <UsersIcon data-icon="inline-start" />
+              Team Member
+            </SelectItem>
           </SelectContent>
         </Select>
-      </div>
+      </section>
 
-      {/* With Groups */}
-      <div className="space-y-2">
-        <Label>Grouped Options</Label>
-        <Select>
-          <SelectTrigger className="w-[200px]">
-            <SelectValue placeholder="Select client" />
+      {/* Grouped Options */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Grouped Options</h3>
+          <p className="text-muted-foreground text-sm">
+            Organize options into logical groups with labels.
+          </p>
+        </div>
+        <Select defaultValue="react">
+          <SelectTrigger className="w-[280px]">
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>Official</SelectLabel>
-              <SelectItem value="warpcast">Warpcast</SelectItem>
+              <SelectLabel>Frontend</SelectLabel>
+              <SelectItem value="react">React</SelectItem>
+              <SelectItem value="vue">Vue</SelectItem>
+              <SelectItem value="svelte">Svelte</SelectItem>
             </SelectGroup>
             <SelectSeparator />
             <SelectGroup>
-              <SelectLabel>Community</SelectLabel>
-              <SelectItem value="supercast">Supercast</SelectItem>
-              <SelectItem value="yup">Yup</SelectItem>
+              <SelectLabel>Backend</SelectLabel>
+              <SelectItem value="node">Node.js</SelectItem>
+              <SelectItem value="python">Python</SelectItem>
+              <SelectItem value="go">Go</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Fullstack</SelectLabel>
+              <SelectItem value="next">Next.js</SelectItem>
+              <SelectItem value="remix">Remix</SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
-      </div>
+      </section>
 
-      {/* Disabled State */}
-      <div className="space-y-2">
-        <Label>Disabled Select</Label>
-        <Select disabled>
-          <SelectTrigger className="w-[200px]">
-            <SelectValue placeholder="Disabled" />
+      {/* Placeholder State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Placeholder State</h3>
+          <p className="text-muted-foreground text-sm">
+            Select with no default value showing placeholder text.
+          </p>
+        </div>
+        <Select>
+          <SelectTrigger className="w-[280px]">
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="item1">Item 1</SelectItem>
+            <SelectItem value="1">Option 1</SelectItem>
+            <SelectItem value="2">Option 2</SelectItem>
+            <SelectItem value="3">Option 3</SelectItem>
           </SelectContent>
         </Select>
-      </div>
+      </section>
 
-      {/* With Disabled Items */}
-      <div className="space-y-2">
-        <Label>Disabled Items</Label>
-        <Select>
-          <SelectTrigger className="w-[200px]">
-            <SelectValue placeholder="Select feature" />
+      {/* Disabled State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Disabled State</h3>
+          <p className="text-muted-foreground text-sm">
+            Select component and individual items can be disabled.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2">
+            <label className="text-xs text-muted-foreground">
+              Disabled Select
+            </label>
+            <Select defaultValue="option1" disabled>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <label className="text-xs text-muted-foreground">
+              Disabled Items
+            </label>
+            <Select defaultValue="available">
+              <SelectTrigger className="w-[200px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="available">Available</SelectItem>
+                <SelectItem value="unavailable" disabled>
+                  Unavailable
+                </SelectItem>
+                <SelectItem value="coming-soon" disabled>
+                  Coming Soon
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </section>
+
+      {/* Scrollable Content */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Scrollable Content</h3>
+          <p className="text-muted-foreground text-sm">
+            Long lists automatically scroll with scroll indicators.
+          </p>
+        </div>
+        <Select defaultValue="15">
+          <SelectTrigger className="w-[280px]">
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="available">Available</SelectItem>
-            <SelectItem value="coming" disabled>
-              Coming Soon
-            </SelectItem>
-            <SelectItem value="beta" disabled>
-              Beta Feature
-            </SelectItem>
+            {Array.from({ length: 30 }, (_, i) => i + 1).map((num) => (
+              <SelectItem key={num} value={String(num)}>
+                Option {num}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
-      </div>
+      </section>
 
-      {/* 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" />
+      {/* Form Integration */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Form Integration</h3>
+          <p className="text-muted-foreground text-sm">
+            Select components work seamlessly in forms with labels and
+            descriptions.
+          </p>
+        </div>
+        <div className="border-border bg-card max-w-md space-y-4 rounded-lg border p-6">
+          <div className="space-y-2">
+            <label htmlFor="country" className="text-sm font-medium">
+              Country
+            </label>
+            <Select defaultValue="us">
+              <SelectTrigger id="country">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="us">United States</SelectItem>
+                <SelectItem value="uk">United Kingdom</SelectItem>
+                <SelectItem value="ca">Canada</SelectItem>
+                <SelectItem value="au">Australia</SelectItem>
+                <SelectItem value="de">Germany</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">
+              Select your country of residence.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="timezone" className="text-sm font-medium">
+              Timezone
+            </label>
+            <Select defaultValue="utc">
+              <SelectTrigger id="timezone">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>America</SelectLabel>
+                  <SelectItem value="est">Eastern Time (ET)</SelectItem>
+                  <SelectItem value="cst">Central Time (CT)</SelectItem>
+                  <SelectItem value="mst">Mountain Time (MT)</SelectItem>
+                  <SelectItem value="pst">Pacific Time (PT)</SelectItem>
+                </SelectGroup>
+                <SelectSeparator />
+                <SelectGroup>
+                  <SelectLabel>Other</SelectLabel>
+                  <SelectItem value="utc">UTC</SelectItem>
+                  <SelectItem value="gmt">GMT</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">
+              Choose your preferred timezone.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Width Variations */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Width Variations</h3>
+          <p className="text-muted-foreground text-sm">
+            Select components can be sized using width classes.
+          </p>
+        </div>
+        <div className="space-y-3">
+          <Select defaultValue="narrow">
+            <SelectTrigger className="w-32">
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="small">Small</SelectItem>
+              <SelectItem value="narrow">Narrow</SelectItem>
+              <SelectItem value="compact">Compact</SelectItem>
             </SelectContent>
           </Select>
-          <Select>
-            <SelectTrigger className="w-[100px]">
-              <SelectValue placeholder="Default" />
+          <Select defaultValue="medium">
+            <SelectTrigger className="w-64">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="medium">Medium width</SelectItem>
+              <SelectItem value="standard">Standard option</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select defaultValue="full">
+            <SelectTrigger className="w-full max-w-lg">
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="default">Default</SelectItem>
+              <SelectItem value="full">Full width (with max-width)</SelectItem>
+              <SelectItem value="responsive">Responsive option</SelectItem>
             </SelectContent>
           </Select>
         </div>
+      </section>
+    </div>
+  ),
+};
+
+/**
+ * Frosted effect demonstration - Selects use a translucent background (75% opacity)
+ * with backdrop blur (12px) creating a frosted glass effect.
+ */
+export const Frosted: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <div className="relative min-h-screen w-full overflow-hidden">
+      {/* Colorful busy background */}
+      <div className="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-2 p-4">
+        <div className="rounded-lg bg-gradient-to-br from-purple-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500" />
+        <div className="rounded-lg bg-gradient-to-br from-green-500 to-emerald-500" />
+        <div className="rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500" />
+        <div className="rounded-lg bg-gradient-to-br from-red-500 to-rose-500" />
+        <div className="rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500" />
+        <div className="rounded-lg bg-gradient-to-br from-teal-500 to-cyan-500" />
+        <div className="rounded-lg bg-gradient-to-br from-amber-500 to-yellow-500" />
+        <div className="rounded-lg bg-gradient-to-br from-fuchsia-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-lime-500 to-green-500" />
+        <div className="rounded-lg bg-gradient-to-br from-sky-500 to-blue-500" />
+        <div className="rounded-lg bg-gradient-to-br from-orange-500 to-red-500" />
+        <div className="rounded-lg bg-gradient-to-br from-violet-500 to-purple-500" />
+        <div className="rounded-lg bg-gradient-to-br from-cyan-500 to-teal-500" />
+        <div className="rounded-lg bg-gradient-to-br from-rose-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-emerald-500 to-lime-500" />
       </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 className="relative z-10 flex min-h-screen items-center justify-center p-8">
+        <div className="bg-card rounded-lg border p-4">
+          <Select>
+            <SelectTrigger className="w-[200px]">
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Fruits</SelectLabel>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="orange">Orange</SelectItem>
+                <SelectItem value="grape">Grape</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
     </div>
   ),
 };
 
 /**
- * Real-world usage example showing Select in a practical Farcaster application context.
- * Demonstrates form integration, controlled state, and typical user workflows.
+ * Interactive playground for testing select props and behavior.
  */
-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>
-    );
+export const Interactive: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger className="w-[280px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="broccoli">Broccoli</SelectItem>
+          <SelectItem value="spinach">Spinach</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+  args: {
+    defaultValue: "apple",
+    disabled: false,
   },
-};
+};