feat(layout-components): add Grid component and rethink other

src/components/Card/Card.tsx

@@ -19,7 +19,9 @@ export type CardTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | '
 export type CardView = SelectionCardView | ContainerCardView;
 export type CardSize = 'm' | 'l';
 
-export interface CardProps extends Omit<BoxProps<'div'>, 'as' | 'onClick'> {
+export interface CardProps
+    extends Omit<BoxProps, 'as'>,
+        Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
     children: React.ReactNode;
     /** Card click handler. Available for type: 'selection', 'action' */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -69,7 +71,6 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
 
     return (
         <Box
-            ref={ref}
             role={isClickable ? 'button' : undefined}
             className={b(
                 {
@@ -83,10 +84,11 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
                 },
                 className,
             )}
-            onClick={handleClick as BoxProps['onClick']}
+            onClick={handleClick}
             onKeyDown={isClickable ? onKeyDown : undefined}
             tabIndex={isClickable ? 0 : undefined}
             {...restProps}
+            ref={ref}
         >
             {children}
         </Box>

src/components/NumberInput/NumericArrows/NumericArrows.tsx

@@ -15,7 +15,7 @@ import './NumericArrows.scss';
 
 const b = block('numeric-arrows');
 
-interface NumericArrowsProps extends React.HTMLAttributes<'div'> {
+interface NumericArrowsProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     size: InputControlSize;
     disabled?: boolean;

src/components/layout/Box/Box.scss

@@ -1,21 +1,6 @@
 @use '../variables.scss' as v;
 
 #{v.$boxBlock} {
+    /** TODO: remove box-sizing */
     box-sizing: border-box;
-
-    &_overflow_hidden {
-        overflow: hidden;
-    }
-
-    &_overflow_auto {
-        overflow: auto;
-    }
-
-    &_overflow_x {
-        overflow: hidden auto;
-    }
-
-    &_overflow_y {
-        overflow: auto hidden;
-    }
 }

src/components/layout/Box/Box.tsx

@@ -1,51 +1,47 @@
+'use client';
+
 import * as React from 'react';
 
-import type {QAProps} from '../../types';
+import type {DOMProps, QAProps} from '../../types';
 import {block} from '../../utils/cn';
-import type {SpacingProps} from '../spacing/spacing';
+import {useStyleProps} from '../hooks/useStyleProps';
+import type {SpacingProps as SpacingPropsDeprecated} from '../spacing/spacing';
 import {sp} from '../spacing/spacing';
+import type {
+    LayoutComponentProps,
+    LayoutProps,
+    PositioningProps,
+    SizingProps,
+    SpacingProps,
+    StylingProps,
+} from '../types';
 
 import './Box.scss';
 
 const b = block('box');
 
 export interface BoxProps<T extends React.ElementType = 'div'>
     extends QAProps,
-        React.HTMLAttributes<T>,
-        React.PropsWithChildren<
-            Pick<
-                React.CSSProperties,
-                | 'width'
-                | 'height'
-                | 'maxHeight'
-                | 'maxWidth'
-                | 'minHeight'
-                | 'minWidth'
-                | 'position'
-            >
-        > {
+        DOMProps,
+        LayoutProps,
+        SpacingProps,
+        SizingProps,
+        PositioningProps,
+        StylingProps {
     as?: T;
-    /**
-     * Add overflow css properties to container
-     */
-    overflow?: 'hidden' | 'x' | 'y' | 'auto';
-    className?: string;
     /**
      * All spacing shortcut properties available here.
      * ```tsx
      * <Box spacing={{mr: 3, pb: 2}}>...<Box>
      * // margin-right: 12px
      * // padding-bottom: 8px
      * ```
+     * @deprecated use `<Box marginInlineStart="spacing-3" paddingBlockEnd="spacing-2">...<Box>` instead
      */
-    spacing?: SpacingProps;
+    spacing?: SpacingPropsDeprecated;
+    children?: React.ReactNode;
 }
 
-type BoxRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-
-type BoxPropsWithTypedAttrs<T extends React.ElementType> = BoxProps<T> &
-    Omit<React.ComponentPropsWithoutRef<T>, keyof BoxProps<T>>;
-
 /**
  * Basic block to build other components and for standalone usage as a smart block with build in support of most usable css properties and shortcut `spacing` properties.
  * ```tsx
@@ -57,50 +53,22 @@ type BoxPropsWithTypedAttrs<T extends React.ElementType> = BoxProps<T> &
  * </Box>
  * ```
  */
-export const Box = React.forwardRef(function Box<T extends React.ElementType = 'div'>(
-    {
-        as,
-        children,
-        qa,
-        className,
-        width,
-        height,
-        minWidth,
-        minHeight,
-        maxHeight,
-        maxWidth,
-        position,
-        style: outerStyle,
-        spacing,
-        overflow,
-        ...props
-    }: BoxProps<T>,
-    ref?: BoxRef<T>,
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>(function Box(
+    {as, qa, spacing, ...props},
+    ref,
 ) {
     const Tag: React.ElementType = as || 'div';
 
-    const style: React.CSSProperties = {
-        width,
-        height,
-        minWidth,
-        minHeight,
-        maxHeight,
-        maxWidth,
-        position,
-        ...outerStyle,
-    };
+    const {className, ...otherProps} = useStyleProps(props);
 
     return (
         <Tag
-            {...props}
+            {...otherProps}
             data-qa={qa}
-            style={style}
+            className={b(null, spacing ? sp(spacing, className) : className)}
             ref={ref}
-            className={b({overflow}, spacing ? sp(spacing, className) : className)}
-        >
-            {children}
-        </Tag>
+        />
     );
 }) as (<C extends React.ElementType = 'div'>(
-    props: BoxPropsWithTypedAttrs<C> & {ref?: BoxRef<C>},
+    props: LayoutComponentProps<C, BoxProps<C>>,
 ) => React.ReactElement) & {displayName: string};