@cloudflare/kumo 2.5.1 → 2.6.0

package/ai/component-registry.md

@@ -6,7 +6,7 @@
 
 ### Autocomplete
 
-Autocomplete — free-form text input with an optional filtered suggestion list.  Unlike Combobox, the input value is not restricted to items in the list. Use Combobox when the selected value must come from the list.  Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`, `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.  `InputGroup` renders the text input with Input component styling. Pass a `size` prop to `InputGroup` to match the Input component sizes.
+Autocomplete — free-form text input with an optional filtered suggestion list.
 
 **Type:** component
 
@@ -300,7 +300,7 @@ Small status label for categorizing or highlighting content.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-badge-blue`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-purple`, `bg-kumo-badge-red`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-subtle`, `bg-kumo-danger-tint`, `bg-kumo-fill`, `bg-kumo-info-tint`, `bg-kumo-success`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-brand`, `border-kumo-fill`, `ring-kumo-hairline`, `text-kumo-badge-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-link`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-badge-blue`, `bg-kumo-badge-green`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-purple`, `bg-kumo-badge-red`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-subtle`, `bg-kumo-danger-tint`, `bg-kumo-fill`, `bg-kumo-info-tint`, `bg-kumo-success`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-brand`, `border-kumo-fill`, `ring-kumo-hairline`, `text-kumo-badge-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-link`, `text-kumo-success`, `text-kumo-warning`
 
 **Examples:**
 
@@ -321,6 +321,7 @@ Small status label for categorizing or highlighting content.
 <div className="flex flex-wrap items-center gap-2">
       <Badge variant="neutral">Neutral</Badge>
       <Badge variant="red">Red</Badge>
+      <Badge variant="green">Green</Badge>
       <Badge variant="orange">Orange</Badge>
       <Badge variant="teal">Teal</Badge>
       <Badge variant="blue">Blue</Badge>
@@ -628,8 +629,7 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 
   **State Classes:**
   - `"primary"`:
-    - `hover`: `hover:bg-kumo-brand-hover`
-    - `disabled`: `disabled:bg-kumo-brand/50`
+    - `disabled`: `disabled:opacity-50`
   - `"secondary"`:
     - `not-disabled`: `not-disabled:hover:bg-kumo-tint`
     - `disabled`: `disabled:bg-kumo-base/50 disabled:!text-kumo-default/70`
@@ -637,11 +637,13 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
   - `"ghost"`:
     - `hover`: `hover:bg-kumo-tint`
   - `"destructive"`:
-    - `hover`: `hover:bg-kumo-danger/70`
+    - `disabled`: `disabled:opacity-50`
   - `"secondary-destructive"`:
-    - `not-disabled`: `not-disabled:hover:bg-kumo-base`
+    - `not-disabled`: `not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30`
     - `disabled`: `disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70`
     - `data-state`: `data-[state=open]:bg-kumo-base`
+  - `"outline"`:
+    - `not-disabled`: `not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25`
 - `children`: ReactNode
 - `className`: string
 - `icon`: ReactNode
@@ -658,7 +660,7 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-hairline`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-tint`, `ring-kumo-brand`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -1462,7 +1464,7 @@ Props:
 
 ### Collapsible
 
-Collapsible — a composable disclosure component for showing/hiding content.  Built on Base UI's Collapsible with full composition support.  ## Basic Usage  ```tsx const [open, setOpen] = useState(false);  <Collapsible.Root open={open} onOpenChange={setOpen}> <Collapsible.Trigger render={<Button variant="ghost" />}> Show details </Collapsible.Trigger> <Collapsible.Panel className="mt-2"> <Text>Hidden content revealed when expanded.</Text> </Collapsible.Panel> </Collapsible.Root> ```  ## With Default Styling  Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:  ```tsx <Collapsible.Root> <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel> <Text>Content with border-left accent</Text> </Collapsible.DefaultPanel> </Collapsible.Root> ```  ## Controlled Accordion Pattern  ```tsx const [activeIndex, setActiveIndex] = useState<number | null>(null);  {items.map((item, i) => ( <Collapsible.Root key={i} open={activeIndex === i} onOpenChange={(open) => setActiveIndex(open ? i : null)} > <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel> </Collapsible.Root> ))} ```
+Collapsible — a composable disclosure component for showing/hiding content.
 
 **Type:** component
 
@@ -1613,7 +1615,7 @@ Props:
 
 ### Combobox
 
-Combobox — autocomplete input with filterable dropdown list.  Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`, `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`, `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.
+Combobox — autocomplete input with filterable dropdown list.
 
 **Type:** component
 
@@ -2117,7 +2119,7 @@ Icon sub-component (wraps ComboboxBase)
 
 ### CommandPalette
 
-CommandPalette — accessible command palette / spotlight search overlay.  Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`), `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`, `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.  Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.
+CommandPalette — accessible command palette / spotlight search overlay.
 
 **Type:** component
 
@@ -2422,7 +2424,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
 
 ### DatePicker
 
-DatePicker — a date selection calendar.  Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.
+DatePicker — a date selection calendar.
 
 **Type:** component
 
@@ -2601,7 +2603,7 @@ DatePicker — a date selection calendar.  Built on [react-day-picker](https://d
 
 ### DateRangePicker
 
-DateRangePicker — dual-calendar date range selector.  Renders two side-by-side month calendars with click-to-select start/end dates, hover preview of the range, a timezone footer, and a reset button.
+DateRangePicker — dual-calendar date range selector.
 
 **Type:** component
 
@@ -3026,7 +3028,7 @@ Close sub-component
 
 ### DropdownMenu
 
-DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.
+DropdownMenu — accessible dropdown menu anchored to a trigger.
 
 **Type:** component
 
@@ -4351,7 +4353,7 @@ Description sub-component
 
 ### Label
 
-Label component for form fields.  Provides a standardized way to display labels with optional indicators: - Optional indicator: gray "(optional)" text when `showOptional={true}` - Tooltip: info icon with hover tooltip for additional context
+Label component for form fields.
 
 **Type:** component
 
@@ -4695,7 +4697,7 @@ Animated circular spinner for indicating loading states.
 
 ### MenuBar
 
-MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.  Each option renders as a `<button>` with a Tooltip. The active option is visually highlighted with an elevated background.
+MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.
 
 **Type:** component
 
@@ -5291,7 +5293,7 @@ Close sub-component
 
 ### Radio
 
-Radio — radio button group for single-select choices.  Compound component: `Radio.Group` (with built-in Fieldset), `Radio.Item`, and `Radio.Legend`. Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.
+Radio — radio button group for single-select choices.
 
 **Type:** component
 
@@ -5301,12 +5303,9 @@ Radio — radio button group for single-select choices.  Compound component: `Ra
 
 **Props:**
 
-- `legend`: string
-  Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead.
-- `children`: ReactNode
-  Child Radio.Item components (and optionally a Radio.Legend)
-- `orientation`: enum
-  Layout direction of the radio items
+- `variant`: enum [default: default]
+  - `"default"`: Default radio appearance
+  - `"error"`: Error state for validation failures
 - `appearance`: enum [default: default]
   - `"default"`: Standard inline radio item
   - `"card"`: Choice card appearance with border, padding, and highlighted selection state
@@ -5314,20 +5313,16 @@ Radio — radio button group for single-select choices.  Compound component: `Ra
   **State Classes:**
   - `"card"`:
     - `hover`: `hover:bg-kumo-tint`
-- `error`: string
-  Error message for the group
-- `description`: ReactNode
-  Helper text for the group
-- `value`: string
-  Value of the radio that should be selected (controlled)
-- `disabled`: boolean
-  Whether all radios in the group are disabled
-- `controlPosition`: enum
-  Position of radio control relative to label: "start" puts radio before label, "end" puts label before radio. Defaults to "start" for default appearance and "end" for card appearance.
-- `name`: string
-  Form submission name for the radio group
 - `className`: string
   Additional CSS classes
+- `children`: ReactNode
+  Child elements
+- `value`: T
+  The controlled value of the selected radio item.
+- `defaultValue`: T
+  The uncontrolled initial value of the selected radio item.
+- `onValueChange`: (value: T, eventDetails: RadioGroupChangeEventDetails) => void
+  Callback fired when the selected value changes. The second argument carries native event details about the interaction.
 
 **Colors (kumo tokens used):**
 
@@ -5346,18 +5341,9 @@ Item sub-component
 Group sub-component
 
 Props:
-- `legend`: string
-- `children`: ReactNode (required)
-- `orientation`: "vertical" | "horizontal"
-- `appearance`: KumoRadioAppearance
-- `error`: string
-- `description`: ReactNode
-- `value`: string
-- `disabled`: boolean
-- `label`: "start" puts radio before label (required)
-- `controlPosition`: RadioControlPosition
-- `name`: string
-- `className`: string
+- `value`: T - The controlled value of the selected radio item.
+- `defaultValue`: T - The uncontrolled initial value of the selected radio item.
+- `onValueChange`: (value: T, eventDetails: RadioGroupChangeEventDetails) => void - Callback fired when the selected value changes. The second argument carries native event details about the interaction.
 
 #### Radio.Legend
 
@@ -5562,6 +5548,29 @@ Props:
     </Radio.Group>
 ```
 
+```tsx
+<div className="grid grid-cols-2 gap-6">
+      <Radio.Group<number>
+        legend="Items per page"
+        value={pageSize}
+        onValueChange={setPageSize}
+      >
+        <Radio.Item<number> label="10" value={10} />
+        <Radio.Item<number> label="25" value={25} />
+        <Radio.Item<number> label="50" value={50} />
+      </Radio.Group>
+      <Radio.Group<ThemeType>
+        legend="Theme"
+        value={theme}
+        onValueChange={setTheme}
+      >
+        <Radio.Item<ThemeType> label="Light" value={ThemeType.light} />
+        <Radio.Item<ThemeType> label="Dark" value={ThemeType.dark} />
+        <Radio.Item<ThemeType> label="System" value={ThemeType.system} />
+      </Radio.Group>
+    </div>
+```
+
 ```tsx
 <Radio.Group
       legend="Choose a plan"
@@ -6151,7 +6160,7 @@ Password/secret input that masks its value by default and reveals on click. Incl
 
 ### Sidebar
 
-Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.
+Sidebar — responsive navigation panel with expand/collapse support.
 
 **Type:** component
 
@@ -7174,7 +7183,7 @@ Props:
 
 ### Table
 
-Table — semantic HTML table with styled rows, cells, and selection support.  Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`, `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.
+Table — semantic HTML table with styled rows, cells, and selection support.
 
 **Type:** component
 
@@ -7629,7 +7638,7 @@ ResizeHandle sub-component
 
 ### TableOfContents
 
-TableOfContents — presentational compound component for section navigation.  Purely visual; all interaction logic (scroll tracking, active state management) is left to the consumer.
+TableOfContents — presentational compound component for section navigation.
 
 **Type:** component
 
@@ -8109,7 +8118,7 @@ Text component
 
 ### Toasty
 
-Toasty — toast notification provider and viewport.  Renders a `Toast.Provider` with a fixed-position viewport in the bottom-right corner. Toasts stack with smooth enter/exit animations, swipe-to-dismiss, and expand-on-hover.  Built on `@base-ui/react/toast`.
+Toasty — toast notification provider and viewport.
 
 **Type:** component
 
@@ -8146,6 +8155,117 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 ```
 
 
+---
+
+### Toolbar
+
+Toolbar component
+
+**Type:** component
+
+**Import:** `import { Toolbar } from "@cloudflare/kumo";`
+
+**Category:** Other
+
+**Props:**
+
+- `disabled`: boolean
+- `orientation`: ToolbarRoot.Orientation
+  The orientation of the toolbar.
+- `loopFocus`: boolean
+  If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
+- `id`: string
+- `lang`: string
+- `title`: string
+- `className`: string | object
+  CSS class applied to the element, or a function that returns a class based on the component's state.
+- `render`: ReactNode
+  Allows you to replace the component's HTML element with a different tag, or compose it with another component.
+
+Accepts a `ReactElement` or a function that returns the element to render.
+- `children`: ReactNode
+  Toolbar controls rendered as one grouped card.
+- `size`: enum [default: base]
+  - `"xs"`: Extra small toolbar for compact UIs
+  - `"sm"`: Small toolbar for secondary controls
+  - `"base"`: Default toolbar size
+  - `"lg"`: Large toolbar for prominent controls
+
+**Colors (kumo tokens used):**
+
+`bg-kumo-control`, `border-kumo-line`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-line`
+
+**Sub-Components:**
+
+This is a compound component. Use these sub-components:
+
+#### Toolbar.Button
+
+Button sub-component
+
+#### Toolbar.Input
+
+Input sub-component
+
+#### Toolbar.InputGroup
+
+InputGroup sub-component
+
+
+**Examples:**
+
+```tsx
+<Toolbar className="w-full max-w-md">
+      <Toolbar.InputGroup aria-label="Search DNS records" className="flex-1">
+        <InputGroup.Addon>
+          <MagnifyingGlassIcon />
+        </InputGroup.Addon>
+        <InputGroup.Input placeholder="Search DNS records" />
+      </Toolbar.InputGroup>
+      <Toolbar.Button icon={FunnelSimpleIcon} aria-label="Filter" />
+      <Toolbar.Button icon={GearSixIcon} aria-label="Settings" />
+    </Toolbar>
+```
+
+```tsx
+<div className="grid gap-3">
+      {(["xs", "sm", "base", "lg"] as const).map((size) => (
+        <div key={size} className="flex items-center gap-3">
+          <span className="w-10 text-sm text-kumo-subtle">{size}</span>
+          <Toolbar size={size} className="w-fit">
+            <Toolbar.Input aria-label={`${size} search`} placeholder="Search..." />
+            <Toolbar.Button>Apply</Toolbar.Button>
+          </Toolbar>
+        </div>
+      ))}
+    </div>
+```
+
+```tsx
+<Toolbar className="w-full max-w-lg">
+      <Toolbar.InputGroup aria-label="Worker subdomain" className="flex-1">
+        <InputGroup.Input placeholder="my-worker" />
+        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
+      </Toolbar.InputGroup>
+      <Toolbar.Button>Visit</Toolbar.Button>
+    </Toolbar>
+```
+
+```tsx
+<Toolbar>
+      <Toolbar.Button icon={UploadSimpleIcon}>Upload</Toolbar.Button>
+      <Toolbar.Button icon={DownloadSimpleIcon}>Download</Toolbar.Button>
+    </Toolbar>
+```
+
+```tsx
+<Toolbar className="w-full max-w-lg">
+      <Toolbar.Input aria-label="Search records" className="flex-1" placeholder="Search" />
+      <Toolbar.Button icon={MagnifyingGlassIcon} aria-label="Search" />
+    </Toolbar>
+```
+
+
 ---
 
 ### Tooltip
@@ -8327,7 +8447,7 @@ Multi-line textarea input with Input variants and InputArea-specific dimensions
 ## Quick Reference
 
 **Components by Category:**
-- **Other:** Autocomplete, CloudflareLogo, DatePicker, Label, Link, SensitiveInput, Sidebar, Table, TableOfContents, DeleteResource
+- **Other:** Autocomplete, CloudflareLogo, DatePicker, Label, Link, SensitiveInput, Sidebar, Table, TableOfContents, Toolbar, DeleteResource
 - **Display:** Badge, Breadcrumbs, Code, Collapsible, Empty, LayerCard, Meter, Text
 - **Feedback:** Banner, Loader, Toasty
 - **Action:** Button, ClipboardText

package/ai/schemas.ts

@@ -641,17 +641,13 @@ export const PopoverPropsSchema = z.object({
 });
 
 export const RadioPropsSchema = z.object({
-  legend: z.string().optional(), // Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child Radio.Item components (and optionally a Radio.Legend)
-  orientation: z.enum(["vertical", "horizontal"]).optional(), // Layout direction of the radio items
-  appearance: z.enum(["default", "card"]).optional(), // Visual appearance applied to all Radio.Item children. - `"default"` — Standard inline radio items - `"card"` — Choice card with border, padding, and highlighted selection state Individual items can override this with their own `appearance` prop.
-  error: z.string().optional(), // Error message for the group
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text for the group
-  value: z.string().optional(), // Value of the radio that should be selected (controlled)
-  disabled: z.boolean().optional(), // Whether all radios in the group are disabled
-  controlPosition: z.enum(["start", "end"]).optional(), // Position of radio control relative to label: "start" puts radio before label, "end" puts label before radio. Defaults to "start" for default appearance and "end" for card appearance.
-  name: z.string().optional(), // Form submission name for the radio group
+  variant: z.enum(["default", "error"]).optional(),
+  appearance: z.enum(["default", "card"]).optional(),
   className: z.string().optional(), // Additional CSS classes
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  value: z.unknown().optional(), // The controlled value of the selected radio item.
+  defaultValue: z.unknown().optional(), // The uncontrolled initial value of the selected radio item.
+  onValueChange: z.unknown().optional(), // Callback fired when the selected value changes. The second argument carries native event details about the interaction.
 });
 
 export const SelectPropsSchema = z.object({
@@ -793,6 +789,19 @@ export const ToastyPropsSchema = z.object({
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
 });
 
+export const ToolbarPropsSchema = z.object({
+  disabled: z.boolean().optional(),
+  orientation: z.unknown().optional(), // The orientation of the toolbar.
+  loopFocus: z.boolean().optional(), // If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
+  className: z.unknown().optional(), // CSS class applied to the element, or a function that returns a class based on the component's state.
+  render: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Toolbar controls rendered as one grouped card.
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Locks every toolbar item to this size.
+});
+
 export const TooltipPropsSchema = z.object({
   side: z.enum(["top", "bottom", "left", "right"]).optional(),
   className: z.string().optional(), // Additional CSS classes
@@ -807,7 +816,7 @@ export const TooltipPropsSchema = z.object({
 /**
  * All valid component type names
  */
-export type KumoComponentType = "Autocomplete" | "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "InputGroup" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Sidebar" | "Surface" | "Switch" | "Table" | "TableOfContents" | "Tabs" | "Text" | "Toasty" | "Tooltip";
+export type KumoComponentType = "Autocomplete" | "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "InputGroup" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Sidebar" | "Surface" | "Switch" | "Table" | "TableOfContents" | "Tabs" | "Text" | "Toasty" | "Toolbar" | "Tooltip";
 
 export const KumoComponentTypeSchema = z.enum([
   "Autocomplete",
@@ -851,6 +860,7 @@ export const KumoComponentTypeSchema = z.enum([
   "Tabs",
   "Text",
   "Toasty",
+  "Toolbar",
   "Tooltip",
 ]);
 
@@ -899,6 +909,7 @@ export const ComponentPropsSchemas = {
   Tabs: TabsPropsSchema,
   Text: TextPropsSchema,
   Toasty: ToastyPropsSchema,
+  Toolbar: ToolbarPropsSchema,
   Tooltip: TooltipPropsSchema,
 } as const;
 
@@ -956,4 +967,4 @@ export function validateUITree(tree: unknown): SafeParseResult<UITree> {
 /**
  * List of all component names (for catalog generation)
  */
-export const KUMO_COMPONENT_NAMES = ["Autocomplete", "Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "InputGroup", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Sidebar", "Surface", "Switch", "Table", "TableOfContents", "Tabs", "Text", "Toasty", "Tooltip"] as const;
+export const KUMO_COMPONENT_NAMES = ["Autocomplete", "Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "InputGroup", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Sidebar", "Surface", "Switch", "Table", "TableOfContents", "Tabs", "Text", "Toasty", "Toolbar", "Tooltip"] as const;

package/dist/.build-complete

@@ -1 +1 @@
-1780927666222
+1782153248772