{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "description": "A simple input component",
  "files": [
    {
      "path": "registry/cs/ui/input/input.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { CsIcon } from \"@/registry/cs/ui/button/button\"\n\nconst INPUT_SIZES = {\n  xs: \"h-6 px-2 text-xs\",\n  sm: \"h-8 px-2.5 text-sm\",\n  md: \"h-9 px-3 text-sm\",\n  lg: \"h-10 px-3 text-base\",\n  xl: \"h-12 px-4 text-base\",\n}\n\nconst INPUT_ICON_SIZES = {\n  xs: \"size-3\",\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-4\",\n  xl: \"size-5\",\n}\n\nconst INPUT_ICON_PADDING = {\n  xs: \"pl-6\",\n  sm: \"pl-8\",\n  md: \"pl-9\",\n  lg: \"pl-10\",\n  xl: \"pl-12\",\n}\n\nexport interface InputProps extends Omit<React.ComponentProps<\"input\">, \"size\"> {\n  /** Input size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Prefix icon component. */\n  icon?: CsIcon\n  /** Label text above the input. */\n  label?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, size = \"md\", icon: Icon, label, id: idProp, ...props }, ref) => {\n    const autoId = React.useId()\n    const id = idProp ?? autoId\n\n    const iconElement =\n      Icon && typeof Icon === \"function\"\n        ? React.createElement(Icon as React.ComponentType<{ className?: string }>, {\n            className: cn(\"absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none\", INPUT_ICON_SIZES[size]),\n          })\n        : Icon\n          ? React.cloneElement(Icon as React.ReactElement<{ className?: string }>, {\n              className: cn(\"absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none\", INPUT_ICON_SIZES[size]),\n            })\n          : null\n\n    return (\n      <div data-slot=\"input-wrapper\" className=\"flex flex-col gap-1\">\n        {label && (\n          <label htmlFor={id} className=\"text-sm font-medium text-foreground\">\n            {label}\n          </label>\n        )}\n        <div className=\"relative\">\n          {iconElement}\n          <input\n            ref={ref}\n            id={id}\n            type={type}\n            data-slot=\"input\"\n            className={cn(\n              \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input w-full min-w-0 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n              \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n              \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n              INPUT_SIZES[size],\n              iconElement && INPUT_ICON_PADDING[size],\n              className\n            )}\n            {...props}\n          />\n        </div>\n      </div>\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}