@bettercms-ai/kit 0.1.0

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

@@ -0,0 +1,19 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/heading',
+  title: 'Heading',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,54 @@
+import {AddCircleIcon} from '@bettercms-ai/icons'
+import {Box, Card, Flex, Heading, Stack} from '@bettercms-ai/kit'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={5}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={4}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={3}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={2}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={1}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Heading size={0}>Hamburgefonstiv M</Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} tone="neutral">
+            <Heading accent>
+              <AddCircleIcon />
+            </Heading>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/core/primitives/heading/__workshop__/plain.tsx

@@ -0,0 +1,32 @@
+import {Flex, Heading} from '@bettercms-ai/kit'
+import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
+  const textChild = useText('Text', 'Hello, world', 'Props')
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Heading
+        accent={accent}
+        muted={muted}
+        size={size}
+        textOverflow={textOverflow}
+        weight={weight}
+      >
+        {textChild}
+      </Heading>
+    </Flex>
+  )
+}

package/src/core/primitives/heading/heading.tsx

@@ -0,0 +1,88 @@
+import {ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {
+  ResponsiveFontStyleProps,
+  responsiveHeadingFont,
+  responsiveTextAlignStyle,
+  ResponsiveTextAlignStyleProps,
+} from '../../styles/internal'
+import {ElementType, Props, TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
+import {headingBaseStyle} from './styles'
+import {HeadingStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface HeadingOwnProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis'
+  weight?: ThemeFontWeightKey
+}
+
+/**
+ * @public
+ */
+export type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
+
+const StyledHeading = styled.div<
+  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
+>(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
+
+const HeadingComponent = forwardRef(function Heading(
+  props: HeadingOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props
+
+  let children = childrenProp
+
+  if (textOverflow === 'ellipsis') {
+    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
+  }
+
+  return (
+    <StyledHeading
+      data-ui="Heading"
+      {...restProps}
+      $accent={accent}
+      $align={_getArrayProp(align)}
+      $muted={muted}
+      $size={_getArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+    >
+      <span>{children}</span>
+    </StyledHeading>
+  )
+})
+HeadingComponent.displayName = 'ForwardRef(Heading)'
+
+/**
+ * Typographic headings.
+ *
+ * @public
+ */
+export const Heading = HeadingComponent as unknown as <E extends ElementType = 'div'>(
+  props: HeadingProps<E>,
+) => React.JSX.Element

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

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

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

@@ -0,0 +1,64 @@
+import {getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+import {HeadingStyleProps} from './types'
+
+export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
+
+  return css`
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & strong {
+      font-weight: ${font.heading.weights.bold};
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-bcms-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export interface HeadingStyleProps {
+  $accent: boolean
+  $muted: boolean
+}

package/src/core/primitives/index.ts

@@ -0,0 +1,27 @@
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './code'
+export * from './container'
+export * from './flex'
+export * from './grid'
+export * from './heading'
+export * from './inline'
+export * from './kbd'
+export * from './label'
+export * from './popover'
+export * from './radio'
+export * from './select'
+export * from './spinner'
+export * from './stack'
+export * from './switch'
+export * from './text'
+export * from './textArea'
+export * from './textInput'
+export * from './tooltip'
+
+// Types
+export * from './types'

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

@@ -0,0 +1,8 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/inline',
+  title: 'Inline',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+})

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -0,0 +1,27 @@
+import {Card, Flex, Inline, Text} from '@bettercms-ai/kit'
+import {useAction, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Inline
+        onClick={useAction('onClick')}
+        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
+      >
+        <Card padding={1} shadow={1}>
+          <Text size={1}>Inline item</Text>
+        </Card>
+
+        <Card padding={2} shadow={1}>
+          <Text size={1}>Inline item</Text>
+        </Card>
+
+        <Card padding={3} shadow={1}>
+          <Text size={1}>Inline item</Text>
+        </Card>
+      </Inline>
+    </Flex>
+  )
+}

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

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

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

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Inline} from './inline'
+import {inlineSpaceStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+  }
+})
+
+describe('primitives/inline', () => {
+  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+
+  beforeEach(() => {
+    mockedInlineSpaceStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Inline space={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedInlineSpaceStyle.mockClear()
+    render(
+      <Inline gap={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Inline gap={3} space={1}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+  })
+})

package/src/core/primitives/inline/inline.tsx

@@ -0,0 +1,63 @@
+import {Children, forwardRef, useMemo} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {inlineBaseStyle, inlineSpaceStyle} from './styles'
+import {ResponsiveInlineSpaceStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
+  /**
+   * The spacing between children.
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+  /** The spacing between children. */
+  gap?: number | number[]
+}
+
+/**
+ * @public
+ */
+export type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
+
+const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+
+const InlineComponent = forwardRef(function Inline(
+  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
+  ref,
+) {
+  const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
+
+  const children = useMemo(
+    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
+    [childrenProp],
+  )
+
+  return (
+    <StyledInline
+      data-ui="Inline"
+      {...restProps}
+      $space={_getArrayProp(spacing)}
+      forwardedAs={as}
+      ref={ref as any}
+    >
+      {children}
+    </StyledInline>
+  )
+})
+InlineComponent.displayName = 'ForwardRef(Inline)'
+
+/**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
+ */
+export const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(
+  props: InlineProps<E>,
+) => React.JSX.Element

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

@@ -0,0 +1,32 @@
+import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
+
+import {_responsive, rem, ThemeProps} from '../../styles'
+import {ResponsiveInlineSpaceStyleProps} from './types'
+
+export function inlineBaseStyle(): CSSObject {
+  return {
+    'lineHeight': '0',
+
+    '&&:not([hidden])': {
+      display: 'block',
+    },
+
+    '& > div': {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+    },
+  }
+}
+
+export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$space, (spaceIndex) => {
+    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
+
+    return {
+      'margin': `-${_space} 0 0 -${_space}`,
+      '& > div': {padding: `${_space} 0 0 ${_space}`},
+    }
+  })
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveInlineSpaceStyleProps {
+  $space: number[]
+}

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

@@ -0,0 +1,8 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/kbd',
+  title: 'KBD',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+})

package/src/core/primitives/kbd/__workshop__/plain.tsx

@@ -0,0 +1,9 @@
+import {Flex, KBD} from '@bettercms-ai/kit'
+
+export default function PlainStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>
+    </Flex>
+  )
+}

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

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

package/src/core/primitives/kbd/kbd.tsx

@@ -0,0 +1,69 @@
+import {forwardRef} from 'react'
+import {css, styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {ElementType, Props, Radius} from '../../types'
+import {Box} from '../box'
+import {Text} from '../text'
+
+/**
+ * @public
+ */
+export interface KBDOwnProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+}
+
+/**
+ * @public
+ */
+export type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
+
+function kbdStyle() {
+  return css`
+    --card-bg-color: var(--card-kbd-bg-color);
+    --card-border-color: var(--card-kbd-border-color);
+    --card-fg-color: var(--card-kbd-fg-color);
+
+    box-shadow: inset 0 0 0 1px var(--card-border-color);
+    background: var(--card-bg-color);
+    font: inherit;
+
+    vertical-align: top;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
+}
+
+const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
+
+const KBDComponent = forwardRef(function KBD(
+  props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
+
+  return (
+    <StyledKBD data-ui="KBD" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>
+      <Box as="span" padding={padding}>
+        <Text as="span" size={fontSize} weight="semibold">
+          {children}
+        </Text>
+      </Box>
+    </StyledKBD>
+  )
+})
+KBDComponent.displayName = 'ForwardRef(KBD)'
+
+/**
+ * Used to define some text as keyboard input.
+ *
+ * @public
+ */
+export const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(
+  props: KBDProps<E>,
+) => React.JSX.Element

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

@@ -0,0 +1,19 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/label',
+  title: 'Label',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,48 @@
+import {AddCircleIcon} from '@bettercms-ai/icons'
+import {Box, Card, Flex, Label, Stack} from '@bettercms-ai/kit'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} tone="suggest">
+            <Label size={4}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="suggest">
+            <Label size={3}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="suggest">
+            <Label size={2}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="suggest">
+            <Label size={1}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="suggest">
+            <Label size={0}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} tone="suggest">
+            <Label>
+              <AddCircleIcon />
+            </Label>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -0,0 +1,24 @@
+import {Flex, Label} from '@bettercms-ai/kit'
+import {useSelect, useText} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
+  const textChild = useText('Text', 'Label text', 'Props')
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Label size={size} textOverflow={textOverflow} weight={weight}>
+        {textChild}
+      </Label>
+    </Flex>
+  )
+}