{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-story",
  "title": "Input Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating input component usage and variants",
  "registryDependencies": [
    "input",
    "label",
    "button"
  ],
  "files": [
    {
      "path": "registry/ui/input-story/input-base.stories.tsx",
      "content": "import { expect, userEvent } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\n/**\n * Displays a form input field or a component that looks like an input field.\n */\nconst meta = {\n  title: \"ui/base/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    className: \"w-96\",\n    type: \"email\",\n    placeholder: \"Email\",\n    disabled: false,\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the input field.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `disabled` prop to make the input non-interactive and appears faded,\n * indicating that input is not currently accepted.\n */\nexport const Disabled: Story = {\n  args: { disabled: true },\n};\n\n/**\n * Use the `Label` component to includes a clear, descriptive label above or\n * alongside the input area to guide users.\n */\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid items-center gap-1.5\">\n      <Label htmlFor=\"email\">{args.placeholder}</Label>\n      <Input {...args} id=\"email\" />\n    </div>\n  ),\n};\n\n/**\n * Use a text element below the input field to provide additional instructions\n * or information to users.\n */\nexport const WithHelperText: Story = {\n  render: (args) => (\n    <div className=\"grid items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">{args.placeholder}</Label>\n      <Input {...args} id=\"email-2\" />\n      <p className=\"text-foreground/60 text-sm\">Enter your email address.</p>\n    </div>\n  ),\n};\n\n/**\n * Use the `Button` component to indicate that the input field can be submitted\n * or used to trigger an action.\n */\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Input {...args} />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  ),\n};\n\nexport const ShouldEnterText: Story = {\n  name: \"when user enters text, should see it in the input field\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvas, step }) => {\n    const input = await canvas.findByPlaceholderText(/email/i);\n    const mockedInput = \"mocked@shadcn.com\";\n\n    await step(\"focus and type into the input field\", async () => {\n      await userEvent.click(input);\n      await userEvent.type(input, mockedInput);\n    });\n\n    expect(input).toHaveValue(mockedInput);\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "input",
    "form"
  ],
  "type": "registry:component"
}