@cloudflare/kumo 1.9.0 → 1.10.0

package/ai/component-registry.md

@@ -20,6 +20,7 @@ Small status label for categorizing or highlighting content.
   - `"primary"`: Default high-emphasis badge for important labels
   - `"secondary"`: Subtle badge for secondary information
   - `"destructive"`: Error or danger state indicator
+  - `"success"`: Success or positive state indicator
   - `"outline"`: Bordered badge with transparent background
   - `"beta"`: Indicates beta or experimental features
 - `className`: string
@@ -29,7 +30,7 @@ Small status label for categorizing or highlighting content.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-contrast`, `bg-kumo-danger`, `bg-kumo-fill`, `border-kumo-brand`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-link`
+`bg-kumo-contrast`, `bg-kumo-danger`, `bg-kumo-fill`, `bg-kumo-success`, `border-kumo-brand`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-link`
 
 **Examples:**
 
@@ -38,6 +39,7 @@ Small status label for categorizing or highlighting content.
       <Badge variant="primary">Primary</Badge>
       <Badge variant="secondary">Secondary</Badge>
       <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="success">Success</Badge>
       <Badge variant="outline">Outline</Badge>
       <Badge variant="beta">Beta</Badge>
     </div>
@@ -1171,6 +1173,12 @@ Combobox — autocomplete input with filterable dropdown list.  Compound compone
 
 **Props:**
 
+- `size`: enum [default: base]
+  Size of the combobox trigger. Matches Input component sizes.
+- `"xs"` — Extra small for compact UIs (h-5 / 20px)
+- `"sm"` — Small for secondary fields (h-6.5 / 26px)
+- `"base"` — Default size (h-9 / 36px)
+- `"lg"` — Large for prominent fields (h-10 / 40px)
 - `inputSide`: enum [default: right]
   - `"right"`: Input positioned inline to the right of chips
   - `"top"`: Input positioned above chips
@@ -1201,7 +1209,7 @@ Combobox — autocomplete input with filterable dropdown list.  Compound compone
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `fill-kumo-ring`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-control`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `border-kumo-line`, `fill-kumo-ring`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -1435,6 +1443,90 @@ Usage:
     </div>
 ```
 
+```tsx
+<div className="flex flex-wrap items-center gap-4">
+      <Combobox
+        size="sm"
+        value={smValue}
+        onValueChange={(v) => setSmValue(v as string | null)}
+        items={fruits.slice(0, 8)}
+      >
+        <Combobox.TriggerInput placeholder="Small (sm)" />
+        <Combobox.Content>
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: string) => (
+              <Combobox.Item key={item} value={item}>
+                {item}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+      <Combobox
+        size="base"
+        value={baseValue}
+        onValueChange={(v) => setBaseValue(v as string | null)}
+        items={fruits.slice(0, 8)}
+      >
+        <Combobox.TriggerInput placeholder="Base (default)" />
+        <Combobox.Content>
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: string) => (
+              <Combobox.Item key={item} value={item}>
+                {item}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap items-center gap-4">
+      <Combobox
+        size="sm"
+        value={smValue}
+        onValueChange={(v) => setSmValue(v as Language)}
+        items={languages}
+      >
+        <Combobox.TriggerValue className="w-[160px]" />
+        <Combobox.Content>
+          <Combobox.Input placeholder="Search" />
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: Language) => (
+              <Combobox.Item key={item.value} value={item}>
+                {item.emoji} {item.label}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+      <Combobox
+        size="base"
+        value={baseValue}
+        onValueChange={(v) => setBaseValue(v as Language)}
+        items={languages}
+      >
+        <Combobox.TriggerValue className="w-[180px]" />
+        <Combobox.Content>
+          <Combobox.Input placeholder="Search" />
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: Language) => (
+              <Combobox.Item key={item.value} value={item}>
+                {item.emoji} {item.label}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+    </div>
+```
+
 
 ---
 
@@ -1474,7 +1566,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
       <CommandPalette.Root
         open={open}
         onOpenChange={setOpen}
-        items={sampleGroups}
+        items={filteredGroups}
         value={search}
         onValueChange={setSearch}
         itemToStringValue={(group) => group.label}
@@ -1488,7 +1580,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
         <CommandPalette.List>
           <CommandPalette.Results>
             {(group: CommandGroup) => (
-              <CommandPalette.Group key={group.id}>
+              <CommandPalette.Group key={group.id} items={group.items}>
                 <CommandPalette.GroupLabel>
                   {group.label}
                 </CommandPalette.GroupLabel>
@@ -1577,7 +1669,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
       <CommandPalette.Root
         open={open}
         onOpenChange={setOpen}
-        items={loading ? [] : sampleGroups}
+        items={loading ? [] : filteredGroups}
         value={search}
         onValueChange={setSearch}
         itemToStringValue={(group) => group.label}
@@ -1591,7 +1683,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
             <>
               <CommandPalette.Results>
                 {(group: CommandGroup) => (
-                  <CommandPalette.Group key={group.id}>
+                  <CommandPalette.Group key={group.id} items={group.items}>
                     <CommandPalette.GroupLabel>
                       {group.label}
                     </CommandPalette.GroupLabel>
@@ -2092,6 +2184,48 @@ Close sub-component
     </Dialog.Root>
 ```
 
+```tsx
+<Dialog.Root role="alertdialog">
+      <Dialog.Trigger
+        render={(p) => (
+          <Button {...p} variant="destructive">
+            Delete Account
+          </Button>
+        )}
+      />
+      <Dialog className="p-8">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20">
+            <Warning size={20} className="text-kumo-danger" weight="fill" />
+          </div>
+          <Dialog.Title className="text-xl font-semibold">
+            Delete Account?
+          </Dialog.Title>
+        </div>
+        <Dialog.Description className="text-kumo-subtle">
+          This action cannot be undone. All your data will be permanently
+          removed from our servers. Are you sure you want to proceed?
+        </Dialog.Description>
+        <div className="mt-8 flex justify-end gap-2">
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="secondary" {...props}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Dialog.Close
+            render={(props) => (
+              <Button variant="destructive" {...props}>
+                Delete Account
+              </Button>
+            )}
+          />
+        </div>
+      </Dialog>
+    </Dialog.Root>
+```
+
 ```tsx
 <Dialog.Root>
       <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />
@@ -3290,7 +3424,7 @@ Progress bar showing a measured value within a known range (e.g. quota usage).
 <Meter
       label="Upload progress"
       value={80}
-      indicatorClassName="from-green-500 via-green-500 to-green-500"
+      indicatorClassName="from-kumo-success via-kumo-success to-kumo-success"
     />
 ```
 
@@ -3817,7 +3951,7 @@ Select component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `bg-kumo-overlay`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`
+`bg-kumo-control`, `bg-kumo-overlay`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -3833,17 +3967,53 @@ Option sub-component
 
 **Examples:**
 
+```tsx
+<div className="flex gap-2">
+      <Select
+        className="w-[200px]"
+        value={value}
+        onValueChange={(v) => setValue(v ?? "apple")}
+        items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
+      />
+
+      <Select
+        value={value}
+        className="w-[200px]"
+        onValueChange={(v) => setValue(v ?? "apple")}
+        items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
+      >
+        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Option value="banana">Banana</Select.Option>
+        <Select.Option value="cherry">Cherry</Select.Option>
+      </Select>
+    </div>
+```
+
 ```tsx
 <Select
       className="w-[200px]"
       value={value}
-      onValueChange={(v) => setValue(v ?? "apple")}
-      items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
-    >
-      <Select.Option value="apple">Apple</Select.Option>
-      <Select.Option value="banana">Banana</Select.Option>
-      <Select.Option value="cherry">Cherry</Select.Option>
-    </Select>
+      onValueChange={(v) => setValue(v as string)}
+      items={{
+        bug: "Bug",
+        documentation: "Documentation",
+        feature: "Feature",
+      }}
+    />
+```
+
+```tsx
+<Select
+      className="w-[200px]"
+      value={value}
+      placeholder="Please select"
+      onValueChange={(v) => setValue(v as string | null)}
+      items={[
+        { value: "bug", label: "Bug" },
+        { value: "documentation", label: "Documentation" },
+        { value: "feature", label: "Feature" },
+      ]}
+    />
 ```
 
 ```tsx
@@ -3876,13 +4046,8 @@ Option sub-component
       value={value}
       onValueChange={(v) => setValue(v as string | null)}
       placeholder="Please select"
-    >
-      {data?.map((item) => (
-        <Select.Option key={item} value={item}>
-          {item}
-        </Select.Option>
-      ))}
-    </Select>
+      items={items}
+    />
 ```
 
 ```tsx
@@ -4229,7 +4394,7 @@ Table — semantic HTML table with styled rows, cells, and selection support.  C
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-ring`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-ring`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
 
 **Sub-Components:**
 
@@ -4337,6 +4502,31 @@ ResizeHandle sub-component
     </LayerCard>
 ```
 
+```tsx
+<LayerCard>
+      <LayerCard.Primary className="p-0">
+        <Table>
+          <Table.Header variant="compact">
+            <Table.Row>
+              <Table.Head>Subject</Table.Head>
+              <Table.Head>From</Table.Head>
+              <Table.Head>Date</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {emailData.slice(0, 3).map((row) => (
+              <Table.Row key={row.id}>
+                <Table.Cell>{row.subject}</Table.Cell>
+                <Table.Cell>{row.from}</Table.Cell>
+                <Table.Cell>{row.date}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </LayerCard.Primary>
+    </LayerCard>
+```
+
 ```tsx
 <LayerCard>
       <LayerCard.Primary className="p-0">

package/ai/schemas.ts

@@ -111,7 +111,7 @@ export type Action = z.infer<typeof ActionSchema>;
 // =============================================================================
 
 export const BadgePropsSchema = z.object({
-  variant: z.enum(["primary", "secondary", "destructive", "outline", "beta"]).optional(), // Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features
+  variant: z.enum(["primary", "secondary", "destructive", "success", "outline", "beta"]).optional(), // Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered inside the badge.
 });
@@ -444,6 +444,7 @@ export const CollapsiblePropsSchema = z.object({
 });
 
 export const ComboboxPropsSchema = z.object({
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Size of the combobox trigger. Matches Input component sizes. - `"xs"` — Extra small for compact UIs (h-5 / 20px) - `"sm"` — Small for secondary fields (h-6.5 / 26px) - `"base"` — Default size (h-9 / 36px) - `"lg"` — Large for prominent fields (h-10 / 40px)
   inputSide: z.enum(["right", "top"]).optional(), // Position of the text input relative to chips in multi-select mode. - `"right"` — Input inline to the right of chips - `"top"` — Input above chips
   items: z.array(z.unknown()), // Array of items to display in the dropdown
   value: z.array(z.unknown()).optional(), // Currently selected value(s)

package/dist/.build-complete

@@ -1 +1 @@
-1772046030470
+1772718260106