@cloudflare/kumo 1.17.0 → 1.18.0

package/ai/component-registry.md

@@ -16,28 +16,24 @@ Small status label for categorizing or highlighting content.
 
 **Props:**
 
-- `variant`: enum [default: neutral]
+- `variant`: enum [default: primary]
+  - `"primary"`: Primary badge
+  - `"secondary"`: Secondary badge
+  - `"error"`: Error badge
+  - `"warning"`: Warning badge
+  - `"success"`: Success badge
+  - `"destructive"`: Deprecated. Use red instead.
+  - `"info"`: Info badge
+  - `"beta"`: Indicates beta or experimental features
+  - `"outline"`: Bordered badge with transparent background
   - `"red"`: Red badge
-  - `"red-subtle"`: Subtle red badge
-  - `"orange"`: Orange badge
-  - `"orange-subtle"`: Subtle orange badge
-  - `"yellow"`: Yellow badge
-  - `"yellow-subtle"`: Subtle yellow badge
   - `"green"`: Green badge
-  - `"green-subtle"`: Subtle green badge
+  - `"neutral"`: Neutral badge
+  - `"orange"`: Orange badge
+  - `"purple"`: Purple badge
   - `"teal"`: Teal badge
   - `"teal-subtle"`: Subtle teal badge
   - `"blue"`: Blue badge
-  - `"blue-subtle"`: Subtle blue badge
-  - `"neutral"`: Neutral badge
-  - `"neutral-subtle"`: Subtle neutral badge
-  - `"inverted"`: Inverted badge
-  - `"outline"`: Bordered badge with transparent background
-  - `"beta"`: Indicates beta or experimental features
-  - `"primary"`: Deprecated. Use inverted instead.
-  - `"secondary"`: Deprecated. Use neutral instead.
-  - `"destructive"`: Deprecated. Use red instead.
-  - `"success"`: Deprecated. Use green instead.
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `children`: ReactNode
@@ -45,40 +41,39 @@ Small status label for categorizing or highlighting content.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-badge-blue`, `bg-kumo-badge-blue-subtle`, `bg-kumo-badge-green`, `bg-kumo-badge-green-subtle`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-orange-subtle`, `bg-kumo-badge-red`, `bg-kumo-badge-red-subtle`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-subtle`, `bg-kumo-badge-yellow`, `bg-kumo-badge-yellow-subtle`, `bg-kumo-fill`, `border-kumo-brand`, `border-kumo-fill`, `text-kumo-badge-blue-subtle`, `text-kumo-badge-green-subtle`, `text-kumo-badge-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-orange-subtle`, `text-kumo-badge-red-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-badge-yellow-subtle`, `text-kumo-default`, `text-kumo-link`
+`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-tint`, `bg-kumo-warning-tint`, `border-kumo-brand`, `border-kumo-fill`, `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:**
 
 ```tsx
 <div className="flex flex-wrap items-center gap-2">
-      <Badge variant="red">Red</Badge>
-      <Badge variant="orange">Orange</Badge>
-      <Badge variant="yellow">Yellow</Badge>
-      <Badge variant="green">Green</Badge>
-      <Badge variant="teal">Teal</Badge>
-      <Badge variant="blue">Blue</Badge>
-      <Badge variant="neutral">Neutral</Badge>
-      <Badge variant="inverted">Inverted</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
       <Badge variant="outline">Outline</Badge>
       <Badge variant="beta">Beta</Badge>
-      <Badge variant="red-subtle">Red subtle</Badge>
-      <Badge variant="orange-subtle">Orange subtle</Badge>
-      <Badge variant="yellow-subtle">Yellow subtle</Badge>
-      <Badge variant="green-subtle">Green subtle</Badge>
-      <Badge variant="teal-subtle">Teal subtle</Badge>
-      <Badge variant="blue-subtle">Blue subtle</Badge>
-      <Badge variant="neutral-subtle">Neutral subtle</Badge>
     </div>
 ```
 
 ```tsx
-<Badge variant="red">Red</Badge>
+<div className="flex flex-wrap items-center gap-2">
+      <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="red">Red</Badge>
+      <Badge variant="orange">Orange</Badge>
+      <Badge variant="green">Green</Badge>
+      <Badge variant="teal">Teal</Badge>
+      <Badge variant="blue">Blue</Badge>
+      <Badge variant="purple">Purple</Badge>
+    </div>
 ```
 
 ```tsx
 <p className="flex items-center gap-2">
       Workers
-      <Badge variant="blue">New</Badge>
+      <Badge variant="secondary">New</Badge>
     </p>
 ```
 
@@ -388,7 +383,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-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -484,8 +479,8 @@ Checkbox component
 
   **State Classes:**
   - `"default"`:
-    - `focus`: `[&:focus-within>span]:ring-kumo-ring`
-    - `hover`: `[&:hover>span]:ring-kumo-ring`
+    - `focus`: `[&:focus-within>span]:ring-kumo-hairline`
+    - `hover`: `[&:hover>span]:ring-kumo-hairline`
 - `label`: ReactNode
   Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node
 - `labelTooltip`: ReactNode
@@ -509,7 +504,7 @@ Checkbox component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `ring-kumo-contrast`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-contrast`, `ring-kumo-contrast`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -520,8 +515,8 @@ Checkbox component
   - `checked`: `bg-kumo-contrast`, `text-kumo-inverse`
   - `indeterminate`: `bg-kumo-contrast`, `text-kumo-inverse`
   - `error`: `ring-kumo-danger`
-  - `hover`: `ring-kumo-ring`
-  - `focus`: `ring-kumo-ring`
+  - `hover`: `ring-kumo-hairline`
+  - `focus`: `ring-kumo-hairline`
   - `disabled`: `opacity-50`, `cursor-not-allowed`
 - **Icons:**
   - `ph-check` (checked) size 12
@@ -3012,13 +3007,13 @@ Input component
 
   **State Classes:**
   - `"default"`:
-    - `focus`: `focus:ring-kumo-ring`
+    - `focus`: `focus:ring-kumo-hairline`
   - `"error"`:
     - `focus`: `focus:ring-kumo-danger`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -3039,7 +3034,6 @@ Input component
       label="Email"
       placeholder="you@example.com"
       value="invalid-email"
-      variant="error"
       error="Please enter a valid email address"
     />
 ```
@@ -3049,7 +3043,6 @@ Input component
       label="Password"
       type="password"
       value="short"
-      variant="error"
       error={{
         message: "Password must be at least 8 characters",
         match: "tooShort",
@@ -3580,7 +3573,7 @@ Pagination component
 
 **Colors (kumo tokens used):**
 
-`border-kumo-line`, `text-kumo-strong`
+`border-kumo-line`, `ring-kumo-line`, `text-kumo-strong`
 
 **Styling:**
 
@@ -3615,6 +3608,8 @@ Props:
 Controls sub-component
 
 Props:
+- `Note`: ** `"dropdown"` renders an option for every page (required)
+- `pageSelector`: "input" | "dropdown"
 - `className`: string
 
 #### Pagination.Separator
@@ -3694,6 +3689,26 @@ Props:
     </Pagination>
 ```
 
+```tsx
+<Pagination
+      page={page}
+      setPage={setPage}
+      perPage={perPage}
+      totalCount={500}
+    >
+      <Pagination.Info />
+      <Pagination.Separator />
+      <Pagination.PageSize
+        value={perPage}
+        onChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+      />
+      <Pagination.Controls pageSelector="dropdown" />
+    </Pagination>
+```
+
 ```tsx
 <Pagination
       page={page}
@@ -3957,7 +3972,7 @@ Radio — radio button group for single-select choices.  Compound component: `Ra
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-tint`, `border-kumo-danger`, `border-kumo-interact`, `border-kumo-ring`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-tint`, `border-kumo-danger`, `border-kumo-hairline`, `border-kumo-interact`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -4217,7 +4232,7 @@ Select component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-tint`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-line`, `bg-kumo-tint`, `ring-kumo-hairline`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4230,6 +4245,18 @@ This is a compound component. Use these sub-components:
 
 Option sub-component
 
+#### Select.Group
+
+Group sub-component
+
+#### Select.GroupLabel
+
+GroupLabel sub-component
+
+#### Select.Separator
+
+Separator sub-component
+
 
 **Examples:**
 
@@ -4424,6 +4451,93 @@ Option sub-component
     </Select>
 ```
 
+```tsx
+<Select
+      label="Deployment Region"
+      placeholder="Choose a region..."
+      className="w-[250px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Option value="us-east">US East</Select.Option>
+      <Select.Option value="us-west">US West</Select.Option>
+      <Select.Option value="eu-west" disabled>
+        EU West
+      </Select.Option>
+      <Select.Option value="ap-south" disabled>
+        AP South
+      </Select.Option>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Food"
+      placeholder="Pick a food..."
+      className="w-[220px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Group>
+        <Select.GroupLabel>Fruits</Select.GroupLabel>
+        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Option value="banana">Banana</Select.Option>
+        <Select.Option value="cherry">Cherry</Select.Option>
+      </Select.Group>
+      <Select.Separator />
+      <Select.Group>
+        <Select.GroupLabel>Vegetables</Select.GroupLabel>
+        <Select.Option value="carrot">Carrot</Select.Option>
+        <Select.Option value="broccoli">Broccoli</Select.Option>
+        <Select.Option value="spinach">Spinach</Select.Option>
+      </Select.Group>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Server Region"
+      placeholder="Select a region..."
+      className="w-[260px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Group>
+        <Select.GroupLabel>Available</Select.GroupLabel>
+        <Select.Option value="us-east-1">US East (N. Virginia)</Select.Option>
+        <Select.Option value="us-west-2">US West (Oregon)</Select.Option>
+        <Select.Option value="eu-west-1">EU West (Ireland)</Select.Option>
+      </Select.Group>
+      <Select.Separator />
+      <Select.Group>
+        <Select.GroupLabel>Unavailable</Select.GroupLabel>
+        <Select.Option value="ap-south-1" disabled>
+          AP South (Mumbai)
+        </Select.Option>
+        <Select.Option value="sa-east-1" disabled>
+          SA East (São Paulo)
+        </Select.Option>
+      </Select.Group>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Long List Select"
+      description="Tests scrolling behavior with many options"
+      placeholder="Choose an option..."
+      className="w-[220px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      {longListItems.map((item) => (
+        <Select.Option key={item.value} value={item.value}>
+          {item.label}
+        </Select.Option>
+      ))}
+    </Select>
+```
+
 
 ---
 
@@ -4478,7 +4592,7 @@ Password/secret input that masks its value by default and reveals on click. Incl
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-brand`, `bg-kumo-control`, `outline-kumo-ring`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-brand`, `bg-kumo-control`, `outline-kumo-hairline`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -4595,7 +4709,7 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-line`, `bg-kumo-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-line`, `bg-kumo-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5206,16 +5320,8 @@ Props:
 
 ```tsx
 <div className="grid grid-cols-2 gap-x-8 gap-y-4">
-      <Switch
-        label="Default off"
-        checked={false}
-        onCheckedChange={() => {}}
-      />
-      <Switch
-        label="Default on"
-        checked={true}
-        onCheckedChange={() => {}}
-      />
+      <Switch label="Default off" checked={false} onCheckedChange={() => {}} />
+      <Switch label="Default on" checked={true} onCheckedChange={() => {}} />
       <Switch
         label="Neutral off"
         variant="neutral"
@@ -5231,6 +5337,15 @@ Props:
     </div>
 ```
 
+```tsx
+<Switch
+      id="my-custom-switch"
+      label="Custom ID"
+      checked={checked}
+      onCheckedChange={setChecked}
+    />
+```
+
 ```tsx
 <div className="flex flex-col gap-4">
       <Switch
@@ -5285,7 +5400,7 @@ Table — semantic HTML table with styled rows, cells, and selection support.  C
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-ring`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-hairline`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
 
 **Sub-Components:**
 
@@ -5691,7 +5806,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-ring`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5942,7 +6057,7 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger-tint`, `bg-kumo-fill-hover`, `bg-kumo-info-tint`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-info`, `ring-kumo-ring`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-strong`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-fill-hover`, `bg-kumo-info`, `bg-kumo-success`, `bg-kumo-warning`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-strong`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
 
 **Styling:**
 
@@ -6016,6 +6131,31 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
     </TooltipProvider>
 ```
 
+```tsx
+<TooltipProvider>
+      <div className="flex gap-4">
+        <Tooltip content="Opens after 1 second" delay={1000} asChild>
+          <Button variant="secondary">1s open delay</Button>
+        </Tooltip>
+        <Tooltip
+          content="Stays open 500ms after leaving"
+          closeDelay={500}
+          asChild
+        >
+          <Button variant="secondary">500ms close delay</Button>
+        </Tooltip>
+        <Tooltip
+          content="Instant open, stays 1s"
+          delay={0}
+          closeDelay={1000}
+          asChild
+        >
+          <Button variant="secondary">Instant + 1s close</Button>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+```
+
 
 ---
 

package/ai/schemas.ts

@@ -111,7 +111,7 @@ export type Action = z.infer<typeof ActionSchema>;
 // =============================================================================
 
 export const BadgePropsSchema = z.object({
-  variant: z.enum(["red", "red-subtle", "orange", "orange-subtle", "yellow", "yellow-subtle", "green", "green-subtle", "teal", "teal-subtle", "blue", "blue-subtle", "neutral", "neutral-subtle", "inverted", "outline", "beta", "primary", "secondary", "destructive", "success"]).optional(), // Color variant of the badge. - `"red"` / `"red-subtle"` — Red badge - `"orange"` / `"orange-subtle"` — Orange badge - `"yellow"` / `"yellow-subtle"` — Yellow badge - `"green"` / `"green-subtle"` — Green badge (emerald scale) - `"teal"` / `"teal-subtle"` — Teal badge - `"blue"` / `"blue-subtle"` — Blue badge - `"neutral"` / `"neutral-subtle"` — Neutral badge - `"inverted"` — Inverted badge (near-black, white in dark mode) - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features - `"primary"` — **Deprecated.** Use `"inverted"` instead. - `"secondary"` — **Deprecated.** Use `"neutral"` instead. - `"destructive"` — **Deprecated.** Use `"red"` instead. - `"success"` — **Deprecated.** Use `"green"` instead.
+  variant: z.enum(["primary", "secondary", "error", "warning", "success", "destructive", "info", "beta", "outline", "red", "green", "neutral", "orange", "purple", "teal", "teal-subtle", "blue"]).optional(), // Color variant of the badge. Recommended semantic variants: - `"primary"` — Primary badge - `"secondary"` — Secondary badge - `"error"` — Error badge - `"warning"` — Warning badge - `"success"` — Success badge - `"info"` — Info badge Additional token variants: - `"red"`, `"orange"`, `"green"`, `"teal"`, `"blue"`, `"purple"`, `"neutral"` - `"teal-subtle"`, `"neutral-subtle"` - `"inverted"` - `"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.
 });

package/dist/.build-complete

@@ -1 +1 @@
-1775226904078
+1775680314844