{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "A single-line text input. Put it inside a Field for the label and errors.",
  "dependencies": [],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/field.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/input.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: input. Managed by BlankUI. Read input.md before editing. Wrap in <Field> for label and errors.\nimport type { ComponentProps } from \"react\"\nimport { useFieldControl } from \"@/components/ui/field\"\nimport { cn } from \"@/lib/utils\"\n\nexport const inputClasses =\n  \"flex w-full min-w-0 rounded-md border border-input bg-surface px-3 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:outline-destructive\"\n\nexport interface InputProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n  /** Height. Defaults to `default`. */\n  size?: \"sm\" | \"default\" | \"lg\"\n}\n\nconst sizeClass = { sm: \"h-8\", default: \"h-10\", lg: \"h-12 text-base\" } as const\n\n/**\n * A single-line text input. Put it inside <Field> so it gets a label, help text and error wiring.\n *\n * @example\n * <Field label=\"Name\">\n *   <Input placeholder=\"Ada Lovelace\" />\n * </Field>\n */\nexport function Input({ size = \"default\", className, type = \"text\", ...props }: InputProps) {\n  const wired = useFieldControl(props)\n  return (\n    <input\n      data-slot=\"input\"\n      type={type}\n      className={cn(\n        inputClasses,\n        sizeClass[size],\n        \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...wired}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/input.md",
      "type": "registry:ui",
      "content": "---\nname: input\ntitle: Input\ndescription: A single-line text input. Put it inside a Field for the label and errors.\ncategory: form\nwhenToUse:\n  - Short text like a name, email, password, number or URL.\nwhenNotToUse:\n  - when: Text that can be several lines long.\n    use: textarea\n  - when: Picking one option from a known list.\n    use: select\n  - when: A yes or no choice.\n    use: checkbox\nrelated: [field, textarea, select]\nrequiredParts: [Input]\nantiPatterns:\n  - avoid: \"<input className=...> (a raw input element)\"\n    instead: \"<Input>\"\n  - avoid: \"<Input> without a Field or aria-label\"\n    instead: '<Field label=\"Email\"><Input type=\"email\" /></Field>'\n  - avoid: '<Input className=\"border-red-500\"> to show an error'\n    instead: '<Field label=\"Email\" error=\"Enter a valid email\">'\n---\n\n# Input\n\n## Import\n\n```tsx\nimport { Input } from \"@/components/ui/input\"\n```\n\n## Example\n\n```tsx\n<Field label=\"Email\" error={errors.email}>\n  <Input type=\"email\" placeholder=\"you@example.com\" />\n</Field>\n```\n\nSizes: `sm`, `default`, `lg`. All native input props work (`type`, `name`, `value`, `onChange`, `placeholder`, `disabled`).\n\nAn input without a visible label, like a toolbar search box, needs an `aria-label`:\n\n```tsx\n<Input type=\"search\" aria-label=\"Search projects\" placeholder=\"Search\" />\n```\n"
    }
  ],
  "docs": "Read components/ui/input.md before using Input. Docs: https://blank.vageshwar.dev/docs/input",
  "meta": {
    "category": "form",
    "requiredParts": [
      "Input"
    ],
    "related": [
      "field",
      "textarea",
      "select"
    ]
  }
}