{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "author": "Matthew Blode",
  "description": "A text input field for capturing user data.",
  "dependencies": ["blode-icons-react"],
  "files": [
    {
      "path": "ui/input.tsx",
      "content": "\"use client\";\n\nimport { CircleXFilledIcon } from \"blode-icons-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  clearable?: boolean;\n  clearClassName?: string;\n  hasError?: boolean;\n  leftAddon?: React.ReactNode | null;\n  leftControl?: React.ReactNode | null;\n  onClear?: () => void;\n  rightAddon?: React.ReactNode | null;\n  rightControl?: React.ReactNode | null;\n}\n\nconst Input = ({\n  className,\n  clearClassName,\n  hasError,\n  clearable,\n  onClear,\n  leftAddon,\n  rightAddon,\n  leftControl,\n  rightControl,\n  ref,\n  ...props\n}: InputProps & { ref?: React.Ref<HTMLInputElement> }) => (\n  <label\n    className={cn(\"relative block w-full\", {\n      \"input-group\": !!leftAddon || !!rightAddon,\n    })}\n  >\n    {leftAddon && <span className=\"shrink-0 cursor-pointer\">{leftAddon}</span>}\n\n    {leftControl && (\n      <div className=\"absolute top-0 left-0 flex h-full flex-row place-items-center items-center justify-center\">\n        {leftControl}\n      </div>\n    )}\n\n    <div className=\"w-full\">\n      <input\n        aria-invalid={hasError || undefined}\n        className={cn(\n          \"input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50\",\n          {\n            \"border-destructive-foreground\": hasError,\n            \"hover:border-input! focus:border-input!\": props.readOnly,\n            \"pr-12\": clearable && !!props.value && rightControl,\n            \"pr-9\": clearable && !!props.value,\n          },\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n\n      {clearable && !!props.value && (\n        <div className=\"absolute top-0 right-0 flex flex-row gap-1 pr-3\">\n          <button\n            aria-label=\"clear input\"\n            className={cn(\n              \"flex h-[var(--field-height)] cursor-pointer items-center justify-center p-0! text-muted-foreground\",\n              clearClassName,\n            )}\n            onClick={() => onClear?.()}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <CircleXFilledIcon className=\"size-5 text-muted-foreground/50\" />\n          </button>\n        </div>\n      )}\n    </div>\n\n    {rightControl && (\n      <div\n        className={cn(\n          \"absolute top-0 right-0 flex h-full flex-row place-items-center items-center justify-center\",\n          {\n            \"right-9\": clearable && !!props.value,\n          },\n        )}\n      >\n        {rightControl}\n      </div>\n    )}\n\n    {rightAddon && <span className=\"shrink-0 cursor-pointer\">{rightAddon}</span>}\n  </label>\n);\n\nexport { Input };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}