{"version":"1.0.0","components":{"Autocomplete":{"name":"Autocomplete","type":"component","description":"Autocomplete — free-form text input with an optional filtered suggestion list.","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":["<Autocomplete items={fruits}>\n      <Autocomplete.InputGroup placeholder=\"Search fruits…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(item: string) => (\n            <Autocomplete.Item key={item} value={item}>\n              {item}\n            </Autocomplete.Item>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>","<div className=\"w-80\">\n      <Autocomplete\n        items={languages}\n        label=\"Language\"\n        description=\"Start typing to filter languages\"\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"Search a language…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Language) => (\n              <Autocomplete.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        error={{ message: \"Please enter a valid country\", match: true }}\n        filter={filter}\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<Autocomplete items={servers}>\n      <Autocomplete.InputGroup placeholder=\"Select region…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(group: ServerGroup) => (\n            <Autocomplete.Group key={group.value} items={group.items}>\n              <Autocomplete.GroupLabel>{group.value}</Autocomplete.GroupLabel>\n              <Autocomplete.Collection>\n                {(item: ServerLocation) => (\n                  <Autocomplete.Item key={item.value} value={item}>\n                    {item.label}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.Collection>\n            </Autocomplete.Group>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"xs\" placeholder=\"xs\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"sm\" placeholder=\"sm\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"base\" placeholder=\"base (default)\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"lg\" placeholder=\"lg\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>","<div className=\"flex w-80 flex-col gap-3\">\n      <Autocomplete\n        items={fruits}\n        value={value}\n        onValueChange={(v) => setValue(v)}\n      >\n        <Autocomplete.InputGroup placeholder=\"Type a fruit…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      {value && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Value: <span className=\"font-medium text-kumo-default\">{value}</span>\n        </p>\n      )}\n    </div>"],"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 the base 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 base 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 text-kumo-danger","warning":"bg-kumo-warning-tint text-kumo-warning","success":"bg-kumo-success-tint text-kumo-success","destructive":"bg-kumo-badge-red text-white","info":"bg-kumo-info-tint text-kumo-info","beta":"border border-dashed border-kumo-brand bg-transparent text-kumo-link","outline":"border border-kumo-fill bg-kumo-base 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."},"appearance":{"type":"enum","optional":true,"description":"Visual appearance of the badge.\n- `\"filled\"` — Filled background using the variant color (default)\n- `\"dot\"` — Outlined badge with a colored circle dot. Only `success`,   `warning`, `error`, and `neutral` variants show a dot. Dot badges do not   accept icons.","values":["filled","dot"],"descriptions":{"filled":"Filled badge with background color (default)","dot":"Outlined badge with a colored circle dot indicating status"},"classes":{"dot":"gap-1.5 bg-transparent text-kumo-default ring ring-kumo-hairline"},"default":"filled"},"icon":{"type":"ReactNode","optional":true,"description":"Icon from `@phosphor-icons/react` or a React element. Rendered before children."}},"examples":["<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"error\">Error</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>","<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>","<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">New</Badge>\n    </p>","<Badge icon={CheckCircleIcon} variant=\"success\">\n      Verified\n    </Badge>","<Link href=\"/changelog\" variant=\"plain\">\n      <Badge variant=\"outline\">View changelog</Badge>\n    </Link>","<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"success\" appearance=\"dot\">\n        Healthy\n      </Badge>\n      <Badge variant=\"warning\" appearance=\"dot\">\n        Warning\n      </Badge>\n      <Badge variant=\"error\" appearance=\"dot\">\n        Error\n      </Badge>\n      <Badge variant=\"neutral\" appearance=\"dot\">\n        Neutral\n      </Badge>\n    </div>"],"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-base","bg-kumo-danger-tint","bg-kumo-fill","bg-kumo-info-tint","bg-kumo-success","bg-kumo-success-tint","bg-kumo-warning-tint","border-kumo-brand","border-kumo-fill","ring-kumo-hairline","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 gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap [a:hover_&]:ring [a:hover_&]:ring-current"},"Banner":{"name":"Banner","type":"component","description":"Full-width message bar with an optional trailing CTA slot.","importPath":"@cloudflare/kumo","category":"Feedback","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"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 for a CTA button or link. Compact banners render a Kumo `Link` inline with the description; CTAs render at the trailing end. Use `Banner.Action` for accent-aware CTAs that self-style to the banner variant; other nodes are rendered as-is. Multiple actions can be passed in a Fragment. 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\n- `\"secondary\"` — Neutral banner for secondary messages","values":["default","alert","error","secondary"],"descriptions":{"default":"Informational banner for general messages","alert":"Warning banner for cautionary messages","error":"Error banner for critical issues","secondary":"Neutral banner for secondary messages"},"classes":{"default":"bg-kumo-info-tint text-kumo-info","alert":"bg-kumo-warning-tint text-kumo-warning","error":"bg-kumo-danger-tint text-kumo-danger","secondary":"bg-kumo-contrast/5 text-kumo-default/70"},"default":"default"},"size":{"type":"enum","optional":true,"description":"Size of the banner. A `\"sm\"` banner uses tighter spacing and `text-sm`, renders a Kumo `Link` action inline with the description, and sets its `Banner.Action` children to the `\"xs\"` size — suited to dialogs and other tight spaces.","values":["base","sm"],"descriptions":{"base":"Default banner size","sm":"Compact banner for dialogs and tight spaces"},"classes":{"base":"items-start gap-3 rounded-lg px-4 py-3 text-base","sm":"items-center gap-2 rounded-md px-3 py-2 text-sm"},"default":"base"}},"examples":["<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n      />\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        variant=\"secondary\"\n        title=\"Maintenance scheduled\"\n        description=\"This service will be unavailable for 10 minutes.\"\n      />\n    </div>","<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Update available\"\n      description=\"A new version is ready to install.\"\n    />","<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Session expiring\"\n      description=\"Your session will expire in 5 minutes.\"\n    />","<Banner\n      icon={<WarningCircle weight=\"fill\" />}\n      variant=\"error\"\n      title=\"Save failed\"\n      description=\"We couldn't save your changes. Please try again.\"\n    />","<Banner\n      icon={<Info weight=\"fill\" />}\n      variant=\"secondary\"\n      title=\"Maintenance scheduled\"\n      description=\"This service will be unavailable for 10 minutes.\"\n    />","<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Your changes have been saved.\"\n    />","<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Review required\"\n      description=\"Please review your billing information before proceeding.\"\n    />","<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Custom content supported\"\n      description={\n        <Text DANGEROUS_className=\"text-inherit\">\n          This banner supports <strong>custom content</strong> with Text.\n        </Text>\n      }\n    />","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n        action={\n          <>\n            <Banner.Action>Update</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"error\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n        action={\n          <>\n            <Banner.Action>Retry</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"alert\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n        action={\n          <>\n            <Banner.Action>Retry</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"secondary\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n        action={\n          <>\n            <Banner.Action>Retry</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n    </div>","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Your account is 90 days past due.\"\n        description=\"Pay now to avoid interruption.\"\n        action={\n          <>\n            <Banner.Action>Pay now</Banner.Action>\n            <Banner.Action variant=\"secondary\">Go to billing</Banner.Action>\n          </>\n        }\n      />\n    </div>","<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n        action={\n          <>\n            <Banner.Action>Update</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"alert\"\n        icon={<Warning weight=\"fill\" />}\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n        action={\n          <>\n            <Banner.Action>Extend</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"error\"\n        icon={<WarningCircle weight=\"fill\" />}\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n        action={\n          <>\n            <Banner.Action>Retry</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n      <Banner\n        variant=\"secondary\"\n        icon={<Info weight=\"fill\" />}\n        title=\"Heads up\"\n        description=\"This is a secondary informational banner.\"\n        action={\n          <>\n            <Banner.Action>Got it</Banner.Action>\n            <Banner.Action variant=\"ghost\" icon={<X />} aria-label=\"Dismiss\" />\n          </>\n        }\n      />\n    </div>","<Banner\n      size=\"sm\"\n      description=\"A DNS record for puppies.cloudflare.dev already exists in this zone.\"\n      action={<Link href=\"#\">Manage DNS for puppies.cloudflare.dev</Link>}\n    />","<Banner\n      size=\"sm\"\n      description=\"A DNS record for puppies.cloudflare.dev already exists in this zone.\"\n      action={\n        <>\n          <Banner.Action>Manage DNS</Banner.Action>\n          <Banner.Action variant=\"ghost\">\n            <X />\n          </Banner.Action>\n        </>\n      }\n    />","<Banner\n      size=\"sm\"\n      description=\"A DNS record for puppies.cloudflare.dev already exists in this zone.\"\n    />","<Banner icon={<Info />}>This is a simple banner using children.</Banner>"],"colors":["bg-kumo-contrast","bg-kumo-danger-tint","bg-kumo-info-tint","bg-kumo-warning-tint","fill-kumo-danger","fill-kumo-info","fill-kumo-interact","fill-kumo-warning","text-kumo-danger","text-kumo-default","text-kumo-info","text-kumo-warning"],"baseStyles":"flex w-full","subComponents":{"Action":{"name":"Action","description":"Action sub-component","props":{}}}},"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":["<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Docs</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<House size={16} />}>\n        Home\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Projects</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<House size={16} />}>\n        Home\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Docs</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current loading></Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Current icon={<House size={16} />}>\n        Worker Analytics\n      </Breadcrumbs.Current>\n    </Breadcrumbs>","<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>\n      <Breadcrumbs.Clipboard text=\"#\" />\n    </Breadcrumbs>"],"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}}}}},"BubbleMap":{"name":"BubbleMap","type":"component","description":"BubbleMap component","importPath":"@cloudflare/kumo","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer (passed in for tree-shaking). Requires `MapChart`, `ScatterChart`, `TooltipComponent`, and a renderer registered via `echarts.use([...])`."},"geoJson":{"type":"MapGeoJson","required":true,"description":"GeoJSON `FeatureCollection` for the land base."},"mapName":{"type":"string","optional":true,"description":"Optional stable ECharts map registry name. Set this when the same GeoJSON is parsed into new object instances across mounts and should reuse one global ECharts registration."},"data":{"type":"T[]","required":true,"description":"Raw data rows. Coordinates/value/name are read via the accessors below."},"lng":{"type":"MapAccessor<T, number>","required":true,"description":"Longitude accessor (key of `T` or `(row) => number`)."},"lat":{"type":"MapAccessor<T, number>","required":true,"description":"Latitude accessor (key of `T` or `(row) => number`)."},"value":{"type":"MapAccessor<T, number>","required":true,"description":"Value accessor — drives bubble size."},"name":{"type":"MapAccessor<T, string>","optional":true,"description":"Optional name accessor — used by the default tooltip."},"minRadius":{"type":"number","optional":true,"description":"Smallest bubble radius in px. Default: `6`."},"maxRadius":{"type":"number","optional":true,"description":"Largest bubble radius in px. Default: `26`."},"bubbleSize":{"type":"(value: number) => number","optional":true,"description":"Explicit bubble radius `(value) => px`. Overrides the default `minRadius`/`maxRadius` scaling."},"bubbleColor":{"type":"MapStyle<T, string>","optional":true,"description":"Bubble fill colour — constant or `(row) => color`. Defaults to the chart blue."},"bubbleBorderColor":{"type":"MapStyle<T, string>","optional":true,"description":"Bubble border colour — constant or `(row) => color`. Default: `transparent`."},"bubbleBorderWidth":{"type":"MapStyle<T, number>","optional":true,"description":"Bubble border width — constant or `(row) => px`. Default: `0`."},"center":{"type":"[number, number]","optional":true,"description":"Map center as `[longitude, latitude]`. Defaults to auto-fit."},"zoom":{"type":"number","optional":true,"description":"Zoom level — multiplies the auto-fit scale. Default: `1.25`."},"roam":{"type":"boolean","optional":true,"description":"Enable drag-to-pan and scroll-to-zoom. Default: `false`."},"projection":{"type":"MapProjection | null","optional":true,"description":"Geographic projection. Defaults to a latitude-clamped Mercator (flat 2D web-map look). Pass another d3-geo projection to override, or `null` for ECharts' raw equirectangular plotting. Use a stable reference (module-level or memoised): a new object each render rebuilds the view and resets a roamed/zoomed map."},"showTooltip":{"type":"boolean","optional":true,"description":"Show the tooltip. Default: `true`."},"valueFormat":{"type":"(value: number) => string","optional":true,"description":"Format the value for the default tooltip. Default: `toLocaleString()`."},"tooltipFormatter":{"type":"(row: T) => string","optional":true,"description":"Override the tooltip content for a row. Returns an HTML string rendered by ECharts' own tooltip. USE WITH CAUTION: the return value is injected as HTML. Escape any user-provided strings to avoid XSS."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). The height derives from the rendered width so the map fills the frame with no letterboxing. Defaults to the projected aspect of the displayed window, so the land fits edge-to-edge. Pass `height` to fix a pixel height instead."},"height":{"type":"number","optional":true,"description":"Fixed chart height in pixels. Overrides `aspectRatio` when set. Leave unset to size by aspect ratio (the default) so the map fills the container."},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<BubbleMap<CfLocation>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={cloudflareLocations}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value={() => 1}\n      bubbleColor=\"#F6821F\"\n      minRadius={8}\n      maxRadius={8}\n      tooltipFormatter={(row) =>\n        `<span style=\"font-size:12px\"><strong>${row.city}</strong><span style=\"color:var(--text-color-kumo-subtle);margin-left:8px\">${row.iata}</span></span>`\n      }\n      isDarkMode={isDarkMode}\n    />","<BubbleMap<Colo>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={colos}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value=\"requests\"\n      valueFormat={fmt}\n      minRadius={8}\n      isDarkMode={isDarkMode}\n    />","<BubbleMap<Colo>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={colos2}\n      lng=\"lon\"\n      lat=\"lat\"\n      name=\"city\"\n      value=\"requests\"\n      valueFormat={fmt}\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"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":"relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-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-line data-[state=open]:bg-kumo-base","ghost":"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit","destructive":"relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50","secondary-destructive":"bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 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 ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25"},"stateClasses":{"primary":{"focus":"focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring)","active":"active:ring-(--kumo-button-emphasis-ring)","disabled":"disabled:opacity-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":{"focus":"focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring)","active":"active:ring-(--kumo-button-emphasis-ring)","disabled":"disabled:opacity-50"},"secondary-destructive":{"not-disabled":"not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30","disabled":"disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70","data-state":"data-[state=open]:bg-kumo-base"},"outline":{"not-disabled":"not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25"}},"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":["<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add\"\n      />\n    </div>","<Button variant=\"primary\">Primary</Button>","<Button variant=\"secondary\">Secondary</Button>","<Button variant=\"ghost\">Ghost</Button>","<Button variant=\"destructive\">Destructive</Button>","<Button variant=\"outline\">Outline</Button>","<Button variant=\"secondary-destructive\">Secondary Destructive</Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button size=\"xs\" variant=\"secondary\">\n        Extra Small\n      </Button>\n      <Button size=\"sm\" variant=\"secondary\">\n        Small\n      </Button>\n      <Button size=\"base\" variant=\"secondary\">\n        Base\n      </Button>\n      <Button size=\"lg\" variant=\"secondary\">\n        Large\n      </Button>\n    </div>","<Button variant=\"secondary\" icon={PlusIcon}>\n      Create Worker\n    </Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n    </div>","<Button variant=\"primary\" loading>\n      Loading...\n    </Button>","<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>","<Button variant=\"secondary\">Click me</Button>","<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" title=\"Create a new Worker\">\n        Create Worker\n      </Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n        title=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        title=\"You need edit access to create a Worker\"\n        disabled\n      >\n        Create Worker\n      </Button>\n    </div>","<div className=\"flex flex-wrap items-center gap-3\">\n      <LinkButton href=\"/components/link\" variant=\"secondary\">\n        Read Link docs\n      </LinkButton>\n      <LinkButton\n        href=\"https://developers.cloudflare.com\"\n        variant=\"ghost\"\n        icon={ArrowSquareOutIcon}\n        external\n      >\n        Cloudflare Docs\n      </LinkButton>\n    </div>","<LinkButton\n      href=\"/components/link\"\n      variant=\"secondary\"\n      title=\"Opens the Link component docs\"\n    >\n      Read Link docs\n    </LinkButton>","<div className=\"flex flex-wrap items-center gap-3\">\n      <LinkButton href=\"/components/link\" variant=\"secondary\" disabled>\n        Disabled link\n      </LinkButton>\n      <LinkButton\n        href=\"/components/link\"\n        variant=\"secondary\"\n        disabled\n        title=\"You need edit access to continue\"\n      >\n        Disabled with tooltip\n      </LinkButton>\n    </div>"],"colors":["bg-kumo-base","bg-kumo-tint","ring-kumo-brand","ring-kumo-danger","ring-kumo-focus","ring-kumo-line","text-kumo-danger","text-kumo-default","text-kumo-strong","text-kumo-subtle"]},"Chart":{"name":"Chart","type":"component","description":"Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).","importPath":"@cloudflare/kumo","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"options":{"type":"KumoChartOption","required":true,"description":"ECharts option object — passed through to `chart.setOption()`"},"optionUpdateBehavior":{"type":"SetOptionOpts","optional":true,"description":"Additional options passed as the second argument to `chart.setOption()`. Defaults to `{ notMerge: false, lazyUpdate: true }`."},"className":{"type":"string","optional":true,"description":"Additional CSS classes applied to the chart container `<div>`"},"isDarkMode":{"type":"boolean","optional":true,"description":"When `true`, initialises ECharts with its built-in dark theme. Changing this value after mount destroys and re-creates the chart instance."},"height":{"type":"number","optional":true,"description":"Height of the chart container in pixels. Defaults to `350`."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). When set, the height derives from the rendered width via CSS `aspect-ratio` and the `height` prop is ignored — useful for maps so the canvas matches the map's shape and fills the frame with no letterboxing."}},"examples":["<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      markers={markers}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      thresholds={[\n        {\n          value: 55,\n          label: \"Memory limit\",\n          color: ChartPalette.semantic(\"Attention\", isDarkMode),\n        },\n      ]}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Memory (MB)\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Requests\"\n      xAxisTickFormat={(ts) => {\n        const d = new Date(ts);\n        return `${d.getHours().toString().padStart(2, \"0\")}:${d.getMinutes().toString().padStart(2, \"0\")}`;\n      }}\n      yAxisTickFormat={(value) => {\n        if (value >= 1000) return `${value / 1000}k`;\n        return value.toString();\n      }}\n      tooltipValueFormat={(value) => `${(value / 1000).toFixed(1)}k requests`}\n    />","<TimeseriesChart\n      yAxisTickCount={2}\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      height={160}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n      gradient\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Mbps\"\n      incomplete={{ after: incompleteTimestamp }}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"%\"\n      onTimeRangeChange={(from, to) => {\n        alert(\n          `Selected range:\\nFrom: ${new Date(from).toLocaleString()}\\nTo: ${new Date(to).toLocaleString()}`,\n        );\n      }}\n    />","<Chart\n      echarts={echarts}\n      options={options}\n      height={160}\n      isDarkMode={isDarkMode}\n    />","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">Active State</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n        />\n        <ChartLegend.LargeItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.LargeItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Inactive State</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Loading state</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem loading />\n      </div>\n    </div>","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">Active State</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n        />\n        <ChartLegend.SmallItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.SmallItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Inactive State</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Loading state</h3>\n\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem loading />\n      </div>\n    </div>","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      type=\"bar\"\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n      tooltipValueFormat={(r) => r.toFixed(2)}\n    />","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        type=\"bar\"\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex flex-wrap gap-4\">\n          {data.map((series) => (\n            <ChartLegend.SmallItem\n              loading={loading}\n              key={series.name}\n              name={series.name}\n              color={series.color}\n              value={Math.round(series.data.at(-1)?.[1] ?? 0).toLocaleString()}\n            />\n          ))}\n        </div>\n        <Switch\n          label=\"Loading\"\n          checked={loading}\n          onCheckedChange={setLoading}\n        />\n      </div>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={loading ? [] : data}\n        loading={loading}\n      />\n    </div>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex gap-4 divide-x divide-kumo-hairline px-2\">\n          <ChartLegend.LargeItem\n            name=\"P99\"\n            color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n            value=\"124\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P95\"\n            color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n            value=\"76\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P75\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"32\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P50\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"10\"\n            unit=\"ms\"\n          />\n        </div>\n        <TimeseriesChart\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-kumo-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hoveredSeries !== null && hoveredSeries !== s.name}\n              onPointerEnter={() => {\n                setHoveredSeries(s.name);\n                chartRef.current?.dispatchAction({\n                  type: \"highlight\",\n                  seriesName: s.name,\n                });\n              }}\n              onPointerLeave={() => {\n                setHoveredSeries(null);\n                chartRef.current?.dispatchAction({\n                  type: \"downplay\",\n                  seriesName: s.name,\n                });\n              }}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-kumo-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hiddenSeries[s.name] ?? false}\n              onClick={() => handleClick(s.name)}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          enableLegendSelection\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-4\">\n      <Select\n        label=\"Tooltip follow cursor\"\n        value={selected}\n        onValueChange={(v) => {\n          if (v) setSelected(v);\n        }}\n        renderValue={(v) => v.label}\n      >\n        {FOLLOW_CURSOR_OPTIONS.map((opt) => (\n          <Select.Option key={opt.value} value={opt}>\n            {opt.label}\n          </Select.Option>\n        ))}\n      </Select>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Latency (ms)\"\n        tooltipFollowCursor={selected.value}\n      />\n    </div>","<div\n      ref={boundaryRef}\n      className=\"w-full overflow-auto rounded-lg border border-kumo-line\"\n      style={{ height: 300 }}\n    >\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        height={280}\n        tooltipBoundary={boundary ?? undefined}\n      />\n    </div>"],"colors":[]},"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":["<Checkbox\n      label=\"Accept terms and conditions\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Checkbox\n      label=\"Enable notifications\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Checkbox label=\"I agree\" checked={checked} onCheckedChange={setChecked} />","<Checkbox\n      label=\"Select all\"\n      indeterminate={indeterminate}\n      onCheckedChange={setIndeterminate}\n    />","<Checkbox\n      label=\"Remember me\"\n      controlFirst={false}\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Checkbox label=\"Disabled option\" disabled />","<Checkbox label=\"Invalid option\" variant=\"error\" />","<Checkbox.Group\n      legend=\"Email preferences\"\n      description=\"Choose how you'd like to receive updates\"\n      value={preferences}\n      onValueChange={setPreferences}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>","<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"sr-only\">\n        Notification preferences\n      </Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>","<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification preferences\n      </Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>","<Checkbox.Group\n      legend=\"Required preferences\"\n      error=\"Please select at least one notification method\"\n      value={[]}\n      onValueChange={() => {}}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email\" variant=\"error\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS\" variant=\"error\" />\n    </Checkbox.Group>"],"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,"description":"Legend text for the group. For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Checkbox.Item components (and optionally a Checkbox.Legend)"},"error":{"type":"string","optional":true,"description":"Error message for the group (only appears in groups, not single checkboxes)"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"string[]","optional":true,"description":"Values of checkboxes that should be checked (controlled)"},"allValues":{"type":"string[]","optional":true,"description":"All possible checkbox values (required for parent checkbox pattern)"},"disabled":{"type":"boolean","optional":true,"description":"Whether all checkboxes in the group are disabled"},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), checkbox appears before label. When false, label appears before checkbox."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}},"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}]}},"ChoroplethMap":{"name":"ChoroplethMap","type":"component","description":"ChoroplethMap component","importPath":"@cloudflare/kumo","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer (passed in for tree-shaking). Requires `MapChart`, `VisualMapComponent`, `TooltipComponent`, and a renderer registered via `echarts.use([...])`."},"geoJson":{"type":"MapGeoJson","required":true,"description":"GeoJSON `FeatureCollection` whose regions are shaded by value."},"mapName":{"type":"string","optional":true,"description":"Optional stable ECharts map registry name. Set this when the same GeoJSON is parsed into new object instances across mounts and should reuse one global ECharts registration."},"data":{"type":"T[]","required":true,"description":"Raw data rows. The region key and value are read via the accessors below."},"name":{"type":"MapAccessor<T, string>","required":true,"description":"Region-key accessor (key of `T` or `(row) => string`). Each row is joined to a GeoJSON feature whose `nameProperty` equals this value."},"value":{"type":"MapAccessor<T, number>","required":true,"description":"Value accessor — drives the region's fill colour."},"nameProperty":{"type":"string","optional":true,"description":"GeoJSON feature property to join on. Default: `\"name\"`. Real-world data is often more reliably matched on an ISO-code property (e.g. `\"iso_a2\"`)."},"colorRange":{"type":"string[]","optional":true,"description":"Sequential colour ramp (low → high). Defaults to the Kumo choropleth blues, tuned to stay distinct from the no-data fill. Distributed across the continuous gradient."},"noDataColor":{"type":"string","optional":true,"description":"Fill for regions with no matching data row. Defaults to the neutral land grey."},"showLegend":{"type":"boolean","optional":true,"description":"Show the visualMap colour legend. Default: `false`."},"showTooltip":{"type":"boolean","optional":true,"description":"Show the tooltip. Default: `true`."},"valueFormat":{"type":"(value: number) => string","optional":true,"description":"Format the value for the default tooltip. Default: `toLocaleString()`."},"tooltipFormatter":{"type":"(row: T) => string","optional":true,"description":"Override the tooltip content for a row. Returns an HTML string rendered by ECharts' own tooltip. USE WITH CAUTION: the return value is injected as HTML. Escape any user-provided strings to avoid XSS."},"center":{"type":"[number, number]","optional":true,"description":"Map center as `[longitude, latitude]`. Defaults to auto-fit."},"zoom":{"type":"number","optional":true,"description":"Zoom level — multiplies the auto-fit scale. Default: `1.25`."},"roam":{"type":"boolean","optional":true,"description":"Enable drag-to-pan and scroll-to-zoom. Default: `false`."},"projection":{"type":"MapProjection | null","optional":true,"description":"Geographic projection. Defaults to a latitude-clamped Mercator (flat 2D web-map look). Pass another d3-geo projection to override, or `null` for ECharts' raw equirectangular plotting. Use a stable reference (module-level or memoised): a new object each render rebuilds the view and resets a roamed/zoomed map."},"aspectRatio":{"type":"number | string","optional":true,"description":"Container aspect ratio as `width / height` (e.g. `1.7` or `\"16 / 9\"`). The height derives from the rendered width so the map fills the frame with no letterboxing. Defaults to the projected aspect of the displayed window, so the regions fit edge-to-edge. Pass `height` to fix a pixel height instead."},"height":{"type":"number","optional":true,"description":"Fixed chart height in pixels. Overrides `aspectRatio` when set. Leave unset to size by aspect ratio (the default) so the map fills the container."},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<ChoroplethMap<CountryTraffic>\n      echarts={echarts}\n      geoJson={geoJson}\n      data={countries}\n      name=\"country\"\n      value=\"requests\"\n      valueFormat={fmt}\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"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":["<ClipboardText text=\"0c239dd2\" />","<ClipboardText text=\"abc123\" />","<ClipboardText text=\"sk_live_51H8...\" />","<ClipboardText\n      text=\"sk_live_***********\"\n      textToCopy=\"sk_live_51H8_abc123\"\n    />","<ClipboardText text=\"https://example.com/very/long/url/path\" />","<ClipboardText\n      text=\"npx kumo add button\"\n      tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n    />"],"colors":["bg-kumo-base","border-kumo-line","outline-kumo-line","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":["<CloudflareLogo className=\"w-72\" />","<CloudflareLogo variant=\"glyph\" className=\"w-24\" />","<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo className=\"w-28\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"white\" />\n      </div>\n    </div>","<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"white\" />\n      </div>\n    </div>","<div className=\"flex flex-wrap items-end gap-6\">\n      <CloudflareLogo className=\"w-20\" />\n      <CloudflareLogo className=\"w-28\" />\n      <CloudflareLogo className=\"w-44\" />\n    </div>","<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>","<PoweredByCloudflare />","<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByCloudflare />\n      <PoweredByCloudflare color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByCloudflare color=\"white\" />\n      </div>\n    </div>","<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"],"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<string, { value: string; highlight?: boolean }>","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,"description":"The code string to display."},"lang":{"type":"CodeLang","optional":true,"description":"Language hint for the code content."}}}},"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.","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":["<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-2\">\n      <Collapsible.Root open={open1} onOpenChange={setOpen1}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open2} onOpenChange={setOpen2}>\n        <Collapsible.DefaultTrigger>\n          How do I use it?\n        </Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Install the components and import them into your project.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open3} onOpenChange={setOpen3}>\n        <Collapsible.DefaultTrigger>\n          Is it open source?\n        </Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Check the repository for license information.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.Trigger render={<Button variant=\"secondary\" size=\"sm\" />}>\n          {isOpen ? \"Hide details\" : \"Show details\"}\n        </Collapsible.Trigger>\n        <Collapsible.Panel className=\"mt-3 rounded-lg bg-kumo-tint p-4\">\n          <Text>\n            This panel uses custom styling instead of the default border-left\n            accent.\n          </Text>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-4\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel keepMounted>\n          <Text>\n            Type something below, then collapse and re-open — your input is\n            preserved because the panel stays mounted.\n          </Text>\n          <Input label=\"Name\" placeholder=\"Type here…\" />\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>\n          Contact settings\n        </Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <form\n            className=\"flex max-w-sm flex-col gap-4\"\n            onSubmit={(event) => event.preventDefault()}\n          >\n            <Input label=\"Email\" placeholder=\"user@example.com\" type=\"email\" />\n            <Input label=\"Team name\" placeholder=\"Design engineering\" />\n            <Button type=\"submit\">Save settings</Button>\n          </form>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>","<div className=\"w-full space-y-2\">\n      {items.map((item, i) => (\n        <Collapsible.Root\n          key={i}\n          open={activeIndex === i}\n          onOpenChange={(open) => setActiveIndex(open ? i : null)}\n        >\n          <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n          <Collapsible.DefaultPanel>\n            <Text>{item.content}</Text>\n          </Collapsible.DefaultPanel>\n        </Collapsible.Root>\n      ))}\n    </div>"],"colors":["border-kumo-fill","text-kumo-default"],"subComponents":{"Root":{"name":"Root","description":"Root sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Panel":{"name":"Panel","description":"Panel sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"DefaultTrigger":{"name":"DefaultTrigger","description":"DefaultTrigger sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Label text displayed in the trigger"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"DefaultPanel":{"name":"DefaultPanel","description":"DefaultPanel sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Panel content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}}}},"Combobox":{"name":"Combobox","type":"component","description":"Combobox — autocomplete input with filterable dropdown list.","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":["<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={fruits}\n    >\n      <Combobox.TriggerInput placeholder=\"Please select\" />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: string) => (\n            <Combobox.Item key={item} value={item}>\n              {item}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.TriggerValue className=\"w-[200px]\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language | null)}\n      items={languages}\n    >\n      <Combobox.TriggerValue\n        className=\"w-[200px]\"\n        placeholder=\"Select a language\"\n      />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as ServerLocation | null)}\n      items={servers}\n    >\n      <Combobox.TriggerInput\n        className=\"w-[200px]\"\n        placeholder=\"Select server\"\n      />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(group: ServerLocationGroup) => (\n            <Combobox.Group key={group.value} items={group.items}>\n              <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>\n              <Combobox.Collection>\n                {(item: ServerLocation) => (\n                  <Combobox.Item key={item.value} value={item}>\n                    {item.label}\n                  </Combobox.Item>\n                )}\n              </Combobox.Collection>\n            </Combobox.Group>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>","<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"Select bots\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">Submit</Button>\n    </div>","<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        description=\"Select your preferred database\"\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-start gap-4\">\n      <Combobox value=\"Apple\" items={fruits} disabled>\n        <Combobox.TriggerInput\n          className=\"w-[200px]\"\n          placeholder=\"Select fruit\"\n        />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n\n      <Combobox value={languages[0]} items={languages} disabled>\n        <Combobox.TriggerValue className=\"w-[200px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"w-80\">\n      <Combobox value={value} onValueChange={setValue} items={items}>\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItemWithDisabled) => (\n              <Combobox.Item\n                key={item.value}\n                value={item}\n                disabled={item.disabled}\n              >\n                <span>\n                  {item.label}\n                  {item.reason && (\n                    <Text variant=\"secondary\" size=\"xs\" as=\"span\">\n                      {\" — \"}\n                      {item.reason}\n                    </Text>\n                  )}\n                </span>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        error={{ message: \"Please select a database\", match: true }}\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Small (sm)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Base (default)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>","<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.Trigger render={<Button variant=\"ghost\" size=\"sm\" />}>\n        <Combobox.Value>\n          <span className=\"truncate\">\n            {value.emoji} {value.label}\n          </span>\n        </Combobox.Value>\n        <CaretUpDownIcon size={14} className=\"shrink-0 text-kumo-subtle\" />\n      </Combobox.Trigger>\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>"],"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},"anchor":{"type":"ComboboxBase.Positioner.Props[\"anchor\"]","optional":true},"positionMethod":{"type":"ComboboxBase.Positioner.Props[\"positionMethod\"]","optional":true},"collisionAvoidance":{"type":"ComboboxBase.Positioner.Props[\"collisionAvoidance\"]","optional":true},"collisionBoundary":{"type":"ComboboxBase.Positioner.Props[\"collisionBoundary\"]","optional":true},"collisionPadding":{"type":"ComboboxBase.Positioner.Props[\"collisionPadding\"]","optional":true},"sticky":{"type":"ComboboxBase.Positioner.Props[\"sticky\"]","optional":true},"disableAnchorTracking":{"type":"ComboboxBase.Positioner.Props[\"disableAnchorTracking\"]","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":["<Combobox.Collection>\n  {(item, index) => (\n    <Combobox.Item key={index} value={item}>\n      {item.label}\n    </Combobox.Item>\n  )}\n</Combobox.Collection>"]},"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.","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":["<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={() => setOpen(true)}>Open Simple Palette</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search actions...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No actions found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id} items={group.items}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-kumo-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (No Autocomplete)\n      </Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n          setSearch(\"\");\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input\n          placeholder=\"Search commands...\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"none\"\n          spellCheck={false}\n          data-1p-ignore=\"true\"\n          data-lpignore=\"true\"\n        />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => {\n                        setOpen(false);\n                        setSearch(\"\");\n                      }}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>","<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"],"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.","importPath":"@cloudflare/kumo","category":"Other","props":{"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"single\"\n        selected={date}\n        onChange={(d) => {\n          if (d) {\n            setDate(d);\n          }\n        }}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {date ? date.toLocaleDateString() : \"Pick a date\"}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => 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                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>","<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"w-full pt-2 text-xs text-kumo-subtle\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"],"colors":["bg-kumo-base"]},"DateRangePicker":{"name":"DateRangePicker","type":"component","description":"DateRangePicker — dual-calendar date range selector.","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 (288px) for simple confirmations\n- `\"base\"` — Default (384px)\n- `\"lg\"` — Large (512px) for complex content\n- `\"xl\"` — Extra large (768px) for detailed views","values":["base","sm","lg","xl"],"descriptions":{"base":"Default dialog width (384px)","sm":"Small dialog for simple confirmations (288px)","lg":"Large dialog for complex content (512px)","xl":"Extra large dialog for detailed views (768px)"},"classes":{"base":"sm:w-96","sm":"sm:w-72","lg":"sm:w-[32rem]","xl":"sm:w-[48rem]"},"default":"base"}},"examples":["<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger\n        render={(p) => <Button {...p}>Open capped dialog</Button>}\n      />\n      <Dialog className=\"max-w-lg p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Max width override\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This dialog uses <code>className=\"max-w-lg\"</code> and should stay\n          capped around 512px on desktop.\n        </Dialog.Description>\n        <div className=\"mt-4 truncate rounded-md border border-kumo-line bg-kumo-recessed p-3 font-mono text-sm\">\n          abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root role=\"alertdialog\">\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Account\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" weight=\"fill\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Account?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\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        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete Account\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          placeholder=\"Select region...\"\n          renderValue={(v) => regions.find((r) => r.value === v)?.label}\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>","<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>","<div className=\"flex flex-wrap gap-2\">\n      {sizes.map(({ size, label, width }) => (\n        <Dialog.Root key={size}>\n          <Dialog.Trigger\n            render={(p) => (\n              <Button variant=\"secondary\" {...p}>\n                {label} ({width})\n              </Button>\n            )}\n          />\n          <Dialog size={size} className=\"p-8\">\n            <div className=\"mb-4 flex items-start justify-between gap-4\">\n              <Dialog.Title className=\"text-2xl font-semibold\">\n                {label} Dialog\n              </Dialog.Title>\n              <Dialog.Close\n                aria-label=\"Close\"\n                render={(props) => (\n                  <Button\n                    {...props}\n                    variant=\"secondary\"\n                    shape=\"square\"\n                    icon={<X />}\n                    aria-label=\"Close\"\n                  />\n                )}\n              />\n            </div>\n            <Dialog.Description className=\"text-kumo-subtle\">\n              This <code>size=\"{size}\"</code> dialog should stay at {width} wide\n              regardless of the content below.\n            </Dialog.Description>\n            <div className=\"mt-4 overflow-auto rounded-md border border-kumo-line\">\n              <table className=\"w-max text-sm\">\n                <thead className=\"bg-kumo-elevated text-left\">\n                  <tr>\n                    <th className=\"px-3 py-2\">Resource</th>\n                    <th className=\"px-3 py-2\">Region</th>\n                    <th className=\"px-3 py-2\">Status</th>\n                    <th className=\"px-3 py-2\">Latency</th>\n                    <th className=\"px-3 py-2\">Requests</th>\n                    <th className=\"px-3 py-2\">Last Deployed</th>\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y divide-kumo-hairline\">\n                  <tr>\n                    <td className=\"px-3 py-2\">api-gateway-prod</td>\n                    <td className=\"px-3 py-2\">us-east-1</td>\n                    <td className=\"px-3 py-2 text-kumo-success\">Healthy</td>\n                    <td className=\"px-3 py-2\">12ms</td>\n                    <td className=\"px-3 py-2\">1,234,567</td>\n                    <td className=\"px-3 py-2\">2026-06-23</td>\n                  </tr>\n                  <tr>\n                    <td className=\"px-3 py-2\">worker-analytics</td>\n                    <td className=\"px-3 py-2\">eu-west-1</td>\n                    <td className=\"px-3 py-2 text-kumo-warning\">Degraded</td>\n                    <td className=\"px-3 py-2\">89ms</td>\n                    <td className=\"px-3 py-2\">456,789</td>\n                    <td className=\"px-3 py-2\">2026-06-22</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div className=\"mt-6 flex justify-end gap-2\">\n              <Dialog.Close\n                render={(props) => (\n                  <Button variant=\"secondary\" {...props}>\n                    Close\n                  </Button>\n                )}\n              />\n            </div>\n          </Dialog>\n        </Dialog.Root>\n      ))}\n    </div>"],"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.","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":["<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Worker</DropdownMenu.Item>\n        <DropdownMenu.Item>Pages</DropdownMenu.Item>\n        <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>View Options</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Group>\n          <DropdownMenu.Label>Display</DropdownMenu.Label>\n          <DropdownMenu.CheckboxItem\n            checked={showSidebar}\n            onCheckedChange={setShowSidebar}\n          >\n            Show sidebar\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={showLineNumbers}\n            onCheckedChange={setShowLineNumbers}\n          >\n            Show line numbers\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={wordWrap}\n            onCheckedChange={setWordWrap}\n          >\n            Word wrap\n          </DropdownMenu.CheckboxItem>\n        </DropdownMenu.Group>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>\n        <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>\n\n        {/* Language submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={language}\n                onValueChange={setLanguage}\n              >\n                {languages.map((lang) => (\n                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>\n                    {lang.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        {/* Timezone submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={timezone}\n                onValueChange={setTimezone}\n              >\n                {timezones.map((tz) => (\n                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>\n                    {tz.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Edit</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={PencilSimpleIcon}>Rename</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item inset>Move to folder</DropdownMenu.Item>\n        <DropdownMenu.Item inset>Add to favorites</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={TrashIcon} variant=\"danger\">\n          Delete\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<div className=\"flex flex-col items-start gap-2\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CopyIcon}\n            onClick={() => setLastAction(\"Duplicated\")}\n          >\n            Duplicate\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={PencilSimpleIcon}\n            onClick={() => setLastAction(\"Renamed\")}\n          >\n            Rename\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={TrashIcon}\n            variant=\"danger\"\n            onClick={() => setLastAction(\"Deleted\")}\n          >\n            Delete\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n      {lastAction && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last action: <span className=\"text-kumo-default\">{lastAction}</span>\n        </p>\n      )}\n    </div>","<DropdownMenu>\n      <DropdownMenu.Trigger\n        render={<button type=\"button\" className=\"rounded-full\" />}\n      >\n        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white\">\n          MR\n        </span>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Open long list</Button>} />\n      <DropdownMenu.Content>\n        {items.map((item) => (\n          <DropdownMenu.Item key={item}>{item}</DropdownMenu.Item>\n        ))}\n      </DropdownMenu.Content>\n    </DropdownMenu>","<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Resources</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>\n          Settings\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.LinkItem href=\"/docs\" icon={BookOpenIcon}>\n          Documentation\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.LinkItem\n          href=\"https://developers.cloudflare.com\"\n          target=\"_blank\"\n          icon={ArrowSquareOutIcon}\n        >\n          Developer Docs\n        </DropdownMenu.LinkItem>\n      </DropdownMenu.Content>\n    </DropdownMenu>"],"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":["<Empty\n      icon={<PackageIcon size={48} />}\n      title=\"No packages found\"\n      description=\"Get started by installing your first package.\"\n      commandLine=\"npm install @cloudflare/kumo\"\n      contents={\n        <div className=\"flex items-center gap-2\">\n          <Button icon={<CodeIcon />}>See examples</Button>\n          <Button icon={<GlobeIcon />} variant=\"primary\">\n            View documentation\n          </Button>\n        </div>\n      }\n    />","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Small</p>\n        <Empty\n          size=\"sm\"\n          icon={<Database size={32} className=\"text-kumo-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Base</p>\n        <Empty\n          size=\"base\"\n          icon={<Database size={48} className=\"text-kumo-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Large</p>\n        <Empty\n          size=\"lg\"\n          icon={<Database size={64} className=\"text-kumo-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n    </div>","<Empty\n      icon={<FolderOpen size={48} className=\"text-kumo-inactive\" />}\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    />","<Empty\n      icon={<CloudSlash size={48} className=\"text-kumo-inactive\" />}\n      title=\"No connection\"\n      description=\"Unable to connect to the server. Please check your connection and try again.\"\n      contents={\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">Retry</Button>\n          <Button variant=\"secondary\">Go Back</Button>\n        </div>\n      }\n    />","<Empty title=\"Nothing here\" />","<Empty\n      title=\"No results found\"\n      description=\"Try adjusting your search or filter to find what you're looking for.\"\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 `<label>` element. Use when the child component provides its own accessible label (e.g. Select uses Base UI's `Select.Label` to avoid hover/focus coupling from native `<label>`)."}},"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":["<Grid variant=\"2up\" gap=\"base\">\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">First grid item</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Second grid item</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">variant=\"2up\"</p>\n        <Grid variant=\"2up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">variant=\"3up\"</p>\n        <Grid variant=\"3up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>3</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">variant=\"4up\"</p>\n        <Grid variant=\"4up\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>3</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>4</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">variant=\"2-1\" (66% / 33%)</p>\n        <Grid variant=\"2-1\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>Main Content</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">Two-thirds width</Text>\n              </div>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>Sidebar</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">One-third width</Text>\n              </div>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">variant=\"1-2\" (33% / 66%)</p>\n        <Grid variant=\"1-2\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>Sidebar</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">One-third width</Text>\n              </div>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4\">\n              <Text bold>Main Content</Text>\n              <div className=\"mt-1\">\n                <Text variant=\"secondary\">Two-thirds width</Text>\n              </div>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">gap=\"none\"</p>\n        <Grid variant=\"side-by-side\" gap=\"none\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">gap=\"sm\"</p>\n        <Grid variant=\"side-by-side\" gap=\"sm\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">\n          gap=\"base\" (default, responsive)\n        </p>\n        <Grid variant=\"side-by-side\" gap=\"base\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-kumo-subtle\">gap=\"lg\"</p>\n        <Grid variant=\"side-by-side\" gap=\"lg\">\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>1</Text>\n            </Surface>\n          </GridItem>\n          <GridItem>\n            <Surface className=\"rounded-lg p-4 text-center\">\n              <Text>2</Text>\n            </Surface>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>","<Grid variant=\"4up\" gap=\"base\" mobileDivider>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 3</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 4</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>"],"colors":["border-kumo-hairline"]},"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"},"passwordManagerIgnore":{"type":"boolean","optional":true,"description":"Suppress browser extension password manager overlays on non-credential inputs."},"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-focus/50 focus:ring-[1.5px]","error":"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]"},"stateClasses":{"default":{"focus":"focus:ring-kumo-focus/50 focus:ring-[1.5px]"},"error":{"focus":"focus:ring-kumo-danger/50 focus:ring-[1.5px]"}},"default":"default"}},"examples":["<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      description=\"We'll never share your email\"\n    />","<Input\n      label=\"Username\"\n      placeholder=\"Choose a username\"\n      description=\"3-20 characters, alphanumeric only\"\n    />","<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      error=\"Please enter a valid email address\"\n    />","<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      error={{\n        message: \"Password must be at least 8 characters\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />","<div className=\"flex flex-col gap-4\">\n      <Input size=\"xs\" label=\"Extra Small\" placeholder=\"Extra small input\" />\n      <Input size=\"sm\" label=\"Small\" placeholder=\"Small input\" />\n      <Input label=\"Base\" placeholder=\"Base input (default)\" />\n      <Input size=\"lg\" label=\"Large\" placeholder=\"Large input\" />\n    </div>","<Input label=\"Disabled field\" placeholder=\"Cannot edit\" disabled />","<Input placeholder=\"Search...\" aria-label=\"Search products\" />","<div className=\"flex flex-col gap-4\">\n      <Input\n        aria-label=\"Hostname\"\n        placeholder=\"example.com\"\n        value=\"not a host\"\n        error=\"Please enter a valid hostname\"\n      />\n      <Input\n        aria-label=\"Path\"\n        placeholder=\"/api/v1/users\"\n        value=\"missing-slash\"\n        error={{ message: \"Path must start with /\", match: true }}\n      />\n    </div>","<div className=\"flex flex-col gap-4\">\n      <Input\n        label=\"API Key (default)\"\n        type=\"password\"\n        placeholder=\"sk_live_...\"\n      />\n      <Input\n        label=\"API Key (passwordManagerIgnore)\"\n        type=\"password\"\n        placeholder=\"sk_live_...\"\n        passwordManagerIgnore\n      />\n    </div>","<div className=\"flex flex-col gap-4\">\n      <Input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n      <Input type=\"password\" label=\"Password\" placeholder=\"••••••••\" />\n      <Input type=\"number\" label=\"Age\" placeholder=\"18\" />\n      <Input type=\"tel\" label=\"Phone\" placeholder=\"+1 (555) 000-0000\" />\n    </div>","<Input\n      label=\"Phone Number\"\n      required={false}\n      placeholder=\"+1 (555) 000-0000\"\n    />","<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard under Settings > API Keys\"\n      placeholder=\"sk_live_...\"\n    />","<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />","<Input\n      label=\"With onChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Uses e.target.value\"}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />","<Input\n      label=\"With onValueChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Receives the value directly\"}\n      value={value}\n      onValueChange={(v) => setValue(v)}\n    />"],"colors":["bg-kumo-control","ring-kumo-danger","ring-kumo-focus","ring-kumo-line","text-kumo-default"],"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"}}}},"InputGroup":{"name":"InputGroup","type":"component","description":"InputGroup component","importPath":"@cloudflare/kumo","category":"Input","props":{"label":{"type":"ReactNode","optional":true,"description":"The label content — can be a string or any React node."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the control (hidden when `error` is present)."},"error":{"type":"object","optional":true,"description":"Validation error with a message and a browser `ValidityState` match key."},"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."},"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},"size":{"type":"enum","optional":true,"values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small size.","sm":"Small size.","base":"Default size.","lg":"Large size."},"classes":{"xs":"h-6 text-xs","sm":"h-7 text-xs","base":"h-9 text-base","lg":"h-11 text-base"},"default":"base"},"disabled":{"type":"boolean","optional":true}},"examples":["<div className=\"w-full max-w-2xs\">\n      <InputGroup>\n        <InputGroup.Input\n          maxLength={20}\n          onChange={handleChange}\n          value={value}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        {status !== \"idle\" && (\n          <InputGroup.Addon align=\"end\">\n            {status === \"loading\" ? (\n              <Loader />\n            ) : (\n              <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n            )}\n          </InputGroup.Addon>\n        )}\n      </InputGroup>\n    </div>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <LinkIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Paste a link...\" aria-label=\"Link\" />\n    </InputGroup>","<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>@</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"username\" aria-label=\"Username\" />\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input placeholder=\"email\" aria-label=\"Email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>/api/</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"endpoint\" aria-label=\"API path\" />\n        <InputGroup.Addon align=\"end\">.json</InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          defaultValue=\"password\"\n          aria-label=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input\n          value={searchValue}\n          placeholder=\"Search\"\n          aria-label=\"Search\"\n          onChange={(e) => setSearchValue(e.target.value)}\n        />\n        {searchValue && (\n          <InputGroup.Addon align=\"end\" className=\"pr-1\">\n            <InputGroup.Button\n              shape=\"square\"\n              icon={XIcon}\n              aria-label=\"Clear search\"\n              onClick={() => setSearchValue(\"\")}\n            />\n          </InputGroup.Addon>\n        )}\n        <InputGroup.Button variant=\"secondary\" onClick={() => {}}>\n          Search\n        </InputGroup.Button>\n      </InputGroup>\n    </div>","<InputGroup className=\"w-full max-w-2xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input\n        placeholder=\"Search with query language...\"\n        aria-label=\"Search\"\n      />\n      <InputGroup.Addon align=\"end\">\n        <InputGroup.Button\n          shape=\"square\"\n          className=\"text-kumo-subtle\"\n          icon={QuestionIcon}\n          aria-label=\"Query language help\"\n          tooltip=\"Query language help\"\n          onClick={() => {}}\n        />\n      </InputGroup.Addon>\n    </InputGroup>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Search...\" aria-label=\"Search\" />\n      <InputGroup.Addon align=\"end\">\n        <kbd className=\"border-none! bg-none!\">⌘K</kbd>\n      </InputGroup.Addon>\n    </InputGroup>","<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Input defaultValue=\"kumo\" aria-label=\"kumo\" />\n      <InputGroup.Addon align=\"end\">\n        <Loader />\n      </InputGroup.Addon>\n    </InputGroup>","<div className=\"flex w-full max-w-2xs flex-col gap-4\">\n      <InputGroup label=\"Subdomain\">\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup\n        label=\"Subdomain\"\n        error={{ message: \"This subdomain is unavailable\", match: true }}\n      >\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <XCircleIcon weight=\"duotone\" className=\"text-kumo-danger\" />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup size=\"xs\" label=\"Extra Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Extra small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"sm\" label=\"Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Base (default)\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Base input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"lg\" label=\"Large\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Large input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>","<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup\n        label=\"Error State\"\n        error={{ message: \"Please enter a valid email address\", match: true }}\n      >\n        <InputGroup.Input type=\"email\" defaultValue=\"invalid-email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Disabled\" disabled>\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search...\" />\n      </InputGroup>\n\n      <InputGroup label=\"Optional Field\" required={false}>\n        <InputGroup.Addon>$</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"0.00\" />\n      </InputGroup>\n\n      <InputGroup\n        label=\"With Description\"\n        description=\"Must be at least 8 characters\"\n        labelTooltip=\"Your password is stored securely\"\n      >\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          placeholder=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            shape=\"square\"\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>"],"colors":["border-kumo-focus","border-kumo-line","ring-kumo-danger","ring-kumo-focus","ring-kumo-line"],"subComponents":{"Input":{"name":"Input","description":"Input sub-component","props":{}},"Button":{"name":"Button","description":"Button sub-component","props":{"tooltip":{"type":"ReactNode","description":"When provided, wraps the button in a Tooltip. Automatically sets aria-label from a string value."},"tooltipSide":{"type":"\"top\" | \"right\" | \"bottom\" | \"left\"","description":"Preferred side for the tooltip popup.","default":"\"bottom\""},"variant":{"type":"\"primary\" | \"secondary\" | \"ghost\" | \"destructive\" | \"secondary-destructive\" | \"outline\"","description":"Button visual style. Defaults to ghost.","default":"\"ghost\""},"size":{"type":"\"xs\" | \"sm\" | \"base\" | \"lg\"","description":"Button size.","default":"\"sm\""}}},"Addon":{"name":"Addon","description":"Addon sub-component","props":{"align":{"type":"\"start\" | \"end\"","description":"Position relative to the input.","default":"\"start\""},"className":{"type":"string","description":"Additional CSS classes."}}},"Suffix":{"name":"Suffix","description":"Suffix sub-component","props":{"className":{"type":"string","description":"Additional CSS classes."}}},"Label":{"name":"Label","description":"Label sub-component","props":{}},"Description":{"name":"Description","description":"Description sub-component","props":{}}}},"Label":{"name":"Label","type":"component","description":"Label component for form fields.","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":["<div className=\"flex flex-col gap-4\">\n      <Label>Default Label</Label>\n      <Label showOptional>Optional Label</Label>\n      <Label tooltip=\"More information about this field\">\n        Label with Tooltip\n      </Label>\n    </div>","<Input label=\"Phone Number\" required={false} placeholder=\"+1 555-0000\" />","<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard settings under API > Keys\"\n      placeholder=\"sk_live_...\"\n    />","<Checkbox\n      label={\n        <span>\n          I agree to the <strong>Terms of Service</strong>\n        </span>\n      }\n    />","<div className=\"flex max-w-md flex-col gap-4\">\n      <Input label=\"Full Name\" placeholder=\"John Doe\" />\n      <Input\n        label=\"Email\"\n        labelTooltip=\"We'll send your receipt here\"\n        placeholder=\"john@example.com\"\n        type=\"email\"\n      />\n      <Input label=\"Company\" required={false} placeholder=\"Acme Inc.\" />\n      <Select label=\"Country\" placeholder=\"Select a country\">\n        <Select.Option value=\"us\">United States</Select.Option>\n        <Select.Option value=\"uk\">United Kingdom</Select.Option>\n        <Select.Option value=\"ca\">Canada</Select.Option>\n      </Select>\n    </div>","<div className=\"flex flex-col gap-3\">\n      <Label>Default</Label>\n      <Label showOptional>Optional</Label>\n      <Label tooltip=\"Important field\">With Tooltip</Label>\n    </div>"],"colors":["text-kumo-default","text-kumo-subtle"]},"LayerCard":{"name":"LayerCard","type":"component","description":"LayerCard component","importPath":"@cloudflare/kumo","category":"Display","props":{"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."},"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}},"examples":["<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>","<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard className=\"w-[250px] p-4\">\n      <p className=\"text-sm text-kumo-subtle\">\n        Quick start guide for new users\n      </p>\n    </LayerCard>","<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary data-testid=\"card-header\">\n        Getting Started\n      </LayerCard.Secondary>\n      <LayerCard.Primary data-testid=\"card-body\">\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>","<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"],"colors":["bg-kumo-base","bg-kumo-elevated","ring-kumo-fill","ring-kumo-hairline","ring-kumo-line","text-kumo-subtle"],"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":["<div className=\"grid gap-x-6 gap-y-4 text-base md:grid-cols-3\">\n      <Link href=\"#\">Default inline link</Link>\n      <Link href=\"#\" variant=\"current\">\n        Current color link\n      </Link>\n      <Link href=\"#\" variant=\"plain\">\n        Plain inline link\n      </Link>\n    </div>","<p className=\"mx-auto max-w-md text-base leading-relaxed text-kumo-default\">\n      This is a paragraph with an <Link href=\"#\">inline link</Link> that flows\n      naturally with the surrounding text. Links maintain proper underline\n      offset for readability.\n    </p>","<Link\n      href=\"https://cloudflare.com\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"text-base\"\n    >\n      Visit Cloudflare <Link.ExternalIcon />\n    </Link>","<p className=\"text-base text-kumo-danger\">\n      This error message contains a{\" \"}\n      <Link href=\"#\" variant=\"current\">\n        link\n      </Link>{\" \"}\n      that inherits the red color from its parent.\n    </p>","<div className=\"flex flex-col gap-x-6 gap-y-4 text-base md:flex-row\">\n      <Link render={<CustomRouterLink href=\"/dashboard\" />} variant=\"inline\">\n        Dashboard (via render)\n      </Link>\n      <Link\n        render={\n          <CustomRouterLink\n            href=\"https://developers.cloudflare.com\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          />\n        }\n        variant=\"inline\"\n      >\n        Cloudflare Docs <Link.ExternalIcon />\n      </Link>\n    </div>"],"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":["<Loader />","<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>","<Loader size={24} />","<Loader className=\"text-kumo-subtle\" />"],"colors":[]},"MenuBar":{"name":"MenuBar","type":"component","description":"MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.","importPath":"@cloudflare/kumo","category":"Navigation","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"isActive":{"type":"number | boolean | string","optional":true,"description":"The currently active option value — matched against option index or `id`."},"options":{"type":"MenuOptionProps[]","required":true,"description":"Array of menu option configurations."},"optionIds":{"type":"boolean","optional":true,"description":"When true, each option's `id` field is used for matching instead of its array index."}},"examples":[],"colors":["bg-kumo-base","bg-kumo-recessed","border-kumo-recessed","ring-kumo-brand","ring-kumo-focus","ring-kumo-line"],"styling":{"container":{"height":32,"borderRadius":8,"padding":2,"gap":2},"button":{"width":36,"borderRadius":6,"iconSize":18}}},"Meter":{"name":"Meter","type":"component","description":"Progress bar showing a measured value within a known range (e.g. quota usage).","importPath":"@cloudflare/kumo","category":"Display","props":{"customValue":{"type":"string","optional":true,"description":"Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage."},"label":{"type":"string","required":true,"description":"Label text displayed above the meter track."},"showValue":{"type":"boolean","optional":true,"description":"Whether to display the percentage value next to the label."},"trackClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the track (background bar)."},"indicatorClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the indicator (filled bar)."},"value":{"type":"number","description":"Current value of the meter"},"max":{"type":"number","description":"Maximum value of the meter (default: 100)"},"min":{"type":"number","description":"Minimum value of the meter (default: 0)"}},"examples":["<Meter label=\"Storage used\" value={65} />","<Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />","<Meter label=\"Progress\" value={40} showValue={false} />","<Meter label=\"Quota reached\" value={100} />","<Meter label=\"Memory usage\" value={15} />","<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-kumo-success via-kumo-success to-kumo-success\"\n    />"],"colors":["bg-kumo-fill","text-kumo-default","text-kumo-subtle"]},"Pagination":{"name":"Pagination","type":"component","description":"Pagination component","importPath":"@cloudflare/kumo","category":"Navigation","props":{"setPage":{"type":"(page: number) => void","required":true,"description":"Callback when page changes"},"page":{"type":"number","optional":true,"description":"Current page number (1-indexed)."},"perPage":{"type":"number","optional":true,"description":"Number of items displayed per page."},"totalCount":{"type":"number","optional":true,"description":"Total number of items across all pages."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the container"},"labels":{"type":"PaginationLabels","optional":true,"description":"Labels for internationalization of aria-labels. All labels have English defaults.\n\nFor visible text like \"Showing X of Y\", use render props on sub-components:\n- `Pagination.Info` children for the info text\n- `Pagination.PageSize` label prop for the \"Per page:\" text"},"children":{"type":"ReactNode","optional":true,"description":"Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator."},"controls":{"type":"enum","optional":true,"values":["full","simple"],"descriptions":{"full":"Full pagination controls with first, previous, page input, next, and last buttons","simple":"Simple pagination controls with only previous and next buttons"},"default":"full"},"text":{"type":"object","optional":true}},"examples":["<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"simple\"\n    />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"full\"\n    />","<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />","<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />","<Pagination\n      text={({ perPage }: { perPage?: number }) =>\n        `Page ${page} - showing ${perPage} per page`\n      }\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>","<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `Page ${page} of ${Math.ceil((totalCount ?? 1) / 25)}`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls pageSelector=\"dropdown\" />\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>","<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      labels={{\n        firstPage: \"Première page\",\n        previousPage: \"Page précédente\",\n        nextPage: \"Page suivante\",\n        lastPage: \"Dernière page\",\n        pageNumber: \"Numéro de page\",\n        pageSize: \"Taille de page\",\n      }}\n    >\n      <Pagination.Info>\n        {({ pageShowingRange, totalCount }) => (\n          <>\n            Affichage de{\" \"}\n            <span className=\"tabular-nums\">{pageShowingRange}</span> sur{\" \"}\n            <span className=\"tabular-nums\">{totalCount}</span>\n          </>\n        )}\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>"],"colors":["border-kumo-hairline","ring-kumo-hairline","text-kumo-subtle"],"subComponents":{"Info":{"name":"Info","description":"Info sub-component","props":{"children":{"type":"(props: {\n    page: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => ReactNode","optional":true,"description":"Custom render function for the info text"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"PageSize":{"name":"PageSize","description":"PageSize sub-component","props":{"value":{"type":"number","required":true,"description":"Current page size value"},"options":{"type":"number[]","optional":true,"description":"Available page size options"},"label":{"type":"ReactNode","optional":true,"description":"Label text shown before the selector."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Controls":{"name":"Controls","description":"Controls sub-component","props":{"pageSelector":{"type":"\"input\" | \"dropdown\"","optional":true,"description":"How the page number selector is rendered in \"full\" controls mode. - `\"input\"` (default): A text input where users type a page number. - `\"dropdown\"`: A dropdown select with all page numbers as options. **Note:** `\"dropdown\"` renders an option for every page, so it is best suited for small page counts. For large datasets (hundreds of pages or more) prefer `\"input\"` to avoid rendering performance overhead."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}}},"styling":{"layout":{"height":36,"buttonSize":36,"inputWidth":50,"iconSize":16,"gap":8,"borderRadius":6}}},"Popover":{"name":"Popover","type":"component","description":"Popover component for displaying accessible popup content anchored to a trigger.","importPath":"@cloudflare/kumo","category":"Overlay","props":{"side":{"type":"enum","optional":true,"description":"Which side of the trigger the popover appears on.\n- `\"top\"` — Above the trigger\n- `\"bottom\"` — Below the trigger\n- `\"left\"` — Left of the trigger\n- `\"right\"` — Right of the trigger","values":["top","bottom","left","right"],"descriptions":{"top":"Popover appears above the trigger","bottom":"Popover appears below the trigger","left":"Popover appears to the left of the trigger","right":"Popover appears to the right of the trigger"},"default":"bottom"}},"examples":["<Popover>\n      <Popover.Trigger\n        render={\n          <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n        }\n      />\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger render={<Button />}>Open Popover</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger render={<Button />}>Open Settings</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Close\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>","<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Bottom\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Top\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Left\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Right\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>","<Popover>\n      <Popover.Trigger render={<Button />}>User Profile</Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-kumo-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-kumo-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-kumo-hairline pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close\n            render={<Button variant=\"ghost\" size=\"sm\" className=\"flex-1\" />}\n          >\n            Sign Out\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>","<Popover>\n      <Popover.Trigger\n        openOnHover\n        delay={200}\n        render={<Button variant=\"secondary\" />}\n      >\n        Hover Me\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Got it\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>","<div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-lg border border-kumo-hairline\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-kumo-elevated\">\n            <tr>\n              <th className=\"px-4 py-2 text-left font-medium\">Name</th>\n              <th className=\"px-4 py-2 text-left font-medium\">Status</th>\n              <th className=\"w-12 px-4 py-2\"></th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-kumo-hairline\">\n            {rows.map((row) => (\n              <tr\n                key={row.id}\n                ref={(el) => {\n                  if (el) rowRefs.current.set(row.id, el);\n                }}\n                className={\n                  selectedRow === row.id ? \"bg-kumo-recessed\" : \"bg-kumo-base\"\n                }\n              >\n                <td className=\"px-4 py-2 font-mono\">{row.name}</td>\n                <td className=\"px-4 py-2 text-kumo-subtle\">{row.status}</td>\n                <td className=\"px-4 py-2\">\n                  <Button\n                    size=\"xs\"\n                    variant=\"ghost\"\n                    shape=\"square\"\n                    icon={DotsThree}\n                    aria-label={`Actions for ${row.name}`}\n                    onClick={() => handleEdit(row.id)}\n                  />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <Popover\n        open={!!selectedRow}\n        onOpenChange={(open) => !open && setSelectedRow(null)}\n      >\n        <Popover.Content\n          side=\"left\"\n          anchor={\n            anchorRect ? { getBoundingClientRect: () => anchorRect } : undefined\n          }\n        >\n          <Popover.Title>\n            Edit {rows.find((r) => r.id === selectedRow)?.name}\n          </Popover.Title>\n          <Popover.Description>\n            The popover anchors to the selected row, not the icon button.\n          </Popover.Description>\n          <div className=\"mt-3\">\n            <Popover.Close render={<Button size=\"sm\" variant=\"secondary\" />}>\n              Close\n            </Popover.Close>\n          </div>\n        </Popover.Content>\n      </Popover>\n    </div>"],"colors":["bg-kumo-base","fill-kumo-arrow-edge","fill-kumo-arrow-stroke","fill-kumo-base","outline-kumo-line","text-kumo-default","text-kumo-subtle"],"subComponents":{"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{}},"Content":{"name":"Content","description":"Content 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":{}}}},"Radio":{"name":"Radio","type":"component","description":"Radio — radio button group for single-select choices.","importPath":"@cloudflare/kumo","category":"Input","props":{"variant":{"type":"enum","values":["default","error"],"default":"default","descriptions":{"default":"Default radio appearance","error":"Error state for validation failures"},"classes":{"default":"ring-kumo-hairline","error":"ring-kumo-danger"}},"appearance":{"type":"KumoRadioAppearance","optional":true,"description":"Visual appearance applied to all Radio.Item children. - `\"default\"` — Standard inline radio items - `\"card\"` — Choice card with border, padding, and highlighted selection state Individual items can override this with their own `appearance` prop."},"legend":{"type":"string","optional":true,"description":"Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Radio.Item components (and optionally a Radio.Legend)"},"orientation":{"type":"\"vertical\" | \"horizontal\"","optional":true,"description":"Layout direction of the radio items"},"error":{"type":"string","optional":true,"description":"Error message for the group"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"T","optional":true,"description":"The controlled value of the selected radio item."},"disabled":{"type":"boolean","optional":true,"description":"Whether all radios in the group are disabled"},"controlPosition":{"type":"RadioControlPosition","optional":true,"description":"Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance."},"name":{"type":"string","optional":true,"description":"Form submission name for the radio group"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"defaultValue":{"type":"T","description":"The uncontrolled initial value of the selected radio item."},"onValueChange":{"type":"(value: T, eventDetails: RadioGroupChangeEventDetails) => void","description":"Callback fired when the selected value changes. The second argument carries native event details about the interaction."}},"examples":["<Radio.Group\n      legend=\"Notification preference\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Email\" value=\"email\" />\n      <Radio.Item label=\"SMS\" value=\"sms\" />\n      <Radio.Item label=\"Push notification\" value=\"push\" />\n    </Radio.Group>","<Radio.Group legend=\"Account type\" value={value} onValueChange={setValue}>\n      <Radio.Item label=\"Personal\" value=\"personal\" />\n      <Radio.Item label=\"Business\" value=\"business\" />\n      <Radio.Item label=\"Enterprise\" value=\"enterprise\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"Size\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Small\" value=\"sm\" />\n      <Radio.Item label=\"Medium\" value=\"md\" />\n      <Radio.Item label=\"Large\" value=\"lg\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"Shipping method\"\n      description=\"Choose how you'd like to receive your order\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Standard (5-7 days)\" value=\"standard\" />\n      <Radio.Item label=\"Express (2-3 days)\" value=\"express\" />\n      <Radio.Item label=\"Overnight\" value=\"overnight\" />\n    </Radio.Group>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group\n        legend=\"Payment method\"\n        error=\"Please select a payment method to continue\"\n      >\n        <Radio.Item label=\"Credit Card\" value=\"card\" variant=\"error\" />\n        <Radio.Item label=\"PayPal\" value=\"paypal\" variant=\"error\" />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"Payment method\"\n        appearance=\"card\"\n        error=\"Please select a payment method to continue\"\n      >\n        <Radio.Item\n          label=\"Credit Card\"\n          description=\"Pay with Visa, Mastercard, American Express, or Elo.\"\n          value=\"card\"\n          variant=\"error\"\n        />\n        <Radio.Item\n          label=\"PayPal\"\n          description=\"Pay with your PayPal account.\"\n          value=\"paypal\"\n          variant=\"error\"\n        />\n      </Radio.Group>\n    </div>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group legend=\"Disabled group\" disabled defaultValue=\"a\">\n        <Radio.Item label=\"Option A\" value=\"a\" />\n        <Radio.Item label=\"Option B\" value=\"b\" />\n      </Radio.Group>\n      <Radio.Group legend=\"Individual disabled\" defaultValue=\"available\">\n        <Radio.Item label=\"Available\" value=\"available\" />\n        <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"Disabled card group\"\n        appearance=\"card\"\n        disabled\n        defaultValue=\"a\"\n      >\n        <Radio.Item\n          label=\"Option A\"\n          description=\"This option is disabled.\"\n          value=\"a\"\n        />\n        <Radio.Item\n          label=\"Option B\"\n          description=\"This option is disabled.\"\n          value=\"b\"\n        />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"Individual disabled card\"\n        appearance=\"card\"\n        defaultValue=\"available\"\n      >\n        <Radio.Item\n          label=\"Available\"\n          description=\"This option can be selected.\"\n          value=\"available\"\n        />\n        <Radio.Item\n          label=\"Unavailable\"\n          description=\"This option is not available.\"\n          value=\"unavailable\"\n          disabled\n        />\n      </Radio.Group>\n    </div>","<Radio.Group legend=\"Preferences\" controlPosition=\"end\" defaultValue=\"a\">\n      <Radio.Item label=\"Label before radio\" value=\"a\" />\n      <Radio.Item label=\"Another option\" value=\"b\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"Business\"\n        description=\"For small businesses operating online.\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"Contract\"\n        description=\"For mission-critical applications that are core to your business.\"\n        value=\"contract\"\n      />\n    </Radio.Group>","<Radio.Group defaultValue=\"all\" value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"sr-only\">Paths</Radio.Legend>\n      <Radio.Item label=\"Allow all paths\" value=\"all\" />\n      <Radio.Item label=\"Restrict to specific paths\" value=\"specific\" />\n    </Radio.Group>","<Radio.Group value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification preference\n      </Radio.Legend>\n      <Radio.Item label=\"Email\" value=\"email\" />\n      <Radio.Item label=\"SMS\" value=\"sms\" />\n      <Radio.Item label=\"Push notification\" value=\"push\" />\n    </Radio.Group>","<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      controlPosition=\"start\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n    </Radio.Group>","<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group<number>\n        legend=\"Items per page\"\n        value={pageSize}\n        onValueChange={setPageSize}\n      >\n        <Radio.Item<number> label=\"10\" value={10} />\n        <Radio.Item<number> label=\"25\" value={25} />\n        <Radio.Item<number> label=\"50\" value={50} />\n      </Radio.Group>\n      <Radio.Group<ThemeType>\n        legend=\"Theme\"\n        value={theme}\n        onValueChange={setTheme}\n      >\n        <Radio.Item<ThemeType> label=\"Light\" value={ThemeType.light} />\n        <Radio.Item<ThemeType> label=\"Dark\" value={ThemeType.dark} />\n        <Radio.Item<ThemeType> label=\"System\" value={ThemeType.system} />\n      </Radio.Group>\n    </div>","<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Free\n            <Badge variant=\"neutral\">$0</Badge>\n          </span>\n        }\n        description=\"For personal or hobby projects.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Pro\n            <Badge variant=\"primary\">Popular</Badge>\n          </span>\n        }\n        description=\"For professional websites.\"\n        value=\"pro\"\n      />\n    </Radio.Group>","<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"Business\"\n        description=\"For small businesses operating online.\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"Contract\"\n        description=\"For mission-critical applications that are core to your business.\"\n        value=\"contract\"\n      />\n    </Radio.Group>"],"colors":["bg-kumo-base","bg-kumo-contrast","bg-kumo-tint","border-kumo-danger","border-kumo-hairline","border-kumo-interact","ring-kumo-brand","ring-kumo-danger","ring-kumo-focus","ring-kumo-hairline","ring-kumo-line","text-kumo-danger","text-kumo-default","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,"description":"Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Radio.Item components (and optionally a Radio.Legend)"},"orientation":{"type":"\"vertical\" | \"horizontal\"","optional":true,"description":"Layout direction of the radio items"},"appearance":{"type":"KumoRadioAppearance","optional":true,"description":"Visual appearance applied to all Radio.Item children. - `\"default\"` — Standard inline radio items - `\"card\"` — Choice card with border, padding, and highlighted selection state Individual items can override this with their own `appearance` prop."},"error":{"type":"string","optional":true,"description":"Error message for the group"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"value":{"type":"T","optional":true,"description":"The controlled value of the selected radio item."},"disabled":{"type":"boolean","optional":true,"description":"Whether all radios in the group are disabled"},"controlPosition":{"type":"RadioControlPosition","optional":true,"description":"Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance."},"name":{"type":"string","optional":true,"description":"Form submission name for the radio group"},"className":{"type":"string","optional":true,"description":"Additional CSS classes"},"defaultValue":{"type":"T","description":"The uncontrolled initial value of the selected radio item."},"onValueChange":{"type":"(value: T, eventDetails: RadioGroupChangeEventDetails) => void","description":"Callback fired when the selected value changes. The second argument carries native event details about the interaction."}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}}},"SankeyChart":{"name":"SankeyChart","type":"component","description":"SankeyChart component","importPath":"@cloudflare/kumo","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"nodes":{"type":"SankeyNodeData[]","required":true,"description":"Array of nodes in the Sankey diagram"},"links":{"type":"SankeyLinkData[]","required":true,"description":"Array of links connecting nodes by index"},"height":{"type":"number","optional":true,"description":"Height of the chart in pixels"},"showNodeValues":{"type":"boolean","optional":true,"description":"Show node values above labels (default: true if any node has a value)"},"nodeLabelLayout":{"type":"\"stacked\" | \"inline\"","optional":true,"description":"Layout for node labels when showNodeValues is true. - 'stacked': value on top, name below (default) - 'inline': \"value name\" on a single line (better for small nodes)"},"formatValue":{"type":"(value: number) => string","optional":true,"description":"Format function for node values (default: toLocaleString)"},"tooltipFormatter":{"type":"(params: SankeyTooltipParams) => string","optional":true,"description":"Custom tooltip formatter. Return HTML string or empty string to hide tooltip."},"nodeWidth":{"type":"number","optional":true},"nodePadding":{"type":"number","optional":true},"showTooltip":{"type":"boolean","optional":true},"defaultNodeColor":{"type":"string","optional":true},"left":{"type":"number | string","optional":true,"description":"Left padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'."},"right":{"type":"number | string","optional":true,"description":"Right padding of the Sankey layout within the chart container. Accepts a number (px) or percentage string. ECharts default: '5%'."},"linkColor":{"type":"\"gradient\" | \"gray\"","optional":true,"description":"Link fill style: 'gradient' blends source to target colors, 'gray' uses flat gray"},"linkOpacity":{"type":"number","optional":true},"className":{"type":"string","optional":true},"isDarkMode":{"type":"boolean","optional":true}},"examples":["<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={previewNodes}\n      links={previewLinks}\n      height={200}\n      showTooltip={false}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={multiLevelNodes}\n      links={multiLevelLinks}\n      height={350}\n      nodeWidth={20}\n      nodePadding={15}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={250}\n      linkOpacity={0.6}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      tooltipFormatter={customTooltip}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      left={0}\n      right={0}\n      isDarkMode={isDarkMode}\n    />","<SankeyChart\n      echarts={echarts}\n      nodes={basicNodes}\n      links={basicLinks}\n      height={350}\n      onNodeClick={handleNodeClick}\n      onLinkClick={handleLinkClick}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-2\">\n      <div className=\"flex items-center gap-2 text-sm text-kumo-subtle\">\n        <span>\n          {hasSelection\n            ? `Showing: ${[selectedSource, selectedTarget].filter(Boolean).join(\" → \")}`\n            : \"Click a node to filter\"}\n        </span>\n        {hasSelection && (\n          <button\n            onClick={resetFilters}\n            className=\"text-kumo-brand hover:underline\"\n          >\n            Reset\n          </button>\n        )}\n      </div>\n      <SankeyChart\n        echarts={echarts}\n        nodes={filteredNodes}\n        links={filteredLinks}\n        height={300}\n        onNodeClick={handleNodeClick}\n        isDarkMode={isDarkMode}\n      />\n    </div>","<SankeyChart\n      echarts={echarts}\n      nodes={nodes}\n      links={links}\n      height={300}\n      nodeLabelLayout=\"inline\"\n      isDarkMode={isDarkMode}\n    />"],"colors":[]},"Select":{"name":"Select","type":"component","description":"Select component","importPath":"@cloudflare/kumo","category":"Input","props":{"align":{"type":"enum","optional":true,"description":"How to align the popup relative to the specified side.","values":["start","center","end"]},"alignItemWithTrigger":{"type":"boolean","optional":true,"description":"Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space."},"alignOffset":{"type":"number | OffsetFunction","optional":true,"description":"Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."},"anchor":{"type":"ReactNode","optional":true,"description":"An element to position the popup against. By default, the popup will be positioned against the trigger."},"arrowPadding":{"type":"number","optional":true,"description":"Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup."},"collisionAvoidance":{"type":"CollisionAvoidance","optional":true,"description":"Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side   (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within   the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the   alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first   (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first   (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`."},"collisionBoundary":{"type":"Boundary","optional":true,"description":"An element or a rectangle that delimits the area that the popup is confined to."},"collisionPadding":{"type":"Padding","optional":true,"description":"Additional space to maintain from the edge of the collision boundary."},"disableAnchorTracking":{"type":"boolean","optional":true,"description":"Whether to disable the popup from tracking any layout shift of its positioning anchor."},"positionMethod":{"type":"enum","optional":true,"description":"Determines which CSS `position` property to use.","values":["absolute","fixed"]},"side":{"type":"enum","optional":true,"description":"Which side of the anchor element to align the popup against. May automatically change to avoid collisions.","values":["top","bottom","left","right","inline-end","inline-start"]},"sideOffset":{"type":"number | OffsetFunction","optional":true,"description":"Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side."},"sticky":{"type":"boolean","optional":true,"description":"Whether to maintain the popup in the viewport after the anchor element was scrolled out of view."},"className":{"type":"string","optional":true,"description":"Additional CSS classes merged via `cn()`."},"render":{"type":"ReactNode","optional":true,"description":"Replaces the trigger element while preserving Select behavior."},"size":{"type":"enum","optional":true,"description":"Size of the select trigger. Matches Input component sizes.","values":["xs","sm","base","lg"],"default":"base"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead."},"hideLabel":{"type":"boolean","optional":true},"placeholder":{"type":"string","optional":true,"description":"Placeholder text shown when no value is selected."},"loading":{"type":"boolean","optional":true,"description":"When `true`, shows a skeleton loader in place of the selected value."},"disabled":{"type":"boolean","optional":true,"description":"Whether the select is disabled."},"required":{"type":"boolean","optional":true,"description":"Whether the select is required. When `false`, shows \"(optional)\" text."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content displayed next to the label via an info icon."},"value":{"type":"T","optional":true,"description":"Currently selected value (controlled mode)."},"children":{"type":"ReactNode","optional":true,"description":"`Select.Option` elements to render in the dropdown."},"description":{"type":"ReactNode","optional":true,"description":"Helper text displayed below the select."},"error":{"type":"string | object","optional":true,"description":"Error message string or validation error object with `match` key."},"onValueChange":{"type":"(value: T) => void","description":"Callback when selection changes"},"defaultValue":{"type":"T","description":"Initial value for uncontrolled mode"},"renderValue":{"type":"(value: T) => ReactNode","description":"A function that returns a ReactNode to format the selected value in the trigger. Required when using object values. Use `placeholder` for the empty state."},"items":{"type":"Record<string, string> | Array<{ label: ReactNode; value: T }>","description":"Data structure of items rendered in the popup. Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }` for object/complex values."},"isItemEqualToValue":{"type":"(item: T, value: T) => boolean","description":"Custom equality function for comparing items. Required when value is an object, since object identity (`===`) won't match across renders."}},"examples":["<Select\n      label=\"Favorite Fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />","<div className=\"grid gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">xs</span>\n        <Select\n          aria-label=\"Select size xs\"\n          size=\"xs\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">sm</span>\n        <Select\n          aria-label=\"Select size sm\"\n          size=\"sm\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">base</span>\n        <Select\n          aria-label=\"Select size base\"\n          size=\"base\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">lg</span>\n        <Select\n          aria-label=\"Select size lg\"\n          size=\"lg\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n    </div>","<Select\n      aria-label=\"Select a fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />","<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />","<Select\n      label=\"Issue Type\"\n      error=\"Please select an issue type\"\n      className=\"w-[280px]\"\n      value={null}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />","<Select\n      label=\"Category\"\n      placeholder=\"Choose a category...\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />","<Select\n      label=\"Priority\"\n      labelTooltip=\"Higher priority issues are addressed first\"\n      placeholder=\"Select priority\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        low: \"Low\",\n        medium: \"Medium\",\n        high: \"High\",\n        critical: \"Critical\",\n      }}\n    />","<Select\n      label=\"Language\"\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select aria-label=\"Loading select\" className=\"w-[200px]\" loading />","<Select\n      label=\"Assignee\"\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Select assignee\"\n      items={items}\n    />","<Select\n      label=\"Visible Columns\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>","<Select\n      label=\"Compliance Frameworks\"\n      className=\"w-[280px]\"\n      multiple\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"European Union Privacy Regulation\">\n        European Union Privacy Regulation\n      </Select.Option>\n      <Select.Option value=\"California Consumer Protection Act\">\n        California Consumer Protection Act\n      </Select.Option>\n      <Select.Option value=\"Health Insurance Portability Act\">\n        Health Insurance Portability Act\n      </Select.Option>\n      <Select.Option value=\"Payment Card Industry Standard\">\n        Payment Card Industry Standard\n      </Select.Option>\n    </Select>","<Select\n      label=\"Issue Types\"\n      className=\"w-[220px]\"\n      multiple\n      renderValue={(selected) => (\n        <span className=\"flex items-center gap-2\">\n          <span>Issue Types</span>\n          {selected.length > 0 && (\n            <Badge variant=\"neutral\">{selected.length}</Badge>\n          )}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      {allOptions.map((option) => (\n        <Select.Option key={option.value} value={option.value}>\n          {option.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      placeholder=\"Select an author\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => author.name}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"Deployment Region\"\n      placeholder=\"Choose a region...\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Region | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {regions.map((region) => (\n        <Select.Option\n          key={region.value}\n          value={region}\n          disabled={region.disabled}\n        >\n          {region.label}\n        </Select.Option>\n      ))}\n    </Select>","<Select\n      label=\"Plan\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        free: \"Free\",\n        pro: \"Pro\",\n        business: { label: \"Business\", disabled: true },\n        enterprise: { label: \"Enterprise\", disabled: true },\n      }}\n    />","<Select\n      label=\"Food\"\n      placeholder=\"Pick a food...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Food | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Fruits</Select.GroupLabel>\n        {foods.fruits.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Vegetables</Select.GroupLabel>\n        {foods.vegetables.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>","<Select\n      label=\"Server Region\"\n      placeholder=\"Select a region...\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as ServerRegion | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Available</Select.GroupLabel>\n        {serverRegions.available.map((region) => (\n          <Select.Option key={region.value} value={region}>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Unavailable</Select.GroupLabel>\n        {serverRegions.unavailable.map((region) => (\n          <Select.Option key={region.value} value={region} disabled>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>","<Select\n      label=\"Long List Select\"\n      description=\"Tests scrolling behavior with many options\"\n      placeholder=\"Choose an option...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as LongListItem | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>","<div className=\"grid gap-4 sm:grid-cols-2\">\n      <Select\n        label=\"side=bottom (default)\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"side=top\"\n        side=\"top\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"align=end\"\n        align=\"end\"\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n      <Select\n        label=\"sideOffset=12\"\n        sideOffset={12}\n        className=\"w-[200px]\"\n        defaultValue=\"earth\"\n        items={planets}\n      />\n    </div>","<div className=\"flex flex-wrap items-start gap-8\">\n      <Select\n        label=\"Anchored (default)\"\n        description=\"Opens below the trigger\"\n        className=\"w-[200px]\"\n        defaultValue=\"mars\"\n        items={planets}\n      />\n      <Select\n        label=\"Aligned to selection\"\n        description=\"Selected option lands on the trigger\"\n        alignItemWithTrigger\n        className=\"w-[200px]\"\n        defaultValue=\"mars\"\n        items={planets}\n      />\n    </div>"],"colors":["bg-kumo-base","bg-kumo-elevated","bg-kumo-hairline","bg-kumo-tint","border-kumo-line","ring-kumo-brand","ring-kumo-danger","ring-kumo-focus","ring-kumo-line","text-kumo-danger","text-kumo-default","text-kumo-placeholder","text-kumo-subtle"],"subComponents":{"Option":{"name":"Option","description":"Option sub-component","props":{}},"Group":{"name":"Group","description":"Group sub-component","props":{}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{}}},"styling":{"trigger":{"height":36,"paddingX":12,"borderRadius":8,"background":"bg-kumo-elevated","text":"text-color-surface","ring":"color-border","fontSize":16,"fontWeight":400},"stateTokens":{"focus":{"ring":"color-active"},"disabled":{"opacity":0.5}},"icons":{"caret":{"name":"ph-caret-up-down","size":20},"check":{"name":"ph-check","size":20}},"popup":{"background":"bg-kumo-elevated","ring":"border-kumo-line","borderRadius":8,"padding":6},"option":{"paddingX":8,"paddingY":6,"borderRadius":4,"fontSize":16,"highlightBackground":"color-surface-secondary"}}},"SensitiveInput":{"name":"SensitiveInput","type":"component","description":"Password/secret input that masks its value by default and reveals on click. Includes a built-in copy-to-clipboard button on hover.","importPath":"@cloudflare/kumo","category":"Other","props":{"alt":{"type":"string","optional":true},"autoComplete":{"type":"React.HTMLInputAutoCompleteAttribute","optional":true},"checked":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"height":{"type":"number | string","optional":true},"list":{"type":"string","optional":true},"name":{"type":"string","optional":true},"placeholder":{"type":"string","optional":true},"readOnly":{"type":"boolean","optional":true},"required":{"type":"boolean","optional":true},"width":{"type":"number | string","optional":true},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"value":{"type":"string","optional":true,"description":"Controlled value"},"size":{"type":"enum","optional":true,"description":"Size of the input.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default input size\n- `\"lg\"` — Large for prominent fields","values":["xs","sm","base","lg"],"default":"base"},"variant":{"type":"enum","optional":true,"description":"Style variant of the input.\n- `\"default\"` — Default input appearance\n- `\"error\"` — Error state for validation failures","values":["default","error"],"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the input (enables Field wrapper and sets masked state label) - 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"}},"examples":["<div className=\"w-80\">\n      <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n    </div>","<div className=\"flex flex-col gap-4\">\n      {sizes.map((size) => (\n        <div key={size} className=\"flex items-center gap-2\">\n          <span className=\"w-12 text-sm text-kumo-subtle\">{size}</span>\n          <SensitiveInput\n            label={`${size} size`}\n            size={size}\n            defaultValue=\"secret-api-key-123\"\n          />\n        </div>\n      ))}\n    </div>","<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput\n        label=\"Controlled Secret\"\n        value={value}\n        onValueChange={setValue}\n      />\n      <div className=\"text-sm text-kumo-subtle\">\n        Current value: <code className=\"text-kumo-default\">{value}</code>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button\n          onClick={() => setValue(\"new-secret-\" + Date.now())}\n          variant=\"primary\"\n          size=\"sm\"\n        >\n          Change value\n        </Button>\n        <Button onClick={() => setValue(\"\")} variant=\"secondary\" size=\"sm\">\n          Clear\n        </Button>\n      </div>\n    </div>","<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput\n        label=\"Error State\"\n        variant=\"error\"\n        defaultValue=\"invalid-key\"\n        error=\"This API key is not valid\"\n      />\n      <SensitiveInput label=\"Disabled\" defaultValue=\"cannot-edit\" disabled />\n      <SensitiveInput\n        label=\"Read-only\"\n        defaultValue=\"view-only-secret-key\"\n        readOnly\n      />\n      <SensitiveInput\n        label=\"With Description\"\n        defaultValue=\"my-secret-value\"\n        description=\"Keep this value secure and don't share it\"\n      />\n    </div>"],"colors":["bg-kumo-brand","bg-kumo-control","outline-kumo-focus","ring-kumo-brand","ring-kumo-focus","text-kumo-default","text-kumo-subtle"]},"Sidebar":{"name":"Sidebar","type":"component","description":"Sidebar — responsive navigation panel with expand/collapse support.","importPath":"@cloudflare/kumo","category":"Other","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state when uncontrolled."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"variant":{"type":"enum","optional":true,"description":"Sidebar layout variant.","values":["sidebar","floating","inset"],"descriptions":{"sidebar":"Standard sidebar with border separator","floating":"Floating sidebar with shadow and rounded corners","inset":"Inset sidebar within the content area"},"default":"sidebar"},"side":{"type":"enum","optional":true,"description":"Which side the sidebar is on.","values":["left","right"],"descriptions":{"left":"Left-aligned sidebar","right":"Right-aligned sidebar"},"default":"left"},"collapsible":{"type":"enum","optional":true,"values":["icon","offcanvas","none"],"descriptions":{"icon":"Collapses to show icons only","offcanvas":"Slides off screen when collapsed","none":"Cannot be collapsed"},"default":"icon"},"resizable":{"type":"boolean","optional":true,"description":"Enable drag-to-resize on the sidebar edge."},"defaultWidth":{"type":"number","optional":true,"description":"Initial width in pixels when resizable."},"minWidth":{"type":"number","optional":true,"description":"Minimum width in pixels when resizing."},"maxWidth":{"type":"number","optional":true,"description":"Maximum width in pixels when resizing."},"contained":{"type":"boolean","optional":true,"description":"When true, the collapsed sidebar uses absolute positioning instead of fixed, keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars."},"peekable":{"type":"boolean","optional":true,"description":"When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `\"peeking\"` during the peek. Moving away collapses it back."},"animationDuration":{"type":"number","optional":true,"description":"Duration of sidebar expand/collapse animation in milliseconds."},"mobileBreakpoint":{"type":"number","optional":true,"description":"Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail."},"children":{"type":"ReactNode","optional":true,"description":"Content — typically `<Sidebar>` + main content."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the wrapper div."}},"examples":["<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubItem>\n                          <Sidebar.Collapsible>\n                            <Sidebar.CollapsibleTrigger\n                              render={\n                                <Sidebar.MenuSubButton>\n                                  Workers & Pages\n                                  <Sidebar.MenuChevron />\n                                </Sidebar.MenuSubButton>\n                              }\n                            />\n                            <Sidebar.CollapsibleContent>\n                              <Sidebar.MenuSub>\n                                <Sidebar.MenuSubButton>\n                                  Overview\n                                </Sidebar.MenuSubButton>\n                                <Sidebar.MenuSubButton>\n                                  Workers\n                                </Sidebar.MenuSubButton>\n                                <Sidebar.MenuSubButton>\n                                  Pages\n                                </Sidebar.MenuSubButton>\n                              </Sidebar.MenuSub>\n                            </Sidebar.CollapsibleContent>\n                          </Sidebar.Collapsible>\n                        </Sidebar.MenuSubItem>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <ToggleButton />\n          <p>Click the button or the sidebar trigger to toggle</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          {loading ? (\n            <Sidebar.Loading />\n          ) : (\n            <Sidebar.Content>\n              <Sidebar.Group>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={HouseIcon} active>\n                    Home\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={ChartBarIcon}>\n                    Analytics\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={CodeIcon}>\n                    Compute\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={DatabaseIcon}>\n                    Storage\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.Group>\n            </Sidebar.Content>\n          )}\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <button\n            type=\"button\"\n            onClick={() => setLoading((l) => !l)}\n            className=\"cursor-pointer rounded-lg border border-kumo-line bg-kumo-base px-3 py-1.5 text-base text-kumo-default transition-colors hover:bg-kumo-tint\"\n          >\n            {loading ? \"Show loaded nav\" : \"Show loading\"}\n          </button>\n          <p>Toggle to compare the loading state with the loaded nav</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p>Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        side=\"right\"\n        className=\"h-full min-h-0!\"\n      >\n        <DemoMain />\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  Properties\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Metrics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>Alerts</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        peekable\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <PeekStateIndicator />\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<div className=\"relative h-[420px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base\">\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  Security\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Zero Trust\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GearIcon}>\n                  Settings\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible autoScrollOnOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Workers\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>Overview</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Deployments\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Observability\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>Settings</Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={CubeIcon}>\n                  Containers\n                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <p>Open Workers near the bottom of the list</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <button\n              type=\"button\"\n              onClick={() =>\n                setSurface((s) => (s === \"account\" ? \"zone\" : \"account\"))\n              }\n              className=\"flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint\"\n            >\n              <ArrowsLeftRightIcon className=\"size-4 shrink-0 text-kumo-brand\" />\n              <span className=\"flex-1 text-left font-semibold text-kumo-strong\">\n                {surface === \"account\" ? \"Account Nav\" : \"Zone Nav\"}\n              </span>\n            </button>\n          </Sidebar.Header>\n\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"zone\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Account</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      Home\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={UserIcon}>\n                      Members\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={GearIcon}>\n                      Settings\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"zone\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Zone</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      Overview\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Caching\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n        </Sidebar>\n        <DemoMain>\n          <div className=\"flex flex-col items-center gap-2\">\n            <p className=\"font-medium text-kumo-default\">\n              Active: {surface === \"account\" ? \"Account\" : \"Zone\"} surface\n            </p>\n            <p>Click the header button to slide between views</p>\n          </div>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider\n        contained\n        defaultOpen\n        peekable\n        className=\"h-full min-h-0!\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n          <Sidebar.SlidingViews\n            activeKey={surface}\n            direction={surface === \"domain\" ? \"left\" : \"right\"}\n          >\n            <Sidebar.SlidingView value=\"account\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={MagnifyingGlassIcon}\n                      tooltip=\"Search\"\n                      className=\"mb-3 ring ring-kumo-line transition-[margin] duration-(--sidebar-animation-duration) group-data-[state=collapsed]/sidebar:mb-0 group-data-[state=collapsed]/sidebar:ring-transparent\"\n                    >\n                      Quick search&hellip;\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={HouseIcon} active>\n                      Home\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics & Logs\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton\n                      icon={GlobeIcon}\n                      onClick={() => setSurface(\"domain\")}\n                    >\n                      Domains\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuItem>\n                      <Sidebar.Collapsible defaultOpen>\n                        <Sidebar.CollapsibleTrigger\n                          render={\n                            <Sidebar.MenuButton icon={CodeIcon}>\n                              Compute\n                              <Sidebar.MenuChevron />\n                            </Sidebar.MenuButton>\n                          }\n                        />\n                        <Sidebar.CollapsibleContent>\n                          <Sidebar.MenuSub>\n                            <Sidebar.MenuSubItem>\n                              <Sidebar.Collapsible>\n                                <Sidebar.CollapsibleTrigger\n                                  render={\n                                    <Sidebar.MenuSubButton>\n                                      Workers & Pages\n                                      <Sidebar.MenuChevron />\n                                    </Sidebar.MenuSubButton>\n                                  }\n                                />\n                                <Sidebar.CollapsibleContent>\n                                  <Sidebar.MenuSub>\n                                    <Sidebar.MenuSubButton>\n                                      Overview\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Workers\n                                    </Sidebar.MenuSubButton>\n                                    <Sidebar.MenuSubButton>\n                                      Pages\n                                    </Sidebar.MenuSubButton>\n                                  </Sidebar.MenuSub>\n                                </Sidebar.CollapsibleContent>\n                              </Sidebar.Collapsible>\n                            </Sidebar.MenuSubItem>\n                            <Sidebar.MenuSubButton>\n                              Durable Objects\n                            </Sidebar.MenuSubButton>\n                            <Sidebar.MenuSubButton>\n                              Containers\n                              <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                            </Sidebar.MenuSubButton>\n                          </Sidebar.MenuSub>\n                        </Sidebar.CollapsibleContent>\n                      </Sidebar.Collapsible>\n                    </Sidebar.MenuItem>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Storage\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      Zero Trust\n                      <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n\n            <Sidebar.SlidingView value=\"domain\">\n              <Sidebar.Content>\n                <Sidebar.Group>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton\n                      icon={ArrowLeftIcon}\n                      onClick={() => setSurface(\"account\")}\n                    >\n                      Back\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n                <Sidebar.Group>\n                  <Sidebar.GroupLabel>example.com</Sidebar.GroupLabel>\n                  <Sidebar.Menu>\n                    <Sidebar.MenuButton icon={GlobeIcon} active>\n                      Overview\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                      Security\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={LockIcon}>\n                      SSL/TLS\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={ChartBarIcon}>\n                      Analytics\n                    </Sidebar.MenuButton>\n                    <Sidebar.MenuButton icon={DatabaseIcon}>\n                      Caching\n                    </Sidebar.MenuButton>\n                  </Sidebar.Menu>\n                </Sidebar.Group>\n              </Sidebar.Content>\n            </Sidebar.SlidingView>\n          </Sidebar.SlidingViews>\n\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>","<DemoContainer>\n      <Sidebar.Provider contained defaultOpen className=\"h-full min-h-0!\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                {LONG_NAV_ITEMS.map((label, idx) => (\n                  <Sidebar.MenuButton\n                    key={label}\n                    icon={idx === 0 ? HouseIcon : GlobeIcon}\n                    active={idx === 0}\n                    itemId={ANCHOR_ID_BY_LABEL[label]}\n                  >\n                    {label}\n                  </Sidebar.MenuButton>\n                ))}\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <ScrollToItemControls />\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>","<div className=\"relative h-[540px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base\">\n      <Sidebar.Provider contained mobileBreakpoint={9999} className=\"h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={CodeIcon}>Compute</Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <MobileToggleButton />\n          <p>Click the button to open the mobile sidebar</p>\n          <p className=\"text-sm text-kumo-subtle\">\n            Press Escape or click the backdrop to close\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </div>","<div className=\"flex flex-col gap-3\">\n      {/* Width control — stands in for resizing a real phone viewport. */}\n      <label className=\"flex items-center gap-3 text-sm text-kumo-subtle\">\n        <span className=\"shrink-0\">Viewport</span>\n        <input\n          type=\"range\"\n          min={280}\n          max={720}\n          value={width}\n          onChange={(e) => setWidth(Number(e.target.value))}\n          className=\"flex-1 cursor-pointer\"\n        />\n        <span className=\"w-14 shrink-0 text-right tabular-nums\">{width}px</span>\n      </label>\n\n      <div\n        className=\"relative h-[540px] overflow-hidden rounded-lg border border-kumo-line bg-kumo-base\"\n        style={{ width }}\n      >\n        <Sidebar.Provider contained mobileBreakpoint={9999} className=\"h-full\">\n          <Sidebar fullScreenOnMobile>\n            {/* Single row: avatar, then the trail takes the rest of the width.\n                Mirrors the product header — account mark, then breadcrumbs. */}\n            <Sidebar.Header className=\"gap-2 px-3.5\">\n              <CompactAccountSwitcher />\n              <div className=\"min-w-0 flex-1\">\n                <Breadcrumbs size=\"sm\">\n                  {trail.map((label) => (\n                    <Fragment key={label}>\n                      <Breadcrumbs.Link href=\"#\">{label}</Breadcrumbs.Link>\n                      <Breadcrumbs.Separator />\n                    </Fragment>\n                  ))}\n                  <Breadcrumbs.Current>{current}</Breadcrumbs.Current>\n                </Breadcrumbs>\n              </div>\n              <Sidebar.Close />\n            </Sidebar.Header>\n            <Sidebar.Content>\n              <div className=\"pt-1 pb-2\">\n                <QuickSearch />\n              </div>\n              <NavTree selected={selected} onSelect={setSelected} />\n            </Sidebar.Content>\n          </Sidebar>\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-kumo-line px-3\">\n              <Sidebar.Trigger />\n              <div className=\"min-w-0 flex-1\">\n                <Breadcrumbs size=\"sm\">\n                  {trail.map((label) => (\n                    <Fragment key={label}>\n                      <Breadcrumbs.Link href=\"#\">{label}</Breadcrumbs.Link>\n                      <Breadcrumbs.Separator />\n                    </Fragment>\n                  ))}\n                  <Breadcrumbs.Current>{current}</Breadcrumbs.Current>\n                </Breadcrumbs>\n              </div>\n            </header>\n            <DemoMain>\n              <p className=\"text-kumo-default\">{current}</p>\n              <p className=\"text-sm text-kumo-subtle\">\n                Drill into the nav — the trail is derived from the tree, so it\n                always matches where you are.\n              </p>\n            </DemoMain>\n          </div>\n        </Sidebar.Provider>\n      </div>\n    </div>"],"colors":["bg-kumo-brand","bg-kumo-hairline","bg-kumo-line","bg-kumo-recessed","border-kumo-line","ring-kumo-brand","text-kumo-default","text-kumo-strong","text-kumo-subtle"],"subComponents":{"Provider":{"name":"Provider","description":"Provider sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state when uncontrolled."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"variant":{"type":"SidebarVariant","optional":true,"description":"Sidebar layout variant."},"side":{"type":"SidebarSide","optional":true,"description":"Which side the sidebar is on."},"collapsible":{"type":"\"icon\" | \"offcanvas\" | \"none\"","optional":true},"resizable":{"type":"boolean","optional":true,"description":"Enable drag-to-resize on the sidebar edge."},"defaultWidth":{"type":"number","optional":true,"description":"Initial width in pixels when resizable."},"minWidth":{"type":"number","optional":true,"description":"Minimum width in pixels when resizing."},"maxWidth":{"type":"number","optional":true,"description":"Maximum width in pixels when resizing."},"contained":{"type":"boolean","optional":true,"description":"When true, the collapsed sidebar uses absolute positioning instead of fixed, keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars."},"peekable":{"type":"boolean","optional":true,"description":"When true, hovering or focusing the collapsed sidebar temporarily expands it. The `state` will be `\"peeking\"` during the peek. Moving away collapses it back."},"animationDuration":{"type":"number","optional":true,"description":"Duration of sidebar expand/collapse animation in milliseconds."},"mobileBreakpoint":{"type":"number","optional":true,"description":"Viewport width (in px) below which the sidebar renders as a mobile dialog sheet instead of the desktop aside rail."},"children":{"type":"ReactNode","required":true,"description":"Content — typically `<Sidebar>` + main content."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the wrapper div."}}},"Header":{"name":"Header","description":"Header sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Content":{"name":"Content","description":"Content sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Footer":{"name":"Footer","description":"Footer sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Loading":{"name":"Loading","description":"Loading sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Group":{"name":"Group","description":"Group sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"GroupLabel":{"name":"GroupLabel","description":"GroupLabel sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"Menu":{"name":"Menu","description":"Menu sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"MenuItem":{"name":"MenuItem","description":"MenuItem sub-component","props":{"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."}}},"MenuButton":{"name":"MenuButton","description":"MenuButton sub-component","props":{"icon":{"type":"React.ComponentType<{ className?: string }> | React.ReactNode","optional":true},"active":{"type":"boolean","optional":true},"size":{"type":"SidebarMenuButtonSize","optional":true,"description":"Button size. - `\"base\"` — Standard nav item - `\"sm\"` — Compact nav item"},"href":{"type":"string","optional":true},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."},"tooltip":{"type":"string","optional":true},"itemId":{"type":"string","optional":true,"description":"Anchor id for `useSidebar().scrollToItem(id)`."},"className":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}}},"MenuBadge":{"name":"MenuBadge","description":"MenuBadge sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSub":{"name":"MenuSub","description":"MenuSub sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSubItem":{"name":"MenuSubItem","description":"MenuSubItem sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"MenuSubButton":{"name":"MenuSubButton","description":"MenuSubButton sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Marks this sub-item as currently active/selected."},"href":{"type":"string","optional":true,"description":"Navigation URL. When set, renders as a link via LinkProvider."},"target":{"type":"React.HTMLAttributeAnchorTarget","optional":true,"description":"Link target — only meaningful when `href` is provided."}}},"Separator":{"name":"Separator","description":"Separator sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Trigger":{"name":"Trigger","description":"Trigger sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Close":{"name":"Close","description":"Close sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"Rail":{"name":"Rail","description":"Rail sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"ResizeHandle":{"name":"ResizeHandle","description":"ResizeHandle sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"MenuChevron":{"name":"MenuChevron","description":"MenuChevron sub-component","props":{"className":{"type":"string","optional":true}}},"Collapsible":{"name":"Collapsible","description":"Collapsible sub-component","props":{"defaultOpen":{"type":"boolean","optional":true,"description":"Initial open state (uncontrolled)."},"open":{"type":"boolean","optional":true,"description":"Controlled open state."},"autoScrollOnOpen":{"type":"boolean","optional":true,"description":"Scroll the expanded content into view after opening."}}},"CollapsibleTrigger":{"name":"CollapsibleTrigger","description":"CollapsibleTrigger sub-component","props":{"render":{"type":"React.ReactElement","required":true,"description":"Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged."}}},"CollapsibleContent":{"name":"CollapsibleContent","description":"CollapsibleContent sub-component","props":{"activeKey":{"type":"string","required":true,"description":"Key of the currently active view. Must match a child `SlidingView` value."},"direction":{"type":"\"left\" | \"right\"","optional":true,"description":"Slide direction for the transition. - `\"left\"`: new view slides in from the right - `\"right\"`: new view slides in from the left"}}},"SlidingViews":{"name":"SlidingViews","description":"SlidingViews sub-component","props":{"activeKey":{"type":"string","required":true,"description":"Key of the currently active view. Must match a child `SlidingView` value."},"direction":{"type":"\"left\" | \"right\"","optional":true,"description":"Slide direction for the transition. - `\"left\"`: new view slides in from the right - `\"right\"`: new view slides in from the left"}}},"SlidingView":{"name":"SlidingView","description":"SlidingView sub-component","props":{"value":{"type":"string","required":true,"description":"Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`."}}}},"styling":{"width":{"expanded":"16.25rem","icon":"57px"},"mobile":{"breakpoint":768}}},"Surface":{"name":"Surface","type":"component","description":"Surface component","importPath":"@cloudflare/kumo","category":"Layout","props":{"as":{"type":"React.ElementType","optional":true},"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."},"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}},"examples":[],"colors":[]},"Switch":{"name":"Switch","type":"component","description":"Switch component","importPath":"@cloudflare/kumo","category":"Input","props":{"variant":{"type":"enum","optional":true,"description":"Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome)","values":["default","neutral"],"descriptions":{"default":"Default switch with squircle shape and brand blue color","neutral":"Monochrome switch with squircle shape for subtle toggles"},"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes."},"labelTooltip":{"type":"ReactNode","optional":true,"description":"Tooltip content to display next to the label via an info icon"},"required":{"type":"boolean","optional":true,"description":"Whether the switch is required. When explicitly false, shows \"(optional)\" text after the label."},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), switch appears before label. When false, label appears before switch."},"size":{"type":"enum","optional":true,"values":["sm","base","lg"],"descriptions":{"sm":"Small switch for compact UIs","base":"Default switch size","lg":"Large switch for prominent toggles"},"classes":{"sm":"h-5.5 w-8.5","base":"h-6.5 w-10.5","lg":"h-7.5 w-12.5"},"default":"base"},"checked":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"transitioning":{"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},"className":{"type":"string","optional":true},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"onClick":{"type":"(event: React.MouseEvent) => void","required":true,"description":"Callback when switch is clicked"}},"examples":["<Switch label=\"Switch\" checked={checked} onCheckedChange={setChecked} />","<Switch label=\"Switch\" checked={false} onCheckedChange={() => {}} />","<Switch label=\"Switch\" checked={true} onCheckedChange={() => {}} />","<Switch label=\"Disabled\" checked={false} disabled />","<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>","<div className=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch label=\"Default off\" checked={false} onCheckedChange={() => {}} />\n      <Switch label=\"Default on\" checked={true} onCheckedChange={() => {}} />\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>","<Switch\n      id=\"my-custom-switch\"\n      label=\"Custom ID\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />","<Switch.Group legend=\"Notification settings\">\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>","<Switch.Group>\n      <Switch.Legend className=\"sr-only\">Notification settings</Switch.Legend>\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>","<Switch.Group>\n      <Switch.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification settings\n      </Switch.Legend>\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>","<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"],"colors":["bg-kumo-base","ring-kumo-brand","ring-kumo-focus","ring-kumo-hairline","text-kumo-danger","text-kumo-default","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,"description":"Legend text for the group. For more control over legend styling, omit this prop and use `<Switch.Legend>` as a child instead."},"children":{"type":"ReactNode","required":true,"description":"Child Switch.Item components (and optionally a Switch.Legend)"},"error":{"type":"string","optional":true,"description":"Error message for the group (only appears in groups, not single switches)"},"description":{"type":"ReactNode","optional":true,"description":"Helper text for the group"},"disabled":{"type":"boolean","optional":true,"description":"Whether all switches in the group are disabled"},"controlFirst":{"type":"boolean","optional":true,"description":"When true (default), switch appears before label. When false, label appears before switch."},"className":{"type":"string","optional":true,"description":"Additional CSS classes"}}},"Legend":{"name":"Legend","description":"Legend sub-component","props":{"children":{"type":"ReactNode","required":true,"description":"Legend content"},"className":{"type":"string","optional":true,"description":"Additional CSS classes (e.g. \"sr-only\" to visually hide the legend)"}}}}},"Table":{"name":"Table","type":"component","description":"Table — semantic HTML table with styled rows, cells, and selection support.","importPath":"@cloudflare/kumo","category":"Other","props":{"layout":{"type":"enum","values":["auto","fixed"],"default":"auto","descriptions":{"auto":"Auto table layout - columns resize based on content","fixed":"Fixed table layout - columns have equal width, controlled via colgroup"},"classes":{"fixed":"table-fixed"}},"variant":{"type":"enum","values":["default","selected"],"default":"default","descriptions":{"default":"Default row variant","selected":"Selected row variant"},"classes":{"default":"even:bg-kumo-elevated [--kumo-table-row-bg:var(--color-kumo-base)] even:[--kumo-table-row-bg:var(--color-kumo-elevated)]","selected":"bg-kumo-tint [--kumo-table-row-bg:var(--color-kumo-tint)]"}},"sticky":{"type":"enum","values":["left","right"],"descriptions":{"left":"Pin column to the left edge of the scroll container","right":"Pin column to the right edge of the scroll container"},"classes":{"left":"sticky left-0","right":"sticky right-0"}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"}},"examples":["<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />\n          <col className=\"w-[150px]\" />\n          <col className=\"w-[150px]\" />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head>Tags</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.from}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.date}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head>Tags</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.from}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">{row.date}</Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>","<LayerCard className=\"w-full overflow-x-auto p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />{\" \"}\n          {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n          <col />\n          <col style={{ width: \"150px\" }} />\n          <col style={{ width: \"120px\" }} />\n          <col style={{ width: \"50px\" }} />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === emailData.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < emailData.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head></Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>\n                <div className=\"flex items-center gap-2\">\n                  <EnvelopeSimple size={16} />\n                  <span className=\"truncate\">{row.subject}</span>\n                  {row.tags && (\n                    <div className=\"ml-2 inline-flex gap-1\">\n                      {row.tags.map((tag) => (\n                        <Badge key={tag}>{tag}</Badge>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.from}</span>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.date}</span>\n              </Table.Cell>\n              <Table.Cell className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>"],"colors":["bg-kumo-base","bg-kumo-elevated","bg-kumo-hairline","bg-kumo-tint","border-kumo-fill","ring-kumo-brand","text-kumo-default","text-kumo-strong"],"subComponents":{"Header":{"name":"Header","description":"Header sub-component","props":{}},"Head":{"name":"Head","description":"Head sub-component","props":{}},"Row":{"name":"Row","description":"Row sub-component","props":{}},"Body":{"name":"Body","description":"Body sub-component","props":{}},"Cell":{"name":"Cell","description":"Cell sub-component","props":{}},"CheckCell":{"name":"CheckCell","description":"CheckCell sub-component","props":{}},"CheckHead":{"name":"CheckHead","description":"CheckHead sub-component","props":{}},"Footer":{"name":"Footer","description":"Footer sub-component","props":{}},"ResizeHandle":{"name":"ResizeHandle","description":"ResizeHandle sub-component","props":{}}}},"TableOfContents":{"name":"TableOfContents","type":"component","description":"TableOfContents — presentational compound component for section navigation.","importPath":"@cloudflare/kumo","category":"Other","props":{"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}},"examples":["<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"Usage\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === active}\n              onClick={() => setActive(heading.text)}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item key={heading.text} className=\"cursor-pointer\">\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          <TableOfContents.Item active className=\"cursor-pointer\">\n            Overview\n          </TableOfContents.Item>\n          <TableOfContents.Group label=\"Examples\" href=\"#examples-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Basic example\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Advanced example\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"Getting Started\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Installation\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Configuration\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"API\" href=\"#api-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Props\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Events\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.List>\n          {headings.slice(0, 3).map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"Introduction\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>","<div className=\"flex w-full max-w-xl gap-6\">\n      <div className=\"min-w-40\">\n        <TableOfContents>\n          <TableOfContents.Title>On this page</TableOfContents.Title>\n          <TableOfContents.List>\n            {scrollspySections.map((section) => (\n              <TableOfContents.Item\n                key={section.id}\n                render={<button type=\"button\" />}\n                active={activeId === section.id}\n                onClick={() => {\n                  selectSection(section.id);\n                  root\n                    ?.querySelector(`#${section.id}`)\n                    ?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n                }}\n              >\n                {section.title}\n              </TableOfContents.Item>\n            ))}\n          </TableOfContents.List>\n        </TableOfContents>\n      </div>\n      <div\n        ref={setRoot}\n        className=\"h-64 flex-1 overflow-y-auto rounded-lg border border-kumo-hairline p-4\"\n      >\n        {scrollspySections.map((section) => (\n          <section key={section.id}>\n            <h4\n              id={section.id}\n              className=\"mb-2 scroll-mt-2 text-sm font-semibold\"\n            >\n              {section.title}\n            </h4>\n            <p className=\"mb-6 text-sm text-kumo-subtle\">\n              {Array.from(\n                { length: 6 },\n                () =>\n                  `Scrollable placeholder copy for the ${section.title} section. `,\n              ).join(\"\")}\n            </p>\n          </section>\n        ))}\n        <div className=\"h-40\" />\n      </div>\n    </div>","<DemoWrapper>\n      <div className=\"space-y-3\">\n        <TableOfContents>\n          <TableOfContents.List>\n            {[\"Introduction\", \"Installation\", \"Usage\"].map((text) => (\n              <TableOfContents.Item\n                key={text}\n                render={<button type=\"button\" />}\n                onClick={() => setClicked(text)}\n                active={text === \"Introduction\"}\n              >\n                {text}\n              </TableOfContents.Item>\n            ))}\n          </TableOfContents.List>\n        </TableOfContents>\n        {clicked && (\n          <p className=\"text-xs text-kumo-subtle\">Clicked: {clicked}</p>\n        )}\n      </div>\n    </DemoWrapper>"],"colors":["border-kumo-brand","border-kumo-hairline","border-kumo-line","text-kumo-default","text-kumo-subtle"],"subComponents":{"Title":{"name":"Title","description":"Title sub-component","props":{}},"List":{"name":"List","description":"List sub-component","props":{}},"Item":{"name":"Item","description":"Item sub-component","props":{"active":{"type":"boolean","optional":true,"description":"Whether this item represents the currently active section."},"render":{"type":"React.ReactElement","optional":true,"description":"Custom element to render as the link. Use this to integrate with framework routers (e.g., Next.js `<Link>`, React Router `<NavLink>`). The element receives all anchor props including `href`, `className`, and `children`."}}},"Group":{"name":"Group","description":"Group sub-component","props":{"label":{"type":"string","required":true,"description":"Label displayed above the group's items."},"href":{"type":"string","optional":true,"description":"URL the group label links to. When provided, the label renders as a clickable link with item styling."},"active":{"type":"boolean","optional":true,"description":"Whether this group's label represents the currently active section. Only applies when `href` is provided."}}}}},"Tabs":{"name":"Tabs","type":"component","description":"Tab navigation component with segmented or underline style. Built on Base UI Tabs with animated active indicator.","importPath":"@cloudflare/kumo","category":"Navigation","props":{"tabs":{"type":"TabsItem[]","optional":true,"description":"Array of tab items to render."},"value":{"type":"string","optional":true,"description":"Controlled value. When set, component becomes controlled."},"selectedValue":{"type":"string","optional":true,"description":"Default selected value for uncontrolled mode. Ignored when `value` is set."},"activateOnFocus":{"type":"boolean","optional":true,"description":"When `true`, tabs are activated immediately upon receiving focus via arrow keys. When `false` (default), tabs receive focus but require Enter/Space to activate."},"className":{"type":"string","optional":true,"description":"Additional CSS classes for the root element."},"listClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the tab list element."},"indicatorClassName":{"type":"string","optional":true,"description":"Additional CSS classes for the indicator element."},"labels":{"type":"TabsLabels","optional":true,"description":"Labels for internationalization of aria-labels. All labels have English defaults."},"variant":{"type":"enum","optional":true,"description":"Tab style.\n- `\"segmented\"` — Pill-shaped indicator on a filled track\n- `\"underline\"` — Underline indicator below tab text","values":["segmented","underline"],"default":"segmented"},"size":{"type":"enum","optional":true,"description":"Tab size.\n- `\"base\"` — Default size (h-9, text-base)\n- `\"sm\"` — Compact size (h-6.5, text-xs) — matches Input size=\"sm\"","values":["base","sm"],"default":"base"},"onValueChange":{"type":"(value: string) => void","description":"Callback when active tab changes"}},"examples":["<div className=\"flex flex-col gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Segmented (default)</p>\n        <Tabs\n          variant=\"segmented\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Underline</p>\n        <Tabs\n          variant=\"underline\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>","<Tabs\n      variant=\"segmented\"\n      tabs={[\n        { value: \"tab1\", label: \"Tab 1\" },\n        { value: \"tab2\", label: \"Tab 2\" },\n        { value: \"tab3\", label: \"Tab 3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />","<Tabs\n      variant=\"underline\"\n      tabs={[\n        { value: \"tab1\", label: \"Tab 1\" },\n        { value: \"tab2\", label: \"Tab 2\" },\n        { value: \"tab3\", label: \"Tab 3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />","<div className=\"space-y-4\">\n      <Tabs\n        tabs={[\n          { value: \"tab1\", label: \"Tab 1\" },\n          { value: \"tab2\", label: \"Tab 2\" },\n          { value: \"tab3\", label: \"Tab 3\" },\n        ]}\n        value={activeTab}\n        onValueChange={setActiveTab}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Active tab: <code className=\"text-sm\">{activeTab}</code>\n      </p>\n    </div>","<div className=\"w-full max-w-md\">\n      <Tabs\n        tabs={[\n          { value: \"overview\", label: \"Overview\" },\n          { value: \"analytics\", label: \"Analytics\" },\n          { value: \"reports\", label: \"Reports\" },\n          { value: \"notifications\", label: \"Notifications\" },\n          { value: \"settings\", label: \"Settings\" },\n          { value: \"billing\", label: \"Billing\" },\n          { value: \"security\", label: \"Security\" },\n          { value: \"integrations\", label: \"Integrations\" },\n        ]}\n        selectedValue=\"overview\"\n      />\n    </div>","<div className=\"w-full max-w-xs\">\n      <Tabs\n        tabs={[\n          { value: \"overview\", label: \"Overview\" },\n          { value: \"analytics\", label: \"Analytics\" },\n          { value: \"reports\", label: \"Reports\" },\n          { value: \"notifications\", label: \"Notifications\" },\n          { value: \"settings\", label: \"Settings\" },\n          { value: \"billing\", label: \"Billing\" },\n          { value: \"security\", label: \"Security\" },\n          { value: \"integrations\", label: \"Integrations\" },\n        ]}\n        selectedValue=\"overview\"\n      />\n    </div>","<div className=\"space-y-3\">\n      <div className=\"w-full max-w-[588px]\">\n        <Tabs tabs={tabs} selectedValue=\"settings\" />\n      </div>\n      <div className=\"flex items-center gap-3 text-sm text-kumo-subtle\">\n        <button\n          type=\"button\"\n          className=\"rounded-md border border-kumo-line bg-kumo-base px-2.5 py-1 text-kumo-default hover:bg-kumo-tint focus:ring-2 focus:ring-kumo-brand focus:outline-none\"\n          onClick={() => setShowExtraTabs((current) => !current)}\n        >\n          Toggle extra tabs\n        </button>\n        <span>{showExtraTabs ? \"10 tabs\" : \"7 tabs\"}</span>\n      </div>\n    </div>","<div className=\"flex flex-col gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Segmented sm</p>\n        <Tabs\n          variant=\"segmented\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-kumo-subtle\">Underline sm</p>\n        <Tabs\n          variant=\"underline\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>","<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          nativeButton: false,\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Cloudflare\",\n          nativeButton: false,\n          render: (props) => (\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"],"colors":["bg-kumo-base","bg-kumo-brand","bg-kumo-recessed","bg-kumo-tint","border-kumo-hairline","ring-kumo-brand","ring-kumo-focus","ring-kumo-hairline","ring-kumo-line","text-kumo-default","text-kumo-subtle"],"styling":{"container":{"height":34,"borderRadius":8,"background":"color-accent","padding":1},"tab":{"paddingX":10,"verticalMargin":1,"fontSize":16,"fontWeight":500,"borderRadius":8,"activeColor":"text-color-surface","inactiveColor":"text-color-label"},"indicator":{"background":"color-surface-secondary","ring":"color-color-2","borderRadius":6,"shadow":"shadow-sm"}}},"Text":{"name":"Text","type":"component","description":"Text component","importPath":"@cloudflare/kumo","category":"Display","props":{"variant":{"type":"enum","optional":true,"description":"Text style variant. Determines color, font, and weight.\n- `\"heading\"` — Heading text (16px by default, 20px with `size=\"lg\"`; semibold)\n- `\"heading1\"` — Deprecated; use `\"heading\"` (30px, semibold)\n- `\"heading2\"` — Deprecated; use `\"heading\"` (24px, semibold)\n- `\"heading3\"` — Deprecated; use `\"heading\"` (16px, semibold)\n- `\"body\"` — Default body text\n- `\"secondary\"` — Muted text for secondary information\n- `\"success\"` — Success state text\n- `\"error\"` — Error state text\n- `\"mono\"` — Monospace text for code\n- `\"mono-secondary\"` — Muted monospace text","values":["heading","heading1","heading2","heading3","body","secondary","success","error","mono","mono-secondary"],"descriptions":{"heading":"Heading text (16px by default, 20px at large size)","heading1":"Deprecated large heading for page titles; use heading instead","heading2":"Deprecated medium heading for section titles; use heading instead","heading3":"Deprecated small heading for subsections; use heading instead","body":"Default body text","secondary":"Muted text for secondary information","success":"Success state text","error":"Error state text","mono":"Monospace text for code","mono-secondary":"Muted monospace text"},"classes":{"heading":"text-lg font-semibold","heading1":"text-3xl font-semibold","heading2":"text-2xl font-semibold","heading3":"text-lg font-semibold","body":"text-kumo-default","secondary":"text-kumo-subtle","success":"text-kumo-link","error":"text-kumo-danger","mono":"font-mono","mono-secondary":"font-mono text-kumo-subtle"},"default":"body"},"size":{"type":"enum","optional":true,"description":"Text size. Supported values depend on the variant:\n- `\"heading\"` — 16px when omitted, or 20px with `\"lg\"`\n- Body variants — `\"xs\"` (12px), `\"sm\"` (13px), `\"base\"` (14px),   or `\"lg\"` (16px)\n- Monospace variants — 13px when omitted, or 14px with `\"lg\"`","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small text","sm":"Small text","base":"Default text size","lg":"Large text"},"classes":{"xs":"text-xs/[inherit]","sm":"text-sm/[inherit]","base":"text-base/[inherit]","lg":"text-lg/[inherit]"},"default":"base"},"bold":{"type":"boolean","optional":true,"description":"Whether to use bold font weight (only applies to body variants)."},"truncate":{"type":"boolean","optional":true,"description":"Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes."},"as":{"type":"enum","optional":true,"description":"The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`, `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`), list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n\n- **Optional** for `\"heading\"` (defaults to `\"span\"`). Pass the heading   element that reflects this text's place in the document outline.\n- **Required** for deprecated heading variants (`\"heading1\"`,   `\"heading2\"`, `\"heading3\"`).\n- **Optional** for body variants (defaults to `\"p\"`) and monospace   variants (defaults to `\"span\"`).","values":["h1","h2","h3","h4","h5","h6","p","span","label","dt","dd","li","figcaption","legend","pre","code","em","strong","small","abbr","time"]},"children":{"type":"ReactNode","optional":true,"description":"Text content."}},"examples":["<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading\">Heading</Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading\" size=\"lg\" as=\"h2\">\n          Heading large\n        </Text>\n        <Text variant=\"mono-secondary\">text-xl (20px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text>Body</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text bold>Body bold</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"lg\">Body lg</Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"sm\">Body sm</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"xs\">Body xs</Text>\n        <Text variant=\"mono-secondary\">text-xs (12px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"secondary\">Body secondary</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono\">Monospace</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          Monospace lg\n        </Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono-secondary\">Monospace secondary</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"success\">Success</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"error\">Error</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n    </div>","<div className=\"w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n      <Text truncate>\n        This is a long piece of text that will be truncated with an ellipsis\n        when it overflows its container.\n      </Text>\n    </div>"],"colors":["text-kumo-danger","text-kumo-default","text-kumo-link","text-kumo-subtle"],"styling":{"fontSizes":{"xs":12,"sm":14,"base":16,"lg":18,"xl":20,"2xl":24,"3xl":30},"fontWeights":{"normal":400,"medium":500,"semibold":600},"baseColor":"text-kumo-default","variantColors":{"body":"text-kumo-default","secondary":"text-kumo-subtle","success":"text-kumo-link","error":"text-kumo-danger","mono":"text-kumo-default","mono-secondary":"text-kumo-subtle"},"fontFamilies":{"default":"sans-serif","mono":"monospace"}}},"TimeseriesChart":{"name":"TimeseriesChart","type":"component","description":"TimeseriesChart — a time-series line or bar chart.","importPath":"@cloudflare/kumo","category":"Data Visualization","props":{"echarts":{"type":"typeof echarts","required":true,"description":"The ECharts core instance imported by the consumer. Passed in rather than imported directly so the consumer controls which ECharts modules are bundled (tree-shaking)."},"type":{"type":"\"line\" | \"bar\"","optional":true,"description":"Visual style of each series. Defaults to `\"line\"`."},"data":{"type":"TimeseriesData[]","required":true,"description":"Array of time series data to display on the chart"},"markers":{"type":"TimeseriesMarker[]","optional":true,"description":"Vertical reference markers rendered on the time axis."},"thresholds":{"type":"TimeseriesThreshold[]","optional":true,"description":"Horizontal threshold lines rendered on the value axis."},"xAxisName":{"type":"string","optional":true,"description":"Label for the x-axis (time axis)"},"xAxisTickCount":{"type":"number","optional":true,"description":"Number of ticks to display on the x-axis"},"xAxisTickFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for x-axis tick labels. Receives the raw timestamp in milliseconds and returns a display string, overriding ECharts' built-in time formatting."},"yAxisTickFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for y-axis tick labels. Receives the raw value and returns a display string. When omitted, ECharts' built-in formatter is used."},"yAxisTickLabelFormat":{"type":"(value: number) => string","optional":true},"yAxisName":{"type":"string","optional":true,"description":"Label for the y-axis (value axis)"},"yAxisTickCount":{"type":"number","optional":true,"description":"Number of ticks to display on the y-axis"},"tooltipValueFormat":{"type":"(value: number) => string","optional":true,"description":"Custom formatter for tooltip values. Receives the raw y-value and returns a display string. When omitted, the raw value is shown. Takes precedence over the deprecated `yAxisTickLabelFormat` prop."},"tooltipMode":{"type":"\"all\" | \"single\"","optional":true,"description":"Controls which series are shown in the tooltip. - `\"all\"` — show all series at the hovered timestamp (default) - `\"single\"` — show only the series whose value is closest to the cursor"},"tooltipMaxItems":{"type":"number","optional":true,"description":"Maximum number of series rows shown in the tooltip when `tooltipMode` is `\"all\"`. Additional series are hidden with a `+N more` footer. Defaults to `10`."},"tooltipBoundary":{"type":"\"clipping-ancestors\" | Element | Element[]","optional":true,"description":"Constrains the tooltip to stay within a specific element or region. By default the tooltip avoids overflowing any clipping ancestor (scroll containers, viewports, etc.). Pass an `Element` or array of elements to restrict the tooltip to a specific container."},"tooltipFollowCursor":{"type":"\"both\" | \"x\"","optional":true,"description":"Which axis the tooltip follows the cursor on. - `\"both\"` — tooltip tracks the cursor on both axes, staying near the pointer at all times. This is the default and matches the behaviour of ECharts' built-in tooltip. - `\"x\"` — tooltip follows the cursor horizontally but is locked to a fixed vertical position relative to the chart. This keeps the tooltip out of the way of the data and avoids vertical jitter as series values change — the same approach used by Recharts and many dashboard UIs. Only these two modes are offered because the x-axis is always time in a `TimeseriesChart`: y-only tracking and fully-fixed positioning don't produce useful tooltip behaviour for time-series data. Powered by Base UI Tooltip's `trackCursorAxis` under the hood."},"incomplete":{"type":"{ before?: number; after?: number }","optional":true,"description":"Indicates incomplete data periods with optional before/after timestamps in ms"},"enableLegendSelection":{"type":"boolean","optional":true,"description":"When `true`, adds a hidden ECharts legend so consumers can drive series visibility imperatively via the `legendSelect` / `legendUnSelect` / `legendToggleSelect` actions (e.g. to build a custom interactive legend). Toggled-off series are also excluded from the tooltip. Requires the consumer to register ECharts' `LegendComponent` (`echarts.use([LegendComponent])`); otherwise the legend actions no-op and, in development, ECharts logs a \"component legend is used but not imported\" warning."},"height":{"type":"number","optional":true,"description":"Height of the chart in pixels. Defaults to `350`."},"isDarkMode":{"type":"boolean","optional":true,"description":"When `true`, switches the chart to ECharts' built-in dark theme"},"gradient":{"type":"boolean","optional":true,"description":"When `true`, renders a vertical gradient fill beneath each line series. The gradient fades from the series' color at the top to transparent at the bottom. Has no effect when `type` is `\"bar\"`."},"loading":{"type":"boolean","optional":true,"description":"When `true`, hides the chart and displays a skeleton matching the chart type with a subtle shimmer."},"ariaDescription":{"type":"string","optional":true,"description":"Accessible description for screen readers. When provided, it is passed to ECharts' `aria.label.description` and announced when the chart receives focus. Consumers are responsible for writing a meaningful description — see the W3C guidance on complex images for recommendations."},"optionUpdateBehavior":{"type":"SetOptionOpts","optional":true,"description":"Additional options passed as the second argument to `chart.setOption()`. Defaults to `{ notMerge: false, lazyUpdate: true }`."}},"examples":["<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      markers={markers}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      thresholds={[\n        {\n          value: 55,\n          label: \"Memory limit\",\n          color: ChartPalette.semantic(\"Attention\", isDarkMode),\n        },\n      ]}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Memory (MB)\"\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Requests\"\n      xAxisTickFormat={(ts) => {\n        const d = new Date(ts);\n        return `${d.getHours().toString().padStart(2, \"0\")}:${d.getMinutes().toString().padStart(2, \"0\")}`;\n      }}\n      yAxisTickFormat={(value) => {\n        if (value >= 1000) return `${value / 1000}k`;\n        return value.toString();\n      }}\n      tooltipValueFormat={(value) => `${(value / 1000).toFixed(1)}k requests`}\n    />","<TimeseriesChart\n      yAxisTickCount={2}\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      height={160}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n      gradient\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Mbps\"\n      incomplete={{ after: incompleteTimestamp }}\n    />","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"%\"\n      onTimeRangeChange={(from, to) => {\n        alert(\n          `Selected range:\\nFrom: ${new Date(from).toLocaleString()}\\nTo: ${new Date(to).toLocaleString()}`,\n        );\n      }}\n    />","<Chart\n      echarts={echarts}\n      options={options}\n      height={160}\n      isDarkMode={isDarkMode}\n    />","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">Active State</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n        />\n        <ChartLegend.LargeItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.LargeItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Inactive State</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.LargeItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Loading state</h3>\n\n      <div className=\"flex flex-wrap gap-4 divide-x divide-kumo-hairline\">\n        <ChartLegend.LargeItem loading />\n      </div>\n    </div>","<div className=\"space-y-4\">\n      <h3 className=\"text-sm font-medium\">Active State</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n        />\n        <ChartLegend.SmallItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n        />\n        <ChartLegend.SmallItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Inactive State</h3>\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem\n          name=\"Requests\"\n          color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n          value=\"1,234\"\n          unit=\"req/s\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"Storage\"\n          color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n          value=\"56\"\n          unit=\"GB\"\n          inactive\n        />\n        <ChartLegend.SmallItem\n          name=\"Warnings\"\n          color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n          value=\"128\"\n          inactive\n        />\n      </div>\n\n      <h3 className=\"mt-12 text-sm font-medium\">Loading state</h3>\n\n      <div className=\"flex flex-wrap gap-4\">\n        <ChartLegend.SmallItem loading />\n      </div>\n    </div>","<TimeseriesChart\n      echarts={echarts}\n      isDarkMode={isDarkMode}\n      type=\"bar\"\n      data={data}\n      xAxisName=\"Time (UTC)\"\n      yAxisName=\"Count\"\n      tooltipValueFormat={(r) => r.toFixed(2)}\n    />","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col\">\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        type=\"bar\"\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={[]}\n        loading\n      />\n    </div>","<div className=\"flex w-full flex-1 flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex flex-wrap gap-4\">\n          {data.map((series) => (\n            <ChartLegend.SmallItem\n              loading={loading}\n              key={series.name}\n              name={series.name}\n              color={series.color}\n              value={Math.round(series.data.at(-1)?.[1] ?? 0).toLocaleString()}\n            />\n          ))}\n        </div>\n        <Switch\n          label=\"Loading\"\n          checked={loading}\n          onCheckedChange={setLoading}\n        />\n      </div>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        data={loading ? [] : data}\n        loading={loading}\n      />\n    </div>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex gap-4 divide-x divide-kumo-hairline px-2\">\n          <ChartLegend.LargeItem\n            name=\"P99\"\n            color={ChartPalette.semantic(\"Attention\", isDarkMode)}\n            value=\"124\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P95\"\n            color={ChartPalette.semantic(\"Warning\", isDarkMode)}\n            value=\"76\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P75\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"32\"\n            unit=\"ms\"\n          />\n          <ChartLegend.LargeItem\n            name=\"P50\"\n            color={ChartPalette.semantic(\"Neutral\", isDarkMode)}\n            value=\"10\"\n            unit=\"ms\"\n          />\n        </div>\n        <TimeseriesChart\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-kumo-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hoveredSeries !== null && hoveredSeries !== s.name}\n              onPointerEnter={() => {\n                setHoveredSeries(s.name);\n                chartRef.current?.dispatchAction({\n                  type: \"highlight\",\n                  seriesName: s.name,\n                });\n              }}\n              onPointerLeave={() => {\n                setHoveredSeries(null);\n                chartRef.current?.dispatchAction({\n                  type: \"downplay\",\n                  seriesName: s.name,\n                });\n              }}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<LayerCard>\n      <LayerCard.Secondary>Read latency</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <div className=\"mb-2 flex divide-x divide-kumo-line px-2\">\n          {series.map((s) => (\n            <ChartLegend.LargeItem\n              key={s.name}\n              name={s.name}\n              color={s.color}\n              value={s.value}\n              unit={s.unit}\n              inactive={hiddenSeries[s.name] ?? false}\n              onClick={() => handleClick(s.name)}\n              className=\"not-first:pl-4\"\n            />\n          ))}\n        </div>\n        <TimeseriesChart\n          ref={chartRef}\n          xAxisName=\"Time (UTC)\"\n          echarts={echarts}\n          isDarkMode={isDarkMode}\n          data={data}\n          height={300}\n          enableLegendSelection\n        />\n      </LayerCard.Primary>\n    </LayerCard>","<Chart\n      echarts={echarts}\n      options={options}\n      height={400}\n      isDarkMode={isDarkMode}\n    />","<div className=\"flex w-full flex-col gap-4\">\n      <Select\n        label=\"Tooltip follow cursor\"\n        value={selected}\n        onValueChange={(v) => {\n          if (v) setSelected(v);\n        }}\n        renderValue={(v) => v.label}\n      >\n        {FOLLOW_CURSOR_OPTIONS.map((opt) => (\n          <Select.Option key={opt.value} value={opt}>\n            {opt.label}\n          </Select.Option>\n        ))}\n      </Select>\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Latency (ms)\"\n        tooltipFollowCursor={selected.value}\n      />\n    </div>","<div\n      ref={boundaryRef}\n      className=\"w-full overflow-auto rounded-lg border border-kumo-line\"\n      style={{ height: 300 }}\n    >\n      <TimeseriesChart\n        echarts={echarts}\n        isDarkMode={isDarkMode}\n        data={data}\n        xAxisName=\"Time (UTC)\"\n        yAxisName=\"Count\"\n        height={280}\n        tooltipBoundary={boundary ?? undefined}\n      />\n    </div>"],"colors":["bg-kumo-base","outline-kumo-line"]},"Toasty":{"name":"Toasty","type":"component","description":"Toasty — toast notification provider and viewport.","importPath":"@cloudflare/kumo","category":"Feedback","props":{"variant":{"type":"enum","values":["default","success","error","warning","info"],"default":"default","descriptions":{"default":"Default toast style","success":"Success toast for confirmations and positive outcomes","error":"Error toast for critical issues","warning":"Warning toast for cautionary messages","info":"Info toast for neutral informational messages"},"classes":{"default":"border-kumo-fill bg-kumo-base","success":"ring-[0.3px] ring-kumo-success bg-kumo-base [&_[data-toast-icon]]:text-kumo-success [&_[data-toast-title]]:text-kumo-success","error":"ring-[0.3px] ring-kumo-danger bg-kumo-base [&_[data-toast-icon]]:text-kumo-danger [&_[data-toast-title]]:text-kumo-danger","warning":"ring-[0.3px] ring-kumo-warning bg-kumo-base [&_[data-toast-icon]]:text-kumo-warning [&_[data-toast-title]]:text-kumo-warning","info":"ring-[0.3px] ring-kumo-info bg-kumo-control [&_[data-toast-icon]]:text-kumo-info [&_[data-toast-title]]:text-kumo-info"}},"children":{"type":"React.ReactNode","required":true,"description":"Application content. Toasts render via a portal above this."},"container":{"type":"PortalContainer","optional":true,"description":"Container element for the portal. Use this to render toasts inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context."},"toastManager":{"type":"ReturnType<typeof createKumoToastManager>","optional":true,"description":"Optional toast manager created by `createKumoToastManager()`. When provided, allows code outside the React tree (timers, module-load callbacks, query-cache listeners) to dispatch toasts via the same dedupe-aware manager that `useKumoToastManager()` returns inside the tree. Forwarded to the underlying `@base-ui/react/toast` `Toast.Provider` `toastManager` prop — see https://base-ui.com/react/components/toast for the upstream primitive."}},"examples":["<Toasty>\n      <ToastTriggerButton />\n    </Toasty>","<Toasty>\n      <ToastTitleOnlyButton />\n    </Toasty>","<Toasty>\n      <ToastDescriptionOnlyButton />\n    </Toasty>","<Toasty>\n      <ToastSuccessButton />\n    </Toasty>","<Toasty>\n      <ToastMultipleButton />\n    </Toasty>","<Toasty>\n      <ToastErrorButton />\n    </Toasty>","<Toasty>\n      <ToastWarningButton />\n    </Toasty>","<Toasty>\n      <ToastInfoButton />\n    </Toasty>","<Toasty>\n      <ToastCustomContentButton />\n    </Toasty>","<Toasty>\n      <ToastActionsButton />\n    </Toasty>","<Toasty>\n      <ToastPromiseButton />\n    </Toasty>"],"colors":["bg-kumo-base","bg-kumo-control","bg-kumo-danger-tint","bg-kumo-info-tint","bg-kumo-success-tint","bg-kumo-warning-tint","border-kumo-fill","ring-kumo-danger","ring-kumo-hairline","ring-kumo-info","ring-kumo-line","ring-kumo-success","ring-kumo-warning","text-kumo-danger","text-kumo-default","text-kumo-info","text-kumo-subtle","text-kumo-success","text-kumo-warning"],"styling":{"container":{"width":300,"padding":16,"borderRadius":8,"background":"bg-kumo-base","border":"ring-[0.3px] ring-kumo-hairline","shadow":"shadow-lg","gap":4},"title":{"fontSize":16,"fontWeight":500,"color":"text-color-surface"},"description":{"fontSize":15,"fontWeight":400,"color":"text-color-muted"},"closeButton":{"size":20,"iconSize":16,"iconName":"ph-x","iconColor":"text-color-muted","hoverBackground":"color-color-2","hoverColor":"text-color-label","borderRadius":4}}},"Toolbar":{"name":"Toolbar","type":"component","description":"Toolbar component","importPath":"@cloudflare/kumo","category":"Other","props":{"disabled":{"type":"boolean","optional":true},"orientation":{"type":"ToolbarRoot.Orientation","optional":true,"description":"The orientation of the toolbar."},"loopFocus":{"type":"boolean","optional":true,"description":"If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached."},"id":{"type":"string","optional":true},"lang":{"type":"string","optional":true},"title":{"type":"string","optional":true},"className":{"type":"string | object","optional":true,"description":"CSS class applied to the element, or a function that returns a class based on the component's state."},"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."},"children":{"type":"ReactNode","optional":true,"description":"Toolbar controls rendered as one grouped card."},"size":{"type":"enum","optional":true,"description":"Locks every toolbar item to this size.","values":["xs","sm","base","lg"],"descriptions":{"xs":"Extra small toolbar for compact UIs","sm":"Small toolbar for secondary controls","base":"Default toolbar size","lg":"Large toolbar for prominent controls"},"classes":{"xs":"text-xs","sm":"text-xs","base":"text-base","lg":"text-base"},"default":"base"}},"examples":["<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.InputGroup aria-label=\"Search DNS records\" className=\"flex-1\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search DNS records\" />\n      </Toolbar.InputGroup>\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"Filter\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"Settings\" />\n    </Toolbar>","<div className=\"grid gap-3\">\n      {([\"xs\", \"sm\", \"base\", \"lg\"] as const).map((size) => (\n        <div key={size} className=\"flex items-center gap-3\">\n          <span className=\"w-10 text-sm text-kumo-subtle\">{size}</span>\n          <Toolbar size={size} className=\"w-fit\">\n            <Toolbar.Input\n              aria-label={`${size} search`}\n              placeholder=\"Search...\"\n            />\n            <Toolbar.Button>Apply</Toolbar.Button>\n          </Toolbar>\n        </div>\n      ))}\n    </div>","<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.Input\n        aria-label=\"Search DNS records\"\n        placeholder=\"Search DNS records\"\n        className=\"flex-1\"\n      />\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"Filter\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"Settings\" />\n    </Toolbar>","<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.InputGroup aria-label=\"Worker subdomain\" className=\"flex-1\">\n        <InputGroup.Input placeholder=\"my-worker\" />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n      </Toolbar.InputGroup>\n      <Toolbar.Button>Visit</Toolbar.Button>\n    </Toolbar>","<Toolbar>\n      <Toolbar.Button icon={UploadSimpleIcon}>Upload</Toolbar.Button>\n      <Toolbar.Button icon={DownloadSimpleIcon}>Download</Toolbar.Button>\n    </Toolbar>","<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.Input\n        aria-label=\"Search records\"\n        className=\"flex-1\"\n        placeholder=\"Search\"\n      />\n      <Toolbar.Button icon={MagnifyingGlassIcon} aria-label=\"Search\" />\n    </Toolbar>","<Toolbar>\n      <Toolbar.Button icon={FunnelSimpleIcon}>Filter</Toolbar.Button>\n      <Select\n        aria-label=\"Sort records\"\n        defaultValue=\"name\"\n        items={{ name: \"Name\", created: \"Created date\", status: \"Status\" }}\n        render={<Toolbar.Button />}\n      />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"View settings\" />\n    </Toolbar>","<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.Button icon={FunnelSimpleIcon}>Status</Toolbar.Button>\n      <Combobox items={toolbarComboboxItems}>\n        <Combobox.TriggerInput\n          aria-label=\"Filter status\"\n          className=\"flex-1\"\n          placeholder=\"Filter status…\"\n          render={<Toolbar.Input />}\n        />\n        <Combobox.Content>\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n          <Combobox.Empty>No matching statuses.</Combobox.Empty>\n        </Combobox.Content>\n      </Combobox>\n    </Toolbar>"],"colors":["bg-kumo-control","border-kumo-line","ring-kumo-line"],"subComponents":{"Button":{"name":"Button","description":"Button sub-component","props":{}},"Input":{"name":"Input","description":"Input sub-component","props":{}},"InputGroup":{"name":"InputGroup","description":"InputGroup sub-component","props":{}}}},"Tooltip":{"name":"Tooltip","type":"component","description":"Accessible popup that shows additional information on hover/focus. Wrap your app or section with `<TooltipProvider>` to enable delay grouping.","importPath":"@cloudflare/kumo","category":"Overlay","props":{"side":{"type":"enum","values":["top","bottom","left","right"],"default":"top","descriptions":{"top":"Tooltip appears above the trigger","bottom":"Tooltip appears below the trigger","left":"Tooltip appears to the left of the trigger","right":"Tooltip appears to the right of the trigger"}},"className":{"type":"string","description":"Additional CSS classes"},"children":{"type":"ReactNode","description":"Child elements"},"content":{"type":"ReactNode","required":true,"description":"Content to display in the tooltip"}},"examples":["<TooltipProvider>\n      <Tooltip\n        content=\"Add new item\"\n        render={\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n        }\n      />\n    </TooltipProvider>","<TooltipProvider>\n      <Tooltip\n        content=\"Add\"\n        render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n      />\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip\n          content=\"Add\"\n          render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n        />\n        <Tooltip\n          content=\"Change language\"\n          render={\n            <Button\n              shape=\"square\"\n              icon={TranslateIcon}\n              aria-label=\"Change language\"\n            />\n          }\n        />\n      </div>\n    </TooltipProvider>","<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex w-full justify-between\">\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Near left edge\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Centered\n        </Tooltip>\n        <Tooltip\n          content={longContent}\n          side=\"bottom\"\n          render={<Button variant=\"secondary\" />}\n        >\n          Near right edge\n        </Tooltip>\n      </div>\n    </TooltipProvider>","<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip\n          content=\"Opens after 1 second\"\n          delay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          1s open delay\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          render={<Button variant=\"secondary\" />}\n        >\n          500ms close delay\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          Instant + 1s close\n        </Tooltip>\n      </div>\n    </TooltipProvider>"],"colors":["bg-kumo-base","fill-kumo-arrow-edge","fill-kumo-arrow-stroke","fill-kumo-base","outline-kumo-line","text-kumo-default"],"subComponents":{"Provider":{"name":"Provider","description":"Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.","props":{"delay":{"type":"number","description":"How long to wait (ms) before opening a tooltip once the pointer enters the trigger.","default":"600"},"closeDelay":{"type":"number","description":"How long to wait (ms) before closing a tooltip.","default":"0"},"timeout":{"type":"number","description":"Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.","default":"400"}},"isPassThrough":true,"baseComponent":"TooltipBase.Provider","usageExamples":["<TooltipProvider>\n  <App />\n</TooltipProvider>"]}}},"InputArea":{"name":"InputArea","type":"component","description":"Multi-line textarea input with Input variants and InputArea-specific dimensions","importPath":"@cloudflare/kumo (synthetic - uses Input component)","category":"Input","props":{"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 for compact UIs","sm":"Small for secondary fields","base":"Default size","lg":"Large for prominent fields"},"default":"base"},"variant":{"type":"enum","optional":true,"description":"Visual variant of the textarea.","values":["default","error"],"default":"default"},"label":{"type":"ReactNode","optional":true,"description":"Label content for the textarea (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 textarea."},"error":{"type":"string | { message: ReactNode; match: FieldErrorMatch }","optional":true,"description":"Error message or validation error object."},"autoResize":{"type":"boolean","optional":true,"description":"Automatically resize the textarea based on its content.","default":"false"},"minRows":{"type":"number","optional":true,"description":"Minimum number of rows to display when `autoResize` is enabled.","default":"1"},"maxRows":{"type":"number","optional":true,"description":"Maximum number of rows to grow to when `autoResize` is enabled; content beyond this scrolls."},"onValueChange":{"type":"(value: string) => void","optional":true,"description":"Callback fired with the new string value on every change."}},"styling":{"sizeVariants":{"xs":{"minHeight":60,"width":200},"sm":{"minHeight":72,"width":240},"base":{"minHeight":88,"width":320},"lg":{"minHeight":100,"width":360}}},"examples":[],"colors":[]}},"blocks":{"DeleteResource":{"name":"DeleteResource","type":"block","description":"DeleteResource component","importPath":"@cloudflare/kumo","category":"Other","props":{"size":{"type":"enum","optional":true,"values":["sm","base"],"descriptions":{"sm":"Small dialog for simple delete confirmations","base":"Default delete confirmation dialog size"},"default":"base"},"open":{"type":"boolean","required":true,"description":"Whether the dialog is open"},"resourceType":{"type":"string","required":true,"description":"The type of resource being deleted (e.g., \"Zone\", \"Worker\", \"KV Namespace\")"},"resourceName":{"type":"string","required":true,"description":"The name of the specific resource being deleted"},"isDeleting":{"type":"boolean","optional":true,"description":"Whether the delete action is in progress"},"caseSensitive":{"type":"boolean","optional":true,"description":"Whether the confirmation input should be case-sensitive (default: true)"},"deleteButtonText":{"type":"string","optional":true,"description":"Custom delete button text (defaults to \"Delete {resourceType}\")"},"className":{"type":"string","optional":true,"description":"Additional className for the dialog"},"errorMessage":{"type":"string","optional":true,"description":"Error message to display if the delete action fails"}},"examples":["<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>","<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Worker\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Worker\"\n        resourceName=\"api-gateway-worker\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>","<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n        errorMessage={errorMsg}\n      />\n    </>"],"colors":["bg-kumo-fill","bg-kumo-tint","border-kumo-line","text-kumo-default","text-kumo-subtle"],"files":["delete-resource/delete-resource.tsx"],"dependencies":["Banner","Button","Dialog","DialogClose","DialogRoot","DialogTitle","Input"]},"PageHeader":{"name":"PageHeader","type":"block","description":"PageHeader component","importPath":"@cloudflare/kumo","category":"Layout","props":{"spacing":{"type":"enum","optional":true,"values":["compact","base","relaxed"],"descriptions":{"compact":"Compact spacing between header elements","base":"Default spacing between header elements","relaxed":"Relaxed spacing for more prominent headers"},"classes":{"compact":"gap-1","base":"gap-2","relaxed":"gap-4"},"default":"base"},"breadcrumbs":{"type":"ReactNode","optional":true},"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"tabs":{"type":"TabsItem[]","optional":true},"defaultTab":{"type":"string","optional":true},"className":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"examples":["<PageHeader\n      className=\"w-full\"\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            Workers & Pages\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Metrics\", value: \"metrics\" },\n        { label: \"Deployments\", value: \"deployments\" },\n        { label: \"Bindings\", value: \"bindings\" },\n        { label: \"Observability\", value: \"observability\" },\n        { label: \"Settings\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n      onValueChange={(v) => console.log(v)}\n    >\n      <Button icon={<CodeIcon />} className=\"h-8\">\n        Edit code\n      </Button>\n      <Button icon={<GlobeIcon />} variant=\"primary\" className=\"h-8\">\n        Visit\n      </Button>\n    </PageHeader>","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            Home\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current icon={<GearIcon size={16} />}>\n            Settings\n          </Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Settings</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"General\", value: \"general\" },\n        { label: \"Security\", value: \"security\" },\n        { label: \"Notifications\", value: \"notifications\" },\n      ]}\n      defaultTab=\"general\"\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Projects</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Settings\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n    >\n      <Button variant=\"primary\" size=\"base\">\n        Deploy\n      </Button>\n    </PageHeader>","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"Page title\"\n    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\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    />","<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\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      <Button variant=\"outline\" size=\"sm\">\n        Export\n      </Button>\n      <Button variant=\"primary\" size=\"sm\" icon={<PlusIcon size={16} />}>\n        New Item\n      </Button>\n    </PageHeader>"],"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","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":["<ResourceListPage\n      title=\"Databases\"\n      description=\"Manage your database instances and configurations\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n    >\n      <Surface className=\"p-6\">\n        <p>Main content area - your resource list would go here</p>\n      </Surface>\n    </ResourceListPage>","<ResourceListPage\n      title=\"API Keys\"\n      description=\"Create and manage API keys for your applications\"\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Quick Start</h3>\n          <p className=\"mb-3 text-sm text-kumo-subtle\">\n            Generate an API key to authenticate your requests\n          </p>\n          <Code\n            lang=\"bash\"\n            code='curl -H \"Authorization: Bearer YOUR_API_KEY\" https://api.example.com'\n          />\n        </Surface>\n      }\n    >\n      <Surface className=\"p-6\">\n        <p>API keys list would appear here</p>\n      </Surface>\n    </ResourceListPage>","<ResourceListPage\n      title=\"KV Namespaces\"\n      description=\"Store key-value data globally with low-latency access\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Usage Example</h3>\n          <Code\n            lang=\"ts\"\n            code={`// Read from KV\nconst value = await KV.get('key');\n\n// Write to KV\nawait KV.put('key', 'value');`}\n          />\n        </Surface>\n      }\n      additionalContent={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Learn More</h3>\n          <p className=\"text-sm text-kumo-subtle\">\n            Check out our documentation to learn more about KV storage.\n          </p>\n        </Surface>\n      }\n    >\n      <div className=\"space-y-4\">\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">production-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 2 days ago</p>\n        </Surface>\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">staging-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 1 week ago</p>\n        </Surface>\n      </div>\n    </ResourceListPage>"],"colors":["bg-kumo-overlay","text-kumo-subtle"],"files":["resource-list/resource-list.tsx","resource-list/resource-list.test.tsx"],"dependencies":[]}},"search":{"byCategory":{"Other":["Autocomplete","CloudflareLogo","DatePicker","Label","Link","SensitiveInput","Sidebar","Table","TableOfContents","Toolbar","DeleteResource"],"Display":["Badge","Breadcrumbs","Code","Collapsible","Empty","LayerCard","Meter","Text"],"Feedback":["Banner","Loader","Toasty"],"Data Visualization":["BubbleMap","Chart","ChoroplethMap","SankeyChart","TimeseriesChart"],"Action":["Button","ClipboardText"],"Input":["Checkbox","Combobox","DateRangePicker","Field","Input","InputGroup","Radio","Select","Switch"],"Navigation":["CommandPalette","MenuBar","Pagination","Tabs"],"Overlay":["Dialog","DropdownMenu","Popover","Tooltip"],"Layout":["Grid","Surface","PageHeader","ResourceListPage"]},"byName":["Autocomplete","Badge","Banner","Breadcrumbs","BubbleMap","Button","Chart","Checkbox","ChoroplethMap","ClipboardText","CloudflareLogo","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","DeleteResource","Dialog","DropdownMenu","Empty","Field","Grid","Input","InputGroup","Label","LayerCard","Link","Loader","MenuBar","Meter","PageHeader","Pagination","Popover","Radio","ResourceListPage","SankeyChart","Select","SensitiveInput","Sidebar","Surface","Switch","Table","TableOfContents","Tabs","Text","TimeseriesChart","Toasty","Toolbar","Tooltip"],"byType":{"component":["Autocomplete","Badge","Banner","Breadcrumbs","BubbleMap","Button","Chart","Checkbox","ChoroplethMap","ClipboardText","CloudflareLogo","Code","Collapsible","Combobox","CommandPalette","DatePicker","DateRangePicker","Dialog","DropdownMenu","Empty","Field","Grid","Input","InputGroup","Label","LayerCard","Link","Loader","MenuBar","Meter","Pagination","Popover","Radio","SankeyChart","Select","SensitiveInput","Sidebar","Surface","Switch","Table","TableOfContents","Tabs","Text","TimeseriesChart","Toasty","Toolbar","Tooltip"],"block":["DeleteResource","PageHeader","ResourceListPage"]}}}