@cloudflare/kumo 1.4.1 → 1.5.1

package/ai/component-registry.md

@@ -231,12 +231,6 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 
 **Props:**
 
-- `children`: ReactNode
-- `className`: string
-- `icon`: ReactNode
-  Icon from `@phosphor-icons/react` or a React element. Rendered before children.
-- `loading`: boolean
-  Shows a loading spinner and disables interaction.
 - `shape`: enum [default: base]
   - `"base"`: Default rectangular button shape
   - `"square"`: Square button for icon-only actions
@@ -271,6 +265,12 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
     - `not-disabled`: `not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control`
     - `disabled`: `disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70`
     - `data-state`: `data-[state=open]:bg-kumo-control`
+- `children`: ReactNode
+- `className`: string
+- `icon`: ReactNode
+  Icon from `@phosphor-icons/react` or a React element. Rendered before children.
+- `loading`: boolean
+  Shows a loading spinner and disables interaction.
 - `id`: string
 - `lang`: string
 - `title`: string
@@ -288,7 +288,12 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 ```tsx
 <div className="flex flex-wrap items-center gap-2">
       <Button variant="secondary">Button</Button>
-      <Button variant="secondary" shape="square" icon={PlusIcon} />
+      <Button
+        variant="secondary"
+        shape="square"
+        icon={PlusIcon}
+        aria-label="Add"
+      />
     </div>
 ```
 
@@ -321,8 +326,18 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 
 ```tsx
 <div className="flex flex-wrap items-center gap-3">
-      <Button variant="secondary" shape="square" icon={PlusIcon} />
-      <Button variant="secondary" shape="circle" icon={PlusIcon} />
+      <Button
+        variant="secondary"
+        shape="square"
+        icon={PlusIcon}
+        aria-label="Add item"
+      />
+      <Button
+        variant="secondary"
+        shape="circle"
+        icon={PlusIcon}
+        aria-label="Add item"
+      />
     </div>
 ```
 
@@ -1818,81 +1833,23 @@ This is a compound component. Use these sub-components:
 
 #### Dialog.Root
 
-Controls the open state of the dialog. Doesn't render its own HTML element.
-
-Props:
-- `open`: boolean - Whether the dialog is currently open (controlled mode)
-- `defaultOpen`: boolean [default: false] - Whether the dialog is initially open (uncontrolled mode)
-- `onOpenChange`: (open: boolean, event: Event) => void - Callback fired when the dialog opens or closes
-- `modal`: boolean | 'trap-focus' [default: true] - Whether the dialog is modal. When true, focus is trapped and page scroll is locked
-- `dismissible`: boolean [default: true] - Whether clicking outside closes the dialog
-
-Usage:
-```tsx
-<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-```
-```tsx
-<Dialog.Root defaultOpen={false}>
-```
+Root sub-component
 
 #### Dialog.Trigger
 
-A button that opens the dialog when clicked. Renders a `<button>` element.
-
-Props:
-- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render instead of the default button
-- `disabled`: boolean - Whether the trigger is disabled
-
-Usage:
-```tsx
-<Dialog.Trigger render={<Button>Open</Button>} />
-```
-```tsx
-<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-```
+Trigger sub-component
 
 #### Dialog.Title
 
-A heading that labels the dialog for accessibility. Renders a `<h2>` element.
-
-Props:
-- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render instead of the default h2
-
-Usage:
-```tsx
-<Dialog.Title>Confirm Action</Dialog.Title>
-```
-```tsx
-<Dialog.Title render={<h3 />}>Custom Heading</Dialog.Title>
-```
+Title sub-component
 
 #### Dialog.Description
 
-A paragraph providing additional context about the dialog. Renders a `<p>` element.
-
-Props:
-- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render instead of the default p
-
-Usage:
-```tsx
-<Dialog.Description>Are you sure you want to proceed?</Dialog.Description>
-```
+Description sub-component
 
 #### Dialog.Close
 
-A button that closes the dialog when clicked. Renders a `<button>` element.
-
-Props:
-- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render instead of the default button
-- `disabled`: boolean - Whether the close button is disabled
-
-Usage:
-```tsx
-<Dialog.Close render={<Button>Cancel</Button>} />
-```
-```tsx
-<Dialog.Close>×</Dialog.Close>
-```
+Close sub-component
 
 
 **Examples:**
@@ -1913,6 +1870,7 @@ Usage:
                 variant="secondary"
                 shape="square"
                 icon={<X />}
+                aria-label="Close"
               />
             )}
           />
@@ -1941,6 +1899,7 @@ Usage:
                 variant="secondary"
                 shape="square"
                 icon={<X />}
+                aria-label="Close"
               />
             )}
           />
@@ -1969,6 +1928,48 @@ Usage:
     </Dialog.Root>
 ```
 
+```tsx
+<Dialog.Root disablePointerDismissal>
+      <Dialog.Trigger
+        render={(p) => (
+          <Button {...p} variant="destructive">
+            Delete Project
+          </Button>
+        )}
+      />
+      <Dialog className="p-8">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20">
+            <Warning size={20} className="text-kumo-danger" />
+          </div>
+          <Dialog.Title className="text-xl font-semibold">
+            Delete Project?
+          </Dialog.Title>
+        </div>
+        <Dialog.Description className="text-kumo-subtle">
+          This action cannot be undone. This will permanently delete the project
+          and all associated data.
+        </Dialog.Description>
+        <div className="mt-8 flex justify-end gap-2">
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="secondary" {...props}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="destructive" {...props}>
+                Delete
+              </Button>
+            )}
+          />
+        </div>
+      </Dialog>
+    </Dialog.Root>
+```
+
 
 ---
 
@@ -2653,8 +2654,10 @@ Label component for form fields.  Provides a standardized way to display labels
   Tooltip content displayed next to the label via an info icon.
 - `className`: string
   Additional CSS classes merged via `cn()`.
+- `htmlFor`: string
+  The id of the form element this label is associated with
 - `asContent`: boolean
-  When `true`, only renders the inline content (indicators, tooltip) without the outer span with font styling. Useful when composed inside another label element that already provides the text styling.
+  When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling.
 
 **Colors (kumo tokens used):**
 
@@ -2757,7 +2760,12 @@ Secondary sub-component
 <LayerCard>
       <LayerCard.Secondary className="flex items-center justify-between">
         <div>Next Steps</div>
-        <Button variant="ghost" size="sm" shape="square">
+        <Button
+          variant="ghost"
+          size="sm"
+          shape="square"
+          aria-label="Go to next steps"
+        >
           <ArrowRightIcon size={16} />
         </Button>
       </LayerCard.Secondary>
@@ -3082,6 +3090,8 @@ Page navigation controls with page count display.
   Number of items displayed per page.
 - `totalCount`: number
   Total number of items across all pages.
+- `text`: object
+  Method to provide custom pagination text
 
 **Colors (kumo tokens used):**
 
@@ -3106,6 +3116,16 @@ Page navigation controls with page count display.
     />
 ```
 
+```tsx
+<Pagination
+      text={({ perPage }) => `Page ${page} - showing ${perPage} per page`}
+      page={page}
+      setPage={setPage}
+      perPage={25}
+      totalCount={100}
+    />
+```
+
 
 ---
 
@@ -3161,7 +3181,7 @@ Close sub-component
 ```tsx
 <Popover>
       <Popover.Trigger asChild>
-        <Button shape="square" icon={BellIcon} />
+        <Button shape="square" icon={BellIcon} aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Title>Notifications</Popover.Title>
@@ -3479,29 +3499,12 @@ Option sub-component
 <Select
       className="w-[200px]"
       value={value}
-      onValueChange={(v) => setValue(v ?? "Apple")}
-      placeholder="Please select"
+      onValueChange={(v) => setValue(v ?? "apple")}
+      items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
     >
-      <Select.Option value="Apple">Apple</Select.Option>
-      <Select.Option value="Banana">Banana</Select.Option>
-      <Select.Option value="Cherry">Cherry</Select.Option>
-    </Select>
-```
-
-```tsx
-<Select
-      className="w-[200px]"
-      value={value}
-      onValueChange={(v) => setValue(v as string)}
-      items={{
-        bug: "Bug",
-        documentation: "Documentation",
-        feature: "Feature",
-      }}
-    >
-      <Select.Option value="bug">Bug</Select.Option>
-      <Select.Option value="documentation">Documentation</Select.Option>
-      <Select.Option value="feature">Feature</Select.Option>
+      <Select.Option value="apple">Apple</Select.Option>
+      <Select.Option value="banana">Banana</Select.Option>
+      <Select.Option value="cherry">Cherry</Select.Option>
     </Select>
 ```
 
@@ -3964,16 +3967,27 @@ ResizeHandle sub-component
         <Table>
           <Table.Header>
             <Table.Row>
-              <Table.CheckHead aria-label="Select all rows" />
+              <Table.CheckHead
+                checked={selectedIds.size === rows.length}
+                indeterminate={
+                  selectedIds.size > 0 && selectedIds.size < rows.length
+                }
+                onValueChange={toggleAll}
+                aria-label="Select all rows"
+              />
               <Table.Head>Subject</Table.Head>
               <Table.Head>From</Table.Head>
               <Table.Head>Date</Table.Head>
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {emailData.slice(0, 3).map((row) => (
+            {rows.map((row) => (
               <Table.Row key={row.id}>
-                <Table.CheckCell aria-label={`Select ${row.subject}`} />
+                <Table.CheckCell
+                  checked={selectedIds.has(row.id)}
+                  onValueChange={() => toggleRow(row.id)}
+                  aria-label={`Select ${row.subject}`}
+                />
                 <Table.Cell>{row.subject}</Table.Cell>
                 <Table.Cell>{row.from}</Table.Cell>
                 <Table.Cell>{row.date}</Table.Cell>
@@ -3991,31 +4005,35 @@ ResizeHandle sub-component
         <Table>
           <Table.Header>
             <Table.Row>
-              <Table.CheckHead aria-label="Select all rows" />
+              <Table.CheckHead
+                checked={selectedIds.size === rows.length}
+                indeterminate={
+                  selectedIds.size > 0 && selectedIds.size < rows.length
+                }
+                onValueChange={toggleAll}
+                aria-label="Select all rows"
+              />
               <Table.Head>Subject</Table.Head>
               <Table.Head>From</Table.Head>
               <Table.Head>Date</Table.Head>
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            <Table.Row>
-              <Table.CheckCell aria-label="Select row 1" />
-              <Table.Cell>Kumo v1.0.0 released</Table.Cell>
-              <Table.Cell>Visal In</Table.Cell>
-              <Table.Cell>5 seconds ago</Table.Cell>
-            </Table.Row>
-            <Table.Row variant="selected">
-              <Table.CheckCell checked aria-label="Select row 2" />
-              <Table.Cell>New Job Offer</Table.Cell>
-              <Table.Cell>Cloudflare</Table.Cell>
-              <Table.Cell>10 minutes ago</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.CheckCell aria-label="Select row 3" />
-              <Table.Cell>Daily Email Digest</Table.Cell>
-              <Table.Cell>Cloudflare</Table.Cell>
-              <Table.Cell>1 hour ago</Table.Cell>
-            </Table.Row>
+            {rows.map((row) => (
+              <Table.Row
+                key={row.id}
+                variant={selectedIds.has(row.id) ? "selected" : "default"}
+              >
+                <Table.CheckCell
+                  checked={selectedIds.has(row.id)}
+                  onValueChange={() => toggleRow(row.id)}
+                  aria-label={`Select ${row.subject}`}
+                />
+                <Table.Cell>{row.subject}</Table.Cell>
+                <Table.Cell>{row.from}</Table.Cell>
+                <Table.Cell>{row.date}</Table.Cell>
+              </Table.Row>
+            ))}
           </Table.Body>
         </Table>
       </LayerCard.Primary>
@@ -4057,7 +4075,8 @@ ResizeHandle sub-component
       <LayerCard.Primary className="w-full overflow-x-auto p-0">
         <Table layout="fixed">
           <colgroup>
-            <col style={{ width: "40px" }} />
+            <col />{" "}
+            {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}
             <col />
             <col style={{ width: "150px" }} />
             <col style={{ width: "120px" }} />
@@ -4065,7 +4084,14 @@ ResizeHandle sub-component
           </colgroup>
           <Table.Header>
             <Table.Row>
-              <Table.CheckHead aria-label="Select all rows" />
+              <Table.CheckHead
+                checked={selectedIds.size === emailData.length}
+                indeterminate={
+                  selectedIds.size > 0 && selectedIds.size < emailData.length
+                }
+                onValueChange={toggleAll}
+                aria-label="Select all rows"
+              />
               <Table.Head>Subject</Table.Head>
               <Table.Head>From</Table.Head>
               <Table.Head>Date</Table.Head>
@@ -4073,13 +4099,14 @@ ResizeHandle sub-component
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {emailData.map((row, index) => (
+            {emailData.map((row) => (
               <Table.Row
                 key={row.id}
-                variant={index === 1 ? "selected" : "default"}
+                variant={selectedIds.has(row.id) ? "selected" : "default"}
               >
                 <Table.CheckCell
-                  checked={index === 1}
+                  checked={selectedIds.has(row.id)}
+                  onValueChange={() => toggleRow(row.id)}
                   aria-label={`Select ${row.subject}`}
                 />
                 <Table.Cell>
@@ -4102,14 +4129,30 @@ ResizeHandle sub-component
                   <span className="truncate">{row.date}</span>
                 </Table.Cell>
                 <Table.Cell className="text-right">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    shape="square"
-                    aria-label="More options"
-                  >
-                    <DotsThree weight="bold" size={16} />
-                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenu.Trigger
+                      render={
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          shape="square"
+                          aria-label="More options"
+                        >
+                          <DotsThree weight="bold" size={16} />
+                        </Button>
+                      }
+                    />
+                    <DropdownMenu.Content>
+                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>
+                      <DropdownMenu.Item icon={PencilSimple}>
+                        Edit
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Separator />
+                      <DropdownMenu.Item icon={Trash} variant="danger">
+                        Delete
+                      </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                  </DropdownMenu>
                 </Table.Cell>
               </Table.Row>
             ))}
@@ -4438,7 +4481,7 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
 ```tsx
 <TooltipProvider>
       <Tooltip content="Add new item" asChild>
-        <Button shape="square" icon={PlusIcon} />
+        <Button shape="square" icon={PlusIcon} aria-label="Add new item" />
       </Tooltip>
     </TooltipProvider>
 ```
@@ -4447,10 +4490,14 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
 <TooltipProvider>
       <div className="flex gap-2">
         <Tooltip content="Add" asChild>
-          <Button shape="square" icon={PlusIcon} />
+          <Button shape="square" icon={PlusIcon} aria-label="Add" />
         </Tooltip>
         <Tooltip content="Change language" asChild>
-          <Button shape="square" icon={TranslateIcon} />
+          <Button
+            shape="square"
+            icon={TranslateIcon}
+            aria-label="Change language"
+          />
         </Tooltip>
       </div>
     </TooltipProvider>

package/ai/schemas.ts

@@ -131,13 +131,13 @@ export const BreadcrumbsPropsSchema = z.object({
 });
 
 export const ButtonPropsSchema = z.object({
+  shape: z.enum(["base", "square", "circle"]).optional(),
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(),
+  variant: z.enum(["primary", "secondary", "ghost", "destructive", "secondary-destructive", "outline"]).optional(),
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
   className: z.string().optional(),
   icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon from `@phosphor-icons/react` or a React element. Rendered before children.
   loading: z.boolean().optional(), // Shows a loading spinner and disables interaction.
-  shape: z.enum(["base", "square", "circle"]).optional(), // Button shape. - `"base"` — Default rectangular button - `"square"` — Square button for icon-only actions - `"circle"` — Circular button for icon-only actions
-  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Button size. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary actions - `"base"` — Default size - `"lg"` — Large for primary CTAs
-  variant: z.enum(["primary", "secondary", "ghost", "destructive", "secondary-destructive", "outline"]).optional(), // Visual style of the button. - `"primary"` — High-emphasis, brand-colored for primary actions - `"secondary"` — Default style with border for most actions - `"ghost"` — Minimal, no background for tertiary actions - `"destructive"` — Danger button for destructive actions - `"secondary-destructive"` — Secondary style with destructive text - `"outline"` — Bordered with transparent background
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
@@ -526,7 +526,8 @@ export const LabelPropsSchema = z.object({
   showOptional: z.boolean().optional(), // When `true`, shows gray "(optional)" text after the label.
   tooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content displayed next to the label via an info icon.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  asContent: z.boolean().optional(), // When `true`, only renders the inline content (indicators, tooltip) without the outer span with font styling. Useful when composed inside another label element that already provides the text styling.
+  htmlFor: z.string().optional(), // The id of the form element this label is associated with
+  asContent: z.boolean().optional(), // When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling.
 });
 
 export const LayerCardPropsSchema = z.object({
@@ -582,6 +583,7 @@ export const PaginationPropsSchema = z.object({
   page: z.number().optional(), // Current page number (1-indexed).
   perPage: z.number().optional(), // Number of items displayed per page.
   totalCount: z.number().optional(), // Total number of items across all pages.
+  text: z.unknown().optional(), // Method to provide custom pagination text
 });
 
 export const PopoverPropsSchema = z.object({

package/bin/kumo.js

@@ -7,26 +7,30 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const distCliPath = path.resolve(__dirname, "../dist/command-line/cli.js");
-if (existsSync(distCliPath)) {
-  await import(pathToFileURL(distCliPath).href);
-  process.exit(0);
-}
+async function main() {
+  const distCliPath = path.resolve(__dirname, "../dist/command-line/cli.js");
+  if (existsSync(distCliPath)) {
+    await import(pathToFileURL(distCliPath).href);
+    return;
+  }
 
-// In a repo checkout, the CLI may not be built yet. If `tsx` is available,
-// run the TypeScript entrypoint directly.
-const srcCliPath = path.resolve(__dirname, "../src/command-line/cli.ts");
-if (existsSync(srcCliPath)) {
-  const result = spawnSync(
-    process.execPath,
-    ["--import", "tsx", srcCliPath, ...process.argv.slice(2)],
-    { stdio: "inherit" },
-  );
+  // In a repo checkout, the CLI may not be built yet. If `tsx` is available,
+  // run the TypeScript entrypoint directly.
+  const srcCliPath = path.resolve(__dirname, "../src/command-line/cli.ts");
+  if (existsSync(srcCliPath)) {
+    const result = spawnSync(
+      process.execPath,
+      ["--import", "tsx", srcCliPath, ...process.argv.slice(2)],
+      { stdio: "inherit" },
+    );
 
-  process.exit(result.status ?? 1);
+    process.exit(result.status ?? 1);
+  }
+
+  console.error(
+    "Kumo CLI entrypoint not found. If you're in the repo, run: pnpm --filter @cloudflare/kumo build",
+  );
+  process.exit(1);
 }
 
-console.error(
-  "Kumo CLI entrypoint not found. If you're in the repo, run: pnpm --filter @cloudflare/kumo build",
-);
-process.exit(1);
+main();

package/dist/.build-complete

@@ -1 +1 @@
-1770737905837
+1771248145491