{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-story",
  "title": "Field Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating field component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "checkbox",
    "field",
    "input",
    "radio-group",
    "select",
    "slider",
    "switch",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/ui/field-story/field-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport * as React from \"react\";\n\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/components/ui/radio-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * Combine labels, controls, and help text to compose accessible form fields and grouped inputs.\n */\nconst meta: Meta<typeof Field> = {\n  title: \"ui/base/Field\",\n  component: Field,\n  tags: [\"autodocs\"],\n  argTypes: {\n    orientation: {\n      control: \"select\",\n      options: [\"vertical\", \"horizontal\", \"responsive\"],\n    },\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  args: {\n    orientation: \"vertical\",\n  },\n  decorators: (Story) => (\n    <div className=\"w-full max-w-md min-w-sm\">\n      <Story />\n    </div>\n  ),\n} satisfies Meta<typeof Field>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Field with Input component for text input.\n */\nexport const WithInput: Story = {\n  render: (args) => (\n    <FieldSet>\n      <FieldGroup>\n        <Field {...args}>\n          <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n          <Input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  ),\n};\n\n/**\n * Field with textarea for longer text input.\n */\nexport const WithTextarea: Story = {\n  render: (args) => (\n    <FieldSet>\n      <FieldGroup>\n        <Field {...args}>\n          <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n          <Textarea\n            id=\"feedback\"\n            placeholder=\"Your feedback helps us improve...\"\n            rows={4}\n          />\n          <FieldDescription>\n            Share your thoughts about our service.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  ),\n};\n\n/**\n * Field with Select component for dropdown selections.\n */\nexport const WithSelect: Story = {\n  render: (args) => (\n    <Field {...args}>\n      <FieldLabel>Department</FieldLabel>\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose department\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"engineering\">Engineering</SelectItem>\n          <SelectItem value=\"design\">Design</SelectItem>\n          <SelectItem value=\"marketing\">Marketing</SelectItem>\n          <SelectItem value=\"sales\">Sales</SelectItem>\n          <SelectItem value=\"support\">Customer Support</SelectItem>\n          <SelectItem value=\"hr\">Human Resources</SelectItem>\n          <SelectItem value=\"finance\">Finance</SelectItem>\n          <SelectItem value=\"operations\">Operations</SelectItem>\n        </SelectContent>\n      </Select>\n      <FieldDescription>\n        Select your department or area of work.\n      </FieldDescription>\n    </Field>\n  ),\n};\n\n/**\n * Field with Slider component and dynamic value display.\n */\nexport const WithSlider: Story = {\n  render: () => {\n    const [value, setValue] = React.useState<number[]>([200, 800]);\n    return (\n      <Field>\n        <FieldTitle>Price Range</FieldTitle>\n        <FieldDescription>\n          Set your budget range ($\n          <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n          <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n        </FieldDescription>\n        <Slider\n          value={value}\n          onValueChange={(nextValue) =>\n            setValue(Array.isArray(nextValue) ? [...nextValue] : [nextValue])\n          }\n          max={1000}\n          min={0}\n          step={10}\n          className=\"mt-2 w-full\"\n          aria-label=\"Price Range\"\n        />\n      </Field>\n    );\n  },\n};\n\n/**\n * FieldSet with multiple related fields in a grid layout.\n */\nexport const WithFieldset: Story = {\n  render: () => (\n    <div className=\"w-full max-w-md space-y-6\">\n      <FieldSet>\n        <FieldLegend>Address Information</FieldLegend>\n        <FieldDescription>\n          We need your address to deliver your order.\n        </FieldDescription>\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"street\">Street Address</FieldLabel>\n            <Input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"city\">City</FieldLabel>\n              <Input id=\"city\" type=\"text\" placeholder=\"New York\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"zip\">Postal Code</FieldLabel>\n              <Input id=\"zip\" type=\"text\" placeholder=\"90502\" />\n            </Field>\n          </div>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  ),\n};\n\n/**\n * Field with checkbox inputs using FieldSet structure.\n */\nexport const WithCheckbox: Story = {\n  render: () => (\n    <FieldGroup>\n      <FieldSet>\n        <FieldLegend variant=\"label\">\n          Show these items on the desktop\n        </FieldLegend>\n        <FieldDescription>\n          Select the items you want to show on the desktop.\n        </FieldDescription>\n        <FieldGroup className=\"gap-3\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"finder-pref-9k2-hard-disks-ljj\" />\n            <FieldLabel\n              htmlFor=\"finder-pref-9k2-hard-disks-ljj\"\n              className=\"font-normal\"\n              defaultChecked\n            >\n              Hard disks\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"finder-pref-9k2-external-disks-1yg\" />\n            <FieldLabel\n              htmlFor=\"finder-pref-9k2-external-disks-1yg\"\n              className=\"font-normal\"\n            >\n              External disks\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"finder-pref-9k2-cds-dvds-fzt\" />\n            <FieldLabel\n              htmlFor=\"finder-pref-9k2-cds-dvds-fzt\"\n              className=\"font-normal\"\n            >\n              CDs, DVDs, and iPods\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"finder-pref-9k2-connected-servers-6l2\" />\n            <FieldLabel\n              htmlFor=\"finder-pref-9k2-connected-servers-6l2\"\n              className=\"font-normal\"\n            >\n              Connected servers\n            </FieldLabel>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator />\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"finder-pref-9k2-sync-folders-nep\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"finder-pref-9k2-sync-folders-nep\">\n            Sync Desktop & Documents folders\n          </FieldLabel>\n          <FieldDescription>\n            Your Desktop & Documents folders are being synced with iCloud Drive.\n            You can access them from other devices.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  ),\n};\n\n/**\n * Field with RadioGroup for single selection.\n */\nexport const WithRadio: Story = {\n  render: () => (\n    <FieldSet>\n      <FieldLabel>Subscription Plan</FieldLabel>\n      <FieldDescription>\n        Yearly and lifetime plans offer significant savings.\n      </FieldDescription>\n      <RadioGroup defaultValue=\"monthly\">\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"monthly\" id=\"plan-monthly\" />\n          <FieldLabel htmlFor=\"plan-monthly\" className=\"font-normal\">\n            Monthly ($9.99/month)\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"yearly\" id=\"plan-yearly\" />\n          <FieldLabel htmlFor=\"plan-yearly\" className=\"font-normal\">\n            Yearly ($99.99/year)\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"lifetime\" id=\"plan-lifetime\" />\n          <FieldLabel htmlFor=\"plan-lifetime\" className=\"font-normal\">\n            Lifetime ($299.99)\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </FieldSet>\n  ),\n};\n\n/**\n * Field with Switch in horizontal orientation.\n */\nexport const WithSwitch: Story = {\n  render: () => (\n    <Field orientation=\"horizontal\">\n      <FieldContent>\n        <FieldLabel htmlFor=\"2fa\">Multi-factor authentication</FieldLabel>\n        <FieldDescription>\n          Enable multi-factor authentication. If you do not have a two-factor\n          device, you can use a one-time code sent to your email.\n        </FieldDescription>\n      </FieldContent>\n      <Switch id=\"2fa\" />\n    </Field>\n  ),\n};\n\n/**\n * Selectable field groups with RadioItem for choice cards.\n */\nexport const ChoiceCard: Story = {\n  render: () => (\n    <FieldGroup>\n      <FieldSet>\n        <FieldLabel htmlFor=\"compute-environment-p8w\">\n          Compute Environment\n        </FieldLabel>\n        <FieldDescription>\n          Select the compute environment for your cluster.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"kubernetes\">\n          <FieldLabel htmlFor=\"kubernetes-r2h\">\n            <Field orientation=\"horizontal\">\n              <FieldContent>\n                <FieldTitle>Kubernetes</FieldTitle>\n                <FieldDescription>\n                  Run GPU workloads on a K8s configured cluster.\n                </FieldDescription>\n              </FieldContent>\n              <RadioGroupItem value=\"kubernetes\" id=\"kubernetes-r2h\" />\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"vm-z4k\">\n            <Field orientation=\"horizontal\">\n              <FieldContent>\n                <FieldTitle>Virtual Machine</FieldTitle>\n                <FieldDescription>\n                  Access a VM configured cluster to run GPU workloads.\n                </FieldDescription>\n              </FieldContent>\n              <RadioGroupItem value=\"vm\" id=\"vm-z4k\" />\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n      </FieldSet>\n    </FieldGroup>\n  ),\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "field",
    "form"
  ],
  "type": "registry:component"
}