@cloudflare/kumo 1.0.0

package/ai/schemas.ts

@@ -0,0 +1,594 @@
+/**
+ * Auto-generated Zod schemas for Kumo components
+ * DO NOT EDIT - Generated by scripts/component-registry/index.ts
+ *
+ * These schemas enable runtime validation of AI-generated UI trees.
+ */
+
+import { z } from "zod";
+
+// =============================================================================
+// Dynamic Value Schema (for data binding)
+// =============================================================================
+
+/**
+ * A value that can either be a literal or a reference to the data model.
+ * Example: "Hello" or { path: "/user/name" }
+ */
+export const DynamicValueSchema = z.union([
+  z.string(),
+  z.number(),
+  z.boolean(),
+  z.null(),
+  z.object({ path: z.string() }),
+]);
+
+export type DynamicValue<T = unknown> = T | { path: string };
+
+// =============================================================================
+// Visibility Condition Schemas
+// =============================================================================
+
+/**
+ * Visibility conditions for conditional rendering.
+ * Components can be shown/hidden based on data, auth, or logic expressions.
+ */
+
+// Forward declaration for recursive types
+// Note: Numeric comparisons use DynamicValue (not DynamicValue<number>) for Zod compatibility
+export type LogicExpression =
+  | { and: LogicExpression[] }
+  | { or: LogicExpression[] }
+  | { not: LogicExpression }
+  | { path: string }
+  | { eq: [DynamicValue, DynamicValue] }
+  | { neq: [DynamicValue, DynamicValue] }
+  | { gt: [DynamicValue, DynamicValue] }
+  | { gte: [DynamicValue, DynamicValue] }
+  | { lt: [DynamicValue, DynamicValue] }
+  | { lte: [DynamicValue, DynamicValue] };
+
+// Lazy schema for recursive logic expressions
+const LogicExpressionSchema: z.ZodType<LogicExpression> = z.lazy(() =>
+  z.union([
+    z.object({ and: z.array(LogicExpressionSchema) }),
+    z.object({ or: z.array(LogicExpressionSchema) }),
+    z.object({ not: LogicExpressionSchema }),
+    z.object({ path: z.string() }),
+    z.object({ eq: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+    z.object({ neq: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+    z.object({ gt: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+    z.object({ gte: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+    z.object({ lt: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+    z.object({ lte: z.tuple([DynamicValueSchema, DynamicValueSchema]) }),
+  ])
+);
+
+export const VisibilityConditionSchema = z.union([
+  z.boolean(),
+  z.object({ path: z.string() }),
+  z.object({ auth: z.enum(["signedIn", "signedOut"]) }),
+  LogicExpressionSchema,
+]);
+
+export type VisibilityCondition = z.infer<typeof VisibilityConditionSchema>;
+
+// =============================================================================
+// Action Schemas
+// =============================================================================
+
+/**
+ * Action confirmation dialog configuration
+ */
+export const ActionConfirmSchema = z.object({
+  title: z.string(),
+  message: z.string(),
+  variant: z.enum(["default", "danger"]).optional(),
+  confirmLabel: z.string().optional(),
+  cancelLabel: z.string().optional(),
+});
+
+/**
+ * Action definition that AI can declare
+ */
+export const ActionSchema = z.object({
+  name: z.string(),
+  params: z.record(z.string(), DynamicValueSchema).optional(),
+  confirm: ActionConfirmSchema.optional(),
+  onSuccess: z.object({ set: z.record(z.string(), DynamicValueSchema) }).optional(),
+  onError: z.object({ set: z.record(z.string(), DynamicValueSchema) }).optional(),
+});
+
+export type Action = z.infer<typeof ActionSchema>;
+
+// =============================================================================
+// Component Props Schemas
+// =============================================================================
+
+export const BadgePropsSchema = z.object({
+  variant: z.enum(["primary", "secondary", "destructive", "outline", "beta"]).optional(),
+  className: z.string().optional(),
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+});
+
+export const BannerPropsSchema = z.object({
+  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  text: z.string().optional(),
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  variant: z.enum(["default", "alert", "error"]).optional(),
+  className: z.string().optional(),
+});
+
+export const BreadcrumbsPropsSchema = z.object({
+  size: z.enum(["sm", "base"]).optional(),
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  className: z.string().optional(),
+});
+
+export const ButtonPropsSchema = z.object({
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  className: z.string().optional(),
+  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  loading: z.boolean().optional(),
+  shape: z.enum(["base", "square", "circle"]).optional(),
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(),
+  variant: z.enum(["primary", "secondary", "ghost", "destructive", "secondary-destructive", "outline"]).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(),
+  value: z.unknown().optional(),
+});
+
+export const CheckboxPropsSchema = z.object({
+  variant: z.enum(["default", "error"]).optional(), // Visual variant: "default" or "error" for validation failures (visual only, no error text)
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  controlFirst: z.boolean().optional(), // When true (default), checkbox appears before label. When false, label appears before checkbox.
+  checked: z.boolean().optional(), // Whether the checkbox is checked (controlled)
+  indeterminate: z.boolean().optional(), // Whether the checkbox is in indeterminate state
+  disabled: z.boolean().optional(), // Whether the checkbox is disabled
+  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({
+  size: z.enum(["sm", "base", "lg"]).optional(),
+  text: z.string(), // The text to display and copy to clipboard
+  className: z.string().optional(), // Additional CSS classes
+});
+
+export const CodePropsSchema = z.object({
+  lang: z.enum(["ts", "tsx", "jsonc", "bash", "css"]).optional(),
+  code: z.string(), // The code content to display
+  values: z.unknown().optional(), // Template values for interpolation
+  className: z.string().optional(), // Additional CSS classes
+});
+
+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
+  onOpenChange: z.unknown().optional(), // Callback when collapsed state changes
+});
+
+export const ComboboxPropsSchema = z.object({
+  inputSide: z.enum(["right", "top"]).optional(),
+  items: z.array(z.unknown()), // Array of items to display in the dropdown
+  value: z.array(z.unknown()).optional(), // Currently selected value(s)
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Combobox content (trigger, content, items)
+  className: z.string().optional(), // Additional CSS classes
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the combobox (enables Field wrapper) - can be a string or any React node
+  required: z.boolean().optional(), // Whether the combobox is required
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the combobox
+  error: z.unknown().optional(), // Error message or validation error object
+  onValueChange: z.unknown().optional(), // Callback when selection changes
+  multiple: z.boolean().optional(), // Allow multiple selections
+  isItemEqualToValue: z.unknown().optional(), // Custom equality function for comparing items
+});
+
+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
+});
+
+export const DateRangePickerPropsSchema = z.object({
+  size: z.enum(["sm", "base", "lg"]).optional(),
+  variant: z.enum(["default", "subtle"]).optional(),
+  timezone: z.string().optional(), // Display timezone (display only)
+  className: z.string().optional(), // Additional CSS classes
+  onStartDateChange: z.unknown().optional(), // Callback when start date changes
+  onEndDateChange: z.unknown().optional(), // Callback when end date changes
+});
+
+export const DialogPropsSchema = z.object({
+  className: z.string().optional(),
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  size: z.enum(["base", "sm", "lg", "xl"]).optional(),
+});
+
+export const DropdownMenuPropsSchema = z.object({
+  variant: z.enum(["default", "danger"]).optional(),
+});
+
+export const EmptyPropsSchema = z.object({
+  size: z.enum(["sm", "base", "lg"]).optional(),
+  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  title: z.string(),
+  description: z.string().optional(),
+  commandLine: z.string().optional(),
+  contents: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  className: z.string().optional(),
+});
+
+export const FieldPropsSchema = z.object({
+  controlFirst: z.boolean().optional(), // When true, places the control (checkbox/switch) before the label visually. When false (default), places the label before the control. Used to support different layout patterns (e.g., iOS-style toggles on the right).
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The label content - can be a string or any React node
+  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 to display next to the label via an info icon
+  error: z.unknown().optional(),
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+});
+
+export const GridPropsSchema = z.object({
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child node(s) that can be nested inside component
+  className: z.string().optional(), // CSS class names that can be appended to the component
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
+  mobileDivider: z.boolean().optional(), // Show dividers between grid items on mobile (only works with 4up variant)
+  gap: z.enum(["none", "sm", "base", "lg"]).optional(), // Gap size between grid items
+  variant: z.enum(["2up", "side-by-side", "2-1", "1-2", "1-3up", "3up", "4up", "6up", "1-2-4up"]).optional(), // Stylistic variations of the Grid layout
+});
+
+export const InputPropsSchema = z.object({
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the input (enables Field wrapper) - can be a string or any React node
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the input
+  error: z.unknown().optional(), // Error message or validation error object
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(),
+  variant: z.enum(["default", "error"]).optional(),
+});
+
+export const InputAreaPropsSchema = z.object({});
+
+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 (and required is false), shows gray "(optional)" text after the label
+  tooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  className: z.string().optional(), // Additional CSS classes
+  asContent: z.boolean().optional(), // When true, only renders the inline content (indicators, tooltip) without the outer span with font styling. Useful when composed inside another label element that already provides the text styling.
+});
+
+export const LayerCardPropsSchema = z.object({
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  className: z.string().optional(),
+});
+
+export const LinkPropsSchema = z.object({
+  variant: z.enum(["inline", "current", "plain"]).optional(),
+  to: z.string().optional(),
+  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(),
+  download: z.unknown().optional(),
+  href: z.string().optional(),
+  hrefLang: z.string().optional(),
+  media: z.string().optional(),
+  ping: z.string().optional(),
+  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.
+});
+
+export const LoaderPropsSchema = z.object({
+  className: z.string().optional(),
+  size: z.enum(["sm", "base", "lg"]).optional(),
+});
+
+export const MenuBarPropsSchema = z.object({
+  className: z.string().optional(),
+  isActive: z.unknown().optional(),
+  options: z.array(z.unknown()),
+  optionIds: z.boolean().optional(),
+});
+
+export const MeterPropsSchema = z.object({
+  customValue: z.string().optional(),
+  label: z.string(),
+  showValue: z.boolean().optional(),
+  trackClassName: z.string().optional(),
+  indicatorClassName: z.string().optional(),
+  value: z.number().optional(), // Current value of the meter
+  max: z.number().optional(), // Maximum value of the meter (default: 100)
+  min: z.number().optional(), // Minimum value of the meter (default: 0)
+});
+
+export const PaginationPropsSchema = z.object({
+  controls: z.enum(["full", "simple"]).optional(),
+  setPage: z.unknown(), // Callback when page changes
+  page: z.number().optional(),
+  perPage: z.number().optional(),
+  totalCount: z.number().optional(),
+});
+
+export const PopoverPropsSchema = z.object({
+  side: z.enum(["top", "bottom", "left", "right"]).optional(),
+});
+
+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
+  orientation: z.enum(["vertical", "horizontal"]).optional(), // Layout direction of the radio items
+  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
+  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
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the select (enables Field wrapper) - can be a string or any React node
+  hideLabel: z.boolean().optional(), // Whether to visually hide the label (still accessible to screen readers)
+  placeholder: z.string().optional(), // Placeholder text when no value is selected
+  loading: z.boolean().optional(), // Whether the select is in a loading state
+  disabled: z.boolean().optional(), // Whether the select is disabled
+  required: z.boolean().optional(), // Whether the select is required
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  value: z.string().optional(), // The currently selected value
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements (Select.Option components)
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the select
+  error: z.unknown().optional(), // Error message or validation error object
+  onValueChange: z.unknown().optional(), // Callback when selection changes
+  defaultValue: z.string().optional(), // Initial value for uncontrolled mode
+});
+
+export const SensitiveInputPropsSchema = z.object({
+  alt: z.string().optional(),
+  autoComplete: z.unknown().optional(),
+  checked: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  height: z.unknown().optional(),
+  list: z.string().optional(),
+  name: z.string().optional(),
+  placeholder: z.string().optional(),
+  readOnly: z.boolean().optional(),
+  required: z.boolean().optional(),
+  width: z.unknown().optional(),
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  value: z.string().optional(), // Controlled value
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Size variant
+  variant: z.enum(["default", "error"]).optional(), // Style variant
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the input
+  error: z.unknown().optional(), // Error message or validation error object
+});
+
+export const SurfacePropsSchema = z.object({
+  as: z.unknown().optional(), // The element type to render as (default: "div")
+  className: z.string().optional(), // Additional CSS classes
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+});
+
+export const SwitchPropsSchema = z.object({
+  variant: z.enum(["default", "error"]).optional(), // Visual variant: "default" or "error" for validation failures (visual only, no error text)
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes.
+  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  required: z.boolean().optional(), // Whether the switch is required. When explicitly false, shows "(optional)" text after the label.
+  controlFirst: z.boolean().optional(), // When true (default), switch appears before label. When false, label appears before switch.
+  size: z.enum(["sm", "base", "lg"]).optional(),
+  checked: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  transitioning: z.boolean().optional(),
+  name: z.string().optional(),
+  type: z.enum(["submit", "reset", "button"]).optional(),
+  value: z.unknown().optional(),
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
+  onClick: z.unknown(), // Callback when switch is clicked
+});
+
+export const TablePropsSchema = z.object({
+  layout: z.enum(["auto", "fixed"]).optional(),
+  variant: z.enum(["default", "selected"]).optional(),
+  className: z.string().optional(), // Additional CSS classes
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+});
+
+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.
+  selectedValue: z.string().optional(), // Default selected value for uncontrolled mode. Ignored when `value` is set.
+  activateOnFocus: z.boolean().optional(), // When true, tabs are activated immediately upon receiving focus via arrow keys. When false (default), tabs receive focus but require Enter/Space to activate. Set to true for better keyboard UX in most cases.
+  className: z.string().optional(), // Additional class name for the root element
+  listClassName: z.string().optional(), // Additional class name for the tab list element
+  indicatorClassName: z.string().optional(), // Additional class name for the indicator element
+  variant: z.enum(["segmented", "underline"]).optional(),
+  onValueChange: z.unknown().optional(), // Callback when active tab changes
+});
+
+export const TextPropsSchema = z.object({
+  variant: z.enum(["heading1", "heading2", "heading3", "body", "secondary", "success", "error", "mono", "mono-secondary"]).optional(), // Text style variant
+  size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Text size (only applies to body/secondary/success/error variants)
+  bold: z.boolean().optional(), // Whether to use bold font weight (only applies to body variants)
+  as: z.unknown().optional(), // The element type to render as
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child text content
+});
+
+export const ToastyPropsSchema = z.object({
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+});
+
+export const TooltipPropsSchema = z.object({
+  align: z.enum(["start", "center", "end"]).optional(),
+  asChild: z.boolean().optional(),
+  className: z.string().optional(),
+  side: z.enum(["top", "bottom", "left", "right"]).optional(),
+  content: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]), // Content to display in the tooltip
+});
+
+// =============================================================================
+// Component Type Union
+// =============================================================================
+
+/**
+ * All valid component type names
+ */
+export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "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 const KumoComponentTypeSchema = z.enum([
+  "Badge",
+  "Banner",
+  "Breadcrumbs",
+  "Button",
+  "Checkbox",
+  "ClipboardText",
+  "Code",
+  "Collapsible",
+  "Combobox",
+  "CommandPalette",
+  "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",
+]);
+
+/**
+ * Map of component type to its props schema
+ */
+export const ComponentPropsSchemas = {
+  Badge: BadgePropsSchema,
+  Banner: BannerPropsSchema,
+  Breadcrumbs: BreadcrumbsPropsSchema,
+  Button: ButtonPropsSchema,
+  Checkbox: CheckboxPropsSchema,
+  ClipboardText: ClipboardTextPropsSchema,
+  Code: CodePropsSchema,
+  Collapsible: CollapsiblePropsSchema,
+  Combobox: ComboboxPropsSchema,
+  CommandPalette: CommandPalettePropsSchema,
+  DateRangePicker: DateRangePickerPropsSchema,
+  Dialog: DialogPropsSchema,
+  DropdownMenu: DropdownMenuPropsSchema,
+  Empty: EmptyPropsSchema,
+  Field: FieldPropsSchema,
+  Grid: GridPropsSchema,
+  Input: InputPropsSchema,
+  InputArea: InputAreaPropsSchema,
+  Label: LabelPropsSchema,
+  LayerCard: LayerCardPropsSchema,
+  Link: LinkPropsSchema,
+  Loader: LoaderPropsSchema,
+  MenuBar: MenuBarPropsSchema,
+  Meter: MeterPropsSchema,
+  Pagination: PaginationPropsSchema,
+  Popover: PopoverPropsSchema,
+  Radio: RadioPropsSchema,
+  Select: SelectPropsSchema,
+  SensitiveInput: SensitiveInputPropsSchema,
+  Surface: SurfacePropsSchema,
+  Switch: SwitchPropsSchema,
+  Table: TablePropsSchema,
+  Tabs: TabsPropsSchema,
+  Text: TextPropsSchema,
+  Toasty: ToastyPropsSchema,
+  Tooltip: TooltipPropsSchema,
+} as const;
+
+// =============================================================================
+// UI Element & Tree Schemas
+// =============================================================================
+
+/**
+ * Base UI element structure
+ */
+export const UIElementBaseSchema = z.object({
+  key: z.string(),
+  type: KumoComponentTypeSchema,
+  props: z.record(z.string(), z.unknown()),
+  children: z.array(z.string()).optional(),
+  parentKey: z.string().nullable().optional(),
+  visible: VisibilityConditionSchema.optional(),
+  action: ActionSchema.optional(),
+});
+
+export type UIElement = z.infer<typeof UIElementBaseSchema>;
+
+/**
+ * Flat UI tree structure (optimized for LLM generation)
+ */
+export const UITreeSchema = z.object({
+  root: z.string(),
+  elements: z.record(z.string(), UIElementBaseSchema),
+});
+
+export type UITree = z.infer<typeof UITreeSchema>;
+
+// =============================================================================
+// Validation Helpers
+// =============================================================================
+
+/**
+ * Validate an element's props against its component schema
+ */
+export function validateElementProps(element: UIElement): z.SafeParseReturnType<unknown, unknown> {
+  const schema = ComponentPropsSchemas[element.type as keyof typeof ComponentPropsSchemas];
+  if (!schema) {
+    return { success: false, error: new z.ZodError([{ code: 'custom', message: `Unknown component type: ${element.type}`, path: ['type'] }]) };
+  }
+  return schema.safeParse(element.props);
+}
+
+/**
+ * Validate a complete UI tree
+ */
+export function validateUITree(tree: unknown): z.SafeParseReturnType<unknown, UITree> {
+  return UITreeSchema.safeParse(tree);
+}
+
+/**
+ * List of all component names (for catalog generation)
+ */
+export const KUMO_COMPONENT_NAMES = ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "Code", "Collapsible", "Combobox", "CommandPalette", "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;

package/dist/badge-Dc99vsfo.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { c as t } from "./cn-Bhsu1vx2.js";
+const i = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", o = {
+  variant: {
+    primary: {
+      classes: "bg-kumo-contrast text-kumo-inverse",
+      description: "Default high-emphasis badge for important labels"
+    },
+    secondary: {
+      classes: "bg-kumo-fill text-kumo-default",
+      description: "Subtle badge for secondary information"
+    },
+    destructive: {
+      classes: "bg-kumo-danger text-white",
+      description: "Error or danger state indicator"
+    },
+    outline: {
+      classes: "border border-kumo-fill bg-transparent text-kumo-default",
+      description: "Bordered badge with transparent background"
+    },
+    beta: {
+      classes: "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
+      description: "Indicates beta or experimental features"
+    }
+  }
+}, r = {
+  variant: "primary"
+};
+function d({
+  variant: e = r.variant
+} = {}) {
+  return t(
+    // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)
+    i,
+    // Apply variant styles from KUMO_BADGE_VARIANTS
+    o.variant[e].classes
+  );
+}
+function u({
+  variant: e = r.variant,
+  className: a,
+  children: s
+}) {
+  return /* @__PURE__ */ n("span", { className: t(d({ variant: e }), a), children: s });
+}
+export {
+  u as B,
+  i as K
+};
+//# sourceMappingURL=badge-Dc99vsfo.js.map

package/dist/badge-Dc99vsfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-Dc99vsfo.js","sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Base styles applied to all badge variants.\n * Used by badgeVariants() and consumed by Figma plugin for component generation.\n */\nexport const KUMO_BADGE_BASE_STYLES =\n  \"inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap\";\n\nexport const KUMO_BADGE_VARIANTS = {\n  variant: {\n    primary: {\n      classes: \"bg-kumo-contrast text-kumo-inverse\",\n      description: \"Default high-emphasis badge for important labels\",\n    },\n    secondary: {\n      classes: \"bg-kumo-fill text-kumo-default\",\n      description: \"Subtle badge for secondary information\",\n    },\n    destructive: {\n      classes: \"bg-kumo-danger text-white\",\n      description: \"Error or danger state indicator\",\n    },\n    outline: {\n      classes: \"border border-kumo-fill bg-transparent text-kumo-default\",\n      description: \"Bordered badge with transparent background\",\n    },\n    beta: {\n      classes: \"border border-dashed border-kumo-brand bg-transparent text-kumo-link\",\n      description: \"Indicates beta or experimental features\",\n    },\n  },\n} as const;\n\nexport const KUMO_BADGE_DEFAULT_VARIANTS = {\n  variant: \"primary\",\n} as const;\n\n// Derived types from KUMO_BADGE_VARIANTS\nexport type KumoBadgeVariant = keyof typeof KUMO_BADGE_VARIANTS.variant;\n\nexport interface KumoBadgeVariantsProps {\n  variant?: KumoBadgeVariant;\n}\n\nexport function badgeVariants({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n}: KumoBadgeVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)\n    KUMO_BADGE_BASE_STYLES,\n    // Apply variant styles from KUMO_BADGE_VARIANTS\n    KUMO_BADGE_VARIANTS.variant[variant].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type BadgeVariant = KumoBadgeVariant;\n\nexport interface BadgeProps {\n  variant?: KumoBadgeVariant;\n  className?: string;\n  children: ReactNode;\n}\n\nexport function Badge({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n  className,\n  children,\n}: BadgeProps) {\n  return (\n    <span className={cn(badgeVariants({ variant }), className)}>\n      {children}\n    </span>\n  );\n}\n"],"names":["KUMO_BADGE_BASE_STYLES","KUMO_BADGE_VARIANTS","KUMO_BADGE_DEFAULT_VARIANTS","badgeVariants","variant","cn","Badge","className","children","jsx"],"mappings":";;;AAOO,MAAMA,IACX,uIAEWC,IAAsB;AAAA,EACjC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,aAAa;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,SAAS;AACX;AASO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AACxC,IAA4B,IAAI;AAC9B,SAAOG;AAAA;AAAA,IAELL;AAAA;AAAA,IAEAC,EAAoB,QAAQG,CAAO,EAAE;AAAA,EAAA;AAEzC;AAWO,SAASE,EAAM;AAAA,EACpB,SAAAF,IAAUF,EAA4B;AAAA,EACtC,WAAAK;AAAA,EACA,UAAAC;AACF,GAAe;AACb,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWJ,EAAGF,EAAc,EAAE,SAAAC,GAAS,GAAGG,CAAS,GACtD,UAAAC,EAAA,CACH;AAEJ;"}