{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A quiet dashboard input with optional leading and trailing slots, plus a Field wrapper for label, hint and error.",
  "files": [
    {
      "path": "registry/dashboard/components/input/input.tsx",
      "content": "import { cn } from '@/lib/utils'\n\ntype InputProps = React.ComponentProps<'input'> & {\n  leading?: React.ReactNode\n  trailing?: React.ReactNode\n}\n\nexport function Input({ leading, trailing, className, ...props }: InputProps) {\n  return (\n    <div\n      className={cn(\n        'flex h-8 w-full min-w-0 items-center gap-2 rounded-lg border border-input bg-card px-2.5 text-sm text-foreground transition-[border-color] duration-150 focus-within:border-ring has-disabled:opacity-50 has-aria-invalid:border-destructive [&_svg]:size-3.5 [&_svg]:shrink-0',\n        className,\n      )}\n    >\n      {leading && <span className=\"flex text-muted-foreground\">{leading}</span>}\n      <input\n        className=\"h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n        {...props}\n      />\n      {trailing && <span className=\"flex text-muted-foreground\">{trailing}</span>}\n    </div>\n  )\n}\n\ntype FieldProps = {\n  label: React.ReactNode\n  htmlFor: string\n  hint?: React.ReactNode\n  error?: string\n  required?: boolean\n  className?: string\n  children: React.ReactNode\n}\n\nexport function Field({ label, htmlFor, hint, error, required, className, children }: FieldProps) {\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      <label htmlFor={htmlFor} className=\"text-sm font-medium text-foreground\">\n        {label}\n        {required && <span className=\"text-muted-foreground\"> *</span>}\n      </label>\n      {children}\n      {error ? (\n        <span id={`${htmlFor}-error`} role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </span>\n      ) : (\n        hint && (\n          <span id={`${htmlFor}-hint`} className=\"text-xs text-muted-foreground\">\n            {hint}\n          </span>\n        )\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/input.tsx"
    }
  ],
  "meta": {
    "scenario": "dashboard",
    "kind": "components"
  },
  "categories": [
    "dashboard",
    "inputs",
    "forms"
  ],
  "type": "registry:component"
}