@seed-design/react 0.0.14 → 0.0.17

package/lib/components/ActionButton/ActionButton.cjs

@@ -9,6 +9,7 @@ const clsx = require('clsx');
 const React = require('react');
 const Icon = require('../Icon/Icon.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+const styled = require('../../utils/styled.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -33,6 +34,7 @@ const ActionButton = React__namespace.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton.actionButton({ variant, layout, size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = styled.useStyleProps(otherProps);
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
@@ -43,8 +45,9 @@ const ActionButton = React__namespace.forwardRef(
       {
         ref,
         className: clsx(recipeClassName, className),
+        style,
         ...api.stateProps,
-        ...otherProps,
+        ...restProps,
         children
       }
     ) }) });

package/lib/components/ActionButton/ActionButton.d.ts

@@ -1,8 +1,9 @@
 import { ActionButtonVariantProps } from '@seed-design/css/recipes/action-button';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
+import { StyleProps } from '../../utils/styled';
 import * as React from "react";
-export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, Pick<StyleProps, "flexGrow">, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ActionButton.d.ts.map

package/lib/components/ActionButton/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA6BxB,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA+BxB,CAAC"}

package/lib/components/ActionButton/ActionButton.js

@@ -5,11 +5,13 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { IconRequired } from '../Icon/Icon.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+import { useStyleProps } from '../../utils/styled.js';
 
 const ActionButton = React.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = useStyleProps(otherProps);
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
@@ -20,8 +22,9 @@ const ActionButton = React.forwardRef(
       {
         ref,
         className: clsx(recipeClassName, className),
+        style,
         ...api.stateProps,
-        ...otherProps,
+        ...restProps,
         children
       }
     ) }) });

package/lib/components/Columns/Columns.cjs

@@ -33,7 +33,7 @@ const Columns = React__namespace.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "nowrap",
-      justifyContent: "flexStart",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/Columns/Columns.d.ts

@@ -1,10 +1,22 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
     width?: BoxProps["width"] | "content";
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Columns.d.ts.map

package/lib/components/Columns/Columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../src/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAEhF,eAAO,MAAM,OAAO,qFAWlB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACvC;AAGD,eAAO,MAAM,MAAM,oFAcjB,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../src/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAEhF;;GAEG;AACH,eAAO,MAAM,OAAO,qFAWlB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,oFAcjB,CAAC"}

package/lib/components/Columns/Columns.js

@@ -10,7 +10,7 @@ const Columns = React.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "nowrap",
-      justifyContent: "flexStart",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/Divider/Divider.cjs

@@ -26,15 +26,16 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Divider = React__namespace.forwardRef((props, ref) => {
-  const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box.Box,
     {
       ref,
       as,
       display: "block",
-      borderColor,
-      borderWidth,
+      borderColor: color,
+      borderWidth: 0,
+      borderBottomWidth: thickness,
       ...rest
     }
   );

package/lib/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
-export interface DividerProps extends Omit<BoxProps, "display"> {
+export interface DividerProps {
     /**
      * @default "hr"
      */
@@ -8,11 +8,11 @@ export interface DividerProps extends Omit<BoxProps, "display"> {
     /**
      * @default "stroke.neutral"
      */
-    borderColor?: BoxProps["borderColor"];
+    color?: BoxProps["borderColor"];
     /**
      * @default 1
      */
-    borderWidth?: BoxProps["borderWidth"];
+    thickness?: BoxProps["borderBottomWidth"];
 }
 export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
 //# sourceMappingURL=Divider.d.ts.map

package/lib/components/Divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7D;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,OAAO,oFAalB,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oFAclB,CAAC"}

package/lib/components/Divider/Divider.js

@@ -3,15 +3,16 @@ import * as React from 'react';
 import { Box } from '../Box/Box.js';
 
 const Divider = React.forwardRef((props, ref) => {
-  const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Box,
     {
       ref,
       as,
       display: "block",
-      borderColor,
-      borderWidth,
+      borderColor: color,
+      borderWidth: 0,
+      borderBottomWidth: thickness,
       ...rest
     }
   );

package/lib/components/Flex/Flex.cjs

@@ -26,8 +26,21 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Flex = React__namespace.forwardRef((props, ref) => {
-  const { direction, wrap, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref, display: "flex", flexDirection: direction, flexWrap: wrap, ...rest });
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      ref,
+      display: "flex",
+      flexDirection: direction,
+      flexWrap: wrap === true ? "wrap" : wrap,
+      alignItems: align,
+      justifyContent: justify,
+      flexGrow: grow === true ? 1 : grow,
+      flexShrink: shrink,
+      ...rest
+    }
+  );
 });
 
 exports.Flex = Flex;

package/lib/components/Flex/Flex.d.ts

@@ -5,8 +5,32 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
      * @default "flex"
      */
     display?: "flex" | "none";
-    direction?: "row" | "column" | "rowReverse" | "columnReverse";
-    wrap?: "wrap" | "nowrap";
+    /**
+     * Shorthand for `flexDirection`.
+     */
+    direction?: BoxProps["flexDirection"];
+    /**
+     * Shorthand for `flexWrap`.
+     * If true, flex-wrap will be set to `wrap`.
+     */
+    wrap?: BoxProps["flexWrap"] | true;
+    /**
+     * Shorthand for `alignItems`.
+     */
+    align?: BoxProps["alignItems"];
+    /**
+     * Shorthand for `justifyContent`.
+     */
+    justify?: BoxProps["justifyContent"];
+    /**
+     * Shorthand for `flexGrow`.
+     * If true, flex-grow will be set to `1`.
+     */
+    grow?: BoxProps["flexGrow"] | true;
+    /**
+     * Shorthand for `flexShrink`.
+     */
+    shrink?: BoxProps["flexShrink"];
 }
 export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAE9D,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,kFAIf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAErC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,IAAI,kFAgBf,CAAC"}

package/lib/components/Flex/Flex.js

@@ -3,8 +3,21 @@ import * as React from 'react';
 import { Box } from '../Box/Box.js';
 
 const Flex = React.forwardRef((props, ref) => {
-  const { direction, wrap, ...rest } = props;
-  return /* @__PURE__ */ jsx(Box, { ref, display: "flex", flexDirection: direction, flexWrap: wrap, ...rest });
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      display: "flex",
+      flexDirection: direction,
+      flexWrap: wrap === true ? "wrap" : wrap,
+      alignItems: align,
+      justifyContent: justify,
+      flexGrow: grow === true ? 1 : grow,
+      flexShrink: shrink,
+      ...rest
+    }
+  );
 });
 
 export { Flex };

package/lib/components/Inline/Inline.cjs

@@ -33,8 +33,8 @@ const Inline = React__namespace.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
-      alignItems: "flexStart",
-      justifyContent: "flexStart",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/Inline/Inline.d.ts

@@ -1,6 +1,12 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface InlineProps extends Omit<BoxProps, "display" | "direction" | "flexWrap"> {
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Inline: React.ForwardRefExoticComponent<InlineProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Inline.d.ts.map

package/lib/components/Inline/Inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAAG;AAE5F,eAAO,MAAM,MAAM,oFAYjB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAAG;AAE5F;;GAEG;AACH,eAAO,MAAM,MAAM,oFAYjB,CAAC"}

package/lib/components/Inline/Inline.js

@@ -10,8 +10,8 @@ const Inline = React.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
-      alignItems: "flexStart",
-      justifyContent: "flexStart",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/SelectBox/CheckSelectBox.d.ts

@@ -6,7 +6,7 @@ export interface CheckSelectBoxGroupProps extends PrimitiveProps, React.HTMLAttr
 }
 /**
  * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <Stack> under it is recommended.
+ * It does not have spacing by default, nesting <VStack> under it is recommended.
  */
 export declare const CheckSelectBoxGroup: ForwardRefExoticComponent<CheckSelectBoxGroupProps & RefAttributes<HTMLDivElement>>;
 export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {

package/lib/components/Stack/Stack.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Box = require('../Box/Box.cjs');
+const Flex = require('../Flex/Flex.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,7 +26,15 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Stack = React__namespace.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref, display: "flex", flexDirection: "column", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const VStack = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const HStack = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "row", ...props });
 });
 
+exports.HStack = HStack;
 exports.Stack = Stack;
+exports.VStack = VStack;

package/lib/components/Stack/Stack.d.ts

@@ -1,6 +1,18 @@
-import { BoxProps } from '../Box/Box';
+import { FlexProps } from '../Flex';
 import * as React from "react";
-export interface StackProps extends Omit<BoxProps, "display" | "direction"> {
+/**
+ * @deprecated Use `VStack` instead.
+ */
+export interface StackProps extends Omit<FlexProps, "flexDirection"> {
 }
+/**
+ * @deprecated Use `VStack` instead.
+ */
 export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export interface VStackProps extends Omit<FlexProps, "flexDirection"> {
+}
+export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<HTMLDivElement>>;
+export interface HStackProps extends Omit<FlexProps, "flexDirection"> {
+}
+export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Stack.d.ts.map

package/lib/components/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAE9E,eAAO,MAAM,KAAK,mFAEhB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAEvE;;GAEG;AACH,eAAO,MAAM,KAAK,mFAEhB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAExE,eAAO,MAAM,MAAM,oFAEjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAExE,eAAO,MAAM,MAAM,oFAEjB,CAAC"}

package/lib/components/Stack/Stack.js

@@ -1,9 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Box } from '../Box/Box.js';
+import { Flex } from '../Flex/Flex.js';
 
 const Stack = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { ref, display: "flex", flexDirection: "column", ...props });
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const VStack = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const HStack = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "row", ...props });
 });
 
-export { Stack };
+export { HStack, Stack, VStack };

package/lib/components/Stack/index.cjs

@@ -6,4 +6,6 @@ const Stack = require('./Stack.cjs');
 
 
 
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;

package/lib/components/Stack/index.d.ts

@@ -1,2 +1,2 @@
-export { Stack, type StackProps } from './Stack';
+export { Stack, VStack, HStack, type StackProps, type VStackProps, type HStackProps, } from './Stack';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC"}

package/lib/components/Stack/index.js

@@ -1 +1 @@
-export { Stack } from './Stack.js';
+export { HStack, Stack, VStack } from './Stack.js';

package/lib/components/index.cjs

@@ -242,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/components/index.js

@@ -74,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './Stack/Stack.js';
+export { HStack, Stack, VStack } from './Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './Switch/Switch.js';
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };

package/lib/index.cjs

@@ -242,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/index.js

@@ -74,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './components/Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './components/Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './components/Stack/Stack.js';
+export { HStack, Stack, VStack } from './components/Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './components/Switch/Switch.js';
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };

package/lib/utils/styled.cjs

@@ -11,7 +11,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.vars.$color[type][value] ?? void 0;
+  return vars.vars.$color[type]?.[value] ?? color;
 }
 function handleDimension(dimension) {
   if (dimension == null) {
@@ -36,52 +36,94 @@ function handleDisplay(display) {
   if (!display) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (display === "inlineFlex" || display === "inlineBlock") {
+      console.warn(
+        `[SEED Design System] ${display} is deprecated. Use inline-flex or inline-block instead.`
+      );
+    }
+  }
   return {
-    block: "block",
     flex: "flex",
     inlineFlex: "inline-flex",
-    inline: "inline",
+    // @deprecated Use `inline-flex` instead.
     inlineBlock: "inline-block",
+    // @deprecated Use `inline-block` instead.
     none: "none"
-  }[display];
+  }[display] ?? display;
 }
 function handleFlexDirection(flexDirection) {
   if (!flexDirection) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
+      console.warn(
+        `[SEED Design System] ${flexDirection} is deprecated. Use row-reverse or column-reverse instead.`
+      );
+    }
+  }
   return {
     row: "row",
     column: "column",
     rowReverse: "row-reverse",
+    // @deprecated Use `row-reverse` instead.
     columnReverse: "column-reverse"
-  }[flexDirection];
+    // @deprecated Use `column-reverse` instead.
+  }[flexDirection] ?? flexDirection;
 }
 function handleJustifyContent(justifyContent) {
   if (!justifyContent) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+    if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use space-between or space-around instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     spaceBetween: "space-between",
+    // @deprecated Use `space-between` instead.
     spaceAround: "space-around"
-  }[justifyContent];
+    // @deprecated Use `space-around` instead.
+  }[justifyContent] ?? justifyContent;
 }
 function handleAlignItems(alignItems) {
   if (!alignItems) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (alignItems === "flexStart" || alignItems === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${alignItems} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     stretch: "stretch"
-  }[alignItems];
+  }[alignItems] ?? alignItems;
 }
 function useStyleProps(props) {
   const {
     background,
+    bg,
     color,
     borderColor,
     borderWidth,
@@ -107,6 +149,13 @@ function useStyleProps(props) {
     paddingRight,
     paddingBottom,
     paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
     bottom,
     left,
     right,
@@ -129,7 +178,7 @@ function useStyleProps(props) {
   } = props;
   return {
     style: {
-      "--seed-box-background": handleColor(background),
+      "--seed-box-background": handleColor(background ?? bg),
       "--seed-box-color": handleColor(color),
       "--seed-box-border-color": handleColor(borderColor),
       "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
@@ -148,13 +197,13 @@ function useStyleProps(props) {
       "--seed-box-height": handleDimension(height),
       "--seed-box-min-height": handleDimension(minHeight),
       "--seed-box-max-height": handleDimension(maxHeight),
-      "--seed-box-padding": handleDimension(padding),
-      "--seed-box-padding-x": handleDimension(paddingX),
-      "--seed-box-padding-y": handleDimension(paddingY),
-      "--seed-box-padding-top": handleDimension(paddingTop),
-      "--seed-box-padding-right": handleDimension(paddingRight),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom),
-      "--seed-box-padding-left": handleDimension(paddingLeft),
+      "--seed-box-padding": handleDimension(padding ?? p),
+      "--seed-box-padding-x": handleDimension(paddingX ?? px),
+      "--seed-box-padding-y": handleDimension(paddingY ?? py),
+      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
+      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-top": top,
       "--seed-box-left": left,
       "--seed-box-right": right,