@seed-design/react 1.1.10 → 1.1.13
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.
- package/lib/components/Divider/Divider.cjs +13 -1
- package/lib/components/Divider/Divider.d.ts +4 -0
- package/lib/components/Divider/Divider.d.ts.map +1 -1
- package/lib/components/Divider/Divider.js +13 -1
- package/lib/utils/styled.cjs +8 -0
- package/lib/utils/styled.d.ts +2 -1
- package/lib/utils/styled.d.ts.map +1 -1
- package/lib/utils/styled.js +8 -0
- package/package.json +5 -5
- package/src/components/Divider/Divider.tsx +19 -0
- package/src/utils/styled.tsx +14 -0
|
@@ -32,6 +32,7 @@ const Divider = React__namespace.forwardRef(
|
|
|
32
32
|
color = "stroke.neutralMuted",
|
|
33
33
|
thickness = 1,
|
|
34
34
|
orientation = "horizontal",
|
|
35
|
+
inset = false,
|
|
35
36
|
...props
|
|
36
37
|
}, ref) => {
|
|
37
38
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -48,7 +49,18 @@ const Divider = React__namespace.forwardRef(
|
|
|
48
49
|
borderWidth: 0,
|
|
49
50
|
...orientation === "vertical" && { borderRightWidth: thickness },
|
|
50
51
|
...orientation === "horizontal" && { borderBottomWidth: thickness },
|
|
51
|
-
...props
|
|
52
|
+
...props,
|
|
53
|
+
style: {
|
|
54
|
+
...inset && orientation === "horizontal" && {
|
|
55
|
+
marginLeft: "16px",
|
|
56
|
+
marginRight: "16px"
|
|
57
|
+
},
|
|
58
|
+
...inset && orientation === "vertical" && {
|
|
59
|
+
marginTop: "16px",
|
|
60
|
+
marginBottom: "16px"
|
|
61
|
+
},
|
|
62
|
+
...props.style
|
|
63
|
+
}
|
|
52
64
|
}
|
|
53
65
|
);
|
|
54
66
|
}
|
|
@@ -20,6 +20,10 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
|
|
|
20
20
|
* @default "horizontal"
|
|
21
21
|
*/
|
|
22
22
|
orientation?: "horizontal" | "vertical";
|
|
23
|
+
/**
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
inset?: boolean;
|
|
23
27
|
}
|
|
24
28
|
export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
|
|
25
29
|
//# sourceMappingURL=Divider.d.ts.map
|
|
@@ -1 +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,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;
|
|
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,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,oFA8CnB,CAAC"}
|
|
@@ -9,6 +9,7 @@ const Divider = React.forwardRef(
|
|
|
9
9
|
color = "stroke.neutralMuted",
|
|
10
10
|
thickness = 1,
|
|
11
11
|
orientation = "horizontal",
|
|
12
|
+
inset = false,
|
|
12
13
|
...props
|
|
13
14
|
}, ref) => {
|
|
14
15
|
return /* @__PURE__ */ jsx(
|
|
@@ -25,7 +26,18 @@ const Divider = React.forwardRef(
|
|
|
25
26
|
borderWidth: 0,
|
|
26
27
|
...orientation === "vertical" && { borderRightWidth: thickness },
|
|
27
28
|
...orientation === "horizontal" && { borderBottomWidth: thickness },
|
|
28
|
-
...props
|
|
29
|
+
...props,
|
|
30
|
+
style: {
|
|
31
|
+
...inset && orientation === "horizontal" && {
|
|
32
|
+
marginLeft: "16px",
|
|
33
|
+
marginRight: "16px"
|
|
34
|
+
},
|
|
35
|
+
...inset && orientation === "vertical" && {
|
|
36
|
+
marginTop: "16px",
|
|
37
|
+
marginBottom: "16px"
|
|
38
|
+
},
|
|
39
|
+
...props.style
|
|
40
|
+
}
|
|
29
41
|
}
|
|
30
42
|
);
|
|
31
43
|
}
|
package/lib/utils/styled.cjs
CHANGED
|
@@ -33,6 +33,12 @@ function handleBleed(dimension, direction) {
|
|
|
33
33
|
}
|
|
34
34
|
return handleDimension(dimension);
|
|
35
35
|
}
|
|
36
|
+
function handleShadow(shadow) {
|
|
37
|
+
if (!shadow) {
|
|
38
|
+
return void 0;
|
|
39
|
+
}
|
|
40
|
+
return vars.vars.$shadow[shadow] ?? shadow;
|
|
41
|
+
}
|
|
36
42
|
function handlePaddingWithSafeArea(padding, direction) {
|
|
37
43
|
if (padding === "safeArea") {
|
|
38
44
|
return `var(--seed-safe-area-${direction})`;
|
|
@@ -164,6 +170,7 @@ function useStyleProps(props) {
|
|
|
164
170
|
borderTopRightRadius,
|
|
165
171
|
borderBottomRightRadius,
|
|
166
172
|
borderBottomLeftRadius,
|
|
173
|
+
boxShadow,
|
|
167
174
|
width,
|
|
168
175
|
minWidth,
|
|
169
176
|
maxWidth,
|
|
@@ -232,6 +239,7 @@ function useStyleProps(props) {
|
|
|
232
239
|
"--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
|
|
233
240
|
"--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
|
|
234
241
|
"--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
|
|
242
|
+
"--seed-box-box-shadow": handleShadow(boxShadow),
|
|
235
243
|
"--seed-box-width": handleDimension(width),
|
|
236
244
|
"--seed-box-min-width": handleDimension(minWidth),
|
|
237
245
|
"--seed-box-max-width": handleDimension(maxWidth),
|
package/lib/utils/styled.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient } from '@seed-design/css/vars';
|
|
1
|
+
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient, Shadow } from '@seed-design/css/vars';
|
|
2
2
|
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): string | undefined;
|
|
@@ -36,6 +36,7 @@ export interface StyleProps {
|
|
|
36
36
|
borderTopRightRadius?: Radius | 0 | (string & {});
|
|
37
37
|
borderBottomRightRadius?: Radius | 0 | (string & {});
|
|
38
38
|
borderBottomLeftRadius?: Radius | 0 | (string & {});
|
|
39
|
+
boxShadow?: Shadow | (string & {});
|
|
39
40
|
width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
|
|
40
41
|
minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
|
|
41
42
|
maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,
|
|
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
|
@@ -29,6 +29,12 @@ function handleBleed(dimension, direction) {
|
|
|
29
29
|
}
|
|
30
30
|
return handleDimension(dimension);
|
|
31
31
|
}
|
|
32
|
+
function handleShadow(shadow) {
|
|
33
|
+
if (!shadow) {
|
|
34
|
+
return void 0;
|
|
35
|
+
}
|
|
36
|
+
return vars.$shadow[shadow] ?? shadow;
|
|
37
|
+
}
|
|
32
38
|
function handlePaddingWithSafeArea(padding, direction) {
|
|
33
39
|
if (padding === "safeArea") {
|
|
34
40
|
return `var(--seed-safe-area-${direction})`;
|
|
@@ -160,6 +166,7 @@ function useStyleProps(props) {
|
|
|
160
166
|
borderTopRightRadius,
|
|
161
167
|
borderBottomRightRadius,
|
|
162
168
|
borderBottomLeftRadius,
|
|
169
|
+
boxShadow,
|
|
163
170
|
width,
|
|
164
171
|
minWidth,
|
|
165
172
|
maxWidth,
|
|
@@ -228,6 +235,7 @@ function useStyleProps(props) {
|
|
|
228
235
|
"--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
|
|
229
236
|
"--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
|
|
230
237
|
"--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
|
|
238
|
+
"--seed-box-box-shadow": handleShadow(boxShadow),
|
|
231
239
|
"--seed-box-width": handleDimension(width),
|
|
232
240
|
"--seed-box-min-width": handleDimension(minWidth),
|
|
233
241
|
"--seed-box-max-width": handleDimension(maxWidth),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.13",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/daangn/seed-design.git",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@seed-design/dom-utils": "1.0.0",
|
|
44
44
|
"@seed-design/react-avatar": "1.0.0",
|
|
45
45
|
"@seed-design/react-checkbox": "1.0.1",
|
|
46
|
-
"@seed-design/react-dialog": "1.0.
|
|
47
|
-
"@seed-design/react-drawer": "1.0.
|
|
46
|
+
"@seed-design/react-dialog": "1.0.1",
|
|
47
|
+
"@seed-design/react-drawer": "1.0.5",
|
|
48
48
|
"@seed-design/react-field": "1.0.1",
|
|
49
49
|
"@seed-design/react-field-button": "1.0.1",
|
|
50
50
|
"@seed-design/react-popover": "1.0.3",
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
"@seed-design/react-text-field": "1.1.1",
|
|
62
62
|
"@seed-design/react-toggle": "1.0.0",
|
|
63
63
|
"clsx": "^2.1.1",
|
|
64
|
-
"unicode-segmenter": "^0.14.
|
|
64
|
+
"unicode-segmenter": "^0.14.4"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"@seed-design/css": ">=1.1.
|
|
67
|
+
"@seed-design/css": ">=1.1.13",
|
|
68
68
|
"react": ">=18.0.0",
|
|
69
69
|
"react-dom": ">=18.0.0"
|
|
70
70
|
},
|
|
@@ -24,6 +24,11 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
|
|
|
24
24
|
* @default "horizontal"
|
|
25
25
|
*/
|
|
26
26
|
orientation?: "horizontal" | "vertical";
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
inset?: boolean;
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
|
|
@@ -33,6 +38,7 @@ export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
|
|
|
33
38
|
color = "stroke.neutralMuted",
|
|
34
39
|
thickness = 1,
|
|
35
40
|
orientation = "horizontal",
|
|
41
|
+
inset = false,
|
|
36
42
|
...props
|
|
37
43
|
},
|
|
38
44
|
ref,
|
|
@@ -55,6 +61,19 @@ export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
|
|
|
55
61
|
{...(orientation === "vertical" && { borderRightWidth: thickness })}
|
|
56
62
|
{...(orientation === "horizontal" && { borderBottomWidth: thickness })}
|
|
57
63
|
{...props}
|
|
64
|
+
style={{
|
|
65
|
+
...(inset &&
|
|
66
|
+
orientation === "horizontal" && {
|
|
67
|
+
marginLeft: "16px",
|
|
68
|
+
marginRight: "16px",
|
|
69
|
+
}),
|
|
70
|
+
...(inset &&
|
|
71
|
+
orientation === "vertical" && {
|
|
72
|
+
marginTop: "16px",
|
|
73
|
+
marginBottom: "16px",
|
|
74
|
+
}),
|
|
75
|
+
...props.style,
|
|
76
|
+
}}
|
|
58
77
|
/>
|
|
59
78
|
);
|
|
60
79
|
},
|
package/src/utils/styled.tsx
CHANGED
|
@@ -8,6 +8,7 @@ import type {
|
|
|
8
8
|
SpacingX,
|
|
9
9
|
SpacingY,
|
|
10
10
|
Gradient,
|
|
11
|
+
Shadow,
|
|
11
12
|
} from "@seed-design/css/vars";
|
|
12
13
|
import { vars } from "@seed-design/css/vars";
|
|
13
14
|
import { forwardRef } from "react";
|
|
@@ -51,6 +52,15 @@ function handleBleed(
|
|
|
51
52
|
return handleDimension(dimension);
|
|
52
53
|
}
|
|
53
54
|
|
|
55
|
+
function handleShadow(shadow: Shadow | (string & {}) | undefined) {
|
|
56
|
+
if (!shadow) {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// @ts-expect-error
|
|
61
|
+
return vars.$shadow[shadow] ?? shadow;
|
|
62
|
+
}
|
|
63
|
+
|
|
54
64
|
export function handlePaddingWithSafeArea(
|
|
55
65
|
padding: string | 0 | undefined,
|
|
56
66
|
direction: "top" | "bottom",
|
|
@@ -252,6 +262,8 @@ export interface StyleProps {
|
|
|
252
262
|
|
|
253
263
|
borderBottomLeftRadius?: Radius | 0 | (string & {});
|
|
254
264
|
|
|
265
|
+
boxShadow?: Shadow | (string & {});
|
|
266
|
+
|
|
255
267
|
width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
|
|
256
268
|
|
|
257
269
|
minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
|
|
@@ -523,6 +535,7 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
523
535
|
borderTopRightRadius,
|
|
524
536
|
borderBottomRightRadius,
|
|
525
537
|
borderBottomLeftRadius,
|
|
538
|
+
boxShadow,
|
|
526
539
|
width,
|
|
527
540
|
minWidth,
|
|
528
541
|
maxWidth,
|
|
@@ -597,6 +610,7 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
597
610
|
"--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
|
|
598
611
|
"--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
|
|
599
612
|
"--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
|
|
613
|
+
"--seed-box-box-shadow": handleShadow(boxShadow),
|
|
600
614
|
"--seed-box-width": handleDimension(width),
|
|
601
615
|
"--seed-box-min-width": handleDimension(minWidth),
|
|
602
616
|
"--seed-box-max-width": handleDimension(maxWidth),
|