@bettercms-ai/kit 0.1.0

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

@@ -0,0 +1,30 @@
+import {RocketIcon} from '@bettercms-ai/icons'
+import {Button, Flex, Inline} from '@bettercms-ai/kit'
+
+export default function CustomIconsStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Inline space={1}>
+        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
+        <Button fontSize={1} icon={CustomIcon} padding={2} space={2} text="Heart" />
+      </Inline>
+    </Flex>
+  )
+}
+
+function CustomIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
+    </svg>
+  )
+}

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

@@ -0,0 +1,74 @@
+import {SquareIcon} from '@bettercms-ai/icons'
+
+import {Card} from '../../card/card'
+import {Container} from '../../container/container'
+import {Grid} from '../../grid/grid'
+import {Stack} from '../../stack/stack'
+import {Text} from '../../text/text'
+import {Button, ButtonOwnProps} from '../button'
+
+const GAP = 4
+const COLUMNS = 3
+
+const DEFAULT_PROPS: ButtonOwnProps = {
+  icon: SquareIcon,
+  iconRight: SquareIcon,
+}
+
+function Layout() {
+  return (
+    <Container width={2}>
+      <Stack space={4}>
+        <Grid columns={COLUMNS} gap={GAP}>
+          <Text size={1} weight="semibold">
+            Default
+          </Text>
+          <Text size={1} weight="semibold">
+            Ghost
+          </Text>
+          <Text size={1} weight="semibold">
+            Bleed
+          </Text>
+        </Grid>
+
+        <Stack space={2}>
+          <Grid columns={COLUMNS} gap={GAP}>
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
+            </Stack>
+
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
+            </Stack>
+
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
+              <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
+            </Stack>
+          </Grid>
+        </Stack>
+      </Stack>
+    </Container>
+  )
+}
+
+export default function DisabledButtonStory() {
+  return (
+    <Stack>
+      <Stack space={4}>
+        <Card padding={5} scheme="light">
+          <Layout />
+        </Card>
+
+        <Card padding={5} scheme="dark">
+          <Layout />
+        </Card>
+      </Stack>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,59 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/button',
+  title: 'Button',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'styled-1',
+      title: 'Styled #1',
+      component: lazy(() => import('./styled1')),
+    },
+    {
+      name: 'styled-2',
+      title: 'Styled #2',
+      component: lazy(() => import('./styled2')),
+    },
+    {
+      name: 'stacked',
+      title: 'Stacked',
+      component: lazy(() => import('./stacked')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'mixed-children',
+      title: 'Mixed children',
+      component: lazy(() => import('./mixedChildren')),
+    },
+    {
+      name: 'upload-button',
+      title: 'Upload button',
+      component: lazy(() => import('./uploadButton')),
+    },
+    {
+      name: 'label-upload-button-workaround',
+      title: 'LabelUploadButtonWorkaroundStory',
+      component: lazy(() => import('./labelUploadButton')),
+    },
+    {
+      name: 'custom-icons',
+      title: 'Custom icons',
+      component: lazy(() => import('./customIcons')),
+    },
+    {
+      name: 'disabled',
+      title: 'Disabled',
+      component: lazy(() => import('./disabled')),
+    },
+  ],
+})

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

@@ -0,0 +1,36 @@
+import {UploadIcon} from '@bettercms-ai/icons'
+import {Button, Flex} from '@bettercms-ai/kit'
+import {styled} from 'styled-components'
+
+const LabelUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
+  & input {
+    appearance: none;
+    overflow: hidden;
+    overflow: clip;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    max-width: 0;
+    width: -webkit-fill-available;
+    width: stretch;
+  }
+
+  & span:nth-child(2) {
+    width: 0;
+    flex: none;
+    padding: 0;
+  }
+`
+
+export default function LabelUploadButtonWorkaroundStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <LabelUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
+        <input type="file" />
+      </LabelUploadButton>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,12 @@
+import {AddIcon} from '@bettercms-ai/icons'
+import {Button, Flex} from '@bettercms-ai/kit'
+
+export default function MixedChildrenStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
+        <span style={{display: 'none'}}>test</span>
+      </Button>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,55 @@
+import {icons} from '@bettercms-ai/icons/map'
+import {Button, Flex} from '@bettercms-ai/kit'
+import {useAction, useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function ButtonStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
+  const textAlign =
+    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
+  const textProp = useText('Text', 'Label', 'Props')
+  const textWeight =
+    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon && icons[icon]}
+        iconRight={iconRight && icons[iconRight]}
+        justify={justify}
+        mode={mode}
+        onClick={useAction('onClick')}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        selected={selected}
+        space={space}
+        textAlign={textAlign}
+        text={textProp}
+        textWeight={textWeight}
+        tone={tone}
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,58 @@
+import {icons} from '@bettercms-ai/icons/map'
+import {Box, Button, Card, Container, Flex, Stack} from '@bettercms-ai/kit'
+import {useAction, useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function StackedStory() {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const onClick = useAction('onClick')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center">
+        <Container width={0} style={{textAlign: 'center'}}>
+          <Box padding={4}>
+            <Stack space={1}>
+              {tones.map(([title, tone]) => (
+                <Button
+                  disabled={disabled}
+                  fontSize={fontSize}
+                  icon={icon && icons[icon]}
+                  iconRight={iconRight && icons[iconRight]}
+                  justify={justify}
+                  key={tone}
+                  mode={mode}
+                  onClick={onClick}
+                  paddingX={paddingX}
+                  paddingY={paddingY}
+                  selected={selected}
+                  space={space}
+                  text={title}
+                  tone={tone}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

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

@@ -0,0 +1,17 @@
+import {Button, Flex} from '@bettercms-ai/kit'
+import {styled} from 'styled-components'
+
+const StyledButton1 = styled.a`
+  &:hover {
+    background-color: red;
+    box-shadow: none;
+  }
+`
+
+export default function StyledButton1Story() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button as={StyledButton1} href="#" text="Test" />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,19 @@
+import {Button, Flex} from '@bettercms-ai/kit'
+import {styled} from 'styled-components'
+
+const StyledButton2 = styled(Button)<{$color?: boolean}>`
+  &:hover {
+    background-color: red;
+    box-shadow: none;
+  }
+`
+
+export default function StyledButton2Story() {
+  const props = {href: '#', text: 'Test'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <StyledButton2 $color forwardedAs="a" {...props} />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,28 @@
+import {Button, Flex} from '@bettercms-ai/kit'
+import {useCallback, useRef} from 'react'
+
+export default function UploadButtonStory() {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current?.click()
+    }
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        as="label"
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        text={
+          <>
+            Upload
+            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
+          </>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,82 @@
+/** @jest-environment jsdom */
+
+import {AddIcon} from '@bettercms-ai/icons'
+import {screen} from '@testing-library/react'
+import {axe} from 'jest-axe'
+
+import {render} from '../../../../test'
+import {Flex} from '../flex'
+import {Button, ButtonOwnProps} from './button'
+
+jest.mock('../flex', () => {
+  const actual = jest.requireActual('../flex')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+  }
+})
+
+describe('atoms/button', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
+  it('Axe: should have no violations', async () => {
+    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'light',
+    })
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+
+    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'dark',
+    })
+
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+
+  it('should render text', () => {
+    render(<Button text="Button text" />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+
+  it('should wrap button', () => {
+    function WrappedButton({button: buttonProps}: {button: ButtonOwnProps}) {
+      return <Button {...buttonProps} />
+    }
+
+    const buttonProps: ButtonOwnProps = {
+      text: 'Button text',
+    }
+
+    render(<WrappedButton button={buttonProps} />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+
+  it('should support `space`', () => {
+    render(<Button icon={AddIcon} space={17} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [17]}))
+  })
+
+  it('should support `gap`', () => {
+    render(<Button gap={18} icon={AddIcon} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [18]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<Button gap={19} icon={AddIcon} space={20} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [19]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: [20]}))
+  })
+})

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

@@ -0,0 +1,210 @@
+import {ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
+import {forwardRef, isValidElement, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import {styled} from 'styled-components'
+
+import {_getArrayProp, ThemeProps} from '../../styles'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {useTheme_v2} from '../../theme'
+import {
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  ButtonWidth,
+  ElementType,
+  FlexJustify,
+  Props,
+} from '../../types'
+import {Box} from '../box'
+import {Flex} from '../flex'
+import {Spinner} from '../spinner'
+import {Text} from '../text'
+import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
+import {buttonBaseStyles, buttonColorStyles} from './styles'
+
+/**
+ * @public
+ */
+export interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  fontSize?: number | number[]
+  mode?: ButtonMode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  justify?: FlexJustify | FlexJustify[]
+  /**
+   * @beta Do not use in production, as this might change.
+   */
+  loading?: boolean
+  selected?: boolean
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+  gap?: number | number[]
+  muted?: boolean
+  text?: React.ReactNode
+  textAlign?: ButtonTextAlign
+  textWeight?: ThemeFontWeightKey
+  tone?: ButtonTone
+  type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
+}
+
+/**
+ * @public
+ */
+export type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
+const StyledButton = styled.button<
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
+>(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
+
+const LoadingBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--card-bg-color);
+  border-radius: inherit;
+  z-index: 1;
+  box-shadow: inherit;
+`
+
+const ButtonComponent = forwardRef(function Button(
+  props: ButtonOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'as' | 'width'
+    >,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    children,
+    disabled,
+    fontSize = 1,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    justify: justifyProp = 'center',
+    loading,
+    mode = 'default',
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
+    selected,
+    gap,
+    space: deprecated_space = 3,
+    text,
+    textAlign,
+    textWeight,
+    tone = 'default',
+    type = 'button',
+    muted = false,
+    width,
+    ...restProps
+  } = props
+  const {button} = useTheme_v2()
+
+  const justify = _getArrayProp(justifyProp)
+  const padding = _getArrayProp(paddingProp)
+  const paddingX = _getArrayProp(paddingXProp)
+  const paddingY = _getArrayProp(paddingYProp)
+  const paddingTop = _getArrayProp(paddingTopProp)
+  const paddingBottom = _getArrayProp(paddingBottomProp)
+  const paddingLeft = _getArrayProp(paddingLeftProp)
+  const paddingRight = _getArrayProp(paddingRightProp)
+  const radius = _getArrayProp(radiusProp)
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
+
+  const boxProps = useMemo(
+    () => ({
+      // flex: 1,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
+  )
+
+  return (
+    <StyledButton
+      data-ui="Button"
+      {...restProps}
+      $mode={mode}
+      $radius={radius}
+      $tone={tone}
+      data-disabled={Boolean(loading || disabled)}
+      data-selected={selected ? '' : undefined}
+      disabled={Boolean(loading || disabled)}
+      ref={ref}
+      type={type}
+      $width={width}
+    >
+      {Boolean(loading) && (
+        <LoadingBox>
+          <Spinner />
+        </LoadingBox>
+      )}
+
+      {(IconComponent || text || IconRightComponent) && (
+        <Box as="span" {...boxProps}>
+          <Flex as="span" justify={justify} gap={spacing}>
+            {IconComponent && (
+              <Text size={fontSize}>
+                {isValidElement(IconComponent) && IconComponent}
+                {isValidElementType(IconComponent) && <IconComponent />}
+              </Text>
+            )}
+
+            {text && (
+              <Box>
+                <Text
+                  muted={muted}
+                  align={textAlign}
+                  size={fontSize}
+                  textOverflow="ellipsis"
+                  weight={textWeight ?? button.textWeight}
+                >
+                  {text}
+                </Text>
+              </Box>
+            )}
+
+            {IconRightComponent && (
+              <Text size={fontSize}>
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+              </Text>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {children && (
+        <Box as="span" {...boxProps}>
+          {children}
+        </Box>
+      )}
+    </StyledButton>
+  )
+})
+ButtonComponent.displayName = 'ForwardRef(Button)'
+
+/**
+ * @public
+ */
+export const Button = ButtonComponent as unknown as <E extends ElementType = 'button'>(
+  props: ButtonProps<E>,
+) => React.JSX.Element

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

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