{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "Pop-Brutalist input control with solid 3px focus ring.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/input.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  clearable?: boolean\n  onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, leftIcon, rightIcon, clearable, onClear, value, onChange, ...props }, ref) => {\n    const showClear = clearable && Boolean(value) && !props.disabled && !props.readOnly\n\n    const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault()\n      onClear?.()\n      // Synthesize a change so controlled consumers update their state.\n      onChange?.({\n        ...e,\n        target: { ...(e.currentTarget as HTMLButtonElement), value: '' },\n      } as unknown as React.ChangeEvent<HTMLInputElement>)\n    }\n\n    return (\n      <div className={cn('relative w-full', className)}>\n        {leftIcon && (\n          <span className=\"pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-rk-ink/50\">\n            {leftIcon}\n          </span>\n        )}\n        <input\n          type={type}\n          value={value}\n          onChange={onChange}\n          className={cn(\n            'flex h-12 w-full rounded-2xl bg-rk-surface px-4 py-2 text-sm font-extrabold text-rk-ink rk-border rk-shadow-sm placeholder:text-rk-ink/40 focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-120',\n            leftIcon && 'pl-11',\n            (rightIcon || showClear) && 'pr-11',\n            className\n          )}\n          ref={ref}\n          {...props}\n        />\n        {rightIcon && (\n          <span className=\"pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-rk-ink/50\">\n            {rightIcon}\n          </span>\n        )}\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear input\"\n            onClick={handleClear}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-full rk-border-sm rk-shadow-xs bg-rk-canvas hover:bg-rk-primary focus:outline-none focus:ring-2 focus:ring-black cursor-pointer\"\n          >\n            <X className=\"h-3.5 w-3.5 stroke-[3]\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input }\n",
      "type": "registry:ui",
      "target": "components/ui/input.tsx"
    }
  ]
}