{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam-input",
  "type": "registry:ui",
  "description": "border-beam on Base UI input and input-group primitives with line or full border glow",
  "dependencies": [
    "@base-ui/react",
    "border-beam"
  ],
  "registryDependencies": [
    "input-group"
  ],
  "files": [
    {
      "path": "registry/default/ui/border-beam-input.tsx",
      "content": "\"use client\"\n\n/**\n * `border-beam` around `InputPrimitive` or `InputGroup` — default `beamSize=\"line\"` bottom-travel glow.\n * `className` is merged onto both the beam wrapper and the inner control so width constraints match.\n * The wrapper is a column flex shell (`borderBeamFieldShellClass`) so the beam box stretches to the\n * same width as the control in flex layouts. Note: `beamSize=\"line\"` draws a traveling spot along the\n * bottom (not a static full-width bar); use `beamSize=\"md\"` for a full border glow.\n *\n * `BorderBeamInput` uses `@base-ui/react/input` directly (not `components/ui/input`) so styling is\n * controlled here via `borderBeamInputPrimitiveClass` and `className`.\n */\nimport type { ComponentProps, CSSProperties } from \"react\"\nimport { forwardRef } from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport {\n  BorderBeam,\n  type BorderBeamProps,\n  type BorderBeamSize,\n} from \"border-beam\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\"\n\n/** Mirrors `components/ui/input` shell — adjust here for border-beam-specific fields. */\nconst borderBeamInputPrimitiveClass =\n  \"box-border h-7 w-full min-w-0 self-stretch rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-xs/relaxed placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[2px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\n\n/**\n * Beam layers use `inset:0` on this box — it must match the control width. `flex` + `stretch`\n * avoids shrink-to-content in flex parents; `max-w-full` keeps `className` max-width in sync.\n */\nconst borderBeamFieldShellClass =\n  \"flex w-full min-w-0 max-w-full flex-col items-stretch overflow-visible!\"\n\ntype BeamShellProps = Pick<\n  BorderBeamProps,\n  | \"colorVariant\"\n  | \"theme\"\n  | \"staticColors\"\n  | \"duration\"\n  | \"active\"\n  | \"borderRadius\"\n  | \"brightness\"\n  | \"saturation\"\n  | \"hueRange\"\n  | \"strength\"\n  | \"onActivate\"\n  | \"onDeactivate\"\n> & {\n  beamSize?: BorderBeamSize\n  borderBeamClassName?: string\n  borderBeamStyle?: CSSProperties\n}\n\nexport type BorderBeamInputProps = ComponentProps<typeof InputPrimitive> &\n  BeamShellProps & {\n    /** Fully rounded input (matches pill search bars). */\n    pill?: boolean\n  }\n\nexport const BorderBeamInput = forwardRef<HTMLDivElement, BorderBeamInputProps>(\n  function BorderBeamInput(\n    {\n      beamSize = \"line\",\n      borderBeamClassName,\n      borderBeamStyle,\n      theme = \"auto\",\n      colorVariant,\n      staticColors,\n      duration,\n      active,\n      borderRadius,\n      brightness,\n      saturation,\n      hueRange,\n      strength,\n      onActivate,\n      onDeactivate,\n      pill,\n      className,\n      type,\n      ...inputProps\n    },\n    ref\n  ) {\n    return (\n      <BorderBeam\n        active={active}\n        borderRadius={borderRadius}\n        brightness={brightness}\n        className={cn(\n          borderBeamFieldShellClass,\n          borderBeamClassName,\n          className\n        )}\n        colorVariant={colorVariant}\n        duration={duration}\n        hueRange={hueRange}\n        onActivate={onActivate}\n        onDeactivate={onDeactivate}\n        ref={ref}\n        saturation={saturation}\n        size={beamSize}\n        staticColors={staticColors}\n        strength={strength}\n        style={borderBeamStyle}\n        theme={theme}\n      >\n        <InputPrimitive\n          className={cn(\n            borderBeamInputPrimitiveClass,\n            pill && \"h-9 rounded-full\",\n            className\n          )}\n          data-slot=\"input\"\n          type={type}\n          {...inputProps}\n        />\n      </BorderBeam>\n    )\n  }\n)\n\nBorderBeamInput.displayName = \"BorderBeamInput\"\n\nexport type BorderBeamInputGroupProps = ComponentProps<typeof InputGroup> &\n  BeamShellProps & {\n    /** Full pill shape (`rounded-full`, taller shell). */\n    pill?: boolean\n  }\n\nexport const BorderBeamInputGroup = forwardRef<\n  HTMLDivElement,\n  BorderBeamInputGroupProps\n>(function BorderBeamInputGroup(\n  {\n    beamSize = \"line\",\n    borderBeamClassName,\n    borderBeamStyle,\n    theme = \"auto\",\n    colorVariant,\n    staticColors,\n    duration,\n    active,\n    borderRadius,\n    brightness,\n    saturation,\n    hueRange,\n    strength,\n    onActivate,\n    onDeactivate,\n    pill,\n    className,\n    ...groupProps\n  },\n  ref\n) {\n  return (\n    <BorderBeam\n      active={active}\n      borderRadius={borderRadius}\n      brightness={brightness}\n      className={cn(borderBeamFieldShellClass, borderBeamClassName, className)}\n      colorVariant={colorVariant}\n      duration={duration}\n      hueRange={hueRange}\n      onActivate={onActivate}\n      onDeactivate={onDeactivate}\n      ref={ref}\n      saturation={saturation}\n      size={beamSize}\n      staticColors={staticColors}\n      strength={strength}\n      style={borderBeamStyle}\n      theme={theme}\n    >\n      <InputGroup\n        className={cn(\n          \"min-w-0 self-stretch\",\n          pill && \"h-9 rounded-full has-[textarea]:rounded-md\",\n          className\n        )}\n        {...groupProps}\n      />\n    </BorderBeam>\n  )\n})\n\nBorderBeamInputGroup.displayName = \"BorderBeamInputGroup\"\n\nexport function BorderBeamInputGroupAddon(\n  props: ComponentProps<typeof InputGroupAddon>\n) {\n  return <InputGroupAddon {...props} />\n}\nBorderBeamInputGroupAddon.displayName = \"BorderBeamInputGroupAddon\"\n\nexport function BorderBeamInputGroupButton(\n  props: ComponentProps<typeof InputGroupButton>\n) {\n  return <InputGroupButton {...props} />\n}\nBorderBeamInputGroupButton.displayName = \"BorderBeamInputGroupButton\"\n\nexport function BorderBeamInputGroupInput(\n  props: ComponentProps<typeof InputGroupInput>\n) {\n  return <InputGroupInput {...props} />\n}\nBorderBeamInputGroupInput.displayName = \"BorderBeamInputGroupInput\"\n\nexport function BorderBeamInputGroupText(\n  props: ComponentProps<typeof InputGroupText>\n) {\n  return <InputGroupText {...props} />\n}\nBorderBeamInputGroupText.displayName = \"BorderBeamInputGroupText\"\n\nexport function BorderBeamInputGroupTextarea(\n  props: ComponentProps<typeof InputGroupTextarea>\n) {\n  return <InputGroupTextarea {...props} />\n}\nBorderBeamInputGroupTextarea.displayName = \"BorderBeamInputGroupTextarea\"\n",
      "type": "registry:ui"
    }
  ]
}