@seed-design/react 0.0.39 → 0.1.0
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/Text/Text.cjs +3 -1
- package/lib/components/Text/Text.d.ts.map +1 -1
- package/lib/components/Text/Text.js +3 -1
- package/lib/utils/styled.cjs +19 -1
- package/lib/utils/styled.d.ts +16 -2
- package/lib/utils/styled.d.ts.map +1 -1
- package/lib/utils/styled.js +19 -1
- package/package.json +4 -4
- package/src/components/Text/Text.tsx +3 -1
- package/src/utils/styled.tsx +63 -3
|
@@ -52,6 +52,7 @@ const Text = React.forwardRef(
|
|
|
52
52
|
lineHeight,
|
|
53
53
|
fontWeight,
|
|
54
54
|
maxLines,
|
|
55
|
+
textDecorationLine,
|
|
55
56
|
children,
|
|
56
57
|
className,
|
|
57
58
|
style,
|
|
@@ -61,9 +62,10 @@ const Text = React.forwardRef(
|
|
|
61
62
|
const textClassName = React.useMemo(
|
|
62
63
|
() => text.text({
|
|
63
64
|
textStyle,
|
|
65
|
+
textDecorationLine,
|
|
64
66
|
maxLines: mapMaxLines(maxLines)
|
|
65
67
|
}),
|
|
66
|
-
[textStyle, maxLines]
|
|
68
|
+
[textStyle, textDecorationLine, maxLines]
|
|
67
69
|
);
|
|
68
70
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
71
|
Comp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,mFAmDhB,CAAC"}
|
|
@@ -48,6 +48,7 @@ const Text = forwardRef(
|
|
|
48
48
|
lineHeight,
|
|
49
49
|
fontWeight,
|
|
50
50
|
maxLines,
|
|
51
|
+
textDecorationLine,
|
|
51
52
|
children,
|
|
52
53
|
className,
|
|
53
54
|
style,
|
|
@@ -57,9 +58,10 @@ const Text = forwardRef(
|
|
|
57
58
|
const textClassName = useMemo(
|
|
58
59
|
() => text({
|
|
59
60
|
textStyle,
|
|
61
|
+
textDecorationLine,
|
|
60
62
|
maxLines: mapMaxLines(maxLines)
|
|
61
63
|
}),
|
|
62
|
-
[textStyle, maxLines]
|
|
64
|
+
[textStyle, textDecorationLine, maxLines]
|
|
63
65
|
);
|
|
64
66
|
return /* @__PURE__ */ jsx(
|
|
65
67
|
Comp,
|
package/lib/utils/styled.cjs
CHANGED
|
@@ -39,6 +39,16 @@ function handleRadius(radius) {
|
|
|
39
39
|
}
|
|
40
40
|
return vars.vars.$radius[radius] ?? radius;
|
|
41
41
|
}
|
|
42
|
+
function handleGradient(gradientToken, direction) {
|
|
43
|
+
if (!gradientToken || !direction) {
|
|
44
|
+
return void 0;
|
|
45
|
+
}
|
|
46
|
+
const colorStops = vars.vars.$gradient[gradientToken];
|
|
47
|
+
if (!colorStops) {
|
|
48
|
+
return void 0;
|
|
49
|
+
}
|
|
50
|
+
return `linear-gradient(${direction}, ${colorStops})`;
|
|
51
|
+
}
|
|
42
52
|
function handleDisplay(display) {
|
|
43
53
|
if (!display) {
|
|
44
54
|
return void 0;
|
|
@@ -131,6 +141,10 @@ function useStyleProps(props) {
|
|
|
131
141
|
const {
|
|
132
142
|
background,
|
|
133
143
|
bg,
|
|
144
|
+
bgGradient,
|
|
145
|
+
backgroundGradient,
|
|
146
|
+
bgGradientDirection,
|
|
147
|
+
backgroundGradientDirection,
|
|
134
148
|
color,
|
|
135
149
|
borderColor,
|
|
136
150
|
borderWidth,
|
|
@@ -192,9 +206,13 @@ function useStyleProps(props) {
|
|
|
192
206
|
style,
|
|
193
207
|
...restProps
|
|
194
208
|
} = props;
|
|
209
|
+
const gradientValue = handleGradient(
|
|
210
|
+
bgGradient ?? backgroundGradient,
|
|
211
|
+
bgGradientDirection ?? backgroundGradientDirection
|
|
212
|
+
);
|
|
195
213
|
return {
|
|
196
214
|
style: {
|
|
197
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
215
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
198
216
|
"--seed-box-color": handleColor(color),
|
|
199
217
|
"--seed-box-border-color": handleColor(borderColor),
|
|
200
218
|
"--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
|
package/lib/utils/styled.d.ts
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
|
-
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY } from '@seed-design/css/vars';
|
|
1
|
+
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient } 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;
|
|
5
5
|
export interface StyleProps {
|
|
6
|
-
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
7
6
|
/**
|
|
8
7
|
* Shorthand for `background`.
|
|
9
8
|
*/
|
|
10
9
|
bg?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
10
|
+
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
11
|
+
/**
|
|
12
|
+
* Shorthand for `backgroundGradient`.
|
|
13
|
+
*/
|
|
14
|
+
bgGradient?: Gradient;
|
|
15
|
+
backgroundGradient?: Gradient;
|
|
16
|
+
/**
|
|
17
|
+
* Shorthand for `backgroundGradientDirection`.
|
|
18
|
+
* e.g. `43deg`
|
|
19
|
+
*/
|
|
20
|
+
bgGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
|
|
21
|
+
/**
|
|
22
|
+
* e.g. `43deg`
|
|
23
|
+
*/
|
|
24
|
+
backgroundGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
|
|
11
25
|
color?: ScopedColorFg | ScopedColorPalette | (string & {});
|
|
12
26
|
borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
|
|
13
27
|
borderWidth?: 0 | 1 | (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,EACT,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,OAOpD;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAiBrF;
|
|
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
|
@@ -35,6 +35,16 @@ function handleRadius(radius) {
|
|
|
35
35
|
}
|
|
36
36
|
return vars.$radius[radius] ?? radius;
|
|
37
37
|
}
|
|
38
|
+
function handleGradient(gradientToken, direction) {
|
|
39
|
+
if (!gradientToken || !direction) {
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
const colorStops = vars.$gradient[gradientToken];
|
|
43
|
+
if (!colorStops) {
|
|
44
|
+
return void 0;
|
|
45
|
+
}
|
|
46
|
+
return `linear-gradient(${direction}, ${colorStops})`;
|
|
47
|
+
}
|
|
38
48
|
function handleDisplay(display) {
|
|
39
49
|
if (!display) {
|
|
40
50
|
return void 0;
|
|
@@ -127,6 +137,10 @@ function useStyleProps(props) {
|
|
|
127
137
|
const {
|
|
128
138
|
background,
|
|
129
139
|
bg,
|
|
140
|
+
bgGradient,
|
|
141
|
+
backgroundGradient,
|
|
142
|
+
bgGradientDirection,
|
|
143
|
+
backgroundGradientDirection,
|
|
130
144
|
color,
|
|
131
145
|
borderColor,
|
|
132
146
|
borderWidth,
|
|
@@ -188,9 +202,13 @@ function useStyleProps(props) {
|
|
|
188
202
|
style,
|
|
189
203
|
...restProps
|
|
190
204
|
} = props;
|
|
205
|
+
const gradientValue = handleGradient(
|
|
206
|
+
bgGradient ?? backgroundGradient,
|
|
207
|
+
bgGradientDirection ?? backgroundGradientDirection
|
|
208
|
+
);
|
|
191
209
|
return {
|
|
192
210
|
style: {
|
|
193
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
211
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
194
212
|
"--seed-box-color": handleColor(color),
|
|
195
213
|
"--seed-box-border-color": handleColor(borderColor),
|
|
196
214
|
"--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/react",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/daangn/seed-design.git",
|
|
@@ -57,17 +57,17 @@
|
|
|
57
57
|
"clsx": "^2.1.1"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"@seed-design/css": "0.0
|
|
60
|
+
"@seed-design/css": "0.1.0",
|
|
61
61
|
"react": ">=18.0.0",
|
|
62
62
|
"react-dom": ">=18.0.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@seed-design/css": "0.0
|
|
65
|
+
"@seed-design/css": "0.1.0",
|
|
66
66
|
"@vitejs/plugin-react": "^4.4.1",
|
|
67
67
|
"globby": "^14.1.0",
|
|
68
68
|
"react": "^19.1.0",
|
|
69
69
|
"react-dom": "^19.1.0",
|
|
70
|
-
"vite": "^
|
|
70
|
+
"vite": "^7.0.0",
|
|
71
71
|
"vite-plugin-dts": "^4.5.3"
|
|
72
72
|
},
|
|
73
73
|
"publishConfig": {
|
|
@@ -104,6 +104,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
|
|
|
104
104
|
lineHeight,
|
|
105
105
|
fontWeight,
|
|
106
106
|
maxLines,
|
|
107
|
+
textDecorationLine,
|
|
107
108
|
children,
|
|
108
109
|
className,
|
|
109
110
|
style,
|
|
@@ -116,9 +117,10 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
|
|
|
116
117
|
() =>
|
|
117
118
|
text({
|
|
118
119
|
textStyle,
|
|
120
|
+
textDecorationLine,
|
|
119
121
|
maxLines: mapMaxLines(maxLines),
|
|
120
122
|
}),
|
|
121
|
-
[textStyle, maxLines],
|
|
123
|
+
[textStyle, textDecorationLine, maxLines],
|
|
122
124
|
);
|
|
123
125
|
|
|
124
126
|
return (
|
package/src/utils/styled.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import type {
|
|
|
7
7
|
Radius,
|
|
8
8
|
SpacingX,
|
|
9
9
|
SpacingY,
|
|
10
|
+
Gradient,
|
|
10
11
|
} from "@seed-design/css/vars";
|
|
11
12
|
import { vars } from "@seed-design/css/vars";
|
|
12
13
|
import { forwardRef } from "react";
|
|
@@ -58,6 +59,20 @@ function handleRadius(radius: string | 0 | undefined) {
|
|
|
58
59
|
return vars.$radius[radius] ?? radius;
|
|
59
60
|
}
|
|
60
61
|
|
|
62
|
+
function handleGradient(gradientToken: string | undefined, direction: string | undefined) {
|
|
63
|
+
if (!gradientToken || !direction) {
|
|
64
|
+
return undefined;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// @ts-ignore
|
|
68
|
+
const colorStops = vars.$gradient[gradientToken];
|
|
69
|
+
if (!colorStops) {
|
|
70
|
+
return undefined;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return `linear-gradient(${direction}, ${colorStops})`;
|
|
74
|
+
}
|
|
75
|
+
|
|
61
76
|
function handleDisplay(display: string | undefined) {
|
|
62
77
|
if (!display) {
|
|
63
78
|
return undefined;
|
|
@@ -161,13 +176,49 @@ function handleAlignItems(alignItems: string | undefined) {
|
|
|
161
176
|
}
|
|
162
177
|
|
|
163
178
|
export interface StyleProps {
|
|
164
|
-
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
165
|
-
|
|
166
179
|
/**
|
|
167
180
|
* Shorthand for `background`.
|
|
168
181
|
*/
|
|
169
182
|
bg?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
170
183
|
|
|
184
|
+
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
185
|
+
|
|
186
|
+
/**
|
|
187
|
+
* Shorthand for `backgroundGradient`.
|
|
188
|
+
*/
|
|
189
|
+
bgGradient?: Gradient;
|
|
190
|
+
|
|
191
|
+
backgroundGradient?: Gradient;
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Shorthand for `backgroundGradientDirection`.
|
|
195
|
+
* e.g. `43deg`
|
|
196
|
+
*/
|
|
197
|
+
bgGradientDirection?:
|
|
198
|
+
| "to right"
|
|
199
|
+
| "to left"
|
|
200
|
+
| "to top"
|
|
201
|
+
| "to bottom"
|
|
202
|
+
| "to top right"
|
|
203
|
+
| "to top left"
|
|
204
|
+
| "to bottom right"
|
|
205
|
+
| "to bottom left"
|
|
206
|
+
| (string & {});
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* e.g. `43deg`
|
|
210
|
+
*/
|
|
211
|
+
backgroundGradientDirection?:
|
|
212
|
+
| "to right"
|
|
213
|
+
| "to left"
|
|
214
|
+
| "to top"
|
|
215
|
+
| "to bottom"
|
|
216
|
+
| "to top right"
|
|
217
|
+
| "to top left"
|
|
218
|
+
| "to bottom right"
|
|
219
|
+
| "to bottom left"
|
|
220
|
+
| (string & {});
|
|
221
|
+
|
|
171
222
|
color?: ScopedColorFg | ScopedColorPalette | (string & {});
|
|
172
223
|
|
|
173
224
|
borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
|
|
@@ -426,6 +477,10 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
426
477
|
const {
|
|
427
478
|
background,
|
|
428
479
|
bg,
|
|
480
|
+
bgGradient,
|
|
481
|
+
backgroundGradient,
|
|
482
|
+
bgGradientDirection,
|
|
483
|
+
backgroundGradientDirection,
|
|
429
484
|
color,
|
|
430
485
|
borderColor,
|
|
431
486
|
borderWidth,
|
|
@@ -488,9 +543,14 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
488
543
|
...restProps
|
|
489
544
|
} = props;
|
|
490
545
|
|
|
546
|
+
const gradientValue = handleGradient(
|
|
547
|
+
bgGradient ?? backgroundGradient,
|
|
548
|
+
bgGradientDirection ?? backgroundGradientDirection,
|
|
549
|
+
);
|
|
550
|
+
|
|
491
551
|
return {
|
|
492
552
|
style: {
|
|
493
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
553
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
494
554
|
"--seed-box-color": handleColor(color),
|
|
495
555
|
"--seed-box-border-color": handleColor(borderColor),
|
|
496
556
|
"--seed-box-border-width": borderWidth !== undefined ? `${borderWidth}px` : undefined,
|