### Local Development Setup

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-screenshot-worker/AGENTS.md

Copy the example environment variables and start the local development server for the screenshot worker.

```bash
cp .dev.vars.example .dev.vars   # then fill in API_KEY
pnpm --filter @cloudflare/kumo-screenshot-worker dev
```

--------------------------------

### Development: Install Dependencies and Start Dev Server

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Install project dependencies and start the Kumo documentation site locally.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

How to install the Empty component from the kumo package.

```APIDOC
## Installation

```tsx
import { Empty } from "@cloudflare/kumo";
```
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/contributing.mdx

Run these commands from the repository root to install project dependencies and build the project. Ensure you have the correct Node.js and pnpm versions installed.

```bash
pnpm install
pnpm build
```

--------------------------------

### Switch Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/switch.mdx

Instructions for installing the Switch component.

```APIDOC
## Installation

### Barrel

```tsx
import { Switch } from "@cloudflare/kumo";
```

### Granular

```tsx
import { Switch } from "@cloudflare/kumo/components/switch";
```
```

--------------------------------

### Install Kumo Blocks

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/CHANGELOG.md

After initializing Kumo, use this command to install specific blocks like PageHeader or ResourceListPage. Remember to update imports to the local path provided after installation.

```bash
npx @cloudflare/kumo add PageHeader
npx @cloudflare/kumo add ResourceListPage
```

--------------------------------

### Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/badge.mdx

Import the Badge component into your project.

```APIDOC
## Installation

### Barrel

```tsx
import { Badge } from "@cloudflare/kumo";
```

### Granular

```tsx
import { Badge } from "@cloudflare/kumo/components/badge";
```
```

--------------------------------

### Install Kumo CLI

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/cli.mdx

No installation is required as the Kumo CLI can be run directly using npx.

```bash
npx @cloudflare/kumo help
```

--------------------------------

### Component Directory Structure Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/src/components/AGENTS.md

Illustrates the typical file organization for Kumo components, including simple, compound, and complex examples.

```tree
components/
├── button/button.tsx           # Simple component
├── dialog/dialog.tsx           # Compound (Root, Trigger, Title, Description, Close)
├── command-palette/            # Complex: 865 lines, 14 sub-components, 2 contexts
├── date-range-picker/          # Complex: 667 lines (DEPRECATED, refactoring target)
├── combobox/                   # Complex: 561 lines (Root, Content, TriggerValue, TriggerInput, Item, Chip)
├── flow/                       # 8 files, descendants tracking system
├── chart/                      # 5 files, ECharts wrapper + timeseries + sparkline
└── ...
```

--------------------------------

### Pie Chart Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/charts/custom.mdx

A basic example of a pie chart using the Chart component. No specific setup or imports are required beyond the component itself.

```astro
<PieChartDemo client:visible />
```

--------------------------------

### Install a Block

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/cli.mdx

Install a specific block, such as PageHeader, into your project.

```bash
# Install a block to your project
npx @cloudflare/kumo add PageHeader
```

--------------------------------

### Full Kumo Catalog Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/streaming.mdx

Demonstrates the complete workflow of creating a Kumo catalog, initializing it, validating an AI-generated UI tree, setting up a rendering context, and rendering the UI. This example covers catalog creation, validation, and rendering logic.

```tsx
import {
  createKumoCatalog,
  initCatalog,
  resolveProps,
  evaluateVisibility,
  createVisibilityContext,
} from "@cloudflare/kumo/catalog";
import { Button, Text, Surface } from "@cloudflare/kumo";

// 1. Create and initialize catalog
const catalog = createKumoCatalog({
  actions: {
    greet: { description: "Show a greeting" },
  },
});
await initCatalog(catalog);

// 2. Validate AI-generated JSON
const aiJson = {
  root: "container",
  elements: {
    container: {
      key: "container",
      type: "Surface",
      props: { className: "p-4 space-y-4" },
      children: ["greeting", "action-btn"],
    },
    greeting: {
      key: "greeting",
      type: "Text",
      props: {
        variant: "heading2",
        children: { path: "/user/name" },
      },
      parentKey: "container",
      visible: { auth: "signedIn" },
    },
    "action-btn": {
      key: "action-btn",
      type: "Button",
      props: {
        variant: "primary",
        children: "Say Hello",
      },
      parentKey: "container",
      action: { name: "greet" },
    },
  },
};

const result = catalog.validateTree(aiJson);
if (!result.success) {
  throw new Error("Invalid UI tree");
}

// 3. Set up rendering context
const dataModel = {
  user: { name: "Alice", preferences: { theme: "dark" } },
};
const visibilityCtx = createVisibilityContext(dataModel, { isSignedIn: true });

// 4. Render function
function renderElement(element, elements) {
  // Check visibility
  if (!evaluateVisibility(element.visible, visibilityCtx)) {
    return null;
  }

  // Resolve dynamic props
  const props = resolveProps(element.props, dataModel);

  // Render children
  const children = element.children?.map((key) =>
    renderElement(elements[key], elements),
  );

  // Map to components
  const Component = { Surface, Text, Button }[element.type];
  return <Component {...props}>{children}</Component>;
}

// 5. Render the tree
const tree = result.data;
const ui = renderElement(tree.elements[tree.root], tree.elements);

```

--------------------------------

### Switch Examples

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/switch.mdx

Various examples demonstrating different states and features of the Switch component.

```APIDOC
## Examples

### Off State

(ComponentExample demo="SwitchOffDemo" is used here)

### On State

(ComponentExample demo="SwitchOnDemo" is used here)

### Disabled

(ComponentExample demo="SwitchDisabledDemo" is used here)

### Variants

<p>
  The Switch supports two variants: `default` (blue when on) and `neutral`
  (monochrome). Both use a squircle shape.
</p>
(ComponentExample demo="SwitchVariantsDemo" is used here)

### Neutral Variant

<p>
  The neutral variant uses monochrome colors and a squircle shape, ideal for
  subtle, less prominent toggles.
</p>
(ComponentExample demo="SwitchNeutralDemo" is used here)

### Neutral States

(ComponentExample demo="SwitchNeutralStatesDemo" is used here)

### Sizes

<p>Three sizes available: `sm`, `base` (default), and `lg`.</p>
(ComponentExample demo="SwitchSizesDemo" is used here)

### Custom ID

<p>
  When a custom `id` is provided, clicking the label still toggles the switch.
  The `id` is forwarded to Base UI so the label's `htmlFor` stays in sync.
</p>
(ComponentExample demo="SwitchCustomIdDemo" is used here)

### Switch Group

<p>
  Group related switches with `Switch.Group`. Provides a shared legend,
  description, and error message for the group.
</p>
(ComponentExample demo="SwitchGroupDemo" is used here)

### Visually Hidden Legend

<p>
  Use `Switch.Legend` with `className="sr-only"` to keep the legend accessible
  to screen readers while hiding it visually. This is useful when the group is
  already labeled by a parent `Field` or heading, and showing the legend would
  create a redundant label.
</p>
(ComponentExample demo="SwitchLegendSrOnlyDemo" is used here)

### Custom Legend Styling

<p>
  `Switch.Legend` accepts `className` for full control over legend presentation.
  Use it instead of the `legend` string prop when you need custom typography,
  colors, or layout.
</p>
(ComponentExample demo="SwitchLegendCustomDemo" is used here)
```

--------------------------------

### Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx

Import the ClipboardText component into your project.

```APIDOC
## Installation

### Barrel

```tsx
import { ClipboardText } from "@cloudflare/kumo";
```

### Granular

```tsx
import { ClipboardText } from "@cloudflare/kumo/components/clipboard-text";
```
```

--------------------------------

### Install Autocomplete (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx

Import the Autocomplete component using the barrel export for streamlined setup.

```tsx
import { Autocomplete } from "@cloudflare/kumo";
```

--------------------------------

### Examples

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/badge.mdx

Demonstrates various ways to use the Badge component.

```APIDOC
## Examples

### Primary Badges

<ComponentExample demo="BadgeSemanticVariantsDemo">
  <BadgeSemanticVariantsDemo client:visible />
</ComponentExample>

### Other color variants

Other color variants for specific products/use cases where the semantic badges aren't enough to convey intended meaning or status.

<ComponentExample demo="BadgeColorVariantsDemo">
  <BadgeColorVariantsDemo client:visible />
</ComponentExample>

### Dot badges

Use `appearance="dot"` for a subtle status indicator with a colored dot. Supported with `success`, `warning`, `error`, and `neutral` variants.

<ComponentExample demo="BadgeDotDemo">
  <BadgeDotDemo client:visible />
</ComponentExample>

### In a sentence

<ComponentExample demo="BadgeInSentenceDemo">
  <BadgeInSentenceDemo client:visible />
</ComponentExample>
```

--------------------------------

### Get All Component Documentation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/cli.mdx

Fetch documentation for all available Kumo components.

```bash
# Get documentation for all components
npx @cloudflare/kumo docs
```

--------------------------------

### Flow Installation (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/flow.mdx

Import the Flow component using the barrel export for simplified setup.

```tsx
import { Flow } from "@cloudflare/kumo";
```

--------------------------------

### Minimal Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

A minimal example of the Empty component, requiring only a title.

```APIDOC
## Minimal

At minimum, only a title is required.

<ComponentExample demo="EmptyMinimalDemo">
  <EmptyMinimalDemo client:visible />
</ComponentExample>
```

--------------------------------

### Install Beta Version with npm

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/README.md

Use this command to install a specific beta version of @cloudflare/kumo. Replace the version number with the one provided in the PR comment.

```bash
npm install @cloudflare/kumo@0.1.0-beta.a1b2c3d
```

--------------------------------

### Meter Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/meter.mdx

Instructions for installing the Meter component using either barrel or granular imports.

```APIDOC
## Installation

### Barrel

```tsx
import { Meter } from "@cloudflare/kumo";
```

### Granular

```tsx
import { Meter } from "@cloudflare/kumo/components/meter";
```
```

--------------------------------

### Install DeleteResource Block

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/delete-resource.mdx

Install the DeleteResource block into your project.

```bash
npx @cloudflare/kumo add DeleteResource
```

--------------------------------

### Install Kumo with yarn

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/installation.mdx

Use this command to install the Kumo package using yarn.

```bash
yarn add @cloudflare/kumo
```

--------------------------------

### Empty Component with Command Line

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

Includes a copyable command line within the Empty component to assist users in getting started.

```tsx
<EmptyWithCommandDemo client:visible />
```

--------------------------------

### Basic Popover Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/popover.mdx

Demonstrates the fundamental usage of the Popover component.

```javascript
<ComponentExample demo="PopoverBasicDemo">
  <PopoverBasicDemo client:load />
</ComponentExample>
```

--------------------------------

### Install Kumo with npm

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/installation.mdx

Use this command to install the Kumo package using npm.

```bash
npm install @cloudflare/kumo
```

--------------------------------

### Start Kumo Development Loop

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/contributing.mdx

Run these commands in separate terminals to start the Kumo package development watcher and the documentation site development server.

```bash
# Terminal 1: watch Kumo package output
pnpm --filter @cloudflare/kumo dev

# Terminal 2: docs site
pnpm dev
```

--------------------------------

### Basic Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

A basic example of how to use the Empty component with an icon, title, and description.

```APIDOC
## Usage

```tsx
import { Empty } from "@cloudflare/kumo";
import { PackageIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @kumo/ui"
    />
  );
}
```
```

--------------------------------

### InputArea Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/input-area.mdx

Import InputArea from its specific component path.

```tsx
import { InputArea } from "@cloudflare/kumo/components/input";
```

--------------------------------

### Run Kumo Development Setup

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/README.md

Execute the development server in watch mode for Kumo. This setup is optimized for fast rebuilds and is typically used in conjunction with the documentation site's development server.

```bash
Terminal 1 (this directory):
pnpm dev

Terminal 2 (from workspace root or kumo-docs):
cd ../kumo-docs
pnpm dev
```

--------------------------------

### List Available Blocks

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/cli.mdx

View a list of all available blocks that can be installed into your project.

```bash
# List all available blocks
npx @cloudflare/kumo blocks
```

--------------------------------

### Install Dependencies

Source: https://github.com/cloudflare/kumo/blob/main/CONTRIBUTING.md

Install project dependencies using pnpm. This is a prerequisite before running tests, especially after rebasing on the main branch.

```sh
pnpm i
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/cloudflare/kumo/blob/main/CONTRIBUTING.md

Install all project dependencies for the Kumo monorepo using pnpm at the root of the project.

```sh
cd kumo
pnpm install
```

--------------------------------

### CLI: Get All Component Docs

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Use the Kumo CLI to retrieve documentation for all components.

```bash
npx @cloudflare/kumo docs
```

--------------------------------

### Install Beta Version with pnpm

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/README.md

Use this command to install a specific beta version of @cloudflare/kumo with pnpm. Replace the version number with the one provided in the PR comment.

```bash
pnpm add @cloudflare/kumo@0.1.0-beta.a1b2c3d
```

--------------------------------

### Copy Environment Template

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/figma.mdx

Copies the example environment file to be configured with your Figma credentials.

```bash
cp packages/kumo-figma/scripts/.env.example packages/kumo-figma/scripts/.env
```

--------------------------------

### Basic Dialog Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dialog.mdx

Demonstrates the basic usage of the Dialog component.

```javascript
import Dialog from "@kumo-ui/react/dialog";

function DialogBasicDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Basic Dialog</Dialog.Title>
          <Dialog.Description>
            This is the description for the basic dialog.
          </Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
          <p>This is the main content of the dialog.</p>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close>Cancel</Dialog.Close>
          <Dialog.Close>Confirm</Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog.Root>
  );
}
```

--------------------------------

### Install PageHeader Block

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx

Install the PageHeader block using the Kumo CLI. This command adds the component to your project.

```bash
npx @cloudflare/kumo add PageHeader
```

--------------------------------

### Install Kumo Package

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Add the Kumo component library to your project using pnpm.

```bash
pnpm add @cloudflare/kumo
```

--------------------------------

### Basic Dropdown Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dropdown.mdx

A simple demonstration of the Kumo UI Dropdown component.

```javascript
import DropdownBasicDemo from "./DropdownBasicDemo";

<ComponentExample demo="DropdownBasicDemo">
  <DropdownBasicDemo client:load />
</ComponentExample>
```

--------------------------------

### Switch Basic Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/switch.mdx

A basic example of how to use the Switch component.

```APIDOC
## Usage

```tsx
import { Switch } from "@cloudflare/kumo";
import { useState } from "react";

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch checked={checked} onCheckedChange={(val) => setChecked(val)} />
  );
}
```
```

--------------------------------

### Complete PageHeader Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx

A comprehensive example showcasing the PageHeader component with breadcrumbs, title, description, tabs, and actions combined. This demonstrates the full capabilities for complex page layouts.

```tsx
import { PageHeader } from "./components/kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@cloudflare/kumo";

export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page Title"
      description="A brief description of the current page."
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
      actions={
        <Button variant="primary">
          Primary Action
        </Button>
      }
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}
```

--------------------------------

### Dropdown Menu Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dropdown.mdx

Import the DropdownMenu component from its specific path.

```tsx
import { DropdownMenu } from "@cloudflare/kumo/components/dropdown";
```

--------------------------------

### Install ResourceListPage Block

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx

Use this command to add the ResourceListPage block to your project.

```bash
npx @cloudflare/kumo add ResourceListPage
```

--------------------------------

### Install Input Component (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/input.mdx

Import the Input component using the barrel export for simplified installation.

```tsx
import { Input } from "@cloudflare/kumo";
```

--------------------------------

### Meter Examples

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/meter.mdx

Various examples showcasing different ways to use the Meter component, including custom value display, hidden values, and different value ranges.

```APIDOC
## Examples

### Basic Meter

<p>The default meter displays a label and percentage value.</p>

### Custom Value Display

<p>Use `customValue` to show a custom string instead of the percentage.</p>

### Hidden Value

<p>Set `showValue={false}` to hide the value display.</p>

### Full Meter

<p>A meter at 100% capacity.</p>

### Low Value

<p>A meter with a low value.</p>
```

--------------------------------

### Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/badge.mdx

Basic usage example of the Badge component.

```APIDOC
## Usage

```tsx
import { Badge } from "@cloudflare/kumo";

export default function Example() {
  return <Badge variant="secondary">New</Badge>;
}
```
```

--------------------------------

### Install SensitiveInput (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx

Import the SensitiveInput component using the barrel export for a streamlined setup.

```tsx
import { SensitiveInput } from "@cloudflare/kumo";
```

--------------------------------

### Basic Collapsible Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/collapsible.mdx

Demonstrates the fundamental usage of the Collapsible component.

```javascript
import { Collapsible } from "@/registry/ui/collapsible";

function BasicExample() {
  return (
    <Collapsible>
      <Collapsible.DefaultTrigger>Open</Collapsible.DefaultTrigger>
      <Collapsible.DefaultPanel>Content</Collapsible.DefaultPanel>
    </Collapsible>
  );
}
```

--------------------------------

### Grid Component Installation

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/grid.mdx

Import the Grid and GridItem components from the Kumo library to use them in your project.

```APIDOC
## Installation

```tsx
import { Grid, GridItem } from "@cloudflare/kumo";
```
```

--------------------------------

### Install TableOf Contents (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/table-of-contents.mdx

Import the TableOfContents component from its specific path.

```tsx
import { TableOfContents } from "@cloudflare/kumo/components/table-of-contents";
```

--------------------------------

### Kumo Build System Steps

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/AGENTS.md

Illustrates the sequential build process for Kumo projects, involving Vite for initial build, a TypeScript script for CSS handling, and esbuild for the final CLI build.

```bash
vite build
css-build.ts (copies CSS + "@tailwindcss/cli")
build-cli.ts (esbuild)
```

--------------------------------

### Install LayerCard (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/layer-card.mdx

Import the LayerCard component using the barrel export for a streamlined setup.

```tsx
import { LayerCard } from "@cloudflare/kumo";
```

--------------------------------

### Basic Usage Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/delete-resource.mdx

Demonstrates how to use the DeleteResource component in a React application.

```APIDOC
## Basic Usage Example

### Description
This example shows how to integrate the `DeleteResource` component into your application to handle resource deletion with a confirmation step.

### Code
```tsx
import { useState } from "react";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource"; // Adjust path as needed
import { Button } from "@cloudflare/kumo";

// Assume deleteZone is a function that handles the actual deletion logic
const deleteZone = async (zoneName: string) => {
  console.log(`Deleting zone: ${zoneName}`);
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(`Zone ${zoneName} deleted successfully.`);
};

export default function Example() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } catch (error) {
      console.error("Deletion failed:", error);
      // Optionally set an error message here
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}
```
```

--------------------------------

### Install Empty Component

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

Import the Empty component from the kumo package.

```tsx
import { Empty } from "@cloudflare/kumo";
```

--------------------------------

### CLI: List All Components

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Use the Kumo CLI to list all available components in the library.

```bash
npx @cloudflare/kumo ls
```

--------------------------------

### Install Text Component (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/text.mdx

Import the Text component using a granular path.

```tsx
import { Text } from "@cloudflare/kumo/components/text";
```

--------------------------------

### Toast Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/toast.mdx

Import the Toasty component and useKumoToastManager hook from the specific toast module.

```tsx
import { Toasty, useKumoToastManager } from "@cloudflare/kumo/components/toast";
```

--------------------------------

### Install Loader (Barrel Import)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/loader.mdx

Import the Loader component using the barrel import method for a simplified setup.

```tsx
import { Loader } from "@cloudflare/kumo";
```

--------------------------------

### InputArea Installation (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/input-area.mdx

Import InputArea using the barrel export for convenience.

```tsx
import { InputArea } from "@cloudflare/kumo";
```

--------------------------------

### Install Tooltip with Barrel Export

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/tooltip.mdx

Import the Tooltip and TooltipProvider components using the barrel export method for streamlined setup.

```tsx
import { Tooltip, TooltipProvider } from "@cloudflare/kumo";
```

--------------------------------

### Dropdown Menu Installation (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dropdown.mdx

Import the DropdownMenu component using the barrel export.

```tsx
import { DropdownMenu } from "@cloudflare/kumo";
```

--------------------------------

### Check and List Available Components

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/streaming.mdx

These examples demonstrate how to check if a specific component is available in the catalog and how to list all available component names.

```typescript
// Check available components
catalog.hasComponent("Button"); // true
catalog.hasComponent("Foobar"); // false

// List all component names
console.log(catalog.componentNames);
// ["Badge", "Banner", "Button", ...]
```

--------------------------------

### Combobox Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/combobox.mdx

Import the Combobox component from its specific module path for more granular control.

```tsx
import { Combobox } from "@cloudflare/kumo/components/combobox";
```

--------------------------------

### Install Toolbar with Granular Import

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/toolbar.mdx

Import the Toolbar component directly from its specific module path.

```tsx
import { Toolbar } from "@cloudflare/kumo/components/toolbar";
```

--------------------------------

### Install MenuBar - Granular Import

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/menu-bar.mdx

Use this import for the MenuBar component when using granular exports.

```tsx
import { MenuBar } from "@cloudflare/kumo/components/menubar";
```

--------------------------------

### Worker Deletion Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/delete-resource.mdx

Example demonstrating the deletion of a Worker resource.

```APIDOC
## Worker Deletion Example

### Description
This example shows how to use the `DeleteResource` component to delete a Worker. The `resourceType` and `resourceName` props are adjusted accordingly.

### Code
```tsx
import { useState } from "react";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource"; // Adjust path as needed
import { Button } from "@cloudflare/kumo";

// Assume deleteWorker is a function that handles the actual deletion logic
const deleteWorker = async (workerName: string) => {
  console.log(`Deleting worker: ${workerName}`);
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(`Worker ${workerName} deleted successfully.`);
};

export default function WorkerDeleteExample() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteWorker("my-worker");
      setOpen(false);
    } catch (error) {
      console.error("Worker deletion failed:", error);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Worker
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Worker"
        resourceName="my-worker"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}
```
```

--------------------------------

### List and Document Kumo Components via CLI

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/registry.mdx

Use the Kumo CLI to list all available components or get documentation for a specific component.

```bash
npx @cloudflare/kumo ls

# Get docs for a specific component
npx @cloudflare/kumo doc Button
```

--------------------------------

### Install ECharts Dependency

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/charts/index.mdx

Install ECharts as a project dependency using npm.

```bash
npm install echarts
```

--------------------------------

### Kumo Build Pipeline Steps

Source: https://github.com/cloudflare/kumo/blob/main/AGENTS.md

Illustrates the sequence of commands and their outputs in the Kumo build process, including demo generation, registry codegen, and code bundling.

```bash
kumo-docs-astro demos → dist/demo-metadata.json
                              ↓
kumo codegen:registry → ai/component-registry.{json,md} + ai/schemas.ts
                              ↓
kumo-figma build:data → generated/*.json → esbuild → code.js (IIFE, ES2017)
```

--------------------------------

### Run Kumo Docs Dev Server

Source: https://github.com/cloudflare/kumo/blob/main/AGENTS.md

Starts the local development server for Kumo documentation. Access it at localhost:4321.

```bash
pnpm dev
```

--------------------------------

### Install Table Component (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/table.mdx

Import the Table component using the barrel export for streamlined installation.

```tsx
import { Table } from "@cloudflare/kumo";
```

--------------------------------

### Import Installed Kumo Block

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components-vs-blocks.mdx

Import a block into your project after installation. The exact path depends on your kumo.json configuration.

```tsx
// Path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { PageHeader } from "./components/kumo/page-header/page-header";
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Install necessary peer dependencies for Kumo, including React, ReactDOM, and Phosphor Icons.

```bash
pnpm add react react-dom @phosphor-icons/react
```

--------------------------------

### With Command Line

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

Shows how to include a copyable command line in the Empty component.

```APIDOC
## With Command Line

Include a copyable command to help users get started.

<ComponentExample demo="EmptyWithCommandDemo">
  <EmptyWithCommandDemo client:visible />
</ComponentExample>
```

--------------------------------

### Install Required Peer Dependencies

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/installation.mdx

Install the necessary peer dependencies for Kumo, which are typically already present in most React projects.

```bash
# Required peer dependencies
pnpm add react react-dom @phosphor-icons/react
```

--------------------------------

### Shell Script for Deploying Docs Preview

Source: https://github.com/cloudflare/kumo/blob/main/ci/AGENTS.md

Builds the documentation and uploads it to Cloudflare Workers for a preview URL, then reports the URL.

```shell
Build → wrangler versions upload → preview URL → report
```

--------------------------------

### Importing Installed Kumo Blocks

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/installation.mdx

After installing a block via the CLI, import it using its relative path within your project's components directory.

```tsx
import { PageHeader } from "src/components/kumo/page-header/page-header";
```

--------------------------------

### Examples

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx

Demonstrates various ways to use the ClipboardText component with different text lengths and configurations.

```APIDOC
## Examples

### Short Text

<ComponentExample demo="ClipboardTextShortDemo">
  <ClipboardTextShortDemo client:visible />
</ComponentExample>

### API Key

<ComponentExample demo="ClipboardTextApiKeyDemo">
  <ClipboardTextApiKeyDemo client:visible />
</ComponentExample>

### Copy Alternate Text

<ComponentExample demo="ClipboardTextAlternateTextToCopyDemo">
  <ClipboardTextAlternateTextToCopyDemo client:visible />
</ComponentExample>

### Long Text

<ComponentExample demo="ClipboardTextLongDemo">
  <ClipboardTextLongDemo client:visible />
</ComponentExample>

### With Tooltip

<p>Shows "Copy" tooltip on hover, "Copied!" toast on click.</p>
<ComponentExample demo="ClipboardTextWithTooltipDemo">
  <ClipboardTextWithTooltipDemo client:visible />
</ComponentExample>
```

--------------------------------

### List Available Kumo Blocks

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components-vs-blocks.mdx

Use this command to see all the pre-built blocks you can add to your project.

```bash
npx @cloudflare/kumo blocks
```

--------------------------------

### Full DatePicker with Popover Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/date-picker.mdx

Demonstrates how to integrate the DatePicker component within a Popover for a dropdown calendar interface. This example shows setting up the trigger button and the popover content containing the DatePicker.

```tsx
import { useState } from "react";
import { DatePicker, Popover, Button } from "@cloudflare/kumo";
import { CalendarDotsIcon } from "@phosphor-icons/react";

export function DatePickerDropdown() {
  const [date, setDate] = useState<Date>();

  return (
    <Popover>
      <Popover.Trigger
        render={<Button variant="outline" icon={CalendarDotsIcon} />}
      >
        {date ? date.toLocaleDateString() : "Pick a date"}
      </Popover.Trigger>
      <Popover.Content className="p-3">
        <DatePicker
          mode="single"
          selected={date}
          onChange={(d) => setDate(d)}
        />
      </Popover.Content>
    </Popover>
  );
}
```

--------------------------------

### Basic Usage of Empty Component

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/empty.mdx

Demonstrates how to use the Empty component with an icon, title, description, and command line.

```tsx
import { Empty } from "@cloudflare/kumo";
import { PackageIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @kumo/ui"
    />
  );
}
```

--------------------------------

### Categorical Donut Chart Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/charts/colors.mdx

A donut chart example using the categorical color palette. When charts require more than 5 series, it's recommended to cycle through the tokens using modulo arithmetic for consistent styling.

```javascript
<CategoricalDonutChartDemo client:visible />
```

--------------------------------

### Basic Grid Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/grid.mdx

Demonstrates the basic implementation of the Grid component for organizing content.

```astro
<GridDemo client:visible />
```

--------------------------------

### Categorical Bar Chart Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/charts/colors.mdx

An example of a bar chart utilizing the categorical color palette. This palette is suitable for data without inherent polarity and is designed to be distinguishable, even for users with color vision deficiencies.

```javascript
<CategoricalBarChartDemo client:visible />
```

--------------------------------

### Basic MenuBar Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/menu-bar.mdx

Demonstrates how to use the MenuBar component with a single option. Ensure necessary icons and event handlers are imported.

```tsx
import { MenuBar } from "@cloudflare/kumo";
import { TextBolderIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <MenuBar
      options={[
        {
          icon: <TextBolderIcon />,
          id: "bold",
          tooltip: "Bold",
          onClick: () => console.log("Bold clicked"),
        },
      ]} 
    />
  );
}
```

--------------------------------

### Sequential Heatmap Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/charts/colors.mdx

An example of a heatmap utilizing the sequential color scale. This scale reinforces magnitude, with darker steps encoding higher values in light mode and lighter steps encoding higher values in dark mode.

```javascript
<SequentialHeatmapDemo client:visible />
```

--------------------------------

### Multiple Toasts Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/toast.mdx

Demonstrates how multiple toasts stack and animate smoothly. Users can hover over the stack to expand them.

```tsx
<ToastMultipleDemo client:visible />
```

--------------------------------

### Usage

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx

Basic usage example of the ClipboardText component.

```APIDOC
## Usage

```tsx
import { ClipboardText } from "@cloudflare/kumo";

export default function Example() {
  return <ClipboardText text="Copy this text" />;
}
```
```

--------------------------------

### Basic Toast Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/toast.mdx

A complete toast with both a title and a description.

```tsx
<ToastBasicDemo client:visible />
```

--------------------------------

### Initialize Kumo Config

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/blocks/delete-resource.mdx

Run this command once to initialize your Kumo configuration.

```bash
npx @cloudflare/kumo init
```

--------------------------------

### Basic Code Highlighted Example

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx

Demonstrates the basic usage of the CodeHighlighted component for syntax highlighting. Ensure the component is loaded with client:load for interactivity.

```astro
import ComponentExample from "~/components/docs/ComponentExample.astro";
import { CodeHighlightedBasicDemo } from "~/components/demos/CodeHighlightedDemo";

<ComponentExample demo="CodeHighlightedBasicDemo">
  <CodeHighlightedBasicDemo client:load />
</ComponentExample>
```

--------------------------------

### CommandPalette Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/command-palette.mdx

Import the CommandPalette component from its specific path.

```tsx
import { CommandPalette } from "@cloudflare/kumo/components/command-palette";
```

--------------------------------

### Start Kumo Storybook

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo/README.md

Launch Storybook to develop and test components in isolation. Storybook provides a live development environment with hot module replacement and interactive controls.

```bash
# From this directory
pnpm storybook

# Or from workspace root
pnpm --filter @cloudflare/kumo storybook
```

--------------------------------

### Install Grid and GridItem Components

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/grid.mdx

Import the Grid and GridItem components from the Kumo library to use them in your project.

```tsx
import { Grid, GridItem } from "@cloudflare/kumo";
```

--------------------------------

### Initialize and Add Kumo Blocks via CLI

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/CHANGELOG.md

Use the Kumo CLI to initialize kumo.json and add specific blocks like PageHeader to your project for customization. Imports are automatically transformed.

```bash
npx @cloudflare/kumo init        # Initialize kumo.json
npx @cloudflare/kumo add PageHeader
```

--------------------------------

### Development: Create New Component

Source: https://github.com/cloudflare/kumo/blob/main/README.md

Use the Kumo CLI to scaffold a new component within the project.

```bash
pnpm --filter @cloudflare/kumo new-component
```

--------------------------------

### Install CodeHighlighted

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx

Import CodeHighlighted and ShikiProvider from the dedicated @cloudflare/kumo/code entry point. Avoid importing from the main @cloudflare/kumo package to prevent bundling Shiki unnecessarily.

```tsx
import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
```

--------------------------------

### Dialog Installation (Granular)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dialog.mdx

Import the Dialog component using granular export.

```tsx
import { Dialog } from "@cloudflare/kumo/components/dialog";
```

--------------------------------

### Dialog Installation (Barrel)

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components/dialog.mdx

Import the Dialog component using the barrel export.

```tsx
import { Dialog } from "@cloudflare/kumo";
```

--------------------------------

### Example Product Card Block Composition

Source: https://github.com/cloudflare/kumo/blob/main/packages/kumo-docs-astro/src/pages/components-vs-blocks.mdx

This is a 'block' or 'recipe' demonstrating a specific composition of Kumo design system components for a product card pattern.

```tsx
// This is a "block" or "recipe" - a specific composition
// of design system components for a particular pattern

<Surface className="rounded-lg p-4">
  <img src={imgSrc} alt={imgAlt} className="rounded-md" />
  <div className="mt-3">
    <Text size="lg" weight="semibold">
      {title}
    </Text>
    <Text className="text-kumo-subtle">{description}</Text>
    <StarRating rating={rating} />
  </div>
  <div className="mt-4">
    <Button variant="primary">Add to cart</Button>
  </div>
</Surface>
```