@seed-design/react 0.0.9 → 0.0.12

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 (15) hide show
  1. package/lib/components/Icon/Icon.cjs +28 -19
  2. package/lib/components/Icon/Icon.d.ts +3 -0
  3. package/lib/components/Icon/Icon.d.ts.map +1 -1
  4. package/lib/components/Icon/Icon.js +28 -19
  5. package/lib/components/Text/Text.d.ts +2 -2
  6. package/lib/components/Text/Text.d.ts.map +1 -1
  7. package/lib/components/private/useDismissible.d.ts +3 -3
  8. package/lib/utils/styled.cjs +2 -0
  9. package/lib/utils/styled.d.ts +6 -4
  10. package/lib/utils/styled.d.ts.map +1 -1
  11. package/lib/utils/styled.js +1 -1
  12. package/package.json +10 -9
  13. package/src/components/Icon/Icon.tsx +37 -20
  14. package/src/components/Text/Text.tsx +3 -3
  15. package/src/utils/styled.tsx +9 -9
package/lib/components/Icon/Icon.cjs CHANGED
@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
6
6
  const reactSlot = require('@radix-ui/react-slot');
7
7
  const reactUseLayoutEffect = require('@radix-ui/react-use-layout-effect');
8
8
  const React = require('react');
9
+ const styled = require('../../utils/styled.cjs');
9
10
 
10
11
  const PrefixIcon = React.forwardRef(
11
12
  ({ svg, ...otherProps }, ref) => {
@@ -83,25 +84,33 @@ const IconRequired = ({
83
84
  }, [enabled, parentContext, register, unregister]);
84
85
  return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: providerValue, children });
85
86
  };
86
- const Icon = React.forwardRef(({ svg, ...otherProps }, ref) => {
87
- const context = React.useContext(IconContext);
88
- reactUseLayoutEffect.useLayoutEffect(() => {
89
- context?.register();
90
- return () => {
91
- context?.unregister();
92
- };
93
- }, [context]);
94
- return /* @__PURE__ */ jsxRuntime.jsx(
95
- reactSlot.Slot,
96
- {
97
- ref,
98
- "aria-hidden": true,
99
- className: "seed-icon",
100
- ...otherProps,
101
- children: svg
102
- }
103
- );
104
- });
87
+ const Icon = React.forwardRef(
88
+ ({ svg, size, color, ...otherProps }, ref) => {
89
+ const context = React.useContext(IconContext);
90
+ reactUseLayoutEffect.useLayoutEffect(() => {
91
+ context?.register();
92
+ return () => {
93
+ context?.unregister();
94
+ };
95
+ }, [context]);
96
+ const sizeValue = styled.handleDimension(size);
97
+ const colorValue = styled.handleColor(color);
98
+ return /* @__PURE__ */ jsxRuntime.jsx(
99
+ reactSlot.Slot,
100
+ {
101
+ ref,
102
+ "aria-hidden": true,
103
+ className: "seed-icon",
104
+ style: {
105
+ "--seed-icon-size": sizeValue,
106
+ "--seed-icon-color": colorValue
107
+ },
108
+ ...otherProps,
109
+ children: svg
110
+ }
111
+ );
112
+ }
113
+ );
105
114
  function withIconRequired(Component, enabledPredicate) {
106
115
  const Node = React.forwardRef((props, ref) => {
107
116
  const enabled = enabledPredicate(props);
package/lib/components/Icon/Icon.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Dimension, ScopedColorFg, ScopedColorPalette } from '@seed-design/css/vars';
1
2
  import { ForwardRefExoticComponent, RefAttributes, PropsWithoutRef } from 'react';
2
3
  export interface PrefixIconProps {
3
4
  svg: React.ReactNode;
@@ -13,6 +14,8 @@ export declare const IconRequired: ({ children, enabled, }: {
13
14
  }) => import("react/jsx-runtime").JSX.Element;
14
15
  export interface IconProps {
15
16
  svg: React.ReactNode;
17
+ size?: Dimension | string;
18
+ color?: ScopedColorFg | ScopedColorPalette;
16
19
  }
17
20
  export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
18
21
  export declare function withIconRequired<P extends {}, R>(Component: React.ComponentType<P & React.RefAttributes<R>>, enabledPredicate: (props: React.PropsWithoutRef<P>) => boolean): ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
package/lib/components/Icon/Icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,2BAGtB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,qGAoBf,CAAC;AAEH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI1F,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,2BAGtB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;CAC5C;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
package/lib/components/Icon/Icon.js CHANGED
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { Slot } from '@radix-ui/react-slot';
3
3
  import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
4
4
  import { forwardRef, useContext, createContext, useRef, useCallback, useMemo } from 'react';
5
+ import { handleDimension, handleColor } from '../../utils/styled.js';
5
6
 
6
7
  const PrefixIcon = forwardRef(
7
8
  ({ svg, ...otherProps }, ref) => {
@@ -79,25 +80,33 @@ const IconRequired = ({
79
80
  }, [enabled, parentContext, register, unregister]);
80
81
  return /* @__PURE__ */ jsx(IconContext.Provider, { value: providerValue, children });
81
82
  };
82
- const Icon = forwardRef(({ svg, ...otherProps }, ref) => {
83
- const context = useContext(IconContext);
84
- useLayoutEffect(() => {
85
- context?.register();
86
- return () => {
87
- context?.unregister();
88
- };
89
- }, [context]);
90
- return /* @__PURE__ */ jsx(
91
- Slot,
92
- {
93
- ref,
94
- "aria-hidden": true,
95
- className: "seed-icon",
96
- ...otherProps,
97
- children: svg
98
- }
99
- );
100
- });
83
+ const Icon = forwardRef(
84
+ ({ svg, size, color, ...otherProps }, ref) => {
85
+ const context = useContext(IconContext);
86
+ useLayoutEffect(() => {
87
+ context?.register();
88
+ return () => {
89
+ context?.unregister();
90
+ };
91
+ }, [context]);
92
+ const sizeValue = handleDimension(size);
93
+ const colorValue = handleColor(color);
94
+ return /* @__PURE__ */ jsx(
95
+ Slot,
96
+ {
97
+ ref,
98
+ "aria-hidden": true,
99
+ className: "seed-icon",
100
+ style: {
101
+ "--seed-icon-size": sizeValue,
102
+ "--seed-icon-color": colorValue
103
+ },
104
+ ...otherProps,
105
+ children: svg
106
+ }
107
+ );
108
+ }
109
+ );
101
110
  function withIconRequired(Component, enabledPredicate) {
102
111
  const Node = forwardRef((props, ref) => {
103
112
  const enabled = enabledPredicate(props);
package/lib/components/Text/Text.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { TextVariantProps } from '@seed-design/css/recipes/text';
2
- import { ColorFg, ColorPalette, FontSize, FontWeight, LineHeight } from '@seed-design/css/vars';
2
+ import { FontSize, FontWeight, LineHeight, ScopedColorFg, ScopedColorPalette } from '@seed-design/css/vars';
3
3
  import type * as React from "react";
4
4
  export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTMLAttributes<HTMLSpanElement> {
5
5
  /**
@@ -10,7 +10,7 @@ export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTM
10
10
  /**
11
11
  * The color of the text.
12
12
  */
13
- color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
13
+ color?: ScopedColorFg | ScopedColorPalette;
14
14
  /**
15
15
  * The font size of the text. Partially overrides the textStyle.
16
16
  */
package/lib/components/Text/Text.d.ts.map CHANGED
@@ -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,OAAO,EACZ,KAAK,YAAY,EACjB,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,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,MAAM,OAAO,EAAE,GAAG,WAAW,YAAY,EAAE,CAAC;IAEpD;;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,oHAYd,SAAS,4CA8BX,CAAC"}
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,oHAYd,SAAS,4CA8BX,CAAC"}
package/lib/components/private/useDismissible.d.ts CHANGED
@@ -546,6 +546,7 @@ export declare function useDismissible(props: UseDismissibleProps): {
546
546
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
547
547
  form?: string | undefined | undefined;
548
548
  disabled?: boolean | undefined | undefined;
549
+ type?: "submit" | "reset" | "button" | undefined | undefined;
549
550
  value?: string | number | readonly string[] | undefined;
550
551
  formAction?: string | undefined;
551
552
  formEncType?: string | undefined | undefined;
@@ -553,7 +554,6 @@ export declare function useDismissible(props: UseDismissibleProps): {
553
554
  formNoValidate?: boolean | undefined | undefined;
554
555
  formTarget?: string | undefined | undefined;
555
556
  name?: string | undefined | undefined;
556
- type?: "submit" | "reset" | "button" | undefined | undefined;
557
557
  };
558
558
  };
559
559
  export declare const DismissibleProvider: React.Provider<{
@@ -1096,6 +1096,7 @@ export declare const DismissibleProvider: React.Provider<{
1096
1096
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
1097
1097
  form?: string | undefined | undefined;
1098
1098
  disabled?: boolean | undefined | undefined;
1099
+ type?: "submit" | "reset" | "button" | undefined | undefined;
1099
1100
  value?: string | number | readonly string[] | undefined;
1100
1101
  formAction?: string | undefined;
1101
1102
  formEncType?: string | undefined | undefined;
@@ -1103,7 +1104,6 @@ export declare const DismissibleProvider: React.Provider<{
1103
1104
  formNoValidate?: boolean | undefined | undefined;
1104
1105
  formTarget?: string | undefined | undefined;
1105
1106
  name?: string | undefined | undefined;
1106
- type?: "submit" | "reset" | "button" | undefined | undefined;
1107
1107
  };
1108
1108
  } | null>;
1109
1109
  export declare const useDismissibleContext: () => {
@@ -1646,6 +1646,7 @@ export declare const useDismissibleContext: () => {
1646
1646
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
1647
1647
  form?: string | undefined | undefined;
1648
1648
  disabled?: boolean | undefined | undefined;
1649
+ type?: "submit" | "reset" | "button" | undefined | undefined;
1649
1650
  value?: string | number | readonly string[] | undefined;
1650
1651
  formAction?: string | undefined;
1651
1652
  formEncType?: string | undefined | undefined;
@@ -1653,7 +1654,6 @@ export declare const useDismissibleContext: () => {
1653
1654
  formNoValidate?: boolean | undefined | undefined;
1654
1655
  formTarget?: string | undefined | undefined;
1655
1656
  name?: string | undefined | undefined;
1656
- type?: "submit" | "reset" | "button" | undefined | undefined;
1657
1657
  };
1658
1658
  };
1659
1659
  export interface DismissibleRootProps extends PrimitiveProps, UseDismissibleProps, React.HTMLAttributes<HTMLDivElement> {
package/lib/utils/styled.cjs CHANGED
@@ -186,5 +186,7 @@ function withStyleProps(Component) {
186
186
  return Node;
187
187
  }
188
188
 
189
+ exports.handleColor = handleColor;
190
+ exports.handleDimension = handleDimension;
189
191
  exports.useStyleProps = useStyleProps;
190
192
  exports.withStyleProps = withStyleProps;
package/lib/utils/styled.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { ColorBg, ColorFg, ColorPalette, ColorStroke, Dimension, Radius, SpacingX, SpacingY } from '@seed-design/css/vars';
1
+ import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY } from '@seed-design/css/vars';
2
2
  import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
3
+ export declare function handleColor(color: string | undefined): any;
4
+ export declare function handleDimension(dimension: string | 0 | undefined): any;
3
5
  export interface StyleProps {
4
- background?: `bg.${ColorBg}` | `palette.${ColorPalette}`;
5
- color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
6
- borderColor?: `stroke.${ColorStroke}` | `palette.${ColorPalette}`;
6
+ background?: ScopedColorBg | ScopedColorPalette;
7
+ color?: ScopedColorFg | ScopedColorPalette;
8
+ borderColor?: ScopedColorStroke | ScopedColorPalette;
7
9
  borderWidth?: 0 | 1 | (number & {});
8
10
  borderTopWidth?: 0 | 1 | (number & {});
9
11
  borderRightWidth?: 0 | 1 | (number & {});
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
@@ -182,4 +182,4 @@ function withStyleProps(Component) {
182
182
  return Node;
183
183
  }
184
184
 
185
- export { useStyleProps, withStyleProps };
185
+ export { handleColor, handleDimension, useStyleProps, withStyleProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.0.9",
3
+ "version": "0.0.12",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -40,29 +40,30 @@
40
40
  "@seed-design/dom-utils": "0.0.1",
41
41
  "@seed-design/react-avatar": "0.0.1",
42
42
  "@seed-design/react-checkbox": "0.0.1",
43
- "@seed-design/react-dialog": "0.0.1",
44
- "@seed-design/react-popover": "0.0.1",
43
+ "@seed-design/react-dialog": "0.0.2",
44
+ "@seed-design/react-popover": "0.0.2",
45
45
  "@seed-design/react-primitive": "0.0.1",
46
46
  "@seed-design/react-progress": "0.0.1",
47
47
  "@seed-design/react-pull-to-refresh": "0.0.1",
48
48
  "@seed-design/react-radio-group": "0.0.1",
49
- "@seed-design/react-segmented-control": "0.0.1",
50
- "@seed-design/react-snackbar": "0.0.1",
49
+ "@seed-design/react-segmented-control": "0.0.2",
50
+ "@seed-design/react-snackbar": "0.0.2",
51
51
  "@seed-design/react-switch": "0.0.1",
52
- "@seed-design/react-tabs": "0.0.1",
52
+ "@seed-design/react-tabs": "0.0.3",
53
53
  "@seed-design/react-text-field": "0.0.1",
54
54
  "@seed-design/react-toggle": "0.0.1",
55
55
  "clsx": "^2.1.1"
56
56
  },
57
57
  "peerDependencies": {
58
- "@seed-design/css": "0.0.9",
58
+ "@seed-design/css": "0.0.12",
59
59
  "react": ">=18.0.0",
60
60
  "react-dom": ">=18.0.0"
61
61
  },
62
62
  "devDependencies": {
63
- "@seed-design/css": "0.0.9",
63
+ "@seed-design/css": "0.0.12",
64
+ "@vitejs/plugin-react": "^4.3.4",
64
65
  "globby": "^14.1.0",
65
- "vite": "^6.1.1",
66
+ "vite": "^6.2.3",
66
67
  "vite-plugin-dts": "^4.5.0"
67
68
  },
68
69
  "publishConfig": {
package/src/components/Icon/Icon.tsx CHANGED
@@ -1,6 +1,8 @@
1
1
  import { Slot } from "@radix-ui/react-slot";
2
2
  import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
3
+ import type { Dimension, ScopedColorFg, ScopedColorPalette } from "@seed-design/css/vars";
3
4
  import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "react";
5
+ import { handleColor, handleDimension } from "../../utils/styled";
4
6
 
5
7
  export interface PrefixIconProps {
6
8
  svg: React.ReactNode;
@@ -103,29 +105,44 @@ export const IconRequired = ({
103
105
 
104
106
  export interface IconProps {
105
107
  svg: React.ReactNode;
108
+
109
+ size?: Dimension | string;
110
+
111
+ color?: ScopedColorFg | ScopedColorPalette;
106
112
  }
107
113
 
108
- export const Icon = forwardRef<SVGSVGElement, IconProps>(({ svg, ...otherProps }, ref) => {
109
- const context = useContext(IconContext);
114
+ export const Icon = forwardRef<SVGSVGElement, IconProps>(
115
+ ({ svg, size, color, ...otherProps }, ref) => {
116
+ const context = useContext(IconContext);
110
117
 
111
- useLayoutEffect(() => {
112
- context?.register();
113
- return () => {
114
- context?.unregister();
115
- };
116
- }, [context]);
117
-
118
- return (
119
- <Slot
120
- ref={ref as React.ForwardedRef<HTMLElement>}
121
- aria-hidden
122
- className="seed-icon"
123
- {...otherProps}
124
- >
125
- {svg}
126
- </Slot>
127
- );
128
- });
118
+ useLayoutEffect(() => {
119
+ context?.register();
120
+ return () => {
121
+ context?.unregister();
122
+ };
123
+ }, [context]);
124
+
125
+ const sizeValue = handleDimension(size);
126
+ const colorValue = handleColor(color);
127
+
128
+ return (
129
+ <Slot
130
+ ref={ref as React.ForwardedRef<HTMLElement>}
131
+ aria-hidden
132
+ className="seed-icon"
133
+ style={
134
+ {
135
+ "--seed-icon-size": sizeValue,
136
+ "--seed-icon-color": colorValue,
137
+ } as React.CSSProperties
138
+ }
139
+ {...otherProps}
140
+ >
141
+ {svg}
142
+ </Slot>
143
+ );
144
+ },
145
+ );
129
146
 
130
147
  export function withIconRequired<P extends {}, R>(
131
148
  Component: React.ComponentType<P & React.RefAttributes<R>>,
package/src/components/Text/Text.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import { text, type TextVariantProps } from "@seed-design/css/recipes/text";
2
2
  import {
3
3
  vars,
4
- type ColorFg,
5
- type ColorPalette,
6
4
  type FontSize,
7
5
  type FontWeight,
8
6
  type LineHeight,
7
+ type ScopedColorFg,
8
+ type ScopedColorPalette,
9
9
  } from "@seed-design/css/vars";
10
10
  import clsx from "clsx";
11
11
  import type * as React from "react";
@@ -56,7 +56,7 @@ export interface TextProps
56
56
  /**
57
57
  * The color of the text.
58
58
  */
59
- color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
59
+ color?: ScopedColorFg | ScopedColorPalette;
60
60
 
61
61
  /**
62
62
  * The font size of the text. Partially overrides the textStyle.
package/src/utils/styled.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import type {
2
- ColorBg,
3
- ColorFg,
4
- ColorPalette,
5
- ColorStroke,
2
+ ScopedColorBg,
3
+ ScopedColorFg,
4
+ ScopedColorPalette,
5
+ ScopedColorStroke,
6
6
  Dimension,
7
7
  Radius,
8
8
  SpacingX,
@@ -11,7 +11,7 @@ import type {
11
11
  import { vars } from "@seed-design/css/vars";
12
12
  import { forwardRef } from "react";
13
13
 
14
- function handleColor(color: string | undefined) {
14
+ export function handleColor(color: string | undefined) {
15
15
  if (!color) {
16
16
  return undefined;
17
17
  }
@@ -20,7 +20,7 @@ function handleColor(color: string | undefined) {
20
20
  return vars.$color[type][value] ?? undefined;
21
21
  }
22
22
 
23
- function handleDimension(dimension: string | 0 | undefined) {
23
+ export function handleDimension(dimension: string | 0 | undefined) {
24
24
  if (dimension == null) {
25
25
  return undefined;
26
26
  }
@@ -105,11 +105,11 @@ function handleAlignItems(alignItems: string | undefined) {
105
105
  }
106
106
 
107
107
  export interface StyleProps {
108
- background?: `bg.${ColorBg}` | `palette.${ColorPalette}`;
108
+ background?: ScopedColorBg | ScopedColorPalette;
109
109
 
110
- color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
110
+ color?: ScopedColorFg | ScopedColorPalette;
111
111
 
112
- borderColor?: `stroke.${ColorStroke}` | `palette.${ColorPalette}`;
112
+ borderColor?: ScopedColorStroke | ScopedColorPalette;
113
113
 
114
114
  borderWidth?: 0 | 1 | (number & {});
115
115