@bettercms-ai/kit 0.1.0

package/src/core/primitives/avatar/types.ts

@@ -0,0 +1,17 @@
+import {ThemeColorAvatarColorKey} from '@bettercms-ai/kit/theme'
+
+import {AvatarSize} from '../../types'
+
+/**
+ * @internal
+ */
+export interface AvatarRootStyleProps {
+  $color: ThemeColorAvatarColorKey
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveAvatarSizeStyleProps {
+  $size: AvatarSize[]
+}

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

@@ -0,0 +1,19 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/badge',
+  title: 'Badge',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+  ],
+})

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

@@ -0,0 +1,30 @@
+import {Badge, Flex} from '@bettercms-ai/kit'
+import {useAction, useSelect, useText} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_BADGE_MODE_OPTIONS,
+  WORKSHOP_BADGE_TONE_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
+  const textProp = useText('Text', 'Label', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Badge
+        mode={mode}
+        onClick={useAction('onClick')}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        tone={tone}
+      >
+        {textProp}
+      </Badge>
+    </Flex>
+  )
+}

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -0,0 +1,21 @@
+import {Badge, Flex, Inline} from '@bettercms-ai/kit'
+import {THEME_COLOR_STATE_TONES} from '@bettercms-ai/kit/theme'
+import {useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function Tones() {
+  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Inline space={2}>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
+      </Inline>
+    </Flex>
+  )
+}

package/src/core/primitives/badge/badge.test.tsx

@@ -0,0 +1,16 @@
+/** @jest-environment jsdom */
+
+import {axe} from 'jest-axe'
+
+import {render} from '../../../../test'
+import {Badge} from './badge'
+
+describe('atoms/badge', () => {
+  it('should have no violations (axe)', async () => {
+    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
+    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+})

package/src/core/primitives/badge/badge.tsx

@@ -0,0 +1,70 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {BadgeMode, BadgeTone, ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {Text} from '../text'
+import {ResponsiveRadiusProps} from '../types'
+import {badgeStyle} from './styles'
+import {BadgeStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
+  fontSize?: number | number[]
+  /** @deprecated No longer used. */
+  mode?: BadgeMode
+  tone?: BadgeTone
+}
+
+/**
+ * @public
+ */
+export type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
+
+const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  badgeStyle,
+)
+
+const BadgeComponent = forwardRef(function Badge(
+  props: BadgeOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
+  ref,
+) {
+  const {
+    children,
+    fontSize = 1,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
+    padding = 1,
+    radius = 'full',
+    tone = 'default',
+    ...restProps
+  } = props
+
+  return (
+    <StyledBadge
+      data-ui="Badge"
+      {...restProps}
+      $tone={tone}
+      $radius={_getArrayProp(radius)}
+      padding={_getArrayProp(padding)}
+      ref={ref}
+    >
+      <Text size={fontSize}>{children}</Text>
+    </StyledBadge>
+  )
+})
+BadgeComponent.displayName = 'ForwardRef(Badge)'
+
+/**
+ * Badges are used to tag resources.
+ *
+ * @public
+ */
+export const Badge = BadgeComponent as unknown as <E extends ElementType = 'div'>(
+  props: BadgeProps<E>,
+) => React.JSX.Element

package/src/core/primitives/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge'

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

@@ -0,0 +1,20 @@
+import {CSSObject} from '@bettercms-ai/kit/theme'
+
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps): CSSObject {
+  const {$tone} = props
+
+  return {
+    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
+    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
+
+    'backgroundColor': 'var(--card-bg-color)',
+    'cursor': 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+      verticalAlign: 'top',
+    },
+  }
+}

package/src/core/primitives/badge/types.ts

@@ -0,0 +1,8 @@
+import {BadgeTone} from '../../types'
+
+/**
+ * @internal
+ */
+export interface BadgeStyleProps {
+  $tone: BadgeTone
+}

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

@@ -0,0 +1,31 @@
+import {Box, Flex, Text} from '@bettercms-ai/kit'
+import {forwardRef} from 'react'
+
+// A custom component with its own props. When passed to `Box`'s `as` prop, these props are
+// inferred on `Box` itself: `href` is required and `target` is optional, and unknown props
+// are rejected by the type checker.
+const Link = forwardRef(function Link(
+  props: {href: string; target?: string} & Omit<
+    React.HTMLProps<HTMLAnchorElement>,
+    'as' | 'href' | 'target'
+  >,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, ...restProps} = props
+
+  return (
+    <a {...restProps} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Box as={Link} href="/" padding={4} target="_new">
+        <Text size={1}>As component</Text>
+      </Box>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,24 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./responsive')),
+    },
+    {
+      name: 'as-component',
+      title: 'As component',
+      component: lazy(() => import('./asComponent')),
+    },
+  ],
+})

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

@@ -0,0 +1,20 @@
+import {Box, Card, Text} from '@bettercms-ai/kit'
+import {useAction, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card border tone="inherit">
+        <Box onClick={useAction('onClick')} padding={padding}>
+          <Text>
+            Box with <code>padding={padding}</code>
+          </Text>
+        </Box>
+      </Card>
+    </Box>
+  )
+}

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -0,0 +1,20 @@
+import {Box, Text} from '@bettercms-ai/kit'
+
+export default function ResponsiveStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Box
+        id="responsive-box"
+        display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
+        flex={[1, 2, 3, 4, 5, 6, 7]}
+        padding={3}
+        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
+        style={{outline: '1px solid var(--card-border-color)'}}
+      >
+        <Text align="center" muted>
+          This is a box with responsive props
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/core/primitives/box/box.test.tsx

@@ -0,0 +1,142 @@
+/** @jest-environment jsdom */
+
+import {type ComponentProps} from 'react'
+
+import {render} from '../../../../test'
+import {responsiveGridItemStyle} from '../../styles/internal'
+import {Box} from './box'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridItemStyle: jest.fn(actual.responsiveGridItemStyle),
+  }
+})
+
+describe('<Box />', () => {
+  const mockedResponsiveGridItemStyle = jest.mocked(responsiveGridItemStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridItemStyle.mockClear()
+  })
+
+  it('uses column when gridColumn is not provided', () => {
+    render(<Box column={3} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
+  })
+
+  it('uses gridColumn when provided', () => {
+    render(<Box gridColumn={4} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [4]}),
+    )
+  })
+
+  it('prefers gridColumn over column when both are provided', () => {
+    render(<Box column={3} gridColumn={5} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
+  })
+
+  it('supports responsive arrays with gridColumn', () => {
+    const gridColumn: ComponentProps<typeof Box>['gridColumn'] = [2, 'full']
+
+    render(<Box gridColumn={gridColumn} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [2, 'full']}),
+    )
+  })
+
+  it('uses columnStart when gridColumnStart is not provided', () => {
+    render(<Box columnStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('prefers gridColumnStart over columnStart when both are provided', () => {
+    render(<Box columnStart={2} gridColumnStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('uses columnEnd when gridColumnEnd is not provided', () => {
+    render(<Box columnEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('prefers gridColumnEnd over columnEnd when both are provided', () => {
+    render(<Box columnEnd={3} gridColumnEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('uses row when gridRow is not provided', () => {
+    render(<Box row={1} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [1]}))
+  })
+
+  it('prefers gridRow over row when both are provided', () => {
+    render(<Box row={1} gridRow={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [2]}))
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$row: [1]}),
+    )
+  })
+
+  it('uses rowStart when gridRowStart is not provided', () => {
+    render(<Box rowStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('prefers gridRowStart over rowStart when both are provided', () => {
+    render(<Box rowStart={2} gridRowStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('uses rowEnd when gridRowEnd is not provided', () => {
+    render(<Box rowEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+
+  it('prefers gridRowEnd over rowEnd when both are provided', () => {
+    render(<Box rowEnd={3} gridRowEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+})

package/src/core/primitives/box/box.tsx

@@ -0,0 +1,154 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {
+  boxStyle,
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveBoxStyle,
+  ResponsiveBoxStyleProps,
+  responsiveGridItemStyle,
+  ResponsiveGridItemStyleProps,
+  responsiveMarginStyle,
+  ResponsiveMarginStyleProps,
+  responsivePaddingStyle,
+  ResponsivePaddingStyleProps,
+} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
+import {
+  ResponsiveBoxProps,
+  ResponsiveFlexItemProps,
+  ResponsiveGridItemProps,
+  ResponsiveMarginProps,
+  ResponsivePaddingProps,
+} from '../types'
+
+/**
+ * The props that `Box` adds on top of the element it renders as.
+ *
+ * @public
+ */
+export interface BoxOwnProps
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  forwardedAs?: ElementType
+}
+
+/**
+ * @public
+ */
+export type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
+
+const StyledBox = styled.div<
+  FlexItemStyleProps &
+    ResponsiveBoxStyleProps &
+    ResponsiveGridItemStyleProps &
+    ResponsiveMarginStyleProps &
+    ResponsivePaddingStyleProps
+>(
+  boxStyle,
+  flexItemStyle,
+  responsiveBoxStyle,
+  responsiveGridItemStyle,
+  responsiveMarginStyle,
+  responsivePaddingStyle,
+)
+
+const BoxComponent = forwardRef(function Box(
+  props: BoxOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    as: asProp = 'div',
+    gridColumn,
+    column: deprecated_column,
+    gridColumnStart,
+    columnStart: deprecated_columnStart,
+    gridColumnEnd,
+    columnEnd: deprecated_columnEnd,
+    display = 'block',
+    flex,
+    height,
+    margin = 0,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    overflow,
+    padding = 0,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    gridRow,
+    row: deprecated_row,
+    gridRowStart,
+    rowStart: deprecated_rowStart,
+    gridRowEnd,
+    rowEnd: deprecated_rowEnd,
+    sizing,
+    ...restProps
+  } = props
+  const column = gridColumn === undefined ? deprecated_column : gridColumn
+  const columnStart = gridColumnStart === undefined ? deprecated_columnStart : gridColumnStart
+  const columnEnd = gridColumnEnd === undefined ? deprecated_columnEnd : gridColumnEnd
+  const row = gridRow === undefined ? deprecated_row : gridRow
+  const rowStart = gridRowStart === undefined ? deprecated_rowStart : gridRowStart
+  const rowEnd = gridRowEnd === undefined ? deprecated_rowEnd : gridRowEnd
+
+  return (
+    <StyledBox
+      data-as={typeof asProp === 'string' ? asProp : undefined}
+      data-ui="Box"
+      {...restProps}
+      $column={_getArrayProp(column)}
+      $columnStart={_getArrayProp(columnStart)}
+      $columnEnd={_getArrayProp(columnEnd)}
+      $display={_getArrayProp(display)}
+      $flex={_getArrayProp(flex)}
+      $height={_getArrayProp(height)}
+      $margin={_getArrayProp(margin)}
+      $marginX={_getArrayProp(marginX)}
+      $marginY={_getArrayProp(marginY)}
+      $marginTop={_getArrayProp(marginTop)}
+      $marginRight={_getArrayProp(marginRight)}
+      $marginBottom={_getArrayProp(marginBottom)}
+      $marginLeft={_getArrayProp(marginLeft)}
+      $overflow={_getArrayProp(overflow)}
+      $padding={_getArrayProp(padding)}
+      $paddingX={_getArrayProp(paddingX)}
+      $paddingY={_getArrayProp(paddingY)}
+      $paddingTop={_getArrayProp(paddingTop)}
+      $paddingRight={_getArrayProp(paddingRight)}
+      $paddingBottom={_getArrayProp(paddingBottom)}
+      $paddingLeft={_getArrayProp(paddingLeft)}
+      $row={_getArrayProp(row)}
+      $rowStart={_getArrayProp(rowStart)}
+      $rowEnd={_getArrayProp(rowEnd)}
+      $sizing={_getArrayProp(sizing)}
+      as={asProp}
+      ref={ref}
+    >
+      {props.children}
+    </StyledBox>
+  )
+})
+BoxComponent.displayName = 'ForwardRef(Box)'
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export const Box = BoxComponent as unknown as <E extends ElementType = 'div'>(
+  props: BoxProps<E>,
+) => React.JSX.Element

package/src/core/primitives/box/index.ts

@@ -0,0 +1 @@
+export * from './box'

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import {Button, Flex, Grid, Stack, Text} from '@bettercms-ai/kit'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function CustomStory() {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Stack space={2}>
+        <Grid columns={len} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="ghost" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+        <Grid columns={len} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="default" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+      </Stack>
+    </Flex>
+  )
+}