{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "description": "Recessed text inputs with leading and trailing add-ons.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { gsap, motionScale, useAttributeCue, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst fieldVariants = cva(\n  \"w-full min-w-0 rounded-md border border-input bg-card text-sm text-foreground shadow-well transition-[border-color,box-shadow] duration-150 ease-cue\",\n  {\n    variants: {\n      size: {\n        sm: \"h-ctl-sm px-2.5 text-[0.8125rem]\",\n        md: \"h-ctl-md px-3\",\n        lg: \"h-ctl-lg px-3.5 text-[0.9375rem]\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst focus = \"outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20\";\nconst invalid = \"aria-invalid:border-destructive aria-invalid:ring-destructive/20\";\n\ntype InputProps = Omit<React.ComponentProps<\"input\">, \"size\"> & {\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Content before the text, e.g. an icon or a `https://` prefix. Wraps the input in a field group. */\n  leading?: React.ReactNode;\n  /** Content after the text, e.g. a unit, a `<kbd>` hint or an icon button. */\n  trailing?: React.ReactNode;\n};\n\n/**\n * A text input. With `leading` or `trailing`, `className` styles the surrounding field group\n * and the `<input>` itself stays borderless inside it. When `aria-invalid` turns on, the field gives a short shake.\n */\nfunction Input({ className, type = \"text\", size = \"md\", leading, trailing, ref, ...props }: InputProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  useAttributeCue(inputRef, \"aria-invalid\", (value, input) => {\n    const scale = motionScale(input);\n    if (!scale || value !== \"true\") return;\n    const field = input.closest<HTMLElement>('[data-slot=\"input-group\"]') ?? input;\n    gsap.fromTo(field, { x: 0 }, { keyframes: { x: [0, -5 * scale, 4 * scale, -2 * scale, 1 * scale, 0] }, duration: 0.42, ease: \"none\" });\n  });\n\n  const field = cn(\n    \"placeholder:text-muted-foreground/80 disabled:cursor-not-allowed disabled:opacity-50\",\n    \"file:me-3 file:h-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n  );\n\n  if (leading == null && trailing == null) {\n    return <input ref={mergedRef} data-slot=\"input\" type={type} className={cn(fieldVariants({ size }), field, focus, invalid, className)} {...props} />;\n  }\n\n  return (\n    <div\n      data-slot=\"input-group\"\n      className={cn(\n        fieldVariants({ size }),\n        \"flex cursor-text items-center gap-2\",\n        \"has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-ring/20\",\n        \"has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20\",\n        \"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50\",\n        className,\n      )}\n    >\n      {leading != null && <InputAddon>{leading}</InputAddon>}\n      <input ref={mergedRef} data-slot=\"input\" type={type} className={cn(\"h-full w-full min-w-0 flex-1 bg-transparent outline-none\", field, \"disabled:opacity-100\")} {...props} />\n      {trailing != null && <InputAddon>{trailing}</InputAddon>}\n    </div>\n  );\n}\n\nfunction InputAddon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"input-addon\"\n      className={cn(\"flex shrink-0 items-center gap-1 text-muted-foreground select-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, InputAddon, fieldVariants };\nexport type { InputProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/input",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}