@cloudflare/kumo 1.15.0 → 1.17.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", "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
+  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.
   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.
 });
@@ -120,6 +120,7 @@ export const BannerPropsSchema = z.object({
   icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`).
   title: z.string().optional(), // Primary heading text for the banner. Use for i18n string injection.
   description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Secondary description text displayed below the title. Use for i18n string injection.
+  action: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Only used in structured mode (with `title` or `description`).
   text: z.string().optional(),
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
   variant: z.enum(["default", "alert", "error"]).optional(), // Visual style of the banner. - `"default"` — Informational blue banner for general messages - `"alert"` — Warning yellow banner for cautionary messages - `"error"` — Error red banner for critical issues
@@ -140,9 +141,9 @@ export const ButtonPropsSchema = z.object({
   className: z.string().optional(),
   icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon from `@phosphor-icons/react` or a React element. Rendered before children.
   loading: z.boolean().optional(), // Shows a loading spinner and disables interaction.
+  title: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
-  title: z.string().optional(),
   disabled: z.boolean().optional(),
   name: z.string().optional(),
   type: z.enum(["submit", "reset", "button"]).optional(),
@@ -166,6 +167,7 @@ export const CheckboxPropsSchema = z.object({
 export const ClipboardTextPropsSchema = z.object({
   size: z.enum(["sm", "base", "lg"]).optional(), // Size of the clipboard text field. - `"sm"` — Small clipboard text for compact UIs - `"base"` — Default clipboard text size - `"lg"` — Large clipboard text for prominent display
   text: z.string(), // The text to display and copy to clipboard.
+  textToCopy: z.string().optional(), // If provided, this text will be copied to clipboard instead of the `text` prop.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   tooltip: z.unknown().optional(), // Tooltip config. Shows tooltip on hover, anchored toast on click.
   labels: z.unknown().optional(), // Accessible labels for i18n.
@@ -463,6 +465,7 @@ export const ComboboxPropsSchema = z.object({
 export const CommandPalettePropsSchema = z.object({
   open: z.boolean(), // Whether the dialog is open
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child content - typically one or more Panel components
+  container: z.unknown().optional(), // Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
 });
 
 export const DatePickerPropsSchema = z.object({
@@ -482,6 +485,7 @@ export const DateRangePickerPropsSchema = z.object({
 export const DialogPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Dialog content (typically Title, Description, Close, and action buttons).
+  container: z.unknown().optional(), // Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
   size: z.enum(["base", "sm", "lg", "xl"]).optional(), // Dialog width. - `"sm"` — Small (min 288px) for simple confirmations - `"base"` — Default (min 384px) - `"lg"` — Large (min 512px) for complex content - `"xl"` — Extra large (min 768px) for detailed views
 });
 
@@ -659,10 +663,28 @@ export const SensitiveInputPropsSchema = z.object({
   error: z.unknown().optional(), // Error message or validation error object
 });
 
+export const SidebarPropsSchema = z.object({
+  defaultOpen: z.boolean().optional(), // Initial open state when uncontrolled.
+  open: z.boolean().optional(), // Controlled open state.
+  variant: z.enum(["sidebar", "floating", "inset"]).optional(), // Sidebar layout variant.
+  side: z.enum(["left", "right"]).optional(), // Which side the sidebar is on.
+  collapsible: z.enum(["icon", "offcanvas", "none"]).optional(),
+  resizable: z.boolean().optional(), // Enable drag-to-resize on the sidebar edge.
+  defaultWidth: z.number().optional(), // Initial width in pixels when resizable.
+  minWidth: z.number().optional(), // Minimum width in pixels when resizing.
+  maxWidth: z.number().optional(), // Maximum width in pixels when resizing.
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content — typically `<Sidebar>` + main content.
+  className: z.string().optional(), // Additional CSS classes for the wrapper div.
+});
+
 export const SurfacePropsSchema = z.object({
-  as: z.unknown().optional(), // The HTML element type to render as (e.g. `"div"`, `"section"`, `"article"`).
-  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 surface.
+  as: z.unknown().optional(),
+  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(),
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
 });
 
 export const SwitchPropsSchema = z.object({
@@ -688,6 +710,7 @@ export const SwitchPropsSchema = z.object({
 export const TablePropsSchema = z.object({
   layout: z.enum(["auto", "fixed"]).optional(),
   variant: z.enum(["default", "selected"]).optional(),
+  sticky: z.enum(["left", "right"]).optional(),
   className: z.string().optional(), // Additional CSS classes
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
 });
@@ -708,6 +731,7 @@ export const TextPropsSchema = z.object({
   variant: z.enum(["heading1", "heading2", "heading3", "body", "secondary", "success", "error", "mono", "mono-secondary"]).optional(), // Text style variant. Determines color, font, and weight. - `"heading1"` — Large page title (30px, semibold) - `"heading2"` — Section title (24px, semibold) - `"heading3"` — Subsection title (18px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
   size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Text size (only applies to body/secondary/success/error variants). - `"xs"` — 12px - `"sm"` — 14px - `"base"` — 16px - `"lg"` — 18px
   bold: z.boolean().optional(), // Whether to use bold font weight (only applies to body variants).
+  truncate: z.boolean().optional(), // Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
   as: z.unknown().optional(), // The HTML element type to render as (e.g. `"span"`, `"p"`, `"h1"`). Auto-selected based on variant if omitted.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Text content.
 });
@@ -732,7 +756,7 @@ export const TooltipPropsSchema = z.object({
 /**
  * All valid component type names
  */
-export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
+export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Sidebar" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
 
 export const KumoComponentTypeSchema = z.enum([
   "Badge",
@@ -766,6 +790,7 @@ export const KumoComponentTypeSchema = z.enum([
   "Radio",
   "Select",
   "SensitiveInput",
+  "Sidebar",
   "Surface",
   "Switch",
   "Table",
@@ -810,6 +835,7 @@ export const ComponentPropsSchemas = {
   Radio: RadioPropsSchema,
   Select: SelectPropsSchema,
   SensitiveInput: SensitiveInputPropsSchema,
+  Sidebar: SidebarPropsSchema,
   Surface: SurfacePropsSchema,
   Switch: SwitchPropsSchema,
   Table: TablePropsSchema,
@@ -873,4 +899,4 @@ export function validateUITree(tree: unknown): SafeParseResult<UITree> {
 /**
  * List of all component names (for catalog generation)
  */
-export const KUMO_COMPONENT_NAMES = ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"] as const;
+export const KUMO_COMPONENT_NAMES = ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Sidebar", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"] as const;

package/dist/.build-complete

@@ -1 +1 @@
-1774017754473
+1775226904078