@cloudflare/kumo 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @cloudflare/kumo
 
+## 2.0.3
+
+### Patch Changes
+
+- 3b36e21: fix(combobox): forward all props from TriggerValue to ComboboxBase.Value, enabling placeholder support and styled placeholder text via data-[placeholder]:text-kumo-placeholder
+- 5d5d810: fix(registry): correct Select component metadata for AI-generated code
+
+  The component registry metadata was incorrectly typing Select's `value`, `defaultValue`, and `onValueChange` props as `string`, causing AI agents to produce broken code when implementing Select with object values (e.g., rendering `object.value` in the trigger instead of the label).
+
+  Changes:
+  - `value` type: `string` → `T` (generic, matches actual component interface)
+  - `defaultValue` type: `string` → `T`
+  - `onValueChange` type: `(value: string) => void` → `(value: T) => void`
+  - Added missing `renderValue` prop: `(value: T) => ReactNode` — required for object values
+  - Added missing `items` prop: supports both `Record<string, string>` and `Array<{ label, value }>` forms
+  - Added missing `isItemEqualToValue` prop: required for object equality comparison
+
+- 62e093c: Gracefully fall back to default variant instead of crashing when an invalid variant prop is passed at runtime. Previously 22 of 25 components would throw `TypeError` on unknown variant values; all 25 now use a shared `resolveVariant()` utility that returns the default config and logs a dev warning.
+
+## 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": [
@@ -2403,6 +2404,7 @@
       "examples": [
         "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={fruits}\n    >\n      <Combobox.TriggerInput placeholder=\"Please select\" />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: string) => (\n            <Combobox.Item key={item} value={item}>\n              {item}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
         "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.TriggerValue className=\"w-[200px]\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
+        "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language | null)}\n      items={languages}\n    >\n      <Combobox.TriggerValue\n        className=\"w-[200px]\"\n        placeholder=\"Select a language\"\n      />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
         "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as ServerLocation | null)}\n      items={servers}\n    >\n      <Combobox.TriggerInput\n        className=\"w-[200px]\"\n        placeholder=\"Select server\"\n      />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(group: ServerLocationGroup) => (\n            <Combobox.Group key={group.value} items={group.items}>\n              <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>\n              <Combobox.Collection>\n                {(item: ServerLocation) => (\n                  <Combobox.Item key={item.value} value={item}>\n                    {item.label}\n                  </Combobox.Item>\n                )}\n              </Combobox.Collection>\n            </Combobox.Group>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
         "<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"Select bots\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">Submit</Button>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        description=\"Select your preferred database\"\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
@@ -2421,6 +2423,7 @@
         "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
+        "text-kumo-placeholder",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -2900,7 +2903,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 +2947,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 +2966,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 +3133,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",
@@ -4457,7 +4612,7 @@
           "description": "Tooltip content displayed next to the label via an info icon."
         },
         "value": {
-          "type": "string",
+          "type": "T",
           "optional": true,
           "description": "Currently selected value (controlled mode)."
         },
@@ -4477,12 +4632,24 @@
           "description": "Error message string or validation error object with `match` key."
         },
         "onValueChange": {
-          "type": "(value: string) => void",
+          "type": "(value: T) => void",
           "description": "Callback when selection changes"
         },
         "defaultValue": {
-          "type": "string",
+          "type": "T",
           "description": "Initial value for uncontrolled mode"
+        },
+        "renderValue": {
+          "type": "(value: T) => ReactNode",
+          "description": "A function that returns a ReactNode to format the selected value in the trigger. Required when using object values. Use `placeholder` for the empty state."
+        },
+        "items": {
+          "type": "Record<string, string> | Array<{ label: ReactNode; value: T }>",
+          "description": "Data structure of items rendered in the popup. Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }` for object/complex values."
+        },
+        "isItemEqualToValue": {
+          "type": "(item: T, value: T) => boolean",
+          "description": "Custom equality function for comparing items. Required when value is an object, since object identity (`===`) won't match across renders."
         }
       },
       "examples": [
@@ -5897,7 +6064,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 +6182,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 +6444,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"