{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "title": "Input",
  "description": "Single-line text field, 36 px tall to match Button, that moves the invalid state onto its border and ring.",
  "registryDependencies": [
    "utils",
    "https://miseui.junsu4621.workers.dev/r/shimmer-text.json"
  ],
  "files": [
    {
      "path": "registry/miseui/ui/input.tsx",
      "content": "import type * as React from \"react\"\nimport { ShimmerText } from \"@/registry/miseui/ui/shimmer-text\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\n/** 36 px: the same height as Button, and comfortably above the 24 px minimum target. */\nconst INPUT_HEIGHT_CLASS = \"h-9\"\n\ntype InputEffect = \"glow\" | \"ai\"\n\ntype InputProps = React.ComponentProps<\"input\"> & {\n  /** A living treatment on the field. Undefined is the plain input. */\n  effect?: InputEffect\n  /** With effect=\"ai\": the placeholder shimmers while the model prepares a suggestion. */\n  pending?: boolean\n}\n\n/** Box-shadow is in the base transition list, so ring and halo grow from nothing on focus. An error must not glow warm. */\nconst GLOW_CLASS = cn(\n  \"duration-(--duration-base) ease-(--ease-mise-out) motion-reduce:transition-none\",\n  \"focus-visible:border-mise focus-visible:ring-4 focus-visible:ring-mise/35\",\n  \"focus-visible:shadow-[0_0_28px_4px_color-mix(in_oklab,var(--mise)_45%,transparent)]\",\n  \"[@media(prefers-reduced-transparency:reduce)]:focus-visible:shadow-none\",\n  \"aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/30 aria-invalid:focus-visible:shadow-none\",\n)\n/** The native placeholder stays for assistive tech and for :placeholder-shown, which hides the overlay as soon as someone types. */\nconst PENDING_FIELD_CLASS = \"border-mise/60 placeholder:text-transparent\"\n/** Shimmer's bright band in the accent: mise is the colour of AI activity. Re-declared in this scope only. */\nconst PENDING_BAND_STYLE = { \"--foreground\": \"var(--mise)\" } as React.CSSProperties\n\nfunction Input({ className, type, effect, pending = false, ...props }: InputProps) {\n  const isAi = effect === \"ai\"\n  const shimmering = isAi && pending && Boolean(props.placeholder)\n  const field = (\n    <input\n      type={type}\n      data-slot=\"input\"\n      data-effect={effect}\n      aria-busy={isAi && pending ? true : undefined}\n      className={cn(\n        INPUT_HEIGHT_CLASS,\n        \"w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs md:text-sm\",\n        \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n        \"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n        \"transition-[color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-mise)\",\n        \"outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        effect === \"glow\" && GLOW_CLASS,\n        isAi && \"peer\",\n        shimmering && PENDING_FIELD_CLASS,\n        className,\n      )}\n      {...props}\n    />\n  )\n  if (!isAi) return field\n  return (\n    // Stays mounted across `pending` so the field never remounts and keeps focus and typed text.\n    <div data-slot=\"input-frame\" className=\"relative w-full min-w-0\">\n      {field}\n      {shimmering ? (\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"input-shimmer\"\n          className=\"pointer-events-none absolute inset-y-0 right-[13px] left-[13px] hidden items-center overflow-hidden text-base whitespace-nowrap peer-placeholder-shown:flex md:text-sm\"\n        >\n          <ShimmerText style={PENDING_BAND_STYLE}>{props.placeholder ?? \"\"}</ShimmerText>\n        </span>\n      ) : null}\n    </div>\n  )\n}\n\nexport { Input, type InputProps, type InputEffect }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}