@cloudflare/kumo 1.19.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "1.19.0",
+  "version": "2.0.1",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",
@@ -84,6 +84,10 @@
       "types": "./dist/src/components/input/index.d.ts",
       "import": "./dist/components/input.js"
     },
+    "./components/input-group": {
+      "types": "./dist/src/components/input-group/index.d.ts",
+      "import": "./dist/components/input-group.js"
+    },
     "./components/layer-card": {
       "types": "./dist/src/components/layer-card/index.d.ts",
       "import": "./dist/components/layer-card.js"
@@ -187,6 +191,10 @@
       "types": "./dist/src/components/flow/index.d.ts",
       "import": "./dist/components/flow.js"
     },
+    "./components/autocomplete": {
+      "types": "./dist/src/components/autocomplete/index.d.ts",
+      "import": "./dist/components/autocomplete.js"
+    },
     "./components/sidebar": {
       "types": "./dist/src/components/sidebar/index.d.ts",
       "import": "./dist/components/sidebar.js"
@@ -295,6 +303,10 @@
       "types": "./dist/src/primitives/number-field.d.ts",
       "import": "./dist/primitives/number-field.js"
     },
+    "./primitives/otp-field": {
+      "types": "./dist/src/primitives/otp-field.d.ts",
+      "import": "./dist/primitives/otp-field.js"
+    },
     "./primitives/popover": {
       "types": "./dist/src/primitives/popover.d.ts",
       "import": "./dist/primitives/popover.js"
@@ -425,7 +437,7 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "^1.2.0",
+    "@base-ui/react": "^1.4.0",
     "@shikijs/langs": "^4.0.0",
     "@shikijs/themes": "^4.0.0",
     "clsx": "^2.1.1",

package/scripts/component-registry/discovery.ts

@@ -50,6 +50,7 @@ export const CATEGORY_MAP: Record<string, string> = {
   "date-range-picker": "Input",
   field: "Input",
   input: "Input",
+  "input-group": "Input",
   radio: "Input",
   select: "Input",
   switch: "Input",

package/scripts/component-registry/index.test.ts

@@ -678,3 +678,268 @@ describe("jsonSchemaTypeToString", () => {
     );
   });
 });
+
+// Tests for sub-component detection utilities
+
+import { writeFileSync, unlinkSync, mkdtempSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  detectSubComponents,
+  extractSubComponentProps,
+  extractPropsFromInterface,
+} from "./sub-components.js";
+
+function writeTempFile(content: string): {
+  filePath: string;
+  cleanup: () => void;
+} {
+  const dir = mkdtempSync(join(tmpdir(), "kumo-test-"));
+  const filePath = join(dir, "test.tsx");
+  writeFileSync(filePath, content);
+  return { filePath, cleanup: () => unlinkSync(filePath) };
+}
+
+const cliFlags = {
+  includeInheritedProps: false,
+  noCache: true,
+  verbose: false,
+};
+
+describe("detectSubComponents", () => {
+  it("detects sub-components from Object.assign with function declarations", () => {
+    const { filePath, cleanup } = writeTempFile(`
+function GroupComponent({ legend, children }: GroupProps) {
+  return <div>{children}</div>;
+}
+
+const Root = () => <div />;
+
+export const MyComponent = Object.assign(Root, {
+  Group: GroupComponent,
+});
+`);
+
+    try {
+      const result = detectSubComponents(filePath);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Group");
+      expect(result[0].valueName).toBe("GroupComponent");
+      expect(result[0].propsType).toBe("GroupProps");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("detects sub-components from Object.assign with multi-line forwardRef", () => {
+    const { filePath, cleanup } = writeTempFile(`
+import { forwardRef } from "react";
+
+export interface MyItemProps {
+  active?: boolean;
+  label: string;
+}
+
+const MyItem = forwardRef<
+  HTMLLIElement,
+  MyItemProps
+>(({ active, label, ...props }, ref) => (
+  <li ref={ref} {...props}>{label}</li>
+));
+
+const Root = forwardRef<HTMLElement, {}>(
+  (props, ref) => <nav ref={ref} {...props} />
+);
+
+export const MyComponent = Object.assign(Root, {
+  Item: MyItem,
+});
+`);
+
+    try {
+      const result = detectSubComponents(filePath);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Item");
+      expect(result[0].valueName).toBe("MyItem");
+      expect(result[0].propsType).toBe("MyItemProps");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("detects sub-components with single-line forwardRef generics", () => {
+    const { filePath, cleanup } = writeTempFile(`
+import { forwardRef } from "react";
+
+export interface CellProps { span?: number; }
+
+const TableCell = forwardRef<HTMLTableCellElement, CellProps>((props, ref) => (
+  <td ref={ref} {...props} />
+));
+
+const Root = forwardRef<HTMLTableElement, {}>((props, ref) => <table ref={ref} {...props} />);
+
+export const Table = Object.assign(Root, {
+  Cell: TableCell,
+});
+`);
+
+    try {
+      const result = detectSubComponents(filePath);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Cell");
+      expect(result[0].valueName).toBe("TableCell");
+      expect(result[0].propsType).toBe("CellProps");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("populates valueName field for direct property assignment", () => {
+    const { filePath, cleanup } = writeTempFile(`
+function Link({ href }: LinkProps) {
+  return <a href={href} />;
+}
+
+const Breadcrumbs = () => <nav />;
+Breadcrumbs.Link = Link;
+`);
+
+    try {
+      const result = detectSubComponents(filePath);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Link");
+      expect(result[0].valueName).toBe("Link");
+    } finally {
+      cleanup();
+    }
+  });
+});
+
+describe("extractSubComponentProps", () => {
+  it("extracts props from interface via propsType (forwardRef pattern)", () => {
+    const { filePath, cleanup } = writeTempFile(`
+import { forwardRef } from "react";
+
+export interface ItemProps {
+  active?: boolean;
+  label: string;
+}
+
+const MyItem = forwardRef<HTMLLIElement, ItemProps>(
+  ({ active, label, ...props }, ref) => <li ref={ref} {...props}>{label}</li>
+);
+`);
+
+    try {
+      const props = extractSubComponentProps(
+        filePath,
+        {
+          name: "Item",
+          valueName: "MyItem",
+          propsType: "ItemProps",
+          description: "Item sub-component",
+          isPassThrough: false,
+        },
+        cliFlags,
+      );
+
+      expect(props).toHaveProperty("active");
+      expect(props.active).toEqual({ type: "boolean", optional: true });
+      expect(props).toHaveProperty("label");
+      expect(props.label).toEqual({ type: "string", required: true });
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("skips pass-through sub-components", () => {
+    const { filePath, cleanup } = writeTempFile("export const Foo = {};");
+
+    try {
+      const props = extractSubComponentProps(
+        filePath,
+        {
+          name: "Root",
+          valueName: "DialogBase.Root",
+          propsType: null,
+          description: "Root sub-component (wraps DialogBase)",
+          isPassThrough: true,
+          baseComponent: "DialogBase.Root",
+        },
+        cliFlags,
+      );
+
+      expect(props).toEqual({});
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("uses valueName for inline props lookup when name doesn't match", () => {
+    const { filePath, cleanup } = writeTempFile(`
+function TableOfContentsGroup({ label, href }: { label: string; href?: string }) {
+  return <div>{label}</div>;
+}
+`);
+
+    try {
+      const props = extractSubComponentProps(
+        filePath,
+        {
+          name: "Group",
+          valueName: "TableOfContentsGroup",
+          propsType: null,
+          description: "Group sub-component",
+          isPassThrough: false,
+        },
+        cliFlags,
+      );
+
+      expect(props).toHaveProperty("label");
+      expect(props.label).toEqual({ type: "string", required: true });
+      expect(props).toHaveProperty("href");
+      expect(props.href).toEqual({ type: "string", optional: true });
+    } finally {
+      cleanup();
+    }
+  });
+});
+
+describe("extractPropsFromInterface", () => {
+  it("extracts props from a simple interface", () => {
+    const content = `
+interface MyProps {
+  label: string;
+  active?: boolean;
+  count: number;
+}
+`;
+    const props = extractPropsFromInterface(content, "MyProps", cliFlags);
+    expect(props).toEqual({
+      label: { type: "string", required: true },
+      active: { type: "boolean", optional: true },
+      count: { type: "number", required: true },
+    });
+  });
+
+  it("extracts props from interface with extends", () => {
+    const content = `
+interface GroupProps extends BaseProps {
+  label: string;
+  href?: string;
+}
+`;
+    const props = extractPropsFromInterface(content, "GroupProps", cliFlags);
+    expect(props).toEqual({
+      label: { type: "string", required: true },
+      href: { type: "string", optional: true },
+    });
+  });
+
+  it("returns empty object when interface not found", () => {
+    const content = "interface OtherProps { foo: string; }";
+    const props = extractPropsFromInterface(content, "MyProps", cliFlags);
+    expect(props).toEqual({});
+  });
+});

package/scripts/component-registry/index.ts

@@ -611,6 +611,20 @@ async function processComponent(
       let usageExamples: string[] | undefined;
       let renderElement: string | undefined;
 
+      // Inject additional props for sub-components (e.g., "InputGroup.Input")
+      const subAdditionalProps =
+        ADDITIONAL_COMPONENT_PROPS[`${config.name}.${subComp.name}`];
+      if (subAdditionalProps) {
+        for (const [propName, propSchema] of Object.entries(
+          subAdditionalProps,
+        )) {
+          subProps[propName] = {
+            ...subProps[propName],
+            ...propSchema,
+          };
+        }
+      }
+
       if (subComp.isPassThrough && subComp.baseComponent) {
         const passthroughDoc =
           PASSTHROUGH_COMPONENT_DOCS[subComp.baseComponent];

package/scripts/component-registry/metadata.ts

@@ -254,10 +254,43 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
       description: "Callback when collapsed state changes",
     },
   },
-  Checkbox: {
-    onValueChange: {
-      type: "(checked: boolean) => void",
-      description: "Callback when checkbox value changes",
+  "InputGroup.Addon": {
+    align: {
+      type: '"start" | "end"',
+      description: "Position relative to the input.",
+      default: '"start"',
+    },
+    className: {
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  },
+  "InputGroup.Button": {
+    tooltip: {
+      type: "ReactNode",
+      description:
+        "When provided, wraps the button in a Tooltip. Automatically sets aria-label from a string value.",
+    },
+    tooltipSide: {
+      type: '"top" | "right" | "bottom" | "left"',
+      description: "Preferred side for the tooltip popup.",
+      default: '"bottom"',
+    },
+    variant: {
+      type: '"primary" | "secondary" | "ghost" | "destructive" | "secondary-destructive" | "outline"',
+      description: "Button visual style. Defaults to ghost.",
+      default: '"ghost"',
+    },
+    size: {
+      type: '"xs" | "sm" | "base" | "lg"',
+      description: "Button size.",
+      default: '"sm"',
+    },
+  },
+  "InputGroup.Suffix": {
+    className: {
+      type: "string",
+      description: "Additional CSS classes.",
     },
   },
 };
@@ -318,7 +351,12 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     ],
   },
   ClipboardText: {
-    baseTokens: ["bg-kumo-base", "text-kumo-default", "ring-kumo-line", "border-kumo-fill"],
+    baseTokens: [
+      "bg-kumo-base",
+      "text-kumo-default",
+      "ring-kumo-line",
+      "border-kumo-fill",
+    ],
     states: {
       input: ["bg-kumo-control", "text-kumo-default", "ring-kumo-line"],
       text: ["bg-kumo-base", "font-mono"],
@@ -382,7 +420,7 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     ],
   },
   Code: {
-    baseTokens: ["text-kumo-strong"],
+    baseTokens: ["text-kumo-subtle"],
     dimensions: "m-0 w-auto p-0",
     borderRadius: "rounded-none",
     states: {
@@ -403,7 +441,12 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     },
   },
   Input: {
-    baseTokens: ["bg-kumo-control", "text-kumo-default", "text-kumo-subtle", "ring-kumo-line"],
+    baseTokens: [
+      "bg-kumo-control",
+      "text-kumo-default",
+      "text-kumo-subtle",
+      "ring-kumo-line",
+    ],
     sizeVariants: {
       xs: {
         height: 20,
@@ -473,7 +516,12 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     },
   },
   Dialog: {
-    baseTokens: ["bg-kumo-base", "text-kumo-default", "border-kumo-line", "shadow-m"],
+    baseTokens: [
+      "bg-kumo-base",
+      "text-kumo-default",
+      "border-kumo-line",
+      "shadow-m",
+    ],
     sizeVariants: {
       sm: {
         height: 0, // Dialog height is auto (content-driven)

package/scripts/component-registry/sub-components.ts

@@ -97,6 +97,19 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
           propsType = `${value}Props`;
         }
 
+        // Also check for forwardRef pattern:
+        // const Value = forwardRef<HTMLElement, PropsType>(...)
+        // Handles multi-line generics ([\s\S] matches newlines)
+        if (!propsType) {
+          const forwardRefPattern = new RegExp(
+            `const\\s+${value}\\s*=\\s*forwardRef<[\\s\\S]*?,\\s*(\\w+)\\s*>\\s*\\(`,
+          );
+          const forwardRefMatch = content.match(forwardRefPattern);
+          if (forwardRefMatch) {
+            propsType = forwardRefMatch[1];
+          }
+        }
+
         // Generate description
         let description = `${subName} sub-component`;
         if (isPassThrough) {
@@ -111,6 +124,7 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
 
         subComponents.push({
           name: subName,
+          valueName: value,
           propsType,
           description,
           isPassThrough,
@@ -150,6 +164,7 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
 
       subComponents.push({
         name: subName,
+        valueName: value,
         propsType,
         description: `${subName} sub-component`,
         isPassThrough: false,
@@ -186,60 +201,71 @@ export function extractSubComponentProps(
   try {
     const content = readFileSync(filePath, "utf-8");
     const funcName = subComponent.name;
+    // valueName is the resolved variable name from Object.assign (e.g., "TableOfContentsTitle")
+    // while funcName is the short sub-component name (e.g., "Title")
+    const valueName = subComponent.valueName;
     const props: Record<string, PropSchema> = {};
 
+    // Try both the short name and the resolved variable name for pattern matching
+    const namesToTry = [
+      funcName,
+      ...(valueName !== funcName ? [valueName] : []),
+    ];
+
     // Pattern 1: Inline object type in function signature
     // Matches: function Foo({ ... }: { prop: Type }) or ({ ... }: PropsWithChildren<{ prop: Type }>)
     // Also matches arrow functions: const Foo = ({ ... }: { prop: Type }) =>
-    const inlinePropsPatterns = [
-      // function Name({ destructured }: { inline props })
-      new RegExp(
-        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*(?:PropsWithChildren<)?\\{([^}]+)\\}`,
-      ),
-      // function Name({ destructured }: PropsWithChildren<InterfaceName>)
-      new RegExp(
-        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*PropsWithChildren<(\\w+)>`,
-      ),
-    ];
+    for (const name of namesToTry) {
+      const inlinePropsPatterns = [
+        // function Name({ destructured }: { inline props })
+        new RegExp(
+          `(?:function|const)\\s+${name}\\s*=?\\s*\\([^)]*:\\s*(?:PropsWithChildren<)?\\{([^}]+)\\}`,
+        ),
+        // function Name({ destructured }: PropsWithChildren<InterfaceName>)
+        new RegExp(
+          `(?:function|const)\\s+${name}\\s*=?\\s*\\([^)]*:\\s*PropsWithChildren<(\\w+)>`,
+        ),
+      ];
 
-    for (const pattern of inlinePropsPatterns) {
-      const match = content.match(pattern);
-      if (match) {
-        const propsBlock = match[1];
-
-        // Check if it's an interface name (single word) or inline props
-        if (propsBlock.match(/^\w+$/)) {
-          // It's an interface name, try to find and parse it
-          const interfaceProps = extractPropsFromInterface(
-            content,
-            propsBlock,
-            cliFlags,
-          );
-          Object.assign(props, interfaceProps);
-        } else {
-          // Parse inline props: propName?: Type or propName: Type
-          const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/g;
-          let propMatch: RegExpExecArray | null;
-
-          while ((propMatch = propPattern.exec(propsBlock)) !== null) {
-            const propName = propMatch[1];
-            const isOptional = propMatch[2] === "?";
-            let propType = propMatch[3].trim();
-
-            // Clean up type
-            propType = propType.replace(/[,;]$/, "").trim();
-
-            if (shouldSkipProp(propName, cliFlags)) continue;
-
-            props[propName] = {
-              type: propType,
-              ...(isOptional ? { optional: true } : { required: true }),
-            };
+      for (const pattern of inlinePropsPatterns) {
+        const match = content.match(pattern);
+        if (match) {
+          const propsBlock = match[1];
+
+          // Check if it's an interface name (single word) or inline props
+          if (propsBlock.match(/^\w+$/)) {
+            // It's an interface name, try to find and parse it
+            const interfaceProps = extractPropsFromInterface(
+              content,
+              propsBlock,
+              cliFlags,
+            );
+            Object.assign(props, interfaceProps);
+          } else {
+            // Parse inline props: propName?: Type or propName: Type
+            const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/g;
+            let propMatch: RegExpExecArray | null;
+
+            while ((propMatch = propPattern.exec(propsBlock)) !== null) {
+              const propName = propMatch[1];
+              const isOptional = propMatch[2] === "?";
+              let propType = propMatch[3].trim();
+
+              // Clean up type
+              propType = propType.replace(/[,;]$/, "").trim();
+
+              if (shouldSkipProp(propName, cliFlags)) continue;
+
+              props[propName] = {
+                type: propType,
+                ...(isOptional ? { optional: true } : { required: true }),
+              };
+            }
           }
-        }
 
-        if (Object.keys(props).length > 0) {
-          return props;
+          if (Object.keys(props).length > 0) {
+            return props;
+          }
         }
       }
     }
@@ -260,12 +286,17 @@ export function extractSubComponentProps(
     if (Object.keys(props).length === 0) {
       // Use a more flexible approach: find the function definition and extract the type annotation
       // This handles multi-line destructuring patterns
-      const funcDefPatterns = [
+      const funcDefPatterns: RegExp[] = [];
+      for (const name of namesToTry) {
         // Arrow function: const Name = (...)
-        new RegExp(`const\\s+${funcName}\\s*=\\s*\\([\\s\\S]*?\\)\\s*=>`),
+        funcDefPatterns.push(
+          new RegExp(`const\\s+${name}\\s*=\\s*\\([\\s\\S]*?\\)\\s*=>`),
+        );
         // Regular function: function Name(...)
-        new RegExp(`function\\s+${funcName}\\s*\\([\\s\\S]*?\\)\\s*\\{`),
-      ];
+        funcDefPatterns.push(
+          new RegExp(`function\\s+${name}\\s*\\([\\s\\S]*?\\)\\s*\\{`),
+        );
+      }
 
       for (const defPattern of funcDefPatterns) {
         const defMatch = content.match(defPattern);

package/scripts/component-registry/types.ts

@@ -54,6 +54,8 @@ import type { ComponentStyling, ComponentType } from "../../src/registry/types";
 export interface SubComponentConfig {
   /** Sub-component name (e.g., "Root", "Trigger", "Content") */
   name: string;
+  /** Resolved variable name from the Object.assign value (e.g., "TableOfContentsTitle") */
+  valueName: string;
   /** Props type name if available */
   propsType: string | null;
   /** Description extracted from JSDoc or generated */