@seed-design/react 0.0.34 → 0.0.38

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/ActionButton/ActionButton.cjs +12 -3
  2. package/lib/components/ActionButton/ActionButton.d.ts +9 -2
  3. package/lib/components/ActionButton/ActionButton.d.ts.map +1 -1
  4. package/lib/components/ActionButton/ActionButton.js +12 -3
  5. package/lib/components/Float/Float.cjs +12 -1
  6. package/lib/components/Float/Float.d.ts.map +1 -1
  7. package/lib/components/Float/Float.js +12 -1
  8. package/lib/utils/styled.cjs +16 -0
  9. package/lib/utils/styled.d.ts +30 -0
  10. package/lib/utils/styled.d.ts.map +1 -1
  11. package/lib/utils/styled.js +16 -0
  12. package/package.json +3 -3
  13. package/src/components/ActionButton/ActionButton.tsx +23 -5
  14. package/src/components/Float/Float.tsx +9 -1
  15. package/src/utils/styled.tsx +93 -0
package/lib/components/ActionButton/ActionButton.cjs CHANGED
@@ -8,9 +8,9 @@ const actionButton = require('@seed-design/css/recipes/action-button');
8
8
  const reactPrimitive = require('@seed-design/react-primitive');
9
9
  const clsx = require('clsx');
10
10
  const React = require('react');
11
+ const styled = require('../../utils/styled.cjs');
11
12
  const Icon = require('../Icon/Icon.cjs');
12
13
  const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
13
- const styled = require('../../utils/styled.cjs');
14
14
 
15
15
  function _interopNamespaceDefault(e) {
16
16
  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,7 +32,16 @@ function _interopNamespaceDefault(e) {
32
32
  const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
33
33
 
34
34
  const ActionButton = React__namespace.forwardRef(
35
- ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
35
+ ({
36
+ variant,
37
+ size,
38
+ loading = false,
39
+ layout = "withText",
40
+ color,
41
+ className,
42
+ children,
43
+ ...otherProps
44
+ }, ref) => {
36
45
  const recipeClassName = actionButton.actionButton({ variant, layout, size });
37
46
  const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
38
47
  const { style, restProps } = styled.useStyleProps(otherProps);
@@ -46,7 +55,7 @@ const ActionButton = React__namespace.forwardRef(
46
55
  {
47
56
  ref,
48
57
  className: clsx(recipeClassName, className),
49
- style,
58
+ style: { ...style, "--seed-box-color": styled.handleColor(color) },
50
59
  ...api.stateProps,
51
60
  ...restProps,
52
61
  children
package/lib/components/ActionButton/ActionButton.d.ts CHANGED
@@ -1,9 +1,16 @@
1
1
  import { ActionButtonVariantProps } from '@seed-design/css/recipes/action-button';
2
2
  import { PrimitiveProps } from '@seed-design/react-primitive';
3
- import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
4
3
  import { StyleProps } from '../../utils/styled';
4
+ import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
5
+ import { ScopedColorFg, ScopedColorPalette } from '@seed-design/css/vars';
5
6
  import * as React from "react";
6
- export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, Pick<StyleProps, "flexGrow">, React.ButtonHTMLAttributes<HTMLButtonElement> {
7
+ export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, Pick<StyleProps, "flexGrow" | "bleedX" | "bleedY">, React.ButtonHTMLAttributes<HTMLButtonElement> {
8
+ /**
9
+ * Color of the label and icons inside the button.
10
+ * Works only when `variant` is `ghost`.
11
+ * @default "fg.neutral"
12
+ */
13
+ color?: ScopedColorFg | ScopedColorPalette;
7
14
  }
8
15
  export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
9
16
  //# sourceMappingURL=ActionButton.d.ts.map
package/lib/components/ActionButton/ActionButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA+BxB,CAAC"}
1
+ {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA8B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC,EAClD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,6FAyCxB,CAAC"}
package/lib/components/ActionButton/ActionButton.js CHANGED
@@ -4,12 +4,21 @@ import { actionButton } from '@seed-design/css/recipes/action-button';
4
4
  import { Primitive } from '@seed-design/react-primitive';
5
5
  import clsx from 'clsx';
6
6
  import * as React from 'react';
7
+ import { useStyleProps, handleColor } from '../../utils/styled.js';
7
8
  import { IconRequired } from '../Icon/Icon.js';
8
9
  import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
9
- import { useStyleProps } from '../../utils/styled.js';
10
10
 
11
11
  const ActionButton = React.forwardRef(
12
- ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
12
+ ({
13
+ variant,
14
+ size,
15
+ loading = false,
16
+ layout = "withText",
17
+ color,
18
+ className,
19
+ children,
20
+ ...otherProps
21
+ }, ref) => {
13
22
  const recipeClassName = actionButton({ variant, layout, size });
14
23
  const api = usePendingButton({ loading, disabled: otherProps.disabled });
15
24
  const { style, restProps } = useStyleProps(otherProps);
@@ -23,7 +32,7 @@ const ActionButton = React.forwardRef(
23
32
  {
24
33
  ref,
25
34
  className: clsx(recipeClassName, className),
26
- style,
35
+ style: { ...style, "--seed-box-color": handleColor(color) },
27
36
  ...api.stateProps,
28
37
  ...restProps,
29
38
  children
package/lib/components/Float/Float.cjs CHANGED
@@ -91,7 +91,18 @@ function getPlacementStyle(placement, offsetX, offsetY) {
91
91
  const Float = React__namespace.forwardRef((props, ref) => {
92
92
  const { as, placement, offsetX, offsetY, zIndex, ...rest } = props;
93
93
  const placementStyle = getPlacementStyle(placement, offsetX, offsetY);
94
- return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref, as, position: "absolute", zIndex, ...placementStyle, ...rest });
94
+ return /* @__PURE__ */ jsxRuntime.jsx(
95
+ Box.Box,
96
+ {
97
+ ref,
98
+ as,
99
+ position: "absolute",
100
+ display: "inline-flex",
101
+ zIndex,
102
+ ...placementStyle,
103
+ ...rest
104
+ }
105
+ );
95
106
  });
96
107
 
97
108
  exports.Float = Float;
package/lib/components/Float/Float.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Float.d.ts","sourceRoot":"","sources":["../../../src/components/Float/Float.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEvB,SAAS,EACL,YAAY,GACZ,cAAc,GACd,SAAS,GACT,WAAW,GACX,eAAe,GACf,YAAY,GACZ,eAAe,GACf,YAAY,GACZ,cAAc,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACjC;AA6ED,eAAO,MAAM,KAAK,mFAQhB,CAAC"}
1
+ {"version":3,"file":"Float.d.ts","sourceRoot":"","sources":["../../../src/components/Float/Float.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEvB,SAAS,EACL,YAAY,GACZ,cAAc,GACd,SAAS,GACT,WAAW,GACX,eAAe,GACf,YAAY,GACZ,eAAe,GACf,YAAY,GACZ,cAAc,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACjC;AA6ED,eAAO,MAAM,KAAK,mFAgBhB,CAAC"}
package/lib/components/Float/Float.js CHANGED
@@ -68,7 +68,18 @@ function getPlacementStyle(placement, offsetX, offsetY) {
68
68
  const Float = React.forwardRef((props, ref) => {
69
69
  const { as, placement, offsetX, offsetY, zIndex, ...rest } = props;
70
70
  const placementStyle = getPlacementStyle(placement, offsetX, offsetY);
71
- return /* @__PURE__ */ jsx(Box, { ref, as, position: "absolute", zIndex, ...placementStyle, ...rest });
71
+ return /* @__PURE__ */ jsx(
72
+ Box,
73
+ {
74
+ ref,
75
+ as,
76
+ position: "absolute",
77
+ display: "inline-flex",
78
+ zIndex,
79
+ ...placementStyle,
80
+ ...rest
81
+ }
82
+ );
72
83
  });
73
84
 
74
85
  export { Float };
package/lib/utils/styled.cjs CHANGED
@@ -27,6 +27,12 @@ function handleDimension(dimension) {
27
27
  const [type, value] = dimension.split(".");
28
28
  return vars.vars.$dimension[dimension] ?? vars.vars.$dimension[type]?.[value] ?? dimension;
29
29
  }
30
+ function handleBleed(dimension, direction) {
31
+ if (dimension === "asPadding") {
32
+ return `var(--seed-box-padding-${direction})`;
33
+ }
34
+ return handleDimension(dimension);
35
+ }
30
36
  function handleRadius(radius) {
31
37
  if (radius == null) {
32
38
  return void 0;
@@ -157,6 +163,12 @@ function useStyleProps(props) {
157
163
  pr,
158
164
  pb,
159
165
  pl,
166
+ bleedX,
167
+ bleedY,
168
+ bleedTop,
169
+ bleedRight,
170
+ bleedBottom,
171
+ bleedLeft,
160
172
  bottom,
161
173
  left,
162
174
  right,
@@ -208,6 +220,10 @@ function useStyleProps(props) {
208
220
  "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
209
221
  "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
210
222
  "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
223
+ "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
224
+ "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
225
+ "--seed-box-bleed-bottom": handleBleed(bleedBottom ?? bleedY, "bottom"),
226
+ "--seed-box-bleed-left": handleBleed(bleedLeft ?? bleedX, "left"),
211
227
  "--seed-box-top": top,
212
228
  "--seed-box-left": left,
213
229
  "--seed-box-right": right,
package/lib/utils/styled.d.ts CHANGED
@@ -65,6 +65,36 @@ export interface StyleProps {
65
65
  * Shorthand for `paddingLeft`.
66
66
  */
67
67
  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
68
+ /**
69
+ * Negative x-axis margin to extend the element outside its parent.
70
+ * If set to "asPadding", it will use the padding value in the same direction.
71
+ */
72
+ bleedX?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
73
+ /**
74
+ * Negative y-axis margin to extend the element outside its parent.
75
+ * If set to "asPadding", it will use the padding value in the same direction.
76
+ */
77
+ bleedY?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
78
+ /**
79
+ * Negative top margin to extend the element outside its parent.
80
+ * If set to "asPadding", it will use the padding value in the same direction.
81
+ */
82
+ bleedTop?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
83
+ /**
84
+ * Negative right margin to extend the element outside its parent.
85
+ * If set to "asPadding", it will use the padding value in the same direction.
86
+ */
87
+ bleedRight?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
88
+ /**
89
+ * Negative bottom margin to extend the element outside its parent.
90
+ * If set to "asPadding", it will use the padding value in the same direction.
91
+ */
92
+ bleedBottom?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
93
+ /**
94
+ * Negative left margin to extend the element outside its parent.
95
+ * If set to "asPadding", it will use the padding value in the same direction.
96
+ */
97
+ bleedLeft?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
68
98
  display?: "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock";
69
99
  position?: "relative" | "absolute" | "fixed" | "sticky";
70
100
  overflowX?: "visible" | "hidden" | "scroll" | "auto";
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
@@ -23,6 +23,12 @@ function handleDimension(dimension) {
23
23
  const [type, value] = dimension.split(".");
24
24
  return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
25
25
  }
26
+ function handleBleed(dimension, direction) {
27
+ if (dimension === "asPadding") {
28
+ return `var(--seed-box-padding-${direction})`;
29
+ }
30
+ return handleDimension(dimension);
31
+ }
26
32
  function handleRadius(radius) {
27
33
  if (radius == null) {
28
34
  return void 0;
@@ -153,6 +159,12 @@ function useStyleProps(props) {
153
159
  pr,
154
160
  pb,
155
161
  pl,
162
+ bleedX,
163
+ bleedY,
164
+ bleedTop,
165
+ bleedRight,
166
+ bleedBottom,
167
+ bleedLeft,
156
168
  bottom,
157
169
  left,
158
170
  right,
@@ -204,6 +216,10 @@ function useStyleProps(props) {
204
216
  "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
205
217
  "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
206
218
  "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
219
+ "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
220
+ "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
221
+ "--seed-box-bleed-bottom": handleBleed(bleedBottom ?? bleedY, "bottom"),
222
+ "--seed-box-bleed-left": handleBleed(bleedLeft ?? bleedX, "left"),
207
223
  "--seed-box-top": top,
208
224
  "--seed-box-left": left,
209
225
  "--seed-box-right": right,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.0.34",
3
+ "version": "0.0.38",
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.34",
60
+ "@seed-design/css": "0.0.38",
61
61
  "react": ">=18.0.0",
62
62
  "react-dom": ">=18.0.0"
63
63
  },
64
64
  "devDependencies": {
65
- "@seed-design/css": "0.0.34",
65
+ "@seed-design/css": "0.0.38",
66
66
  "@vitejs/plugin-react": "^4.4.1",
67
67
  "globby": "^14.1.0",
68
68
  "react": "^19.1.0",
package/src/components/ActionButton/ActionButton.tsx CHANGED
@@ -5,24 +5,41 @@ import {
5
5
  import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
6
6
  import clsx from "clsx";
7
7
  import * as React from "react";
8
+ import { handleColor, useStyleProps, type StyleProps } from "../../utils/styled";
8
9
  import { IconRequired } from "../Icon/Icon";
9
10
  import {
10
11
  PendingButtonProvider,
11
12
  usePendingButton,
12
13
  type UsePendingButtonProps,
13
14
  } from "../LoadingIndicator/usePendingButton";
14
- import { useStyleProps, type StyleProps } from "../../utils/styled";
15
+ import type { ScopedColorFg, ScopedColorPalette } from "@seed-design/css/vars";
15
16
 
16
17
  export interface ActionButtonProps
17
18
  extends ActionButtonVariantProps,
18
19
  UsePendingButtonProps,
19
20
  PrimitiveProps,
20
- Pick<StyleProps, "flexGrow">,
21
- React.ButtonHTMLAttributes<HTMLButtonElement> {}
21
+ Pick<StyleProps, "flexGrow" | "bleedX" | "bleedY">,
22
+ React.ButtonHTMLAttributes<HTMLButtonElement> {
23
+ /**
24
+ * Color of the label and icons inside the button.
25
+ * Works only when `variant` is `ghost`.
26
+ * @default "fg.neutral"
27
+ */
28
+ color?: ScopedColorFg | ScopedColorPalette;
29
+ }
22
30
 
23
31
  export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
24
32
  (
25
- { variant, size, loading = false, layout = "withText", className, children, ...otherProps },
33
+ {
34
+ variant,
35
+ size,
36
+ loading = false,
37
+ layout = "withText",
38
+ color,
39
+ className,
40
+ children,
41
+ ...otherProps
42
+ },
26
43
  ref,
27
44
  ) => {
28
45
  const recipeClassName = actionButton({ variant, layout, size });
@@ -41,7 +58,8 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
41
58
  <Primitive.button
42
59
  ref={ref}
43
60
  className={clsx(recipeClassName, className)}
44
- style={style}
61
+ // NOTE: Should we handle color as a style prop?
62
+ style={{ ...style, "--seed-box-color": handleColor(color) } as React.CSSProperties}
45
63
  {...api.stateProps}
46
64
  {...restProps}
47
65
  >
package/src/components/Float/Float.tsx CHANGED
@@ -111,6 +111,14 @@ export const Float = React.forwardRef<HTMLDivElement, FloatProps>((props, ref) =
111
111
  const placementStyle = getPlacementStyle(placement, offsetX, offsetY);
112
112
 
113
113
  return (
114
- <Box ref={ref} as={as} position="absolute" zIndex={zIndex} {...placementStyle} {...rest} />
114
+ <Box
115
+ ref={ref}
116
+ as={as}
117
+ position="absolute"
118
+ display="inline-flex"
119
+ zIndex={zIndex}
120
+ {...placementStyle}
121
+ {...rest}
122
+ />
115
123
  );
116
124
  });
package/src/utils/styled.tsx CHANGED
@@ -39,6 +39,17 @@ export function handleDimension(dimension: string | 0 | undefined): string | und
39
39
  return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
40
40
  }
41
41
 
42
+ function handleBleed(
43
+ dimension: "asPadding" | string | 0 | undefined,
44
+ direction: "top" | "right" | "bottom" | "left",
45
+ ) {
46
+ if (dimension === "asPadding") {
47
+ return `var(--seed-box-padding-${direction})`;
48
+ }
49
+
50
+ return handleDimension(dimension);
51
+ }
52
+
42
53
  function handleRadius(radius: string | 0 | undefined) {
43
54
  if (radius == null) {
44
55
  return undefined;
@@ -250,6 +261,78 @@ export interface StyleProps {
250
261
  */
251
262
  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
252
263
 
264
+ /**
265
+ * Negative x-axis margin to extend the element outside its parent.
266
+ * If set to "asPadding", it will use the padding value in the same direction.
267
+ */
268
+ bleedX?:
269
+ | "asPadding"
270
+ | Dimension
271
+ | `spacingX.${SpacingX}`
272
+ | `spacingY.${SpacingY}`
273
+ | 0
274
+ | (string & {});
275
+
276
+ /**
277
+ * Negative y-axis margin to extend the element outside its parent.
278
+ * If set to "asPadding", it will use the padding value in the same direction.
279
+ */
280
+ bleedY?:
281
+ | "asPadding"
282
+ | Dimension
283
+ | `spacingX.${SpacingX}`
284
+ | `spacingY.${SpacingY}`
285
+ | 0
286
+ | (string & {});
287
+
288
+ /**
289
+ * Negative top margin to extend the element outside its parent.
290
+ * If set to "asPadding", it will use the padding value in the same direction.
291
+ */
292
+ bleedTop?:
293
+ | "asPadding"
294
+ | Dimension
295
+ | `spacingX.${SpacingX}`
296
+ | `spacingY.${SpacingY}`
297
+ | 0
298
+ | (string & {});
299
+
300
+ /**
301
+ * Negative right margin to extend the element outside its parent.
302
+ * If set to "asPadding", it will use the padding value in the same direction.
303
+ */
304
+ bleedRight?:
305
+ | "asPadding"
306
+ | Dimension
307
+ | `spacingX.${SpacingX}`
308
+ | `spacingY.${SpacingY}`
309
+ | 0
310
+ | (string & {});
311
+
312
+ /**
313
+ * Negative bottom margin to extend the element outside its parent.
314
+ * If set to "asPadding", it will use the padding value in the same direction.
315
+ */
316
+ bleedBottom?:
317
+ | "asPadding"
318
+ | Dimension
319
+ | `spacingX.${SpacingX}`
320
+ | `spacingY.${SpacingY}`
321
+ | 0
322
+ | (string & {});
323
+
324
+ /**
325
+ * Negative left margin to extend the element outside its parent.
326
+ * If set to "asPadding", it will use the padding value in the same direction.
327
+ */
328
+ bleedLeft?:
329
+ | "asPadding"
330
+ | Dimension
331
+ | `spacingX.${SpacingX}`
332
+ | `spacingY.${SpacingY}`
333
+ | 0
334
+ | (string & {});
335
+
253
336
  display?:
254
337
  | "block"
255
338
  | "flex"
@@ -375,6 +458,12 @@ export function useStyleProps<T extends UseStyleProps>(
375
458
  pr,
376
459
  pb,
377
460
  pl,
461
+ bleedX,
462
+ bleedY,
463
+ bleedTop,
464
+ bleedRight,
465
+ bleedBottom,
466
+ bleedLeft,
378
467
  bottom,
379
468
  left,
380
469
  right,
@@ -431,6 +520,10 @@ export function useStyleProps<T extends UseStyleProps>(
431
520
  "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
432
521
  "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
433
522
  "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
523
+ "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
524
+ "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
525
+ "--seed-box-bleed-bottom": handleBleed(bleedBottom ?? bleedY, "bottom"),
526
+ "--seed-box-bleed-left": handleBleed(bleedLeft ?? bleedX, "left"),
434
527
  "--seed-box-top": top,
435
528
  "--seed-box-left": left,
436
529
  "--seed-box-right": right,