@cloudflare/kumo 1.4.1 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @cloudflare/kumo
 
+## 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
+
+- d7a6da3: fix(cli): resolve broken doc/docs/ls commands by fixing registry path from catalog/ to ai/
+  fix(dialog): wrap sub-components to isolate @base-ui/react type references from downstream consumers
+  fix(label): render as `<label>` element with htmlFor support instead of `<span>`
+  feat(input): add Textarea alias for InputArea
+  feat(toast): add ToastProvider alias for Toasty
+  feat(button): require aria-label on icon-only buttons (shape="square" | "circle") via discriminated union
+  fix(docs): add Tailwind 4 @source directive to usage example, add confirmation dialog recipe, update Select basic example, document icon-only button aria-label pattern
+
 ## 1.4.1
 
 ### Patch Changes

package/README.md

@@ -26,7 +26,7 @@ npx @cloudflare/kumo doc Button # Get component documentation
 npx @cloudflare/kumo docs       # Get all component docs
 ```
 
-The CLI reads from `catalog/component-registry.json` (generated from TypeScript types + Storybook examples).
+The CLI reads from `ai/component-registry.json` (generated from TypeScript types + demo examples).
 
 ## Usage
 
@@ -44,15 +44,23 @@ import { Button } from "@cloudflare/kumo/components/button";
 
 #### For Tailwind CSS Users
 
-```js
-// Explicit import (recommended)
-import "@cloudflare/kumo/styles/tailwind";
+**Important:** Tailwind CSS v4 does not scan `node_modules/` by default. You must add a `@source` directive so Tailwind can discover the utility classes used by Kumo components. Without this, components may render with missing styles (e.g. Dialogs not centered).
+
+In your main CSS file (e.g. `app.css`):
 
-// Or use the default export (same as above)
-import "@cloudflare/kumo/styles";
+```css
+@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
+@import "@cloudflare/kumo/styles/tailwind";
+@import "tailwindcss";
 ```
 
-This imports the raw CSS with Tailwind directives (`@theme`, `@layer`, etc.) that your Tailwind setup will process.
+> **Import order matters** — `@cloudflare/kumo/styles` must come **before** `@import "tailwindcss"` so Kumo's `@theme` tokens are registered first.
+
+> **Note:** The `@source` path is relative to your CSS file. Adjust it based on your project structure — e.g. if your CSS is in `src/styles/`, you may need `../../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}`.
+
+Alternatively, you can use the default style export (`@cloudflare/kumo/styles`) which is equivalent to `styles/tailwind`.
+
+If you are **not** using Tailwind CSS, use the standalone build instead (see below) — no `@source` directive is needed.
 
 #### For Non-Tailwind Users (Standalone)
 

package/ai/component-registry.json

@@ -239,28 +239,9 @@
       "importPath": "@cloudflare/kumo",
       "category": "Action",
       "props": {
-        "children": {
-          "type": "ReactNode",
-          "optional": true
-        },
-        "className": {
-          "type": "string",
-          "optional": true
-        },
-        "icon": {
-          "type": "ReactNode",
-          "optional": true,
-          "description": "Icon from `@phosphor-icons/react` or a React element. Rendered before children."
-        },
-        "loading": {
-          "type": "boolean",
-          "optional": true,
-          "description": "Shows a loading spinner and disables interaction."
-        },
         "shape": {
           "type": "enum",
           "optional": true,
-          "description": "Button shape.\n- `\"base\"` — Default rectangular button\n- `\"square\"` — Square button for icon-only actions\n- `\"circle\"` — Circular button for icon-only actions",
           "values": [
             "base",
             "square",
@@ -280,7 +261,6 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "description": "Button size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary actions\n- `\"base\"` — Default size\n- `\"lg\"` — Large for primary CTAs",
           "values": [
             "xs",
             "sm",
@@ -304,7 +284,6 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Visual style of the button.\n- `\"primary\"` — High-emphasis, brand-colored for primary actions\n- `\"secondary\"` — Default style with border for most actions\n- `\"ghost\"` — Minimal, no background for tertiary actions\n- `\"destructive\"` — Danger button for destructive actions\n- `\"secondary-destructive\"` — Secondary style with destructive text\n- `\"outline\"` — Bordered with transparent background",
           "values": [
             "primary",
             "secondary",
@@ -354,6 +333,24 @@
           },
           "default": "secondary"
         },
+        "children": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "icon": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Icon from `@phosphor-icons/react` or a React element. Rendered before children."
+        },
+        "loading": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Shows a loading spinner and disables interaction."
+        },
         "id": {
           "type": "string",
           "optional": true
@@ -389,7 +386,7 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add\"\n      />\n    </div>",
         "<Button variant=\"primary\">Primary</Button>",
         "<Button variant=\"secondary\">Secondary</Button>",
         "<Button variant=\"ghost\">Ghost</Button>",
@@ -398,7 +395,7 @@
         "<Button variant=\"secondary-destructive\">Secondary Destructive</Button>",
         "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button size=\"xs\" variant=\"secondary\">\n        Extra Small\n      </Button>\n      <Button size=\"sm\" variant=\"secondary\">\n        Small\n      </Button>\n      <Button size=\"base\" variant=\"secondary\">\n        Base\n      </Button>\n      <Button size=\"lg\" variant=\"secondary\">\n        Large\n      </Button>\n    </div>",
         "<Button variant=\"secondary\" icon={PlusIcon}>\n      Create Worker\n    </Button>",
-        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} />\n      <Button variant=\"secondary\" shape=\"circle\" icon={PlusIcon} />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n    </div>",
         "<Button variant=\"primary\" loading>\n      Loading...\n    </Button>",
         "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>"
       ],
@@ -2409,8 +2406,9 @@
         }
       },
       "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              />\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              />\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>\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>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -2420,113 +2418,28 @@
       "subComponents": {
         "Root": {
           "name": "Root",
-          "description": "Controls the open state of the dialog. Doesn't render its own HTML element.",
-          "props": {
-            "open": {
-              "type": "boolean",
-              "description": "Whether the dialog is currently open (controlled mode)"
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "description": "Whether the dialog is initially open (uncontrolled mode)",
-              "default": "false"
-            },
-            "onOpenChange": {
-              "type": "(open: boolean, event: Event) => void",
-              "description": "Callback fired when the dialog opens or closes"
-            },
-            "modal": {
-              "type": "boolean | 'trap-focus'",
-              "description": "Whether the dialog is modal. When true, focus is trapped and page scroll is locked",
-              "default": "true"
-            },
-            "dismissible": {
-              "type": "boolean",
-              "description": "Whether clicking outside closes the dialog",
-              "default": "true"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Root",
-          "usageExamples": [
-            "<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>",
-            "<Dialog.Root defaultOpen={false}>"
-          ]
+          "description": "Root sub-component",
+          "props": {}
         },
         "Trigger": {
           "name": "Trigger",
-          "description": "A button that opens the dialog when clicked.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default button"
-            },
-            "disabled": {
-              "type": "boolean",
-              "description": "Whether the trigger is disabled"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Trigger",
-          "usageExamples": [
-            "<Dialog.Trigger render={<Button>Open</Button>} />",
-            "<Dialog.Trigger>Open Dialog</Dialog.Trigger>"
-          ],
-          "renderElement": "<button>"
+          "description": "Trigger sub-component",
+          "props": {}
         },
         "Title": {
           "name": "Title",
-          "description": "A heading that labels the dialog for accessibility.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default h2"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Title",
-          "usageExamples": [
-            "<Dialog.Title>Confirm Action</Dialog.Title>",
-            "<Dialog.Title render={<h3 />}>Custom Heading</Dialog.Title>"
-          ],
-          "renderElement": "<h2>"
+          "description": "Title sub-component",
+          "props": {}
         },
         "Description": {
           "name": "Description",
-          "description": "A paragraph providing additional context about the dialog.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default p"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Description",
-          "usageExamples": [
-            "<Dialog.Description>Are you sure you want to proceed?</Dialog.Description>"
-          ],
-          "renderElement": "<p>"
+          "description": "Description sub-component",
+          "props": {}
         },
         "Close": {
           "name": "Close",
-          "description": "A button that closes the dialog when clicked.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default button"
-            },
-            "disabled": {
-              "type": "boolean",
-              "description": "Whether the close button is disabled"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Close",
-          "usageExamples": [
-            "<Dialog.Close render={<Button>Cancel</Button>} />",
-            "<Dialog.Close>×</Dialog.Close>"
-          ],
-          "renderElement": "<button>"
+          "description": "Close sub-component",
+          "props": {}
         }
       },
       "styling": {
@@ -3137,10 +3050,15 @@
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
         },
+        "htmlFor": {
+          "type": "string",
+          "optional": true,
+          "description": "The id of the form element this label is associated with"
+        },
         "asContent": {
           "type": "boolean",
           "optional": true,
-          "description": "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."
+          "description": "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."
         }
       },
       "examples": [
@@ -3174,7 +3092,7 @@
         }
       },
       "examples": [
-        "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button variant=\"ghost\" size=\"sm\" shape=\"square\">\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
       ],
@@ -3528,6 +3446,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": [
@@ -3535,7 +3458,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"
@@ -3578,7 +3502,7 @@
         }
       },
       "examples": [
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
         "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
         "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Settings</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Close\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
         "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Bottom</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Top</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Left</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Right</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
@@ -3786,7 +3710,7 @@
         }
       },
       "examples": [
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"Apple\")}\n      placeholder=\"Please select\"\n    >\n      <Select.Option value=\"Apple\">Apple</Select.Option>\n      <Select.Option value=\"Banana\">Banana</Select.Option>\n      <Select.Option value=\"Cherry\">Cherry</Select.Option>\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    >\n      <Select.Option value=\"apple\">Apple</Select.Option>\n      <Select.Option value=\"banana\">Banana</Select.Option>\n      <Select.Option value=\"cherry\">Cherry</Select.Option>\n    </Select>",
         "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
         "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: null, label: \"Please select\" },\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
         "<Select\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
@@ -4236,10 +4160,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",
@@ -4645,9 +4569,9 @@
         }
       },
       "examples": [
-        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button shape=\"square\" icon={TranslateIcon} />\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
+        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",