@bettercms-ai/kit 0.1.0

package/src/core/primitives/popover/popoverCard.tsx

@@ -0,0 +1,166 @@
+import {Strategy} from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@bettercms-ai/kit/theme'
+import {motion, type MotionProps} from 'motion/react'
+import React, {CSSProperties, forwardRef, useMemo} from 'react'
+import {styled} from 'styled-components'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
+import {Arrow, useLayer} from '../../utils'
+import {Card, CardProps} from '../card'
+import {Flex} from '../flex'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
+
+const MotionCard = styled(motion.create(Card))`
+  &:not([hidden]) {
+    display: flex;
+  }
+  flex-direction: column;
+  width: max-content;
+  min-width: min-content;
+  will-change: transform;
+`
+
+const MotionFlex = styled(motion.create(Flex))`
+  will-change: opacity;
+`
+
+/**
+ * @internal
+ */
+export const PopoverCard = forwardRef(function PopoverCard(
+  props: {
+    /** @beta*/
+    __unstable_margins?: PopoverMargins
+    animate?: boolean
+    arrow: boolean
+    arrowRef: React.Ref<HTMLDivElement>
+    arrowX?: number
+    arrowY?: number
+    originX?: number
+    originY?: number
+    overflow?: BoxOverflow
+    padding?: number | number[]
+    placement: Placement
+    radius?: Radius | Radius[]
+    scheme?: ThemeColorSchemeKey
+    shadow?: number | number[]
+    strategy: Strategy
+    tone: CardTone
+    width: number | undefined
+    x: number | null
+    y: number | null
+  } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_margins: marginsProp,
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    padding,
+    placement,
+    originX,
+    originY,
+    overflow,
+    radius,
+    scheme,
+    shadow,
+    strategy,
+    style,
+    tone,
+    width,
+    x: xProp,
+    y: yProp,
+    ...restProps
+  } = props
+
+  const {zIndex} = useLayer()
+
+  // Get margins: [top, right, bottom, left]
+  const margins: PopoverMargins = useMemo(
+    () => marginsProp || DEFAULT_POPOVER_MARGINS,
+    [marginsProp],
+  )
+
+  // Translate according to margins
+  const x = (xProp ?? 0) + margins[3]
+  const y = (yProp ?? 0) + margins[0]
+
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      left: x,
+      originX,
+      originY,
+      position: strategy,
+      top: y,
+      width,
+      zIndex,
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, strategy, style, width, x, y, zIndex],
+  )
+
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }),
+    [arrowX, arrowY],
+  )
+
+  return (
+    <MotionCard
+      data-ui="Popover"
+      {...(restProps as CardProps & MotionProps)}
+      data-placement={placement}
+      radius={radius}
+      ref={ref}
+      scheme={scheme}
+      shadow={shadow}
+      sizing="border"
+      style={rootStyle}
+      tone={tone}
+      variants={POPOVER_MOTION_PROPS.card}
+      transition={POPOVER_MOTION_PROPS.transition}
+      initial={animate ? ['hidden', 'initial'] : undefined}
+      animate={animate ? ['visible', 'scaleIn'] : undefined}
+      exit={animate ? ['hidden', 'scaleOut'] : undefined}
+    >
+      <MotionFlex
+        data-ui="Popover__wrapper"
+        direction="column"
+        flex={1}
+        overflow={overflow}
+        variants={POPOVER_MOTION_PROPS.children}
+        transition={POPOVER_MOTION_PROPS.transition}
+      >
+        <Flex direction="column" flex={1} padding={padding}>
+          {children}
+        </Flex>
+      </MotionFlex>
+
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_POPOVER_ARROW_WIDTH}
+          height={DEFAULT_POPOVER_ARROW_HEIGHT}
+          radius={DEFAULT_POPOVER_ARROW_RADIUS}
+        />
+      )}
+    </MotionCard>
+  )
+})
+PopoverCard.displayName = 'ForwardRef(PopoverCard)'

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

@@ -0,0 +1,7 @@
+/** @beta */
+export type PopoverUpdateCallback = () => void
+
+// eslint-disable-next-line no-warning-comments
+// todo: remove `auto` from PopoverWidth
+/** @public */
+export type PopoverWidth = number | 'auto'

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

@@ -0,0 +1,63 @@
+import {Box, Container, Flex, Radio, Stack, Text} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+import {useCallback, useState} from 'react'
+
+export default function ExampleStory() {
+  const [value, setValue] = useState('first-option')
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
+      <Container width={0}>
+        <Stack space={3}>
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'first-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="first-option"
+            />
+            <Box marginLeft={2}>
+              <Text>First option</Text>
+            </Box>
+          </Flex>
+
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'second-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="second-option"
+            />
+            <Box marginLeft={2}>
+              <Text>Second option</Text>
+            </Box>
+          </Flex>
+
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'third-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="third-option"
+            />
+            <Box marginLeft={2}>
+              <Text>Third option</Text>
+            </Box>
+          </Flex>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

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

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

@@ -0,0 +1,28 @@
+import {Flex, Radio} from '@bettercms-ai/kit'
+import {useAction, useBoolean} from '@bettercms-ai/kit-workshop'
+
+export default function PlainStory() {
+  const checked = useBoolean('Checked', false, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const id = 'radioStory'
+  const name = 'radioStory'
+  const onBlur = useAction('onBlur')
+  const onChange = useAction('onChange')
+  const onFocus = useAction('onFocus')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
+      <Radio
+        checked={checked}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        readOnly={readOnly}
+      />
+    </Flex>
+  )
+}

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

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

package/src/core/primitives/radio/radio.tsx

@@ -0,0 +1,51 @@
+import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useCustomValidity} from '../../hooks'
+import {inputElementStyle, radioBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface RadioProps {
+  customValidity?: string
+}
+
+const StyledRadio = styled.div(radioBaseStyle)
+const Input = styled.input(inputElementStyle)
+
+/**
+ * The `Radio` component allows the user to select one option from a set.
+ *
+ * @public
+ */
+export const Radio = forwardRef(function Radio(
+  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+) {
+  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <StyledRadio className={className} data-ui="Radio" style={style}>
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
+        {...restProps}
+        disabled={disabled || readOnly}
+        readOnly={readOnly}
+        ref={ref}
+        type="radio"
+      />
+      <span />
+    </StyledRadio>
+  )
+})
+Radio.displayName = 'ForwardRef(Radio)'

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

@@ -0,0 +1,117 @@
+import {getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {rem, ThemeProps} from '../../styles'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+
+export function radioBaseStyle(): ReturnType<typeof css> {
+  return css`
+    position: relative;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+
+    &[data-read-only] {
+      outline: 1px solid red;
+    }
+  `
+}
+
+export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
+  const {color, input} = getTheme_v2(props.theme)
+  const dist = (input.radio.size - input.radio.markSize) / 2
+
+  return css`
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    border-radius: ${rem(input.radio.size / 2)};
+    border: none;
+
+    /* enabled */
+    & + span {
+      display: block;
+      position: relative;
+      height: ${rem(input.radio.size)};
+      width: ${rem(input.radio.size)};
+      border-radius: ${rem(input.radio.size / 2)};
+      background: ${color.input.default.enabled.bg};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.enabled.border,
+        width: input.border.width,
+      })};
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: ${rem(dist)};
+        left: ${rem(dist)};
+        height: ${rem(input.radio.markSize)};
+        width: ${rem(input.radio.markSize)};
+        border-radius: ${rem(input.radio.markSize / 2)};
+        background: ${color.input.default.enabled.fg};
+        opacity: 0;
+      }
+    }
+
+    /* focused */
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.radio.focusRing,
+      })};
+    }
+
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.enabled.border,
+        width: input.border.width,
+      })};
+    }
+
+    &:checked + span::after {
+      opacity: 1;
+    }
+
+    /* customValidity */
+    &[data-error] + span {
+      background-color: ${color.input.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.input.invalid.enabled.muted.bg,
+      })};
+      &::after {
+        background: ${color.input.invalid.enabled.muted.bg};
+      }
+    }
+
+    /* read only */
+    &[data-read-only] + span {
+      box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      background: ${color.input.default.readOnly.bg};
+
+      &::after {
+        background: ${color.input.default.readOnly.border};
+      }
+    }
+
+    /* disabled */
+    &:not([data-read-only]):disabled + span {
+      box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      background: ${color.input.default.disabled.bg};
+
+      &::after {
+        background: ${color.input.default.disabled.border};
+      }
+    }
+  `
+}

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

@@ -0,0 +1,11 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/select',
+  title: 'Select',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+  ],
+})

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

@@ -0,0 +1,27 @@
+import {Card, Container, Label, Select, Stack} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+
+export default function PlainStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack space={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select disabled={disabled} id="select-example" readOnly={readOnly}>
+            <option value="a">Option A</option>
+            <option value="b">Option B</option>
+            <option value="c">Option C</option>
+            <option value="d">Option D</option>
+            <option value="e">Option E</option>
+          </Select>
+        </Stack>
+      </Card>
+    </Container>
+  )
+}

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -0,0 +1,23 @@
+import {Card, Container, Label, Select, Stack} from '@bettercms-ai/kit'
+
+export default function ReadOnlyStory() {
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack space={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select id="select-example" readOnly>
+            <option value="a">Option A</option>
+            <option value="b">Option B</option>
+            <option value="c">Option C</option>
+            <option value="d">Option D</option>
+            <option value="e">Option E</option>
+          </Select>
+        </Stack>
+      </Card>
+    </Container>
+  )
+}

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

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

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

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Select} from './select'
+import {selectStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    selectStyle: {
+      ...actual.selectStyle,
+      input: jest.fn(actual.selectStyle.input),
+    },
+  }
+})
+
+describe('primitives/select spacing', () => {
+  const mockedSelectInputStyle = jest.mocked(selectStyle.input)
+
+  beforeEach(() => {
+    mockedSelectInputStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Select space={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedSelectInputStyle.mockClear()
+    render(
+      <Select gap={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Select gap={3} space={1}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+    expect(mockedSelectInputStyle).not.toHaveBeenCalledWith(expect.objectContaining({$space: [1]}))
+  })
+})

package/src/core/primitives/select/select.tsx

@@ -0,0 +1,94 @@
+import {ChevronDownIcon} from '@bettercms-ai/icons'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
+import {Radius} from '../../types'
+import {Box} from '../box'
+import {Text} from '../text'
+import {selectStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface SelectProps {
+  fontSize?: number | number[]
+  gap?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+  customValidity?: string
+}
+
+const StyledSelect = styled.div(selectStyle.root)
+
+const Input = styled.select<{
+  $fontSize: number[]
+  $padding: number[]
+  $radius: Radius[]
+  $space: number[]
+}>(selectStyle.input)
+
+const IconBox = styled(Box)(selectStyle.iconBox)
+
+/**
+ * The `Select` component provides control of options.
+ *
+ * @public
+ */
+export const Select = forwardRef(function Select(
+  props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
+  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
+) {
+  const {
+    children,
+    customValidity,
+    disabled,
+    fontSize = 2,
+    gap,
+    padding = 3,
+    radius = 2,
+    readOnly,
+    space: deprecated_space = 3,
+    ...restProps
+  } = props
+  const spacing = gap === undefined ? deprecated_space : gap
+
+  const ref = useRef<HTMLSelectElement | null>(null)
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <StyledSelect data-ui="Select">
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-ui="Select"
+        {...restProps}
+        $fontSize={_getArrayProp(fontSize)}
+        $padding={_getArrayProp(padding)}
+        $radius={_getArrayProp(radius)}
+        $space={_getArrayProp(spacing)}
+        disabled={disabled || readOnly}
+        ref={ref}
+      >
+        {children}
+      </Input>
+
+      <IconBox padding={padding}>
+        <Text size={fontSize}>
+          <ChevronDownIcon />
+        </Text>
+      </IconBox>
+    </StyledSelect>
+  )
+})
+Select.displayName = 'ForwardRef(Select)'