{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "description": "Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring color. Invalid state also via aria-invalid.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/input.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst inputVariants = cva(\n  \"flex w-full min-w-0 outline-none transition-[color,box-shadow] file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground selection:bg-brand selection:text-brand-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40\",\n  {\n    variants: {\n      variant: {\n        outline: \"border border-field-border bg-transparent shadow-xs dark:bg-input/30\",\n        soft: \"border border-transparent bg-surface-3 focus-visible:bg-transparent dark:bg-input/50\",\n        ghost: \"border border-transparent bg-transparent hover:bg-surface-3 focus-visible:bg-transparent\",\n      },\n      size: {\n        /* min-h is required TOGETHER with h: inside a column-direction flex\n           container (for example a `flex flex-col sm:flex-row` form row,\n           column on mobile) height is the MAIN AXIS, and because flex-shrink\n           defaults to 1 the `h-9` gets overridden; the field collapses to the\n           content's min height (20px). It is invisible in row direction on\n           desktop and shows up ONLY on mobile - measured exactly like this on\n           the home page CTA, 2026-07-26 (input 20px, button 36px).\n           `shrink-0` is NOT the right fix: it locks the horizontal axis too and\n           causes overflow with `w-full` in row direction. min-h guards the\n           vertical axis only. */\n        sm: \"h-8 min-h-8 rounded-md px-2.5 text-sm file:h-6 file:text-xs\",\n        md: \"h-9 min-h-9 rounded-lg px-3 text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 min-h-10 rounded-lg px-3.5 text-base file:h-8 file:text-sm md:text-sm\",\n      },\n      tone: {\n        neutral: \"\",\n        success:\n          \"border-success focus-visible:border-success focus-visible:ring-success/20 dark:focus-visible:ring-success/40\",\n        danger:\n          \"border-danger focus-visible:border-danger focus-visible:ring-danger/20 dark:focus-visible:ring-danger/40\",\n      },\n    },\n    defaultVariants: {\n      variant: \"outline\",\n      size: \"md\",\n      tone: \"neutral\",\n    },\n  }\n)\n\ninterface InputProps\n  extends Omit<React.ComponentProps<\"input\">, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\nfunction Input({ className, variant, size, tone, type, ...props }: InputProps) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      data-variant={variant ?? \"outline\"}\n      data-tone={tone ?? \"neutral\"}\n      className={cn(inputVariants({ variant, size, tone, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Input, inputVariants, type InputProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Set aria-invalid on validation errors; the destructive ring style is built in. Use variant=soft on dense forms and filled surfaces.",
  "categories": [
    "form"
  ],
  "type": "registry:ui"
}