### Install with Bun

Source: https://cerberus.digitalu.design/docs/signals/overview

Use this command to install the Signals library using Bun.

```bash
bun add @cerberus/signals@npm:@cerberus-design/signals
```

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

### Install with Deno

Source: https://cerberus.digitalu.design/docs/signals/overview

Use this command to install the Signals library using Deno.

```bash
deno add npm:@cerberus/signals@npm:@cerberus-design/signals
```

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

### Install Cerberus React with Deno

Source: https://cerberus.digitalu.design/docs/get-started/installation

Install the Cerberus React library using Deno.

```bash
deno add npm:@cerberus-design/react
```

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

### Install Data Grid with Deno

Source: https://cerberus.digitalu.design/docs/data-grid/overview

Use this command to install the Data Grid package using Deno.

```bash
deno add npm:@cerberus/data-grid@npm:@cerberus-design/data-grid
```

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

### Install Data Grid with Bun

Source: https://cerberus.digitalu.design/docs/data-grid/overview

Use this command to install the Data Grid package using Bun.

```bash
bun add @cerberus/data-grid@npm:@cerberus-design/data-grid
```

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

### Install with NPM

Source: https://cerberus.digitalu.design/docs/signals/overview

Use this command to install the Signals library using NPM.

```bash
npm install @cerberus/signals@npm:@cerberus-design/signals
```

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

### Install with PNPM

Source: https://cerberus.digitalu.design/docs/signals/overview

Use this command to install the Signals library using PNPM.

```bash
pnpm add @cerberus/signals@npm:@cerberus-design/signals
```

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

### Basic Data Grid Setup

Source: https://cerberus.digitalu.design/docs/data-grid/sort

This snippet shows the basic setup for the Data Grid component, including importing necessary modules and rendering the grid with columns and data. It serves as a foundation for adding features like sorting.

```javascript
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Box } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from './columns'

export function BasicDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = createFakeQuery(1000)

  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data()} />
    </Box>
  )
}
```

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

### Install Data Grid with NPM

Source: https://cerberus.digitalu.design/docs/data-grid/overview

Use this command to install the Data Grid package using NPM.

```bash
npm install @cerberus/data-grid@npm:@cerberus-design/data-grid
```

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

### Install Data Grid with PNPM

Source: https://cerberus.digitalu.design/docs/data-grid/overview

Use this command to install the Data Grid package using PNPM.

```bash
pnpm add @cerberus/data-grid@npm:@cerberus-design/data-grid
```

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

### Install Cerberus React with Bun

Source: https://cerberus.digitalu.design/docs/get-started/installation

Install the Cerberus React library using Bun, creating an alias for the package name.

```bash
bun add @cerberus/react@npm:@cerberus-design/react
```

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

### Basic Cerberus Provider Setup

Source: https://cerberus.digitalu.design/docs/components/cerberus-context

Wrap your application or a section of it with CerberusProvider to enable context.

```javascript
'use client'

import { CerberusProvider } from '@cerberus/react'
import { type PropsWithChildren } from 'react'

export function CerberusConfig(props: PropsWithChildren) {
  return <CerberusProvider>{props.children}</CerberusProvider>
}
```

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

### Basic Usage

Source: https://cerberus.digitalu.design/docs/components/switch

A simple example of how to use the Switch component to receive in-app notifications.

```APIDOC
## Basic Usage

### Description
This demonstrates the basic implementation of the Switch component for a simple toggle functionality.

### Component
```jsx
import { Switch } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function BasicDemo() {
  return (
    <Box w="1/2">
      <Switch>Receive in app notifications</Switch>
    </Box>
  )
}
```
```

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

### Basic Theme Examples

Source: https://cerberus.digitalu.design/docs/components/theme

Demonstrates applying different modes (light, dark, system) and a custom theme ('acheron') using the Theme component.

```javascript
import { Button, Theme } from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'


function BasicExample() {
  return (
    <VStack alignItems="flex-start" w="3/4">
      <Box w="full">
        <Button>Default</Button>
      </Box>


      <Theme mode="light" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Light</Button>
        </Box>
      </Theme>


      <Theme mode="dark" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Dark</Button>
        </Box>
      </Theme>


      <Theme mode="system" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>System</Button>
        </Box>
      </Theme>


      <Theme mode="dark" theme="acheron" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Dark Acheron</Button>
        </Box>
      </Theme>
    </VStack>
  )
}

```

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

### Install Cerberus React with NPM

Source: https://cerberus.digitalu.design/docs/get-started/installation

Install the Cerberus React library using NPM, creating an alias for the package name.

```bash
npm install @cerberus/react@npm:@cerberus-design/react
```

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

### Setup Test File

Source: https://cerberus.digitalu.design/docs/components/testing

Create a setup-test.ts file to configure the testing environment and mock unimplemented APIs. This includes mocks for ResizeObserver, IntersectionObserver, scroll methods, and more.

```typescript
import "@testing-library/jest-dom/vitest"
import { JSDOM } from "jsdom"
import ResizeObserver from "resize-observer-polyfill"
import { vi } from "vitest"
import "vitest-axe/extend-expect"


const { window } = new JSDOM()


// ResizeObserver mock
vi.stubGlobal("ResizeObserver", ResizeObserver)
window["ResizeObserver"] = ResizeObserver


// IntersectionObserver mock
const IntersectionObserverMock = vi.fn(() => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}))
vi.stubGlobal("IntersectionObserver", IntersectionObserverMock)
window["IntersectionObserver"] = IntersectionObserverMock


// Scroll Methods mock
window.Element.prototype.scrollTo = () => {}
window.Element.prototype.scrollIntoView = () => {}


// requestAnimationFrame mock
window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)


// URL object mock
window.URL.createObjectURL = () => "https://i.pravatar.cc/300"
window.URL.revokeObjectURL = () => {}


// navigator mock
Object.defineProperty(window, "navigator", {
  value: {
    clipboard: {
      writeText: vi.fn(),
    },
  },
})


// Override globalThis
Object.assign(global, { window, document: window.document })

```

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

### Install Testing Dependencies

Source: https://cerberus.digitalu.design/docs/components/testing

Install Vitest, jsdom, and testing-library packages for component testing. These are essential for setting up your testing environment.

```bash
npm install --save-dev vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event

```

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

### Install Cerberus React with PNPM

Source: https://cerberus.digitalu.design/docs/get-started/installation

Install the Cerberus React library using PNPM, creating an alias for the package name.

```bash
pnpm add @cerberus/react@npm:@cerberus-design/react
```

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

### Basic Table Example

Source: https://cerberus.digitalu.design/docs/components/table

Displays a basic table with product information. Use this for standard data presentation. Ensure 'For' component is imported for iteration.

```javascript
import { Table, For } from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function BasicTablePreview() {
  const items = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99 },
    { id: 2, name: 'Coffee Maker', category: 'Home Appliances', price: 49.99 },
    { id: 3, name: 'Desk Chair', category: 'Furniture', price: 150.0 },
    { id: 4, name: 'Smartphone', category: 'Electronics', price: 799.99 },
    { id: 5, name: 'Headphones', category: 'Accessories', price: 199.99 },
  ]


  return (
    <Box w="1/2">
      <Table.Root caption="Basic table example">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Product</Table.HeaderCol>
            <Table.HeaderCol>Category</Table.HeaderCol>
            <Table.HeaderCol>Price</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <For each={items}>
            {(item) => (
              <Table.Row key={item.id}>
                <Table.Cell>{item.name}</Table.Cell>
                <Table.Cell>{item.category}</Table.Cell>
                <Table.Cell>{item.price}</Table.Cell>
              </Table.Row>
            )}
          </For>
        </Table.Body>
      </Table.Root>
    </Box>
  )
}
```

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

### Download SVG File

Source: https://cerberus.digitalu.design/docs/components/download-trigger

This example demonstrates downloading an SVG file. The SVG content is provided as a string to the `data` prop.

```jsx
import { DownloadTrigger } from '@cerberus/react'


export const Svg = () => {
  return (
    <DownloadTrigger
      data='<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      Download SVG
    </DownloadTrigger>
  )
}
```

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

### Basic EnvironmentProvider Setup

Source: https://cerberus.digitalu.design/docs/components/environment

Render the EnvironmentProvider to wrap your application and provide the necessary context for Ark UI components to function correctly in custom environments.

```jsx
import { EnvironmentProvider } from '@cerberus/react'
import Frame from 'react-frame-component'


export const App = () => {
  return (
    <Frame title="IFrame Context">
      <EnvironmentProvider>{/* Your App */}</EnvironmentProvider>
    </Frame>
  )
}
```

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

### Skeleton Loading State Example

Source: https://cerberus.digitalu.design/docs/components/loading-states

This example demonstrates a complex skeleton loading state using various components and the `aria-busy` attribute to indicate loading.

```jsx
import { Tag, Text } from '@cerberus/react'
import { Box, Circle, HStack, VStack } from 'styled-system/jsx'
import { css } from 'styled-system/css'


export function OverviewPreview() {
  return (
    <HStack justify="space-between" w="3/4">
      <VStack alignItems="flex-start">
        <HStack justify="space-between" w="full">
          <Box aria-busy="true" rounded="sm">
            <Text>This is a description of something.</Text>
          </Box>
          <HStack>
            <Circle aria-busy="true" size="6" />
            <Circle aria-busy="true" size="6" />
            <Circle aria-busy="true" size="6" />
          </HStack>
        </HStack>
        <Box aria-busy="true" rounded="sm">
          <Text as="h2">Trash content</Text>
          <Text>
            Trash content is a place where you can find all the content that you
            have deleted. You can restore or permanently delete the content from
            here.
          </Text>
        </Box>
        <Tag
          className={css({
            alignSelf: 'center',
          })}
          shape="pill"
        >
          Skeleton
        </Tag>
      </VStack>
    </HStack>
  )
}
```

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

### Live Text Gradient Examples

Source: https://cerberus.digitalu.design/docs/styling/text-gradient

Demonstrates various text gradient applications using different tokens and components. Imports include `cerberus` and `css` from 'styled-system/css'.

```jsx
import { cerberus } from '@cerberus/react'
import { css } from 'styled-system/css'


export default function TextGradientPreview() {
  return (
    <cerberus.div display="flex" flexDirection="column" gap="4" padding="6">
      <cerberus.h3
        textStyle="h3"
        textGradient="to-b"
        gradientFrom="gradient.charon-dark.start"
        gradientTo="gradient.charon-dark.end"
      >
        Charon Dark Gradient
      </cerberus.h3>


      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.charon-light.start',
          gradientTo: 'gradient.charon-light.end',
        })}
      >
        This text uses the Charon light gradient variant.
      </p>


      <p
        className={css({
          textStyle: 'heading-md',
          textGradient: 'to-b',
          gradientFrom: 'gradient.nyx-dark.start',
          gradientTo: 'gradient.nyx-dark.end',
        })}
      >
        Nyx dark gradient creates a striking effect.
      </p>


      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.amphiaraus-light.start',
          gradientTo: 'gradient.amphiaraus-light.end',
        })}
      >
        Amphiaraus light gradient for subtle elegance.
      </p>
    </cerberus.div>
  )
}
```

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

### Container Sizes with maxWidth Prop

Source: https://cerberus.digitalu.design/docs/components/container

Illustrates how to control the size of the Container using the `maxWidth` prop, with examples for '1/4', '1/2', '3/4', and 'full' widths.

```javascript
import { Container, VStack } from 'styled-system/jsx'
import { DecorativeBox } from '@/app/components/decorative-box'

function getText(size: string) {
  return `This is some text within a container of size ${size}.`
}

export function SizesDemo() {
  return (
    <VStack w="full">
      <Container maxW="1/4" px="2" w="full">
        <DecorativeBox px="md">{getText('1/4')}</DecorativeBox>
      </Container>

      <Container maxW="1/2" px="2" w="full">
        <DecorativeBox px="md">{getText('1/2')}</DecorativeBox>
      </Container>

      <Container maxW="3/4" px="2" w="full">
        <DecorativeBox px="md">{getText('3/4')}</DecorativeBox>
      </Container>

      <Container px="2" w="full">
        <DecorativeBox px="md">{getText('full')}</DecorativeBox>
      </Container>
    </VStack>
  )
}
```

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

### Query with Initial Data

Source: https://cerberus.digitalu.design/docs/signals/use-query

Bypass the initial fetch by providing `initialData` in the options object. This is useful for pre-loading data, for example, from a server component.

```javascript
'use client'

import { useQuery } from '@cerberus/signals'
import { queryUser } from './queries'
import { type User } from './db'

interface Props {
  id: string
  initialData: User
}

export function UserProfile(props: Props) {
  // 1. Cerberus sees `initialData`, instantly seeds the $O(1) Map,
  // and mounts the component with zero loading spinners or network waterfalls.
  const user = useQuery(queryUser(props.id), { initialData: props.initialData })

  if (!user) return null

  return <h1>{user.name}</h1>
}

```

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

### Pin Input Sizes

Source: https://cerberus.digitalu.design/docs/components/pin-input

Apply different sizes to the PinInput component using the `size` prop. This example demonstrates 'md' and 'lg' sizes.

```javascript
import { PinInput, Field } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'


export function SizesPreview() {
  return (
    <HStack w="1/2">
      <Field label="Medium">
        <PinInput size="md" />
      </Field>
      <Field label="Large">
        <PinInput size="lg" />
      </Field>
    </HStack>
  )
}
```

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

### Setup Data Grid Columns

Source: https://cerberus.digitalu.design/docs/data-grid/quickstart

Set up strictly typed columns for the Data Grid using `createColumnHelper`. Pass your data type to `createColumnHelper` to define columns.

```typescript
import { createColumnHelper } from '@cerberus/data-grid'
import { type Employee } from './data.demo'

export const columnHelper = createColumnHelper<Employee>()

```

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

### Accordion Indicator Position

Source: https://cerberus.digitalu.design/docs/components/accordion

Customize the indicator position of AccordionItemGroup to 'start' or 'end'. This example shows the indicator positioned at the start.

```javascript
import {
  Accordion,
  AccordionItemGroup,
  For,
  Show,
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'
import data from './data.json'

export function IndicatorDemo() {
  return (
    <Box w="2/3">
      <Accordion defaultValue={['one']}>
        <For each={data}>
          {(item) => (
            <AccordionItemGroup
              indicatorPosition="start"
              heading={item.heading}
              key={item.id}
              value={item.value}
            >
              <Show when={item.content !== null}>{item.content}</Show>
            </AccordionItemGroup>
          )}
        </For>
      </Accordion>
    </Box>
  )
}
```

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

### Create a Global Clock Store

Source: https://cerberus.digitalu.design/docs/signals/stores

Define a store function that returns an object containing signals and actions. This example demonstrates a clock store with time-related signals and a function to start the clock.

```typescript
'use client'

import { HStack } from '@/styled-system/jsx'
import { Button } from '@cerberus/react'
import {
  batch,
  createComputed,
  createEffect,
  createSignal,
  ReactiveText,
  type Accessor,
} from '@cerberus/signals'

type ClockStore = {
  time: Accessor<string>
  hours: Accessor<number>
  minutes: Accessor<number>
  seconds: Accessor<number>
  shortTime: Accessor<string>
  startClock: () => void
}

export function globalStoreDemo(): ClockStore {
  const [hours, setHours] = createSignal<number>(0)
  const [minutes, setMinutes] = createSignal<number>(0)
  const [seconds, setSeconds] = createSignal<number>(0)
  const [turnOn, setTurnOn] = createSignal<boolean>(false)

  const time = createComputed<string>(() => `${hours()}:${minutes()}:${seconds()}`)
  const shortTime = createComputed<string>(() => `${hours()}:${minutes()}`)

  function getTime() {
    const now = new Date()
    setHours(now.getHours())
    setMinutes(now.getMinutes())
    setSeconds(now.getSeconds())
  }

  createEffect(() => {
    if (turnOn()) {
      const interval = setInterval(() => getTime(), 1000)
      return () => clearInterval(interval)
    }
  })

  return {
    time,
    shortTime,
    hours,
    minutes,
    seconds,
    // actions
    startClock: () => {
      batch(() => {
        setTurnOn(true)
        getTime()
      })
    },
  }
}

export function GlobalDemo() {
  const store = globalStoreDemo()
  return (
    <HStack gap="md" w="3/4">
      <Button onClick={store.startClock}>Start</Button>
      <ReactiveText data={store.time} />
    </HStack>
  )
}

```

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

### Progress Bar Usage Examples

Source: https://cerberus.digitalu.design/docs/components/progress

Demonstrates the use of the ProgressBar component in both rounded and block styles. Ensure to import necessary components like Tag, HStack, and VStack.

```javascript
import { ProgressBar, Tag } from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'


export function OverviewPreview() {
  return (
    <HStack
      gap="10"
      w="3/4"
    >
      <VStack gap="md" w="full">
        <ProgressBar
          id="rounded-example"
          label="rounded progress example"
          size="sm"
          now={75}
        />
        <Tag shape="pill">Rounded</Tag>
      </VStack>
      <VStack gap="md" w="full">
        <ProgressBar
          id="block-example"
          label="block progress example"
          size="sm"
          usage="block"
          now={75}
        />
        <Tag shape="pill">Block</Tag>
      </VStack>
    </HStack>
  )
}
```

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

### Combobox with Start Icon

Source: https://cerberus.digitalu.design/docs/components/combobox

Adds a start icon to the Combobox input using the `startIcon` prop. This is useful for visual cues like a search icon.

```javascript
'use client'


import {
  For,
  Combobox,
  ComboItemWithIndicator,
  ComboItemText,
  useStatefulCollection,
} from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'
import { useMemo, useState } from 'react'
import { Search } from '@carbon/icons-react'


const initialItems = [
  { label: 'Hades', value: 'hades' },
  { label: 'Persephone', value: 'persephone' },
  { label: 'Zeus', value: 'zeus', disabled: true },
  { label: 'Poseidon', value: 'poseidon' },
  { label: 'Hera', value: 'hera' },
]


function StartIconPreview() {
  const { collection, handleInputChange } = useStatefulCollection(initialItems)


  return (
    <Box w="1/2">
      <Combobox
        collection={collection}
        label="Select Relative"
        onInputValueChange={handleInputChange}
        openOnClick
        placeholder="Choose option"
        startIcon={<Search />}
      >
        <For
          each={collection.items}
          fallback={
            <VStack paddingBlock="6" w="full">
              <Text textAlign="center" textStyle="label-sm">
                No results found
              </Text>
            </VStack>
          }
        >
          {(item) => (
            <ComboItemWithIndicator key={item.value} item={item}>
              <ComboItemText>{item.label}</ComboItemText>
            </ComboItemWithIndicator>
          )}
        </For>
      </Combobox>
    </Box>
  )
}
```

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

### Get Today's Date

Source: https://cerberus.digitalu.design/docs/components/date-picker

Use the `today` function to get the current date in a format that the `DatePicker` can understand. You can specify a timezone or use the local timezone.

```javascript
import { today, getLocalTimeZone } from '@cerberus/react'


const nyDate = today('America/New_York');
const localDate = today(getLocalTimeZone());
```

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

### Table Sizes Example

Source: https://cerberus.digitalu.design/docs/components/table

Demonstrates how to set different sizes for table cells using the 'size' prop on Table.Root. Available sizes are 'sm', 'md', and 'lg'. The default is 'md'.

```javascript
import { Table, For } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'


function SizesPreview() {
  return (
    <HStack w="1/2">
      <Table.Root caption="Table with different cell sizes" size="sm">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Small</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Small</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>


      <Table.Root caption="Table with different cell sizes" size="md">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Medium</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Medium</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>


      <Table.Root caption="Table with different cell sizes" size="lg">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Large</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Large</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </HStack>
  )
}
```

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

### Strict Token Usage Example

Source: https://cerberus.digitalu.design/docs/theming

Illustrates the effect of `strictTokens`. The first example shows an invalid usage with a hardcoded color, while the second shows the correct usage with a defined token.

```javascript
// ❌ This will throw a TS error
<Box color="#4f343e">Hello World</Box>


// ✅ This will work
<Box color="red.400">Hello World</Box>

```

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

### Confirmation Dialog Example

Source: https://cerberus.digitalu.design/docs/components/dialog

This example demonstrates how to create a confirmation dialog that intercepts close attempts on a parent dialog. It prevents data loss by showing a confirmation prompt if there are unsaved changes in the parent dialog.

```typescript
'use client'

import { Stack } from '@/styled-system/jsx'
import {
  Button,
  ButtonGroup,
  Dialog,
  DialogCloseIconTrigger,
  DialogDescription,
  DialogHeading,
  DialogRootProvider,
  DialogRootProviderProps,
  Field,
  Text,
  Textarea,
  useDialog,
} from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import { ChangeEventHandler } from 'react'

export function ConfirmationDialog() {
  const [formContent, setFormContent] = useSignal<string>('')
  const [isParentDialogOpen, setIsParentDialogOpen] = useSignal<boolean>(false)

  const parentDialog = useDialog({
    open: isParentDialogOpen,
    onOpenChange: (details) => {
      if (!details.open && formContent.trim()) {
        confirmDialog.setOpen(true)
      } else {
        setIsParentDialogOpen(details.open)
      }
    },
  })
  const confirmDialog = useDialog()

  const handleConfirmClose = () => {
    confirmDialog.setOpen(false)
    parentDialog.setOpen(false)
    setFormContent('')
  }

  const handleCancel = () => {
    confirmDialog.setOpen(false)
  }

  return (
    <>
      <Button onClick={() => parentDialog.setOpen(true)}>Trigger</Button>
      <ParentDialog
        onChange={(e) => setFormContent(e.target.value)}
        formValue={formContent}
        value={parentDialog}
      />
      <ConfirmDialog
        value={confirmDialog}
        onCancel={handleCancel}
        onClose={handleConfirmClose}
      />
    </>
  )
}

interface ParentDialogProps extends DialogRootProviderProps {
  onChange?: ChangeEventHandler<HTMLTextAreaElement>
  formValue: string
}

function ParentDialog(props: ParentDialogProps) {
  return (
    <DialogRootProvider {...props}>
      <Dialog>
        <DialogCloseIconTrigger />

        <Stack gap="md" w="full">
          <DialogHeading asChild>
            <Text textStyle="heading-sm">Edit Content</Text>
          </DialogHeading>
          <DialogDescription maxW="prose">
            Make changes to your content. You&apos;ll be asked to confirm before closing
            if there are unsaved changes.
          </DialogDescription>

          <Field>
            <Textarea
              value={props.formValue}
              onChange={props.onChange}
              placeholder="Enter some text..."
              rows={4}
            />
          </Field>
        </Stack>
      </Dialog>
    </DialogRootProvider>
  )
}

interface ConfirmationDialogProps extends DialogRootProviderProps {
  onCancel?: () => void
  onClose?: () => void
}

function ConfirmDialog(props: ConfirmationDialogProps) {
  return (
    <DialogRootProvider {...props}>
      <Dialog size="auto">
        <DialogCloseIconTrigger />

        <Stack gap="md" w="full">
          <DialogHeading asChild>
            <Text textStyle="heading-sm">Unsaved Changes</Text>
          </DialogHeading>
          <DialogDescription maxW="prose">
            You have unsaved changes. Are you sure you want to close without saving?
          </DialogDescription>

          <ButtonGroup>
            <Button onClick={props.onCancel} usage="outlined-subtle">
              Keep Editing
            </Button>
            <Button palette="danger" onClick={props.onClose}>
              Discard Changes
            </Button>
          </ButtonGroup>
        </Stack>
      </Dialog>
    </DialogRootProvider>
  )
}

```

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

### Custom Select with Primitives

Source: https://cerberus.digitalu.design/docs/components/select

Demonstrates how to build a custom select component using individual primitives. This example shows custom styling for the label, control, trigger, and content, along with dynamic item rendering.

```javascript
function SelectCustomPreview() {
  const collection = createSelectCollection([
    { label: 'Hades', value: '1-hades' },
    { label: 'Persephone', value: '1-persephone' },
    { label: 'Zeus', value: '1-zeus', disabled: true },
    { label: 'Poseidon', value: '1-poseidon' },
    { label: 'Hera', value: '1-hera' },
  ])


  return (
    <Box w="1/2">
      <SelectParts.Root collection={collection}>
        <SelectParts.Label
          css={{
            paddingBlock: 2,
            textStyle: 'body-sm',
            textTransform: 'uppercase',
          }}
        >
          Select a custom relative
        </SelectParts.Label>


        <SelectParts.Control>
          <SelectParts.Trigger
            className={cx(
              css({
                bgColor: 'black',
                color: 'danger.surface.initial',
                paddingInline: 4,
                paddingBlock: 3,
                _hover: {
                  bgColor: 'danger.surface.initial',
                  color: 'white',
                },
              }),
              hstack({
                justify: 'space-between',
                w: 'full',
              }),
            )} 
          >
            <SelectParts.ValueText placeholder="Choose a custom option" />
            <SelectParts.Indicator
              css={{
                transitionProperty: 'transform',
                transitionDuration: 'fast',
                _open: {
                  transform: 'rotate(180deg)',
                },
              }}
            >
              <ChevronDownOutline />
            </SelectParts.Indicator>
          </SelectParts.Trigger>
          <SelectParts.ClearTrigger>Clear</SelectParts.ClearTrigger>
        </SelectParts.Control>


        <Portal>
          <SelectParts.Positioner css={{ w: 'var(--reference-width)' }}>
            <SelectParts.Content
              css={{
                bgColor: 'danger.surface.initial',
                p: 4,
              }}
            >
              <SelectParts.ItemGroup>
                <SelectParts.ItemGroupLabel
                  css={css({
                    fontWeight: 'bold',
                    textStyle: 'label-sm',
                    textTransform: 'uppercase',
                  })}
                >
                  The fam
                </SelectParts.ItemGroupLabel>


                <For each={collection.items}>
                  {(item, idx) => (
                    <SelectParts.Item key={item.value} item={item}>
                      <SelectParts.ItemText
                        css={{
                          color: 'white',
                          display: 'inline-block',
                        }}
                        style={{
                          paddingInlineStart: `calc(16px * ${idx})`,
                        }}
                      >
                        {item.label}
                      </SelectParts.ItemText>
                      <SelectParts.ItemIndicator>✓</SelectParts.ItemIndicator>
                    </SelectParts.Item>
                  )}
                </For>
              </SelectParts.ItemGroup>
            </SelectParts.Content>
          </SelectParts.Positioner>
        </Portal>
      </SelectParts.Root>
    </Box>
  )
}
```

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

### Basic Select Usage

Source: https://cerberus.digitalu.design/docs/components/select

Demonstrates the basic usage of the Select component with a list of options. Ensure the collection is created using `createSelectCollection`.

```javascript
import {
  For,
  Field,
  Select,
  Option,
  createSelectCollection
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function SelectBasicPreview() {
  const collection = createSelectCollection([
    { label: 'Hades', value: 'hades' },
    { label: 'Persephone', value: 'persephone' },
    { label: 'Zeus', value: 'zeus', disabled: true },
    { label: 'Poseidon', value: 'poseidon' },
    { label: 'Hera', value: 'hera' },
  ])


  return (
    <Box w="1/2">
      <Field label="Select Relative">
        <Select collection={collection} placeholder="Choose option">
          <For each={collection.items}>
            {(item) => <Option key={item.value} item={item} />}
          </For>
        </Select>
      </Field>
    </Box>
  )
}
```

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

### Field Group Example

Source: https://cerberus.digitalu.design/docs/components/fieldset

Illustrates using the Fieldset component with the 'fieldGroup' usage for grouping radio inputs.

```APIDOC
## Fieldset Component - Field Group Example

### Description
This example demonstrates using the `Fieldset` component with `usage="fieldGroup"` to label a group of `Radio` inputs.

### Props
- **legend** (string) - Required - The main label for the fieldset group.
- **usage** (string) - Optional - Specifies the type of fieldset. Defaults to `"fieldGroup"`.

### Request Example
```javascript
import {
  Fieldset,
  RadioGroup,
  Radio,
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function FieldsetGroupDemo() {
  return (
    <Box w="1/2">
      <Fieldset legend="Who is your favorite?" usage="fieldGroup">
        <RadioGroup name="favorite" defaultValue="cerberus">
          <Radio value="cerberus">Cerberus</Radio>
          <Radio value="hades">Hades</Radio>
          <Radio value="zeus">Zeus</Radio>
        </RadioGroup>
      </Fieldset>
    </Box>
  )
}
```
```

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

### Basic Usage

Source: https://cerberus.digitalu.design/docs/components/icon-button

Demonstrates the basic implementation of the IconButton component.

```APIDOC
## Basic Usage

### Description
This snippet shows how to import and use the `IconButton` component with an icon.

### Component
```jsx
import { IconButton } from '@cerberus/react'
import { Tuning } from '@carbon/icons-react'

function BasicButtonPreview() {
  return <IconButton><Tuning /></IconButton>
}
```
```

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

### Closable Tag Example

Source: https://cerberus.digitalu.design/docs/components/tag

Implements a closable tag by providing an 'onClick' prop. This automatically adds a close icon.

```javascript
'use client'


import { Tag } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'


function ClosableTagPreview() {
  const handleClose = () => {
    console.log('Tag closed')
  }


  return (
    <HStack gap="md">
      <Tag onClick={handleClick}>Closable</Tag>


      <Tag palette="page" onClick={handleClick}>
        Closable
      </Tag>


      <Tag palette="danger" onClick={handleClick}>
        Closable
      </Tag>
    </HStack>
  )
}

```

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

### Basic Data Grid Demo

Source: https://cerberus.digitalu.design/docs/data-grid/filtering

This snippet demonstrates the basic setup of the Data Grid component with sample data and columns. Ensure the 'filter' feature is enabled in column definitions for filtering to be available.

```javascript
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Box } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from './columns'

export function BasicDemo() {
  const data = createFakeQuery(1000)
  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data()} />
    </Box>
  )
}

// columnHelper.accessor('id', {
//   header: 'ID',
//   width: 80,
//   features: {
//     pinning: {
//       defaultPosition: 'left',
//     },
//     sort: true,
//     filter: true,
//   },
//   cell: ({ value }) => <Text>#{value}</Text>,
// })

```

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

### Form Section Example

Source: https://cerberus.digitalu.design/docs/components/fieldset

Demonstrates using the Fieldset component to group related form elements in a 'formSection' usage.

```APIDOC
## Fieldset Component - Form Section Example

### Description
This example shows how to use the `Fieldset` component to group form fields for a profile update section. It utilizes the `usage="formSection"` prop to define its purpose.

### Props
- **invalid** (boolean) - Optional - Indicates if the fieldset has an invalid state.
- **legend** (string) - Required - The main label for the fieldset group.
- **helperText** (string) - Optional - Provides additional descriptive text for the fieldset.
- **errorText** (string) - Optional - Displays an error message when the fieldset is in an invalid state.
- **usage** (string) - Optional - Specifies the type of fieldset. Accepts `"formSection"` or `"fieldGroup"` (default).

### Request Example
```javascript
import {
  Fieldset,
  Field,
  Input,
  RadioGroup,
  Radio,
} from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'


export function BasicDemo() {
  return (
    <Box w="1/2">
      <Fieldset
        invalid
        legend="Update your profile"
        helperText="You can update your profile information here."
        errorText="This is an error message for the fieldset group."
        usage="formSection"
      >
        <VStack alignItems="flex-start" gap="lg" paddingBlock="lg" w="full">
          <Field
            ids={{
              control: 'first_name',
            }}
            label="What is your first name?"
            required
          >
            <Input name="first_name" />
          </Field>


          <Field
            ids={{
              control: 'display_name',
            }}
            label="What is your display name?"
            required
          >
            <Input name="last_name" />
          </Field>
        </VStack>
      </Fieldset>
    </Box>
  )
}
```
```

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

### Date Range Picker Usage

Source: https://cerberus.digitalu.design/docs/components/date-picker

Example of a date range picker. Set selectionMode to 'range' and use RangePickerInput.

```javascript
import {
  DatePicker,
  DatePickerLabel,
  RangePickerInput,
  DatePickerCalendar,
  Field,
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function RangePreview() {
  return (
    <Box gap="4" w="2/3">
      <Field>
        <DatePicker id="range_dates" name="range_dates" selectionMode="range">
          <DatePickerLabel>Search range</DatePickerLabel>
          <RangePickerInput />
          <DatePickerCalendar />
        </DatePicker>
      </Field>
    </Box>
  )
}
```

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

### Basic Usage

Source: https://cerberus.digitalu.design/docs/components/highlight

Demonstrates the basic usage of the Highlight component with a single query.

```APIDOC
## Highlight Component

### Description

The Highlight component renders text with specified portions highlighted.

### Props

- **text** (string) - Required - The full text content to be displayed.
- **query** (string) - Required - The text to be highlighted within the `text` prop.

### Example
```javascript
import { Highlight } from '@cerberus/react'

export const Basic = () => {
  return (
    <Highlight
      query="ipsum"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}
```
```

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

### Show Portal Example

Source: https://cerberus.digitalu.design/docs/components/portal

Demonstrates how to use the Portal component to display content outside the DOM hierarchy. Use this when you need to render elements that should not be constrained by their parent's styling or DOM structure.

```javascript
'use client'


import { Close } from '@carbon/icons-react'
import { Button, IconButton, Portal, Show } from '@cerberus/react'
import { hstack } from 'styled-system/patterns'
import { useState } from 'react'


function PortalPreview() {
  const [showPortal, setShowPortal] = useState<boolean>(false)


  function handleShowPortal() {
    setShowPortal(true)
  }


  function handleClosePortal() {
    setShowPortal(false)
  }


  return (
    <>
      <Button onClick={handleShowPortal}>Show Portal</Button>
      <Show when={showPortal}>
        <Portal>
          <div
            className={hstack({
              backgroundColor: 'info.surface.initial',
              color: 'info.text.initial',
              justify: 'space-between',
              left: 0,
              mxi: '4',
              p: '4',
              position: 'absolute',
              right: 0,
              rounded: 'md',
              shadow: 'md',
              top: '4',
              zIndex: 'toast',
            })}
          >
            <p>
              This is a portal element that is outside of the DOM hierarchy of
              the parent component.
            </p>


            <IconButton
              ariaLabel="Close Portal"
              onClick={handleClosePortal}
              tooltipPosition="bottom"
            >
              <Close />
            </IconButton>
          </div>
        </Portal>
      </Show>
    </>
  )
}
```

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

### Field Group Example with Fieldset

Source: https://cerberus.digitalu.design/docs/components/fieldset

Use the Fieldset component with the default `usage='fieldGroup'` to label a group of Radio or Checkbox inputs.

```javascript
import {
  Fieldset,
  RadioGroup,
  Radio,
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function FieldsetGroupDemo() {
  return (
    <Box w="1/2">
      <Fieldset legend="Who is your favorite?">
        <RadioGroup name="favorite" defaultValue="cerberus">
          <Radio value="cerberus">Cerberus</Radio>
          <Radio value="hades">Hades</Radio>
          <Radio value="zeus">Zeus</Radio>
        </RadioGroup>
      </Fieldset>
    </Box>
  )
}
```

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

### Create a Customized Table with Data

Source: https://cerberus.digitalu.design/docs/components/table

This example demonstrates how to create a customized table using the `Table` component from '@cerberus/react'. It includes defining columns and data, and applying custom CSS for styling the table, header cells, and body cells.

```javascript
import { Table, For } from '@cerberus/react'


function CustomizedPreview() {
  const cols = [
    { id: '1', name: 'Cerberus Family' },
    { id: '2', name: 'Alias' },
  ]
  const data = [
    { id: '1', name: 'Cerberus', alias: 'The Three-Headed Dog' },
    { id: '2', name: 'Hades', alias: 'God of the Underworld' },
    { id: '3', name: 'Persephone', alias: 'Queen of the Underworld' },
    { id: '4', name: 'Charon', alias: 'The Ferryman' },
    { id: '5', name: 'Cerberus', alias: 'The Guardian of the Underworld' },
    { id: '6', name: 'Thanatos', alias: 'God of Death' },
  ]


  return (
    <Table.Root
      caption="Customized table"
      css={{
        border: '3px solid',
        borderColor: 'danger.border.initial',
        transform: 'skewX(-10deg)',
      }}
    >
      <Table.Header>
        <Table.Row>
          <For each={cols}>
            {(col) => (
              <Table.HeaderCol
                key={col.id}
                css={{
                  bgColor: 'black',
                  color: 'white',
                  width: '20rem',
                }}
              >
                {col.name}
              </Table.HeaderCol>
            )}
          </For>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <For each={data}>
          {(item) => (
            <Table.Row key={item.id}>
              <Table.Cell
                css={{
                  bgColor: 'gray.200',
                  color: 'black',
                  fontWeight: 'bold',
                }}
              >
                {item.name}
              </Table.Cell>
              <Table.Cell
                css={{
                  bgColor: 'gray.100',
                  color: 'black',
                }}
              >
                {item.alias}
              </Table.Cell>
            </Table.Row>
          )}
        </For>
      </Table.Body>
    </Table.Root>
  )
}

```

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

### Single Date Picker Usage

Source: https://cerberus.digitalu.design/docs/components/date-picker

Example of a controlled single date picker. Ensure to import Field and Box for layout.

```javascript
import {
  DatePicker,
  DatePickerLabel,
  DatePickerInput,
  DatePickerCalendar,
  Field,
} from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function StaticPreview() {
  return (
    <Box w="2/3">
      <Field>
        <DatePicker id="start_date" name="start_date">
          <DatePickerLabel>Start date</DatePickerLabel>
          <DatePickerInput />
          <DatePickerCalendar />
        </DatePicker>
      </Field>
    </Box>
  )
}
```

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

### Initial Data

Source: https://cerberus.digitalu.design/docs/signals/use-query

Illustrates how to provide initial data to the useQuery hook, bypassing the initial fetch and immediately seeding the cache with pre-loaded data. This is useful when data is fetched on the server.

```APIDOC
## Initial Data

If you would like to bypass the initial fetch with pre-loaded data that matches the return of the query factory being used (e.g., parent server component fetch) - add and options Object as the last argument with the property `initialData`.
```

```typescript
'use client'

import { useQuery } from '@cerberus/signals'
import { queryUser } from './queries'
import { type User } from './db'

interface Props {
  id: string
  initialData: User
}

export function UserProfile(props: Props) {
  // 1. Cerberus sees `initialData`, instantly seeds the $O(1) Map,
  // and mounts the component with zero loading spinners or network waterfalls.
  const user = useQuery(queryUser(props.id), { initialData: props.initialData })

  if (!user) return null

  return <h1>{user.name}</h1>
}

```

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

### Configure Vitest

Source: https://cerberus.digitalu.design/docs/components/testing

Configure Vitest in your vite.config.ts file. Set the environment to 'jsdom' and specify a setup file for custom configurations.

```typescript
import { defineConfig } from "vitest/config"


export default defineConfig({
  // ...
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./setup-test.ts",
  },
})

```