{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":[],"description":"Input Group with leading/trailing addons for SmoothUI form controls.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nexport interface InputGroupProps extends ComponentProps<\"div\"> {\n  children?: ReactNode;\n}\n\nexport interface InputGroupAddonProps extends ComponentProps<\"div\"> {\n  /** Align to start (leading) or end (trailing) */\n  align?: \"start\" | \"end\";\n  children?: ReactNode;\n}\n\nexport type InputGroupTextProps = ComponentProps<\"span\">;\n\n/**\n * SmoothUI Input Group — wraps Input with leading/trailing addons.\n * SmoothUI-owned compound; styles the nested `[data-slot=input]`.\n */\nexport default function InputGroup({\n  children,\n  className,\n  ...props\n}: InputGroupProps) {\n  return (\n    <div\n      className={cn(\n        \"state-transition flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border border-foreground/25 bg-background shadow-xs has-[[data-slot=input]:disabled]:cursor-not-allowed has-[[data-slot=input]:focus-visible]:border-ring has-[[data-slot=input][aria-invalid=true]]:border-destructive has-[[data-slot=input]:disabled]:bg-muted has-[[data-slot=input]:focus-visible]:ring-[3px] has-[[data-slot=input]:focus-visible]:ring-ring/50 has-[[data-slot=input][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot=input][aria-invalid=true]]:ring-destructive/40\",\n        \"[&_[data-slot=input]]:h-full [&_[data-slot=input]]:flex-1 [&_[data-slot=input]]:rounded-none [&_[data-slot=input]]:border-0 [&_[data-slot=input]]:bg-transparent [&_[data-slot=input]]:shadow-none [&_[data-slot=input]]:focus-visible:ring-0\",\n        className\n      )}\n      data-slot=\"input-group\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport const InputGroupAddon = ({\n  align = \"start\",\n  children,\n  className,\n  ...props\n}: InputGroupAddonProps) => (\n  <div\n    className={cn(\n      \"flex shrink-0 items-center gap-1 text-muted-foreground\",\n      align === \"start\" ? \"pl-3\" : \"pr-3\",\n      className\n    )}\n    data-align={align}\n    data-slot=\"input-group-addon\"\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroupText = ({\n  children,\n  className,\n  ...props\n}: InputGroupTextProps) => (\n  <span\n    className={cn(\"select-none text-sm\", className)}\n    data-slot=\"input-group-text\"\n    {...props}\n  >\n    {children}\n  </span>\n);\n","path":"index.tsx","target":"components/smoothui/input-group/index.tsx","type":"registry:ui"}],"name":"input-group","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Input Group","type":"registry:ui"}