@cloudflare/kumo 2.0.4 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @cloudflare/kumo
 
+## 2.1.0
+
+### Minor Changes
+
+- 8a33813: Create Sankey Chart component
+
+### Patch Changes
+
+- a21cc3a: Fix CommandPalette List bottom ring being clipped by Footer background. Add scroll padding to prevent items from clipping behind rounded corners.
+- 0414c54: Deprecate `to` prop on Link in favor of `href`. The `to` prop is a routing-framework concept that doesn't belong on a presentational component. Use `href` for all link destinations and configure a `LinkProvider` wrapper to bridge to your router. `to` continues to work but emits a dev-mode deprecation warning.
+- 8b12a4c: Allow `LayerCard.Primary` and `LayerCard.Secondary` to accept all standard HTML div attributes, including `data-testid` for testing.
+- 7d8ec27: Set `cursor-default` on Tooltip triggers so disclosure buttons don't appear clickable. Overridable via `className`.
+
+## 2.0.5
+
+### Patch Changes
+
+- 8f8a55d: Export `Combobox.Trigger`, `Combobox.Value`, and `Combobox.Icon` — the raw Base UI primitives for building custom combobox triggers. Use these when you need full control over the trigger's visual treatment (e.g. a sidebar account switcher that renders as a plain button instead of an input-like control).
+
 ## 2.0.4
 
 ### Patch Changes

package/ai/component-registry.json

@@ -2412,7 +2412,8 @@
         "<div className=\"w-80\">\n      <Combobox value={value} onValueChange={setValue} items={items}>\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItemWithDisabled) => (\n              <Combobox.Item\n                key={item.value}\n                value={item}\n                disabled={item.disabled}\n              >\n                <span>\n                  {item.label}\n                  {item.reason && (\n                    <Text variant=\"secondary\" size=\"xs\" as=\"span\">\n                      {\" — \"}\n                      {item.reason}\n                    </Text>\n                  )}\n                </span>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        error={{ message: \"Please select a database\", match: true }}\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>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Small (sm)\" />\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>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Base (default)\" />\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>\n    </div>",
-        "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\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>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\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>\n    </div>"
+        "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\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>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\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>\n    </div>",
+        "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.Trigger\n        render={\n          <Button variant=\"ghost\" size=\"sm\" />\n        }\n      >\n        <Combobox.Value>\n          <span className=\"truncate\">\n            {value.emoji} {value.label}\n          </span>\n        </Combobox.Value>\n        <CaretUpDownIcon size={14} className=\"text-kumo-subtle shrink-0\" />\n      </Combobox.Trigger>\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>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -2522,6 +2523,27 @@
           "usageExamples": [
             "<Combobox.Collection>\n  {(item, index) => (\n    <Combobox.Item key={index} value={item}>\n      {item.label}\n    </Combobox.Item>\n  )}\n</Combobox.Collection>"
           ]
+        },
+        "Trigger": {
+          "name": "Trigger",
+          "description": "Trigger sub-component (wraps ComboboxBase)",
+          "props": {},
+          "isPassThrough": true,
+          "baseComponent": "ComboboxBase.Trigger"
+        },
+        "Value": {
+          "name": "Value",
+          "description": "Value sub-component (wraps ComboboxBase)",
+          "props": {},
+          "isPassThrough": true,
+          "baseComponent": "ComboboxBase.Value"
+        },
+        "Icon": {
+          "name": "Icon",
+          "description": "Icon sub-component (wraps ComboboxBase)",
+          "props": {},
+          "isPassThrough": true,
+          "baseComponent": "ComboboxBase.Icon"
         }
       }
     },
@@ -3801,6 +3823,7 @@
         "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px] p-4\">\n      <p className=\"text-sm text-kumo-subtle\">Quick start guide for new users</p>\n    </LayerCard>",
+        "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary data-testid=\"card-header\">\n        Getting Started\n      </LayerCard.Secondary>\n      <LayerCard.Primary data-testid=\"card-body\">\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
       ],
       "colors": [

package/ai/component-registry.md

@@ -1719,6 +1719,18 @@ Usage:
 </Combobox.Collection>
 ```
 
+#### Combobox.Trigger
+
+Trigger sub-component (wraps ComboboxBase)
+
+#### Combobox.Value
+
+Value sub-component (wraps ComboboxBase)
+
+#### Combobox.Icon
+
+Icon sub-component (wraps ComboboxBase)
+
 
 **Examples:**
 
@@ -2052,6 +2064,38 @@ Usage:
     </div>
 ```
 
+```tsx
+<Combobox
+      value={value}
+      onValueChange={(v) => setValue(v as Language)}
+      items={languages}
+    >
+      <Combobox.Trigger
+        render={
+          <Button variant="ghost" size="sm" />
+        }
+      >
+        <Combobox.Value>
+          <span className="truncate">
+            {value.emoji} {value.label}
+          </span>
+        </Combobox.Value>
+        <CaretUpDownIcon size={14} className="text-kumo-subtle shrink-0" />
+      </Combobox.Trigger>
+      <Combobox.Content>
+        <Combobox.Input placeholder="Search languages" />
+        <Combobox.Empty />
+        <Combobox.List>
+          {(item: Language) => (
+            <Combobox.Item key={item.value} value={item}>
+              {item.emoji} {item.label}
+            </Combobox.Item>
+          )}
+        </Combobox.List>
+      </Combobox.Content>
+    </Combobox>
+```
+
 
 ---
 
@@ -4372,6 +4416,19 @@ Secondary sub-component
     </LayerCard>
 ```
 
+```tsx
+<LayerCard className="w-[250px]">
+      <LayerCard.Secondary data-testid="card-header">
+        Getting Started
+      </LayerCard.Secondary>
+      <LayerCard.Primary data-testid="card-body">
+        <p className="text-sm text-kumo-subtle">
+          Quick start guide for new users
+        </p>
+      </LayerCard.Primary>
+    </LayerCard>
+```
+
 ```tsx
 <div className="flex gap-4">
       <LayerCard className="w-[200px]">

package/dist/.build-complete

@@ -1 +1 @@
-1777983824613
+1778179302418