// Plaaayground v2 — InputGroup
// Blueprint: 03 — Input wrapper with left/right addon slots

import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface InputGroupProps {
  children: React.ReactNode;
  leftAddon?: React.ReactNode;
  rightAddon?: React.ReactNode;
  leftIcon?: LucideIcon;
  rightIcon?: LucideIcon;
  className?: string;
}

export function InputGroup({
  children,
  leftAddon,
  rightAddon,
  leftIcon: LeftIcon,
  rightIcon: RightIcon,
  className,
}: InputGroupProps) {
  return (
    <div
      className={cn(
        "flex items-center border border-input bg-background",
        "focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-1",
        "[&>input]:border-0 [&>input]:bg-transparent [&>input]:focus-visible:ring-0 [&>input]:focus-visible:ring-offset-0",
        className
      )}
    >
      {leftAddon && (
        <div className="flex items-center px-3 border-r border-input bg-secondary text-muted-foreground text-sm">
          {leftAddon}
        </div>
      )}
      {LeftIcon && (
        <div className="flex items-center pl-3">
          <LeftIcon className="w-4 h-4 text-muted-foreground" />
        </div>
      )}
      {children}
      {RightIcon && (
        <div className="flex items-center pr-3">
          <RightIcon className="w-4 h-4 text-muted-foreground" />
        </div>
      )}
      {rightAddon && (
        <div className="flex items-center px-3 border-l border-input bg-secondary text-muted-foreground text-sm">
          {rightAddon}
        </div>
      )}
    </div>
  );
}
InputGroup

Source Code
