@nimbus-ds/box 4.3.2 → 4.3.3

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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/CHANGELOG.md +6 -0
  3. package/dist/index.d.ts +36 -21
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2026-01-13 `4.3.3`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Adds support for React 19. ([#404](https://github.com/TiendaNube/nimbus-design-system/pull/404) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2025-11-11 `4.3.2`
6
12
 
7
13
  #### 🎉 New features
package/dist/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2026-01-13 `4.3.3`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Adds support for React 19. ([#404](https://github.com/TiendaNube/nimbus-design-system/pull/404) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2025-11-11 `4.3.2`
6
12
 
7
13
  #### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -22,10 +22,10 @@ export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps
22
22
  * so that events are typed when using JSX.IntrinsicElements.
23
23
  */
24
24
  <As = IntrinsicElementString>(props: As extends "" ? {
25
- as: keyof JSX.IntrinsicElements;
25
+ as: keyof React.JSX.IntrinsicElements;
26
26
  } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
27
27
  as: As;
28
- }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
28
+ }> : As extends keyof React.JSX.IntrinsicElements ? Merge<React.JSX.IntrinsicElements[As], OwnProps & {
29
29
  as: As;
30
30
  }> : never): React.ReactElement | null;
31
31
  }
@@ -34,6 +34,7 @@ export interface Conditions<T> {
34
34
  md?: T;
35
35
  lg?: T;
36
36
  xl?: T;
37
+ xxl?: T;
37
38
  }
38
39
  export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
39
40
  export type BoxSizing = "border-box" | "content-box";
@@ -50,11 +51,15 @@ export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
50
51
  export type Overflow = "visible" | "hidden" | "scroll" | "auto";
51
52
  export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
52
53
  export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
54
+ export type ScrollbarWidth = "auto" | "none" | "thin";
53
55
  declare const propertiesBox: {
54
56
  gap: {
55
57
  none: string;
56
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
60
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
61
+ * such as grid or flex.
62
+ */
58
63
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -78,7 +83,10 @@ declare const propertiesBox: {
78
83
  gridGap: {
79
84
  none: string;
80
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
87
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
88
+ * such as grid or flex.
89
+ */
82
90
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -110,9 +118,7 @@ declare const propertiesBox: {
110
118
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
111
119
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
120
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
114
- * The width property specifies the width of a box's content area.
115
- */
121
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
122
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
123
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
124
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -146,9 +152,7 @@ declare const propertiesBox: {
146
152
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
147
153
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
148
154
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
149
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
150
- * The width property specifies the width of a box's content area.
151
- */
155
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
156
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
157
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
158
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -186,10 +190,6 @@ declare const propertiesBox: {
186
190
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
191
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
192
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
- /**
190
- * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
191
- * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
192
- */
193
193
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
194
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
195
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -211,9 +211,7 @@ declare const propertiesBox: {
211
211
  borderWidth: {
212
212
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
213
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
- "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
215
- * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
216
- */
214
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
215
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
216
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
219
217
  none: string;
@@ -224,7 +222,10 @@ declare const propertiesBox: {
224
222
  spacing: {
225
223
  none: string;
226
224
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
227
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
225
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
226
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
227
+ * such as grid or flex.
228
+ */
228
229
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
230
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
231
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -247,7 +248,10 @@ declare const propertiesBox: {
247
248
  };
248
249
  margin: {
249
250
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
250
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
252
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
253
+ * such as grid or flex.
254
+ */
251
255
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
256
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
257
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -311,7 +315,10 @@ declare const propertiesBox: {
311
315
  };
312
316
  fontSize: {
313
317
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
314
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
319
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
320
+ * such as grid or flex.
321
+ */
315
322
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
323
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
317
324
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -342,7 +349,10 @@ declare const propertiesBox: {
342
349
  };
343
350
  lineHeight: {
344
351
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
353
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
354
+ * such as grid or flex.
355
+ */
346
356
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
357
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
358
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -371,6 +381,7 @@ declare const propertiesBox: {
371
381
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
372
382
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
383
  };
384
+ scrollbarWidth: ScrollbarWidth[];
374
385
  };
375
386
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
376
387
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -771,6 +782,10 @@ export interface BoxSprinkle {
771
782
  * @default left
772
783
  */
773
784
  textAlign?: TextAlign | BoxConditions<TextAlign>;
785
+ /**
786
+ * The scrollbarWidth property specifies the width of the scrollbar.
787
+ */
788
+ scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
774
789
  }
775
790
  export interface BoxProperties extends BoxSprinkle {
776
791
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "4.3.2",
3
+ "version": "4.3.3",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -14,8 +14,8 @@
14
14
  "version": "yarn version"
15
15
  },
16
16
  "peerDependencies": {
17
- "react": "^16.8 || ^17.0 || ^18.0",
18
- "react-dom": "^16.8 || ^17.0 || ^18.0"
17
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
18
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
19
19
  },
20
20
  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
21
21
  "repository": {
@@ -26,7 +26,7 @@
26
26
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
27
27
  },
28
28
  "devDependencies": {
29
- "@nimbus-ds/webpack": "^1.7.0",
29
+ "@nimbus-ds/webpack": "^1.7.1",
30
30
  "@vanilla-extract/dynamic": "^2.0.3"
31
31
  }
32
32
  }