{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-20",
  "title": "Input with end icon button",
  "description": "A download button in its own segment after an invoice number.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/recipes.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/input/input-20.tsx",
      "content": "import { Input as InputPrimitive } from '@base-ui/react/input';\n\nimport { DownloadIcon } from '@/registry/ndeko/lib/icons';\nimport { CONTROL_RECIPE } from '@/registry/ndeko/lib/recipes';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Field, FieldLabel } from '@/registry/ndeko/ui/field';\n\nconst GROUP = cn(\n  CONTROL_RECIPE,\n  'flex h-8 items-stretch overflow-hidden',\n  'focus-within:border-foreground/30 focus-within:ring-ring/25 dark:focus-within:border-foreground/25 focus-within:ring-[3px]'\n);\n\nconst BARE_INPUT =\n  'placeholder:text-muted-foreground/75 h-full min-w-0 flex-1 bg-transparent px-2.5 outline-none';\n\nconst SEGMENT_BUTTON =\n  'text-muted-foreground hover:bg-foreground/[0.03] hover:text-foreground focus-visible:bg-foreground/5 focus-visible:text-foreground flex w-8 shrink-0 cursor-pointer items-center justify-center outline-none transition-colors disabled:pointer-events-none disabled:opacity-50';\n\nconst SEPARATOR =\n  'bg-foreground/12 dark:bg-foreground/15 w-(--hairline) shrink-0';\n\nexport default function Input20() {\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Invoice number</FieldLabel>\n      <div className={GROUP}>\n        <InputPrimitive className={BARE_INPUT} placeholder='INV-2041' />\n        <span className={SEPARATOR} aria-hidden='true' />\n        <button\n          type='button'\n          className={SEGMENT_BUTTON}\n          aria-label='Download invoice'\n        >\n          <DownloadIcon className='size-4' />\n        </button>\n      </div>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "input"
  ],
  "type": "registry:component"
}