@bettercms-ai/kit 0.1.0

package/src/core/primitives/button/styles.ts

@@ -0,0 +1,117 @@
+import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
+
+/**
+ * @internal
+ */
+export function buttonBaseStyles(
+  props: {$width?: ButtonWidth} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$width} = props
+  const {style} = getTheme_v2(props.theme)
+
+  return css`
+    ${style?.button};
+
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+    vertical-align: top;
+
+    ${$width === 'fill' &&
+    css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `
+}
+
+function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+  return boxShadows.filter(Boolean).join(',')
+}
+
+/**
+ * @internal
+ */
+export function buttonColorStyles(
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
+): CSSObject[] {
+  const {$mode} = props
+  const {button, color: baseColor, style} = getTheme_v2(props.theme)
+  const shadow = props.$mode === 'ghost'
+  const mode = baseColor.button[$mode] || baseColor.button.default
+  const color = mode[props.$tone] || mode.default
+  const border = {
+    width: button.border.width,
+    color: 'var(--card-border-color)',
+  }
+  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
+  const defaultBoxShadow = undefined
+
+  return [
+    _cardColorStyle(baseColor, color.enabled),
+    {
+      'backgroundColor': 'var(--card-bg-color)',
+      'color': 'var(--card-fg-color)',
+      'boxShadow': focusRingBorderStyle(border),
+      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
+      "&:not([data-disabled='true'])": {
+        'boxShadow': combineBoxShadow(
+          focusRingBorderStyle(border),
+          shadow ? defaultBoxShadow : undefined,
+        ),
+        '&:focus': {
+          boxShadow: focusRingStyle({
+            base: baseColor,
+            border: {width: 2, color: baseColor.bg},
+            focusRing: button.focusRing,
+          }),
+        },
+        '&:focus:not(:focus-visible)': {
+          boxShadow: combineBoxShadow(
+            focusRingBorderStyle(border),
+            shadow ? defaultBoxShadow : undefined,
+          ),
+        },
+        '@media (hover: hover)': {
+          '&:hover': _cardColorStyle(baseColor, color.hovered),
+          '&:active': _cardColorStyle(baseColor, color.pressed),
+          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
+        },
+        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
+      },
+    },
+    style?.button?.root,
+  ].filter(Boolean) as CSSObject[]
+}

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -0,0 +1,25 @@
+import {Card, Container, Flex, Stack, Text} from '@bettercms-ai/kit'
+import {THEME_COLOR_CARD_TONES} from '@bettercms-ai/kit/theme'
+
+export default function AllTonesStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={3}>
+          {THEME_COLOR_CARD_TONES.map((tone) => (
+            <Card
+              key={tone}
+              padding={3}
+              radius={2}
+              shadow={2}
+              style={{textAlign: 'center'}}
+              tone={tone}
+            >
+              <Text size={1}>{tone}</Text>
+            </Card>
+          ))}
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -0,0 +1,107 @@
+import {Box, Card, Container, Flex, Grid, Stack, Text} from '@bettercms-ai/kit'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function AsButtonStory() {
+  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container>
+        <Grid columns={3} gap={2}>
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Enabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Disabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  disabled
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Selected
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -0,0 +1,27 @@
+import {Card, Flex, Text} from '@bettercms-ai/kit'
+import {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, req, ...restProps} = props
+
+  return (
+    <a data-required={req} {...restProps} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  const props = {href: '#'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="example">
+        <Text size={1}>As component</Text>
+      </Card>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -0,0 +1,26 @@
+import {Card, Flex, Stack, Text} from '@bettercms-ai/kit'
+import {THEME_COLOR_CARD_TONES} from '@bettercms-ai/kit/theme'
+
+export default function CheckeredStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Stack space={1}>
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card
+            __unstable_checkered
+            border
+            key={tone}
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/index.ts

@@ -0,0 +1,18 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/card',
+  title: 'Card',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+  ],
+})

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -0,0 +1,30 @@
+import {Card, Flex, Stack, Text} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+
+export default function InteractiveCardStory() {
+  const pressed = useBoolean('Pressed', false, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
+          <Stack space={3}>
+            <Text>
+              Text <code>Code</code>
+            </Text>
+            <Text muted>Muted</Text>
+            <Text accent>Accent</Text>
+          </Stack>
+        </Card>
+      </div>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -0,0 +1,80 @@
+import {Box, Card, Flex, Skeleton, Text} from '@bettercms-ai/kit'
+
+import {Stack} from '../../stack'
+
+export default function ListNavigationStory() {
+  return (
+    <Box height="fill" padding={[3, 4, 5]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={2}>
+            <List1 />
+          </Card>
+          <Card borderLeft flex={1} padding={2}>
+            <List2 />
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}
+
+function List1() {
+  return (
+    <Stack space={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function List2() {
+  return (
+    <Stack space={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function Preview() {
+  return (
+    <Flex align="center" gap={2}>
+      <Skeleton radius="full" style={{width: 33, height: 33}} />
+      <Stack flex={1} space={2}>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
+        <Text muted size={1}>
+          Preview
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/props.tsx

@@ -0,0 +1,53 @@
+import {Card, Flex, Stack, Text} from '@bettercms-ai/kit'
+import {useAction, useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_CARD_AS_OPTIONS,
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
+  const border = useBoolean('Border', false, 'Props')
+  const checkered = useBoolean('Checkered', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card
+        __unstable_checkered={checkered}
+        as={as}
+        border={border}
+        muted={muted}
+        onClick={useAction('onClick')}
+        padding={padding}
+        radius={radius}
+        selected={selected}
+        shadow={shadow}
+        tone={tone}
+      >
+        <Stack space={3}>
+          <Text size={1}>
+            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
+            <code>shadow={shadow}</code>.
+          </Text>
+          <Text size={1}>
+            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <a href="#">link</a>.
+          </Text>
+          <Text accent size={1}>
+            Text with accent color.
+          </Text>
+        </Stack>
+      </Card>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -0,0 +1,94 @@
+import {EditIcon, PublishIcon} from '@bettercms-ai/icons'
+import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@bettercms-ai/kit'
+import {getTheme_v2, ThemeColorStateToneKey} from '@bettercms-ai/kit/theme'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+import {css, styled} from 'styled-components'
+
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
+  props: {
+    $tone: ThemeColorStateToneKey
+  } & ThemeProps,
+) => {
+  const {$tone} = props
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.button.default[$tone]
+
+  return css`
+    &:not([data-selected]) {
+      --card-fg-color: ${tone.enabled.bg};
+      --card-muted-fg-color: ${tone.enabled.bg};
+    }
+
+    [data-ui='Card']:disabled & {
+      --card-fg-color: inherit;
+      --card-muted-fg-color: inherit;
+    }
+  `
+})
+
+export default function SelectedStory() {
+  const disabled = useBoolean('Disabled', false) || false
+  const selected = useBoolean('Selected', false) || false
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Stack space={1}>
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+          >
+            <Preview selected={selected} />
+          </Card>
+
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+            tone="critical"
+          >
+            <Preview selected={selected} />
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function Preview({selected}: {selected: boolean}) {
+  const rootTheme = useRootTheme()
+
+  return (
+    <Flex>
+      <Box flex={1}>
+        <Text size={1}>Title</Text>
+      </Box>
+      <Inline space={3}>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          weight="medium"
+          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
+        >
+          <EditIcon />
+        </TextWithTone>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+        >
+          <PublishIcon />
+        </TextWithTone>
+      </Inline>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/styled.tsx

@@ -0,0 +1,14 @@
+import {Card, Flex, Text} from '@bettercms-ai/kit'
+import {styled} from 'styled-components'
+
+const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
+
+export default function StyledCardStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <StyledCard>
+        <Text as="li">Styled</Text>
+      </StyledCard>
+    </Flex>
+  )
+}