Release - January 27, 2025

Cerberus v0.23 Release

Casey Baggz

Cerberus Admin

We're excited to announce the release of Cerberus v0.23! This update brings powerful new utility components that streamline common interaction patterns, along with important bug fixes that enhance reliability and visual consistency.

This release focuses on empowering developers with essential utility components for clipboard operations and collapsible content.

New Components

Clipboard

Copy text to the clipboard with ease using the new Clipboard component. This component provides an accessible way to copy text with built-in visual feedback and customizable indicators.

Hello, World!

import { Clipboard, IconButton, Text } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function ClipboardDemo() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control asChild>
        <HStack gap="md" w="full">
          <Clipboard.Label asChild>
            <Text as="small" textStyle="label-sm">
              Hello, World!
            </Text>
          </Clipboard.Label>

          <Clipboard.Trigger asChild>
            <IconButton clipboard shape="square" size="sm" rounded="xs">
              <Clipboard.Indicator />
            </IconButton>
          </Clipboard.Trigger>
        </HStack>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

The Clipboard component is completely unstyled by default, giving you full control over its appearance. You can easily compose it with buttons, text, or any other interactive elements.

Button Integration

import { Clipboard, Button } from '@cerberus/react'

function ClipboardButton() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control>
        <Clipboard.Trigger asChild>
          <Button color="action.text.initial">
            <Clipboard.CopyText color="currentColor" />
            <Clipboard.Indicator />
          </Button>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

Collapsible

Show or hide content with smooth animations using the new Collapsible component. Perfect for creating accordions, expandable sections, and progressive disclosure patterns.

import { Collapsible } from '@cerberus/react'
import { Box, HStack } from 'styled-system/jsx'

function CollapsibleDemo() {
  return (
    <HStack h="full" w="17rem">
      <Collapsible.Root>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>
          <Box
            border="1px solid"
            borderColor="page.border.initial"
            p="md"
            rounded="md"
            w="full"
          >
            Collapsible content goes here.
          </Box>
        </Collapsible.Content>
      </Collapsible.Root>
    </HStack>
  )
}

Customizable Effects

Control the animation behavior with the effect prop. You can choose from smooth height transitions or fade effects, or disable animations entirely.

function CollapsibleWithEffect() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content effect="fade">
        <Box
          border="1px solid"
          borderColor="page.border.initial"
          p="md"
          rounded="md"
          w="full"
        >
          Fades in and out smoothly.
        </Box>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}

Bug Fixes & Improvements

SplitButton Type Safety

Fix: SplitButton now has correct TypeScript types, providing better IntelliSense and type checking for improved developer experience.

Dark Mode Contrast Enhancement

Fix: The page.backdrop.initial token for the Cerberus theme in dark mode has been updated to provide improved contrast, ensuring better readability and visual hierarchy in dark mode interfaces.

Upgrading

To upgrade to Cerberus v0.23.0, run:

Terminal

npm run up:cerberus

Terminal

pnpm run up:cerberus

Terminal

bun run up:cerberus

What's Next?

We continue to enhance the Cerberus ecosystem with a focus on developer productivity and accessible design patterns. Coming up:

Enhanced form components
Additional utility components
Performance optimizations
Expanded documentation and examples

Thank you for being part of the Cerberus community! These updates are driven by your feedback and real-world usage patterns.