@bettercms-ai/kit 0.1.0

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

@@ -0,0 +1,166 @@
+import {CSSObject, getTheme_v2, ThemeFontSize} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {_responsive, rem, ThemeProps} from '../../styles'
+import {
+  focusRingBorderStyle,
+  focusRingStyle,
+  responsiveInputPaddingIconRightStyle,
+  responsiveRadiusStyle,
+  ResponsiveRadiusStyleProps,
+} from '../../styles/internal'
+
+function rootStyle(): ReturnType<typeof css> {
+  return css`
+    position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
+}
+
+function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
+  const {font} = getTheme_v2(props.theme)
+
+  return css`
+    -webkit-font-smoothing: antialiased;
+    appearance: none;
+    border: 0;
+    font-family: ${font.text.family};
+    color: inherit;
+    width: 100%;
+    outline: none;
+    margin: 0;
+
+    &:disabled {
+      opacity: 1;
+    }
+  `
+}
+
+function inputColorStyle(props: ThemeProps) {
+  const {color, input} = getTheme_v2(props.theme)
+
+  return css`
+    /* enabled */
+    background-color: ${color.input.default.enabled.bg};
+    color: ${color.input.default.enabled.fg};
+    box-shadow: ${focusRingBorderStyle({
+      color: color.input.default.enabled.border,
+      width: input.border.width,
+    })};
+
+    /* hovered */
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        background-color: ${color.input.default.hovered.bg};
+        color: ${color.input.default.hovered.fg};
+        box-shadow: ${focusRingBorderStyle({
+          color: color.input.default.hovered.border,
+          width: input.border.width,
+        })};
+      }
+    }
+
+    /* focused */
+    &:not(:disabled):focus {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.select.focusRing,
+      })};
+    }
+
+    /* read-only */
+    &[data-read-only] {
+      background-color: ${color.input.default.readOnly.bg};
+      color: ${color.input.default.readOnly.fg};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.readOnly.border,
+        width: input.border.width,
+      })};
+    }
+
+    /* disabled */
+    &:not([data-read-only]):disabled {
+      background-color: ${color.input.default.disabled.bg};
+      color: ${color.input.default.disabled.fg};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.disabled.border,
+        width: input.border.width,
+      })};
+    }
+  `
+}
+
+function textSize(size: ThemeFontSize) {
+  return {fontSize: rem(size.fontSize), lineHeight: `${rem(size.lineHeight)}`}
+}
+
+function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
+  const {$fontSize} = props
+  const {font, media} = getTheme_v2(props.theme)
+
+  return _responsive(media, $fontSize, (sizeIndex) =>
+    textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
+  )
+}
+
+function inputStyle(): Array<
+  | ((
+      props: ResponsiveRadiusStyleProps & {
+        $fontSize: number[]
+        $padding: number[]
+        $space: number[]
+      } & ThemeProps,
+    ) => CSSObject[])
+  | ((props: ThemeProps) => ReturnType<typeof css>)
+> {
+  return [
+    responsiveRadiusStyle,
+    inputBaseStyle,
+    inputColorStyle,
+    inputTextSizeStyle,
+    responsiveInputPaddingIconRightStyle,
+  ]
+}
+
+function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
+  const {color} = getTheme_v2(props.theme)
+
+  return css`
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    /* enabled */
+    --card-fg-color: ${color.input.default.enabled.fg};
+
+    /* hover */
+    @media (hover: hover) {
+      select:not(disabled):not(:read-only):hover + && {
+        --card-fg-color: ${color.input.default.hovered.fg};
+      }
+    }
+
+    /* disabled */
+    select:disabled + && {
+      --card-fg-color: ${color.input.default.disabled.fg};
+    }
+
+    /* read-only */
+    select[data-read-only] + && {
+      --card-fg-color: ${color.input.default.readOnly.fg};
+    }
+  `
+}
+
+export const selectStyle = {
+  root: rootStyle,
+  input: inputStyle,
+  iconBox: iconBoxStyle,
+}

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -0,0 +1,15 @@
+import {Flex, Spinner} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function Props() {
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Spinner muted={muted} size={size} />
+    </Flex>
+  )
+}

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

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

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

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

package/src/core/primitives/spinner/spinner.tsx

@@ -0,0 +1,46 @@
+import {SpinnerIcon} from '@bettercms-ai/icons'
+import {forwardRef} from 'react'
+import {keyframes, styled} from 'styled-components'
+
+import {Text} from '../text'
+
+/**
+ * @public
+ */
+export interface SpinnerProps {
+  muted?: boolean
+  size?: number | number[]
+}
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const StyledSpinner = styled(Text)`
+  & > span > svg {
+    animation: ${rotate} 500ms linear infinite;
+  }
+`
+
+/**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
+ * @public
+ */
+export const Spinner = forwardRef(function Spinner(
+  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <StyledSpinner data-ui="Spinner" {...props} ref={ref}>
+      <SpinnerIcon />
+    </StyledSpinner>
+  )
+})
+Spinner.displayName = 'ForwardRef(Spinner)'

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

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

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

@@ -0,0 +1,32 @@
+import {Card, Container, Flex, Stack, Text} from '@bettercms-ai/kit'
+import {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">
+      <Container width={0}>
+        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

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

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

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

package/src/core/primitives/stack/stack.tsx

@@ -0,0 +1,57 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface StackOwnProps extends BoxOwnProps {
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+}
+
+/**
+ * @public
+ */
+export type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
+
+const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
+  stackBaseStyle,
+  responsiveStackSpaceStyle,
+)
+
+const StackComponent = forwardRef(function Stack(
+  props: StackOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {as, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
+
+  return (
+    <StyledStack
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Stack"
+      {...restProps}
+      $space={_getArrayProp(spacing)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})
+StackComponent.displayName = 'ForwardRef(Stack)'
+
+/**
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
+ */
+export const Stack = StackComponent as unknown as <E extends ElementType = 'div'>(
+  props: StackProps<E>,
+) => React.JSX.Element

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

@@ -0,0 +1,32 @@
+import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
+
+import {_responsive, rem, ThemeProps} from '../../styles'
+
+export interface ResponsiveStackSpaceStyleProps {
+  $space: number[]
+}
+
+const BASE_STYLE: CSSObject = {
+  '&&:not([hidden])': {
+    display: 'grid',
+  },
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: 'none',
+  },
+  'gridTemplateColumns': 'minmax(0, 1fr)',
+  'gridAutoRows': 'min-content',
+}
+
+export function stackBaseStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveStackSpaceStyle(
+  props: ResponsiveStackSpaceStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$space, (spaceIndex) => ({
+    gridGap: rem(space[spaceIndex]),
+  }))
+}

package/src/core/primitives/switch/__workshop__/example.tsx

@@ -0,0 +1,23 @@
+import {Box, Flex, Switch, Text} from '@bettercms-ai/kit'
+import {useCallback, useState} from 'react'
+
+export default function ExampleStory() {
+  const [checked, setChecked] = useState<boolean | undefined>(undefined)
+  const indeterminate = checked === undefined
+  const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {
+    setChecked(event.currentTarget.checked)
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Flex align="center" as="label">
+        <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
+        <Box marginLeft={3}>
+          <Text size={1} weight="medium">
+            Label
+          </Text>
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,11 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/switch',
+  title: 'Switch',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+  ],
+})

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

@@ -0,0 +1,21 @@
+import {Flex, Switch} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+import {useCallback} from 'react'
+
+export default function PropsStory() {
+  const checked = useBoolean('Checked', false)
+  const indeterminate = useBoolean('Indeterminate', false)
+  const readOnly = useBoolean('Read only', false)
+  const handleChange = useCallback(() => undefined, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Switch
+        checked={checked}
+        indeterminate={indeterminate}
+        onChange={handleChange}
+        readOnly={readOnly}
+      />
+    </Flex>
+  )
+}

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

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

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

@@ -0,0 +1,173 @@
+import {getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {rem, ThemeProps} from '../../styles'
+import {focusRingStyle} from '../../styles/internal'
+
+/* Root */
+export function switchBaseStyles(): ReturnType<typeof css> {
+  return css`
+    position: relative;
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
+}
+
+/* Input */
+export function switchInputStyles(): ReturnType<typeof css> {
+  // Visually hide the input element while keeping it interactive
+  return css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    padding: 0;
+    margin: 0;
+
+    /* Place the input element above the representation element */
+    z-index: 1;
+  `
+}
+
+/* Representation */
+export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
+  const {color, input} = getTheme_v2(props.theme)
+
+  return css`
+    --switch-bg-color: ${color.input.default.enabled.border};
+    --switch-fg-color: ${color.input.default.enabled.bg};
+    --switch-box-shadow: none;
+
+    &:not([hidden]) {
+      display: block;
+    }
+    position: relative;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+
+    /* Make sure it’s not possible to interact with the wrapper element */
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      box-shadow: var(--switch-box-shadow);
+      border-radius: inherit;
+    }
+
+    /* Focus styles */
+    input:focus + && {
+      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
+    }
+
+    input:focus:not(:focus-visible) + && {
+      --switch-box-shadow: none;
+    }
+
+    input:checked + && {
+      --switch-bg-color: ${color.input.default.enabled.fg};
+      --switch-fg-color: ${color.input.default.enabled.bg};
+    }
+
+    @media (hover: hover) {
+      input:not(:disabled):hover + && {
+        --switch-bg-color: ${color.input.default.hovered.border};
+        --switch-fg-color: ${color.input.default.hovered.bg};
+      }
+
+      input:not(:disabled):checked:hover + && {
+        --switch-bg-color: ${color.input.default.enabled.fg};
+        --switch-fg-color: ${color.input.default.enabled.bg};
+      }
+    }
+
+    input:not([data-read-only]):disabled + && {
+      --switch-bg-color: ${color.input.default.disabled.border};
+      --switch-fg-color: ${color.input.default.disabled.bg};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.border};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+
+    input:checked[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.fg};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+  `
+}
+
+/* Track */
+export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
+  const {input} = getTheme_v2(props.theme)
+
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    background-color: var(--switch-bg-color);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+  `
+}
+
+/* Thumb */
+export function switchThumbStyles(
+  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$indeterminate} = props
+  const {input} = getTheme_v2(props.theme)
+  const trackWidth = input.switch.width
+  const trackHeight = input.switch.height
+  const trackPadding = input.switch.padding
+  const size = trackHeight - input.switch.padding * 2
+  const checkedOffset = trackWidth - trackPadding * 2 - size
+  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+  const checked = $indeterminate !== true && props.$checked === true
+
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    position: absolute;
+    left: ${rem(trackPadding)};
+    top: ${rem(trackPadding)};
+    height: ${rem(size)};
+    width: ${rem(size)};
+    border-radius: ${rem(size / 2)};
+    transition-property: transform;
+    transition-duration: ${input.switch.transitionDurationMs}ms;
+    transition-timing-function: ${input.switch.transitionTimingFunction};
+    background: var(--switch-fg-color);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+
+    ${checked &&
+    css`
+      transform: translate3d(${checkedOffset}px, 0, 0);
+    `}
+
+    ${$indeterminate &&
+    css`
+      transform: translate3d(${indeterminateOffset}px, 0, 0);
+    `}
+  `
+}