@seed-design/react 0.0.14 → 0.0.15

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,

package/lib/utils/styled.d.ts

@@ -3,49 +3,81 @@ import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react
 export declare function handleColor(color: string | undefined): any;
 export declare function handleDimension(dimension: string | 0 | undefined): any;
 export interface StyleProps {
-    background?: ScopedColorBg | ScopedColorPalette;
-    color?: ScopedColorFg | ScopedColorPalette;
-    borderColor?: ScopedColorStroke | ScopedColorPalette;
-    borderWidth?: 0 | 1 | (number & {});
-    borderTopWidth?: 0 | 1 | (number & {});
-    borderRightWidth?: 0 | 1 | (number & {});
-    borderBottomWidth?: 0 | 1 | (number & {});
-    borderLeftWidth?: 0 | 1 | (number & {});
-    borderRadius?: Radius | 0;
-    borderTopLeftRadius?: Radius | 0;
-    borderTopRightRadius?: Radius | 0;
-    borderBottomRightRadius?: Radius | 0;
-    borderBottomLeftRadius?: Radius | 0;
+    background?: ScopedColorBg | ScopedColorPalette | (string & {});
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | (string & {});
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+    borderWidth?: 0 | 1 | (string & {});
+    borderTopWidth?: 0 | 1 | (string & {});
+    borderRightWidth?: 0 | 1 | (string & {});
+    borderBottomWidth?: 0 | 1 | (string & {});
+    borderLeftWidth?: 0 | 1 | (string & {});
+    borderRadius?: Radius | 0 | (string & {});
+    borderTopLeftRadius?: Radius | 0 | (string & {});
+    borderTopRightRadius?: Radius | 0 | (string & {});
+    borderBottomRightRadius?: Radius | 0 | (string & {});
+    borderBottomLeftRadius?: Radius | 0 | (string & {});
     width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
-    top?: 0;
-    left?: 0;
-    right?: 0;
-    bottom?: 0;
-    padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    display?: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none";
+    top?: 0 | (string & {});
+    left?: 0 | (string & {});
+    right?: 0 | (string & {});
+    bottom?: 0 | (string & {});
+    padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `padding`.
+     */
+    p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingX`.
+     */
+    px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingY`.
+     */
+    py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingTop`.
+     */
+    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingRight`.
+     */
+    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingBottom`.
+     */
+    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingLeft`.
+     */
+    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    display?: "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock";
     position?: "relative" | "absolute" | "fixed" | "sticky";
     overflowX?: "visible" | "hidden" | "scroll" | "auto";
     overflowY?: "visible" | "hidden" | "scroll" | "auto";
     flexGrow?: 0 | 1 | (number & {});
     flexShrink?: 0 | (number & {});
-    flexDirection?: "row" | "column" | "rowReverse" | "columnReverse";
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse";
     flexWrap?: "wrap" | "nowrap";
-    justifyContent?: "flexStart" | "flexEnd" | "center" | "spaceBetween" | "spaceAround";
-    alignItems?: "flexStart" | "flexEnd" | "center" | "stretch";
-    alignContent?: "flexStart" | "flexEnd" | "center" | "stretch";
-    alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch";
-    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 }
 interface UseStyleProps extends StyleProps {
     style?: React.CSSProperties;

package/lib/utils/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -7,7 +7,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.$color[type][value] ?? void 0;
+  return vars.$color[type]?.[value] ?? color;
 }
 function handleDimension(dimension) {
   if (dimension == null) {
@@ -32,52 +32,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,
@@ -103,6 +145,13 @@ function useStyleProps(props) {
     paddingRight,
     paddingBottom,
     paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
     bottom,
     left,
     right,
@@ -125,7 +174,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,
@@ -144,13 +193,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,8 @@
   ],
   "scripts": {
     "clean": "rm -rf lib",
-    "build": "vite build"
+    "build": "vite build",
+    "lint:publish": "bun publint"
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.1",
@@ -41,7 +42,7 @@
     "@seed-design/react-avatar": "0.0.1",
     "@seed-design/react-checkbox": "0.0.1",
     "@seed-design/react-dialog": "0.0.2",
-    "@seed-design/react-popover": "0.0.3",
+    "@seed-design/react-popover": "0.0.4",
     "@seed-design/react-primitive": "0.0.1",
     "@seed-design/react-progress": "0.0.1",
     "@seed-design/react-pull-to-refresh": "0.0.2",
@@ -55,12 +56,13 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.14",
+    "@seed-design/css": "0.0.15",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.14",
+    "@seed-design/css": "0.0.15",
+    "@seed-design/qvism-rollup-plugin": "0.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "globby": "^14.1.0",
     "vite": "^6.2.3",

package/src/components/ActionButton/ActionButton.tsx

@@ -11,11 +11,13 @@ import {
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
 
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
     UsePendingButtonProps,
     PrimitiveProps,
+    Pick<StyleProps, "flexGrow">,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -25,6 +27,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
   ) => {
     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(
@@ -38,8 +41,9 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
           <Primitive.button
             ref={ref}
             className={clsx(recipeClassName, className)}
+            style={style}
             {...api.stateProps}
-            {...otherProps}
+            {...restProps}
           >
             {children}
           </Primitive.button>

package/src/components/Columns/Columns.tsx

@@ -1,8 +1,14 @@
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {}
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, ref) => {
   return (
     <Box
@@ -10,17 +16,22 @@ export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, re
       display="flex"
       flexDirection="row"
       flexWrap="nowrap"
-      justifyContent="flexStart"
+      justifyContent="flex-start"
       {...props}
     />
   );
 });
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
   width?: BoxProps["width"] | "content";
 }
 
-// TODO: do we need fractional width support?
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
   const { width, ...otherProps } = props;
 

package/src/components/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface DividerProps extends Omit<BoxProps, "display"> {
+export interface DividerProps {
   /**
    * @default "hr"
    */
@@ -10,24 +10,25 @@ 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 const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
-  const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
 
   return (
     <Box
       ref={ref}
       as={as}
       display="block"
-      borderColor={borderColor}
-      borderWidth={borderWidth}
+      borderColor={color}
+      borderWidth={0}
+      borderBottomWidth={thickness}
       {...rest}
     />
   );

package/src/components/Flex/Flex.tsx

@@ -7,13 +7,53 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
    */
   display?: "flex" | "none";
 
-  direction?: "row" | "column" | "rowReverse" | "columnReverse";
+  /**
+   * 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"];
 
-  wrap?: "wrap" | "nowrap";
+  /**
+   * 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 const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { direction, wrap, ...rest } = props;
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
 
-  return <Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} {...rest} />;
+  return (
+    <Box
+      ref={ref}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap === true ? "wrap" : wrap}
+      alignItems={align}
+      justifyContent={justify}
+      flexGrow={grow === true ? 1 : grow}
+      flexShrink={shrink}
+      {...rest}
+    />
+  );
 });