release

packages/react/.storybook/main.ts

@@ -1,6 +1,8 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 
 import { dirname, join } from 'path'
+import { mergeConfig } from 'vite'
+import * as path from 'node:path'
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -26,5 +28,12 @@ const config: StorybookConfig = {
     docs: {
         autodocs: 'tag',
     },
+    viteFinal(config) {
+        return mergeConfig(config, {
+            alias: {
+                '@': path.resolve('../src'),
+            },
+        })
+    },
 }
 export default config

packages/react/package.json

@@ -28,7 +28,9 @@
     "lodash": "^4.17.21",
     "polished": "^4.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-merge-refs": "^2.1.1",
+    "vite-plugin-dts": "^4.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",

packages/react/src/README.md

@@ -0,0 +1,43 @@
+# Tracking potential issues
+
+## Types Inlining issue
+
+Some types may become inlined when building definition files, which can cause them to become unreasonably large.
+
+Here are related GitHub issues:
+
+* https://github.com/microsoft/TypeScript/issues/37151
+* https://github.com/chakra-ui/chakra-ui/issues/1445
+
+Here are ways to fix it:
+
+* https://github.com/chakra-ui/chakra-ui/pull/1475#pullrequestreview-461757616
+
+Type inlining may occur:
+
+* When passing type parameters to a few specific functions
+    * ```typescript 
+      type MyCompProps = { hello: string, world: number }
+      const MyComp = forwardRef<HTMLDivElement, MyCompProps>()
+      ```
+        * The solution is to not use type parameters for these functions:
+          ```typescript
+          const MyComp: FRC<HTMLDivElement, MyCompProps> = forwardRef()
+          ```
+* When passing a complex (union, intersection, typeof...) type parameter to a function
+    * ```typescript
+      const definePartialProps = createPartial<typeof { hello: string, world: number }>()
+      ```
+        * The solution is to pass the reference to a complex type instead of the complex type itself:
+          ```typescript
+          type PartialObject = typeof { hello: string, world: number }
+          const definePartialProps = createPartial<PartialObject>()
+          ```
+
+## Long compilation time
+
+This section is not caused by Bearmean but is something you might encounter as you build a UI library.
+
+If you encounter a long compilation time, I recommend checking the performance tracking section of the TypeScript Wiki
+to help find the
+issue: https://github.com/microsoft/TypeScript/wiki/Performance-Tracing

packages/react/src/components/layout/aspect/aspect.shared.ts

@@ -1,6 +1,6 @@
 import { ElementType, HTMLAttributes } from 'react'
 import { Properties } from 'csstype'
-import { defineProps, PropsDefinition } from '@/utils/component'
+import { defineProps, PropsDefinition, PropsDefinitionWithDefaults } from '@/utils/component'
 import { boxPropsDefinition } from '@/components/layout/box'
 import { Ratio } from '@/tokens'
 
@@ -11,8 +11,9 @@ export const aspectPropsDefinition = defineProps(({ optional }) => ({
 
 export type AspectPropsDefinition = typeof aspectPropsDefinition
 
-export type AspectProps = HTMLAttributes<HTMLDivElement> &
-    PropsDefinition<AspectPropsDefinition> & {
-        asChild?: boolean
-        as?: ElementType
-    }
+export interface AspectProps extends HTMLAttributes<HTMLDivElement>, PropsDefinition<AspectPropsDefinition> {
+    asChild?: boolean
+    as?: ElementType
+}
+
+export type AspectPropsWithDefaults = PropsDefinitionWithDefaults<AspectPropsDefinition>

packages/react/src/components/layout/aspect/aspect.styled.tsx

@@ -1,12 +1,11 @@
 import styled from '@emotion/styled'
-import { AspectPropsDefinition } from './aspect.shared'
+import { AspectPropsWithDefaults } from './aspect.shared'
 import { StBox } from '@/components/layout/box'
 import { ratio as _ratio } from '@/tokens'
 import { getRawValue, StyledProps } from '@/utils/css-in-js'
 import isUndefined from 'lodash/isUndefined'
-import { PropsDefinitionWithDefaults } from '@/utils'
 
-export const StAspect = styled(StBox)<StyledProps<PropsDefinitionWithDefaults<AspectPropsDefinition>>>((context) => {
+export const StAspect = styled(StBox)<StyledProps<AspectPropsWithDefaults>>((context) => {
     const {
         theme: { ratio = _ratio },
         styled: { ratio: ratioProp },

packages/react/src/components/layout/aspect/aspect.tsx

@@ -2,9 +2,9 @@ import { forwardRef, useMemo } from 'react'
 import { StAspect } from './aspect.styled'
 import { AspectProps, aspectPropsDefinition } from './aspect.shared'
 import { Slot } from '@radix-ui/react-slot'
-import { useDefinitionProps } from '@/utils/component'
+import { FRC, useDefinitionProps } from '@/utils/component'
 
-export const Aspect = forwardRef<HTMLDivElement, AspectProps>(function Aspect(props, forwardedRef) {
+export const Aspect: FRC<HTMLDivElement, AspectProps> = forwardRef(function Aspect(props, forwardedRef) {
     const [aspectProps, { children, asChild, ...htmlProps }] = useDefinitionProps(props, aspectPropsDefinition)
     const Comp = useMemo(() => (asChild ? StAspect.withComponent(Slot) : StAspect), [asChild])
     return (

packages/react/src/components/layout/box/box.shared.ts

@@ -1,7 +1,7 @@
 import { ElementType, HTMLAttributes } from 'react'
 import { BorderRadius, BorderStyle, BorderWidth, Color, Elevation, PositiveSpacing, Spacing } from '@/tokens'
 import { Properties } from 'csstype'
-import { defineProps, PropsDefinition } from '@/utils/component'
+import { defineProps, PropsDefinition, PropsDefinitionWithDefaults } from '@/utils/component'
 
 export type MarginSpacing = Spacing | Properties['margin'] | number
 export type PaddingSpacing = PositiveSpacing | Properties['padding'] | number
@@ -31,6 +31,7 @@ export const boxPropsDefinition = defineProps(({ optional }) => ({
     mr: optional<MarginSpacing>(),
     mt: optional<MarginSpacing>(),
     mb: optional<MarginSpacing>(),
+    basis: optional<'full' | Properties['flexBasis'] | number>(),
     grow: optional<Properties['flexGrow'] | boolean>(),
     shrink: optional<Properties['flexShrink'] | boolean>(),
     br: optional<BorderRadius | Properties['borderRadius'] | number>(),
@@ -55,8 +56,9 @@ export const boxPropsDefinition = defineProps(({ optional }) => ({
 
 export type BoxPropsDefinition = typeof boxPropsDefinition
 
-export type BoxProps = HTMLAttributes<HTMLDivElement> &
-    PropsDefinition<BoxPropsDefinition> & {
-        asChild?: boolean
-        as?: ElementType
-    }
+export interface BoxProps extends HTMLAttributes<HTMLDivElement>, PropsDefinition<BoxPropsDefinition> {
+    asChild?: boolean
+    as?: ElementType
+}
+
+export type BoxPropsWithDefaults = PropsDefinitionWithDefaults<BoxPropsDefinition>

packages/react/src/components/layout/box/box.styled.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { BoxPropsDefinition } from './box.shared'
+import { BoxPropsWithDefaults } from './box.shared'
 import {
     borderRadius as _borderRadius,
     borderStyle as _borderStyle,
@@ -11,13 +11,13 @@ import {
 import get from 'lodash/get'
 import { getRawValue, getRemValue, StyledProps } from '@/utils/css-in-js'
 import isUndefined from 'lodash/isUndefined'
-import { PropsDefinitionWithDefaults } from '@/utils'
 
-export const StBox = styled('div')<StyledProps<PropsDefinitionWithDefaults<BoxPropsDefinition>>>((context) => {
+export const StBox = styled('div')<StyledProps<BoxPropsWithDefaults>>((context) => {
     const {
         theme: { spacing = _spacing, colors = _colors, borderRadius = _borderRadius, borderStyle = _borderStyle, borderWidth = _borderWidth },
         styled: {
             display,
+            basis,
             grow,
             shrink,
             opacity,
@@ -71,6 +71,9 @@ export const StBox = styled('div')<StyledProps<PropsDefinitionWithDefaults<BoxPr
         !isUndefined(display) && {
             display,
         },
+        !isUndefined(basis) && {
+            flexBasis: basis === 'full' ? '100%' : getRemValue(basis),
+        },
         !isUndefined(grow) && {
             flexGrow: Number(grow),
         },

packages/react/src/components/layout/box/box.tsx

@@ -2,9 +2,9 @@ import { forwardRef, useMemo } from 'react'
 import { StBox } from './box.styled'
 import { BoxProps, boxPropsDefinition } from './box.shared'
 import { Slot } from '@radix-ui/react-slot'
-import { useDefinitionProps } from '@/utils/component'
+import { FRC, useDefinitionProps } from '@/utils/component'
 
-export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(props, forwardedRef) {
+export const Box: FRC<HTMLDivElement, BoxProps> = forwardRef(function Box(props, forwardedRef) {
     const [boxProps, { children, asChild, ...htmlProps }] = useDefinitionProps(props, boxPropsDefinition)
     const Comp = useMemo(() => (asChild ? StBox.withComponent(Slot) : StBox), [asChild])
     return (

packages/react/src/components/layout/center/center.shared.ts

@@ -1,5 +1,5 @@
 import { ElementType, HTMLAttributes } from 'react'
-import { defineProps, PropsDefinition } from '@/utils/component'
+import { defineProps, PropsDefinition, PropsDefinitionWithDefaults } from '@/utils/component'
 import { boxPropsDefinition } from '@/components/layout/box'
 
 export const centerPropsDefinition = defineProps(({ optional }) => ({
@@ -9,8 +9,9 @@ export const centerPropsDefinition = defineProps(({ optional }) => ({
 
 export type CenterPropsDefinition = typeof centerPropsDefinition
 
-export type CenterProps = HTMLAttributes<HTMLDivElement> &
-    PropsDefinition<CenterPropsDefinition> & {
-        asChild?: boolean
-        as?: ElementType
-    }
+export interface CenterProps extends HTMLAttributes<HTMLDivElement>, PropsDefinition<CenterPropsDefinition> {
+    asChild?: boolean
+    as?: ElementType
+}
+
+export type CenterPropsWithDefaults = PropsDefinitionWithDefaults<CenterPropsDefinition>

packages/react/src/components/layout/center/center.styled.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled'
-import { CenterPropsDefinition } from './center.shared'
+import { CenterPropsWithDefaults } from './center.shared'
 import { StBox } from '@/components/layout/box'
-import { PropsDefinitionWithDefaults, StyledProps } from '@/utils'
+import { StyledProps } from '@/utils'
 
-export const StCenter = styled(StBox)<StyledProps<PropsDefinitionWithDefaults<CenterPropsDefinition>>>((context) => {
+export const StCenter = styled(StBox)<StyledProps<CenterPropsWithDefaults>>((context) => {
     const {
         styled: { inline },
     } = context

packages/react/src/components/layout/center/center.tsx

@@ -2,9 +2,9 @@ import { forwardRef, useMemo } from 'react'
 import { StCenter } from './center.styled'
 import { CenterProps, centerPropsDefinition } from './center.shared'
 import { Slot } from '@radix-ui/react-slot'
-import { useDefinitionProps } from '@/utils/component'
+import { FRC, useDefinitionProps } from '@/utils/component'
 
-export const Center = forwardRef<HTMLDivElement, CenterProps>(function Center(props, forwardedRef) {
+export const Center: FRC<HTMLDivElement, CenterProps> = forwardRef(function Center(props, forwardedRef) {
     const [centerProps, { children, asChild, ...htmlProps }] = useDefinitionProps(props, centerPropsDefinition)
     const Comp = useMemo(() => (asChild ? StCenter.withComponent(Slot) : StCenter), [asChild])
     return (

packages/react/src/components/layout/container/container.shared.ts

@@ -1,5 +1,5 @@
 import { ElementType, HTMLAttributes } from 'react'
-import { defineProps, PropsDefinition } from '@/utils/component'
+import { defineProps, PropsDefinition, PropsDefinitionWithDefaults } from '@/utils/component'
 import { boxPropsDefinition } from '@/components/layout/box'
 import { Screen, Screens } from '@/tokens'
 
@@ -12,8 +12,9 @@ export const containerPropsDefinition = defineProps(({ optional }) => ({
 
 export type ContainerPropsDefinition = typeof containerPropsDefinition
 
-export type ContainerProps = HTMLAttributes<HTMLDivElement> &
-    PropsDefinition<ContainerPropsDefinition> & {
-        asChild?: boolean
-        as?: ElementType
-    }
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement>, PropsDefinition<ContainerPropsDefinition> {
+    asChild?: boolean
+    as?: ElementType
+}
+
+export type ContainerPropsWithDefaults = PropsDefinitionWithDefaults<ContainerPropsDefinition>

packages/react/src/components/layout/container/container.styled.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled'
-import { ContainerPropsDefinition } from './container.shared'
+import { ContainerPropsWithDefaults } from './container.shared'
 import { StBox } from '@/components/layout/box'
 import { rem } from 'polished'
-import { PropsDefinitionWithDefaults, StyledProps } from '@/utils'
+import { StyledProps } from '@/utils'
 import { Screen, Screens, screens as _screens } from '@/tokens'
 
-export const StContainer = styled(StBox)<StyledProps<PropsDefinitionWithDefaults<ContainerPropsDefinition>>>((context) => {
+export const StContainer = styled(StBox)<StyledProps<ContainerPropsWithDefaults>>((context) => {
     const {
         theme: { screens = _screens },
         styled: { fluid, size, breakpoints = screens },

packages/react/src/components/layout/container/container.tsx

@@ -2,9 +2,9 @@ import { forwardRef, useMemo } from 'react'
 import { StContainer } from './container.styled'
 import { ContainerProps, containerPropsDefinition } from './container.shared'
 import { Slot } from '@radix-ui/react-slot'
-import { useDefinitionProps } from '@/utils/component'
+import { FRC, useDefinitionProps } from '@/utils/component'
 
-export const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(props, forwardedRef) {
+export const Container: FRC<HTMLDivElement, ContainerProps> = forwardRef(function Container(props, forwardedRef) {
     const [containerProps, { children, asChild, ...htmlProps }] = useDefinitionProps(props, containerPropsDefinition)
     const Comp = useMemo(() => (asChild ? StContainer.withComponent(Slot) : StContainer), [asChild])
     return (

packages/react/src/components/layout/divider/divider.shared.ts

@@ -1,14 +1,18 @@
 import { ElementType, HTMLAttributes } from 'react'
 import { boxPropsDefinition } from '@/components/layout/box'
 import { createPartial } from '@/utils/object'
-import { defineProps, PropsDefinition } from '@/utils/component'
+import { defineProps, PropsDefinition, PropsDefinitionWithDefaults } from '@/utils/component'
 
-export const dividerPropsDefinitionWithoutVariants = defineProps(({ optional }) => ({
+export const dividerWithoutVariantsPropsDefinition = defineProps(({ optional }) => ({
     ...boxPropsDefinition,
     size: optional<number>(1),
 }))
 
-const definePartialProps = createPartial<PropsDefinition<typeof dividerPropsDefinitionWithoutVariants>>()
+export type DividerWithoutVariantsPropsDefinition = typeof dividerWithoutVariantsPropsDefinition
+
+export type DividerWithoutVariantsProps = PropsDefinition<DividerWithoutVariantsPropsDefinition>
+
+const definePartialProps = createPartial<DividerWithoutVariantsProps>()
 
 export const dividerVariants = {
     horizontal: definePartialProps({
@@ -22,13 +26,14 @@ export const dividerVariants = {
 } as const
 
 export const dividerPropsDefinition = defineProps(({ optional }) => ({
-    ...dividerPropsDefinitionWithoutVariants,
+    ...dividerWithoutVariantsPropsDefinition,
     variant: optional<keyof typeof dividerVariants>(),
 }))
 
 export type DividerPropsDefinition = typeof dividerPropsDefinition
 
-export type DividerProps = HTMLAttributes<HTMLDivElement> &
-    PropsDefinition<DividerPropsDefinition> & {
-        as?: ElementType
-    }
+export interface DividerProps extends HTMLAttributes<HTMLDivElement>, PropsDefinition<DividerPropsDefinition> {
+    as?: ElementType
+}
+
+export type DividerPropsWithDefaults = PropsDefinitionWithDefaults<DividerPropsDefinition>

packages/react/src/components/layout/divider/divider.styled.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled'
-import { DividerPropsDefinition } from './divider.shared'
+import { DividerPropsWithDefaults } from './divider.shared'
 import { StBox } from '@/components/layout/box'
 import { rem } from 'polished'
 import { colors as _colors } from '@/tokens'
 import get from 'lodash/get'
-import { PropsDefinitionWithDefaults, StyledProps } from '@/utils'
+import { StyledProps } from '@/utils'
 
-export const StDivider = styled(StBox)<StyledProps<PropsDefinitionWithDefaults<DividerPropsDefinition>>>((context) => {
+export const StDivider = styled(StBox)<StyledProps<DividerPropsWithDefaults>>((context) => {
     const {
         theme: { colors = _colors },
         styled: { variant = 'horizontal', size, bs = 'solid', bc = 'slate.100' },

packages/react/src/components/layout/divider/divider.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react'
 import { StDivider } from './divider.styled'
 import { DividerProps, dividerPropsDefinition, dividerVariants } from './divider.shared'
-import { useDefinitionProps, useVariantProps } from '@/utils/component'
+import { FRC, useDefinitionProps, useVariantProps } from '@/utils/component'
 
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider({ variant = 'horizontal', ...props }, forwardedRef) {
+export const Divider: FRC<HTMLDivElement, DividerProps> = forwardRef(function Divider({ variant = 'horizontal', ...props }, forwardedRef) {
     const variantProps = useVariantProps(dividerVariants, variant)
     const [dividerProps, { children, ...htmlProps }] = useDefinitionProps(props, dividerPropsDefinition, variantProps)
     return (