Cerberus UI Platform | Repository

https://github.com/omnifed/cerberus
Admin
An infra-level UI platform to create cohesion and consistency so teams and agents can build faster,...
Tokens:276,918
Snippets:2,509
Trust Score:7.5
License:Apache-2.0
Update:3 days ago
Show doc for...
Tokens:
Raw
### Start docs dev environment

Source: https://github.com/omnifed/cerberus/blob/main/CONTRIBUTING.md

Run this command from the root directory after pnpm install to start the docs site, which serves as the dev sandbox.

```bash
# ~/cerberus
pnpm start:docs
```

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

### Start and build documentation

Source: https://github.com/omnifed/cerberus/blob/main/WARP.md

Commands to start the documentation website in development mode and build it.

```bash
pnpm run start:docs
```

```bash
pnpm --filter docs run build
```

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

### Create a new component API doc page named `component-name`

Source: https://github.com/omnifed/cerberus/wiki/Prompts

Use this prompt to bootstrap a new component API docs page and setup route meta. Requires adding the `.llms/create-doc-component-page.md` file to the conversation context. Does not create examples or low-level API content.

```bash
Using the `create-doc-component-page` guide, create a new component page named `component-name` to showcase our React ComponentName component
```

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

### Install dependencies with pnpm

Source: https://github.com/omnifed/cerberus/blob/main/README.md

Run this command in the root of the project after forking the repository to install all dependencies, including workspaces.

```bash
pnpm install
```

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

### Install testing dependencies

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/testing.mdx

Install Vitest, jsdom, and Testing Library packages as dev dependencies.

```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://github.com/omnifed/cerberus/blob/main/packages/react/README.md

Install the @cerberus/react package using pnpm.

```bash
pnpm add @cerberus/react
```

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

### Install Data Grid with npm

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/data-grid/overview.mdx

Install the @cerberus/data-grid package using npm. The package is aliased to @cerberus-design/data-grid.

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

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

### Install Cerberus Signals with npm

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/blog/v1-1-release.mdx

Install the @cerberus/signals package using npm, with the alias @cerberus-design/signals.

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

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

### Install @cerberus-design/signals with npm, pnpm, or yarn

Source: https://github.com/omnifed/cerberus/blob/main/packages/signals/README.md

Install the package using your preferred package manager. The commands are alternatives; choose one.

```bash
npm install @cerberus-design/signals
# or
pnpm add @cerberus-design/signals
# or
yarn add @cerberus-design/signals
```

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

### Install Cerberus DataGrid with pnpm

Source: https://github.com/omnifed/cerberus/blob/main/packages/data-grid/README.md

Install the @cerberus/data-grid package using pnpm, aliasing it to the @cerberus-design/data-grid package.

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

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

### Run the docs server with pnpm

Source: https://github.com/omnifed/cerberus/blob/main/README.md

Use this command in the root of the repository to start the documentation server.

```bash
pnpm run start:docs
```

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

### Install @cerberus/react with npm alias

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/overview.mdx

Run this command to install the Components Library, creating an alias `@cerberus/react` to `@cerberus-design/react` to keep imports consistent and avoid versioning issues.

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

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

### transitionDelay prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `transitionDelay` prop to control the delay of a transition. This example sets it to `fast` with a `backgrounds` transition.

```tsx
<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionDelay="fast"
>
  Hover me
</Box>
```

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

### Install @cerberus/preset-elysium-theme with npx jsr add

Source: https://github.com/omnifed/cerberus/blob/main/packages/preset-elysium-theme/README.md

Use this command to add the @cerberus/preset-elysium-theme package to your project. It is the recommended installation method for this preset.

```bash
npx jsr add @cerberus/preset-elysium-theme
```

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

### Run the development server

Source: https://github.com/omnifed/cerberus/blob/main/docs/README.md

Start the Next.js development server using npm, yarn, pnpm, or bun. After running, open http://localhost:3000 to view the result.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Install @cerberus/figma with pnpm

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

Install the package from JSR using pnpm. This is the recommended package manager for JSR packages.

```bash
pnpm add jsr:@cerberus/figma
```

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

### Cerberus Panda Config with createCerberusConfig

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/blog/v1-8-release.mdx

Example configuration for a Cerberus site using createCerberusConfig with multiple theme presets. Includes clean, minify, include, exclude, and presets fields. This is the recommended setup after upgrading to v1.8.

```javascript
import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
import { presetAcheronTheme } from '@cerberus/preset-acheron-theme'
import { presetElysiumTheme } from '@cerberus/preset-elysium-theme'
import { presetOceanusTheme } from '@cerberus/preset-oceanus-theme'

const isProd = process.env.NODE_ENV === 'production'

export default createCerberusConfig({
    clean: true,
    minify: isProd,
    
    include: [
      './node_modules/@cerberus-design/react/**/*.{ts,tsx,js,jsx}',
      './node_modules/@cerberus-design/data-grid/src/components/*.client.{ts,tsx}',
      './mdx-components.tsx',
      './app/**/*.{ts,tsx}',
    ],
    exclude: [],
    
    presets: [
      createCerberusPreset(),
      presetAcheronTheme,
      presetElysiumTheme,
      presetOceanusTheme,
    ],
})
```

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

### Create setup-test.ts for testing environment

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/testing.mdx

Common setup file for Cerberus projects, mocking unimplemented APIs like ResizeObserver, IntersectionObserver, scroll methods, requestAnimationFrame, URL object, and navigator.

```ts
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 })
```

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

### Example: max-height using available-height

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/popover.mdx

This CSS example shows how to limit the content's maximum height to the available viewport height minus 100px, using the `--available-height` variable.

```css
[data-part='content'] {
  max-height: calc(var(--available-height) - 100px);
}
```

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

### Install Cerberus preset with npx jsr add

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/get-started/installation.mdx

Use this command to install the @cerberus/panda-preset package from JSR. It is recommended to use Deno or pnpm for better JSR support, but NPM works with extra configuration.

```bash
npx jsr add @cerberus/panda-preset
```

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

### Use Cq to apply container query styles

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/container-query.mdx

Example of using the `Cq` component with a `name` prop and container-specific responsive styles.

```tsx
import { Box, Cq } from 'styled-system/jsx'

export function UsageDemo() {
  return (
    <Cq name="sidebar">
      <Box
        fontSize={{
          base: 'lg',
          '@sidebar/sm': 'md',
        }}
      />
    </Cq>
  )
}
```

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

### Configure panda.config.ts with an official theme preset

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/get-started/themes.mdx

Install the theme package and update panda.config.ts to include the preset and its theme name in staticCss. The example uses the acheron theme, but the same pattern applies to other official presets.

```ts
import { defineConfig } from '@pandacss/dev'
import { cerberusPreset, cerberusConfig } from '@cerberus/panda-preset'
import { acheronTheme, getAcheronThemeName } from '@cerberus/preset-acheron-theme'

export default defineConfig({
  ...cerberusConfig,

  include: ['./src/**/*.{ts,tsx,js,jsx}'],
  exclude: [],

  presets: [cerberusPreset(), acheronTheme],

  staticCss: {
    themes: ['cerberus', getAcheronThemeName()],
  },
})
```

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

### Setup EnvironmentProvider for iframe

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/environment.mdx

Render the EnvironmentProvider inside a Frame component to provide environment context to all Ark UI components. This is the basic setup for custom environments like iframes, Shadow DOM, or Electron.

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

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

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

### Development workflows

Source: https://github.com/omnifed/cerberus/blob/main/WARP.md

Commands for generating PandaCSS files, running a single test file, and starting watch mode.

```bash
pnpm --filter @cerberus-design/react run prepare
```

```bash
pnpm --filter docs run prepare
```

```bash
bun test tests/path/to/specific.test.ts
```

```bash
pnpm --filter docs run dev
```

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

### transitionDuration prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `transitionDuration` prop to control the duration of a transition. This example sets it to `fast` with a `backgrounds` transition.

```tsx
<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionDuration="fast"
>
  Hover me
</Box>
```

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

### Prompt to use Context7 in Cursor

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/get-started/context-7.mdx

Add 'use context7' to your prompt in Cursor to pull up-to-date, version-specific documentation and code examples directly into your AI coding assistant. This example shows a prompt for creating a Next.js middleware that checks for a valid JWT in cookies and redirects unauthenticated users to '/login'.

```text
Create a Next.js middleware that checks for a valid JWT in cookies and redirects unauthenticated users to `/login`. use context7
```

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

### withRecipe primitive

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/cerberus-factory.mdx

Creates a Cerberus component with a specific recipe applied. This example creates a button with the button recipe styles.

```tsx
import { cerberus, createCerberusPrimitive } from '@cerberus/react'
import { button } from 'styled-system/recipes'

const { withRecipe } = createCerberusPrimitive(button)
const Button = withRecipe('button')

function Example() {
  return <Button css={{ color: 'blue' }}>Click me</Button>
}
```

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

### animationDelay prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `animationDelay` prop to control the delay of an animation. This example sets it to `fast` with the `bounce` animation.

```tsx
<Box animation="bounce" animationDelay="fast" />
```

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

### Fade Example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/swap.mdx

Swaps between two icons with a fade animation. Uses the `swap` prop to toggle between `on` and `off` indicators.

```tsx
'use client'

import { Button, Swap } from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import { CheckIcon, XIcon } from 'lucide-react'
import styles from 'styles/swap.module.css'

export const Fade = () => {
  const [swapped, setSwapped] = useSignal(false)

  return (
    <Button onClick={() => setSwapped((prev) => !prev)}>
      <Swap.Root swap={swapped}>
        <Swap.Indicator type="on" className={styles.FadeIndicator}>
          <CheckIcon />
        </Swap.Indicator>
        <Swap.Indicator type="off" className={styles.FadeIndicator}>
          <XIcon />
        </Swap.Indicator>
      </Swap.Root>
    </Button>
  )
}
```

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

### animation prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `animation` prop to control the animation of an element. This example applies the `bounce` animation.

```tsx
<Box animation="bounce" />
```

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

### transitionTimingFunction prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `transitionTimingFunction` prop to control the timing function of a transition. This example sets it to `ease-in-out` with a `backgrounds` transition.

```tsx
<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionTimingFunction="ease-in-out"
>
  Hover me
</Box>
```

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

### Install Canary Release of @cerberus-design/react

Source: https://github.com/omnifed/cerberus/blob/main/CONTRIBUTING.md

Install the latest canary (pre-release) version of the @cerberus-design/react package from npm. This is used to test merged features before the official stable release.

```bash
# Example
pnpm install @cerberus-design/react@next
```

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

### Configure CerberusProvider with makeSystemConfig and defineIcons

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/overview.mdx

Sets up the Cerberus theming system by defining icons and creating a system config, then wrapping children in the CerberusProvider. This is the standard setup for a React application using Cerberus.

```typescript
'use client'

import { CerberusProvider, defineIcons, makeSystemConfig } from '@cerberus-design/react'
import {
  Calendar,
  Checkmark,
  CheckmarkOutline,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Close,
  CloudUpload,
  Information,
  Restart,
  TrashCan,
  UserFilled,
  Warning,
  WarningAlt,
  WarningFilled,
} from '@carbon/icons-react'
import type { PropsWithChildren } from 'react'

const icons = defineIcons({
  accordionIndicator: ChevronDown,
  avatar: UserFilled,
  calendar: Calendar,
  calendarPrev: ChevronLeft,
  calendarNext: ChevronRight,
  close: Close,
  confirmModal: Information,
  delete: TrashCan,
  promptModal: Information,
  waitingFileUploader: CloudUpload,
  infoNotification: Information,
  successNotification: CheckmarkOutline,
  warningNotification: WarningAlt,
  dangerNotification: WarningFilled,
  invalid: WarningFilled,
  invalidAlt: Warning,
  redo: Restart,
  selectArrow: ChevronDown,
  selectChecked: Checkmark,
  toggleChecked: Checkmark,
})

const config = makeSystemConfig({
  icons,
})

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

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

### Configure Vitest in vite.config.ts

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/testing.mdx

Create vite.config.ts to configure Vitest with globals, jsdom environment, and setup file.

```ts
import { defineConfig } from 'vitest/config'

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

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

### Background Image with bgImage and Gradients

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use `bgImage` or `backgroundImage` to set the background image. The example shows a URL, radial and linear gradients, and a token reference in a gradient.

```tsx
<Box bgImage="url(...)" />
<Box bgImage="radial-gradient(circle, #0000 45%, #000f 48%)" />
<Box bgImage="linear-gradient(black, white)" />

// with token reference
<Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />
```

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

### Create system config with makeSystemConfig

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/overview.mdx

After defining a config, pass it to makeSystemConfig to create low-level options that become internally available to components. The example shows a config with an icons property.

```typescript
const icons = defineIcons({...})

const config = makeSystemConfig({
  icons,
})
```

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

### Flip Example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/swap.mdx

Adds a 3D flip effect by setting `perspective` on the root and using `rotateY` keyframes on the indicators.

```tsx
import { Button, Swap } from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import { PauseIcon, PlayIcon } from 'lucide-react'
import styles from 'styles/swap.module.css'

export const Flip = () => {
  const [swapped, setSwapped] = useState(false)

  return (
    <Button onClick={() => setSwapped((prev) => !prev)}>
      <Swap.Root swap={swapped} style={{ perspective: '200px' }}>
        <Swap.Indicator type="on" className={styles.FlipIndicator}>
          <PlayIcon />
        </Swap.Indicator>
        <Swap.Indicator type="off" className={styles.FlipIndicator}>
          <PauseIcon />
        </Swap.Indicator>
      </Swap.Root>
    </Button>
  )
}
```

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

### Background Size with bgSize

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use the `bgSize` or `backgroundSize` prop to control the size of a background image. The example sets it to `cover`.

```tsx
<Box bgSize="cover" bgImage="url(...)" />
```

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

### Install @cerberus/preset-cerberus-theme with npx jsr add

Source: https://github.com/omnifed/cerberus/blob/main/packages/preset-cerberus-theme/README.md

Use this command to add the Cerberus theme preset package to your project. It requires npx and the jsr registry.

```bash
npx jsr add @cerberus/preset-cerberus-theme
```

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

### Rotate Example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/swap.mdx

Rotates the indicators in and out with a spin transition.

```tsx
import { Swap } from '@cerberus/react'
import { MoonIcon, SunIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/swap.module.css'

export const Rotate = () => {
  const [swapped, setSwapped] = useState(false)

  return (
    <button
      type="button"
      className={styles.Button}
      onClick={() => setSwapped((prev) => !prev)}
    >
      <Swap.Root swap={swapped}>
        <Swap.Indicator type="on" className={styles.RotateIndicator}>
          <SunIcon />
        </Swap.Indicator>
        <Swap.Indicator type="off" className={styles.RotateIndicator}>
          <MoonIcon />
        </Swap.Indicator>
      </Swap.Root>
    </button>
  )
}
```

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

### Install @cerberus/preset-acheron-theme with npx jsr add

Source: https://github.com/omnifed/cerberus/blob/main/packages/preset-acheron-theme/README.md

Adds the Acheron theme preset package to your project using the JSR package manager.

```bash
npx jsr add @cerberus/preset-acheron-theme
```

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

### Correct native expect helper usage

Source: https://github.com/omnifed/cerberus/blob/main/tests/README.md

This example works because it uses the native Bun expect helper instead of the Jest-specific one.

```ts
expect(screen.queryByText(/hello world/i)).toBeTruthy()
```

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

### borderInlineStartWidth

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/border.mdx

Applies border width to the inline start side, adapting to text direction.

```APIDOC
## borderInlineStartWidth

### Description
Applies border width to the inline start side, adapting to text direction.

### Usage
```tsx
<Box borderInlineStartWidth="1px" />
```

### Props
- **borderInlineStartWidth** (string) - Required - CSS property: `border-{start+end}-width`
```

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

### Access locale and direction with useLocaleContext

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/locale.mdx

Use the useLocaleContext hook to get the current locale and direction (dir) settings. The example returns a JSON string of the values.

```tsx
import { useLocaleContext } from '@cerberus/react'

export const Usage = () => {
  const { locale, dir } = useLocaleContext()

  return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}
```

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

### Basic Presence usage

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/presence.mdx

By default, the child component starts hidden and remains hidden after the present state is toggled off. This example uses a button to toggle the present state.

```tsx
'use client'

import { Presence } from '@cerberus/react'
import { useSignal } from '@cerberus/signals'

export const Basic = () => {
  const [present, setPresent] = useSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present}>Hidden and Hidden</Presence>
    </>
  )
}
```

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

### Available Size: Example max-height using available-height

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/combobox.mdx

Shows how to use the `--available-height` CSS variable to set a max-height on the combobox content, ensuring it doesn't exceed the available viewport height.

```css
[data-scope='combobox'][data-part='content'] {
  max-height: calc(var(--available-height) - 100px);
}
```

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

### withSlotRecipe primitive

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/cerberus-factory.mdx

Creates a Cerberus component with a specific recipe applied at the slot level. This example creates a field component with root, label, and input slots.

```tsx
import { cerberus, createCerberusPrimitive } from '@cerberus/react'
import { field } from 'styled-system/recipes/slots'

const { withSlotRecipe } = createCerberusPrimitive(field)

const Field = withSlotRecipe('div', 'root')
const FieldLabel = withSlotRecipe('label', 'label')
const FieldInput = withSlotRecipe('input', 'input')

function Example() {
  return (
    <Field css={{ color: 'blue' }}>
      <FieldLabel>Label</FieldLabel>
      <FieldInput type="text" />
    </Field>
  )
}
```

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

### Create a new slot recipe named <arkComponent>

Source: https://github.com/omnifed/cerberus/wiki/Prompts

Use this prompt to bootstrap a new slot recipe API with initial styles and variants. Requires adding the `.llms/create-preset-recipe.md` file to the conversation context. Does not set up the component API or expose the API.

```bash
Using the `create-preset-recipe` guide, create a new slot recipe named `<arkComponent>`
```

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

### Logical axis padding with start and end props

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/spacing.mdx

Use `paddingStart`/`ps` and `paddingEnd`/`pe` to apply padding based on text direction. These map to `padding-inline-start` and `padding-inline-end`.

```tsx
<Box paddingStart="8" />
<Box ps="8" /> // shorthand

<Box paddingEnd="8" />
<Box pe="8" /> // shorthand
```

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

### Configure panda.config.ts with acheronTheme preset

Source: https://github.com/omnifed/cerberus/blob/main/packages/preset-acheron-theme/README.md

Example configuration for panda.config.ts that imports and includes the Acheron theme preset along with the Cerberus preset and config.

```typescript
// panda.config.ts
import { defineConfig } from '@pandacss/dev'
import { cerberusPreset, cerberusConfig } from '@cerberus/panda-preset'
import { acheronTheme } from '@cerberus/preset-acheron-theme'

export default defineConfig({
  ...cerberusConfig,

  include: ['./src/**/*.{ts,tsx,js,jsx}'],
  exclude: [],

  presets: [cerberusPreset(), acheronTheme],
})
```

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

### Create a new React component API named `ark-ui-api-name`

Source: https://github.com/omnifed/cerberus/wiki/Prompts

Use this prompt to bootstrap a new component API directory and setup primitives and parts. Requires adding the `.llms/create-react-component.md` file to the conversation context. Does not set up the recipe or expose the API.

```bash
Using the `create-react-component` guide, create a new component named `ark-ui-api-name`
```

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

### Caveat: compoundVariants with responsive values (not working)

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/recipes.mdx

Shows an example that does not work: using `compoundVariants` with responsive values. The `size` prop uses an object with breakpoints, which is not supported.

```tsx
<Button size={{ base: 'sm', md: 'lg' }} visual="outline">
  Click Me
</Button>
```

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

### Get today's date with today and getLocalTimeZone

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/date-picker.mdx

Use the today function to get the current date in a format the DatePicker understands. You can pass a time zone string or use getLocalTimeZone() to get the local time zone.

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

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

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

### Create a Changeset with pnpm

Source: https://github.com/omnifed/cerberus/blob/main/CONTRIBUTING.md

Run this command at the repository root to create a changeset. The CLI prompts for package selection, SemVer bump type, and a description, then generates a Markdown file in the .changeset folder.

```bash
pnpm changeset
```

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

### Run npm prepare

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/layer-styles.mdx

Run the prepare script to regenerate the Panda CSS output after updating the theme.

```bash
npm run prepare
```

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

### Install @cerberus/preset-oceanus-theme with npx jsr add

Source: https://github.com/omnifed/cerberus/blob/main/packages/preset-oceanus-theme/README.md

Use this bash command to add the @cerberus/preset-oceanus-theme package to your project. It is the official Panda-CSS preset for the Oceanus theme.

```bash
npx jsr add @cerberus/preset-oceanus-theme
```

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

### Build and clean packages

Source: https://github.com/omnifed/cerberus/blob/main/WARP.md

Commands to build and clean the React components and Panda preset packages.

```bash
pnpm --filter @cerberus-design/react run build
```

```bash
pnpm --filter @cerberus/panda-preset run build
```

```bash
pnpm --filter @cerberus-design/react run clean
```

```bash
pnpm --filter @cerberus/panda-preset run clean
```

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

### Background Gradient with bgGradient, gradientFrom, gradientTo

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use `bgGradient` with `gradientFrom` and `gradientTo` to create a background gradient based on color stops. The example uses `to-r` direction.

```tsx
<Box bgGradient="to-r" gradientFrom="red.200" gradientTo="blue.200" />
```

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

### Eager Execution Example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/show.mdx

Shows the default eager execution pattern where the child component's code runs even if the condition is false.

```typescript
<Show when={isLoggedIn}>
  <DashboardThatFetchesData />
</Show>
```

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

### Access environment context with useEnvironmentContext

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/environment.mdx

Use the useEnvironmentContext hook to access the RootNode, Document, and Window. This example retrieves the root node and displays it as JSON.

```tsx
import { useEnvironmentContext } from '@cerberus/react'

export const Usage = () => {
  const { getRootNode } = useEnvironmentContext()

  return <pre>{JSON.stringify(getRootNode(), null, 2)}</pre>
}
```

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

### animationDuration prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `animationDuration` prop to control the duration of an animation. This example sets it to `fast` with the `bounce` animation.

```tsx
<Box animation="bounce" animationDuration="fast" />
```

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

### Setup LocaleProvider with locale prop

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/locale.mdx

Wrap your app with LocaleProvider and set the locale prop to a locale string like 'de-DE'. If no LocaleProvider is set up, the default locale is 'en-US' and direction is 'ltr'.

```tsx
import { LocaleProvider } from '@cerberus/react'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}
```

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

### Import Cq component

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/container-query.mdx

Import the `Cq` component from the styled-system package.

```ts
import { Cq } from 'styled-system/jsx'
```

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

### animationTimingFunction prop example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/transitions.mdx

Use the `animationTimingFunction` prop to control the timing function of an animation. This example sets it to `ease-in-out` with the `bounce` animation.

```tsx
<Box animation="bounce" animationTimingFunction="ease-in-out" />
```

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

### Import CerberusProvider, makeSystemConfig, and defineIcons

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/cerberus-context.mdx

Import the required functions from the '@cerberus/react' package to use the Cerberus Context.

```ts
import { CerberusProvider, makeSystemConfig, defineIcons } from '@cerberus/react'
```

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

### Run all tests with coverage

Source: https://github.com/omnifed/cerberus/blob/main/tests/README.md

Recommended command to run all tests with a coverage report.

```bash
pnpm run test:ci
```

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

### Define theme with breakpoints, tokens, semanticTokens, and keyframes

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/overview.mdx

Shows how to define the system theme, including breakpoints, primitive tokens, semantic tokens, and keyframe animations.

```ts
export default createCerberusConfig({
  theme: {
    breakpoints: {
      sm: '320px',
      md: '768px',
      lg: '960px',
      xl: '1200px',
    },
    tokens: {
      colors: {
        red: '#EE0F0F',
      },
    },
    semanticTokens: {
      colors: {
        customRed: { value: '{colors.red}' },
      },
    },
    keyframes: {
      spin: {
        from: { transform: 'rotate(0deg)' },
        to: { transform: 'rotate(360deg)' },
      },
    },
  },
})
```

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

### Scale Example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/swap.mdx

Scales the indicators up and down for a pop-in effect.

```tsx
import { Swap } from '@cerberus/react'
import { Volume2Icon, VolumeXIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/swap.module.css'

export const Scale = () => {
  const [swapped, setSwapped] = useState(false)

  return (
    <button
      type="button"
      className={styles.Button}
      onClick={() => setSwapped((prev) => !prev)}
    >
      <Swap.Root swap={swapped}>
        <Swap.Indicator type="on" className={styles.ScaleIndicator}>
          <Volume2Icon />
        </Swap.Indicator>
        <Swap.Indicator type="off" className={styles.ScaleIndicator}>
          <VolumeXIcon />
        </Swap.Indicator>
      </Swap.Root>
    </button>
  )
}
```

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

### Import createMutation and useMutation

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/signals/create-mutation.mdx

Import the createMutation and useMutation functions from the '@cerberus/signals' package.

```tsx
import { createMutation, useMutation } from '@cerberus/signals'
```

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

### today

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/date-picker.mdx

Gets the current date in a format that the DatePicker can understand.

```APIDOC
## today

### Description
Gets the current date in a format that the DatePicker can understand.

### Usage
```ts
import { today, getLocalTimeZone } from '@cerberus/react'

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

### Parameters
- **timeZone** (string) - Required - The IANA time zone string (e.g., 'America/New_York').

### Returns
- **Date** - The current date in the specified time zone.

### Notes
- See the [today documentation](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) for more details.
```

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

### Import Grid

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/grid.mdx

Import the Grid component from 'styled-system/jsx'.

```APIDOC
## Import

```ts
import { Grid } from 'styled-system/jsx'
```
```

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

### Apply margin on logical axes with `marginStart` and `marginEnd`

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/spacing.mdx

Use `marginStart` and `marginEnd` (or shorthands `ms` and `me`) to apply margin on the logical axis based on text direction.

```tsx
<Box marginStart="8" />
<Box ms="8" /> // shorthand

<Box marginEnd="8" />
<Box me="8" /> // shorthand
```

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

### fileNodesMixin

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

A mixin that adds functionality to get file nodes from a Figma file.

```APIDOC
## fileNodesMixin

### Description
A mixin that provides the ability to get file nodes from a Figma file.

### Usage
Include this mixin in the `mixins` array when calling `figma`.

### Example
```typescript
import { figma, fileNodesMixin } from '@cerberus/figma'

const api = figma(token, file, [fileNodesMixin])
```
```

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

### publishedVarsMixin

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

A mixin that adds functionality to get published variables from a Figma file.

```APIDOC
## publishedVarsMixin

### Description
A mixin that provides the ability to get published variables from a Figma file.

### Usage
Include this mixin in the `mixins` array when calling `figma`.

### Example
```typescript
import { figma, publishedVarsMixin } from '@cerberus/figma'

const api = figma(token, file, [publishedVarsMixin])
```
```

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

### Basic usage of figma()

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

Import the figma function and create an API instance with a token and file ID. The token is read from the FIGMA_ACCESS_TOKEN environment variable.

```typescript
import { figma } from '@cerberus/figma'

const token = process.env.FIGMA_ACCESS_TOKEN
const file = 'MY_FILE_ID'

const api = figma(token, file)
```

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

### figma(token, file, mixins?)

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

Creates a Figma API client instance. The function takes a Figma access token, a file ID, and an optional array of mixins to extend the API.

```APIDOC
## figma(token, file, mixins?)

### Description
Creates a Figma API client instance for fetching data from Figma.

### Signature
```typescript
declare figma(token: string, file: string, mixins?: Mixin[]): FigmaAPI;
```

### Parameters
- **token** (string) - Required - Figma access token
- **file** (string) - Required - Figma file ID
- **mixins** (Mixin[]) - Optional - Array of mixins to add to the API

### Usage Example
```typescript
import { figma } from '@cerberus/figma'

const token = process.env.FIGMA_ACCESS_TOKEN
const file = 'MY_FILE_ID'

const api = figma(token, file)
```

### Return Value
Returns a `FigmaAPI` object that provides methods for interacting with Figma data.
```

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

### localVarsMixin

Source: https://github.com/omnifed/cerberus/blob/main/packages/figma/README.md

A mixin that adds functionality to get local variables from a Figma file.

```APIDOC
## localVarsMixin

### Description
A mixin that provides the ability to get local variables from a Figma file.

### Usage
Include this mixin in the `mixins` array when calling `figma`.

### Example
```typescript
import { figma, localVarsMixin } from '@cerberus/figma'

const api = figma(token, file, [localVarsMixin])
```
```

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

### borderStartColor / borderInlineStartColor

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/border.mdx

Applies border color to the start side based on text direction (logical property).

```APIDOC
## borderStartColor / borderInlineStartColor

### Description
Applies border color to the start side based on text direction (logical property).

### Usage
```tsx
<Box borderStartColor="red.400" />
```

### Prop
- **borderStartColor** (string) - Required - The color token to apply to the start border.
- **borderInlineStartColor** (string) - Required - Alias for borderStartColor.

### CSS Property
- `border-{start,end}-color`

### Token Category
- `colors`
```

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

### Background Position with bgPosition

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use `bgPosition` to control the position of a background image. The example sets it to `center`.

```tsx
<Box bgImage="url(...)" bgPosition="center" />
```

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

### Multi-theme support with presetAcheronTheme

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/get-started/installation.mdx

Configure multiple themes using presetAcheronTheme and getThemeName helpers. Includes staticCss themes for cerberus and the custom theme.

```ts
import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
import { presetAcheronTheme, getThemeName } from '@cerberus/preset-acheron-theme'

export default createCerberusConfig({
  clean: true,
  preflight: true,

  presets: [createCerberusPreset(), presetAcheronTheme],

  include: [
    './node_modules/@cerberus/react/dist/panda.buildinfo.json',
    './app/**/*.{ts,tsx,js,jsx}',
  ],

  staticCss: {
    themes: ['cerberus', getThemeName()],
  },
})
```

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

### transformFiles with image compression

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/file-uploader.mdx

Use the transformFiles prop to process files before they are added to the accepted files list. This example compresses image files to approximately 200KB using the image-conversion library, returning the original file if compression fails or for non-image files.

```tsx
import { FileUploader } from '@cerberus/react/file-upload'
import { compressAccurately } from 'image-conversion'

function FileTransformationsDemo() {
  const transformFiles = async (files: File[]) => {
    return Promise.all(
      files.map(async (file) => {
        if (file.type.startsWith('image/')) {
          try {
            // Compress image to ~200KB
            const blob = await compressAccurately(file, 200)
            return new File([blob], file.name, { type: blob.type })
          } catch (error) {
            console.error('Compression failed for:', file.name, error)
            return file
          }
        }
        return file // Return non-image files as-is
      }),
    )
  }

  return <FileUploader accept="image/*" maxFiles={5} transformFiles={transformFiles} />
}
```

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

### Background Clip with bgClip

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use the `bgClip` prop to control the clipping of a background image. The example sets it to `border-box`.

```tsx
<Box bgClip="border-box" bgImage="url(...)" />
```

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

### Background Attachment with bgAttachment

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use the `bgAttachment` prop to control the attachment of a background image. The example sets it to `fixed`.

```tsx
<Box bgAttachment="fixed" bgImage="url(...)" />
```

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

### Import PromptModal and usePromptModal

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/prompt-modal.mdx

Import the PromptModal component and its hook from the '@cerberus/react' package.

```ts
import { PromptModal, usePromptModal } from '@cerberus/react'
```

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

### Update panda.config.ts include array

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/overview.mdx

After installing the package, add the path to the `panda.buildinfo.json` file to the `include` array in your `panda.config.ts` file.

```typescript
export default createCerberusConfig({
  include: [
    './node_modules/@cerberus/react/dist/panda.buildinfo.json',
    // ...your other stuff,
  ],
})
```

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

### tsconfig.json path alias for styled-system

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/get-started/installation.mdx

Required if baseUrl is not set to root. Add a path alias for styled-system/* to avoid build errors.

```json
{
  "compilerOptions": {
    "baseUrl": "."
    // ...your config options
  }
}
```

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

### Import Stack, HStack, VStack

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/stack.mdx

Import the Stack components from the styled-system/jsx module.

```APIDOC
## Import

```ts
import { Stack, HStack, VStack } from 'styled-system/jsx'
```
```

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

### strictTokens usage example

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/overview.mdx

Shows that using a non-token color throws a TS error, while using a defined token works.

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

// ✅ This will work
<Box color="page.text.initial">Hello World</Box>
```

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

### createStoreContext

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/signals/create-store-context.mdx

Creates a Context-based signal store provider and a hook to access the store. It accepts an optional name for the context display name and returns an object with StoreProvider and useStore.

```APIDOC
## createStoreContext

### Description
Creates a Context-based signal store provider and a hook to access the store. It accepts an optional name for the context display name and returns an object with StoreProvider and useStore.

### Parameters
- **name** (string) - Optional - The name of the store to assign as the context display name.

### Returns
- **StoreProvider** (ElementType) - The React Context Provider for the store.
- **useStore** (() => T) - A function to get the store context.

### Example
```jsx
import { createStoreContext } from '@cerberus/signals'

const { StoreProvider, useStore } = createStoreContext<MyStore>()

function App() {
  return (
    <StoreProvider createStore={myStore}>
      <Child />
    </StoreProvider>
  )
}

function Child() {
  const store = useStore()
  return <ReactiveText value={store.someSignal} />
}
```
```

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

### Background Repeat with bgRepeat

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use the `bgRepeat` or `backgroundRepeat` prop to control the repeat of a background image. The example sets it to `no-repeat`.

```tsx
<Box bgRepeat="no-repeat" bgImage="url(...)" />
```

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

### Background Origin with bgOrigin

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/background.mdx

Use the `bgOrigin` or `backgroundOrigin` prop to control the origin of a background image. The example sets it to `border-box`.

```tsx
<Box bgOrigin="border-box" bgImage="url(...)" />
```

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

### Import Grid from styled-system

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/grid.mdx

Import the Grid component from the styled-system package.

```ts
import { Grid } from 'styled-system/jsx'
```

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

### Import Wrap and WrapItem

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/wrap.mdx

Import the Wrap and WrapItem components from 'styled-system/jsx'.

```ts
import { Wrap, WrapItem } from 'styled-system/jsx'
```

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

### Import Wrap and WrapItem

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/wrap.mdx

Import the Wrap and WrapItem components from the styled-system/jsx module.

```APIDOC
## Import

```ts
import { Wrap, WrapItem } from 'styled-system/jsx'
```
```

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

### Test a component using custom render

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/testing.mdx

Example test using the custom render function to test a Button component.

```tsx
import { Button } from '@cerberus/react'
import { render } from './testing/render'

test('renders a button', () => {
  render(<Button>Click me</Button>)
  expect(screen.getByText('Click me')).toBeInTheDocument()
})
```

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

### Defining custom shadow tokens in theme configuration

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/theming/shadows.mdx

Shows how to extend the theme with custom shadow tokens (`custom` and `glow`) using `createCerberusConfig` and `createCerberusPreset` from `@cerberus/panda-preset`.

```ts
import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'

export default createCerberusConfig({
  presets: [createCerberusPreset()],

  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],

  theme: {
    extend: {
      tokens: {
        shadows: {
          custom: {
            value: '0 4px 8px rgba(0, 0, 0, 0.1)',
          },
          glow: {
            value: '0 0 20px rgba(59, 130, 246, 0.5)',
          },
        },
      },
    },
  },
})
```

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

### Import Menu primitives from @cerberus/react

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/menu.mdx

Import the Menu component and its primitives from the @cerberus/react package. This is the starting point for using the Menu component.

```tsx
import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuGroupLabel,
  MenuSeparator,
} from '@cerberus/react'
```

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

### Import Stack, HStack, VStack

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/components/stack.mdx

Import the Stack components from 'styled-system/jsx'.

```ts
import { Stack, HStack, VStack } from 'styled-system/jsx'
```

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

### Object syntax for responsive styles

Source: https://github.com/omnifed/cerberus/blob/main/docs/content/docs/styling/responsive-design.mdx

Apply responsive conditions directly to a style property using an object with `base` and breakpoint keys. This is a more concise syntax than using separate props.

```diff
<Text
-   fontWeight="medium"
-   lg={{ fontWeight: 'bold' }}
+   fontWeight={{ base: 'medium', lg: 'bold' }}
>
  Text
</Text>
```
Tokens:
Raw