@cloudflare/kumo 1.5.0 → 1.6.0

package/ai/component-registry.md

@@ -512,10 +512,14 @@ Read-only text field with a one-click copy-to-clipboard button.
   The text to display and copy to clipboard.
 - `className`: string
   Additional CSS classes merged via `cn()`.
+- `tooltip`: object
+  Tooltip config. Shows tooltip on hover, anchored toast on click.
+- `labels`: object
+  Accessible labels for i18n.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `border-kumo-line`
+`bg-kumo-base`, `border-kumo-line`, `outline-kumo-fill`, `text-kumo-default`
 
 **Styling:**
 
@@ -569,6 +573,13 @@ Read-only text field with a one-click copy-to-clipboard button.
 <ClipboardText text="0c239dd2" />
 ```
 
+```tsx
+<ClipboardText
+      text="npx kumo add button"
+      tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
+    />
+```
+
 
 ---
 
@@ -1639,6 +1650,180 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
 ```
 
 
+---
+
+### DatePicker
+
+DatePicker — a date selection calendar.  Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.
+
+**Type:** component
+
+**Import:** `import { DatePicker } from "@cloudflare/kumo";`
+
+**Category:** Other
+
+**Props:**
+
+- `className`: string
+  Additional CSS classes
+- `children`: ReactNode
+  Child elements
+
+**Colors (kumo tokens used):**
+
+`bg-kumo-base`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-col gap-4">
+      <DatePicker mode="single" selected={date} onChange={d => {
+        if (d) {
+          setDate(d);
+        }
+      }} />
+      <p className="text-sm text-kumo-subtle">
+        Selected: {date ? date.toLocaleDateString() : "None"}
+      </p>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-4">
+      <DatePicker
+        mode="multiple"
+        selected={dates}
+        onChange={setDates}
+        max={5}
+      />
+      <p className="text-sm text-kumo-subtle">
+        Selected: {dates?.length ?? 0} date(s)
+      </p>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-4">
+      <DatePicker
+        mode="range"
+        selected={range}
+        onChange={setRange}
+        numberOfMonths={2}
+      />
+      <p className="text-sm text-kumo-subtle">
+        Range:{" "}
+        {range?.from
+          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? "..."}`
+          : "None"}
+      </p>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-4">
+      <DatePicker
+        mode="range"
+        selected={range}
+        onChange={setRange}
+        min={3}
+        max={7}
+        footer={
+          <span className="text-xs text-kumo-subtle">Select 3-7 nights</span>
+        }
+      />
+    </div>
+```
+
+```tsx
+<Popover>
+      <Popover.Trigger asChild>
+        <Button variant="outline" icon={CalendarDotsIcon}>
+          {date ? date.toLocaleDateString() : "Pick a date"}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="p-3">
+        <DatePicker mode="single" selected={date} onChange={setDate} />
+      </Popover.Content>
+    </Popover>
+```
+
+```tsx
+<Popover>
+      <Popover.Trigger asChild>
+        <Button variant="outline" icon={CalendarDotsIcon}>
+          {formatRange()}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="p-3">
+        <DatePicker
+          mode="range"
+          selected={range}
+          onChange={setRange}
+          numberOfMonths={2}
+        />
+      </Popover.Content>
+    </Popover>
+```
+
+```tsx
+<Popover>
+      <Popover.Trigger asChild>
+        <Button variant="outline" icon={CalendarDotsIcon}>
+          {formatRange()}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="p-0">
+        <div className="flex">
+          <div className="flex flex-col gap-1 border-r border-kumo-line p-2 text-sm">
+            {presets.map((preset) => {
+              const isActive = isPresetActive(preset);
+              return (
+                <button
+                  key={preset.label}
+                  type="button"
+                  onClick={() => handlePresetClick(preset)}
+                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${isActive
+                    ? "bg-kumo-bg-inverse text-kumo-text-inverse"
+                    : "text-kumo-strong hover:bg-kumo-control"
+                    }`}
+                >
+                  {preset.label}
+                </button>
+              );
+            })}
+          </div>
+          <div className="p-3">
+            <DatePicker
+              mode="range"
+              selected={range}
+              onChange={setRange}
+              month={month}
+              onMonthChange={setMonth}
+              numberOfMonths={2}
+            />
+          </div>
+        </div>
+      </Popover.Content>
+    </Popover>
+```
+
+```tsx
+<DatePicker
+      mode="multiple"
+      selected={dates}
+      onChange={setDates}
+      max={maxDays}
+      disabled={unavailableDates}
+      fixedWeeks
+      footer={
+        <p className="text-xs text-kumo-subtle pt-2 w-full">
+          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.
+        </p>
+      }
+    />
+```
+
+
 ---
 
 ### DateRangePicker
@@ -1970,6 +2155,110 @@ Close sub-component
     </Dialog.Root>
 ```
 
+```tsx
+<Dialog.Root>
+      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />
+      <Dialog className="p-8">
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <Dialog.Title className="text-2xl font-semibold">
+            Create Resource
+          </Dialog.Title>
+          <Dialog.Close
+            aria-label="Close"
+            render={(props) => (
+              <Button
+                {...props}
+                variant="secondary"
+                shape="square"
+                icon={<X />}
+                aria-label="Close"
+              />
+            )}
+          />
+        </div>
+        <Dialog.Description className="mb-4 text-kumo-subtle">
+          Select a region for your new resource.
+        </Dialog.Description>
+        <Select
+          className="w-full"
+          renderValue={(v) =>
+            regions.find((r) => r.value === v)?.label ?? "Select region..."
+          }
+        >
+          {regions.map((region) => (
+            <Select.Option key={region.value} value={region.value}>
+              {region.label}
+            </Select.Option>
+          ))}
+        </Select>
+        <div className="mt-8 flex justify-end gap-2">
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="secondary" {...props}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Button variant="primary">Create</Button>
+        </div>
+      </Dialog>
+    </Dialog.Root>
+```
+
+```tsx
+<Dialog.Root>
+      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />
+      <Dialog className="p-8">
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <Dialog.Title className="text-2xl font-semibold">
+            Create Resource
+          </Dialog.Title>
+          <Dialog.Close
+            aria-label="Close"
+            render={(props) => (
+              <Button
+                {...props}
+                variant="secondary"
+                shape="square"
+                icon={<X />}
+                aria-label="Close"
+              />
+            )}
+          />
+        </div>
+        <Dialog.Description className="mb-4 text-kumo-subtle">
+          Search and select a region for your new resource.
+        </Dialog.Description>
+        <Combobox value={value} onValueChange={setValue} items={regions}>
+          <Combobox.TriggerInput
+            className="w-full"
+            placeholder="Search regions..."
+          />
+          <Combobox.Content>
+            <Combobox.Empty>No regions found</Combobox.Empty>
+            <Combobox.List>
+              {(item: { value: string; label: string }) => (
+                <Combobox.Item key={item.value} value={item}>
+                  {item.label}
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>
+        <div className="mt-8 flex justify-end gap-2">
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="secondary" {...props}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Button variant="primary">Create</Button>
+        </div>
+      </Dialog>
+    </Dialog.Root>
+```
+
 
 ---
 
@@ -3090,6 +3379,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):**
 
@@ -3114,6 +3405,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}
+    />
+```
+
 
 ---
 
@@ -3955,16 +4256,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>
@@ -3982,31 +4294,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>
@@ -4048,7 +4364,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" }} />
@@ -4056,7 +4373,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>
@@ -4064,13 +4388,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>
@@ -4093,14 +4418,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>
             ))}
@@ -4482,7 +4823,7 @@ Multi-line textarea input with Input variants and InputArea-specific dimensions
 - **Feedback:** Banner, Loader, Toasty
 - **Action:** Button, ClipboardText
 - **Input:** Checkbox, Combobox, DateRangePicker, Field, Input, Radio, Select, Switch
-- **Other:** CloudflareLogo, Label, Link, SensitiveInput, Table, DeleteResource
+- **Other:** CloudflareLogo, DatePicker, Label, Link, SensitiveInput, Table, DeleteResource
 - **Navigation:** CommandPalette, MenuBar, Pagination, Tabs
 - **Overlay:** Dialog, DropdownMenu, Popover, Tooltip
 - **Layout:** Grid, Surface, PageHeader, ResourceListPage

package/ai/schemas.ts

@@ -165,6 +165,8 @@ export const ClipboardTextPropsSchema = z.object({
   size: z.enum(["sm", "base", "lg"]).optional(), // Size of the clipboard text field. - `"sm"` — Small clipboard text for compact UIs - `"base"` — Default clipboard text size - `"lg"` — Large clipboard text for prominent display
   text: z.string(), // The text to display and copy to clipboard.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
+  tooltip: z.unknown().optional(), // Tooltip config. Shows tooltip on hover, anchored toast on click.
+  labels: z.unknown().optional(), // Accessible labels for i18n.
 });
 
 export const CloudflareLogoPropsSchema = z.object({
@@ -460,6 +462,11 @@ export const CommandPalettePropsSchema = z.object({
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child content - typically one or more Panel components
 });
 
+export const DatePickerPropsSchema = z.object({
+  className: z.string().optional(), // Additional CSS classes
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+});
+
 export const DateRangePickerPropsSchema = z.object({
   size: z.enum(["sm", "base", "lg"]).optional(), // Calendar size. - `"sm"` — Compact calendar for tight spaces - `"base"` — Default calendar size - `"lg"` — Large calendar for prominent date selection
   variant: z.enum(["default", "subtle"]).optional(), // Visual variant. - `"default"` — Standard appearance with overlay background - `"subtle"` — Minimal background
@@ -583,6 +590,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({
@@ -719,7 +727,7 @@ export const TooltipPropsSchema = z.object({
 /**
  * All valid component type names
  */
-export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
+export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
 
 export const KumoComponentTypeSchema = z.enum([
   "Badge",
@@ -733,6 +741,7 @@ export const KumoComponentTypeSchema = z.enum([
   "Collapsible",
   "Combobox",
   "CommandPalette",
+  "DatePicker",
   "DateRangePicker",
   "Dialog",
   "DropdownMenu",
@@ -776,6 +785,7 @@ export const ComponentPropsSchemas = {
   Collapsible: CollapsiblePropsSchema,
   Combobox: ComboboxPropsSchema,
   CommandPalette: CommandPalettePropsSchema,
+  DatePicker: DatePickerPropsSchema,
   DateRangePicker: DateRangePickerPropsSchema,
   Dialog: DialogPropsSchema,
   DropdownMenu: DropdownMenuPropsSchema,
@@ -858,4 +868,4 @@ export function validateUITree(tree: unknown): SafeParseResult<UITree> {
 /**
  * List of all component names (for catalog generation)
  */
-export const KUMO_COMPONENT_NAMES = ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"] as const;
+export const KUMO_COMPONENT_NAMES = ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"] as const;

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 @@
-1770743558382
+1771426000663