@nimbus-ds/stepper 1.0.0 → 1.0.1

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 (7) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +6 -0
  3. package/dist/CHANGELOG.md +6 -0
  4. package/dist/index.d.ts +59 -22
  5. package/package.json +11 -11
  6. package/src/stepper.docs.json +1 -1
  7. package/src/stepper.stories.tsx +8 -0
package/.turbo/turbo-build.log CHANGED
@@ -15,10 +15,10 @@ modules by path external "@nimbus-ds/ 252 bytes
15
15
  external "@nimbus-ds/styles" 42 bytes [built] [code generated]
16
16
  external "@nimbus-ds/title" 42 bytes [built] [code generated]
17
17
  external "react" 42 bytes [built] [code generated]
18
- webpack 5.90.3 compiled successfully in 9695 ms
18
+ webpack 5.90.3 compiled successfully in 14616 ms
19
19
  Compiling input files...
20
20
  Processing ./src/index.ts
21
21
  Writing ./src/index.ts -> ./dist/index.d.ts
22
22
  Checking generated files...
23
23
  Compiler option "skipLibCheck" is disabled to properly check generated output
24
- Done in 13.14s
24
+ Done in 19.75s
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
1
  # Changelog
2
2
 
3
3
  The Stepper component guides users through multi-step processes, showing their progress and allowing navigation between completed steps.
4
+
5
+ ## 2026-01-13 `1.0.1`
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))
package/dist/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
1
  # Changelog
2
2
 
3
3
  The Stepper component guides users through multi-step processes, showing their progress and allowing navigation between completed steps.
4
+
5
+ ## 2026-01-13 `1.0.1`
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))
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})`;
@@ -129,6 +137,14 @@ declare const propertiesBox: {
129
137
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
138
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
139
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
140
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
+ "ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
142
+ "ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
+ transparent: string;
144
+ };
145
+ background: {
146
+ "ai-generative-interactive-border": string;
147
+ "ai-generative-interactive": string;
132
148
  transparent: string;
133
149
  };
134
150
  color: {
@@ -155,6 +171,9 @@ declare const propertiesBox: {
155
171
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
172
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
173
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
174
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
+ "ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
176
+ "ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
158
177
  transparent: string;
159
178
  };
160
179
  borderColor: {
@@ -177,10 +196,7 @@ declare const propertiesBox: {
177
196
  transparent: string;
178
197
  };
179
198
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
199
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
200
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
201
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
202
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +204,6 @@ declare const propertiesBox: {
188
204
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
205
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
206
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
207
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
208
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
209
  none: string;
@@ -210,7 +222,10 @@ declare const propertiesBox: {
210
222
  spacing: {
211
223
  none: string;
212
224
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
- "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
+ */
214
229
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
215
230
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
231
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -233,7 +248,10 @@ declare const propertiesBox: {
233
248
  };
234
249
  margin: {
235
250
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
- "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
+ */
237
255
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
238
256
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
257
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -268,6 +286,7 @@ declare const propertiesBox: {
268
286
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
287
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
288
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
289
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
290
  };
272
291
  transitionDuration: {
273
292
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -296,7 +315,10 @@ declare const propertiesBox: {
296
315
  };
297
316
  fontSize: {
298
317
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
299
- "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
+ */
300
322
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
301
323
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
302
324
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -320,12 +342,17 @@ declare const propertiesBox: {
320
342
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
321
343
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
344
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
- h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
346
+ * This defines the ability for a flex item to grow if necessary.
347
+ */
324
348
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
325
349
  };
326
350
  lineHeight: {
327
351
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
328
- "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
+ */
329
356
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
330
357
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
331
358
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -345,16 +372,16 @@ declare const propertiesBox: {
345
372
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
346
373
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
374
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
- h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
375
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
376
+ * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
377
+ */
349
378
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
350
379
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
351
380
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
381
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
382
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
383
+ };
384
+ scrollbarWidth: ScrollbarWidth[];
358
385
  };
359
386
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
387
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,8 +398,10 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
398
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
399
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
400
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
401
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
402
  export interface BoxConditions<T> extends Conditions<T> {
375
403
  focus?: T;
404
+ focusVisible?: T;
376
405
  focusWithin?: T;
377
406
  active?: T;
378
407
  hover?: T;
@@ -631,6 +660,10 @@ export interface BoxSprinkle {
631
660
  * The zIndex property specifies the stack order of the box.
632
661
  */
633
662
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
663
+ /**
664
+ * The background property sets the background of the box.
665
+ */
666
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
667
  /**
635
668
  * The backgroundImage property sets one or more background images on an element.
636
669
  */
@@ -749,6 +782,10 @@ export interface BoxSprinkle {
749
782
  * @default left
750
783
  */
751
784
  textAlign?: TextAlign | BoxConditions<TextAlign>;
785
+ /**
786
+ * The scrollbarWidth property specifies the width of the scrollbar.
787
+ */
788
+ scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
752
789
  }
753
790
  export interface BoxProperties extends BoxSprinkle {
754
791
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/stepper",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Stepper component for guiding users through multi-step processes",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -30,19 +30,19 @@
30
30
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@nimbus-ds/box": "^4.2.0",
34
- "@nimbus-ds/card": "^3.1.2",
35
- "@nimbus-ds/icon": "^3.0.1",
36
- "@nimbus-ds/icons": "^1.9.0",
37
- "@nimbus-ds/styles": "^9.16.0",
38
- "@nimbus-ds/text": "^6.4.0"
33
+ "@nimbus-ds/box": "^4.3.3",
34
+ "@nimbus-ds/card": "^3.1.3",
35
+ "@nimbus-ds/icon": "^3.3.1",
36
+ "@nimbus-ds/icons": "^1.15.1",
37
+ "@nimbus-ds/styles": "^9.50.0",
38
+ "@nimbus-ds/text": "^6.6.1"
39
39
  },
40
40
  "peerDependencies": {
41
- "react": "^16.8 || ^17.0 || ^18.0",
42
- "react-dom": "^16.8 || ^17.0 || ^18.0"
41
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
42
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@nimbus-ds/button": "^2.6.0",
46
- "@nimbus-ds/webpack": "^1.5.1"
45
+ "@nimbus-ds/button": "^2.10.1",
46
+ "@nimbus-ds/webpack": "^1.7.1"
47
47
  }
48
48
  }
package/src/stepper.docs.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Stepper",
4
4
  "totalProps": 4,
5
5
  "packageName": "@nimbus-ds/stepper",
6
- "version": "0.0.0",
6
+ "version": "1.0.0",
7
7
  "docLink": "https://nimbus.nuvemshop.com.br/documentation/composite-components/stepper",
8
8
  "props": [
9
9
  {
package/src/stepper.stories.tsx CHANGED
@@ -4,6 +4,7 @@ import React, { useState } from "react";
4
4
  import { Button } from "@nimbus-ds/button";
5
5
  import { Box } from "@nimbus-ds/box";
6
6
  import { Text } from "@nimbus-ds/text";
7
+ import { mapBoxProps } from ".storybook/utils";
7
8
  import { Stepper } from "./Stepper";
8
9
 
9
10
  const meta: Meta<typeof Stepper> = {
@@ -21,11 +22,18 @@ const meta: Meta<typeof Stepper> = {
21
22
  activeStep: {
22
23
  control: { type: "number", min: 0, max: 4 },
23
24
  description: "The currently active step (0-based index)",
25
+ table: { category: "Component" },
24
26
  },
25
27
  selectedStep: {
26
28
  control: { type: "number", min: 0, max: 4 },
27
29
  description: "The currently selected step (0-based index)",
30
+ table: { category: "Component" },
28
31
  },
32
+ children: {
33
+ control: { disable: true },
34
+ table: { category: "Component" },
35
+ },
36
+ ...mapBoxProps(["display", "flexWrap", "gap"]),
29
37
  },
30
38
  tags: ["autodocs"],
31
39
  };