{"version":"1.0.0","components":{"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":"Visual style of the badge.\n- `\"primary\"` — High-emphasis badge for important labels\n- `\"secondary\"` — Subtle badge for secondary information\n- `\"destructive\"` — Error or danger state indicator\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features","values":["primary","secondary","destructive","success","outline","beta"],"descriptions":{"primary":"Default high-emphasis badge for important labels","secondary":"Subtle badge for secondary information","destructive":"Error or danger state indicator","success":"Success or positive state indicator","outline":"Bordered badge with transparent background","beta":"Indicates beta or experimental features"},"classes":{"primary":"bg-kumo-contrast text-kumo-inverse","secondary":"bg-kumo-fill text-kumo-default","destructive":"bg-kumo-danger text-white","success":"bg-kumo-success text-white","outline":"border border-kumo-fill bg-transparent text-kumo-default","beta":"border border-dashed border-kumo-brand bg-transparent text-kumo-link"},"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":["
"],"colors":["bg-kumo-contrast","bg-kumo-danger","bg-kumo-fill","bg-kumo-success","border-kumo-brand","border-kumo-fill","text-kumo-default","text-kumo-inverse","text-kumo-link"],"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."},"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/10 border-kumo-info/30 text-kumo-info selection:bg-kumo-info-tint","alert":"bg-kumo-warning/10 border-kumo-warning/30 text-kumo-warning selection:bg-kumo-warning-tint","error":"bg-kumo-danger/10 border-kumo-danger/30 text-kumo-danger selection:bg-kumo-danger-tint"},"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 />","}>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","values":["base","square","circle"],"default":"base","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"}},"size":{"type":"enum","values":["xs","sm","base","lg"],"default":"base","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"}},"compactSize":{"type":"enum","values":["xs","sm","base","lg"],"classes":{"xs":"size-3.5","sm":"size-6.5","base":"size-9","lg":"size-10"}},"variant":{"type":"enum","values":["primary","secondary","ghost","destructive","secondary-destructive","outline"],"default":"secondary","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 focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50","secondary":"bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-ring 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:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base","outline":"bg-transparent text-kumo-default ring-2 ring-kumo-ring"},"stateClasses":{"primary":{"hover":"hover:bg-kumo-brand-hover","focus":"focus:bg-kumo-brand-hover","disabled":"disabled:bg-kumo-brand/50"},"secondary":{"not-disabled":"not-disabled:hover:border-secondary! 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:border-secondary! 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"}}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["
\n \n \n
","","","","","","","
\n \n \n \n \n
","","
\n \n \n
","",""],"colors":["bg-kumo-base","bg-kumo-brand","bg-kumo-brand-hover","bg-kumo-danger","bg-kumo-tint","ring-kumo-line","ring-kumo-ring","text-kumo-danger","text-kumo-default","text-kumo-subtle"]},"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-ring [&:hover>span]:ring-kumo-ring","error":"[&>span]:ring-kumo-danger"},"stateClasses":{"default":{"focus":"[&:focus-within>span]:ring-kumo-ring","hover":"[&:hover>span]:ring-kumo-ring"}},"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"},"onValueChange":{"type":"(checked: boolean) => void","description":"Callback when checkbox value changes"}},"examples":["","","","","","","","\n \n \n \n "," {}}\n >\n \n \n "],"colors":["bg-kumo-base","bg-kumo-contrast","border-kumo-line","ring-kumo-contrast","ring-kumo-danger","ring-kumo-line","ring-kumo-ring","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","required":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}}}},"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-ring"],"focus":["ring-kumo-ring"],"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."},"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","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":["","","
",""],"colors":["bg-kumo-base","ring-kumo-line","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-strong"],"subComponents":{"Block":{"name":"Block","description":"Block sub-component","props":{"code":{"type":"string","required":true},"lang":{"type":"CodeLang","optional":true}}}},"styling":{"baseTokens":["text-kumo-strong"],"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 component for showing/hiding content. Features: - Animated chevron indicator (rotates 180° when open) - Accessible with aria-expanded and aria-controls - Content panel with left border accent","importPath":"@cloudflare/kumo","category":"Display","props":{"children":{"type":"ReactNode","optional":true},"label":{"type":"string","required":true,"description":"Text label displayed in the trigger button"},"open":{"type":"boolean","optional":true,"description":"Whether the collapsible content is visible"},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the content panel"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback when collapsed state changes"}},"examples":["
\n \n Kumo is Cloudflare's new design system.\n \n
","
\n \n Kumo is Cloudflare's new design system.\n \n
","
\n \n Kumo is Cloudflare's new design system.\n \n \n Install the components and import them into your project.\n \n \n Check the repository for license information.\n \n
"],"colors":["border-kumo-fill","text-kumo-link"]},"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 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 ","
"],"colors":["bg-kumo-base","bg-kumo-fill-hover","bg-kumo-overlay","bg-kumo-tint","border-kumo-line","ring-kumo-line","text-kumo-default","text-kumo-strong","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}}},"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"]}}},"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"}},"examples":["
"],"colors":["bg-kumo-base","bg-kumo-elevated","bg-kumo-overlay","bg-kumo-warning","ring-kumo-line","text-kumo-default","text-kumo-strong","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 ","\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","text-kumo-default","text-kumo-inverse","text-kumo-strong","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)."},"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 \n ","\n (\n \n )}\n />\n \n ","\n (\n \n )}\n />\n \n ","\n } />\n \n ","\n } />\n \n ","\n } />\n \n "],"colors":["bg-kumo-base","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":[],"colors":["bg-kumo-control","bg-kumo-danger","bg-kumo-line","bg-kumo-overlay","bg-kumo-tint","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":{}},"SubContent":{"name":"SubContent","description":"SubContent sub-component","props":{}},"Content":{"name":"Content","description":"Content sub-component","props":{}},"Item":{"name":"Item","description":"Item sub-component","props":{}},"LinkItem":{"name":"LinkItem","description":"LinkItem sub-component","props":{}},"CheckboxItem":{"name":"CheckboxItem","description":"CheckboxItem sub-component","props":{}},"RadioGroup":{"name":"RadioGroup","description":"RadioGroup sub-component (wraps DropdownMenuPrimitive)","props":{},"isPassThrough":true,"baseComponent":"DropdownMenuPrimitive.RadioGroup"},"RadioItem":{"name":"RadioItem","description":"RadioItem sub-component","props":{}},"RadioItemIndicator":{"name":"RadioItemIndicator","description":"RadioItemIndicator sub-component","props":{}},"Label":{"name":"Label","description":"Label sub-component","props":{}},"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 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-strong","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)."}},"examples":[],"colors":["text-kumo-danger","text-kumo-default","text-kumo-subtle"]},"Grid":{"name":"Grid","type":"component","description":"Responsive CSS grid layout container with preset column configurations.","importPath":"@cloudflare/kumo","category":"Layout","props":{"children":{"type":"ReactNode","optional":true,"description":"Grid items to render."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"mobileDivider":{"type":"boolean","optional":true,"description":"Show dividers between grid items on mobile (only works with `\"4up\"` variant)."},"gap":{"type":"enum","optional":true,"description":"Gap size between grid items.\n- `\"none\"` — No gap\n- `\"sm\"` — 12px gap\n- `\"base\"` — Responsive gap (8px → 24px → 32px)\n- `\"lg\"` — 32px gap","values":["none","sm","base","lg"],"descriptions":{"none":"No gap between grid items","sm":"Small gap between grid items","base":"Default responsive gap between grid items","lg":"Large gap between grid items"},"classes":{"none":"gap-0","sm":"gap-3","base":"gap-2 md:gap-6 lg:gap-8","lg":"gap-8"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Responsive column layout variant.\n- `\"2up\"` — 1 col → 2 cols at md\n- `\"side-by-side\"` — Always 2 cols\n- `\"2-1\"` — 66%/33% split at md\n- `\"1-2\"` — 33%/66% split at md\n- `\"3up\"` — 1 → 2 → 3 cols\n- `\"4up\"` — 1 → 2 → 3 → 4 cols\n- `\"6up\"` — 2 → 3 → 4 → 6 cols\n- `\"1-2-4up\"` — 1 → 2 → 4 cols","values":["2up","side-by-side","2-1","1-2","1-3up","3up","4up","6up","1-2-4up"],"descriptions":{"2up":"Grid items stack on small screens, display side-by-side on medium screens and up","side-by-side":"Grid items always displayed side-by-side","2-1":"Two-thirds / one-third split (66%/33%) on medium screens and up","1-2":"One-third / two-thirds split (33%/66%) on medium screens and up","1-3up":"Grid items stack on small screens, expand to 3 across on large screens","3up":"Grid items stack on small screens, 2 across on medium, 3 across on large","4up":"Grid items stack on small screens, progressively increase columns at larger breakpoints","6up":"Grid items start at 2 across, expand to 6 across on XL","1-2-4up":"Grid items stack on small screens, 2 across on medium, 4 across on large"},"classes":{"2up":"grid-cols-1 md:grid-cols-2","side-by-side":"grid-cols-2","2-1":"grid-cols-1 md:grid-cols-[2fr_1fr]","1-2":"grid-cols-1 md:grid-cols-[1fr_2fr]","1-3up":"grid-cols-1 lg:grid-cols-3","3up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-3","4up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","6up":"grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6","1-2-4up":"grid-cols-1 md:grid-cols-2 lg:grid-cols-4"}}},"examples":["\n \n \n Item 1\n
\n \n \n "],"colors":["border-kumo-line"]},"Input":{"name":"Input","type":"component","description":"Input component","importPath":"@cloudflare/kumo","category":"Input","props":{"label":{"type":"ReactNode","optional":true,"description":"Label content for the input (enables 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"},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the input"},"error":{"type":"string | object","optional":true,"description":"Error message or validation error object"},"size":{"type":"enum","optional":true,"description":"Input size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default size\n- `\"lg\"` — Large for prominent fields","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small input for compact UIs","sm":"Small input for secondary fields","base":"Default input size","lg":"Large input for prominent fields"},"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,"description":"Visual variant.\n- `\"default\"` — Standard input\n- `\"error\"` — Error state for validation failures","values":["default","error"],"descriptions":{"default":"Default input appearance","error":"Error state for validation failures"},"classes":{"default":"focus:ring-kumo-ring","error":"!ring-kumo-danger focus:ring-kumo-danger"},"stateClasses":{"default":{"focus":"focus:ring-kumo-ring"},"error":{"focus":"focus:ring-kumo-danger"}},"default":"default"}},"examples":["","","","","
\n \n \n \n \n
","","","
\n \n \n \n \n
",""," API Keys\"\n placeholder=\"sk_live_...\"\n />","\n Email for billing\n \n }\n required\n placeholder=\"billing@company.com\"\n type=\"email\"\n />"],"colors":["bg-kumo-control","ring-kumo-danger","ring-kumo-line","ring-kumo-ring","text-kumo-default","text-kumo-subtle"],"styling":{"dimensions":{"xs":{"height":20,"paddingX":6,"fontSize":12,"borderRadius":2,"width":160},"sm":{"height":26,"paddingX":8,"fontSize":12,"borderRadius":6,"width":200},"base":{"height":36,"paddingX":12,"fontSize":16,"borderRadius":8,"width":280},"lg":{"height":40,"paddingX":16,"fontSize":16,"borderRadius":8,"width":320}},"baseTokens":{"background":"color-secondary","text":"text-color-surface","placeholder":"text-color-muted","ring":"color-border"},"stateTokens":{"focus":{"ring":"color-active"},"error":{"ring":"color-error"},"disabled":{"opacity":0.5,"text":"text-color-muted"}}}},"Label":{"name":"Label","type":"component","description":"Label component for form fields. Provides a standardized way to display labels with optional indicators: - Optional indicator: gray \"(optional)\" text when `showOptional={true}` - Tooltip: info icon with hover tooltip for additional context","importPath":"@cloudflare/kumo","category":"Other","props":{"children":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"showOptional":{"type":"boolean","optional":true,"description":"When `true`, shows gray \"(optional)\" text after the label."},"tooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"htmlFor":{"type":"string","optional":true,"description":"The id of the form element this label is associated with"},"asContent":{"type":"boolean","optional":true,"description":"When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling."}},"examples":["
\n \n \n \n
",""," Keys\"\n placeholder=\"sk_live_...\"\n />","\n I agree to the Terms of Service\n \n }\n />","
\n \n \n \n \n
","
\n \n \n \n
"],"colors":["text-kumo-default","text-kumo-strong"]},"LayerCard":{"name":"LayerCard","type":"component","description":"LayerCard component","importPath":"@cloudflare/kumo","category":"Display","props":{"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."}},"examples":["\n \n
Next Steps
\n \n \n \n \n\n Get started with Kumo\n ","\n Getting Started\n \n
\n Quick start guide for new users\n
\n \n ","
\n \n Components\n \n
Browse all components
\n \n \n \n Examples\n \n
View code examples
\n \n \n
"],"colors":["bg-kumo-base","bg-kumo-elevated","bg-kumo-recessed","ring-kumo-fill","ring-kumo-line","text-kumo-strong"],"subComponents":{"Primary":{"name":"Primary","description":"Primary sub-component","props":{}},"Secondary":{"name":"Secondary","description":"Secondary sub-component","props":{}}},"styling":{"container":{"width":280,"borderRadius":8},"secondary":{"paddingX":8,"paddingY":8,"gap":8,"fontSize":16,"fontWeight":500},"primary":{"paddingX":16,"paddingY":16,"paddingRight":12,"gap":8,"fontSize":16,"fontWeight":400,"borderRadius":8}}},"Link":{"name":"Link","type":"component","description":"Link component","importPath":"@cloudflare/kumo","category":"Other","props":{"variant":{"type":"enum","optional":true,"description":"Visual style of the link.\n- `\"inline\"` — Inline text link that flows with content\n- `\"current\"` — Link that inherits color from parent text\n- `\"plain\"` — Link without underline decoration","values":["inline","current","plain"],"descriptions":{"inline":"Inline text link that flows with content","current":"Link that inherits color from parent text","plain":"Link without underline decoration"},"classes":{"current":"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors"},"default":"inline"},"to":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"download":{"type":"unknown","optional":true},"href":{"type":"string","optional":true},"hrefLang":{"type":"string","optional":true},"media":{"type":"string","optional":true},"ping":{"type":"string","optional":true},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true},"type":{"type":"string","optional":true},"referrerPolicy":{"type":"enum","optional":true,"values":["","no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"]},"render":{"type":"ReactNode","optional":true,"description":"Allows you to replace the component’s HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}},"examples":["
\n Default inline link\n \n Current color link\n \n \n Plain inline link\n \n
","
\n This is a paragraph with an inline link that flows\n naturally with the surrounding text. Links maintain proper underline\n offset for readability.\n
","\n Visit Cloudflare \n ","
\n This error message contains a{\" \"}\n \n link\n {\" \"}\n that inherits the red color from its parent.\n
"],"colors":["text-kumo-link"],"subComponents":{"ExternalIcon":{"name":"ExternalIcon","description":"ExternalIcon sub-component","props":{}}}},"Loader":{"name":"Loader","type":"component","description":"Animated circular spinner for indicating loading states.","importPath":"@cloudflare/kumo","category":"Feedback","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"size":{"type":"enum","optional":true,"description":"Size of the spinner. Use a preset name or a custom pixel number.\n- `\"sm\"` — 16px, for inline use\n- `\"base\"` — 24px, default size\n- `\"lg\"` — 32px, for prominent loading states","values":["sm","base","lg"],"descriptions":{"sm":"Small loader for inline use","base":"Default loader size","lg":"Large loader for prominent loading states"},"default":"base"}},"examples":["","
\n \n \n \n
","",""],"colors":[]},"MenuBar":{"name":"MenuBar","type":"component","description":"MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation. Each option renders as a `\n } variant=\"primary\" className=\"h-8\">\n Visit\n \n ","\n Home\n \n Dashboard\n \n }\n />","\n } href=\"#\">\n Home\n \n \n }>\n Settings\n \n \n }\n />","\n Home\n \n Settings\n \n }\n tabs={[\n { label: \"General\", value: \"general\" },\n { label: \"Security\", value: \"security\" },\n { label: \"Notifications\", value: \"notifications\" },\n ]}\n defaultTab=\"general\"\n />","\n Home\n \n Projects\n \n My Project\n \n }\n tabs={[\n { label: \"Overview\", value: \"overview\" },\n { label: \"Settings\", value: \"settings\" },\n ]}\n defaultTab=\"overview\"\n >\n \n ","\n Home\n \n Products\n \n Page title\n \n }\n title=\"Page title\"\n />","\n Home\n \n Products\n \n Page title\n \n }\n title=\"Page title\"\n description=\"Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.\"\n />","\n Home\n \n Products\n \n Page title\n \n }\n title=\"Page title\"\n description=\"Action-led, value-oriented description of what this page does.\"\n tabs={[\n { label: \"Overview\", value: \"overview\" },\n { label: \"Analytics\", value: \"analytics\" },\n { label: \"Settings\", value: \"settings\" },\n ]}\n defaultTab=\"overview\"\n >\n \n }>\n New Item\n \n "],"colors":["border-kumo-line","text-kumo-default","text-kumo-subtle"],"files":["page-header/page-header.tsx"],"dependencies":["Tabs"]},"ResourceListPage":{"name":"ResourceListPage","type":"block","description":"ResourceListPage - A layout component for resource list pages Layouts are page-level components that provide consistent structure for common page patterns like resource lists, dashboards, and settings.","importPath":"@cloudflare/kumo","category":"Layout","props":{"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"icon":{"type":"ReactNode","optional":true},"usage":{"type":"ReactNode","optional":true},"additionalContent":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true}},"examples":[],"colors":["bg-kumo-overlay","text-kumo-strong"],"files":["resource-list/resource-list.tsx","resource-list/resource-list.test.tsx"],"dependencies":[]}},"search":{"byCategory":{"Display":["Badge","Breadcrumbs","Code","Collapsible","Empty","LayerCard","Meter","Text"],"Feedback":["Banner","Loader","Toasty"],"Action":["Button","ClipboardText"],"Input":["Checkbox","Combobox","DateRangePicker","Field","Input","Radio","Select","Switch"],"Other":["CloudflareLogo","DatePicker","Label","Link","SensitiveInput","Sidebar","Table","DeleteResource"],"Navigation":["CommandPalette","MenuBar","Pagination","Tabs"],"Overlay":["Dialog","DropdownMenu","Popover","Tooltip"],"Layout":["Grid","Surface","PageHeader","ResourceListPage"]},"byName":["Badge","Banner","Breadcrumbs","Button","Checkbox","ClipboardText","CloudflareLogo","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","DeleteResource","Dialog","DropdownMenu","Empty","Field","Grid","Input","Label","LayerCard","Link","Loader","MenuBar","Meter","PageHeader","Pagination","Popover","Radio","ResourceListPage","Select","SensitiveInput","Sidebar","Surface","Switch","Table","Tabs","Text","Toasty","Tooltip"],"byType":{"component":["Badge","Banner","Breadcrumbs","Button","Checkbox","ClipboardText","CloudflareLogo","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","Dialog","DropdownMenu","Empty","Field","Grid","Input","Label","LayerCard","Link","Loader","MenuBar","Meter","Pagination","Popover","Radio","Select","SensitiveInput","Sidebar","Surface","Switch","Table","Tabs","Text","Toasty","Tooltip"],"block":["DeleteResource","PageHeader","ResourceListPage"]}}}