@seed-design/react 0.0.31 → 0.0.33

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 (16) hide show
  1. package/lib/components/Box/Box.cjs +5 -1
  2. package/lib/components/Box/Box.d.ts +1 -0
  3. package/lib/components/Box/Box.d.ts.map +1 -1
  4. package/lib/components/Box/Box.js +5 -1
  5. package/lib/components/Text/Text.cjs +43 -39
  6. package/lib/components/Text/Text.d.ts +1 -1
  7. package/lib/components/Text/Text.d.ts.map +1 -1
  8. package/lib/components/Text/Text.js +44 -40
  9. package/lib/utils/styled.cjs +3 -0
  10. package/lib/utils/styled.d.ts +4 -0
  11. package/lib/utils/styled.d.ts.map +1 -1
  12. package/lib/utils/styled.js +3 -0
  13. package/package.json +3 -3
  14. package/src/components/Box/Box.tsx +10 -1
  15. package/src/components/Text/Text.tsx +52 -43
  16. package/src/utils/styled.tsx +10 -0
package/lib/components/Box/Box.cjs CHANGED
@@ -7,6 +7,7 @@ const jsxRuntime = require('react/jsx-runtime');
7
7
  const clsx = require('clsx');
8
8
  const React = require('react');
9
9
  const styled = require('../../utils/styled.cjs');
10
+ const reactSlot = require('@radix-ui/react-slot');
10
11
 
11
12
  function _interopNamespaceDefault(e) {
12
13
  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,7 +30,10 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
29
30
 
30
31
  const Box = React__namespace.forwardRef((props, ref) => {
31
32
  const { style, restProps } = styled.useStyleProps(props);
32
- const { as: Comp = "div", className, ...nativeProps } = restProps;
33
+ const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
34
+ if (asChild) {
35
+ return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, className: clsx("seed-box", className), style, ...nativeProps });
36
+ }
33
37
  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, className: clsx("seed-box", className), style, ...nativeProps });
34
38
  });
35
39
 
package/lib/components/Box/Box.d.ts CHANGED
@@ -2,6 +2,7 @@ import { StyleProps } from '../../utils/styled';
2
2
  import * as React from "react";
3
3
  export interface BoxProps extends StyleProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
4
4
  as?: React.ElementType;
5
+ asChild?: boolean;
5
6
  }
6
7
  export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
7
8
  //# sourceMappingURL=Box.d.ts.map
package/lib/components/Box/Box.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAED,eAAO,MAAM,GAAG,iFAKd,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpE,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,GAAG,iFAWd,CAAC"}
package/lib/components/Box/Box.js CHANGED
@@ -3,10 +3,14 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import clsx from 'clsx';
4
4
  import * as React from 'react';
5
5
  import { useStyleProps } from '../../utils/styled.js';
6
+ import { Slot } from '@radix-ui/react-slot';
6
7
 
7
8
  const Box = React.forwardRef((props, ref) => {
8
9
  const { style, restProps } = useStyleProps(props);
9
- const { as: Comp = "div", className, ...nativeProps } = restProps;
10
+ const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
11
+ if (asChild) {
12
+ return /* @__PURE__ */ jsx(Slot, { ref, className: clsx("seed-box", className), style, ...nativeProps });
13
+ }
10
14
  return /* @__PURE__ */ jsx(Comp, { ref, className: clsx("seed-box", className), style, ...nativeProps });
11
15
  });
12
16
 
package/lib/components/Text/Text.cjs CHANGED
@@ -43,44 +43,48 @@ function mapMaxLines(maxLines) {
43
43
  }
44
44
  return "multi";
45
45
  }
46
- const Text = ({
47
- as,
48
- color,
49
- textStyle,
50
- fontSize,
51
- lineHeight,
52
- fontWeight,
53
- maxLines,
54
- children,
55
- className,
56
- style,
57
- ...otherProps
58
- }) => {
59
- const Comp = as || "span";
60
- const textClassName = React.useMemo(
61
- () => text.text({
62
- textStyle,
63
- maxLines: mapMaxLines(maxLines)
64
- }),
65
- [textStyle, maxLines]
66
- );
67
- return /* @__PURE__ */ jsxRuntime.jsx(
68
- Comp,
69
- {
70
- className: clsx(textClassName, className),
71
- style: {
72
- "--seed-max-lines": maxLines,
73
- "--seed-text-color": handleColor(color),
74
- "--seed-font-size": handleFontSize(fontSize),
75
- "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
76
- "--seed-font-weight": handleFontWeight(fontWeight),
77
- "--seed-text-align": otherProps.align,
78
- ...style
79
- },
80
- ...otherProps,
81
- children
82
- }
83
- );
84
- };
46
+ const Text = React.forwardRef(
47
+ ({
48
+ as,
49
+ color,
50
+ textStyle,
51
+ fontSize,
52
+ lineHeight,
53
+ fontWeight,
54
+ maxLines,
55
+ children,
56
+ className,
57
+ style,
58
+ ...otherProps
59
+ }, ref) => {
60
+ const Comp = as || "span";
61
+ const textClassName = React.useMemo(
62
+ () => text.text({
63
+ textStyle,
64
+ maxLines: mapMaxLines(maxLines)
65
+ }),
66
+ [textStyle, maxLines]
67
+ );
68
+ return /* @__PURE__ */ jsxRuntime.jsx(
69
+ Comp,
70
+ {
71
+ ref,
72
+ className: clsx(textClassName, className),
73
+ style: {
74
+ "--seed-max-lines": maxLines,
75
+ "--seed-text-color": handleColor(color),
76
+ "--seed-font-size": handleFontSize(fontSize),
77
+ "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
78
+ "--seed-font-weight": handleFontWeight(fontWeight),
79
+ "--seed-text-align": otherProps.align,
80
+ ...style
81
+ },
82
+ ...otherProps,
83
+ children
84
+ }
85
+ );
86
+ }
87
+ );
88
+ Text.displayName = "Text";
85
89
 
86
90
  exports.Text = Text;
package/lib/components/Text/Text.d.ts CHANGED
@@ -32,5 +32,5 @@ export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTM
32
32
  */
33
33
  align?: "left" | "center" | "right";
34
34
  }
35
- export declare const Text: ({ as, color, textStyle, fontSize, lineHeight, fontWeight, maxLines, children, className, style, ...otherProps }: TextProps) => import("react/jsx-runtime").JSX.Element;
35
+ export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
36
36
  //# sourceMappingURL=Text.d.ts.map
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,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,GAAI,iHAYlB,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,mFAiDhB,CAAC"}
package/lib/components/Text/Text.js CHANGED
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { text } from '@seed-design/css/recipes/text';
4
4
  import { vars } from '@seed-design/css/vars';
5
5
  import clsx from 'clsx';
6
- import { useMemo } from 'react';
6
+ import { forwardRef, useMemo } from 'react';
7
7
 
8
8
  function handleColor(color) {
9
9
  if (!color) {
@@ -39,44 +39,48 @@ function mapMaxLines(maxLines) {
39
39
  }
40
40
  return "multi";
41
41
  }
42
- const Text = ({
43
- as,
44
- color,
45
- textStyle,
46
- fontSize,
47
- lineHeight,
48
- fontWeight,
49
- maxLines,
50
- children,
51
- className,
52
- style,
53
- ...otherProps
54
- }) => {
55
- const Comp = as || "span";
56
- const textClassName = useMemo(
57
- () => text({
58
- textStyle,
59
- maxLines: mapMaxLines(maxLines)
60
- }),
61
- [textStyle, maxLines]
62
- );
63
- return /* @__PURE__ */ jsx(
64
- Comp,
65
- {
66
- className: clsx(textClassName, className),
67
- style: {
68
- "--seed-max-lines": maxLines,
69
- "--seed-text-color": handleColor(color),
70
- "--seed-font-size": handleFontSize(fontSize),
71
- "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
72
- "--seed-font-weight": handleFontWeight(fontWeight),
73
- "--seed-text-align": otherProps.align,
74
- ...style
75
- },
76
- ...otherProps,
77
- children
78
- }
79
- );
80
- };
42
+ const Text = forwardRef(
43
+ ({
44
+ as,
45
+ color,
46
+ textStyle,
47
+ fontSize,
48
+ lineHeight,
49
+ fontWeight,
50
+ maxLines,
51
+ children,
52
+ className,
53
+ style,
54
+ ...otherProps
55
+ }, ref) => {
56
+ const Comp = as || "span";
57
+ const textClassName = useMemo(
58
+ () => text({
59
+ textStyle,
60
+ maxLines: mapMaxLines(maxLines)
61
+ }),
62
+ [textStyle, maxLines]
63
+ );
64
+ return /* @__PURE__ */ jsx(
65
+ Comp,
66
+ {
67
+ ref,
68
+ className: clsx(textClassName, className),
69
+ style: {
70
+ "--seed-max-lines": maxLines,
71
+ "--seed-text-color": handleColor(color),
72
+ "--seed-font-size": handleFontSize(fontSize),
73
+ "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
74
+ "--seed-font-weight": handleFontWeight(fontWeight),
75
+ "--seed-text-align": otherProps.align,
76
+ ...style
77
+ },
78
+ ...otherProps,
79
+ children
80
+ }
81
+ );
82
+ }
83
+ );
84
+ Text.displayName = "Text";
81
85
 
82
86
  export { Text };
package/lib/utils/styled.cjs CHANGED
@@ -176,6 +176,7 @@ function useStyleProps(props) {
176
176
  alignSelf,
177
177
  gap,
178
178
  unstable_transform,
179
+ _active,
179
180
  style,
180
181
  ...restProps
181
182
  } = props;
@@ -226,6 +227,8 @@ function useStyleProps(props) {
226
227
  "--seed-box-align-content": handleAlignItems(alignContent),
227
228
  "--seed-box-align-self": handleAlignItems(alignSelf),
228
229
  "--seed-box-unstable-transform": unstable_transform,
230
+ // Active
231
+ "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
229
232
  ...style
230
233
  },
231
234
  restProps
package/lib/utils/styled.d.ts CHANGED
@@ -80,6 +80,10 @@ export interface StyleProps {
80
80
  alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
81
81
  gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
82
82
  unstable_transform?: string;
83
+ _active?: {
84
+ bg?: ScopedColorBg | ScopedColorPalette | (string & {});
85
+ background?: ScopedColorBg | ScopedColorPalette | (string & {});
86
+ };
83
87
  }
84
88
  interface UseStyleProps extends StyleProps {
85
89
  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
@@ -172,6 +172,7 @@ function useStyleProps(props) {
172
172
  alignSelf,
173
173
  gap,
174
174
  unstable_transform,
175
+ _active,
175
176
  style,
176
177
  ...restProps
177
178
  } = props;
@@ -222,6 +223,8 @@ function useStyleProps(props) {
222
223
  "--seed-box-align-content": handleAlignItems(alignContent),
223
224
  "--seed-box-align-self": handleAlignItems(alignSelf),
224
225
  "--seed-box-unstable-transform": unstable_transform,
226
+ // Active
227
+ "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
225
228
  ...style
226
229
  },
227
230
  restProps
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.0.31",
3
+ "version": "0.0.33",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -57,12 +57,12 @@
57
57
  "clsx": "^2.1.1"
58
58
  },
59
59
  "peerDependencies": {
60
- "@seed-design/css": "0.0.31",
60
+ "@seed-design/css": "0.0.33",
61
61
  "react": ">=18.0.0",
62
62
  "react-dom": ">=18.0.0"
63
63
  },
64
64
  "devDependencies": {
65
- "@seed-design/css": "0.0.31",
65
+ "@seed-design/css": "0.0.33",
66
66
  "@vitejs/plugin-react": "^4.4.1",
67
67
  "globby": "^14.1.0",
68
68
  "react": "^19.1.0",
package/src/components/Box/Box.tsx CHANGED
@@ -1,14 +1,23 @@
1
1
  import clsx from "clsx";
2
2
  import * as React from "react";
3
3
  import { useStyleProps, type StyleProps } from "../../utils/styled";
4
+ import { Slot } from "@radix-ui/react-slot";
4
5
 
5
6
  export interface BoxProps extends StyleProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
6
7
  as?: React.ElementType;
8
+
9
+ asChild?: boolean;
7
10
  }
8
11
 
9
12
  export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
10
13
  const { style, restProps } = useStyleProps(props);
11
- const { as: Comp = "div", className, ...nativeProps } = restProps;
14
+ const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
15
+
16
+ if (asChild) {
17
+ return (
18
+ <Slot ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />
19
+ );
20
+ }
12
21
 
13
22
  return <Comp ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />;
14
23
  });
package/src/components/Text/Text.tsx CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  } from "@seed-design/css/vars";
10
10
  import clsx from "clsx";
11
11
  import type * as React from "react";
12
- import { useMemo } from "react";
12
+ import { forwardRef, useMemo } from "react";
13
13
 
14
14
  function handleColor(color: string | undefined) {
15
15
  if (!color) {
@@ -94,46 +94,55 @@ function mapMaxLines(maxLines: number | undefined): "none" | "single" | "multi"
94
94
  return "multi";
95
95
  }
96
96
 
97
- export const Text = ({
98
- as,
99
- color,
100
- textStyle,
101
- fontSize,
102
- lineHeight,
103
- fontWeight,
104
- maxLines,
105
- children,
106
- className,
107
- style,
108
- ...otherProps
109
- }: TextProps) => {
110
- const Comp = as || "span";
111
- const textClassName = useMemo(
112
- () =>
113
- text({
114
- textStyle,
115
- maxLines: mapMaxLines(maxLines),
116
- }),
117
- [textStyle, maxLines],
118
- );
97
+ export const Text = forwardRef<HTMLSpanElement, TextProps>(
98
+ (
99
+ {
100
+ as,
101
+ color,
102
+ textStyle,
103
+ fontSize,
104
+ lineHeight,
105
+ fontWeight,
106
+ maxLines,
107
+ children,
108
+ className,
109
+ style,
110
+ ...otherProps
111
+ },
112
+ ref,
113
+ ) => {
114
+ const Comp = as || "span";
115
+ const textClassName = useMemo(
116
+ () =>
117
+ text({
118
+ textStyle,
119
+ maxLines: mapMaxLines(maxLines),
120
+ }),
121
+ [textStyle, maxLines],
122
+ );
119
123
 
120
- return (
121
- <Comp
122
- className={clsx(textClassName, className)}
123
- style={
124
- {
125
- "--seed-max-lines": maxLines,
126
- "--seed-text-color": handleColor(color),
127
- "--seed-font-size": handleFontSize(fontSize),
128
- "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
129
- "--seed-font-weight": handleFontWeight(fontWeight),
130
- "--seed-text-align": otherProps.align,
131
- ...style,
132
- } as React.CSSProperties
133
- }
134
- {...otherProps}
135
- >
136
- {children}
137
- </Comp>
138
- );
139
- };
124
+ return (
125
+ <Comp
126
+ // @ts-ignore: We might need overloading for ref types, not a big deal for now.
127
+ ref={ref}
128
+ className={clsx(textClassName, className)}
129
+ style={
130
+ {
131
+ "--seed-max-lines": maxLines,
132
+ "--seed-text-color": handleColor(color),
133
+ "--seed-font-size": handleFontSize(fontSize),
134
+ "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
135
+ "--seed-font-weight": handleFontWeight(fontWeight),
136
+ "--seed-text-align": otherProps.align,
137
+ ...style,
138
+ } as React.CSSProperties
139
+ }
140
+ {...otherProps}
141
+ >
142
+ {children}
143
+ </Comp>
144
+ );
145
+ },
146
+ );
147
+
148
+ Text.displayName = "Text";
package/src/utils/styled.tsx CHANGED
@@ -322,6 +322,12 @@ export interface StyleProps {
322
322
 
323
323
  // NOTE: Not sure how to treat transform/translate right now, mark as unstable until we have a better solution.
324
324
  unstable_transform?: string;
325
+
326
+ _active?: {
327
+ bg?: ScopedColorBg | ScopedColorPalette | (string & {});
328
+
329
+ background?: ScopedColorBg | ScopedColorPalette | (string & {});
330
+ };
325
331
  }
326
332
 
327
333
  interface UseStyleProps extends StyleProps {
@@ -388,6 +394,7 @@ export function useStyleProps<T extends UseStyleProps>(
388
394
  alignSelf,
389
395
  gap,
390
396
  unstable_transform,
397
+ _active,
391
398
  style,
392
399
  ...restProps
393
400
  } = props;
@@ -443,6 +450,9 @@ export function useStyleProps<T extends UseStyleProps>(
443
450
  "--seed-box-align-content": handleAlignItems(alignContent),
444
451
  "--seed-box-align-self": handleAlignItems(alignSelf),
445
452
  "--seed-box-unstable-transform": unstable_transform,
453
+
454
+ // Active
455
+ "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
446
456
  ...style,
447
457
  } as React.CSSProperties,
448
458
  restProps,