{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "Labeled text field that wires a real label to the input for you.",
  "categories": [
    "forms"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/input.tsx",
      "type": "registry:ui",
      "target": "components/ui/input.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Optional label rendered above the input as a real `<label>` element.\n   * When provided, an `id` is auto-generated (via `useId`) and associated\n   * with the input via `htmlFor`. Any `id` or `aria-label` passed explicitly\n   * in `props` takes precedence.\n   *\n   * Matches the convention used across the apps:\n   * `block text-sm font-medium` in the secondary text color above the field.\n   */\n  label?: React.ReactNode;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, label, id: idProp, ...props }, ref) => {\n    const autoId = React.useId();\n    const id = idProp ?? (label !== undefined ? autoId : undefined);\n\n    const inputEl = (\n      <input\n        type={type}\n        id={id}\n        className={cn(\n          \"flex h-10 w-full rounded-xl\",\n          \"border border-[var(--color-border-light)]\",\n          \"bg-[var(--color-surface-light)]\",\n          \"px-3 py-2 text-sm\",\n          \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n          \"placeholder:text-[var(--color-text-muted-light)]\",\n          \"focus-visible:outline-none focus-visible:ring-2\",\n          \"focus-visible:ring-[var(--color-warm-400)] focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"dark:border-[var(--color-border-dark)]\",\n          \"dark:bg-[var(--color-surface-dark)]\",\n          \"dark:placeholder:text-[var(--color-text-muted-dark)]\",\n          \"dark:focus-visible:ring-[var(--color-neutral-500)]\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n\n    if (label !== undefined) {\n      return (\n        <div className=\"flex flex-col gap-1\">\n          <label\n            htmlFor={id}\n            className=\"block text-sm font-medium text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)]\"\n          >\n            {label}\n          </label>\n          {inputEl}\n        </div>\n      );\n    }\n\n    return inputEl;\n  }\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"
    }
  ],
  "docs": "Pass `label` and it renders a real label element tied to the input; otherwise supply your own aria-label. A placeholder is a hint, so keep the label for the field's name. Native input attributes are forwarded, so type, placeholder, and validation work as usual.",
  "meta": {
    "group": "forms",
    "related": [
      "select",
      "slider"
    ],
    "exports": [
      "Input"
    ],
    "siteSlug": "input"
  }
}