@seed-design/react 2.5.0 → 2.6.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.
Files changed (11) hide show
  1. package/lib/components/Box/Box.test.d.ts +2 -0
  2. package/lib/components/Box/Box.test.d.ts.map +1 -0
  3. package/lib/utils/styled.cjs +3 -2
  4. package/lib/utils/styled.d.ts +18 -11
  5. package/lib/utils/styled.d.ts.map +1 -1
  6. package/lib/utils/styled.js +3 -2
  7. package/package.json +6 -6
  8. package/src/components/AGENTS.md +10 -14
  9. package/src/components/Box/Box.test.tsx +88 -0
  10. package/src/components/Skeleton/Skeleton.test.tsx +1 -1
  11. package/src/utils/styled.tsx +72 -15
package/lib/components/Box/Box.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Box.test.d.ts.map
package/lib/components/Box/Box.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Box.test.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.test.tsx"],"names":[],"mappings":""}
package/lib/utils/styled.cjs CHANGED
@@ -34,6 +34,7 @@ function handleDimension(dimension) {
34
34
  }
35
35
  function handleBleed(dimension, direction) {
36
36
  if (dimension === "asPadding") return `var(--seed-box-padding-${direction})`;
37
+ if (dimension === "safeArea") return `var(--seed-safe-area-${direction})`;
37
38
  return handleDimension(dimension);
38
39
  }
39
40
  function handleShadow(shadow) {
@@ -103,9 +104,9 @@ function useStyleProps(props) {
103
104
  ...(paddingX ?? px) !== void 0 && resolveResponsive("--seed-box-padding-x", paddingX ?? px, handleDimension),
104
105
  ...(paddingY ?? py) !== void 0 && resolveResponsive("--seed-box-padding-y", paddingY ?? py, handleDimension),
105
106
  ...(paddingTop ?? pt) !== void 0 && resolveResponsive("--seed-box-padding-top", paddingTop ?? pt, (v) => handlePaddingWithSafeArea(v, "top")),
106
- ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension),
107
+ ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, (v) => handlePaddingWithSafeArea(v, "right")),
107
108
  ...(paddingBottom ?? pb) !== void 0 && resolveResponsive("--seed-box-padding-bottom", paddingBottom ?? pb, (v) => handlePaddingWithSafeArea(v, "bottom")),
108
- ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension),
109
+ ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, (v) => handlePaddingWithSafeArea(v, "left")),
109
110
  ...(bleedTop ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-top", bleedTop ?? bleedY ?? bleed, (v) => handleBleed(v, "top")),
110
111
  ...(bleedRight ?? bleedX ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-right", bleedRight ?? bleedX ?? bleed, (v) => handleBleed(v, "right")),
111
112
  ...(bleedBottom ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-bottom", bleedBottom ?? bleedY ?? bleed, (v) => handleBleed(v, "bottom")),
package/lib/utils/styled.d.ts CHANGED
@@ -95,52 +95,59 @@ interface BleedStyleProps {
95
95
  /**
96
96
  * Negative margin on all four sides to extend the element outside its parent.
97
97
  * If set to "asPadding", it will use the padding value in the same direction.
98
+ * If set to "safeArea", it will use the safe area inset in the same direction.
98
99
  *
99
100
  * Cannot be combined with any `margin*` prop.
100
101
  */
101
- bleed?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
102
+ bleed?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
102
103
  /**
103
104
  * Negative x-axis margin to extend the element outside its parent.
104
105
  * If set to "asPadding", it will use the padding value in the same direction.
106
+ * If set to "safeArea", it will use the safe area inset in the same direction.
105
107
  *
106
108
  * Cannot be combined with any `margin*` prop.
107
109
  */
108
- bleedX?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
110
+ bleedX?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
109
111
  /**
110
112
  * Negative y-axis margin to extend the element outside its parent.
111
113
  * If set to "asPadding", it will use the padding value in the same direction.
114
+ * If set to "safeArea", it will use the safe area inset in the same direction.
112
115
  *
113
116
  * Cannot be combined with any `margin*` prop.
114
117
  */
115
- bleedY?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
118
+ bleedY?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
116
119
  /**
117
120
  * Negative top margin to extend the element outside its parent.
118
121
  * If set to "asPadding", it will use the padding value in the same direction.
122
+ * If set to "safeArea", it will use the safe area inset in the same direction.
119
123
  *
120
124
  * Cannot be combined with any `margin*` prop.
121
125
  */
122
- bleedTop?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
126
+ bleedTop?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
123
127
  /**
124
128
  * Negative right margin to extend the element outside its parent.
125
129
  * If set to "asPadding", it will use the padding value in the same direction.
130
+ * If set to "safeArea", it will use the safe area inset in the same direction.
126
131
  *
127
132
  * Cannot be combined with any `margin*` prop.
128
133
  */
129
- bleedRight?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
134
+ bleedRight?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
130
135
  /**
131
136
  * Negative bottom margin to extend the element outside its parent.
132
137
  * If set to "asPadding", it will use the padding value in the same direction.
138
+ * If set to "safeArea", it will use the safe area inset in the same direction.
133
139
  *
134
140
  * Cannot be combined with any `margin*` prop.
135
141
  */
136
- bleedBottom?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
142
+ bleedBottom?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
137
143
  /**
138
144
  * Negative left margin to extend the element outside its parent.
139
145
  * If set to "asPadding", it will use the padding value in the same direction.
146
+ * If set to "safeArea", it will use the safe area inset in the same direction.
140
147
  *
141
148
  * Cannot be combined with any `margin*` prop.
142
149
  */
143
- bleedLeft?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
150
+ bleedLeft?: ResponsiveValue<"asPadding" | "safeArea" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
144
151
  }
145
152
  /** Distributes `Omit` over each union branch, preserving the union structure. */
146
153
  export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
@@ -211,21 +218,21 @@ export type StyleProps = {
211
218
  * Shorthand for `paddingTop`.
212
219
  */
213
220
  pt?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
214
- paddingRight?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
221
+ paddingRight?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
215
222
  /**
216
223
  * Shorthand for `paddingRight`.
217
224
  */
218
- pr?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
225
+ pr?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
219
226
  paddingBottom?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
220
227
  /**
221
228
  * Shorthand for `paddingBottom`.
222
229
  */
223
230
  pb?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
224
- paddingLeft?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
231
+ paddingLeft?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
225
232
  /**
226
233
  * Shorthand for `paddingLeft`.
227
234
  */
228
- pl?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
235
+ pl?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
229
236
  display?: ResponsiveValue<"block" | "flex" | "grid" | "inline-flex" | "inline" | "inline-block" | "none">;
230
237
  position?: "relative" | "absolute" | "fixed" | "sticky";
231
238
  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
@@ -33,6 +33,7 @@ function handleDimension(dimension) {
33
33
  }
34
34
  function handleBleed(dimension, direction) {
35
35
  if (dimension === "asPadding") return `var(--seed-box-padding-${direction})`;
36
+ if (dimension === "safeArea") return `var(--seed-safe-area-${direction})`;
36
37
  return handleDimension(dimension);
37
38
  }
38
39
  function handleShadow(shadow) {
@@ -102,9 +103,9 @@ function useStyleProps(props) {
102
103
  ...(paddingX ?? px) !== void 0 && resolveResponsive("--seed-box-padding-x", paddingX ?? px, handleDimension),
103
104
  ...(paddingY ?? py) !== void 0 && resolveResponsive("--seed-box-padding-y", paddingY ?? py, handleDimension),
104
105
  ...(paddingTop ?? pt) !== void 0 && resolveResponsive("--seed-box-padding-top", paddingTop ?? pt, (v) => handlePaddingWithSafeArea(v, "top")),
105
- ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension),
106
+ ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, (v) => handlePaddingWithSafeArea(v, "right")),
106
107
  ...(paddingBottom ?? pb) !== void 0 && resolveResponsive("--seed-box-padding-bottom", paddingBottom ?? pb, (v) => handlePaddingWithSafeArea(v, "bottom")),
107
- ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension),
108
+ ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, (v) => handlePaddingWithSafeArea(v, "left")),
108
109
  ...(bleedTop ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-top", bleedTop ?? bleedY ?? bleed, (v) => handleBleed(v, "top")),
109
110
  ...(bleedRight ?? bleedX ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-right", bleedRight ?? bleedX ?? bleed, (v) => handleBleed(v, "right")),
110
111
  ...(bleedBottom ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-bottom", bleedBottom ?? bleedY ?? bleed, (v) => handleBleed(v, "bottom")),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -50,15 +50,15 @@
50
50
  "@seed-design/react-collapsible": "^1.0.1",
51
51
  "@seed-design/react-dialog": "^2.0.3",
52
52
  "@seed-design/react-date-picker": "^1.2.0",
53
- "@seed-design/react-drawer": "^2.0.6",
53
+ "@seed-design/react-drawer": "^2.0.7",
54
54
  "@seed-design/react-field": "^2.0.1",
55
55
  "@seed-design/react-field-button": "^2.0.1",
56
56
  "@seed-design/react-fieldset": "^1.0.1",
57
57
  "@seed-design/react-file-upload": "^1.0.1",
58
58
  "@seed-design/react-image": "^1.1.0",
59
- "@seed-design/react-menu": "^2.0.2",
59
+ "@seed-design/react-menu": "^2.0.3",
60
60
  "@seed-design/react-middle-truncate": "^1.0.1",
61
- "@seed-design/react-navigation-menu": "^2.0.1",
61
+ "@seed-design/react-navigation-menu": "^2.0.2",
62
62
  "@seed-design/react-popover": "^2.0.1",
63
63
  "@seed-design/react-portal": "^2.0.1",
64
64
  "@seed-design/react-primitive": "^2.0.1",
@@ -68,7 +68,7 @@
68
68
  "@seed-design/react-radio-group": "^2.0.1",
69
69
  "@seed-design/react-scale-feedback": "^1.0.0",
70
70
  "@seed-design/react-segmented-control": "^2.0.2",
71
- "@seed-design/react-select": "^1.0.1",
71
+ "@seed-design/react-select": "^1.0.2",
72
72
  "@seed-design/react-side-navigation": "^1.0.1",
73
73
  "@seed-design/react-slider": "^2.0.1",
74
74
  "@seed-design/react-snackbar": "^2.0.1",
@@ -83,7 +83,7 @@
83
83
  "unicode-segmenter": "^0.17.3"
84
84
  },
85
85
  "peerDependencies": {
86
- "@seed-design/css": "^2.8.0",
86
+ "@seed-design/css": "^2.9.0",
87
87
  "react": ">=18.0.0",
88
88
  "react-dom": ">=18.0.0"
89
89
  },
package/src/components/AGENTS.md CHANGED
@@ -1,21 +1,17 @@
1
1
  # packages/react/src/components
2
2
 
3
- ## 디렉토리 개요
3
+ `@seed-design/react` 컴포넌트 구현 디렉터리다. 컴포넌트마다 `PascalCase` 폴더에 `{ComponentName}.tsx`와 `index.ts`를 둔다.
4
4
 
5
- `packages/react`의 실제 컴포넌트 구현이 모여 있는 핵심 디렉토리다. 상위 `packages/react/AGENTS.md`의 공통 규칙 위에서, 컴포넌트별 public surface와 내부 구현 경계를 더 구체적으로 다룬다.
5
+ ## 규칙
6
6
 
7
- ## 파일 작성 컨벤션
7
+ ### Public surface
8
8
 
9
- - 컴포넌트별 디렉토리는 `PascalCase`를 사용한다. 단일 컴포넌트는 `{ComponentName}.tsx`와 `index.ts`를 기본으로 둔다.
10
- - compound component에서 public namespace 단축 이름이 필요할 때만 `{ComponentName}.namespace.ts`를 추가한다.
11
- - 실제 구현은 `{ComponentName}.tsx` 또는 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 필요한 namespace 파일에서 관리한다.
9
+ - 구현은 `{ComponentName}.tsx`나 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 namespace 파일에서만 한다. `{ComponentName}.namespace.ts`는 compound 컴포넌트에 namespace 단축 이름이 필요할 때만 추가한다.
10
+ - export는 사용자에게 의미가 분명한 slot만 노출한다. animation·layout helper slot은 namespace에서도 숨기고, direct composition이나 styling escape hatch 같은 사용자 시나리오가 있을 때만 공개한다.
11
+ - compound 컴포넌트를 설계·변경함 → React API만 닫지 말고 `docs/registry/react/ui/` snippet이 어떤 convenience layer를 줄지 함께 정한다.
12
12
 
13
- ## 코드 작성 컨벤션
13
+ ### Headless 재사용
14
14
 
15
- - public export는 사용자에게 의미가 분명한 slot만 기본 노출한다.
16
- - namespace export도 같은 기준을 따른다. 짧은 이름이 필요하더라도 animation/layout helper slot은 기본적으로 숨긴다.
17
- - helper slot을 공개하려면 direct composition이나 styling escape hatch 같은 명확한 사용자 시나리오가 있어야 한다.
18
- - compound component를 설계할 때는 React API만 닫지 말고 `docs/registry/react/ui` snippet surface가 어떤 convenience layer를 제공할지도 함께 생각한다.
19
- - headless context가 제공하는 `stateProps`/slot props는 styled layer에서 다시 계산하지 않는다. `createWithStateProps([useHeadlessContext])`처럼 기존 context를 직접 재사용하고, 동일한 `data-*` props를 위한 중복 helper export는 만들지 않는다.
20
- - headless primitive wrapper의 props는 hook props를 재사용한다. `ComponentItemProps extends UseComponentItemProps`처럼 한 source를 확장하고, 같은 prop을 컴포넌트 props에 다시 선언하지 않는다.
21
- - headless hook prop이 discriminated union이면 styled wrapper도 union contract를 보존한다. mode별로 hook props를 재조합해야 할 때는 branch를 나누어 특정 mode에서 무효한 prop이 섞이지 않게 한다.
15
+ - headless context의 `stateProps`·slot props → styled layer에서 다시 계산하지 않는다. `createWithStateProps([useHeadlessContext])`(`../../utils/createWithStateProps`)로 기존 context를 재사용하고, 같은 `data-*` props용 helper를 따로 export하지 않는다. 예: `NavigationMenu/NavigationMenu.tsx`.
16
+ - headless primitive wrapper의 props → `ComponentItemProps extends UseComponentItemProps`처럼 훅 props를 확장한다. 같은 prop을 다시 선언하지 않는다.
17
+ - headless 훅 prop이 discriminated union → styled wrapper도 union contract를 유지한다. mode별로 훅 props를 다시 조합해야 하면 branch를 나눠 특정 mode에서 무효한 prop이 섞이지 않게 한다.
package/src/components/Box/Box.test.tsx ADDED
@@ -0,0 +1,88 @@
1
+ import { render, screen } from "@testing-library/react";
2
+ import { describe, expect, it } from "bun:test";
3
+ import { Box } from "./Box";
4
+
5
+ describe("Box safeArea", () => {
6
+ it("resolves pl and pr to the inline safe area insets", () => {
7
+ render(<Box data-testid="box" pl="safeArea" pr="safeArea" />);
8
+ const { style } = screen.getByTestId("box");
9
+
10
+ expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
11
+ "var(--seed-safe-area-left)",
12
+ );
13
+ expect(style.getPropertyValue("--seed-box-padding-right-base")).toBe(
14
+ "var(--seed-safe-area-right)",
15
+ );
16
+ });
17
+
18
+ it("keeps resolving other pl and pr values as dimensions", () => {
19
+ render(<Box data-testid="box" pl="spacingX.globalGutter" pr="x4" />);
20
+ const { style } = screen.getByTestId("box");
21
+
22
+ expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
23
+ "var(--seed-dimension-spacing-x-global-gutter)",
24
+ );
25
+ expect(style.getPropertyValue("--seed-box-padding-right-base")).toBe(
26
+ "var(--seed-dimension-x4)",
27
+ );
28
+ });
29
+
30
+ it("resolves safeArea per breakpoint", () => {
31
+ render(<Box data-testid="box" pl={{ base: "safeArea", md: "x4" }} />);
32
+ const { style } = screen.getByTestId("box");
33
+
34
+ expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
35
+ "var(--seed-safe-area-left)",
36
+ );
37
+ expect(style.getPropertyValue("--seed-box-padding-left-md")).toBe("var(--seed-dimension-x4)");
38
+ });
39
+
40
+ it("prefers paddingLeft over pl", () => {
41
+ render(<Box data-testid="box" paddingLeft="safeArea" pl="x4" />);
42
+ const { style } = screen.getByTestId("box");
43
+
44
+ expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
45
+ "var(--seed-safe-area-left)",
46
+ );
47
+ });
48
+
49
+ it("resolves directional bleed to the safe area inset and its negative margin", () => {
50
+ render(<Box data-testid="box" bleedLeft="safeArea" bleedTop="safeArea" />);
51
+ const { style } = screen.getByTestId("box");
52
+
53
+ expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
54
+ expect(style.getPropertyValue("--seed-box-margin-left-base")).toBe(
55
+ "calc(var(--seed-safe-area-left) * -1)",
56
+ );
57
+ expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
58
+ expect(style.getPropertyValue("--seed-box-margin-top-base")).toBe(
59
+ "calc(var(--seed-safe-area-top) * -1)",
60
+ );
61
+ });
62
+
63
+ it("resolves bleedX and bleedY to each side's own inset", () => {
64
+ render(<Box data-testid="box" bleedX="safeArea" bleedY="safeArea" />);
65
+ const { style } = screen.getByTestId("box");
66
+
67
+ expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
68
+ expect(style.getPropertyValue("--seed-box-bleed-right-base")).toBe(
69
+ "var(--seed-safe-area-right)",
70
+ );
71
+ expect(style.getPropertyValue("--seed-box-margin-right-base")).toBe(
72
+ "calc(var(--seed-safe-area-right) * -1)",
73
+ );
74
+ expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
75
+ expect(style.getPropertyValue("--seed-box-bleed-bottom-base")).toBe(
76
+ "var(--seed-safe-area-bottom)",
77
+ );
78
+ });
79
+
80
+ it("lets a directional bleed override bleed", () => {
81
+ render(<Box data-testid="box" bleed="safeArea" bleedBottom="x4" />);
82
+ const { style } = screen.getByTestId("box");
83
+
84
+ expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
85
+ expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
86
+ expect(style.getPropertyValue("--seed-box-bleed-bottom-base")).toBe("var(--seed-dimension-x4)");
87
+ });
88
+ });
package/src/components/Skeleton/Skeleton.test.tsx CHANGED
@@ -59,7 +59,7 @@ describe("Skeleton", () => {
59
59
  );
60
60
  const element = getByTestId("skeleton");
61
61
 
62
- expect(ref.current).toBe(element);
62
+ expect<HTMLElement | null>(ref.current).toBe(element);
63
63
  expect(element).toHaveClass("custom");
64
64
  expect(element.style.height).toBe("32px");
65
65
  expect(element.style.getPropertyValue("--seed-box-width-base")).toBe(vars.$dimension.x8);
package/src/utils/styled.tsx CHANGED
@@ -71,13 +71,17 @@ export function handleDimension(dimension: string | 0 | undefined): string | und
71
71
  }
72
72
 
73
73
  function handleBleed(
74
- dimension: "asPadding" | string | 0 | undefined,
74
+ dimension: "asPadding" | "safeArea" | string | 0 | undefined,
75
75
  direction: "top" | "right" | "bottom" | "left",
76
76
  ) {
77
77
  if (dimension === "asPadding") {
78
78
  return `var(--seed-box-padding-${direction})`;
79
79
  }
80
80
 
81
+ if (dimension === "safeArea") {
82
+ return `var(--seed-safe-area-${direction})`;
83
+ }
84
+
81
85
  return handleDimension(dimension);
82
86
  }
83
87
 
@@ -92,7 +96,7 @@ function handleShadow(shadow: Shadow | (string & {}) | undefined) {
92
96
 
93
97
  function handlePaddingWithSafeArea(
94
98
  padding: string | 0 | undefined,
95
- direction: "top" | "bottom",
99
+ direction: "top" | "right" | "bottom" | "left",
96
100
  ): string | undefined {
97
101
  if (padding === "safeArea") {
98
102
  return `var(--seed-safe-area-${direction})`;
@@ -257,71 +261,120 @@ interface BleedStyleProps {
257
261
  /**
258
262
  * Negative margin on all four sides to extend the element outside its parent.
259
263
  * If set to "asPadding", it will use the padding value in the same direction.
264
+ * If set to "safeArea", it will use the safe area inset in the same direction.
260
265
  *
261
266
  * Cannot be combined with any `margin*` prop.
262
267
  */
263
268
  bleed?: ResponsiveValue<
264
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
269
+ | "asPadding"
270
+ | "safeArea"
271
+ | Dimension
272
+ | `spacingX.${SpacingX}`
273
+ | `spacingY.${SpacingY}`
274
+ | 0
275
+ | (string & {})
265
276
  >;
266
277
 
267
278
  /**
268
279
  * Negative x-axis margin to extend the element outside its parent.
269
280
  * If set to "asPadding", it will use the padding value in the same direction.
281
+ * If set to "safeArea", it will use the safe area inset in the same direction.
270
282
  *
271
283
  * Cannot be combined with any `margin*` prop.
272
284
  */
273
285
  bleedX?: ResponsiveValue<
274
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
286
+ | "asPadding"
287
+ | "safeArea"
288
+ | Dimension
289
+ | `spacingX.${SpacingX}`
290
+ | `spacingY.${SpacingY}`
291
+ | 0
292
+ | (string & {})
275
293
  >;
276
294
 
277
295
  /**
278
296
  * Negative y-axis margin to extend the element outside its parent.
279
297
  * If set to "asPadding", it will use the padding value in the same direction.
298
+ * If set to "safeArea", it will use the safe area inset in the same direction.
280
299
  *
281
300
  * Cannot be combined with any `margin*` prop.
282
301
  */
283
302
  bleedY?: ResponsiveValue<
284
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
303
+ | "asPadding"
304
+ | "safeArea"
305
+ | Dimension
306
+ | `spacingX.${SpacingX}`
307
+ | `spacingY.${SpacingY}`
308
+ | 0
309
+ | (string & {})
285
310
  >;
286
311
 
287
312
  /**
288
313
  * Negative top margin to extend the element outside its parent.
289
314
  * If set to "asPadding", it will use the padding value in the same direction.
315
+ * If set to "safeArea", it will use the safe area inset in the same direction.
290
316
  *
291
317
  * Cannot be combined with any `margin*` prop.
292
318
  */
293
319
  bleedTop?: ResponsiveValue<
294
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
320
+ | "asPadding"
321
+ | "safeArea"
322
+ | Dimension
323
+ | `spacingX.${SpacingX}`
324
+ | `spacingY.${SpacingY}`
325
+ | 0
326
+ | (string & {})
295
327
  >;
296
328
 
297
329
  /**
298
330
  * Negative right margin to extend the element outside its parent.
299
331
  * If set to "asPadding", it will use the padding value in the same direction.
332
+ * If set to "safeArea", it will use the safe area inset in the same direction.
300
333
  *
301
334
  * Cannot be combined with any `margin*` prop.
302
335
  */
303
336
  bleedRight?: ResponsiveValue<
304
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
337
+ | "asPadding"
338
+ | "safeArea"
339
+ | Dimension
340
+ | `spacingX.${SpacingX}`
341
+ | `spacingY.${SpacingY}`
342
+ | 0
343
+ | (string & {})
305
344
  >;
306
345
 
307
346
  /**
308
347
  * Negative bottom margin to extend the element outside its parent.
309
348
  * If set to "asPadding", it will use the padding value in the same direction.
349
+ * If set to "safeArea", it will use the safe area inset in the same direction.
310
350
  *
311
351
  * Cannot be combined with any `margin*` prop.
312
352
  */
313
353
  bleedBottom?: ResponsiveValue<
314
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
354
+ | "asPadding"
355
+ | "safeArea"
356
+ | Dimension
357
+ | `spacingX.${SpacingX}`
358
+ | `spacingY.${SpacingY}`
359
+ | 0
360
+ | (string & {})
315
361
  >;
316
362
 
317
363
  /**
318
364
  * Negative left margin to extend the element outside its parent.
319
365
  * If set to "asPadding", it will use the padding value in the same direction.
366
+ * If set to "safeArea", it will use the safe area inset in the same direction.
320
367
  *
321
368
  * Cannot be combined with any `margin*` prop.
322
369
  */
323
370
  bleedLeft?: ResponsiveValue<
324
- "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
371
+ | "asPadding"
372
+ | "safeArea"
373
+ | Dimension
374
+ | `spacingX.${SpacingX}`
375
+ | `spacingY.${SpacingY}`
376
+ | 0
377
+ | (string & {})
325
378
  >;
326
379
  }
327
380
 
@@ -479,14 +532,14 @@ export type StyleProps = {
479
532
  >;
480
533
 
481
534
  paddingRight?: ResponsiveValue<
482
- Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
535
+ Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})
483
536
  >;
484
537
 
485
538
  /**
486
539
  * Shorthand for `paddingRight`.
487
540
  */
488
541
  pr?: ResponsiveValue<
489
- Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
542
+ Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})
490
543
  >;
491
544
 
492
545
  paddingBottom?: ResponsiveValue<
@@ -501,14 +554,14 @@ export type StyleProps = {
501
554
  >;
502
555
 
503
556
  paddingLeft?: ResponsiveValue<
504
- Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
557
+ Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})
505
558
  >;
506
559
 
507
560
  /**
508
561
  * Shorthand for `paddingLeft`.
509
562
  */
510
563
  pl?: ResponsiveValue<
511
- Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})
564
+ Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})
512
565
  >;
513
566
 
514
567
  display?: ResponsiveValue<
@@ -747,13 +800,17 @@ export function useStyleProps<T extends UseStyleProps>(
747
800
  handlePaddingWithSafeArea(v, "top"),
748
801
  )),
749
802
  ...((paddingRight ?? pr) !== undefined &&
750
- resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension)),
803
+ resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, (v) =>
804
+ handlePaddingWithSafeArea(v, "right"),
805
+ )),
751
806
  ...((paddingBottom ?? pb) !== undefined &&
752
807
  resolveResponsive("--seed-box-padding-bottom", paddingBottom ?? pb, (v) =>
753
808
  handlePaddingWithSafeArea(v, "bottom"),
754
809
  )),
755
810
  ...((paddingLeft ?? pl) !== undefined &&
756
- resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension)),
811
+ resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, (v) =>
812
+ handlePaddingWithSafeArea(v, "left"),
813
+ )),
757
814
  ...((bleedTop ?? bleedY ?? bleed) !== undefined &&
758
815
  resolveResponsive("--seed-box-bleed-top", bleedTop ?? bleedY ?? bleed, (v) =>
759
816
  handleBleed(v, "top"),