{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "Labelled text input with hint and error states, sized to match Button.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/input.tsx",
      "content": "import * as React from \"react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Text input with an optional label and hint. 44px tall so it matches Button. */\n\nexport const Input = React.forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement> & { label?: string; hint?: string; error?: string }\n>(function Input({ className, label, hint, error, id, ...props }, ref) {\n  const autoId = React.useId()\n  const inputId = id || autoId\n  const noteId = `${inputId}-note`\n  return (\n    <label htmlFor={inputId} className=\"block\">\n      {label ? <span className=\"mb-1.5 block text-[13px] font-medium text-sk-ink\">{label}</span> : null}\n      <input\n        ref={ref}\n        id={inputId}\n        aria-invalid={!!error || undefined}\n        aria-describedby={error || hint ? noteId : undefined}\n        className={cn(\n          \"h-11 w-full rounded-sk-btn border bg-sk-card px-3.5 text-base text-sk-ink sm:text-sm outline-none transition-[border-color,box-shadow] duration-200 placeholder:text-sk-muted/70\",\n          \"focus:border-sk-accent focus:ring-[3px] focus:ring-sk-accent/15\",\n          error ? \"border-sk-sale\" : \"border-sk-line\",\n          className\n        )}\n        {...props}\n      />\n      {error ? (\n        <span id={noteId} role=\"alert\" className=\"mt-1.5 block text-xs text-sk-sale\">{error}</span>\n      ) : hint ? (\n        <span id={noteId} className=\"mt-1.5 block text-xs text-sk-muted\">{hint}</span>\n      ) : null}\n    </label>\n  )\n})\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/input.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 200
  }
}