@seed-design/react 0.0.14 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/lib/components/ActionButton/ActionButton.cjs +4 -1
  2. package/lib/components/ActionButton/ActionButton.d.ts +2 -1
  3. package/lib/components/ActionButton/ActionButton.d.ts.map +1 -1
  4. package/lib/components/ActionButton/ActionButton.js +4 -1
  5. package/lib/components/Columns/Columns.cjs +1 -1
  6. package/lib/components/Columns/Columns.d.ts +12 -0
  7. package/lib/components/Columns/Columns.d.ts.map +1 -1
  8. package/lib/components/Columns/Columns.js +1 -1
  9. package/lib/components/Divider/Divider.cjs +4 -3
  10. package/lib/components/Divider/Divider.d.ts +3 -3
  11. package/lib/components/Divider/Divider.d.ts.map +1 -1
  12. package/lib/components/Divider/Divider.js +4 -3
  13. package/lib/components/Flex/Flex.cjs +15 -2
  14. package/lib/components/Flex/Flex.d.ts +26 -2
  15. package/lib/components/Flex/Flex.d.ts.map +1 -1
  16. package/lib/components/Flex/Flex.js +15 -2
  17. package/lib/components/Inline/Inline.cjs +2 -2
  18. package/lib/components/Inline/Inline.d.ts +6 -0
  19. package/lib/components/Inline/Inline.d.ts.map +1 -1
  20. package/lib/components/Inline/Inline.js +2 -2
  21. package/lib/components/SelectBox/CheckSelectBox.d.ts +1 -1
  22. package/lib/components/Stack/Stack.cjs +10 -2
  23. package/lib/components/Stack/Stack.d.ts +14 -2
  24. package/lib/components/Stack/Stack.d.ts.map +1 -1
  25. package/lib/components/Stack/Stack.js +9 -3
  26. package/lib/components/Stack/index.cjs +2 -0
  27. package/lib/components/Stack/index.d.ts +1 -1
  28. package/lib/components/Stack/index.d.ts.map +1 -1
  29. package/lib/components/Stack/index.js +1 -1
  30. package/lib/components/index.cjs +2 -0
  31. package/lib/components/index.js +1 -1
  32. package/lib/index.cjs +2 -0
  33. package/lib/index.js +1 -1
  34. package/lib/utils/styled.cjs +64 -15
  35. package/lib/utils/styled.d.ts +63 -31
  36. package/lib/utils/styled.d.ts.map +1 -1
  37. package/lib/utils/styled.js +64 -15
  38. package/package.json +6 -5
  39. package/src/components/ActionButton/ActionButton.tsx +5 -1
  40. package/src/components/Columns/Columns.tsx +13 -2
  41. package/src/components/Divider/Divider.tsx +7 -6
  42. package/src/components/Flex/Flex.tsx +44 -4
  43. package/src/components/Inline/Inline.tsx +8 -2
  44. package/src/components/SelectBox/CheckSelectBox.tsx +1 -1
  45. package/src/components/Stack/Stack.tsx +21 -3
  46. package/src/components/Stack/index.ts +8 -1
  47. package/src/utils/styled.tsx +208 -74
package/lib/utils/styled.d.ts CHANGED
@@ -3,49 +3,81 @@ import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react
3
3
  export declare function handleColor(color: string | undefined): any;
4
4
  export declare function handleDimension(dimension: string | 0 | undefined): any;
5
5
  export interface StyleProps {
6
- background?: ScopedColorBg | ScopedColorPalette;
7
- color?: ScopedColorFg | ScopedColorPalette;
8
- borderColor?: ScopedColorStroke | ScopedColorPalette;
9
- borderWidth?: 0 | 1 | (number & {});
10
- borderTopWidth?: 0 | 1 | (number & {});
11
- borderRightWidth?: 0 | 1 | (number & {});
12
- borderBottomWidth?: 0 | 1 | (number & {});
13
- borderLeftWidth?: 0 | 1 | (number & {});
14
- borderRadius?: Radius | 0;
15
- borderTopLeftRadius?: Radius | 0;
16
- borderTopRightRadius?: Radius | 0;
17
- borderBottomRightRadius?: Radius | 0;
18
- borderBottomLeftRadius?: Radius | 0;
6
+ background?: ScopedColorBg | ScopedColorPalette | (string & {});
7
+ /**
8
+ * Shorthand for `background`.
9
+ */
10
+ bg?: ScopedColorBg | ScopedColorPalette | (string & {});
11
+ color?: ScopedColorFg | ScopedColorPalette | (string & {});
12
+ borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
13
+ borderWidth?: 0 | 1 | (string & {});
14
+ borderTopWidth?: 0 | 1 | (string & {});
15
+ borderRightWidth?: 0 | 1 | (string & {});
16
+ borderBottomWidth?: 0 | 1 | (string & {});
17
+ borderLeftWidth?: 0 | 1 | (string & {});
18
+ borderRadius?: Radius | 0 | (string & {});
19
+ borderTopLeftRadius?: Radius | 0 | (string & {});
20
+ borderTopRightRadius?: Radius | 0 | (string & {});
21
+ borderBottomRightRadius?: Radius | 0 | (string & {});
22
+ borderBottomLeftRadius?: Radius | 0 | (string & {});
19
23
  width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
20
24
  minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
21
25
  maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
22
26
  height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
23
27
  minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
24
28
  maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
25
- top?: 0;
26
- left?: 0;
27
- right?: 0;
28
- bottom?: 0;
29
- padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
30
- paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
31
- paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
32
- paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
33
- paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
34
- paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
35
- paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
36
- display?: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none";
29
+ top?: 0 | (string & {});
30
+ left?: 0 | (string & {});
31
+ right?: 0 | (string & {});
32
+ bottom?: 0 | (string & {});
33
+ padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
34
+ /**
35
+ * Shorthand for `padding`.
36
+ */
37
+ p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
38
+ paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
39
+ /**
40
+ * Shorthand for `paddingX`.
41
+ */
42
+ px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
43
+ paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
44
+ /**
45
+ * Shorthand for `paddingY`.
46
+ */
47
+ py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
48
+ paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
49
+ /**
50
+ * Shorthand for `paddingTop`.
51
+ */
52
+ pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
53
+ paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
54
+ /**
55
+ * Shorthand for `paddingRight`.
56
+ */
57
+ pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
58
+ paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
59
+ /**
60
+ * Shorthand for `paddingBottom`.
61
+ */
62
+ pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
63
+ paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
64
+ /**
65
+ * Shorthand for `paddingLeft`.
66
+ */
67
+ pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
68
+ display?: "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock";
37
69
  position?: "relative" | "absolute" | "fixed" | "sticky";
38
70
  overflowX?: "visible" | "hidden" | "scroll" | "auto";
39
71
  overflowY?: "visible" | "hidden" | "scroll" | "auto";
40
72
  flexGrow?: 0 | 1 | (number & {});
41
73
  flexShrink?: 0 | (number & {});
42
- flexDirection?: "row" | "column" | "rowReverse" | "columnReverse";
74
+ flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse";
43
75
  flexWrap?: "wrap" | "nowrap";
44
- justifyContent?: "flexStart" | "flexEnd" | "center" | "spaceBetween" | "spaceAround";
45
- alignItems?: "flexStart" | "flexEnd" | "center" | "stretch";
46
- alignContent?: "flexStart" | "flexEnd" | "center" | "stretch";
47
- alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch";
48
- gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
76
+ justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround";
77
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
78
+ alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
79
+ alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
80
+ gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
49
81
  }
50
82
  interface UseStyleProps extends StyleProps {
51
83
  style?: React.CSSProperties;
package/lib/utils/styled.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
package/lib/utils/styled.js CHANGED
@@ -7,7 +7,7 @@ function handleColor(color) {
7
7
  return void 0;
8
8
  }
9
9
  const [type, value] = color.split(".");
10
- return vars.$color[type][value] ?? void 0;
10
+ return vars.$color[type]?.[value] ?? color;
11
11
  }
12
12
  function handleDimension(dimension) {
13
13
  if (dimension == null) {
@@ -32,52 +32,94 @@ function handleDisplay(display) {
32
32
  if (!display) {
33
33
  return void 0;
34
34
  }
35
+ if (process.env.NODE_ENV !== "production") {
36
+ if (display === "inlineFlex" || display === "inlineBlock") {
37
+ console.warn(
38
+ `[SEED Design System] ${display} is deprecated. Use inline-flex or inline-block instead.`
39
+ );
40
+ }
41
+ }
35
42
  return {
36
- block: "block",
37
43
  flex: "flex",
38
44
  inlineFlex: "inline-flex",
39
- inline: "inline",
45
+ // @deprecated Use `inline-flex` instead.
40
46
  inlineBlock: "inline-block",
47
+ // @deprecated Use `inline-block` instead.
41
48
  none: "none"
42
- }[display];
49
+ }[display] ?? display;
43
50
  }
44
51
  function handleFlexDirection(flexDirection) {
45
52
  if (!flexDirection) {
46
53
  return void 0;
47
54
  }
55
+ if (process.env.NODE_ENV !== "production") {
56
+ if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
57
+ console.warn(
58
+ `[SEED Design System] ${flexDirection} is deprecated. Use row-reverse or column-reverse instead.`
59
+ );
60
+ }
61
+ }
48
62
  return {
49
63
  row: "row",
50
64
  column: "column",
51
65
  rowReverse: "row-reverse",
66
+ // @deprecated Use `row-reverse` instead.
52
67
  columnReverse: "column-reverse"
53
- }[flexDirection];
68
+ // @deprecated Use `column-reverse` instead.
69
+ }[flexDirection] ?? flexDirection;
54
70
  }
55
71
  function handleJustifyContent(justifyContent) {
56
72
  if (!justifyContent) {
57
73
  return void 0;
58
74
  }
75
+ if (process.env.NODE_ENV !== "production") {
76
+ if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
77
+ console.warn(
78
+ `[SEED Design System] ${justifyContent} is deprecated. Use flex-start or flex-end instead.`
79
+ );
80
+ }
81
+ if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
82
+ console.warn(
83
+ `[SEED Design System] ${justifyContent} is deprecated. Use space-between or space-around instead.`
84
+ );
85
+ }
86
+ }
59
87
  return {
60
88
  flexStart: "flex-start",
89
+ // @deprecated Use `flex-start` instead.
61
90
  flexEnd: "flex-end",
91
+ // @deprecated Use `flex-end` instead.
62
92
  center: "center",
63
93
  spaceBetween: "space-between",
94
+ // @deprecated Use `space-between` instead.
64
95
  spaceAround: "space-around"
65
- }[justifyContent];
96
+ // @deprecated Use `space-around` instead.
97
+ }[justifyContent] ?? justifyContent;
66
98
  }
67
99
  function handleAlignItems(alignItems) {
68
100
  if (!alignItems) {
69
101
  return void 0;
70
102
  }
103
+ if (process.env.NODE_ENV !== "production") {
104
+ if (alignItems === "flexStart" || alignItems === "flexEnd") {
105
+ console.warn(
106
+ `[SEED Design System] ${alignItems} is deprecated. Use flex-start or flex-end instead.`
107
+ );
108
+ }
109
+ }
71
110
  return {
72
111
  flexStart: "flex-start",
112
+ // @deprecated Use `flex-start` instead.
73
113
  flexEnd: "flex-end",
114
+ // @deprecated Use `flex-end` instead.
74
115
  center: "center",
75
116
  stretch: "stretch"
76
- }[alignItems];
117
+ }[alignItems] ?? alignItems;
77
118
  }
78
119
  function useStyleProps(props) {
79
120
  const {
80
121
  background,
122
+ bg,
81
123
  color,
82
124
  borderColor,
83
125
  borderWidth,
@@ -103,6 +145,13 @@ function useStyleProps(props) {
103
145
  paddingRight,
104
146
  paddingBottom,
105
147
  paddingLeft,
148
+ p,
149
+ px,
150
+ py,
151
+ pt,
152
+ pr,
153
+ pb,
154
+ pl,
106
155
  bottom,
107
156
  left,
108
157
  right,
@@ -125,7 +174,7 @@ function useStyleProps(props) {
125
174
  } = props;
126
175
  return {
127
176
  style: {
128
- "--seed-box-background": handleColor(background),
177
+ "--seed-box-background": handleColor(background ?? bg),
129
178
  "--seed-box-color": handleColor(color),
130
179
  "--seed-box-border-color": handleColor(borderColor),
131
180
  "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
@@ -144,13 +193,13 @@ function useStyleProps(props) {
144
193
  "--seed-box-height": handleDimension(height),
145
194
  "--seed-box-min-height": handleDimension(minHeight),
146
195
  "--seed-box-max-height": handleDimension(maxHeight),
147
- "--seed-box-padding": handleDimension(padding),
148
- "--seed-box-padding-x": handleDimension(paddingX),
149
- "--seed-box-padding-y": handleDimension(paddingY),
150
- "--seed-box-padding-top": handleDimension(paddingTop),
151
- "--seed-box-padding-right": handleDimension(paddingRight),
152
- "--seed-box-padding-bottom": handleDimension(paddingBottom),
153
- "--seed-box-padding-left": handleDimension(paddingLeft),
196
+ "--seed-box-padding": handleDimension(padding ?? p),
197
+ "--seed-box-padding-x": handleDimension(paddingX ?? px),
198
+ "--seed-box-padding-y": handleDimension(paddingY ?? py),
199
+ "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
200
+ "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
201
+ "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
202
+ "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
154
203
  "--seed-box-top": top,
155
204
  "--seed-box-left": left,
156
205
  "--seed-box-right": right,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.0.14",
3
+ "version": "0.0.17",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,8 @@
30
30
  ],
31
31
  "scripts": {
32
32
  "clean": "rm -rf lib",
33
- "build": "vite build"
33
+ "build": "vite build",
34
+ "lint:publish": "bun publint"
34
35
  },
35
36
  "dependencies": {
36
37
  "@radix-ui/react-compose-refs": "^1.1.1",
@@ -41,7 +42,7 @@
41
42
  "@seed-design/react-avatar": "0.0.1",
42
43
  "@seed-design/react-checkbox": "0.0.1",
43
44
  "@seed-design/react-dialog": "0.0.2",
44
- "@seed-design/react-popover": "0.0.3",
45
+ "@seed-design/react-popover": "0.0.4",
45
46
  "@seed-design/react-primitive": "0.0.1",
46
47
  "@seed-design/react-progress": "0.0.1",
47
48
  "@seed-design/react-pull-to-refresh": "0.0.2",
@@ -55,12 +56,12 @@
55
56
  "clsx": "^2.1.1"
56
57
  },
57
58
  "peerDependencies": {
58
- "@seed-design/css": "0.0.14",
59
+ "@seed-design/css": "0.0.17",
59
60
  "react": ">=18.0.0",
60
61
  "react-dom": ">=18.0.0"
61
62
  },
62
63
  "devDependencies": {
63
- "@seed-design/css": "0.0.14",
64
+ "@seed-design/css": "0.0.17",
64
65
  "@vitejs/plugin-react": "^4.3.4",
65
66
  "globby": "^14.1.0",
66
67
  "vite": "^6.2.3",
package/src/components/ActionButton/ActionButton.tsx CHANGED
@@ -11,11 +11,13 @@ import {
11
11
  usePendingButton,
12
12
  type UsePendingButtonProps,
13
13
  } from "../LoadingIndicator/usePendingButton";
14
+ import { useStyleProps, type StyleProps } from "../../utils/styled";
14
15
 
15
16
  export interface ActionButtonProps
16
17
  extends ActionButtonVariantProps,
17
18
  UsePendingButtonProps,
18
19
  PrimitiveProps,
20
+ Pick<StyleProps, "flexGrow">,
19
21
  React.ButtonHTMLAttributes<HTMLButtonElement> {}
20
22
 
21
23
  export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -25,6 +27,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
25
27
  ) => {
26
28
  const recipeClassName = actionButton({ variant, layout, size });
27
29
  const api = usePendingButton({ loading, disabled: otherProps.disabled });
30
+ const { style, restProps } = useStyleProps(otherProps);
28
31
 
29
32
  if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
30
33
  console.warn(
@@ -38,8 +41,9 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
38
41
  <Primitive.button
39
42
  ref={ref}
40
43
  className={clsx(recipeClassName, className)}
44
+ style={style}
41
45
  {...api.stateProps}
42
- {...otherProps}
46
+ {...restProps}
43
47
  >
44
48
  {children}
45
49
  </Primitive.button>
package/src/components/Columns/Columns.tsx CHANGED
@@ -1,8 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { Box, type BoxProps } from "../Box/Box";
3
3
 
4
+ /**
5
+ * @deprecated Use `HStack` instead.
6
+ */
4
7
  export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {}
5
8
 
9
+ /**
10
+ * @deprecated Use `HStack` instead.
11
+ */
6
12
  export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, ref) => {
7
13
  return (
8
14
  <Box
@@ -10,17 +16,22 @@ export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, re
10
16
  display="flex"
11
17
  flexDirection="row"
12
18
  flexWrap="nowrap"
13
- justifyContent="flexStart"
19
+ justifyContent="flex-start"
14
20
  {...props}
15
21
  />
16
22
  );
17
23
  });
18
24
 
25
+ /**
26
+ * @deprecated Use `HStack` instead.
27
+ */
19
28
  export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
20
29
  width?: BoxProps["width"] | "content";
21
30
  }
22
31
 
23
- // TODO: do we need fractional width support?
32
+ /**
33
+ * @deprecated Use `HStack` instead.
34
+ */
24
35
  export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
25
36
  const { width, ...otherProps } = props;
26
37
 
package/src/components/Divider/Divider.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { Box, type BoxProps } from "../Box/Box";
3
3
 
4
- export interface DividerProps extends Omit<BoxProps, "display"> {
4
+ export interface DividerProps {
5
5
  /**
6
6
  * @default "hr"
7
7
  */
@@ -10,24 +10,25 @@ export interface DividerProps extends Omit<BoxProps, "display"> {
10
10
  /**
11
11
  * @default "stroke.neutral"
12
12
  */
13
- borderColor?: BoxProps["borderColor"];
13
+ color?: BoxProps["borderColor"];
14
14
 
15
15
  /**
16
16
  * @default 1
17
17
  */
18
- borderWidth?: BoxProps["borderWidth"];
18
+ thickness?: BoxProps["borderBottomWidth"];
19
19
  }
20
20
 
21
21
  export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
22
- const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
22
+ const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
23
23
 
24
24
  return (
25
25
  <Box
26
26
  ref={ref}
27
27
  as={as}
28
28
  display="block"
29
- borderColor={borderColor}
30
- borderWidth={borderWidth}
29
+ borderColor={color}
30
+ borderWidth={0}
31
+ borderBottomWidth={thickness}
31
32
  {...rest}
32
33
  />
33
34
  );
package/src/components/Flex/Flex.tsx CHANGED
@@ -7,13 +7,53 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
7
7
  */
8
8
  display?: "flex" | "none";
9
9
 
10
- direction?: "row" | "column" | "rowReverse" | "columnReverse";
10
+ /**
11
+ * Shorthand for `flexDirection`.
12
+ */
13
+ direction?: BoxProps["flexDirection"];
14
+
15
+ /**
16
+ * Shorthand for `flexWrap`.
17
+ * If true, flex-wrap will be set to `wrap`.
18
+ */
19
+ wrap?: BoxProps["flexWrap"] | true;
20
+
21
+ /**
22
+ * Shorthand for `alignItems`.
23
+ */
24
+ align?: BoxProps["alignItems"];
11
25
 
12
- wrap?: "wrap" | "nowrap";
26
+ /**
27
+ * Shorthand for `justifyContent`.
28
+ */
29
+ justify?: BoxProps["justifyContent"];
30
+
31
+ /**
32
+ * Shorthand for `flexGrow`.
33
+ * If true, flex-grow will be set to `1`.
34
+ */
35
+ grow?: BoxProps["flexGrow"] | true;
36
+
37
+ /**
38
+ * Shorthand for `flexShrink`.
39
+ */
40
+ shrink?: BoxProps["flexShrink"];
13
41
  }
14
42
 
15
43
  export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
16
- const { direction, wrap, ...rest } = props;
44
+ const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
17
45
 
18
- return <Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} {...rest} />;
46
+ return (
47
+ <Box
48
+ ref={ref}
49
+ display="flex"
50
+ flexDirection={direction}
51
+ flexWrap={wrap === true ? "wrap" : wrap}
52
+ alignItems={align}
53
+ justifyContent={justify}
54
+ flexGrow={grow === true ? 1 : grow}
55
+ flexShrink={shrink}
56
+ {...rest}
57
+ />
58
+ );
19
59
  });
package/src/components/Inline/Inline.tsx CHANGED
@@ -1,8 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { Box, type BoxProps } from "../Box/Box";
3
3
 
4
+ /**
5
+ * @deprecated Use `HStack` instead.
6
+ */
4
7
  export interface InlineProps extends Omit<BoxProps, "display" | "direction" | "flexWrap"> {}
5
8
 
9
+ /**
10
+ * @deprecated Use `HStack` instead.
11
+ */
6
12
  export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref) => {
7
13
  return (
8
14
  <Box
@@ -10,8 +16,8 @@ export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref)
10
16
  display="flex"
11
17
  flexDirection="row"
12
18
  flexWrap="wrap"
13
- alignItems="flexStart"
14
- justifyContent="flexStart"
19
+ alignItems="flex-start"
20
+ justifyContent="flex-start"
15
21
  {...props}
16
22
  />
17
23
  );
package/src/components/SelectBox/CheckSelectBox.tsx CHANGED
@@ -18,7 +18,7 @@ export interface CheckSelectBoxGroupProps
18
18
 
19
19
  /**
20
20
  * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
21
- * It does not have spacing by default, nesting <Stack> under it is recommended.
21
+ * It does not have spacing by default, nesting <VStack> under it is recommended.
22
22
  */
23
23
  export const CheckSelectBoxGroup = withGroupContext<HTMLDivElement, CheckSelectBoxGroupProps>(
24
24
  forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>((props, ref) => (
package/src/components/Stack/Stack.tsx CHANGED
@@ -1,8 +1,26 @@
1
1
  import * as React from "react";
2
- import { Box, type BoxProps } from "../Box/Box";
2
+ import { Flex, type FlexProps } from "../Flex";
3
3
 
4
- export interface StackProps extends Omit<BoxProps, "display" | "direction"> {}
4
+ /**
5
+ * @deprecated Use `VStack` instead.
6
+ */
7
+ export interface StackProps extends Omit<FlexProps, "flexDirection"> {}
5
8
 
9
+ /**
10
+ * @deprecated Use `VStack` instead.
11
+ */
6
12
  export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {
7
- return <Box ref={ref} display="flex" flexDirection="column" {...props} />;
13
+ return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
14
+ });
15
+
16
+ export interface VStackProps extends Omit<FlexProps, "flexDirection"> {}
17
+
18
+ export const VStack = React.forwardRef<HTMLDivElement, VStackProps>((props, ref) => {
19
+ return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
20
+ });
21
+
22
+ export interface HStackProps extends Omit<FlexProps, "flexDirection"> {}
23
+
24
+ export const HStack = React.forwardRef<HTMLDivElement, HStackProps>((props, ref) => {
25
+ return <Flex ref={ref} display="flex" flexDirection="row" {...props} />;
8
26
  });
package/src/components/Stack/index.ts CHANGED
@@ -1 +1,8 @@
1
- export { Stack, type StackProps } from "./Stack";
1
+ export {
2
+ Stack,
3
+ VStack,
4
+ HStack,
5
+ type StackProps,
6
+ type VStackProps,
7
+ type HStackProps,
8
+ } from "./Stack";