@cloudflare/kumo 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @cloudflare/kumo
 
+## 2.0.2
+
+### Patch Changes
+
+- fbf3eef: Forward all Base UI Panel props (including `keepMounted` and `hiddenUntilFound`) through `Collapsible.DefaultPanel`. Previously these were silently dropped because `DefaultPanel` used a standalone props interface instead of extending `BasePanelProps`.
+- 40491c2: Fix registry codegen to match demo examples when component export name differs from directory name (e.g. DropdownMenu vs dropdown). This restores missing examples for DropdownMenu and other affected components.
+- 3427221: TooltipProvider props (`delay`, `closeDelay`, `timeout`) are now shown in the Tooltip component's API Reference on the docs site.
+
 ## 2.0.1
 
 ### Patch Changes

package/ai/component-registry.json

@@ -2123,7 +2123,7 @@
         "<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo className=\"w-28\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"white\" />\n      </div>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"white\" />\n      </div>\n    </div>",
         "<div className=\"flex flex-wrap items-end gap-6\">\n      <CloudflareLogo className=\"w-20\" />\n      <CloudflareLogo className=\"w-28\" />\n      <CloudflareLogo className=\"w-44\" />\n    </div>",
-        "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
+        "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
         "<PoweredByCloudflare />",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByCloudflare />\n      <PoweredByCloudflare color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByCloudflare color=\"white\" />\n      </div>\n    </div>",
         "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
@@ -2242,6 +2242,7 @@
         "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full space-y-2\">\n      <Collapsible.Root open={open1} onOpenChange={setOpen1}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open2} onOpenChange={setOpen2}>\n        <Collapsible.DefaultTrigger>How do I use it?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Install the components and import them into your project.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open3} onOpenChange={setOpen3}>\n        <Collapsible.DefaultTrigger>Is it open source?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Check the repository for license information.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.Trigger\n          render={<Button variant=\"secondary\" size=\"sm\" />}\n        >\n          {isOpen ? \"Hide details\" : \"Show details\"}\n        </Collapsible.Trigger>\n        <Collapsible.Panel className=\"mt-3 rounded-lg bg-kumo-tint p-4\">\n          <Text>\n            This panel uses custom styling instead of the default border-left accent.\n          </Text>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full space-y-4\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel keepMounted>\n          <Text>\n            Type something below, then collapse and re-open — your input is\n            preserved because the panel stays mounted.\n          </Text>\n          <Input label=\"Name\" placeholder=\"Type here…\" />\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full space-y-2\">\n      {items.map((item, i) => (\n        <Collapsible.Root\n          key={i}\n          open={activeIndex === i}\n          onOpenChange={(open) => setActiveIndex(open ? i : null)}\n        >\n          <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n          <Collapsible.DefaultPanel>\n            <Text>{item.content}</Text>\n          </Collapsible.DefaultPanel>\n        </Collapsible.Root>\n      ))}\n    </div>"
       ],
       "colors": [
@@ -2900,7 +2901,15 @@
           "default": "default"
         }
       },
-      "examples": [],
+      "examples": [
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Worker</DropdownMenu.Item>\n        <DropdownMenu.Item>Pages</DropdownMenu.Item>\n        <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>View Options</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Group>\n          <DropdownMenu.Label>Display</DropdownMenu.Label>\n          <DropdownMenu.CheckboxItem\n            checked={showSidebar}\n            onCheckedChange={setShowSidebar}\n          >\n            Show sidebar\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={showLineNumbers}\n            onCheckedChange={setShowLineNumbers}\n          >\n            Show line numbers\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={wordWrap}\n            onCheckedChange={setWordWrap}\n          >\n            Word wrap\n          </DropdownMenu.CheckboxItem>\n        </DropdownMenu.Group>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>\n        <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>\n\n        {/* Language submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={language}\n                onValueChange={setLanguage}\n              >\n                {languages.map((lang) => (\n                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>\n                    {lang.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        {/* Timezone submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={timezone}\n                onValueChange={setTimezone}\n              >\n                {timezones.map((tz) => (\n                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>\n                    {tz.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Edit</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={PencilSimpleIcon}>Rename</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item inset>Move to folder</DropdownMenu.Item>\n        <DropdownMenu.Item inset>Add to favorites</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={TrashIcon} variant=\"danger\">\n          Delete\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<div className=\"flex flex-col items-start gap-2\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CopyIcon}\n            onClick={() => setLastAction(\"Duplicated\")}\n          >\n            Duplicate\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={PencilSimpleIcon}\n            onClick={() => setLastAction(\"Renamed\")}\n          >\n            Rename\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={TrashIcon}\n            variant=\"danger\"\n            onClick={() => setLastAction(\"Deleted\")}\n          >\n            Delete\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n      {lastAction && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last action: <span className=\"text-kumo-default\">{lastAction}</span>\n        </p>\n      )}\n    </div>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger\n        render={<button type=\"button\" className=\"rounded-full\" />}\n      >\n        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white\">\n          MR\n        </span>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Resources</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>\n          Settings\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.LinkItem href=\"/docs\" icon={BookOpenIcon}>\n          Documentation\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.LinkItem\n          href=\"https://developers.cloudflare.com\"\n          target=\"_blank\"\n          icon={ArrowSquareOutIcon}\n        >\n          Developer Docs\n        </DropdownMenu.LinkItem>\n      </DropdownMenu.Content>\n    </DropdownMenu>"
+      ],
       "colors": [
         "bg-kumo-control",
         "bg-kumo-danger",
@@ -2936,7 +2945,16 @@
         "SubTrigger": {
           "name": "SubTrigger",
           "description": "SubTrigger sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "Icon",
+              "description": "Icon displayed before the label."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            }
+          }
         },
         "SubContent": {
           "name": "SubContent",
@@ -2946,34 +2964,164 @@
         "Content": {
           "name": "Content",
           "description": "Content sub-component",
-          "props": {}
+          "props": {
+            "sideOffset": {
+              "type": "number",
+              "description": "Distance in pixels from the trigger.",
+              "default": "8"
+            },
+            "container": {
+              "type": "PortalContainer",
+              "description": "Container element for the portal. Use this to render inside a Shadow DOM or custom container."
+            }
+          }
         },
         "Item": {
           "name": "Item",
           "description": "Item sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "variant": {
+              "type": "\"default\" | \"danger\"",
+              "description": "Visual style of the item.",
+              "default": "\"default\""
+            },
+            "selected": {
+              "type": "boolean",
+              "description": "Shows a check mark indicator when true."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "onClick": {
+              "type": "(event: React.MouseEvent) => void",
+              "description": "Callback when the item is clicked."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "true"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "LinkItem": {
           "name": "LinkItem",
           "description": "LinkItem sub-component",
-          "props": {}
+          "props": {
+            "href": {
+              "type": "string",
+              "description": "URL to navigate to when clicked."
+            },
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "variant": {
+              "type": "\"default\" | \"danger\"",
+              "description": "Visual style of the item.",
+              "default": "\"default\""
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "target": {
+              "type": "string",
+              "description": "Link target attribute (e.g. \"_blank\" for new tab)."
+            },
+            "render": {
+              "type": "ReactElement | ((props, state) => ReactElement)",
+              "description": "Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link)."
+            }
+          }
         },
         "CheckboxItem": {
           "name": "CheckboxItem",
           "description": "CheckboxItem sub-component",
-          "props": {}
+          "props": {
+            "checked": {
+              "type": "boolean",
+              "description": "Whether the item is checked."
+            },
+            "defaultChecked": {
+              "type": "boolean",
+              "description": "Whether the item is initially checked (uncontrolled).",
+              "default": "false"
+            },
+            "onCheckedChange": {
+              "type": "(checked: boolean, event: ChangeEventDetails) => void",
+              "description": "Callback when the checked state changes."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "false"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "RadioGroup": {
           "name": "RadioGroup",
           "description": "RadioGroup sub-component (wraps DropdownMenuPrimitive)",
-          "props": {},
+          "props": {
+            "value": {
+              "type": "any",
+              "description": "The controlled value of the currently selected radio item."
+            },
+            "defaultValue": {
+              "type": "any",
+              "description": "The initially selected value (uncontrolled)."
+            },
+            "onValueChange": {
+              "type": "(value: any, event: ChangeEventDetails) => void",
+              "description": "Callback when the selected value changes."
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, all radio items in the group are disabled."
+            }
+          },
           "isPassThrough": true,
           "baseComponent": "DropdownMenuPrimitive.RadioGroup"
         },
         "RadioItem": {
           "name": "RadioItem",
           "description": "RadioItem sub-component",
-          "props": {}
+          "props": {
+            "value": {
+              "type": "any",
+              "required": true,
+              "description": "The value of this radio item."
+            },
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "false"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "RadioItemIndicator": {
           "name": "RadioItemIndicator",
@@ -2983,7 +3131,12 @@
         "Label": {
           "name": "Label",
           "description": "Label sub-component",
-          "props": {}
+          "props": {
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            }
+          }
         },
         "Separator": {
           "name": "Separator",
@@ -5897,7 +6050,19 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Toasty>\n      <ToastTriggerButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastTitleOnlyButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastDescriptionOnlyButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastSuccessButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastMultipleButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastErrorButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastWarningButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastInfoButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastCustomContentButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastActionsButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastPromiseButton />\n    </Toasty>"
+      ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",
@@ -6003,7 +6168,35 @@
         "fill-kumo-tip-stroke",
         "outline-kumo-fill",
         "text-kumo-default"
-      ]
+      ],
+      "subComponents": {
+        "Provider": {
+          "name": "Provider",
+          "description": "Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.",
+          "props": {
+            "delay": {
+              "type": "number",
+              "description": "How long to wait (ms) before opening a tooltip once the pointer enters the trigger.",
+              "default": "600"
+            },
+            "closeDelay": {
+              "type": "number",
+              "description": "How long to wait (ms) before closing a tooltip.",
+              "default": "0"
+            },
+            "timeout": {
+              "type": "number",
+              "description": "Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.",
+              "default": "400"
+            }
+          },
+          "isPassThrough": true,
+          "baseComponent": "TooltipBase.Provider",
+          "usageExamples": [
+            "<TooltipProvider>\n  <App />\n</TooltipProvider>"
+          ]
+        }
+      }
     },
     "InputArea": {
       "name": "InputArea",
@@ -6237,7 +6430,11 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<ResourceListPage\n      title=\"Databases\"\n      description=\"Manage your database instances and configurations\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n    >\n      <Surface className=\"p-6\">\n        <p>Main content area - your resource list would go here</p>\n      </Surface>\n    </ResourceListPage>",
+        "<ResourceListPage\n      title=\"API Keys\"\n      description=\"Create and manage API keys for your applications\"\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Quick Start</h3>\n          <p className=\"mb-3 text-sm text-kumo-subtle\">\n            Generate an API key to authenticate your requests\n          </p>\n          <Code\n            lang=\"bash\"\n            code='curl -H \"Authorization: Bearer YOUR_API_KEY\" https://api.example.com'\n          />\n        </Surface>\n      }\n    >\n      <Surface className=\"p-6\">\n        <p>API keys list would appear here</p>\n      </Surface>\n    </ResourceListPage>",
+        "<ResourceListPage\n      title=\"KV Namespaces\"\n      description=\"Store key-value data globally with low-latency access\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Usage Example</h3>\n          <Code\n            lang=\"ts\"\n            code={`// Read from KV\nconst value = await KV.get('key');\n\n// Write to KV\nawait KV.put('key', 'value');`}\n          />\n        </Surface>\n      }\n      additionalContent={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Learn More</h3>\n          <p className=\"text-sm text-kumo-subtle\">\n            Check out our documentation to learn more about KV storage.\n          </p>\n        </Surface>\n      }\n    >\n      <div className=\"space-y-4\">\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">production-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 2 days ago</p>\n        </Surface>\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">staging-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 1 week ago</p>\n        </Surface>\n      </div>\n    </ResourceListPage>"
+      ],
       "colors": [
         "bg-kumo-overlay",
         "text-kumo-subtle"

package/ai/component-registry.md

@@ -1315,7 +1315,7 @@ Cloudflare logo component.
         <DropdownMenu.Content>
           <DropdownMenu.Item
             icon={CloudIcon}
-            onSelect={() =>
+            onClick={() =>
               copyToClipboard(
                 generateCloudflareLogoSvg({ variant: "glyph" }),
                 "glyph",
@@ -1326,7 +1326,7 @@ Cloudflare logo component.
           </DropdownMenu.Item>
           <DropdownMenu.Item
             icon={CodeIcon}
-            onSelect={() =>
+            onClick={() =>
               copyToClipboard(
                 generateCloudflareLogoSvg({ variant: "full" }),
                 "full",
@@ -1337,7 +1337,7 @@ Cloudflare logo component.
           </DropdownMenu.Item>
           <DropdownMenu.Item
             icon={DownloadSimpleIcon}
-            onSelect={() =>
+            onClick={() =>
               window.open(
                 "https://www.cloudflare.com/press-kit/",
                 "_blank",
@@ -1350,7 +1350,7 @@ Cloudflare logo component.
           <DropdownMenu.Separator />
           <DropdownMenu.Item
             icon={ArrowSquareOutIcon}
-            onSelect={() =>
+            onClick={() =>
               window.open(
                 "https://www.cloudflare.com/brand-assets/",
                 "_blank",
@@ -1560,6 +1560,21 @@ Props:
     </div>
 ```
 
+```tsx
+<div className="w-full space-y-4">
+      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
+        <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>
+        <Collapsible.DefaultPanel keepMounted>
+          <Text>
+            Type something below, then collapse and re-open — your input is
+            preserved because the panel stays mounted.
+          </Text>
+          <Input label="Name" placeholder="Type here…" />
+        </Collapsible.DefaultPanel>
+      </Collapsible.Root>
+    </div>
+```
+
 ```tsx
 <div className="w-full space-y-2">
       {items.map((item, i) => (
@@ -2932,6 +2947,10 @@ Sub sub-component (wraps DropdownMenuPrimitive)
 
 SubTrigger sub-component
 
+Props:
+- `icon`: Icon - Icon displayed before the label.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+
 #### DropdownMenu.SubContent
 
 SubContent sub-component
@@ -2940,26 +2959,67 @@ SubContent sub-component
 
 Content sub-component
 
+Props:
+- `sideOffset`: number [default: 8] - Distance in pixels from the trigger.
+- `container`: PortalContainer - Container element for the portal. Use this to render inside a Shadow DOM or custom container.
+
 #### DropdownMenu.Item
 
 Item sub-component
 
+Props:
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `variant`: "default" | "danger" [default: "default"] - Visual style of the item.
+- `selected`: boolean - Shows a check mark indicator when true.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `onClick`: (event: React.MouseEvent) => void - Callback when the item is clicked.
+- `closeOnClick`: boolean [default: true] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.LinkItem
 
 LinkItem sub-component
 
+Props:
+- `href`: string - URL to navigate to when clicked.
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `variant`: "default" | "danger" [default: "default"] - Visual style of the item.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `target`: string - Link target attribute (e.g. "_blank" for new tab).
+- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link).
+
 #### DropdownMenu.CheckboxItem
 
 CheckboxItem sub-component
 
+Props:
+- `checked`: boolean - Whether the item is checked.
+- `defaultChecked`: boolean [default: false] - Whether the item is initially checked (uncontrolled).
+- `onCheckedChange`: (checked: boolean, event: ChangeEventDetails) => void - Callback when the checked state changes.
+- `closeOnClick`: boolean [default: false] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.RadioGroup
 
 RadioGroup sub-component (wraps DropdownMenuPrimitive)
 
+Props:
+- `value`: any - The controlled value of the currently selected radio item.
+- `defaultValue`: any - The initially selected value (uncontrolled).
+- `onValueChange`: (value: any, event: ChangeEventDetails) => void - Callback when the selected value changes.
+- `disabled`: boolean - When true, all radio items in the group are disabled.
+
 #### DropdownMenu.RadioItem
 
 RadioItem sub-component
 
+Props:
+- `value`: any (required) - The value of this radio item.
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `closeOnClick`: boolean [default: false] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.RadioItemIndicator
 
 RadioItemIndicator sub-component
@@ -2968,6 +3028,9 @@ RadioItemIndicator sub-component
 
 Label sub-component
 
+Props:
+- `inset`: boolean - Adds left padding to align with items that have icons.
+
 #### DropdownMenu.Separator
 
 Separator sub-component
@@ -2981,6 +3044,199 @@ Shortcut sub-component
 Group sub-component (wraps DropdownMenuPrimitive)
 
 
+**Examples:**
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item>Worker</DropdownMenu.Item>
+        <DropdownMenu.Item>Pages</DropdownMenu.Item>
+        <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>View Options</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Group>
+          <DropdownMenu.Label>Display</DropdownMenu.Label>
+          <DropdownMenu.CheckboxItem
+            checked={showSidebar}
+            onCheckedChange={setShowSidebar}
+          >
+            Show sidebar
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showLineNumbers}
+            onCheckedChange={setShowLineNumbers}
+          >
+            Show line numbers
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={wordWrap}
+            onCheckedChange={setWordWrap}
+          >
+            Word wrap
+          </DropdownMenu.CheckboxItem>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
+        <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>
+        <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>
+
+        {/* Language submenu with RadioGroup */}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.Group>
+              <DropdownMenu.RadioGroup
+                value={language}
+                onValueChange={setLanguage}
+              >
+                {languages.map((lang) => (
+                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>
+                    {lang.label}
+                    <DropdownMenu.RadioItemIndicator />
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Group>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        {/* Timezone submenu with RadioGroup */}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.Group>
+              <DropdownMenu.RadioGroup
+                value={timezone}
+                onValueChange={setTimezone}
+              >
+                {timezones.map((tz) => (
+                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>
+                    {tz.label}
+                    <DropdownMenu.RadioItemIndicator />
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Group>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={SignOutIcon} variant="danger">
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>Edit</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={PencilSimpleIcon}>Rename</DropdownMenu.Item>
+        <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item inset>Move to folder</DropdownMenu.Item>
+        <DropdownMenu.Item inset>Add to favorites</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={TrashIcon} variant="danger">
+          Delete
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<div className="flex flex-col items-start gap-2">
+      <DropdownMenu>
+        <DropdownMenu.Trigger render={<Button>Actions</Button>} />
+        <DropdownMenu.Content>
+          <DropdownMenu.Item
+            icon={CopyIcon}
+            onClick={() => setLastAction("Duplicated")}
+          >
+            Duplicate
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={PencilSimpleIcon}
+            onClick={() => setLastAction("Renamed")}
+          >
+            Rename
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item
+            icon={TrashIcon}
+            variant="danger"
+            onClick={() => setLastAction("Deleted")}
+          >
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      {lastAction && (
+        <p className="text-sm text-kumo-subtle">
+          Last action: <span className="text-kumo-default">{lastAction}</span>
+        </p>
+      )}
+    </div>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger
+        render={<button type="button" className="rounded-full" />}
+      >
+        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white">
+          MR
+        </span>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
+        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={SignOutIcon} variant="danger">
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>Resources</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.LinkItem href="/settings" icon={GearIcon}>
+          Settings
+        </DropdownMenu.LinkItem>
+        <DropdownMenu.LinkItem href="/docs" icon={BookOpenIcon}>
+          Documentation
+        </DropdownMenu.LinkItem>
+        <DropdownMenu.Separator />
+        <DropdownMenu.LinkItem
+          href="https://developers.cloudflare.com"
+          target="_blank"
+          icon={ArrowSquareOutIcon}
+        >
+          Developer Docs
+        </DropdownMenu.LinkItem>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+
 ---
 
 ### Empty
@@ -7382,6 +7638,15 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 **Styling:**
 
 
+**Examples:**
+
+```tsx
+<Toasty>
+      <ToastTitleOnlyButton />
+    </Toasty>
+```
+
+
 ---
 
 ### Tooltip
@@ -7412,6 +7677,27 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
 
 `bg-kumo-base`, `fill-kumo-base`, `fill-kumo-tip-shadow`, `fill-kumo-tip-stroke`, `outline-kumo-fill`, `text-kumo-default`
 
+**Sub-Components:**
+
+This is a compound component. Use these sub-components:
+
+#### Tooltip.Provider
+
+Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.
+
+Props:
+- `delay`: number [default: 600] - How long to wait (ms) before opening a tooltip once the pointer enters the trigger.
+- `closeDelay`: number [default: 0] - How long to wait (ms) before closing a tooltip.
+- `timeout`: number [default: 400] - Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.
+
+Usage:
+```tsx
+<TooltipProvider>
+  <App />
+</TooltipProvider>
+```
+
+
 **Examples:**
 
 ```tsx

package/dist/.build-complete

@@ -1 +1 @@
-1777571062774
+1777656981695

package/dist/chunks/{collapsible-k8urhi16pg90jvxa.js → collapsible-nlp2jvcyuzxmq28o.js}

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { CaretDownIcon as g } from "@phosphor-icons/react";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { CaretDownIcon as u } from "@phosphor-icons/react";
 import { forwardRef as r } from "react";
 import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
-import { aO as u, aP as i, aQ as n } from "./vendor-base-ui-ie71jahf0czyf58j.js";
+import { aO as C, aP as i, aQ as n } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 function s({ className: e, ...l }) {
-  return /* @__PURE__ */ o(u, { className: e, ...l });
+  return /* @__PURE__ */ o(C, { className: e, ...l });
 }
 s.displayName = "Collapsible.Root";
 const p = r(
@@ -30,7 +30,7 @@ const m = r(
   )
 );
 m.displayName = "Collapsible.Panel";
-const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ f(
+const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ g(
   n,
   {
     ref: a,
@@ -44,21 +44,22 @@ const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ f(
     children: [
       e,
       " ",
-      /* @__PURE__ */ o(g, { className: "h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180" })
+      /* @__PURE__ */ o(u, { className: "h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180" })
     ]
   }
 ));
 c.displayName = "Collapsible.DefaultTrigger";
-const b = r(({ children: e, className: l }, a) => /* @__PURE__ */ o(
+const b = r(({ children: e, className: l, ...a }, f) => /* @__PURE__ */ o(
   i,
   {
-    ref: a,
+    ref: f,
     className: t("my-2 space-y-4 border-l-2 border-kumo-fill pl-4", l),
+    ...a,
     children: e
   }
 ));
 b.displayName = "Collapsible.DefaultPanel";
-const D = Object.assign(s, {
+const T = Object.assign(s, {
   Root: s,
   Trigger: p,
   Panel: m,
@@ -66,6 +67,6 @@ const D = Object.assign(s, {
   DefaultPanel: b
 });
 export {
-  D as C
+  T as C
 };
-//# sourceMappingURL=collapsible-k8urhi16pg90jvxa.js.map
+//# sourceMappingURL=collapsible-nlp2jvcyuzxmq28o.js.map

package/dist/chunks/{collapsible-k8urhi16pg90jvxa.js.map → collapsible-nlp2jvcyuzxmq28o.js.map}

@@ -1 +1 @@
-{"version":3,"file":"collapsible-k8urhi16pg90jvxa.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn();\n}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n  return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n  typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *   Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref}\n        className={cn(\"cursor-pointer\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n *   <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Panel\n        ref={ref}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n  /** Label text displayed in the trigger */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n  return (\n    <CollapsibleBase.Trigger\n      ref={ref}\n      className={cn(\n        // Defensive resets to prevent global button styles from polluting the trigger\n        \"bg-transparent border-none shadow-none p-0 m-0\",\n        // Base styles for the trigger\n        \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n        className,\n      )}\n    >\n      {children}{\" \"}\n      <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n    </CollapsibleBase.Trigger>\n  );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps {\n  /** Panel content */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with default styling</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n  HTMLDivElement,\n  CollapsibleDefaultPanelProps\n>(({ children, className }, ref) => {\n  return (\n    <CollapsibleBase.Panel\n      ref={ref}\n      className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n    >\n      {children}\n    </CollapsibleBase.Panel>\n  );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *     Show details\n *   </Collapsible.Trigger>\n *   <Collapsible.Panel className=\"mt-2\">\n *     <Text>Hidden content revealed when expanded.</Text>\n *   </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with border-left accent</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible.Root\n *     key={i}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n *     <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n *   </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel,\n  DefaultTrigger: CollapsibleDefaultTrigger,\n  DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IAEzE,UAAAY;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}
+{"version":3,"file":"collapsible-nlp2jvcyuzxmq28o.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn();\n}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n  return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n  typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *   Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref}\n        className={cn(\"cursor-pointer\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n *   <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <CollapsibleBase.Panel\n        ref={ref}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n  /** Label text displayed in the trigger */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n  return (\n    <CollapsibleBase.Trigger\n      ref={ref}\n      className={cn(\n        // Defensive resets to prevent global button styles from polluting the trigger\n        \"bg-transparent border-none shadow-none p-0 m-0\",\n        // Base styles for the trigger\n        \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n        className,\n      )}\n    >\n      {children}{\" \"}\n      <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n    </CollapsibleBase.Trigger>\n  );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps extends BasePanelProps {\n  /** Panel content */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with default styling</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n  HTMLDivElement,\n  CollapsibleDefaultPanelProps\n>(({ children, className, ...props }, ref) => {\n  return (\n    <CollapsibleBase.Panel\n      ref={ref}\n      className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n      {...props}\n    >\n      {children}\n    </CollapsibleBase.Panel>\n  );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n *   <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n *     Show details\n *   </Collapsible.Trigger>\n *   <Collapsible.Panel className=\"mt-2\">\n *     <Text>Hidden content revealed when expanded.</Text>\n *   </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n *   <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n *   <Collapsible.DefaultPanel>\n *     <Text>Content with border-left accent</Text>\n *   </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible.Root\n *     key={i}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n *     <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n *   </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel,\n  DefaultTrigger: CollapsibleDefaultTrigger,\n  DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,GAAW,GAAGC,EAAA,GAASI,MAElC,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IACzE,GAAGC;AAAA,IAEH,UAAAW;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}

package/dist/components/collapsible.js

@@ -1,5 +1,5 @@
 "use client";
-import { C as o } from "../chunks/collapsible-k8urhi16pg90jvxa.js";
+import { C as o } from "../chunks/collapsible-nlp2jvcyuzxmq28o.js";
 export {
   o as Collapsible
 };

package/dist/index.js

@@ -12,7 +12,7 @@ import { C as Ta } from "./chunks/combobox-fq36ye0hstote16x.js";
 import { a as M, D as U, c as N, e as u } from "./chunks/dialog-k3f1fbam6nt96k8x.js";
 import { d as Aa, b as ba } from "./chunks/dialog-k3f1fbam6nt96k8x.js";
 import { D as Sa } from "./chunks/dropdown-zbax0zowy6m9zhmt.js";
-import { C as _a } from "./chunks/collapsible-k8urhi16pg90jvxa.js";
+import { C as _a } from "./chunks/collapsible-nlp2jvcyuzxmq28o.js";
 import { F as Ia, a as La, K as Ra, f as Ea } from "./chunks/field-c0wf94plit2gci59.js";
 import { b as Ma, K as Ua, L as Na, a as Ka, l as ga } from "./chunks/label-c3h9i3y4wiccelt7.js";
 import { I as K } from "./chunks/input-ncfowphv81yq7fyy.js";

package/dist/src/components/collapsible/collapsible.d.ts

@@ -41,7 +41,7 @@ export interface CollapsibleDefaultTriggerProps {
     /** Additional CSS classes */
     className?: string;
 }
-export interface CollapsibleDefaultPanelProps {
+export interface CollapsibleDefaultPanelProps extends BasePanelProps {
     /** Panel content */
     children: ReactNode;
     /** Additional CSS classes */

package/dist/src/components/collapsible/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,eAAO,MAAM,yBAAyB,IAAc,CAAC;AAErD,eAAO,MAAM,iCAAiC,IAAc,CAAC;AAE7D,MAAM,WAAW,4BAA4B;CAAG;AAEhD,wBAAgB,mBAAmB,CAAC,MAAM,GAAE,4BAAiC,UAE5E;AAMD,KAAK,aAAa,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAE3E,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAErE;kBAFQ,eAAe;;;AAUxB,KAAK,gBAAgB,GAAG,wBAAwB,CAC9C,OAAO,eAAe,CAAC,OAAO,CAC/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD,KAAK,cAAc,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD,MAAM,WAAW,8BAA8B;IAC7C,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2CD,MAAM,WAAW,4BAA4B;IAC3C,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,WAAW;;;;;;CAMtB,CAAC;AAMH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,eAAO,MAAM,yBAAyB,IAAc,CAAC;AAErD,eAAO,MAAM,iCAAiC,IAAc,CAAC;AAE7D,MAAM,WAAW,4BAA4B;CAAG;AAEhD,wBAAgB,mBAAmB,CAAC,MAAM,GAAE,4BAAiC,UAE5E;AAMD,KAAK,aAAa,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAE3E,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAErE;kBAFQ,eAAe;;;AAUxB,KAAK,gBAAgB,GAAG,wBAAwB,CAC9C,OAAO,eAAe,CAAC,OAAO,CAC/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD,KAAK,cAAc,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD,MAAM,WAAW,8BAA8B;IAC7C,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2CD,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,WAAW;;;;;;CAMtB,CAAC;AAMH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",

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

@@ -943,3 +943,45 @@ interface GroupProps extends BaseProps {
     expect(props).toEqual({});
   });
 });
+
+describe("SUB_COMPONENT_OVERRIDES", () => {
+  it("declares a Tooltip.Provider entry that passes through to TooltipBase.Provider", async () => {
+    const { SUB_COMPONENT_OVERRIDES, PASSTHROUGH_COMPONENT_DOCS } =
+      await import("./metadata.js");
+
+    expect(SUB_COMPONENT_OVERRIDES.Tooltip).toBeDefined();
+    const tooltipOverrides = SUB_COMPONENT_OVERRIDES.Tooltip;
+    expect(tooltipOverrides).toHaveLength(1);
+
+    const provider = tooltipOverrides[0];
+    expect(provider.name).toBe("Provider");
+    expect(provider.valueName).toBe("TooltipProvider");
+    expect(provider.isPassThrough).toBe(true);
+    expect(provider.baseComponent).toBe("TooltipBase.Provider");
+    expect(provider.propsType).toBeNull();
+
+    // The baseComponent must resolve to a documented passthrough entry so the
+    // merge + lookup path in index.ts produces real docs, not an empty stub.
+    expect(
+      PASSTHROUGH_COMPONENT_DOCS[provider.baseComponent as string],
+    ).toBeDefined();
+  });
+
+  it("entries have the same shape as detectSubComponents() results", async () => {
+    const { SUB_COMPONENT_OVERRIDES } = await import("./metadata.js");
+
+    for (const overrides of Object.values(SUB_COMPONENT_OVERRIDES)) {
+      for (const entry of overrides) {
+        // Required fields of SubComponentConfig.
+        expect(typeof entry.name).toBe("string");
+        expect(typeof entry.valueName).toBe("string");
+        expect(typeof entry.description).toBe("string");
+        expect(typeof entry.isPassThrough).toBe("boolean");
+        // propsType may be a string or null.
+        expect(
+          entry.propsType === null || typeof entry.propsType === "string",
+        ).toBe(true);
+      }
+    }
+  });
+});

package/scripts/component-registry/index.ts

@@ -44,6 +44,7 @@ import {
   createCacheEntry,
 } from "./cache.js";
 import {
+  toPascalCase,
   toScreamingSnakeCase,
   extractSemanticColors,
   extractBlockDependencies,
@@ -62,6 +63,7 @@ import {
   ADDITIONAL_COMPONENT_PROPS,
   PROP_TYPE_OVERRIDES,
   COMPONENT_STYLING_METADATA,
+  SUB_COMPONENT_OVERRIDES,
 } from "./metadata.js";
 
 // External imports - demo examples from kumo-docs-astro
@@ -585,11 +587,16 @@ async function processComponent(
   const colors = extractSemanticColors(sourcePath);
 
   // Determine examples
+  // Demo metadata keys are derived from file names (e.g. DropdownDemo.tsx → "Dropdown")
+  // which may differ from the component's export name (e.g. "DropdownMenu").
+  // Try the component name first, then fall back to the PascalCase directory name.
   let examples: readonly string[];
   if (config.examples !== undefined) {
     examples = config.examples;
   } else {
-    const extracted = input.storyExamples.get(config.name);
+    const extracted =
+      input.storyExamples.get(config.name) ??
+      input.storyExamples.get(toPascalCase(config.dirName));
     examples = extracted?.aiExamples ?? [];
     if (examples.length > 0 && CLI_FLAGS.verbose) {
       console.log(
@@ -598,14 +605,21 @@ async function processComponent(
     }
   }
 
-  // Detect and process sub-components
+  // Merge SUB_COMPONENT_OVERRIDES after source detection.
+  // Detected entries win on name conflict so source-level patterns aren't masked.
   const detectedSubComponents = detectSubComponents(sourcePath);
+  const subComponentOverrides = SUB_COMPONENT_OVERRIDES[config.name] ?? [];
+  const detectedNames = new Set(detectedSubComponents.map((sc) => sc.name));
+  const mergedSubComponents = [
+    ...detectedSubComponents,
+    ...subComponentOverrides.filter((o) => !detectedNames.has(o.name)),
+  ];
   let subComponentSchemas: Record<string, SubComponentSchema> | undefined;
 
-  if (detectedSubComponents.length > 0) {
+  if (mergedSubComponents.length > 0) {
     subComponentSchemas = {};
 
-    for (const subComp of detectedSubComponents) {
+    for (const subComp of mergedSubComponents) {
       let subProps = extractSubComponentProps(sourcePath, subComp, CLI_FLAGS);
       let description = subComp.description;
       let usageExamples: string[] | undefined;

package/scripts/component-registry/metadata.ts

@@ -8,7 +8,12 @@
  * - Styling metadata for Figma plugin
  */
 
-import type { PropSchema, PassthroughDoc, ComponentStyling } from "./types.js";
+import type {
+  PropSchema,
+  PassthroughDoc,
+  ComponentStyling,
+  SubComponentConfig,
+} from "./types.js";
 
 // =============================================================================
 // Pass-through Component Documentation
@@ -158,6 +163,66 @@ export const PASSTHROUGH_COMPONENT_DOCS: Record<string, PassthroughDoc> = {
 </Combobox.Collection>`,
     ],
   },
+
+  // Tooltip sub-components
+  "TooltipBase.Provider": {
+    description:
+      "Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.",
+    props: {
+      delay: {
+        type: "number",
+        description:
+          "How long to wait (ms) before opening a tooltip once the pointer enters the trigger.",
+        default: "600",
+      },
+      closeDelay: {
+        type: "number",
+        description: "How long to wait (ms) before closing a tooltip.",
+        default: "0",
+      },
+      timeout: {
+        type: "number",
+        description:
+          "Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.",
+        default: "400",
+      },
+    },
+    usageExamples: ["<TooltipProvider>\n  <App />\n</TooltipProvider>"],
+  },
+};
+
+// =============================================================================
+// Sub-Component Overrides
+// =============================================================================
+
+/**
+ * Manual sub-component entries that are merged into the registry alongside
+ * entries detected by `detectSubComponents()` in `sub-components.ts`.
+ *
+ * Use this when a component exposes a related API (e.g., a sibling named
+ * export like `TooltipProvider`) that we want documented as a sub-component
+ * (e.g., `Tooltip.Provider`) for the registry / docs, *without* changing the
+ * component's runtime shape (no `Object.assign`, no attached property).
+ *
+ * Detected sub-components take precedence over overrides with the same
+ * `name`, so a real source-level compound pattern will always win and
+ * prevent silent masking of detector regressions.
+ *
+ * Keyed by the parent component name (e.g., "Tooltip"). Values have the same
+ * shape as `detectSubComponents()` entries so they feed directly into the
+ * existing processing loop in `index.ts`.
+ */
+export const SUB_COMPONENT_OVERRIDES: Record<string, SubComponentConfig[]> = {
+  Tooltip: [
+    {
+      name: "Provider",
+      valueName: "TooltipProvider",
+      propsType: null,
+      description: "Provider sub-component (wraps TooltipBase)",
+      isPassThrough: true,
+      baseComponent: "TooltipBase.Provider",
+    },
+  ],
 };
 
 // =============================================================================
@@ -254,6 +319,161 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
       description: "Callback when collapsed state changes",
     },
   },
+  "DropdownMenu.Item": {
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    variant: {
+      type: '"default" | "danger"',
+      description: "Visual style of the item.",
+      default: '"default"',
+    },
+    selected: {
+      type: "boolean",
+      description: "Shows a check mark indicator when true.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    onClick: {
+      type: "(event: React.MouseEvent) => void",
+      description: "Callback when the item is clicked.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "true",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.LinkItem": {
+    href: {
+      type: "string",
+      description: "URL to navigate to when clicked.",
+    },
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    variant: {
+      type: '"default" | "danger"',
+      description: "Visual style of the item.",
+      default: '"default"',
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    target: {
+      type: "string",
+      description: 'Link target attribute (e.g. "_blank" for new tab).',
+    },
+    render: {
+      type: "ReactElement | ((props, state) => ReactElement)",
+      description:
+        "Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link).",
+    },
+  },
+  "DropdownMenu.Content": {
+    sideOffset: {
+      type: "number",
+      description: "Distance in pixels from the trigger.",
+      default: "8",
+    },
+    container: {
+      type: "PortalContainer",
+      description:
+        "Container element for the portal. Use this to render inside a Shadow DOM or custom container.",
+    },
+  },
+  "DropdownMenu.SubTrigger": {
+    icon: {
+      type: "Icon",
+      description: "Icon displayed before the label.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+  },
+  "DropdownMenu.CheckboxItem": {
+    checked: {
+      type: "boolean",
+      description: "Whether the item is checked.",
+    },
+    defaultChecked: {
+      type: "boolean",
+      description: "Whether the item is initially checked (uncontrolled).",
+      default: "false",
+    },
+    onCheckedChange: {
+      type: "(checked: boolean, event: ChangeEventDetails) => void",
+      description: "Callback when the checked state changes.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "false",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.RadioGroup": {
+    value: {
+      type: "any",
+      description:
+        "The controlled value of the currently selected radio item.",
+    },
+    defaultValue: {
+      type: "any",
+      description: "The initially selected value (uncontrolled).",
+    },
+    onValueChange: {
+      type: "(value: any, event: ChangeEventDetails) => void",
+      description: "Callback when the selected value changes.",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, all radio items in the group are disabled.",
+    },
+  },
+  "DropdownMenu.RadioItem": {
+    value: {
+      type: "any",
+      required: true,
+      description: "The value of this radio item.",
+    },
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "false",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.Label": {
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+  },
   "InputGroup.Addon": {
     align: {
       type: '"start" | "end"',