Add new InputGroup compound component with Addon, Suffix, and Button support

.changeset/feat-input-group-revamp.md

@@ -0,0 +1,46 @@
+---
+"@cloudflare/kumo": minor
+"@cloudflare/kumo-docs-astro": patch
+---
+
+Add `InputGroup` compound component for composing decorated inputs
+
+Compound structure: `InputGroup`, `InputGroup.Input`, `InputGroup.Addon`, `InputGroup.Suffix`, `InputGroup.Button`.
+
+- Field integration — pass `label`, `description`, `error`, `required`, and `labelTooltip` directly to `InputGroup`
+- Size variants (`xs`, `sm`, `base`, `lg`) propagate to all sub-components via context, including icon sizing in addons
+- `InputGroup.Addon` — positions icons, text, or buttons at `align="start"` (default) or `align="end"` of the input
+- `InputGroup.Suffix` — inline text suffix (e.g. `.workers.dev`)
+- `InputGroup.Button` — ghost button for secondary actions with tooltip support
+- Deprecated `InputGroup.Label` — use `InputGroup.Addon` instead
+- Deprecated `InputGroup.Description` — use `InputGroup.Suffix` instead
+
+```tsx
+{/* Reveal / hide password */}
+<InputGroup>
+  <InputGroup.Input
+    type={show ? "text" : "password"}
+    defaultValue="password"
+    aria-label="Password"
+  />
+  <InputGroup.Addon align="end" className="pr-1">
+    <InputGroup.Button
+      size="sm"
+      aria-label={show ? "Hide password" : "Show password"}
+      onClick={() => setShow(!show)}
+    >
+      {show ? <EyeSlashIcon size={16} /> : <EyeIcon size={16} />}
+    </InputGroup.Button>
+  </InputGroup.Addon>
+</InputGroup>
+```
+
+```tsx
+{/* Search input */}
+<InputGroup>
+  <InputGroup.Addon>
+    <MagnifyingGlassIcon className="text-kumo-subtle" />
+  </InputGroup.Addon>
+  <InputGroup.Input placeholder="Search..." />
+</InputGroup>
+```

lint/no-primitive-colors.js

@@ -74,6 +74,7 @@ const NON_COLOR_UTILITIES = new Set([
   "current",
   "inherit",
   "none",
+  "auto",
   // Border utilities (not colors)
   "0",
   "2",

packages/kumo-docs-astro/src/components/SidebarNav.tsx

@@ -57,6 +57,7 @@ const componentItems: NavItem[] = [
   { label: "Grid", href: "/components/grid" },
   { label: "Input", href: "/components/input" },
   { label: "InputArea", href: "/components/input-area" },
+  { label: "InputGroup", href: "/components/input-group" },
   { label: "Label", href: "/components/label" },
   { label: "Layer Card", href: "/components/layer-card" },
   { label: "Link", href: "/components/link" },

packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx

@@ -38,6 +38,7 @@ import {
   useKumoToastManager,
 } from "@cloudflare/kumo";
 import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
+import { InputGroupDemo } from "~/components/demos/InputGroupDemo";
 import {
   MagnifyingGlassIcon,
   PlusIcon,
@@ -67,6 +68,7 @@ const componentRoutes: Record<string, string> = {
   grid: "/components/grid",
   input: "/components/input",
   "input-area": "/components/input-area",
+  "input-group": "/components/input-group",
   label: "/components/label",
   "layer-card": "/components/layer-card",
   link: "/components/link",
@@ -416,6 +418,11 @@ export function HomeGrid() {
       id: "input-area",
       Component: <InputArea placeholder="Enter your name" />,
     },
+    {
+      name: "InputGroup",
+      id: "input-group",
+      Component: <InputGroupDemo />,
+    },
     {
       name: "Meter",
       id: "meter",