Cerberus v0.23 Release

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

4
function ClipboardDemo() {
5
  return (
6
    <Clipboard.Root value="Hello, World!">
7
      <Clipboard.Control asChild>
8
        <HStack gap="md" w="full">
9
          <Clipboard.Label asChild>
10
            <Text as="small" textStyle="label-sm">
11
              Hello, World!
12
            </Text>
13
          </Clipboard.Label>
14

15
          <Clipboard.Trigger asChild>
16
            <IconButton clipboard shape="square" size="sm" rounded="xs">
17
              <Clipboard.Indicator />
18
            </IconButton>
19
          </Clipboard.Trigger>
20
        </HStack>
21
      </Clipboard.Control>
22
    </Clipboard.Root>
23
  )
24
}

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

3
function ClipboardButton() {
4
  return (
5
    <Clipboard.Root value="Hello, World!">
6
      <Clipboard.Control>
7
        <Clipboard.Trigger asChild>
8
          <Button color="action.text.initial">
9
            <Clipboard.CopyText color="currentColor" />
10
            <Clipboard.Indicator />
11
          </Button>
12
        </Clipboard.Trigger>
13
      </Clipboard.Control>
14
    </Clipboard.Root>
15
  )
16
}

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

4
function CollapsibleDemo() {
5
  return (
6
    <HStack h="full" w="17rem">
7
      <Collapsible.Root>
8
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
9
        <Collapsible.Content>
10
          <Box
11
            border="1px solid"
12
            borderColor="page.border.initial"
13
            p="md"
14
            rounded="md"
15
            w="full"
16
          >
17
            Collapsible content goes here.
18
          </Box>
19
        </Collapsible.Content>
20
      </Collapsible.Root>
21
    </HStack>
22
  )
23
}

1
function CollapsibleWithEffect() {
2
  return (
3
    <Collapsible.Root>
4
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
5
      <Collapsible.Content effect="fade">
6
        <Box
7
          border="1px solid"
8
          borderColor="page.border.initial"
9
          p="md"
10
          rounded="md"
11
          w="full"
12
        >
13
          Fades in and out smoothly.
14
        </Box>
15
      </Collapsible.Content>
16
    </Collapsible.Root>
17
  )
18
}