@cloudflare/kumo 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # @cloudflare/kumo
 
+## 1.6.0
+
+### Minor Changes
+
+- 50d4251: Add DatePicker component built on react-day-picker v9
+
+  **New Component: DatePicker**
+  - Three selection modes: `single`, `multiple`, and `range`
+  - Forwards all react-day-picker props for maximum flexibility
+  - Styled with Kumo tokens (no external CSS import needed)
+  - Supports localization via date-fns locales
+  - Supports timezone via `timeZone` prop
+  - Custom modifiers for highlighting specific dates
+  - Footer prop for messages/usage limits
+  - Accessible keyboard navigation with Kumo-styled focus rings
+
+  **Usage:**
+
+  ```tsx
+  // Single date
+  <DatePicker mode="single" selected={date} onSelect={setDate} />
+
+  // Multiple dates
+  <DatePicker mode="multiple" selected={dates} onSelect={setDates} max={5} />
+
+  // Date range
+  <DatePicker mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
+  ```
+
+  **Composing with Popover:**
+
+  ```tsx
+  <Popover>
+    <Popover.Trigger asChild>
+      <Button variant="outline" icon={CalendarDotsIcon}>
+        Pick a date
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content className="p-3">
+      <DatePicker mode="single" selected={date} onSelect={setDate} />
+    </Popover.Content>
+  </Popover>
+  ```
+
+  **Note:** Consider using `DatePicker` with `mode="range"` instead of `DateRangePicker` for new projects - it offers more flexibility and a smaller bundle size.
+
+  **Internal changes:**
+  - Added `react-day-picker` v9 as a dependency
+  - Updated lint rule to allow components without KUMO\_\*\_VARIANTS exports
+  - Updated component registry codegen to handle variant-less components
+  - Disabled `jsx-a11y/no-autofocus` rule (intentional prop forwarding)
+
+- 93361ed: feat(clipboard-text): add slide animation with tooltip on copy
+
+### Patch Changes
+
+- c71bd9b: Updated the MenuBar so its child buttons align with the container’s outer corners.
+- 46ecf42: Fix `kumo add` to consolidate imports from `@cloudflare/kumo` into a single statement using inline `type` syntax.
+
+  Previously, running `kumo add DeleteResource` would produce non-conformant code with duplicate imports:
+
+  ```typescript
+  import { Dialog, DialogRoot } from "@cloudflare/kumo";
+  import { Input } from "@cloudflare/kumo";
+  import { Button } from "@cloudflare/kumo";
+  ```
+
+  Now it produces a single consolidated import:
+
+  ```typescript
+  import {
+    Dialog,
+    DialogRoot,
+    Input,
+    Button,
+    type DialogProps,
+  } from "@cloudflare/kumo";
+  ```
+
+  This satisfies ESLint's `import/no-duplicates` rule with `prefer-inline: true`.
+
+- a9167fa: Fix z-index stacking issues with nested portaled components (e.g., Select inside Dialog)
+  - Remove unnecessary z-index values from Dialog, Select, Combobox, and Dropdown
+  - Delete `.z-modal { z-index: 9999 }` - DOM order now handles stacking naturally
+  - Components opened later correctly appear on top without z-index wars
+
+- f02494d: fix(dropdown): improve external link detection to handle http:// and protocol-relative urls
+
+  updated the external link check to use a regex that matches `https://`, `http://`, and protocol-relative URLs (`//`). previously only `https://` links opened in a new tab.
+
+## 1.5.1
+
+### Patch Changes
+
+- 2c8a5ad: Changed ClipboardIcon to CopyIcon in ClipboardText component
+- 31cc2e1: Fix AI command USAGE.md path resolution to work correctly from bundled dist output
+- 1ae7dfd: fix(cli): include block source files in build for `kumo add` command
+
+  The `kumo add` command was failing because block source files (`.tsx`) were not being copied to `dist/` during the build process. This adds copying of block source files from `src/blocks/` to `dist/src/blocks/` so the CLI can install them into user projects.
+
+- fa3eba3: fix(Table): Add indeterminate prop and fix checkbox click handling
+  - Added `indeterminate` prop to `Table.CheckHead` and `Table.CheckCell` components to support indeterminate checkbox state (shows minus icon when some but not all rows are selected)
+  - Fixed checkbox click handling - clicking directly on the checkbox now works correctly (previously only clicking the cell area next to the checkbox worked)
+  - Updated Table demos (`TableSelectedRowDemo` and `TableFullDemo`) with proper React state management for interactive row selection
+
+- 3bc976e: fix: delete-resource shouldn't nest buttons within each other
+- 752fdf1: support overwriting text in pagination component
+
 ## 1.5.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -647,17 +647,30 @@
           "type": "string",
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
+        },
+        "tooltip": {
+          "type": "object",
+          "optional": true,
+          "description": "Tooltip config. Shows tooltip on hover, anchored toast on click."
+        },
+        "labels": {
+          "type": "object",
+          "optional": true,
+          "description": "Accessible labels for i18n."
         }
       },
       "examples": [
         "<ClipboardText text=\"0c239dd2\" />",
         "<ClipboardText text=\"abc123\" />",
         "<ClipboardText text=\"sk_live_51H8...\" />",
-        "<ClipboardText text=\"https://example.com/very/long/url/path\" />"
+        "<ClipboardText text=\"https://example.com/very/long/url/path\" />",
+        "<ClipboardText\n      text=\"npx kumo add button\"\n      tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n    />"
       ],
       "colors": [
         "bg-kumo-base",
-        "border-kumo-line"
+        "border-kumo-line",
+        "outline-kumo-fill",
+        "text-kumo-default"
       ],
       "styling": {
         "baseTokens": [
@@ -2236,6 +2249,36 @@
         "text-kumo-subtle"
       ]
     },
+    "DatePicker": {
+      "name": "DatePicker",
+      "type": "component",
+      "description": "DatePicker — a date selection calendar.  Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "className": {
+          "type": "string",
+          "description": "Additional CSS classes"
+        },
+        "children": {
+          "type": "ReactNode",
+          "description": "Child elements"
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker mode=\"single\" selected={date} onChange={d => {\n        if (d) {\n          setDate(d);\n        }\n      }} />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {date ? date.toLocaleDateString() : \"Pick a date\"}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-line p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${isActive\n                    ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                    : \"text-kumo-strong hover:bg-kumo-control\"\n                    }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-kumo-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
+      ],
+      "colors": [
+        "bg-kumo-base"
+      ]
+    },
     "DateRangePicker": {
       "name": "DateRangePicker",
       "type": "component",
@@ -2408,7 +2451,10 @@
       "examples": [
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
-        "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
+        "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3446,6 +3492,11 @@
           "type": "number",
           "optional": true,
           "description": "Total number of items across all pages."
+        },
+        "text": {
+          "type": "object",
+          "optional": true,
+          "description": "Method to provide custom pagination text"
         }
       },
       "examples": [
@@ -3453,7 +3504,8 @@
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"simple\"\n    />",
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"full\"\n    />",
         "<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />",
-        "<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />"
+        "<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />",
+        "<Pagination\n      text={({ perPage }) => `Page ${page} - showing ${perPage} per page`}\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />"
       ],
       "colors": [
         "text-kumo-strong"
@@ -4154,10 +4206,10 @@
       },
       "examples": [
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead aria-label=\"Select all rows\" />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell aria-label={`Select ${row.subject}`} />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead aria-label=\"Select all rows\" />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.CheckCell aria-label=\"Select row 1\" />\n              <Table.Cell>Kumo v1.0.0 released</Table.Cell>\n              <Table.Cell>Visal In</Table.Cell>\n              <Table.Cell>5 seconds ago</Table.Cell>\n            </Table.Row>\n            <Table.Row variant=\"selected\">\n              <Table.CheckCell checked aria-label=\"Select row 2\" />\n              <Table.Cell>New Job Offer</Table.Cell>\n              <Table.Cell>Cloudflare</Table.Cell>\n              <Table.Cell>10 minutes ago</Table.Cell>\n            </Table.Row>\n            <Table.Row>\n              <Table.CheckCell aria-label=\"Select row 3\" />\n              <Table.Cell>Daily Email Digest</Table.Cell>\n              <Table.Cell>Cloudflare</Table.Cell>\n              <Table.Cell>1 hour ago</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />\n            <col className=\"w-[150px]\" />\n            <col className=\"w-[150px]\" />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"w-full overflow-x-auto p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col style={{ width: \"40px\" }} />\n            <col />\n            <col style={{ width: \"150px\" }} />\n            <col style={{ width: \"120px\" }} />\n            <col style={{ width: \"50px\" }} />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead aria-label=\"Select all rows\" />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head></Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row, index) => (\n              <Table.Row\n                key={row.id}\n                variant={index === 1 ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={index === 1}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>\n                  <div className=\"flex items-center gap-2\">\n                    <EnvelopeSimple size={16} />\n                    <span className=\"truncate\">{row.subject}</span>\n                    {row.tags && (\n                      <div className=\"ml-2 inline-flex gap-1\">\n                        {row.tags.map((tag) => (\n                          <Badge key={tag}>{tag}</Badge>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.from}</span>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.date}</span>\n                </Table.Cell>\n                <Table.Cell className=\"text-right\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    shape=\"square\"\n                    aria-label=\"More options\"\n                  >\n                    <DotsThree weight=\"bold\" size={16} />\n                  </Button>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>"
+        "<LayerCard>\n      <LayerCard.Primary className=\"w-full overflow-x-auto p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />{\" \"}\n            {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n            <col />\n            <col style={{ width: \"150px\" }} />\n            <col style={{ width: \"120px\" }} />\n            <col style={{ width: \"50px\" }} />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === emailData.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < emailData.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head></Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>\n                  <div className=\"flex items-center gap-2\">\n                    <EnvelopeSimple size={16} />\n                    <span className=\"truncate\">{row.subject}</span>\n                    {row.tags && (\n                      <div className=\"ml-2 inline-flex gap-1\">\n                        {row.tags.map((tag) => (\n                          <Badge key={tag}>{tag}</Badge>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.from}</span>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.date}</span>\n                </Table.Cell>\n                <Table.Cell className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThree weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimple}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -4853,6 +4905,7 @@
       ],
       "Other": [
         "CloudflareLogo",
+        "DatePicker",
         "Label",
         "Link",
         "SensitiveInput",
@@ -4890,6 +4943,7 @@
       "Collapsible",
       "Combobox",
       "CommandPalette",
+      "DatePicker",
       "DateRangePicker",
       "DeleteResource",
       "Dialog",
@@ -4932,6 +4986,7 @@
         "Collapsible",
         "Combobox",
         "CommandPalette",
+        "DatePicker",
         "DateRangePicker",
         "Dialog",
         "DropdownMenu",