@neynar/ui 0.4.0 → 1.0.0

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

@@ -1,6 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Info } from "lucide-react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InfoIcon, MailIcon, UserIcon } from "lucide-react";
 import { useState } from "react";
+
+import { Button } from "../button";
 import { Checkbox } from "../checkbox";
 import {
   Field,
@@ -15,456 +17,813 @@ import {
   FieldTitle,
 } from "../field";
 import { Input } from "../input";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group";
+import { Label } from "../label";
 import { RadioGroup, RadioGroupItem } from "../radio-group";
 import { Switch } from "../switch";
+import { Textarea } from "../textarea";
 
-const meta = {
-  title: "Form & Input/Field",
+const meta: Meta<typeof Field> = {
+  title: "Components/Form & Field/Field",
   component: Field,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A comprehensive form field component that provides proper labeling, description, error handling, and layout options. Supports vertical, horizontal, and responsive orientations.",
-      },
-    },
   },
   argTypes: {
     orientation: {
-      control: { type: "select" },
+      control: "select",
       options: ["vertical", "horizontal", "responsive"],
-      description: "The orientation of the field layout",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes to apply",
+      description: "Layout orientation of the field",
     },
   },
-  args: {
-    orientation: "vertical",
-  },
-} satisfies Meta<typeof Field>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Field>;
 
 /**
- * Interactive playground with all field properties.
- * Use the controls panel to test different combinations of props.
+ * Webhook Configuration Form - A realistic scenario showing complete form fields
+ * with validation, labels, helper text, and error states in the Neynar Dashboard.
  */
-export const Interactive: Story = {
-  render: (args) => (
-    <div className="w-96">
-      <Field {...args}>
-        <FieldLabel htmlFor="email">Email Address</FieldLabel>
-        <Input id="email" type="email" placeholder="Enter your email" />
-        <FieldDescription>We'll never share your email.</FieldDescription>
-      </Field>
-    </div>
-  ),
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function WebhookConfigForm() {
+      const [formData, setFormData] = useState({
+        webhookUrl: "",
+        description: "",
+        apiKey: "",
+        notificationEmail: "",
+        enableRetries: true,
+        enableLogging: false,
+        eventType: "cast.created",
+      });
+
+      const [errors, setErrors] = useState<{
+        webhookUrl?: { message: string };
+        notificationEmail?: { message: string };
+        apiKey?: { message: string };
+      }>({});
+
+      const [touched, setTouched] = useState<{
+        webhookUrl?: boolean;
+        notificationEmail?: boolean;
+        apiKey?: boolean;
+      }>({});
+
+      function validateUrl(url: string) {
+        if (!url) {
+          return { message: "Webhook URL is required" };
+        }
+        if (!url.startsWith("https://")) {
+          return { message: "Webhook URL must use HTTPS" };
+        }
+        if (!url.includes(".")) {
+          return { message: "Please enter a valid URL" };
+        }
+        return undefined;
+      }
+
+      function validateEmail(email: string) {
+        if (!email) {
+          return undefined;
+        }
+        if (!email.includes("@") || !email.includes(".")) {
+          return { message: "Please enter a valid email address" };
+        }
+        return undefined;
+      }
+
+      function validateApiKey(key: string) {
+        if (!key) {
+          return { message: "API Key is required" };
+        }
+        if (key.length < 32) {
+          return { message: "API Key must be at least 32 characters" };
+        }
+        return undefined;
+      }
+
+      function handleBlur(field: keyof typeof touched) {
+        setTouched((prev) => ({ ...prev, [field]: true }));
+
+        const newErrors = { ...errors };
+
+        if (field === "webhookUrl") {
+          const error = validateUrl(formData.webhookUrl);
+          if (error) {
+            newErrors.webhookUrl = error;
+          } else {
+            delete newErrors.webhookUrl;
+          }
+        }
+
+        if (field === "notificationEmail") {
+          const error = validateEmail(formData.notificationEmail);
+          if (error) {
+            newErrors.notificationEmail = error;
+          } else {
+            delete newErrors.notificationEmail;
+          }
+        }
+
+        if (field === "apiKey") {
+          const error = validateApiKey(formData.apiKey);
+          if (error) {
+            newErrors.apiKey = error;
+          } else {
+            delete newErrors.apiKey;
+          }
+        }
+
+        setErrors(newErrors);
+      }
+
+      const hasErrors = Object.keys(errors).length > 0;
+
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          {/* Header */}
+          <div>
+            <h2 className="text-lg font-semibold">Configure Webhook</h2>
+            <p className="text-muted-foreground text-sm">
+              Set up a webhook endpoint to receive real-time Farcaster events.
+            </p>
+          </div>
+
+          <form className="space-y-6">
+            {/* Webhook URL - Error State Example */}
+            <Field
+              data-invalid={touched.webhookUrl && !!errors.webhookUrl}
+              orientation="vertical"
+            >
+              <FieldLabel htmlFor="webhook-url">
+                Webhook URL *
+                <InfoIcon className="text-muted-foreground size-3.5" />
+              </FieldLabel>
+              <FieldContent>
+                <Input
+                  id="webhook-url"
+                  type="url"
+                  placeholder="https://api.example.com/webhooks"
+                  value={formData.webhookUrl}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      webhookUrl: e.target.value,
+                    }))
+                  }
+                  onBlur={() => handleBlur("webhookUrl")}
+                  aria-invalid={touched.webhookUrl && !!errors.webhookUrl}
+                />
+                {!touched.webhookUrl || !errors.webhookUrl ? (
+                  <FieldDescription>
+                    Must be a publicly accessible HTTPS endpoint
+                  </FieldDescription>
+                ) : null}
+                {touched.webhookUrl && errors.webhookUrl && (
+                  <FieldError errors={[errors.webhookUrl]} />
+                )}
+              </FieldContent>
+            </Field>
+
+            {/* Description - Basic Field */}
+            <Field orientation="vertical">
+              <FieldLabel htmlFor="description">Description</FieldLabel>
+              <FieldContent>
+                <Textarea
+                  id="description"
+                  placeholder="What is this webhook for?"
+                  value={formData.description}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      description: e.target.value,
+                    }))
+                  }
+                  rows={3}
+                />
+                <FieldDescription>
+                  A brief description to help you remember this webhook's
+                  purpose
+                </FieldDescription>
+              </FieldContent>
+            </Field>
+
+            {/* API Key - With Input Group */}
+            <Field
+              data-invalid={touched.apiKey && !!errors.apiKey}
+              orientation="vertical"
+            >
+              <FieldLabel htmlFor="api-key">API Key *</FieldLabel>
+              <FieldContent>
+                <InputGroup>
+                  <InputGroupAddon align="inline-start">
+                    <UserIcon />
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="api-key"
+                    type="password"
+                    placeholder="Enter your Neynar API key"
+                    value={formData.apiKey}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        apiKey: e.target.value,
+                      }))
+                    }
+                    onBlur={() => handleBlur("apiKey")}
+                    aria-invalid={touched.apiKey && !!errors.apiKey}
+                  />
+                </InputGroup>
+                {!touched.apiKey || !errors.apiKey ? (
+                  <FieldDescription>
+                    Your API key will be used to authenticate webhook requests
+                  </FieldDescription>
+                ) : null}
+                {touched.apiKey && errors.apiKey && (
+                  <FieldError errors={[errors.apiKey]} />
+                )}
+              </FieldContent>
+            </Field>
+
+            <FieldSeparator>Event Settings</FieldSeparator>
+
+            {/* Event Type - Radio Group in Field */}
+            <FieldSet>
+              <FieldLegend variant="label">Event Type</FieldLegend>
+              <FieldGroup>
+                <RadioGroup
+                  value={formData.eventType}
+                  onValueChange={(value) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      eventType: value as string,
+                    }))
+                  }
+                >
+                  <Field orientation="horizontal">
+                    <FieldLabel htmlFor="event-cast-created">
+                      <RadioGroupItem
+                        value="cast.created"
+                        id="event-cast-created"
+                      />
+                      <div>
+                        <FieldTitle>Cast Created</FieldTitle>
+                        <FieldDescription>
+                          Triggered when a new cast is published
+                        </FieldDescription>
+                      </div>
+                    </FieldLabel>
+                  </Field>
+
+                  <Field orientation="horizontal">
+                    <FieldLabel htmlFor="event-user-followed">
+                      <RadioGroupItem
+                        value="user.followed"
+                        id="event-user-followed"
+                      />
+                      <div>
+                        <FieldTitle>User Followed</FieldTitle>
+                        <FieldDescription>
+                          Triggered when a user is followed
+                        </FieldDescription>
+                      </div>
+                    </FieldLabel>
+                  </Field>
+
+                  <Field orientation="horizontal">
+                    <FieldLabel htmlFor="event-reaction-added">
+                      <RadioGroupItem
+                        value="reaction.added"
+                        id="event-reaction-added"
+                      />
+                      <div>
+                        <FieldTitle>Reaction Added</FieldTitle>
+                        <FieldDescription>
+                          Triggered when a reaction is added to a cast
+                        </FieldDescription>
+                      </div>
+                    </FieldLabel>
+                  </Field>
+                </RadioGroup>
+              </FieldGroup>
+            </FieldSet>
+
+            <FieldSeparator>Advanced Options</FieldSeparator>
+
+            {/* Switches - Horizontal Orientation */}
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="enable-retries">
+                  <Switch
+                    id="enable-retries"
+                    checked={formData.enableRetries}
+                    onCheckedChange={(checked) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        enableRetries: checked,
+                      }))
+                    }
+                  />
+                  <div>
+                    <FieldTitle>Automatic Retries</FieldTitle>
+                    <FieldDescription>
+                      Automatically retry failed webhook deliveries up to 3
+                      times
+                    </FieldDescription>
+                  </div>
+                </FieldLabel>
+              </Field>
+
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="enable-logging">
+                  <Switch
+                    id="enable-logging"
+                    checked={formData.enableLogging}
+                    onCheckedChange={(checked) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        enableLogging: checked,
+                      }))
+                    }
+                  />
+                  <div>
+                    <FieldTitle>Request Logging</FieldTitle>
+                    <FieldDescription>
+                      Log all webhook requests and responses for debugging
+                    </FieldDescription>
+                  </div>
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+
+            {/* Notification Email - Optional Field */}
+            <Field
+              data-invalid={
+                touched.notificationEmail && !!errors.notificationEmail
+              }
+              orientation="vertical"
+            >
+              <FieldLabel htmlFor="notification-email">
+                Notification Email
+              </FieldLabel>
+              <FieldContent>
+                <InputGroup>
+                  <InputGroupAddon align="inline-start">
+                    <MailIcon />
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="notification-email"
+                    type="email"
+                    placeholder="your@email.com"
+                    value={formData.notificationEmail}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        notificationEmail: e.target.value,
+                      }))
+                    }
+                    onBlur={() => handleBlur("notificationEmail")}
+                    aria-invalid={
+                      touched.notificationEmail && !!errors.notificationEmail
+                    }
+                  />
+                </InputGroup>
+                {!touched.notificationEmail || !errors.notificationEmail ? (
+                  <FieldDescription>
+                    Receive alerts when webhook delivery fails
+                  </FieldDescription>
+                ) : null}
+                {touched.notificationEmail && errors.notificationEmail && (
+                  <FieldError errors={[errors.notificationEmail]} />
+                )}
+              </FieldContent>
+            </Field>
+
+            {/* Action Bar */}
+            <div className="flex justify-end gap-2 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setFormData({
+                    webhookUrl: "",
+                    description: "",
+                    apiKey: "",
+                    notificationEmail: "",
+                    enableRetries: true,
+                    enableLogging: false,
+                    eventType: "cast.created",
+                  });
+                  setErrors({});
+                  setTouched({});
+                }}
+              >
+                Reset
+              </Button>
+              <Button type="button" disabled={hasErrors}>
+                Create Webhook
+              </Button>
+            </div>
+          </form>
+        </div>
+      );
+    }
+
+    return <WebhookConfigForm />;
+  },
 };
 
 /**
- * Showcase of all available field orientations and compositions.
+ * Complete design system reference showing all field orientations, compositions,
+ * and states including validation errors.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="space-y-12 w-full max-w-2xl">
-      {/* Vertical Orientation */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Vertical Layout
-        </h3>
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Field Orientations */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Field Orientations</h3>
+          <p className="text-muted-foreground text-sm">
+            Vertical, horizontal, and responsive layout options.
+          </p>
+        </div>
+
         <div className="space-y-6">
-          <Field>
-            <FieldLabel htmlFor="name-v">Full Name</FieldLabel>
-            <Input id="name-v" placeholder="John Doe" />
-            <FieldDescription>Enter your full legal name.</FieldDescription>
-          </Field>
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium">Vertical (Default)</h4>
+            <Field orientation="vertical">
+              <FieldLabel htmlFor="vertical-input">Username</FieldLabel>
+              <FieldContent>
+                <Input id="vertical-input" placeholder="Enter username" />
+                <FieldDescription>
+                  Label and input are stacked vertically
+                </FieldDescription>
+              </FieldContent>
+            </Field>
+          </div>
+
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium">Horizontal</h4>
+            <Field orientation="horizontal">
+              <FieldLabel htmlFor="horizontal-input">Email</FieldLabel>
+              <FieldContent>
+                <Input id="horizontal-input" placeholder="your@email.com" />
+                <FieldDescription>
+                  Label and input are side by side
+                </FieldDescription>
+              </FieldContent>
+            </Field>
+          </div>
 
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium">Responsive</h4>
+            <FieldGroup>
+              <Field orientation="responsive">
+                <FieldLabel htmlFor="responsive-input">Phone</FieldLabel>
+                <FieldContent>
+                  <Input
+                    id="responsive-input"
+                    placeholder="+1 (555) 123-4567"
+                  />
+                  <FieldDescription>
+                    Vertical on mobile, horizontal on larger screens
+                  </FieldDescription>
+                </FieldContent>
+              </Field>
+            </FieldGroup>
+          </div>
+        </div>
+      </section>
+
+      {/* Basic Field Components */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Field Structure</h3>
+          <p className="text-muted-foreground text-sm">
+            Building blocks: Label, Input, Description, Error.
+          </p>
+        </div>
+
+        <div className="space-y-4">
           <Field>
-            <FieldLabel htmlFor="bio-v">Bio</FieldLabel>
-            <textarea
-              id="bio-v"
-              className="w-full min-h-24 px-3 py-2 border rounded-md"
-              placeholder="Tell us about yourself"
-            />
-            <FieldDescription>
-              Write a short bio about yourself (max 500 characters).
-            </FieldDescription>
+            <FieldLabel htmlFor="basic-1">Simple Field</FieldLabel>
+            <Input id="basic-1" placeholder="Just a label and input" />
           </Field>
-        </div>
-      </div>
 
-      {/* Horizontal Orientation */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Horizontal Layout
-        </h3>
-        <FieldGroup>
-          <Field orientation="horizontal">
+          <Field>
+            <FieldLabel htmlFor="basic-2">With Description</FieldLabel>
             <FieldContent>
-              <FieldTitle>Email Notifications</FieldTitle>
+              <Input id="basic-2" placeholder="Enter value" />
               <FieldDescription>
-                Receive email updates about your account.
+                Helper text provides additional context
               </FieldDescription>
             </FieldContent>
-            <Switch />
           </Field>
 
-          <Field orientation="horizontal">
+          <Field>
+            <FieldLabel htmlFor="basic-3">With Icon in Label</FieldLabel>
+            <FieldLabel htmlFor="basic-3">
+              Field Name
+              <InfoIcon className="text-muted-foreground size-3.5" />
+            </FieldLabel>
+            <Input id="basic-3" placeholder="Icon adds visual interest" />
+          </Field>
+        </div>
+      </section>
+
+      {/* Validation States */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Validation States</h3>
+          <p className="text-muted-foreground text-sm">
+            Fields with error states and validation messages.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <Field data-invalid="true">
+            <FieldLabel htmlFor="error-1">Single Error</FieldLabel>
             <FieldContent>
-              <FieldTitle>Marketing Emails</FieldTitle>
-              <FieldDescription>
-                Get updates about new features and products.
-              </FieldDescription>
+              <Input
+                id="error-1"
+                placeholder="invalid@value"
+                aria-invalid="true"
+              />
+              <FieldError errors={[{ message: "This field is required" }]} />
             </FieldContent>
-            <Switch />
           </Field>
-        </FieldGroup>
-      </div>
 
-      {/* Responsive Orientation */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Responsive Layout (vertical on mobile, horizontal on larger screens)
-        </h3>
-        <FieldGroup>
-          <Field orientation="responsive">
+          <Field data-invalid="true">
+            <FieldLabel htmlFor="error-2">Multiple Errors</FieldLabel>
             <FieldContent>
-              <FieldTitle>Two-Factor Auth</FieldTitle>
-              <FieldDescription>
-                Add an extra layer of security to your account.
-              </FieldDescription>
+              <Input
+                id="error-2"
+                placeholder="invalid@value"
+                aria-invalid="true"
+              />
+              <FieldError
+                errors={[
+                  { message: "Password must be at least 8 characters" },
+                  { message: "Password must contain a number" },
+                  { message: "Password must contain a special character" },
+                ]}
+              />
             </FieldContent>
-            <Switch />
           </Field>
-        </FieldGroup>
-      </div>
 
-      {/* With Error State */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Error States
-        </h3>
-        <div className="space-y-6">
           <Field data-invalid="true">
-            <FieldLabel htmlFor="email-error">Email</FieldLabel>
-            <Input
-              id="email-error"
-              type="email"
-              placeholder="email@example.com"
-              aria-invalid="true"
-              defaultValue="invalid-email"
-            />
-            <FieldError>Please enter a valid email address.</FieldError>
+            <FieldLabel htmlFor="error-3">Custom Error Message</FieldLabel>
+            <FieldContent>
+              <Input
+                id="error-3"
+                placeholder="invalid@value"
+                aria-invalid="true"
+              />
+              <FieldError>
+                Custom error message content can be passed as children
+              </FieldError>
+            </FieldContent>
           </Field>
+        </div>
+      </section>
+
+      {/* With Different Input Types */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Field with Different Inputs</h3>
+          <p className="text-muted-foreground text-sm">
+            Field component works with all form input types.
+          </p>
+        </div>
 
-          <Field data-invalid="true">
-            <FieldLabel htmlFor="password-error">Password</FieldLabel>
-            <Input
-              id="password-error"
-              type="password"
-              aria-invalid="true"
-              defaultValue="123"
-            />
-            <FieldError
-              errors={[
-                { message: "Password must be at least 8 characters" },
-                { message: "Password must contain a number" },
-                { message: "Password must contain a special character" },
-              ]}
-            />
+        <div className="space-y-4">
+          <Field>
+            <FieldLabel htmlFor="textarea-field">Message</FieldLabel>
+            <FieldContent>
+              <Textarea
+                id="textarea-field"
+                placeholder="Enter your message..."
+              />
+              <FieldDescription>Maximum 500 characters</FieldDescription>
+            </FieldContent>
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldLabel htmlFor="checkbox-field">
+              <Checkbox id="checkbox-field" />
+              <div>
+                <FieldTitle>Enable Notifications</FieldTitle>
+                <FieldDescription>
+                  Receive updates about your account
+                </FieldDescription>
+              </div>
+            </FieldLabel>
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldLabel htmlFor="switch-field">
+              <Switch id="switch-field" />
+              <div>
+                <FieldTitle>Dark Mode</FieldTitle>
+                <FieldDescription>Toggle dark mode theme</FieldDescription>
+              </div>
+            </FieldLabel>
           </Field>
         </div>
-      </div>
+      </section>
+
+      {/* FieldGroup and FieldSet */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Field Groups</h3>
+          <p className="text-muted-foreground text-sm">
+            Grouping related fields with FieldGroup and FieldSet.
+          </p>
+        </div>
+
+        <FieldSet>
+          <FieldLegend variant="legend">User Information</FieldLegend>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="group-1">First Name</FieldLabel>
+              <Input id="group-1" placeholder="John" />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="group-2">Last Name</FieldLabel>
+              <Input id="group-2" placeholder="Doe" />
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="group-3">Email</FieldLabel>
+              <FieldContent>
+                <Input
+                  id="group-3"
+                  type="email"
+                  placeholder="john@example.com"
+                />
+                <FieldDescription>
+                  We'll never share your email
+                </FieldDescription>
+              </FieldContent>
+            </Field>
+          </FieldGroup>
+        </FieldSet>
+      </section>
+
+      {/* Field Separator */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Field Separator</h3>
+          <p className="text-muted-foreground text-sm">
+            Visual separation between field groups.
+          </p>
+        </div>
 
-      {/* Field Groups */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          Field Groups with Separators
-        </h3>
         <FieldGroup>
           <Field>
-            <FieldLabel htmlFor="first-name">First Name</FieldLabel>
-            <Input id="first-name" placeholder="John" />
+            <FieldLabel htmlFor="sep-1">Account Name</FieldLabel>
+            <Input id="sep-1" placeholder="My Account" />
           </Field>
 
+          <FieldSeparator>Security Settings</FieldSeparator>
+
           <Field>
-            <FieldLabel htmlFor="last-name">Last Name</FieldLabel>
-            <Input id="last-name" placeholder="Doe" />
+            <FieldLabel htmlFor="sep-2">Password</FieldLabel>
+            <Input id="sep-2" type="password" placeholder="••••••••" />
           </Field>
 
-          <FieldSeparator>Contact Information</FieldSeparator>
-
           <Field>
-            <FieldLabel htmlFor="email-group">Email</FieldLabel>
-            <Input id="email-group" type="email" placeholder="john@example.com" />
+            <FieldLabel htmlFor="sep-3">Confirm Password</FieldLabel>
+            <Input id="sep-3" type="password" placeholder="••••••••" />
           </Field>
 
+          <FieldSeparator />
+
           <Field>
-            <FieldLabel htmlFor="phone-group">Phone</FieldLabel>
-            <Input id="phone-group" type="tel" placeholder="+1 (555) 000-0000" />
+            <FieldLabel htmlFor="sep-4">Two-Factor Authentication</FieldLabel>
+            <Input id="sep-4" placeholder="Enter code" />
           </Field>
         </FieldGroup>
-      </div>
+      </section>
+
+      {/* Disabled State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Disabled State</h3>
+          <p className="text-muted-foreground text-sm">
+            Fields in disabled state with reduced opacity.
+          </p>
+        </div>
 
-      {/* With Checkboxes and Radio */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-medium text-muted-foreground">
-          With Checkboxes and Radio Buttons
-        </h3>
-        <div className="space-y-6">
+        <Field data-disabled="true">
+          <FieldLabel htmlFor="disabled-1">Disabled Field</FieldLabel>
+          <FieldContent>
+            <Input
+              id="disabled-1"
+              placeholder="Cannot edit"
+              disabled
+              defaultValue="Read only value"
+            />
+            <FieldDescription>This field cannot be modified</FieldDescription>
+          </FieldContent>
+        </Field>
+      </section>
+
+      {/* Complex Form Pattern */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Complete Form Pattern</h3>
+          <p className="text-muted-foreground text-sm">
+            A realistic form combining multiple field types and layouts.
+          </p>
+        </div>
+
+        <form className="border-border rounded-lg border p-6">
           <FieldSet>
-            <FieldLegend>Preferences</FieldLegend>
+            <FieldLegend variant="legend">Contact Form</FieldLegend>
             <FieldGroup>
-              <Field orientation="horizontal">
-                <Checkbox id="newsletter" />
-                <FieldLabel htmlFor="newsletter">
-                  Subscribe to newsletter
-                </FieldLabel>
+              <Field>
+                <FieldLabel htmlFor="complex-1">Name *</FieldLabel>
+                <Input id="complex-1" placeholder="Your name" required />
               </Field>
 
-              <Field orientation="horizontal">
-                <Checkbox id="updates" />
-                <FieldLabel htmlFor="updates">Receive product updates</FieldLabel>
+              <Field>
+                <FieldLabel htmlFor="complex-2">Email *</FieldLabel>
+                <FieldContent>
+                  <Input
+                    id="complex-2"
+                    type="email"
+                    placeholder="your@email.com"
+                    required
+                  />
+                  <FieldDescription>
+                    We'll respond to this email
+                  </FieldDescription>
+                </FieldContent>
               </Field>
-            </FieldGroup>
-          </FieldSet>
 
-          <FieldSet>
-            <FieldLegend>Notification Method</FieldLegend>
-            <RadioGroup defaultValue="email">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="email" id="radio-email" />
-                <FieldLabel htmlFor="radio-email">Email</FieldLabel>
+              <Field>
+                <FieldLabel htmlFor="complex-3">Subject</FieldLabel>
+                <Input id="complex-3" placeholder="What is this about?" />
               </Field>
 
-              <Field orientation="horizontal">
-                <RadioGroupItem value="sms" id="radio-sms" />
-                <FieldLabel htmlFor="radio-sms">SMS</FieldLabel>
+              <Field>
+                <FieldLabel htmlFor="complex-4">Message *</FieldLabel>
+                <FieldContent>
+                  <Textarea
+                    id="complex-4"
+                    placeholder="Tell us more..."
+                    rows={4}
+                    required
+                  />
+                  <FieldDescription>Minimum 10 characters</FieldDescription>
+                </FieldContent>
               </Field>
 
               <Field orientation="horizontal">
-                <RadioGroupItem value="push" id="radio-push" />
-                <FieldLabel htmlFor="radio-push">Push Notification</FieldLabel>
+                <FieldLabel htmlFor="complex-5">
+                  <Checkbox id="complex-5" />
+                  <Label>Send me a copy of this message</Label>
+                </FieldLabel>
               </Field>
-            </RadioGroup>
+
+              <div className="flex justify-end gap-2 pt-2">
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+                <Button type="submit">Send Message</Button>
+              </div>
+            </FieldGroup>
           </FieldSet>
-        </div>
-      </div>
+        </form>
+      </section>
     </div>
   ),
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        story:
-          "Complete showcase of field orientations, error states, groups, and integration with various form controls.",
-      },
-    },
-  },
 };
 
 /**
- * Real-world usage examples showing fields in practical form scenarios.
+ * Interactive playground for testing field props.
  */
-export const InContext: Story = {
-  render: () => {
-    const [formErrors, setFormErrors] = useState({
-      email: "",
-      password: "",
-    });
-
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      const formData = new FormData(e.target as HTMLFormElement);
-      const email = formData.get("email") as string;
-      const password = formData.get("password") as string;
-
-      const errors = { email: "", password: "" };
-      if (!email.includes("@")) {
-        errors.email = "Please enter a valid email address";
-      }
-      if (password.length < 8) {
-        errors.password = "Password must be at least 8 characters";
-      }
-      setFormErrors(errors);
-    };
-
-    return (
-      <div className="space-y-8 w-full max-w-2xl">
-        {/* Registration Form */}
-        <div className="space-y-4 p-6 border rounded-lg">
-          <h3 className="text-lg font-semibold">Create Account</h3>
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <FieldGroup>
-              <Field data-invalid={!!formErrors.email}>
-                <FieldLabel htmlFor="reg-email">
-                  Email Address
-                  <span className="text-destructive ml-1">*</span>
-                </FieldLabel>
-                <Input
-                  id="reg-email"
-                  name="email"
-                  type="email"
-                  placeholder="you@example.com"
-                  aria-invalid={!!formErrors.email}
-                  required
-                />
-                {formErrors.email && (
-                  <FieldError>{formErrors.email}</FieldError>
-                )}
-              </Field>
-
-              <Field data-invalid={!!formErrors.password}>
-                <FieldLabel htmlFor="reg-password">
-                  Password
-                  <span className="text-destructive ml-1">*</span>
-                </FieldLabel>
-                <Input
-                  id="reg-password"
-                  name="password"
-                  type="password"
-                  placeholder="Min. 8 characters"
-                  aria-invalid={!!formErrors.password}
-                  required
-                />
-                <FieldDescription>
-                  Must be at least 8 characters with a number and special
-                  character.
-                </FieldDescription>
-                {formErrors.password && (
-                  <FieldError>{formErrors.password}</FieldError>
-                )}
-              </Field>
-
-              <Field orientation="horizontal">
-                <Checkbox id="reg-terms" required />
-                <FieldLabel htmlFor="reg-terms">
-                  I agree to the{" "}
-                  <a href="#" className="underline">
-                    Terms of Service
-                  </a>{" "}
-                  and{" "}
-                  <a href="#" className="underline">
-                    Privacy Policy
-                  </a>
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-
-            <button
-              type="submit"
-              className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90"
-            >
-              Create Account
-            </button>
-          </form>
-        </div>
-
-        {/* Settings Form */}
-        <div className="space-y-4 p-6 border rounded-lg">
-          <h3 className="text-lg font-semibold">Notification Settings</h3>
-          <FieldGroup>
-            <Field orientation="horizontal">
-              <FieldContent>
-                <FieldTitle>
-                  Email Notifications
-                  <Info className="size-4 text-muted-foreground ml-1" />
-                </FieldTitle>
-                <FieldDescription>
-                  Receive email updates about your account activity.
-                </FieldDescription>
-              </FieldContent>
-              <Switch defaultChecked />
-            </Field>
-
-            <Field orientation="horizontal">
-              <FieldContent>
-                <FieldTitle>Push Notifications</FieldTitle>
-                <FieldDescription>
-                  Get push notifications on your devices.
-                </FieldDescription>
-              </FieldContent>
-              <Switch />
-            </Field>
-
-            <FieldSeparator />
-
-            <Field orientation="horizontal">
-              <FieldContent>
-                <FieldTitle>Marketing Communications</FieldTitle>
-                <FieldDescription>
-                  Receive news, announcements, and product updates.
-                </FieldDescription>
-              </FieldContent>
-              <Switch />
-            </Field>
-          </FieldGroup>
-        </div>
-
-        {/* Profile Form */}
-        <div className="space-y-4 p-6 border rounded-lg">
-          <h3 className="text-lg font-semibold">Profile Information</h3>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="profile-name">Display Name</FieldLabel>
-              <Input
-                id="profile-name"
-                placeholder="How you'd like to be called"
-              />
-              <FieldDescription>
-                This is how your name will appear to others.
-              </FieldDescription>
-            </Field>
-
-            <Field>
-              <FieldLabel htmlFor="profile-bio">Bio</FieldLabel>
-              <textarea
-                id="profile-bio"
-                className="w-full min-h-24 px-3 py-2 border rounded-md"
-                placeholder="Tell us about yourself"
-              />
-              <FieldDescription>
-                Brief description for your profile (max 500 characters).
-              </FieldDescription>
-            </Field>
-
-            <FieldSeparator>Visibility</FieldSeparator>
-
-            <FieldSet>
-              <FieldLegend variant="label">Who can see your profile?</FieldLegend>
-              <RadioGroup defaultValue="public">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="public" id="vis-public" />
-                  <FieldLabel htmlFor="vis-public">Public</FieldLabel>
-                </Field>
-
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="private" id="vis-private" />
-                  <FieldLabel htmlFor="vis-private">Private</FieldLabel>
-                </Field>
-
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="friends" id="vis-friends" />
-                  <FieldLabel htmlFor="vis-friends">Friends Only</FieldLabel>
-                </Field>
-              </RadioGroup>
-            </FieldSet>
-          </FieldGroup>
-        </div>
-      </div>
-    );
-  },
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        story:
-          "Real-world examples showing fields in registration forms, settings panels, and profile editors with proper validation and layout.",
-      },
-    },
+export const Interactive: Story = {
+  render: (args) => (
+    <Field {...args} className="min-w-80">
+      <FieldLabel htmlFor="interactive-input">Field Label</FieldLabel>
+      <FieldContent>
+        <Input id="interactive-input" placeholder="Enter text..." />
+        <FieldDescription>This is a helper text description</FieldDescription>
+      </FieldContent>
+    </Field>
+  ),
+  args: {
+    orientation: "vertical",
   },
 };