Cerberus v0.22 Release

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

function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </ButtonGroup>
  )
}

import { Button, ButtonGroup, IconButton } from '@cerberus/react'
import { ChevronDown } from '@carbon/icons-react'
import { HStack } from 'styled-system/jsx'

function AttachedButtonGroupDemo() {
  return (
    <HStack justify="center" w="full">
      <ButtonGroup layout="attached">
        <Button>Main action</Button>
        <IconButton ariaLabel="View options" shape="square" usage="filled">
          <ChevronDown />
        </IconButton>
      </ButtonGroup>

      <ButtonGroup layout="attached">
        <Button usage="outlined">Main action</Button>
        <IconButton ariaLabel="View options" shape="square" usage="outlined">
          <ChevronDown />
        </IconButton>
      </ButtonGroup>
    </HStack>
  )
}

import { SplitButton, MenuItem } from '@cerberus/react'
import { Save, Download } from '@carbon/icons-react'

function SplitButtonDemo() {
  return (
    <SplitButton actionText="Copy">
      <MenuItem value="save">
        <Save size={16} />
        Save
      </MenuItem>
      <MenuItem value="save_as">
        <Save size={16} />
        Save As
      </MenuItem>
      <MenuItem value="export">
        <Download size={16} />
        Export
      </MenuItem>
    </SplitButton>
  )
}

import { Field, Input } from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'

function HiddenLabelFields() {
  return (
    <Box w="1/2">
      <VStack alignItems="flex-start" gap="lg" w="full">
        <Field
          label="Search something"
          helperText="Label is hidden but accessible to screen readers"
          hideLabel
        >
          <Input name="search" type="search" placeholder="Type to search..." />
        </Field>
        <Field
          label="Global search"
          hideLabel
          required
        >
          <Input name="global-search" type="search" placeholder="Search the entire site..." />
        </Field>
      </VStack>
    </Box>
  )
}

import { useCTAModal, createCTAModalActions, Field, Input, Textarea } from '@cerberus/react'
import { VStack } from 'styled-system/jsx'

function CTAWithCustomContent() {
  const { show } = useCTAModal()

  const handleClick = useCallback(() => {
    show({
      heading: 'Create New Item',
      content: (
        <VStack alignItems="flex-start" gap="lg" w="full">
          <Field label="Name">
            <Input placeholder="e.g., Cerberus" />
          </Field>
          <Field label="Description">
            <Textarea placeholder="e.g., Cerberus is a design system..." />
          </Field>
        </VStack>
      ),
      actions: createCTAModalActions([
        {
          text: 'Create',
          handleClick: () => alert('Created'),
        },
        {
          text: 'Cancel',
          handleClick: () => {},
        },
      ]),
    })
  }, [show])

  return <Button onClick={handleClick}>Create Item</Button>
}

import { useConfirmModal } from '@cerberus/react'

function ConfirmWithoutAvatar() {
  const confirm = useConfirmModal()

  const handleConfirm = useCallback(async () => {
    const userConsent = await confirm.show({
      heading: 'Confirm Action',
      description: 'Are you sure you want to proceed?',
      actionText: 'Yes, proceed',
      cancelText: 'Cancel',
      showAvatar: false, // Hide the avatar
    })

    if (userConsent) {
      // Handle confirmed action
    }
  }, [confirm])

  return <Button onClick={handleConfirm}>Confirm Action</Button>
}