@cloudflare/kumo 1.18.0 → 2.0.0

package/ai/schemas.ts

@@ -110,6 +110,19 @@ export type Action = z.infer<typeof ActionSchema>;
 // Component Props Schemas
 // =============================================================================
 
+export const AutocompletePropsSchema = z.object({
+  items: z.array(z.unknown()), // Array of items to display in the dropdown
+  value: z.array(z.unknown()).optional(), // The controlled input value
+  open: z.boolean().optional(), // Whether the popup is open (controlled)
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Autocomplete content (input group, popup content)
+  className: z.string().optional(), // Additional CSS classes
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content (enables Field wrapper)
+  required: z.boolean().optional(), // Whether the field is required
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the field
+  error: z.unknown().optional(), // Error message or validation error object
+});
+
 export const BadgePropsSchema = z.object({
   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()`.
@@ -161,7 +174,6 @@ export const CheckboxPropsSchema = z.object({
   name: z.string().optional(), // Name for form submission
   required: z.boolean().optional(), // Whether the field is required
   className: z.string().optional(), // Additional class name
-  onValueChange: z.unknown().optional(), // Callback when checkbox value changes
 });
 
 export const ClipboardTextPropsSchema = z.object({
@@ -438,10 +450,7 @@ export const CodePropsSchema = z.object({
 });
 
 export const CollapsiblePropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
-  label: z.string(), // Text label displayed in the trigger button
-  open: z.boolean().optional(), // Whether the collapsible content is visible
-  className: z.string().optional(), // Additional CSS classes for the content panel
+  className: z.string().optional(), // Additional CSS classes
   onOpenChange: z.unknown().optional(), // Callback when collapsed state changes
 });
 
@@ -535,6 +544,21 @@ export const InputPropsSchema = z.object({
 
 export const InputAreaPropsSchema = z.object({});
 
+export const InputGroupPropsSchema = z.object({
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The label content — can be a string or any React node.
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the control (hidden when `error` is present).
+  error: z.unknown().optional(), // Validation error with a message and a browser `ValidityState` match key.
+  required: z.boolean().optional(), // When explicitly `false`, shows gray "(optional)" text after the label. When `true` or `undefined`, no indicator is shown.
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content displayed next to the label via an info icon.
+  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(),
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(),
+  disabled: z.boolean().optional(),
+});
+
 export const LabelPropsSchema = z.object({
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The label content — can be a string or any React node.
   showOptional: z.boolean().optional(), // When `true`, shows gray "(optional)" text after the label.
@@ -545,8 +569,12 @@ export const LabelPropsSchema = z.object({
 });
 
 export const LayerCardPropsSchema = z.object({
+  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(), // Additional CSS classes merged via `cn()`.
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
 });
 
 export const LinkPropsSchema = z.object({
@@ -565,7 +593,7 @@ export const LinkPropsSchema = z.object({
   target: z.unknown().optional(),
   type: z.string().optional(),
   referrerPolicy: z.enum(["", "no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"]).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.
+  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.
 });
 
 export const LoaderPropsSchema = z.object({
@@ -597,6 +625,7 @@ export const PaginationPropsSchema = z.object({
   perPage: z.number().optional(), // Number of items displayed per page.
   totalCount: z.number().optional(), // Total number of items across all pages.
   className: z.string().optional(), // Additional CSS classes for the container
+  labels: z.unknown().optional(), // Labels for internationalization of aria-labels. All labels have English defaults. For visible text like "Showing X of Y", use render props on sub-components: - `Pagination.Info` children for the info text - `Pagination.PageSize` label prop for the "Per page:" text
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.
   controls: z.enum(["full", "simple"]).optional(),
   text: z.unknown().optional(),
@@ -607,21 +636,22 @@ export const PopoverPropsSchema = z.object({
 });
 
 export const RadioPropsSchema = z.object({
-  legend: z.string(), // Legend text for the group (required for accessibility)
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child Radio.Item components
+  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" (default) puts radio before label, "end" puts label before radio. Note: In card appearance, the control is always positioned at the end.
+  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
   className: z.string().optional(), // Additional CSS classes
 });
 
 export const SelectPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Size of the select trigger. Matches Input component sizes.
   label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead.
   hideLabel: z.boolean().optional(),
   placeholder: z.string().optional(), // Placeholder text shown when no value is selected.
@@ -679,7 +709,7 @@ export const SidebarPropsSchema = z.object({
 
 export const SurfacePropsSchema = z.object({
   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.
+  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(),
@@ -715,6 +745,14 @@ export const TablePropsSchema = z.object({
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
 });
 
+export const TableOfContentsPropsSchema = z.object({
+  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 TabsPropsSchema = z.object({
   tabs: z.array(z.unknown()).optional(), // Array of tab items to render.
   value: z.string().optional(), // Controlled value. When set, component becomes controlled.
@@ -732,7 +770,7 @@ export const TextPropsSchema = z.object({
   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.
+  as: z.enum(["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "label", "dt", "dd", "li", "figcaption", "legend", "pre", "code", "em", "strong", "small", "abbr", "time"]).optional(), // The HTML element to render. Accepts headings (`"h1"`–`"h6"`), block text (`"p"`, `"pre"`), inline text (`"span"`, `"code"`, `"em"`, `"strong"`, `"small"`, `"abbr"`, `"time"`), form-related (`"label"`, `"legend"`), list/definition (`"dt"`, `"dd"`, `"li"`), and `"figcaption"`. - **Required** for heading variants (`"heading1"`, `"heading2"`,   `"heading3"`) — pick the element that reflects this text's place in   the document outline, or `"span"` for decorative heading-styled text   that is not a section heading. - **Optional** for body variants (defaults to `"p"`) and monospace   variants (defaults to `"span"`).
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Text content.
 });
 
@@ -756,9 +794,10 @@ 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" | "Sidebar" | "Surface" | "Switch" | "Table" | "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" | "Tooltip";
 
 export const KumoComponentTypeSchema = z.enum([
+  "Autocomplete",
   "Badge",
   "Banner",
   "Breadcrumbs",
@@ -779,6 +818,7 @@ export const KumoComponentTypeSchema = z.enum([
   "Grid",
   "Input",
   "InputArea",
+  "InputGroup",
   "Label",
   "LayerCard",
   "Link",
@@ -794,6 +834,7 @@ export const KumoComponentTypeSchema = z.enum([
   "Surface",
   "Switch",
   "Table",
+  "TableOfContents",
   "Tabs",
   "Text",
   "Toasty",
@@ -804,6 +845,7 @@ export const KumoComponentTypeSchema = z.enum([
  * Map of component type to its props schema
  */
 export const ComponentPropsSchemas = {
+  Autocomplete: AutocompletePropsSchema,
   Badge: BadgePropsSchema,
   Banner: BannerPropsSchema,
   Breadcrumbs: BreadcrumbsPropsSchema,
@@ -824,6 +866,7 @@ export const ComponentPropsSchemas = {
   Grid: GridPropsSchema,
   Input: InputPropsSchema,
   InputArea: InputAreaPropsSchema,
+  InputGroup: InputGroupPropsSchema,
   Label: LabelPropsSchema,
   LayerCard: LayerCardPropsSchema,
   Link: LinkPropsSchema,
@@ -839,6 +882,7 @@ export const ComponentPropsSchemas = {
   Surface: SurfacePropsSchema,
   Switch: SwitchPropsSchema,
   Table: TablePropsSchema,
+  TableOfContents: TableOfContentsPropsSchema,
   Tabs: TabsPropsSchema,
   Text: TextPropsSchema,
   Toasty: ToastyPropsSchema,
@@ -899,4 +943,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", "Sidebar", "Surface", "Switch", "Table", "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", "Tooltip"] as const;

package/dist/.build-complete

@@ -1 +1 @@
-1775680314844
+1777563970979