{"version":"1.0.0","components":{"Autocomplete":{"name":"Autocomplete","type":"component","description":"Autocomplete — free-form text input with an optional filtered suggestion list. Unlike Combobox, the input value is not restricted to items in the list. Use Combobox when the selected value must come from the list. Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`, `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`. `InputGroup` renders the text input with Input component styling. Pass a `size` prop to `InputGroup` to match the Input component sizes.","importPath":"@cloudflare/kumo","category":"Other","props":{"items":{"type":"unknown[]","required":true,"description":"Array of items to display in the dropdown"},"value":{"type":"string | number | string[]","optional":true,"description":"The controlled input value"},"open":{"type":"boolean","optional":true,"description":"Whether the popup is open (controlled)"},"children":{"type":"ReactNode","optional":true,"description":"Autocomplete content (input group, popup content)"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"label":{"type":"ReactNode","optional":true,"description":"Label content (enables Field wrapper)"},"required":{"type":"boolean","optional":true,"description":"Whether the field is required"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the field"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"}},"examples":["\n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n ","
\n \n item.label.toLowerCase().includes(query.toLowerCase())\n }\n >\n \n \n \n {(item: Country) => (\n \n {item.label}\n \n )}\n \n \n \n
","
\n \n item.label.toLowerCase().includes(query.toLowerCase())\n }\n >\n \n \n \n {(item: Country) => (\n \n {item.label}\n \n )}\n \n \n \n
","\n \n \n \n {(group: ServerGroup) => (\n \n {group.value}\n \n {(item: ServerLocation) => (\n \n {item.label}\n \n )}\n \n \n )}\n \n \n ","
\n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n
","
\n setValue(v)}\n >\n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n {value && (\n

\n Value: {value}\n

\n )}\n
"],"colors":["bg-kumo-control","bg-kumo-line","bg-kumo-overlay","border-kumo-line","ring-kumo-line","text-kumo-default","text-kumo-strong"],"subComponents":{"InputGroup":{"name":"InputGroup","description":"InputGroup sub-component","props":{"className":{"type":"string","optional":true},"size":{"type":"KumoAutocompleteSize","optional":true},"placeholder":{"type":"string","optional":true}}},"Content":{"name":"Content","description":"Content sub-component","props":{"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"align":{"type":"AutocompleteBase.Positioner.Props[\"align\"]","optional":true},"alignOffset":{"type":"AutocompleteBase.Positioner.Props[\"alignOffset\"]","optional":true},"side":{"type":"AutocompleteBase.Positioner.Props[\"side\"]","optional":true},"sideOffset":{"type":"AutocompleteBase.Positioner.Props[\"sideOffset\"]","optional":true}}},"Item":{"name":"Item","description":"Item sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Empty":{"name":"Empty","description":"Empty sub-component (wraps AutocompleteBase)","props":{},"isPassThrough":true,"baseComponent":"AutocompleteBase.Empty"},"Collection":{"name":"Collection","description":"Collection sub-component (wraps AutocompleteBase)","props":{},"isPassThrough":true,"baseComponent":"AutocompleteBase.Collection"}}},"Badge":{"name":"Badge","type":"component","description":"Small status label for categorizing or highlighting content.","importPath":"@cloudflare/kumo","category":"Display","props":{"variant":{"type":"enum","optional":true,"description":"Color variant of the badge. Recommended semantic variants:\n- `\"primary\"` — Primary badge\n- `\"secondary\"` — Secondary badge\n- `\"error\"` — Error badge\n- `\"warning\"` — Warning badge\n- `\"success\"` — Success badge\n- `\"info\"` — Info badge\n\nAdditional token variants:\n- `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n- `\"teal-subtle\"`, `\"neutral-subtle\"`\n- `\"inverted\"`\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features","values":["primary","secondary","error","warning","success","destructive","info","beta","outline","red","green","neutral","orange","purple","teal","teal-subtle","blue"],"descriptions":{"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","green":"Green badge","neutral":"Neutral badge","orange":"Orange badge","purple":"Purple badge","teal":"Teal badge","teal-subtle":"Subtle teal badge","blue":"Blue badge"},"classes":{"primary":"bg-kumo-badge-inverted text-kumo-badge-inverted","secondary":"bg-kumo-fill text-kumo-badge-neutral-subtle","error":"bg-kumo-danger-tint/60 text-kumo-danger","warning":"bg-kumo-warning-tint/70 text-kumo-warning","success":"bg-kumo-success-tint/70 text-kumo-success","destructive":"bg-kumo-badge-red text-white","info":"bg-kumo-info-tint/70 text-kumo-info","beta":"border border-dashed border-kumo-brand bg-transparent text-kumo-link","outline":"border border-kumo-fill bg-transparent text-kumo-default","red":"bg-kumo-badge-red text-white","green":"bg-kumo-badge-green text-white","neutral":"bg-kumo-badge-neutral text-white","orange":"bg-kumo-badge-orange text-black","purple":"bg-kumo-badge-purple text-white","teal":"bg-kumo-badge-teal text-white","teal-subtle":"bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle","blue":"bg-kumo-badge-blue text-white"},"default":"primary"},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"children":{"type":"ReactNode","optional":true,"description":"Content rendered inside the badge."}},"examples":["
\n Primary\n Secondary\n Error\n Success\n Warning\n Info\n Outline\n Beta\n
","
\n Neutral\n Red\n Orange\n Green\n Teal\n Blue\n Purple\n
","

\n Workers\n New\n

"],"colors":["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"],"baseStyles":"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"},"Banner":{"name":"Banner","type":"component","description":"Full-width message bar for informational, warning, or error notices. Supports structured title/description for i18n, or simple children for basic usage.","importPath":"@cloudflare/kumo","category":"Feedback","props":{"icon":{"type":"ReactNode","optional":true,"description":"Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`)."},"title":{"type":"string","optional":true,"description":"Primary heading text for the banner. Use for i18n string injection."},"description":{"type":"ReactNode","optional":true,"description":"Secondary description text displayed below the title. Use for i18n string injection."},"action":{"type":"ReactNode","optional":true,"description":"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":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"variant":{"type":"enum","optional":true,"description":"Visual style of the banner.\n- `\"default\"` — Informational blue banner for general messages\n- `\"alert\"` — Warning yellow banner for cautionary messages\n- `\"error\"` — Error red banner for critical issues","values":["default","alert","error"],"descriptions":{"default":"Informational banner for general messages","alert":"Warning banner for cautionary messages","error":"Error banner for critical issues"},"classes":{"default":"bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info","alert":"bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning","error":"bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger"},"default":"default"},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["
\n }\n title=\"Update available\"\n description=\"A new version is ready to install.\"\n />\n }\n variant=\"alert\"\n title=\"Session expiring\"\n description=\"Your session will expire in 5 minutes.\"\n />\n }\n variant=\"error\"\n title=\"Save failed\"\n description=\"We couldn't save your changes. Please try again.\"\n />\n
","}\n title=\"Update available\"\n description=\"A new version is ready to install.\"\n />","}\n variant=\"alert\"\n title=\"Session expiring\"\n description=\"Your session will expire in 5 minutes.\"\n />","}\n variant=\"error\"\n title=\"Save failed\"\n description=\"We couldn't save your changes. Please try again.\"\n />","}\n title=\"Your changes have been saved.\"\n />","}\n variant=\"alert\"\n title=\"Review required\"\n description=\"Please review your billing information before proceeding.\"\n />","}\n title=\"Custom content supported\"\n description={\n \n This banner supports custom content with Text.\n \n }\n />","
\n }\n title=\"Update available\"\n description=\"A new version is ready to install.\"\n action={}\n />\n }\n title=\"Update available\"\n description=\"A new version is ready to install.\"\n action={\n \n }\n />\n
","}\n variant=\"alert\"\n title=\"Session expiring\"\n description=\"Your session will expire in 5 minutes.\"\n action={\n <>\n \n \n \n }\n />","}>This is a simple banner using children."],"colors":["bg-kumo-danger","bg-kumo-danger-tint","bg-kumo-info","bg-kumo-info-tint","bg-kumo-warning","bg-kumo-warning-tint","border-kumo-danger","border-kumo-info","border-kumo-warning","text-kumo-danger","text-kumo-info","text-kumo-warning"],"baseStyles":"flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base"},"Breadcrumbs":{"name":"Breadcrumbs","type":"component","description":"Breadcrumbs component","importPath":"@cloudflare/kumo","category":"Display","props":{"size":{"type":"enum","optional":true,"description":"Size of the breadcrumbs.\n- `\"sm\"` — Compact breadcrumbs for dense UIs\n- `\"base\"` — Default breadcrumbs size","values":["sm","base"],"descriptions":{"sm":"Compact breadcrumbs for dense UIs","base":"Default breadcrumbs size"},"classes":{"sm":"text-sm h-10 gap-0.5","base":"text-base h-12 gap-1"},"default":"base"},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["\n Home\n \n Docs\n \n Breadcrumbs\n ","\n }>\n Home\n \n \n Projects\n \n Current Project\n ","\n }>\n Home\n \n \n Docs\n \n \n ","\n }>\n Worker Analytics\n \n ","\n Home\n \n Breadcrumbs\n \n "],"colors":["text-kumo-inactive","text-kumo-subtle","text-kumo-success"],"subComponents":{"Link":{"name":"Link","description":"Link sub-component","props":{"href":{"type":"string","required":true},"icon":{"type":"React.ReactNode","optional":true}}},"Current":{"name":"Current","description":"Current sub-component","props":{"loading":{"type":"boolean","optional":true},"icon":{"type":"React.ReactNode","optional":true}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"Clipboard":{"name":"Clipboard","description":"Clipboard sub-component","props":{"text":{"type":"string","required":true}}}}},"Button":{"name":"Button","type":"component","description":"Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.","importPath":"@cloudflare/kumo","category":"Action","props":{"shape":{"type":"enum","optional":true,"values":["base","square","circle"],"descriptions":{"base":"Default rectangular button shape","square":"Square button for icon-only actions","circle":"Circular button for icon-only actions"},"classes":{"square":"items-center justify-center p-0","circle":"items-center justify-center p-0 rounded-full"},"default":"base"},"size":{"type":"enum","optional":true,"values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small button for compact UIs","sm":"Small button for secondary actions","base":"Default button size","lg":"Large button for primary CTAs"},"classes":{"xs":"h-5 gap-1 rounded-sm px-1.5 text-xs","sm":"h-6.5 gap-1 rounded-md px-2 text-xs","base":"h-9 gap-1.5 rounded-lg px-3 text-base","lg":"h-10 gap-2 rounded-lg px-4 text-base"},"default":"base"},"variant":{"type":"enum","optional":true,"values":["primary","secondary","ghost","destructive","secondary-destructive","outline"],"descriptions":{"primary":"High-emphasis button for primary actions","secondary":"Default button style for most actions","ghost":"Minimal button with no background","destructive":"Danger button for destructive actions like delete","secondary-destructive":"Secondary button with destructive text for less prominent dangerous actions","outline":"Bordered button with transparent background"},"classes":{"primary":"bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50","secondary":"bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base","ghost":"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit","destructive":"bg-kumo-danger !text-white hover:bg-kumo-danger/70","secondary-destructive":"bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base","outline":"bg-transparent text-kumo-default ring ring-kumo-hairline"},"stateClasses":{"primary":{"hover":"hover:bg-kumo-brand-hover","disabled":"disabled:bg-kumo-brand/50"},"secondary":{"not-disabled":"not-disabled:hover:bg-kumo-tint","disabled":"disabled:bg-kumo-base/50 disabled:!text-kumo-default/70","data-state":"data-[state=open]:bg-kumo-base"},"ghost":{"hover":"hover:bg-kumo-tint"},"destructive":{"hover":"hover:bg-kumo-danger/70"},"secondary-destructive":{"not-disabled":"not-disabled:hover:bg-kumo-base","disabled":"disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70","data-state":"data-[state=open]:bg-kumo-base"}},"default":"secondary"},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"icon":{"type":"ReactNode","optional":true,"description":"Icon from `@phosphor-icons/react` or a React element. Rendered before children."},"loading":{"type":"boolean","optional":true,"description":"Shows a loading spinner and disables interaction."},"title":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"disabled":{"type":"boolean","optional":true},"name":{"type":"string","optional":true},"type":{"type":"enum","optional":true,"values":["submit","reset","button"]},"value":{"type":"string | string[] | number","optional":true}},"examples":["
\n \n \n
","","","","","","","
\n \n \n \n \n
","","
\n \n \n
","","","","
\n \n \n
","
\n \n Read Link docs\n \n \n Cloudflare Docs\n \n
"],"colors":["bg-kumo-base","bg-kumo-brand","bg-kumo-brand-hover","bg-kumo-danger","bg-kumo-tint","ring-kumo-brand","ring-kumo-focus","ring-kumo-hairline","text-kumo-danger","text-kumo-default","text-kumo-subtle"]},"Checkbox":{"name":"Checkbox","type":"component","description":"Checkbox component","importPath":"@cloudflare/kumo","category":"Input","props":{"variant":{"type":"enum","optional":true,"description":"Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text)","values":["default","error"],"descriptions":{"default":"Default checkbox appearance","error":"Error state for validation failures"},"classes":{"default":"[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline","error":"[&>span]:ring-kumo-danger"},"stateClasses":{"default":{"focus":"[&:focus-within>span]:ring-kumo-focus","hover":"[&:hover>span]:ring-kumo-hairline"}},"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), checkbox appears before label. When false, label appears before checkbox."},"checked":{"type":"boolean","optional":true,"description":"Whether the checkbox is checked (controlled)"},"indeterminate":{"type":"boolean","optional":true,"description":"Whether the checkbox is in indeterminate state"},"disabled":{"type":"boolean","optional":true,"description":"Whether the checkbox is disabled"},"name":{"type":"string","optional":true,"description":"Name for form submission"},"required":{"type":"boolean","optional":true,"description":"Whether the field is required"},"className":{"type":"string","optional":true,"description":"Additional class name"}},"examples":["","","","","","","","\n \n \n \n ","\n \n Notification preferences\n \n \n \n \n ","\n \n Notification preferences\n \n \n \n \n "," {}}\n >\n \n \n "],"colors":["bg-kumo-base","bg-kumo-contrast","ring-kumo-brand","ring-kumo-contrast","ring-kumo-danger","ring-kumo-focus","ring-kumo-hairline","text-kumo-danger","text-kumo-default","text-kumo-inverse","text-kumo-subtle"],"subComponents":{"Item":{"name":"Item","description":"Item sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{"legend":{"type":"string","optional":true},"children":{"type":"ReactNode","required":true},"error":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"value":{"type":"string[]","optional":true},"allValues":{"type":"string[]","optional":true},"disabled":{"type":"boolean","optional":true},"controlFirst":{"type":"boolean","optional":true},"className":{"type":"string","optional":true}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true},"className":{"type":"string","optional":true}}}},"styling":{"dimensions":"h-4 w-4","borderRadius":"rounded-sm","baseTokens":["bg-kumo-base","ring-kumo-line"],"states":{"checked":["bg-kumo-contrast","text-kumo-inverse"],"indeterminate":["bg-kumo-contrast","text-kumo-inverse"],"error":["ring-kumo-danger"],"hover":["ring-kumo-hairline"],"focus":["ring-kumo-hairline"],"disabled":["opacity-50","cursor-not-allowed"]},"icons":[{"name":"ph-check","state":"checked","size":12},{"name":"ph-minus","state":"indeterminate","size":12}]}},"ClipboardText":{"name":"ClipboardText","type":"component","description":"Read-only text field with a one-click copy-to-clipboard button.","importPath":"@cloudflare/kumo","category":"Action","props":{"size":{"type":"enum","optional":true,"description":"Size of the clipboard text field.\n- `\"sm\"` — Small clipboard text for compact UIs\n- `\"base\"` — Default clipboard text size\n- `\"lg\"` — Large clipboard text for prominent display","values":["sm","base","lg"],"descriptions":{"sm":"Small clipboard text for compact UIs","base":"Default clipboard text size","lg":"Large clipboard text for prominent display"},"classes":{"sm":"text-xs","base":"text-sm","lg":"text-sm"},"default":"lg"},"text":{"type":"string","required":true,"description":"The text to display and copy to clipboard."},"textToCopy":{"type":"string","optional":true,"description":"If provided, this text will be copied to clipboard instead of the `text` prop."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"tooltip":{"type":"object","optional":true,"description":"Tooltip config. Shows tooltip on hover, anchored toast on click."},"labels":{"type":"object","optional":true,"description":"Accessible labels for i18n."}},"examples":["","","","","",""],"colors":["bg-kumo-base","border-kumo-line","outline-kumo-fill","ring-kumo-brand","ring-kumo-focus","text-kumo-default"],"styling":{"baseTokens":["bg-kumo-base","text-kumo-default","ring-kumo-line","border-kumo-fill"],"states":{"input":["bg-kumo-control","text-kumo-default","ring-kumo-line"],"text":["bg-kumo-base","font-mono"],"button":["border-kumo-fill"]},"inputStyles":{"base":"bg-kumo-control text-kumo-default ring ring-kumo-line","sizes":{"xs":"h-5 gap-1 rounded-sm px-1.5 text-xs","sm":"h-6.5 gap-1 rounded-md px-2 text-xs","base":"h-9 gap-1.5 rounded-lg px-3 text-base","lg":"h-10 gap-2 rounded-lg px-4 text-base"}},"sizeVariants":{"sm":{"height":26,"classes":"text-xs","buttonSize":"sm","dimensions":{"paddingX":8,"gap":1,"borderRadius":6,"fontSize":12}},"base":{"height":36,"classes":"text-sm","buttonSize":"base","dimensions":{"paddingX":12,"gap":6,"borderRadius":8,"fontSize":14}},"lg":{"height":40,"classes":"text-sm","buttonSize":"lg","dimensions":{"paddingX":16,"gap":8,"borderRadius":8,"fontSize":14}}},"icons":[{"name":"ph-clipboard","state":"default","size":16},{"name":"ph-check","state":"copied","size":16}]}},"CloudflareLogo":{"name":"CloudflareLogo","type":"component","description":"Cloudflare logo component.","importPath":"@cloudflare/kumo","category":"Other","props":{"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"height":{"type":"number | string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"media":{"type":"string","optional":true},"method":{"type":"string","optional":true},"name":{"type":"string","optional":true},"target":{"type":"string","optional":true},"type":{"type":"string","optional":true},"width":{"type":"number | string","optional":true},"accentHeight":{"type":"number | string","optional":true},"accumulate":{"type":"enum","optional":true,"values":["none","sum"]},"additive":{"type":"enum","optional":true,"values":["replace","sum"]},"alignmentBaseline":{"type":"enum","optional":true,"values":["auto","baseline","before-edge","text-before-edge","middle","central","after-edge","text-after-edge","ideographic","alphabetic","hanging","mathematical","inherit"]},"allowReorder":{"type":"enum","optional":true,"values":["no","yes"]},"alphabetic":{"type":"number | string","optional":true},"amplitude":{"type":"number | string","optional":true},"arabicForm":{"type":"enum","optional":true,"values":["initial","medial","terminal","isolated"]},"ascent":{"type":"number | string","optional":true},"attributeName":{"type":"string","optional":true},"attributeType":{"type":"string","optional":true},"autoReverse":{"type":"Booleanish","optional":true},"azimuth":{"type":"number | string","optional":true},"baseFrequency":{"type":"number | string","optional":true},"baselineShift":{"type":"number | string","optional":true},"baseProfile":{"type":"number | string","optional":true},"bbox":{"type":"number | string","optional":true},"begin":{"type":"number | string","optional":true},"bias":{"type":"number | string","optional":true},"by":{"type":"number | string","optional":true},"calcMode":{"type":"number | string","optional":true},"capHeight":{"type":"number | string","optional":true},"clip":{"type":"number | string","optional":true},"clipPath":{"type":"string","optional":true},"clipPathUnits":{"type":"number | string","optional":true},"clipRule":{"type":"number | string","optional":true},"colorInterpolation":{"type":"number | string","optional":true},"colorInterpolationFilters":{"type":"enum","optional":true,"values":["auto","sRGB","linearRGB","inherit"]},"colorProfile":{"type":"number | string","optional":true},"colorRendering":{"type":"number | string","optional":true},"contentScriptType":{"type":"number | string","optional":true},"contentStyleType":{"type":"number | string","optional":true},"cursor":{"type":"number | string","optional":true},"cx":{"type":"number | string","optional":true},"cy":{"type":"number | string","optional":true},"d":{"type":"string","optional":true},"decelerate":{"type":"number | string","optional":true},"descent":{"type":"number | string","optional":true},"diffuseConstant":{"type":"number | string","optional":true},"direction":{"type":"number | string","optional":true},"display":{"type":"number | string","optional":true},"divisor":{"type":"number | string","optional":true},"dominantBaseline":{"type":"enum","optional":true,"values":["auto","use-script","no-change","reset-size","ideographic","alphabetic","hanging","mathematical","central","middle","text-after-edge","text-before-edge","inherit"]},"dur":{"type":"number | string","optional":true},"dx":{"type":"number | string","optional":true},"dy":{"type":"number | string","optional":true},"edgeMode":{"type":"number | string","optional":true},"elevation":{"type":"number | string","optional":true},"enableBackground":{"type":"number | string","optional":true},"end":{"type":"number | string","optional":true},"exponent":{"type":"number | string","optional":true},"externalResourcesRequired":{"type":"Booleanish","optional":true},"fill":{"type":"string","optional":true},"fillOpacity":{"type":"number | string","optional":true},"fillRule":{"type":"enum","optional":true,"values":["nonzero","evenodd","inherit"]},"filter":{"type":"string","optional":true},"filterRes":{"type":"number | string","optional":true},"filterUnits":{"type":"number | string","optional":true},"floodColor":{"type":"number | string","optional":true},"floodOpacity":{"type":"number | string","optional":true},"focusable":{"type":"Booleanish | string","optional":true},"fontFamily":{"type":"string","optional":true},"fontSize":{"type":"number | string","optional":true},"fontSizeAdjust":{"type":"number | string","optional":true},"fontStretch":{"type":"number | string","optional":true},"fontStyle":{"type":"number | string","optional":true},"fontVariant":{"type":"number | string","optional":true},"fontWeight":{"type":"number | string","optional":true},"format":{"type":"number | string","optional":true},"fr":{"type":"number | string","optional":true},"from":{"type":"number | string","optional":true},"fx":{"type":"number | string","optional":true},"fy":{"type":"number | string","optional":true},"g1":{"type":"number | string","optional":true},"g2":{"type":"number | string","optional":true},"glyphName":{"type":"number | string","optional":true},"glyphOrientationHorizontal":{"type":"number | string","optional":true},"glyphOrientationVertical":{"type":"number | string","optional":true},"glyphRef":{"type":"number | string","optional":true},"gradientTransform":{"type":"string","optional":true},"gradientUnits":{"type":"string","optional":true},"hanging":{"type":"number | string","optional":true},"horizAdvX":{"type":"number | string","optional":true},"horizOriginX":{"type":"number | string","optional":true},"href":{"type":"string","optional":true},"ideographic":{"type":"number | string","optional":true},"imageRendering":{"type":"number | string","optional":true},"in2":{"type":"number | string","optional":true},"in":{"type":"string","optional":true},"intercept":{"type":"number | string","optional":true},"k1":{"type":"number | string","optional":true},"k2":{"type":"number | string","optional":true},"k3":{"type":"number | string","optional":true},"k4":{"type":"number | string","optional":true},"k":{"type":"number | string","optional":true},"kernelMatrix":{"type":"number | string","optional":true},"kernelUnitLength":{"type":"number | string","optional":true},"kerning":{"type":"number | string","optional":true},"keyPoints":{"type":"number | string","optional":true},"keySplines":{"type":"number | string","optional":true},"keyTimes":{"type":"number | string","optional":true},"lengthAdjust":{"type":"number | string","optional":true},"letterSpacing":{"type":"number | string","optional":true},"lightingColor":{"type":"number | string","optional":true},"limitingConeAngle":{"type":"number | string","optional":true},"local":{"type":"number | string","optional":true},"markerEnd":{"type":"string","optional":true},"markerHeight":{"type":"number | string","optional":true},"markerMid":{"type":"string","optional":true},"markerStart":{"type":"string","optional":true},"markerUnits":{"type":"number | string","optional":true},"markerWidth":{"type":"number | string","optional":true},"mask":{"type":"string","optional":true},"maskContentUnits":{"type":"number | string","optional":true},"maskUnits":{"type":"number | string","optional":true},"mathematical":{"type":"number | string","optional":true},"mode":{"type":"number | string","optional":true},"numOctaves":{"type":"number | string","optional":true},"offset":{"type":"number | string","optional":true},"opacity":{"type":"number | string","optional":true},"operator":{"type":"number | string","optional":true},"order":{"type":"number | string","optional":true},"orient":{"type":"number | string","optional":true},"orientation":{"type":"number | string","optional":true},"origin":{"type":"number | string","optional":true},"overflow":{"type":"number | string","optional":true},"overlinePosition":{"type":"number | string","optional":true},"overlineThickness":{"type":"number | string","optional":true},"paintOrder":{"type":"number | string","optional":true},"panose1":{"type":"number | string","optional":true},"path":{"type":"string","optional":true},"pathLength":{"type":"number | string","optional":true},"patternContentUnits":{"type":"string","optional":true},"patternTransform":{"type":"number | string","optional":true},"patternUnits":{"type":"string","optional":true},"pointerEvents":{"type":"number | string","optional":true},"points":{"type":"string","optional":true},"pointsAtX":{"type":"number | string","optional":true},"pointsAtY":{"type":"number | string","optional":true},"pointsAtZ":{"type":"number | string","optional":true},"preserveAlpha":{"type":"Booleanish","optional":true},"preserveAspectRatio":{"type":"string","optional":true},"primitiveUnits":{"type":"number | string","optional":true},"r":{"type":"number | string","optional":true},"radius":{"type":"number | string","optional":true},"refX":{"type":"number | string","optional":true},"refY":{"type":"number | string","optional":true},"renderingIntent":{"type":"number | string","optional":true},"repeatCount":{"type":"number | string","optional":true},"repeatDur":{"type":"number | string","optional":true},"requiredExtensions":{"type":"number | string","optional":true},"requiredFeatures":{"type":"number | string","optional":true},"restart":{"type":"number | string","optional":true},"result":{"type":"string","optional":true},"rotate":{"type":"number | string","optional":true},"rx":{"type":"number | string","optional":true},"ry":{"type":"number | string","optional":true},"scale":{"type":"number | string","optional":true},"seed":{"type":"number | string","optional":true},"shapeRendering":{"type":"number | string","optional":true},"slope":{"type":"number | string","optional":true},"spacing":{"type":"number | string","optional":true},"specularConstant":{"type":"number | string","optional":true},"specularExponent":{"type":"number | string","optional":true},"speed":{"type":"number | string","optional":true},"spreadMethod":{"type":"string","optional":true},"startOffset":{"type":"number | string","optional":true},"stdDeviation":{"type":"number | string","optional":true},"stemh":{"type":"number | string","optional":true},"stemv":{"type":"number | string","optional":true},"stitchTiles":{"type":"number | string","optional":true},"stopColor":{"type":"string","optional":true},"stopOpacity":{"type":"number | string","optional":true},"strikethroughPosition":{"type":"number | string","optional":true},"strikethroughThickness":{"type":"number | string","optional":true},"string":{"type":"number | string","optional":true},"stroke":{"type":"string","optional":true},"strokeDasharray":{"type":"string | number","optional":true},"strokeDashoffset":{"type":"string | number","optional":true},"strokeLinecap":{"type":"enum","optional":true,"values":["butt","round","square","inherit"]},"strokeLinejoin":{"type":"enum","optional":true,"values":["miter","round","bevel","inherit"]},"strokeMiterlimit":{"type":"number | string","optional":true},"strokeOpacity":{"type":"number | string","optional":true},"strokeWidth":{"type":"number | string","optional":true},"surfaceScale":{"type":"number | string","optional":true},"systemLanguage":{"type":"number | string","optional":true},"tableValues":{"type":"number | string","optional":true},"targetX":{"type":"number | string","optional":true},"targetY":{"type":"number | string","optional":true},"textAnchor":{"type":"enum","optional":true,"values":["start","middle","end","inherit"]},"textDecoration":{"type":"number | string","optional":true},"textLength":{"type":"number | string","optional":true},"textRendering":{"type":"number | string","optional":true},"to":{"type":"number | string","optional":true},"transform":{"type":"string","optional":true},"u1":{"type":"number | string","optional":true},"u2":{"type":"number | string","optional":true},"underlinePosition":{"type":"number | string","optional":true},"underlineThickness":{"type":"number | string","optional":true},"unicode":{"type":"number | string","optional":true},"unicodeBidi":{"type":"number | string","optional":true},"unicodeRange":{"type":"number | string","optional":true},"unitsPerEm":{"type":"number | string","optional":true},"vAlphabetic":{"type":"number | string","optional":true},"values":{"type":"string","optional":true},"vectorEffect":{"type":"number | string","optional":true},"version":{"type":"string","optional":true},"vertAdvY":{"type":"number | string","optional":true},"vertOriginX":{"type":"number | string","optional":true},"vertOriginY":{"type":"number | string","optional":true},"vHanging":{"type":"number | string","optional":true},"vIdeographic":{"type":"number | string","optional":true},"viewBox":{"type":"string","optional":true},"viewTarget":{"type":"number | string","optional":true},"visibility":{"type":"number | string","optional":true},"vMathematical":{"type":"number | string","optional":true},"widths":{"type":"number | string","optional":true},"wordSpacing":{"type":"number | string","optional":true},"writingMode":{"type":"number | string","optional":true},"x1":{"type":"number | string","optional":true},"x2":{"type":"number | string","optional":true},"x":{"type":"number | string","optional":true},"xChannelSelector":{"type":"string","optional":true},"xHeight":{"type":"number | string","optional":true},"xlinkActuate":{"type":"string","optional":true},"xlinkArcrole":{"type":"string","optional":true},"xlinkHref":{"type":"string","optional":true},"xlinkRole":{"type":"string","optional":true},"xlinkShow":{"type":"string","optional":true},"xlinkTitle":{"type":"string","optional":true},"xlinkType":{"type":"string","optional":true},"xmlBase":{"type":"string","optional":true},"xmlLang":{"type":"string","optional":true},"xmlns":{"type":"string","optional":true},"xmlnsXlink":{"type":"string","optional":true},"xmlSpace":{"type":"string","optional":true},"y1":{"type":"number | string","optional":true},"y2":{"type":"number | string","optional":true},"y":{"type":"number | string","optional":true},"yChannelSelector":{"type":"string","optional":true},"z":{"type":"number | string","optional":true},"zoomAndPan":{"type":"string","optional":true},"variant":{"type":"enum","optional":true,"description":"Logo variant\n- `glyph`: Cloud icon only\n- `full`: Cloud icon with \"CLOUDFLARE\" wordmark below","values":["glyph","full"],"descriptions":{"glyph":"Cloud glyph only (logomark)","full":"Full logo with cloud glyph and wordmark stacked"},"default":"full"}},"examples":["","","
\n \n
\n \n
\n
\n \n
\n
","
\n \n
\n \n
\n
\n \n
\n
","
\n \n \n \n
","
\n \n \n \n \n Logo\n \n \n \n \n copyToClipboard(\n generateCloudflareLogoSvg({ variant: \"glyph\" }),\n \"glyph\",\n )\n }\n >\n {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n \n \n copyToClipboard(\n generateCloudflareLogoSvg({ variant: \"full\" }),\n \"full\",\n )\n }\n >\n {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n \n \n window.open(\n \"https://www.cloudflare.com/press-kit/\",\n \"_blank\",\n \"noopener\",\n )\n }\n >\n Download brand assets\n \n \n \n window.open(\n \"https://www.cloudflare.com/brand-assets/\",\n \"_blank\",\n \"noopener\",\n )\n }\n >\n Visit brand guidelines\n \n \n \n\n \n Click to open the brand assets menu\n \n
","","
\n \n \n
\n \n
\n
","
\n \n © 2026 Your Company. All rights reserved.\n \n \n
"],"colors":["bg-kumo-base","ring-kumo-hairline","text-kumo-default"]},"Code":{"name":"Code","type":"component","description":"Code component","importPath":"@cloudflare/kumo","category":"Display","props":{"lang":{"type":"enum","optional":true,"description":"Language hint for the code content.\n- `\"ts\"` — TypeScript code\n- `\"tsx\"` — TypeScript JSX code\n- `\"jsonc\"` — JSON with comments\n- `\"bash\"` — Shell/Bash commands\n- `\"css\"` — CSS styles","values":["ts","tsx","jsonc","bash","css"],"descriptions":{"ts":"TypeScript code","tsx":"TypeScript JSX code","jsonc":"JSON with comments","bash":"Shell/Bash commands","css":"CSS styles"},"default":"ts"},"code":{"type":"string","required":true,"description":"The code string to display."},"values":{"type":"Record","optional":true,"description":"Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":[],"colors":["bg-kumo-base","border-kumo-fill","text-kumo-subtle"],"subComponents":{"Block":{"name":"Block","description":"Block sub-component","props":{"code":{"type":"string","required":true},"lang":{"type":"CodeLang","optional":true}}}},"styling":{"baseTokens":["text-kumo-subtle"],"typography":{"fontFamily":"font-mono","fontSize":"text-sm","lineHeight":"leading-[20px]"},"dimensions":{"margin":"m-0","padding":"p-0","width":"w-auto"},"appearance":{"borderRadius":"rounded-none","border":"border-none","background":"bg-transparent"}}},"Collapsible":{"name":"Collapsible","type":"component","description":"Collapsible — a composable disclosure component for showing/hiding content. Built on Base UI's Collapsible with full composition support. ## Basic Usage ```tsx const [open, setOpen] = useState(false); }> Show details Hidden content revealed when expanded. ``` ## With Default Styling Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style: ```tsx Show details Content with border-left accent ``` ## Controlled Accordion Pattern ```tsx const [activeIndex, setActiveIndex] = useState(null); {items.map((item, i) => ( setActiveIndex(open ? i : null)} > {item.title} {item.content} ))} ```","importPath":"@cloudflare/kumo","category":"Display","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback when collapsed state changes"}},"examples":["
\n \n What is Kumo?\n \n Kumo is Cloudflare's new design system.\n \n \n
","
\n \n What is Kumo?\n \n Kumo is Cloudflare's new design system.\n \n \n
","
\n \n What is Kumo?\n \n Kumo is Cloudflare's new design system.\n \n \n \n How do I use it?\n \n Install the components and import them into your project.\n \n \n \n Is it open source?\n \n Check the repository for license information.\n \n \n
","
\n \n }\n >\n {isOpen ? \"Hide details\" : \"Show details\"}\n \n \n \n This panel uses custom styling instead of the default border-left accent.\n \n \n \n
","
\n \n Edit details\n \n \n Type something below, then collapse and re-open — your input is\n preserved because the panel stays mounted.\n \n \n \n \n
","
\n {items.map((item, i) => (\n setActiveIndex(open ? i : null)}\n >\n {item.title}\n \n {item.content}\n \n \n ))}\n
"],"colors":["border-kumo-fill","text-kumo-link"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{"className":{"type":"string","optional":true}}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{"className":{"type":"string","optional":true}}},"Panel":{"name":"Panel","description":"Panel sub-component","props":{"className":{"type":"string","optional":true}}},"DefaultTrigger":{"name":"DefaultTrigger","description":"DefaultTrigger sub-component","props":{"children":{"type":"ReactNode","required":true},"className":{"type":"string","optional":true}}},"DefaultPanel":{"name":"DefaultPanel","description":"DefaultPanel sub-component","props":{"children":{"type":"ReactNode","required":true},"className":{"type":"string","optional":true}}}}},"Combobox":{"name":"Combobox","type":"component","description":"Combobox — autocomplete input with filterable dropdown list. Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`, `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`, `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.","importPath":"@cloudflare/kumo","category":"Input","props":{"size":{"type":"enum","optional":true,"description":"Size of the combobox trigger. Matches Input component sizes.\n- `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n- `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n- `\"base\"` — Default size (h-9 / 36px)\n- `\"lg\"` — Large for prominent fields (h-10 / 40px)","values":["xs","sm","base","lg"],"default":"base"},"inputSide":{"type":"enum","optional":true,"description":"Position of the text input relative to chips in multi-select mode.\n- `\"right\"` — Input inline to the right of chips\n- `\"top\"` — Input above chips","values":["right","top"],"descriptions":{"right":"Input positioned inline to the right of chips","top":"Input positioned above chips"},"default":"right"},"items":{"type":"T[]","required":true,"description":"Array of items to display in the dropdown"},"value":{"type":"T | T[]","optional":true,"description":"Currently selected value(s)"},"children":{"type":"ReactNode","optional":true,"description":"Combobox content (trigger, content, items)"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the combobox (enables Field wrapper) - can be a string or any React node"},"required":{"type":"boolean","optional":true,"description":"Whether the combobox is required"},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the combobox"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"},"onValueChange":{"type":"(value: T | T[]) => void","description":"Callback when selection changes"},"multiple":{"type":"boolean","description":"Allow multiple selections"},"isItemEqualToValue":{"type":"(item: T, value: T) => boolean","description":"Custom equality function for comparing items"}},"examples":[" setValue(v as string | null)}\n items={fruits}\n >\n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n "," setValue(v as Language)}\n items={languages}\n >\n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n "," setValue(v as Language | null)}\n items={languages}\n >\n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n "," setValue(v as ServerLocation | null)}\n items={servers}\n >\n \n \n \n \n {(group: ServerLocationGroup) => (\n \n {group.value}\n \n {(item: ServerLocation) => (\n \n {item.label}\n \n )}\n \n \n )}\n \n \n ","
\n \n bot.value === selected.value\n }\n multiple\n >\n (\n {selected.label}\n )}\n inputSide=\"right\"\n />\n \n \n \n {(item: BotItem) => (\n \n
\n {item.label}\n {item.author}\n
\n \n )}\n \n \n \n \n
","
\n \n \n \n \n \n {(item: DatabaseItem) => (\n \n {item.label}\n \n )}\n \n \n \n
","
\n \n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n\n \n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n \n
","
\n \n \n \n \n \n {(item: DatabaseItemWithDisabled) => (\n \n \n {item.label}\n {item.reason && (\n \n {\" — \"}\n {item.reason}\n \n )}\n \n \n )}\n \n \n \n
","
\n \n \n \n \n \n {(item: DatabaseItem) => (\n \n {item.label}\n \n )}\n \n \n \n
","
\n setSmValue(v as string | null)}\n items={fruits.slice(0, 8)}\n >\n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n setBaseValue(v as string | null)}\n items={fruits.slice(0, 8)}\n >\n \n \n \n \n {(item: string) => (\n \n {item}\n \n )}\n \n \n \n
","
\n setSmValue(v as Language)}\n items={languages}\n >\n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n \n setBaseValue(v as Language)}\n items={languages}\n >\n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n \n
"," setValue(v as Language)}\n items={languages}\n >\n \n }\n >\n \n \n {value.emoji} {value.label}\n \n \n \n \n \n \n \n \n {(item: Language) => (\n \n {item.emoji} {item.label}\n \n )}\n \n \n "],"colors":["bg-kumo-base","bg-kumo-fill-hover","bg-kumo-overlay","bg-kumo-tint","border-kumo-hairline","ring-kumo-hairline","ring-kumo-line","text-kumo-default","text-kumo-placeholder","text-kumo-subtle"],"subComponents":{"Content":{"name":"Content","description":"Content sub-component","props":{"className":{"type":"string","optional":true},"align":{"type":"ComboboxBase.Positioner.Props[\"align\"]","optional":true},"alignOffset":{"type":"ComboboxBase.Positioner.Props[\"alignOffset\"]","optional":true},"side":{"type":"ComboboxBase.Positioner.Props[\"side\"]","optional":true},"sideOffset":{"type":"ComboboxBase.Positioner.Props[\"sideOffset\"]","optional":true},"container":{"type":"PortalContainer","optional":true}}},"TriggerValue":{"name":"TriggerValue","description":"TriggerValue sub-component","props":{}},"TriggerInput":{"name":"TriggerInput","description":"TriggerInput sub-component","props":{}},"TriggerMultipleWithInput":{"name":"TriggerMultipleWithInput","description":"TriggerMultipleWithInput sub-component","props":{}},"Chip":{"name":"Chip","description":"Chip sub-component","props":{}},"Item":{"name":"Item","description":"Item sub-component","props":{}},"Input":{"name":"Input","description":"Input sub-component","props":{}},"Empty":{"name":"Empty","description":"Empty sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Collection":{"name":"Collection","description":"Renders filtered list items. Use when you need more control over item rendering.","props":{"children":{"type":"(item: T, index: number) => ReactNode","required":true,"description":"Function that receives each filtered item and returns a node"}},"isPassThrough":true,"baseComponent":"ComboboxBase.Collection","usageExamples":["\n {(item, index) => (\n \n {item.label}\n \n )}\n"]},"Trigger":{"name":"Trigger","description":"Trigger sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Trigger"},"Value":{"name":"Value","description":"Value sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Value"},"Icon":{"name":"Icon","description":"Icon sub-component (wraps ComboboxBase)","props":{},"isPassThrough":true,"baseComponent":"ComboboxBase.Icon"}}},"CommandPalette":{"name":"CommandPalette","type":"component","description":"CommandPalette — accessible command palette / spotlight search overlay. Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`), `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`, `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`. Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.","importPath":"@cloudflare/kumo","category":"Navigation","props":{"open":{"type":"boolean","required":true,"description":"Whether the dialog is open"},"children":{"type":"ReactNode","optional":true,"description":"Child content - typically one or more Panel components"},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context."}},"examples":["
\n \n {selectedItem && (\n

\n Last selected:{\" \"}\n {selectedItem}\n

\n )}\n\n group.label}\n onSelect={(item, { newTab }) => {\n console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n handleSelect(item);\n }}\n getSelectableItems={getSelectableItems}\n >\n \n \n \n {(group: CommandGroup) => (\n \n \n {group.label}\n \n \n {(item: CommandItem) => (\n handleSelect(item)}\n >\n \n {item.icon && (\n {item.icon}\n )}\n {item.title}\n \n \n )}\n \n \n )}\n \n No commands found\n \n \n \n \n ↑↓\n \n Navigate\n \n \n \n ↵\n \n Select\n \n \n \n
","
\n \n\n item.title}\n onSelect={(item) => {\n console.log(\"Selected:\", item.title);\n setOpen(false);\n }}\n getSelectableItems={(items) => items}\n >\n \n \n \n {(item: SimpleItem) => (\n {\n console.log(\"Clicked:\", item.title);\n setOpen(false);\n }}\n >\n {item.title}\n \n )}\n \n No actions found\n \n \n
","
\n \n\n group.label}\n getSelectableItems={getSelectableItems}\n >\n \n \n {loading ? (\n \n ) : (\n <>\n \n {(group: CommandGroup) => (\n \n \n {group.label}\n \n \n {(item: CommandItem) => (\n setOpen(false)}\n >\n \n {item.icon && (\n \n {item.icon}\n \n )}\n {item.title}\n \n \n )}\n \n \n )}\n \n No results found\n \n )}\n \n \n
","
\n \n\n group.label}\n onSelect={(item) => {\n console.log(\"Selected:\", item.title);\n setOpen(false);\n setSearch(\"\");\n }}\n getSelectableItems={getSelectableItems}\n >\n \n \n \n {(group: CommandGroup) => (\n \n \n {group.label}\n \n \n {(item: CommandItem) => (\n {\n setOpen(false);\n setSearch(\"\");\n }}\n >\n \n {item.icon && (\n {item.icon}\n )}\n {item.title}\n \n \n )}\n \n \n )}\n \n No commands found\n \n \n
","
\n \n\n item.title}\n getSelectableItems={(items) => items}\n >\n \n \n \n {(item: SearchResult) => (\n {\n console.log(\"Navigate to:\", item.title);\n setOpen(false);\n }}\n />\n )}\n \n No pages found\n \n \n \n \n ↑↓\n \n Navigate\n \n \n \n ⌘↵\n \n Open in new tab\n \n \n \n
"],"colors":["bg-kumo-base","bg-kumo-elevated","bg-kumo-overlay","bg-kumo-warning","ring-kumo-brand","ring-kumo-hairline","text-kumo-default","text-kumo-subtle"]},"DatePicker":{"name":"DatePicker","type":"component","description":"DatePicker — a date selection calendar. Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.","importPath":"@cloudflare/kumo","category":"Other","props":{"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["
\n {\n if (d) {\n setDate(d);\n }\n }}\n />\n

\n Selected: {date ? date.toLocaleDateString() : \"None\"}\n

\n
","
\n \n

\n Selected: {dates?.length ?? 0} date(s)\n

\n
","
\n \n

\n Range:{\" \"}\n {range?.from\n ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n : \"None\"}\n

\n
","
\n Select 3-7 nights\n }\n />\n
","\n }\n >\n {date ? date.toLocaleDateString() : \"Pick a date\"}\n \n \n \n \n ","\n }\n >\n {formatRange()}\n \n \n \n \n ","\n }\n >\n {formatRange()}\n \n \n
\n
\n {presets.map((preset) => {\n const isActive = isPresetActive(preset);\n return (\n handlePresetClick(preset)}\n className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n isActive\n ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n : \"text-kumo-subtle hover:bg-kumo-control\"\n }`}\n >\n {preset.label}\n \n );\n })}\n
\n
\n \n
\n
\n \n ","\n {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n

\n }\n />"],"colors":["bg-kumo-base"]},"DateRangePicker":{"name":"DateRangePicker","type":"component","description":"DateRangePicker — dual-calendar date range selector. Renders two side-by-side month calendars with click-to-select start/end dates, hover preview of the range, a timezone footer, and a reset button.","importPath":"@cloudflare/kumo","category":"Input","props":{"size":{"type":"enum","optional":true,"description":"Calendar size.\n- `\"sm\"` — Compact calendar for tight spaces\n- `\"base\"` — Default calendar size\n- `\"lg\"` — Large calendar for prominent date selection","values":["sm","base","lg"],"descriptions":{"sm":"Compact calendar for tight spaces","base":"Default calendar size","lg":"Large calendar for prominent date selection"},"classes":{"sm":"p-3 gap-2","base":"p-4 gap-2.5","lg":"p-5 gap-3"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Visual variant.\n- `\"default\"` — Standard appearance with overlay background\n- `\"subtle\"` — Minimal background","values":["default","subtle"],"descriptions":{"default":"Default calendar appearance","subtle":"Subtle calendar with minimal background"},"classes":{"default":"bg-kumo-overlay","subtle":"bg-kumo-base"},"default":"default"},"timezone":{"type":"string","optional":true,"description":"Display timezone string shown in the footer."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"onStartDateChange":{"type":"(date: Date | null) => void","description":"Callback when start date changes"},"onEndDateChange":{"type":"(date: Date | null) => void","description":"Callback when end date changes"}},"examples":[],"colors":["bg-kumo-base","bg-kumo-contrast","bg-kumo-fill","bg-kumo-interact","bg-kumo-overlay","ring-kumo-focus","text-kumo-default","text-kumo-inverse","text-kumo-subtle"],"styling":{"sizeVariants":{"sm":{"height":0,"classes":"p-3 gap-2","dimensions":{"calendarWidth":168,"cellHeight":22,"cellWidth":24,"textSize":12,"iconSize":14,"padding":12,"gap":8}},"base":{"height":0,"classes":"p-4 gap-2.5","dimensions":{"calendarWidth":196,"cellHeight":26,"cellWidth":28,"textSize":14,"iconSize":16,"padding":16,"gap":10}},"lg":{"height":0,"classes":"p-5 gap-3","dimensions":{"calendarWidth":252,"cellHeight":32,"cellWidth":36,"textSize":16,"iconSize":18,"padding":20,"gap":12}}}}},"Dialog":{"name":"Dialog","type":"component","description":"Dialog component","importPath":"@cloudflare/kumo","category":"Overlay","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"children":{"type":"ReactNode","optional":true,"description":"Dialog content (typically Title, Description, Close, and action buttons)."},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context."},"size":{"type":"enum","optional":true,"description":"Dialog width.\n- `\"sm\"` — Small (min 288px) for simple confirmations\n- `\"base\"` — Default (min 384px)\n- `\"lg\"` — Large (min 512px) for complex content\n- `\"xl\"` — Extra large (min 768px) for detailed views","values":["base","sm","lg","xl"],"descriptions":{"base":"Default dialog width","sm":"Small dialog for simple confirmations","lg":"Large dialog for complex content","xl":"Extra large dialog for detailed views"},"classes":{"base":"sm:min-w-96","sm":"min-w-72","lg":"min-w-[32rem]","xl":"min-w-[48rem]"},"default":"base"}},"examples":["\n } />\n \n
\n \n Modal Title\n \n (\n }\n aria-label=\"Close\"\n />\n )}\n />\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n \n ","\n } />\n \n
\n \n Modal Title\n \n (\n }\n aria-label=\"Close\"\n />\n )}\n />\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n
\n (\n \n )}\n />\n (\n \n )}\n />\n
\n \n ","\n (\n \n )}\n />\n \n
\n
\n \n
\n \n Delete Project?\n \n
\n \n This action cannot be undone. This will permanently delete the project\n and all associated data.\n \n
\n (\n \n )}\n />\n (\n \n )}\n />\n
\n \n ","\n (\n \n )}\n />\n \n
\n
\n \n
\n \n Delete Account?\n \n
\n \n This action cannot be undone. All your data will be permanently\n removed from our servers. Are you sure you want to proceed?\n \n
\n (\n \n )}\n />\n (\n \n )}\n />\n
\n \n ","\n } />\n \n
\n \n Create Resource\n \n (\n }\n aria-label=\"Close\"\n />\n )}\n />\n
\n \n Select a region for your new resource.\n \n \n regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n }\n >\n {regions.map((region) => (\n \n {region.label}\n \n ))}\n \n
\n (\n \n )}\n />\n \n
\n \n ","\n } />\n \n
\n \n Create Resource\n \n (\n }\n aria-label=\"Close\"\n />\n )}\n />\n
\n \n Search and select a region for your new resource.\n \n \n \n \n No regions found\n \n {(item: { value: string; label: string }) => (\n \n {item.label}\n \n )}\n \n \n \n
\n (\n \n )}\n />\n \n
\n \n ","\n } />\n \n
\n \n Resource Actions\n \n (\n }\n aria-label=\"Close\"\n />\n )}\n />\n
\n \n Choose an action for the selected resource.\n \n \n Actions} />\n \n Edit\n Duplicate\n \n Delete\n \n \n
\n (\n \n )}\n />\n
\n \n "],"colors":["bg-kumo-base","bg-kumo-recessed","ring-kumo-line","text-kumo-default"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Title":{"name":"Title","description":"Title sub-component","props":{}},"Description":{"name":"Description","description":"Description sub-component","props":{}},"Close":{"name":"Close","description":"Close sub-component","props":{}}},"styling":{"dimensions":{"sm":{"width":350,"titleSize":20,"descSize":16,"padding":16,"gap":8,"buttonSize":"sm"},"base":{"width":384,"titleSize":20,"descSize":16,"padding":24,"gap":16,"buttonSize":"base"},"lg":{"width":512,"titleSize":20,"descSize":16,"padding":24,"gap":16,"buttonSize":"base"},"xl":{"width":768,"titleSize":20,"descSize":16,"padding":24,"gap":16,"buttonSize":"base"}},"baseTokens":{"background":"color-surface","text":"text-color-surface","borderRadius":12,"shadow":"shadow-m"},"backdrop":{"background":"color-surface-secondary","opacity":0.8},"header":{"title":{"fontWeight":600,"color":"text-color-surface"},"closeIcon":{"name":"ph-x","size":20,"color":"text-color-muted"}},"description":{"fontWeight":400,"color":"text-color-muted"},"buttons":{"primary":{"background":"color-primary","text":"white"},"secondary":{"ring":"color-border","text":"text-color-surface"}}}},"DropdownMenu":{"name":"DropdownMenu","type":"component","description":"DropdownMenu — accessible dropdown menu anchored to a trigger. Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`. Built on `@base-ui/react/menu`.","importPath":"@cloudflare/kumo","category":"Overlay","props":{"variant":{"type":"enum","optional":true,"description":"Visual style of the dropdown item.\n- `\"default\"` — Standard item appearance\n- `\"danger\"` — Destructive action with red text","values":["default","danger"],"descriptions":{"default":"Default dropdown item appearance","danger":"Destructive action item"},"classes":{"danger":"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger"},"default":"default"}},"examples":["\n Add} />\n \n Worker\n Pages\n KV Namespace\n \n ","\n View Options} />\n \n \n Display\n \n Show sidebar\n \n \n Show line numbers\n \n \n Word wrap\n \n \n \n ","\n Account} />\n \n Profile\n Billing\n Dark mode\n\n {/* Language submenu with RadioGroup */}\n \n Language\n \n \n \n {languages.map((lang) => (\n \n {lang.label}\n \n \n ))}\n \n \n \n \n\n {/* Timezone submenu with RadioGroup */}\n \n Set Timezone\n \n \n \n {timezones.map((tz) => (\n \n {tz.label}\n \n \n ))}\n \n \n \n \n\n \n \n Log out\n \n \n ","\n Edit} />\n \n Rename\n Duplicate\n \n Move to folder\n Add to favorites\n \n \n Delete\n \n \n ","
\n \n Actions} />\n \n setLastAction(\"Duplicated\")}\n >\n Duplicate\n \n setLastAction(\"Renamed\")}\n >\n Rename\n \n \n setLastAction(\"Deleted\")}\n >\n Delete\n \n \n \n {lastAction && (\n

\n Last action: {lastAction}\n

\n )}\n
","\n }\n >\n \n MR\n \n \n \n Profile\n Settings\n \n \n Log out\n \n \n ","\n Resources} />\n \n \n Settings\n \n \n Documentation\n \n \n \n Developer Docs\n \n \n "],"colors":["bg-kumo-control","bg-kumo-danger","bg-kumo-hairline","bg-kumo-overlay","bg-kumo-tint","ring-kumo-brand","ring-kumo-focus","ring-kumo-line","text-kumo-danger","text-kumo-default"],"subComponents":{"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Portal":{"name":"Portal","description":"Portal sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.Portal"},"Sub":{"name":"Sub","description":"Sub sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.SubmenuRoot"},"SubTrigger":{"name":"SubTrigger","description":"SubTrigger sub-component","props":{"icon":{"type":"Icon","description":"Icon displayed before the label."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."}}},"SubContent":{"name":"SubContent","description":"SubContent sub-component","props":{}},"Content":{"name":"Content","description":"Content sub-component","props":{"sideOffset":{"type":"number","description":"Distance in pixels from the trigger.","default":"8"},"container":{"type":"PortalContainer","description":"Container element for the portal. Use this to render inside a Shadow DOM or custom container."}}},"Item":{"name":"Item","description":"Item sub-component","props":{"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"variant":{"type":"\"default\" | \"danger\"","description":"Visual style of the item.","default":"\"default\""},"selected":{"type":"boolean","description":"Shows a check mark indicator when true."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"onClick":{"type":"(event: React.MouseEvent) => void","description":"Callback when the item is clicked."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"true"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"LinkItem":{"name":"LinkItem","description":"LinkItem sub-component","props":{"href":{"type":"string","description":"URL to navigate to when clicked."},"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"variant":{"type":"\"default\" | \"danger\"","description":"Visual style of the item.","default":"\"default\""},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"target":{"type":"string","description":"Link target attribute (e.g. \"_blank\" for new tab)."},"render":{"type":"ReactElement | ((props, state) => ReactElement)","description":"Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link)."}}},"CheckboxItem":{"name":"CheckboxItem","description":"CheckboxItem sub-component","props":{"checked":{"type":"boolean","description":"Whether the item is checked."},"defaultChecked":{"type":"boolean","description":"Whether the item is initially checked (uncontrolled).","default":"false"},"onCheckedChange":{"type":"(checked: boolean, event: ChangeEventDetails) => void","description":"Callback when the checked state changes."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"false"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"RadioGroup":{"name":"RadioGroup","description":"RadioGroup sub-component (wraps DropdownMenuPrimitive)","props":{"value":{"type":"any","description":"The controlled value of the currently selected radio item."},"defaultValue":{"type":"any","description":"The initially selected value (uncontrolled)."},"onValueChange":{"type":"(value: any, event: ChangeEventDetails) => void","description":"Callback when the selected value changes."},"disabled":{"type":"boolean","description":"When true, all radio items in the group are disabled."}},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.RadioGroup"},"RadioItem":{"name":"RadioItem","description":"RadioItem sub-component","props":{"value":{"type":"any","required":true,"description":"The value of this radio item."},"icon":{"type":"Icon | ReactNode","description":"Icon displayed before the label."},"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."},"closeOnClick":{"type":"boolean","description":"Whether the menu closes after clicking this item.","default":"false"},"disabled":{"type":"boolean","description":"When true, the item cannot be interacted with."}}},"RadioItemIndicator":{"name":"RadioItemIndicator","description":"RadioItemIndicator sub-component","props":{}},"Label":{"name":"Label","description":"Label sub-component","props":{"inset":{"type":"boolean","description":"Adds left padding to align with items that have icons."}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}},"Shortcut":{"name":"Shortcut","description":"Shortcut sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.Group"}}},"Empty":{"name":"Empty","type":"component","description":"Placeholder shown when a list, table, or page has no content to display.","importPath":"@cloudflare/kumo","category":"Display","props":{"size":{"type":"enum","optional":true,"description":"Size of the empty state container.\n- `\"sm\"` — Compact empty state for smaller containers\n- `\"base\"` — Default empty state size\n- `\"lg\"` — Large empty state for prominent placement","values":["sm","base","lg"],"descriptions":{"sm":"Compact empty state for smaller containers","base":"Default empty state size","lg":"Large empty state for prominent placement"},"classes":{"sm":"px-6 py-8 gap-4","base":"px-10 py-16 gap-6","lg":"px-12 py-20 gap-8"},"default":"base"},"icon":{"type":"ReactNode","optional":true,"description":"Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`)."},"title":{"type":"string","required":true,"description":"Primary heading text for the empty state."},"description":{"type":"string","optional":true,"description":"Secondary description text displayed below the title."},"commandLine":{"type":"string","optional":true,"description":"Shell command displayed in a copyable code block."},"contents":{"type":"ReactNode","optional":true,"description":"Additional content (buttons, links) rendered below the description."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["}\n title=\"No packages found\"\n description=\"Get started by installing your first package.\"\n commandLine=\"npm install @cloudflare/kumo\"\n contents={\n
\n \n \n
\n }\n />","
\n
\n

Small

\n }\n title=\"No data available\"\n description=\"There is no data to display.\"\n />\n
\n
\n

Base

\n }\n title=\"No data available\"\n description=\"There is no data to display.\"\n />\n
\n
\n

Large

\n }\n title=\"No data available\"\n description=\"There is no data to display.\"\n />\n
\n
","}\n title=\"No projects found\"\n description=\"Get started by creating your first project using the command below.\"\n commandLine=\"npm create kumo-project\"\n />","}\n title=\"No connection\"\n description=\"Unable to connect to the server. Please check your connection and try again.\"\n contents={\n
\n \n \n
\n }\n />","",""],"colors":["bg-kumo-control","bg-kumo-overlay","border-kumo-fill","border-kumo-interact","text-kumo-brand","text-kumo-default","text-kumo-inactive","text-kumo-subtle","text-kumo-success"]},"Field":{"name":"Field","type":"component","description":"Form field wrapper that provides a label, optional description, and error display around any form control. Built on Base UI Field primitives.","importPath":"@cloudflare/kumo","category":"Input","props":{"controlFirst":{"type":"boolean","optional":true,"description":"When `true`, places the control before the label (for checkbox/switch layouts)."},"children":{"type":"ReactNode","optional":true,"description":"The form control element(s) to wrap (Input, Select, Checkbox, etc.)."},"label":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"required":{"type":"boolean","optional":true,"description":"When explicitly `false`, shows gray \"(optional)\" text after the label. When `true` or `undefined`, no indicator is shown."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"error":{"type":"object","optional":true,"description":"Validation error with a message and a browser `ValidityState` match key."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the control (hidden when `error` is present)."},"hideLabel":{"type":"boolean","optional":true,"description":"When `true`, Field renders layout, description, and error but skips the `