@channel.io/bezier-react 4.0.0-next.2 → 4.0.0-next.4

package/dist/types/v3/SmoothCornersBox/index.d.ts

@@ -0,0 +1,3 @@
+export { SmoothCornersBox } from './SmoothCornersBox';
+export type { SmoothCornersBoxProps } from './SmoothCornersBox.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/v3/SmoothCornersBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v3/SmoothCornersBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/types/v3/Spinner/Spinner.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SpinnerProps } from './Spinner.types';
+/**
+ * `Spinner` is a component for indicating loading state.
+ * @example
+ *
+ * ```tsx
+ * <Spinner
+ *   size="m"
+ *   color="icon-neutral"
+ * />
+ * ```
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/types/v3/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/v3/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAMnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,qFAiCnB,CAAA"}

package/dist/types/v3/Spinner/Spinner.types.d.ts

@@ -0,0 +1,5 @@
+import type { BezierComponentProps, SizeProps, V3ColorProps } from "../../types/props";
+export type SpinnerSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+export interface SpinnerProps extends Omit<BezierComponentProps<'div'>, keyof V3ColorProps>, SizeProps<SpinnerSize>, V3ColorProps {
+}
+//# sourceMappingURL=Spinner.types.d.ts.map

package/dist/types/v3/Spinner/Spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../../src/v3/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,SAAS,EACT,YAAY,EACb,0BAAyB;AAE1B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAEvD,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC,EAC3D,SAAS,CAAC,WAAW,CAAC,EACtB,YAAY;CAAG"}

package/dist/types/v3/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/v3/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v3/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/types/v3/Text/Text.d.ts

@@ -0,0 +1,16 @@
+import { type TextProps } from './Text.types';
+/**
+ * `Text` is a component for representing the typography of a design system.
+ * @example
+ *
+ * ```tsx
+ * <Text
+ *   typo="15"
+ *   color="text-neutral"
+ * >
+ *   Hello, Channel!
+ * </Text>
+ * ```
+ */
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Text.d.ts.map

package/dist/types/v3/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/v3/Text/Text.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAQ7C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,mGAiDhB,CAAA"}

package/dist/types/v3/Text/Text.types.d.ts

@@ -0,0 +1,44 @@
+import { type BetaTextSemanticColor, type BetaTypographyFontWeight } from "../../types/beta-tokens";
+import { type BezierComponentProps, type ChildrenProps, type PolymorphicProps, type V3MarginProps } from "../../types/props";
+type Typography = '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '22' | '24' | '30' | '36';
+type TextAlign = 'left' | 'center' | 'right';
+interface TextOwnProps {
+    /**
+     * Typography style of the text.
+     * @default '15'
+     */
+    typo?: Typography;
+    /**
+     * Color of the text. If no value is specified, it inherits the color of the parent element.
+     */
+    color?: BetaTextSemanticColor;
+    /**
+     * Whether the text is bold.
+     * @default false
+     */
+    bold?: boolean;
+    /**
+     * Font weight of the text.
+     * If `bold` and `fontWeight` are used together, `fontWeight` takes precedence.
+     */
+    fontWeight?: BetaTypographyFontWeight;
+    /**
+     * Whether the text is italic.
+     * @default false
+     */
+    italic?: boolean;
+    /**
+     * Whether the text is truncated.
+     * If it is a positive integer, it means the maximum number of lines.
+     * @default false
+     */
+    truncated?: boolean | number;
+    /**
+     * Horizontal alignment of the text.
+     */
+    align?: TextAlign;
+}
+export interface TextProps extends Omit<BezierComponentProps, keyof TextOwnProps>, PolymorphicProps, ChildrenProps, V3MarginProps, TextOwnProps {
+}
+export {};
+//# sourceMappingURL=Text.types.d.ts.map

package/dist/types/v3/Text/Text.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../../src/v3/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC9B,gCAA+B;AAChC,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,0BAAyB;AAE1B,KAAK,UAAU,GACX,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAA;AAER,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE5C,UAAU,YAAY;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAA;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,YAAY,CAAC,EACpD,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY;CAAG"}

package/dist/types/v3/Text/index.d.ts

@@ -0,0 +1,3 @@
+export { Text } from './Text';
+export type { TextProps } from './Text.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/v3/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v3/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA"}

package/dist/types/v3/VStack/VStack.d.ts

@@ -0,0 +1,7 @@
+import type { VStackProps } from './VStack.types';
+/**
+ * `VStack` is a shorthand component equivalent to `Stack` with a vertical direction property.
+ * @see BaseStack
+ */
+export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VStack.d.ts.map

package/dist/types/v3/VStack/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/v3/VStack/VStack.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAQlB,CAAA"}

package/dist/types/v3/VStack/VStack.types.d.ts

@@ -0,0 +1,2 @@
+export type { VStackProps } from "../BaseStack/BaseStack.types";
+//# sourceMappingURL=VStack.types.d.ts.map

package/dist/types/v3/VStack/VStack.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.types.d.ts","sourceRoot":"","sources":["../../../../src/v3/VStack/VStack.types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,qCAA0C"}

package/dist/types/v3/VStack/index.d.ts

@@ -0,0 +1,3 @@
+export { VStack } from './VStack';
+export type { VStackProps } from './VStack.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/v3/VStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v3/VStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/types/v3/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Box';
+export * from './Divider';
+export * from './HStack';
+export * from './Icon';
+export * from './SmoothCornersBox';
+export * from './Spinner';
+export * from './Text';
+export * from './VStack';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/v3/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v3/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAA;AACrB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "4.0.0-next.2",
+  "version": "4.0.0-next.4",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -16,6 +16,11 @@
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs"
     },
+    "./v3": {
+      "types": "./dist/types/v3/index.d.ts",
+      "require": "./dist/cjs/v3/index.js",
+      "import": "./dist/esm/v3/index.mjs"
+    },
     "./styles.css": {
       "require": "./dist/cjs/styles.css",
       "import": "./dist/esm/styles.css"

package/src/components/AlphaButton/Button.module.scss

@@ -63,7 +63,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     padding: 0 10px;
 
     & .ButtonText {
-      padding: 0 4px;
+      padding: 0 3px;
     }
 
     & :is(.ButtonIcon, .Loader) {

package/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -81,7 +81,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     padding: 0 12px;
 
     & .ButtonText {
-      padding: 0 4px;
+      padding: 0 3px;
     }
 
     & :is(.ButtonIcon, .Loader) {

package/src/components/Button/Button.module.scss

@@ -44,6 +44,14 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       padding: 0 14px;
     }
 
+    & :where(.ButtonContent) {
+      gap: 2px;
+    }
+
+    & .ButtonText {
+      padding: 0 3px;
+    }
+
     & :is(.ButtonIcon, .ButtonSpinner) {
       width: 18px;
       height: 18px;
@@ -81,7 +89,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     }
   }
 
-  &:where(.size-m, .size-l, .size-xl) {
+  &:where(.size-l, .size-xl) {
     & :where(.ButtonContent) {
       gap: 2px;
     }

package/src/types/beta-tokens.ts

@@ -32,6 +32,14 @@ export type BetaGlobalColor = RemovePrefix<
   keyof BetaGlobalToken['color']
 >
 
+/**
+ * Global typography font weight tokens
+ */
+export type BetaTypographyFontWeight = RemovePrefix<
+  'typography-font-weight',
+  Extract<keyof BetaGlobalToken['typography'], string>
+>
+
 /**
  * Semantic color tokens (for props)
  */

package/src/types/props-helpers.ts

@@ -17,7 +17,13 @@ import {
   type BetaRadius,
   type BetaZIndex,
 } from './beta-tokens'
-import { type FormFieldSize, type LayoutProps, type MarginProps } from './props'
+import {
+  type FormFieldSize,
+  type LayoutProps,
+  type MarginProps,
+  type V3LayoutProps,
+  type V3MarginProps,
+} from './props'
 import { type Elevation, type Radius, type ZIndex } from './tokens'
 
 export const splitByMarginProps = <Props extends MarginProps>({
@@ -120,6 +126,16 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
   rest,
 ]
 
+export const splitByV3MarginProps = <Props extends V3MarginProps>(
+  props: Props
+): [V3MarginProps, Omit<Props, keyof V3MarginProps>] =>
+  splitByMarginProps(props)
+
+export const splitByV3LayoutProps = <Props extends V3LayoutProps>(
+  props: Props
+): [V3LayoutProps, Omit<Props, keyof V3LayoutProps>] =>
+  splitByLayoutProps(props) as [V3LayoutProps, Omit<Props, keyof V3LayoutProps>]
+
 function getElevationClassName(elevation: Elevation | BetaElevation) {
   return elevationStyles[`elevation-${elevation}`]
 }
@@ -232,6 +248,11 @@ export const getLayoutStyles = ({
   ),
 })
 
+export const getV3MarginStyles = getMarginStyles
+
+export const getV3LayoutStyles = (props: V3LayoutProps) =>
+  getLayoutStyles(props)
+
 export function getFormFieldSizeClassName(size: FormFieldSize) {
   return formFieldSizeStyles[`size-${size}`]
 }

package/src/types/props.ts

@@ -272,6 +272,9 @@ export interface MarginProps {
 type Position = 'absolute' | 'fixed' | 'relative' | 'sticky'
 type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible'
 
+export type V3Position = Position
+export type V3Overflow = Overflow
+
 /**
  * Props for defining layout-related properties of a component, such as padding, size, and position.
  */
@@ -458,6 +461,55 @@ export interface LayoutProps {
   overflowY?: Overflow
 }
 
+export type V3MarginProps = MarginProps
+
+/**
+ * v3 color props mirror ColorProps but only allow beta (v3) semantic color tokens.
+ * TODO: Fold this into ColorProps when legacy token unions are removed for 4.0.0.
+ */
+export interface V3ColorProps {
+  /**
+   * Color from the design system's semantic color.
+   */
+  color?: BetaSemanticColor
+}
+
+/**
+ * v3 layout props mirror LayoutProps while keeping token-typed fields narrow.
+ * TODO: Fold this into LayoutProps when legacy token unions are removed for 4.0.0.
+ */
+export interface V3LayoutProps
+  extends Omit<
+    LayoutProps,
+    'backgroundColor' | 'borderColor' | 'borderRadius' | 'elevation' | 'zIndex'
+  > {
+  /**
+   * the background color of an element.
+   * @default initial
+   */
+  backgroundColor?: BetaBackgroundSemanticColor
+  /**
+   * the border color of an element.
+   * @default initial
+   */
+  borderColor?: BetaBorderSemanticColor
+  /**
+   * the border radius of an element.
+   * @default initial
+   */
+  borderRadius?: BetaRadius
+  /**
+   * the elevation of an element. (box-shadow)
+   * @default initial
+   */
+  elevation?: BetaElevation
+  /**
+   * the z-index of an element.
+   * @default initial
+   */
+  zIndex?: BetaZIndex
+}
+
 /**
  * Enumeration of form field sizes. (TextField, Select)
  */

package/src/v3/BaseStack/BaseStack.module.scss

@@ -0,0 +1,73 @@
+.BaseStack {
+  --b-stack-spacing: initial;
+
+  gap: var(--b-stack-spacing);
+
+  &:where(.display-flex) {
+    display: flex;
+  }
+
+  &:where(.display-inline-flex) {
+    display: inline-flex;
+  }
+
+  &:where(.direction-horizontal) {
+    flex-direction: row;
+
+    &:where(.reverse) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &:where(.direction-vertical) {
+    flex-direction: column;
+
+    &:where(.reverse) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &:where(.justify-start) {
+    justify-content: flex-start;
+  }
+
+  &:where(.justify-end) {
+    justify-content: flex-end;
+  }
+
+  &:where(.justify-center) {
+    justify-content: center;
+  }
+
+  &:where(.justify-stretch) {
+    justify-content: stretch;
+  }
+
+  &:where(.justify-between) {
+    justify-content: space-between;
+  }
+
+  &:where(.align-start) {
+    align-items: flex-start;
+  }
+
+  &:where(.align-end) {
+    align-items: flex-end;
+  }
+
+  &:where(.align-center) {
+    align-items: center;
+  }
+
+  &:where(.align-stretch) {
+    align-items: stretch;
+  }
+
+  &:where(.align-baseline) {
+    align-items: baseline;
+  }
+
+  &:where(.wrap) {
+    flex-wrap: wrap;
+  }
+}

package/src/v3/BaseStack/BaseStack.test.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+
+import { render } from '~/src/utils/test'
+
+import { BaseStack } from './BaseStack'
+import { type BaseStackProps } from './BaseStack.types'
+
+import styles from './BaseStack.module.scss'
+
+describe('BaseStack', () => {
+  const renderBaseStack = (props?: Partial<BaseStackProps>) =>
+    render(
+      <BaseStack
+        direction="horizontal"
+        {...props}
+      >
+        Hello, Channel!
+      </BaseStack>
+    )
+
+  it('should render with default flex style', () => {
+    const { getByText } = renderBaseStack()
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveClass(styles.BaseStack)
+    expect(rendered).toHaveClass(styles['display-flex'])
+    expect(rendered).toHaveClass(styles['direction-horizontal'])
+  })
+
+  it('should render as the given element', () => {
+    const { getByText } = renderBaseStack({ as: 'section' })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered.tagName).toBe('SECTION')
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<HTMLElement>()
+
+    render(
+      <BaseStack
+        ref={ref}
+        direction="horizontal"
+      />
+    )
+
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive layout styles', () => {
+    const { getByText } = renderBaseStack({
+      direction: 'vertical',
+      justify: 'center',
+      align: 'end',
+      spacing: 10,
+      reverse: true,
+      wrap: true,
+      className: 'test-class',
+    })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveClass(styles['direction-vertical'])
+    expect(rendered).toHaveClass(styles['justify-center'])
+    expect(rendered).toHaveClass(styles['align-end'])
+    expect(rendered).toHaveClass(styles.reverse)
+    expect(rendered).toHaveClass(styles.wrap)
+    expect(rendered).toHaveClass('test-class')
+    expect(rendered).toHaveStyle('--b-stack-spacing: 10px')
+  })
+
+  it('should receive margin and layout props', () => {
+    const { getByText } = renderBaseStack({
+      width: '100px',
+      marginTop: 10,
+      style: { backgroundColor: 'red' },
+    })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveStyle('--b-width: 100px')
+    expect(rendered).toHaveStyle('--b-margin-top: 10px')
+    expect(rendered).toHaveStyle('background-color: red')
+  })
+})

package/src/v3/BaseStack/BaseStack.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { createElement, forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import {
+  getV3LayoutStyles,
+  getV3MarginStyles,
+  splitByV3LayoutProps,
+  splitByV3MarginProps,
+} from '~/src/types/props-helpers'
+import { cssDimension } from '~/src/utils/style'
+
+import type { BaseStackProps } from './BaseStack.types'
+
+import styles from './BaseStack.module.scss'
+
+/**
+ * `BaseStack` is a layout component used internally to group elements together and apply a space between them.
+ */
+export const BaseStack = forwardRef<HTMLElement, BaseStackProps>(
+  function BaseStack(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByV3MarginProps(props)
+    const [layoutProps, layoutRest] = splitByV3LayoutProps(marginRest)
+    const marginStyles = getV3MarginStyles(marginProps)
+    const layoutStyles = getV3LayoutStyles(layoutProps)
+
+    const {
+      children,
+      style,
+      className,
+      as = 'div',
+      display = 'flex',
+      direction,
+      justify,
+      align,
+      spacing,
+      reverse,
+      wrap,
+      ...rest
+    } = layoutRest
+
+    return createElement(
+      as,
+      {
+        ref: forwardedRef,
+        style: {
+          '--b-stack-spacing': cssDimension(spacing),
+          ...marginStyles.style,
+          ...layoutStyles.style,
+          ...style,
+        },
+        className: classNames(
+          styles.BaseStack,
+          display && styles[`display-${display}`],
+          direction && styles[`direction-${direction}`],
+          justify && styles[`justify-${justify}`],
+          align && styles[`align-${align}`],
+          reverse && styles.reverse,
+          wrap && styles.wrap,
+          marginStyles.className,
+          layoutStyles.className,
+          className
+        ),
+        'data-testid': 'bezier-stack',
+        ...rest,
+      },
+      children
+    )
+  }
+)

package/src/v3/BaseStack/BaseStack.types.ts

@@ -0,0 +1,59 @@
+import {
+  type BezierComponentProps,
+  type ChildrenProps,
+  type PolymorphicProps,
+  type V3LayoutProps,
+  type V3MarginProps,
+} from '~/src/types/props'
+
+type Display = 'flex' | 'inline-flex'
+
+type Direction = 'horizontal' | 'vertical'
+
+type BaseAlignment = 'start' | 'center' | 'end' | 'stretch'
+type Align = BaseAlignment | 'baseline'
+type Justify = BaseAlignment | 'between'
+
+interface BaseStackOwnProps {
+  /**
+   * Display type of the stack.
+   * @default 'flex'
+   */
+  display?: Display
+  /**
+   * Direction of the stack.
+   */
+  direction: Direction
+  /**
+   * Determines the default aligning of children along the main axis.
+   */
+  justify?: Justify
+  /**
+   * Determines the default aligning of children along the cross axis.
+   */
+  align?: Align
+  /**
+   * Spacing between children.
+   */
+  spacing?: string | number
+  /**
+   * Whether to reverse the order of children.
+   */
+  reverse?: boolean
+  /**
+   * Whether to wrap children to additional rows as needed on small screens.
+   */
+  wrap?: boolean
+}
+
+export interface BaseStackProps
+  extends BezierComponentProps,
+    PolymorphicProps,
+    ChildrenProps,
+    V3LayoutProps,
+    V3MarginProps,
+    BaseStackOwnProps {}
+
+export interface HStackProps extends Omit<BaseStackProps, 'direction'> {}
+
+export interface VStackProps extends Omit<BaseStackProps, 'direction'> {}

package/src/v3/Box/Box.module.scss

@@ -0,0 +1,13 @@
+.Box {
+  &:where(.display-block) {
+    display: block;
+  }
+
+  &:where(.display-inline-block) {
+    display: inline-block;
+  }
+
+  &:where(.display-inline) {
+    display: inline;
+  }
+}