@nimbus-ds/stepper 1.0.1 → 1.1.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 (17) hide show
  1. package/.turbo/turbo-build.log +8 -9
  2. package/CHANGELOG.md +6 -0
  3. package/dist/CHANGELOG.md +6 -0
  4. package/dist/index.d.ts +16 -32
  5. package/dist/index.js +1 -1
  6. package/package.json +9 -9
  7. package/src/Stepper.tsx +7 -5
  8. package/src/components/StepperCard/StepperCard.tsx +7 -3
  9. package/src/components/StepperCard/stepperCard.types.ts +3 -2
  10. package/src/components/StepperContext/StepperContext.tsx +2 -2
  11. package/src/components/StepperContext/stepperContext.spec.tsx +6 -6
  12. package/src/components/StepperItem/StepperItem.tsx +3 -2
  13. package/src/components/StepperItem/stepperItem.spec.tsx +7 -4
  14. package/src/components/StepperItem/stepperItem.types.ts +2 -2
  15. package/src/stepper.docs.json +7 -2
  16. package/src/stepper.spec.tsx +8 -4
  17. package/src/stepper.types.ts +13 -7
package/.turbo/turbo-build.log CHANGED
@@ -1,11 +1,11 @@
1
1
  Executing post-build scripts
2
2
  Moving CHANGELOG.md & README.md to /home/runner/work/nimbus-design-system/nimbus-design-system/packages/react/src/composite/Stepper/dist
3
- asset ./index.js 18.8 KiB [emitted] [minimized] (name: ./index)
3
+ asset ./index.js 19 KiB [emitted] [minimized] (name: ./index)
4
4
  runtime modules 670 bytes 3 modules
5
- cacheable modules 30.8 KiB
6
- modules by path ./src/ 10.7 KiB 11 modules
7
- modules by path ../ 20.1 KiB
8
- modules by path ../Card/src/components/ 3.04 KiB 7 modules
5
+ cacheable modules 31.1 KiB
6
+ modules by path ./src/ 10.8 KiB 11 modules
7
+ modules by path ../ 20.3 KiB
8
+ modules by path ../Card/src/components/ 3.17 KiB 7 modules
9
9
  + 3 modules
10
10
  modules by path external "@nimbus-ds/ 252 bytes
11
11
  external "@nimbus-ds/box" 42 bytes [built] [code generated]
@@ -15,10 +15,9 @@ 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 14616 ms
18
+ webpack 5.90.3 compiled successfully in 20342 ms
19
19
  Compiling input files...
20
20
  Processing ./src/index.ts
21
21
  Writing ./src/index.ts -> ./dist/index.d.ts
22
- Checking generated files...
23
- Compiler option "skipLibCheck" is disabled to properly check generated output
24
- Done in 19.75s
22
+ File checking is skipped (due nothing to check)
23
+ Done in 18.38s
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  The Stepper component guides users through multi-step processes, showing their progress and allowing navigation between completed steps.
4
4
 
5
+ ## 2026-02-12 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enabled `className` prop forwarding to allow consumers to pass custom CSS classes. ([#426](https://github.com/TiendaNube/nimbus-design-system/pull/426) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2026-01-13 `1.0.1`
6
12
 
7
13
  #### 🎉 New features
package/dist/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  The Stepper component guides users through multi-step processes, showing their progress and allowing navigation between completed steps.
4
4
 
5
+ ## 2026-02-12 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enabled `className` prop forwarding to allow consumers to pass custom CSS classes. ([#426](https://github.com/TiendaNube/nimbus-design-system/pull/426) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2026-01-13 `1.0.1`
6
12
 
7
13
  #### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -56,10 +56,7 @@ declare const propertiesBox: {
56
56
  gap: {
57
57
  none: string;
58
58
  "0-5": `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
- */
59
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
61
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
62
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -83,10 +80,7 @@ declare const propertiesBox: {
83
80
  gridGap: {
84
81
  none: string;
85
82
  "0-5": `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
- */
83
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
84
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
91
85
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
92
86
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -185,7 +179,9 @@ declare const propertiesBox: {
185
179
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
180
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
181
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
- "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
+ "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
183
+ * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
184
+ */
189
185
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
186
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
187
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -193,6 +189,7 @@ declare const propertiesBox: {
193
189
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
190
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
191
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
+ "ai-generative-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
193
  transparent: string;
197
194
  };
198
195
  borderRadius: {
@@ -218,14 +215,13 @@ declare const propertiesBox: {
218
215
  };
219
216
  borderStyle: BorderStyle[];
220
217
  boxSizing: BoxSizing[];
221
- cursor: Cursor[];
218
+ cursor: Cursor[]; /**
219
+ * The padding properties are used to generate space around an box's content area.
220
+ */
222
221
  spacing: {
223
222
  none: string;
224
223
  "0-5": `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
- */
224
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
225
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
226
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
227
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -248,10 +244,7 @@ declare const propertiesBox: {
248
244
  };
249
245
  margin: {
250
246
  "0-5": `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
- */
247
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
248
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
249
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
250
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -315,10 +308,7 @@ declare const propertiesBox: {
315
308
  };
316
309
  fontSize: {
317
310
  "0-5": `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
- */
311
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
312
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
313
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
324
314
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -342,17 +332,12 @@ declare const propertiesBox: {
342
332
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
343
333
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
334
  h4: `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
- */
335
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
336
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
349
337
  };
350
338
  lineHeight: {
351
339
  "0-5": `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
- */
340
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
356
341
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
357
342
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
343
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -372,9 +357,7 @@ declare const propertiesBox: {
372
357
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
358
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
374
359
  "20": `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
- */
360
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
378
361
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
379
362
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
380
363
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -814,6 +797,7 @@ export interface StepperItemProperties {
814
797
  }
815
798
  export type StepperItemProps = StepperItemProperties & HTMLAttributes<HTMLDivElement>;
816
799
  export interface StepperCardProperties {
800
+ className?: string;
817
801
  /**
818
802
  * The content to be rendered inside the card container
819
803
  * @TJS-type React.ReactNode
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/box"),require("@nimbus-ds/icon"),require("@nimbus-ds/text"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/box","@nimbus-ds/icon","@nimbus-ds/text","@nimbus-ds/icons","@nimbus-ds/styles","@nimbus-ds/title"],t):"object"==typeof exports?exports["@nimbus-ds/stepper"]=t(require("react"),require("@nimbus-ds/box"),require("@nimbus-ds/icon"),require("@nimbus-ds/text"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):e["@nimbus-ds/stepper"]=t(e.react,e["@nimbus-ds/box"],e["@nimbus-ds/icon"],e["@nimbus-ds/text"],e["@nimbus-ds/icons"],e["@nimbus-ds/styles"],e["@nimbus-ds/title"])}(global,((e,t,r,n,o,a,i)=>(()=>{"use strict";var s={253:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Card=void 0;const n=r(769).__importDefault(r(155)),o=r(367),a=r(190),i=({className:e,style:t,children:r,padding:a="base",backgroundColor:i="neutral-background",...s})=>n.default.createElement("div",{className:[o.card.classnames.container,o.card.sprinkle({padding:a,backgroundColor:i})].join(" "),...s},r);t.Card=i,i.Body=a.CardBody,i.Footer=a.CardFooter,i.Header=a.CardHeader,i.displayName="Card",i.Body.displayName="Card.Body",i.Footer.displayName="Card.Footer",i.Header.displayName="Card.Header"},45:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardBody=void 0;const n=r(769).__importDefault(r(155)),o=r(367);t.CardBody=({className:e,style:t,padding:r="none",children:a,...i})=>n.default.createElement("div",{className:o.card.subComponents.body.sprinkle({padding:r}),...i},a)},161:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardBody=void 0;const n=r(45);var o=r(45);Object.defineProperty(t,"CardBody",{enumerable:!0,get:function(){return o.CardBody}}),t.default=n.CardBody},719:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardFooter=void 0;const n=r(769).__importDefault(r(155)),o=r(367);t.CardFooter=({className:e,style:t,padding:r="none",children:a,...i})=>n.default.createElement("div",{className:[o.card.classnames.container__footer,o.card.subComponents.footer.sprinkle({padding:r})].join(" "),...i},a)},410:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardFooter=void 0;const n=r(719);var o=r(719);Object.defineProperty(t,"CardFooter",{enumerable:!0,get:function(){return o.CardFooter}}),t.default=n.CardFooter},407:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardHeader=void 0;const n=r(769).__importDefault(r(155)),o=r(593),a=r(367);t.CardHeader=({className:e,style:t,padding:r="none",title:i,children:s,...l})=>n.default.createElement("div",{className:a.card.subComponents.header.sprinkle({padding:r}),...l},i&&n.default.createElement(o.Title,{"data-testid":"header-title",as:"h4"},i),s)},348:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardHeader=void 0;const n=r(407);var o=r(407);Object.defineProperty(t,"CardHeader",{enumerable:!0,get:function(){return o.CardHeader}}),t.default=n.CardHeader},190:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(769);n.__exportStar(r(161),t),n.__exportStar(r(410),t),n.__exportStar(r(348),t)},509:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Card=void 0;const n=r(253);var o=r(253);Object.defineProperty(t,"Card",{enumerable:!0,get:function(){return o.Card}}),t.default=n.Card},831:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Stepper=void 0;const n=r(769).__importStar(r(155)),o=r(558),a=r(337),i=r(317),s=Object.assign((({activeStep:e,children:t,...r})=>{const s=(0,n.useMemo)((()=>(0,i.isControlled)(r)),[r]),[l,c]=(0,n.useState)(e),u=s?r.selectedStep:l,p=s?r.onSelectStep:c,d=n.default.Children.count(t),f=n.default.Children.map(t,((e,t)=>{if(n.default.isValidElement(e)){const r=t;return n.default.cloneElement(e,{step:r})}return e}));(0,n.useEffect)((()=>{s||c(e)}),[e,s]);const y=(0,n.useMemo)((()=>{if(s){const{selectedStep:e,onSelectStep:t,...n}=r;return n}return r}),[r,s]),m=(0,n.useMemo)((()=>({totalSteps:d,activeStep:e,selectedStep:u,onSelect:p})),[d,e,u,p]);return n.default.createElement(a.StepperContext.Provider,{value:m},n.default.createElement(o.Box,{display:"flex",flexWrap:"wrap",gap:"2",justifyContent:"center",alignItems:"center",role:"progressbar","aria-valuenow":e+1,"aria-valuemin":1,"aria-valuemax":d,"aria-label":`Multi-step process: Step ${e+1} of ${d}`,...y},f))}),{Item:a.StepperItem,Card:a.StepperCard,displayName:"Stepper"});t.Stepper=s,s.Item.displayName="Stepper.Item",s.Card.displayName="Stepper.Card"},566:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperCard=void 0;const n=r(769).__importDefault(r(155)),o=r(509),a=({children:e})=>n.default.createElement(o.Card,{padding:"small"},e);t.StepperCard=a,a.displayName="Stepper.Card"},613:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperCard=void 0;var n=r(566);Object.defineProperty(t,"StepperCard",{enumerable:!0,get:function(){return n.StepperCard}})},980:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=void 0;const n=r(155);t.StepperContext=(0,n.createContext)({totalSteps:1,activeStep:0,selectedStep:void 0,onSelect:void 0})},462:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=void 0;var n=r(980);Object.defineProperty(t,"StepperContext",{enumerable:!0,get:function(){return n.StepperContext}})},702:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItemState=t.joinClassNames=void 0;t.joinClassNames=(...e)=>e.filter(Boolean).join(" "),function(e){e.STARTED="started",e.COMPLETED="completed",e.SELECTED="selected",e.PENDING="pending"}(t.StepperItemState||(t.StepperItemState={}))},90:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItem=void 0;const n=r(769).__importStar(r(155)),o=r(208),a=r(526),i=r(809),s=r(367),l=r(462),c=r(702),u=({className:e,style:t,step:r,label:u,...p})=>{const{totalSteps:d,activeStep:f,selectedStep:y,onSelect:m}=(0,n.useContext)(l.StepperContext),_=(0,n.useMemo)((()=>y===r?c.StepperItemState.SELECTED:r===f?c.StepperItemState.STARTED:r<f?c.StepperItemState.COMPLETED:c.StepperItemState.PENDING),[f,y,r]),b=_===c.StepperItemState.PENDING,v=_===c.StepperItemState.SELECTED,S=_===c.StepperItemState.COMPLETED,h=r===d-1,C=e=>{e&&"Enter"!==e.key&&" "!==e.key||(e?.preventDefault(),!m||b||v||m(r))},w=(0,n.useCallback)((()=>S?n.default.createElement(o.Icon,{source:n.default.createElement(i.CheckCircleIcon,{size:"small"}),color:"success-textHigh"}):n.default.createElement(a.Text,{as:"span",color:"currentColor",fontSize:"caption",fontWeight:"medium"},r+1)),[S,r]);return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:(0,c.joinClassNames)(s.stepper.classnames.item,(b||v)&&s.stepper.classnames.item__disabled),role:"button",tabIndex:m?0:-1,onKeyDown:C,onClick:()=>C(),...p},n.default.createElement("div",{className:(0,c.joinClassNames)(s.stepper.classnames.item__icon,s.stepper.classnames[`item__icon_${_}`])},w()),u&&n.default.createElement("span",{className:(0,c.joinClassNames)(s.stepper.classnames.item__label,s.stepper.classnames[`item__label_${_}`])},u)),!h&&n.default.createElement("div",{className:s.stepper.classnames.item__line}))};t.StepperItem=u,u.displayName="Stepper.Item"},976:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItem=void 0;var n=r(90);Object.defineProperty(t,"StepperItem",{enumerable:!0,get:function(){return n.StepperItem}})},337:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=t.StepperCard=t.StepperItem=void 0;var n=r(976);Object.defineProperty(t,"StepperItem",{enumerable:!0,get:function(){return n.StepperItem}});var o=r(613);Object.defineProperty(t,"StepperCard",{enumerable:!0,get:function(){return o.StepperCard}});var a=r(462);Object.defineProperty(t,"StepperContext",{enumerable:!0,get:function(){return a.StepperContext}})},317:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isControlled=void 0;t.isControlled=e=>"selectedStep"in e&&"onSelectStep"in e},558:e=>{e.exports=t},208:e=>{e.exports=r},809:e=>{e.exports=o},367:e=>{e.exports=a},526:e=>{e.exports=n},593:e=>{e.exports=i},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>k,__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>j,__asyncValues:()=>P,__await:()=>g,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>D,__classPrivateFieldSet:()=>M,__createBinding:()=>_,__decorate:()=>s,__disposeResources:()=>q,__esDecorate:()=>c,__exportStar:()=>b,__extends:()=>o,__generator:()=>m,__importDefault:()=>N,__importStar:()=>I,__makeTemplateObject:()=>x,__metadata:()=>f,__param:()=>l,__propKey:()=>p,__read:()=>S,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>d,__spread:()=>h,__spreadArray:()=>w,__spreadArrays:()=>C,__values:()=>v,default:()=>B});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function s(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function l(e,t){return function(r,n){t(r,n,e)}}function c(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=n.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?n.static?e:e.prototype:null,p=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),d=!1,f=r.length-1;f>=0;f--){var y={};for(var m in n)y[m]="access"===m?{}:n[m];for(var m in n.access)y.access[m]=n.access[m];y.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var _=(0,r[f])("accessor"===l?{get:p.get,set:p.set}:p[c],y);if("accessor"===l){if(void 0===_)continue;if(null===_||"object"!=typeof _)throw new TypeError("Object expected");(s=i(_.get))&&(p.get=s),(s=i(_.set))&&(p.set=s),(s=i(_.init))&&o.unshift(s)}else(s=i(_))&&("field"===l?o.unshift(s):p[c]=s)}u&&Object.defineProperty(u,n.name,p),d=!0}function u(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function p(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function s(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((n=n.apply(e,t||[])).next())}))}function m(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(l){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var _=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function b(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||_(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function S(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}function C(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function w(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function g(e){return this instanceof g?(this.v=e,this):new g(e)}function j(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||s(e,t)}))})}function s(e,t){try{(r=o[e](t)).value instanceof g?Promise.resolve(r.value.v).then(l,c):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function O(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:g(e[n](t)),done:!1}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var E=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function I(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&_(t,e,r);return E(t,e),t}function N(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function M(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function D(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function k(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var F="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function q(e){function t(t){e.error=e.hasError?new F(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const B={__extends:o,__assign:a,__rest:i,__decorate:s,__param:l,__metadata:f,__awaiter:y,__generator:m,__createBinding:_,__exportStar:b,__values:v,__read:S,__spread:h,__spreadArrays:C,__spreadArray:w,__await:g,__asyncGenerator:j,__asyncDelegator:O,__asyncValues:P,__makeTemplateObject:x,__importStar:I,__importDefault:N,__classPrivateFieldGet:T,__classPrivateFieldSet:M,__classPrivateFieldIn:D,__addDisposableResource:k,__disposeResources:q}}},l={};function c(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}};return s[e](r,r.exports,c),r.exports}c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{var e=u;Object.defineProperty(e,"__esModule",{value:!0}),e.isControlled=e.Stepper=void 0;var t=c(831);Object.defineProperty(e,"Stepper",{enumerable:!0,get:function(){return t.Stepper}});var r=c(317);Object.defineProperty(e,"isControlled",{enumerable:!0,get:function(){return r.isControlled}})})(),u})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/box"),require("@nimbus-ds/icon"),require("@nimbus-ds/text"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/box","@nimbus-ds/icon","@nimbus-ds/text","@nimbus-ds/icons","@nimbus-ds/styles","@nimbus-ds/title"],t):"object"==typeof exports?exports["@nimbus-ds/stepper"]=t(require("react"),require("@nimbus-ds/box"),require("@nimbus-ds/icon"),require("@nimbus-ds/text"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):e["@nimbus-ds/stepper"]=t(e.react,e["@nimbus-ds/box"],e["@nimbus-ds/icon"],e["@nimbus-ds/text"],e["@nimbus-ds/icons"],e["@nimbus-ds/styles"],e["@nimbus-ds/title"])}(global,((e,t,r,n,o,a,i)=>(()=>{"use strict";var s={253:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Card=void 0;const n=r(769).__importDefault(r(155)),o=r(367),a=r(190),i=({className:e,style:t,children:r,padding:a="base",backgroundColor:i="neutral-background",...s})=>n.default.createElement("div",{className:[e,o.card.classnames.container,o.card.sprinkle({padding:a,backgroundColor:i})].filter(Boolean).join(" "),...s},r);t.Card=i,i.Body=a.CardBody,i.Footer=a.CardFooter,i.Header=a.CardHeader,i.displayName="Card",i.Body.displayName="Card.Body",i.Footer.displayName="Card.Footer",i.Header.displayName="Card.Header"},45:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardBody=void 0;const n=r(769).__importDefault(r(155)),o=r(367);t.CardBody=({className:e,style:t,padding:r="none",children:a,...i})=>n.default.createElement("div",{className:[e,o.card.subComponents.body.sprinkle({padding:r})].filter(Boolean).join(" "),...i},a)},161:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardBody=void 0;const n=r(45);var o=r(45);Object.defineProperty(t,"CardBody",{enumerable:!0,get:function(){return o.CardBody}}),t.default=n.CardBody},719:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardFooter=void 0;const n=r(769).__importDefault(r(155)),o=r(367);t.CardFooter=({className:e,style:t,padding:r="none",children:a,...i})=>n.default.createElement("div",{className:[e,o.card.classnames.container__footer,o.card.subComponents.footer.sprinkle({padding:r})].filter(Boolean).join(" "),...i},a)},410:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardFooter=void 0;const n=r(719);var o=r(719);Object.defineProperty(t,"CardFooter",{enumerable:!0,get:function(){return o.CardFooter}}),t.default=n.CardFooter},407:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardHeader=void 0;const n=r(769).__importDefault(r(155)),o=r(593),a=r(367);t.CardHeader=({className:e,style:t,padding:r="none",title:i,children:s,...l})=>n.default.createElement("div",{className:[e,a.card.subComponents.header.sprinkle({padding:r})].filter(Boolean).join(" "),...l},i&&n.default.createElement(o.Title,{"data-testid":"header-title",as:"h4"},i),s)},348:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.CardHeader=void 0;const n=r(407);var o=r(407);Object.defineProperty(t,"CardHeader",{enumerable:!0,get:function(){return o.CardHeader}}),t.default=n.CardHeader},190:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(769);n.__exportStar(r(161),t),n.__exportStar(r(410),t),n.__exportStar(r(348),t)},509:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Card=void 0;const n=r(253);var o=r(253);Object.defineProperty(t,"Card",{enumerable:!0,get:function(){return o.Card}}),t.default=n.Card},831:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Stepper=void 0;const n=r(769).__importStar(r(155)),o=r(558),a=r(337),i=r(317),s=Object.assign((({className:e,activeStep:t,children:r,...s})=>{const l=(0,n.useMemo)((()=>(0,i.isControlled)(s)),[s]),[c,u]=(0,n.useState)(t),p=l?s.selectedStep:c,d=l?s.onSelectStep:u,f=n.default.Children.count(r),y=n.default.Children.map(r,((e,t)=>{if(n.default.isValidElement(e)){const r=t;return n.default.cloneElement(e,{step:r})}return e}));(0,n.useEffect)((()=>{l||u(t)}),[t,l]);const m=(0,n.useMemo)((()=>{if(l){const{selectedStep:e,onSelectStep:t,...r}=s;return r}return s}),[s,l]),_=(0,n.useMemo)((()=>({totalSteps:f,activeStep:t,selectedStep:p,onSelect:d})),[f,t,p,d]);return n.default.createElement(a.StepperContext.Provider,{value:_},n.default.createElement(o.Box,{className:e,display:"flex",flexWrap:"wrap",gap:"2",justifyContent:"center",alignItems:"center",role:"progressbar","aria-valuenow":t+1,"aria-valuemin":1,"aria-valuemax":f,"aria-label":`Multi-step process: Step ${t+1} of ${f}`,...m},y))}),{Item:a.StepperItem,Card:a.StepperCard,displayName:"Stepper"});t.Stepper=s,s.Item.displayName="Stepper.Item",s.Card.displayName="Stepper.Card"},566:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperCard=void 0;const n=r(769).__importDefault(r(155)),o=r(509),a=({className:e,children:t})=>n.default.createElement(o.Card,{className:e,padding:"small"},t);t.StepperCard=a,a.displayName="Stepper.Card"},613:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperCard=void 0;var n=r(566);Object.defineProperty(t,"StepperCard",{enumerable:!0,get:function(){return n.StepperCard}})},980:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=void 0;const n=r(155);t.StepperContext=(0,n.createContext)({totalSteps:1,activeStep:0,selectedStep:void 0,onSelect:void 0})},462:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=void 0;var n=r(980);Object.defineProperty(t,"StepperContext",{enumerable:!0,get:function(){return n.StepperContext}})},702:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItemState=t.joinClassNames=void 0;t.joinClassNames=(...e)=>e.filter(Boolean).join(" "),function(e){e.STARTED="started",e.COMPLETED="completed",e.SELECTED="selected",e.PENDING="pending"}(t.StepperItemState||(t.StepperItemState={}))},90:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItem=void 0;const n=r(769).__importStar(r(155)),o=r(208),a=r(526),i=r(809),s=r(367),l=r(462),c=r(702),u=({className:e,style:t,step:r,label:u,...p})=>{const{totalSteps:d,activeStep:f,selectedStep:y,onSelect:m}=(0,n.useContext)(l.StepperContext),_=(0,n.useMemo)((()=>y===r?c.StepperItemState.SELECTED:r===f?c.StepperItemState.STARTED:r<f?c.StepperItemState.COMPLETED:c.StepperItemState.PENDING),[f,y,r]),b=_===c.StepperItemState.PENDING,v=_===c.StepperItemState.SELECTED,S=_===c.StepperItemState.COMPLETED,h=r===d-1,C=e=>{e&&"Enter"!==e.key&&" "!==e.key||(e?.preventDefault(),!m||b||v||m(r))},j=(0,n.useCallback)((()=>S?n.default.createElement(o.Icon,{source:n.default.createElement(i.CheckCircleIcon,{size:"small"}),color:"success-textHigh"}):n.default.createElement(a.Text,{as:"span",color:"currentColor",fontSize:"caption",fontWeight:"medium"},r+1)),[S,r]);return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:(0,c.joinClassNames)(e,s.stepper.classnames.item,(b||v)&&s.stepper.classnames.item__disabled),role:"button",tabIndex:m?0:-1,onKeyDown:C,onClick:()=>C(),...p},n.default.createElement("div",{className:(0,c.joinClassNames)(s.stepper.classnames.item__icon,s.stepper.classnames[`item__icon_${_}`])},j()),u&&n.default.createElement("span",{className:(0,c.joinClassNames)(s.stepper.classnames.item__label,s.stepper.classnames[`item__label_${_}`])},u)),!h&&n.default.createElement("div",{className:s.stepper.classnames.item__line}))};t.StepperItem=u,u.displayName="Stepper.Item"},976:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperItem=void 0;var n=r(90);Object.defineProperty(t,"StepperItem",{enumerable:!0,get:function(){return n.StepperItem}})},337:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.StepperContext=t.StepperCard=t.StepperItem=void 0;var n=r(976);Object.defineProperty(t,"StepperItem",{enumerable:!0,get:function(){return n.StepperItem}});var o=r(613);Object.defineProperty(t,"StepperCard",{enumerable:!0,get:function(){return o.StepperCard}});var a=r(462);Object.defineProperty(t,"StepperContext",{enumerable:!0,get:function(){return a.StepperContext}})},317:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.isControlled=void 0;t.isControlled=e=>"selectedStep"in e&&"onSelectStep"in e},558:e=>{e.exports=t},208:e=>{e.exports=r},809:e=>{e.exports=o},367:e=>{e.exports=a},526:e=>{e.exports=n},593:e=>{e.exports=i},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>k,__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>g,__asyncValues:()=>P,__await:()=>w,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>D,__classPrivateFieldSet:()=>M,__createBinding:()=>_,__decorate:()=>s,__disposeResources:()=>B,__esDecorate:()=>c,__exportStar:()=>b,__extends:()=>o,__generator:()=>m,__importDefault:()=>N,__importStar:()=>I,__makeTemplateObject:()=>x,__metadata:()=>f,__param:()=>l,__propKey:()=>p,__read:()=>S,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>d,__spread:()=>h,__spreadArray:()=>j,__spreadArrays:()=>C,__values:()=>v,default:()=>q});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function s(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function l(e,t){return function(r,n){t(r,n,e)}}function c(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=n.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?n.static?e:e.prototype:null,p=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),d=!1,f=r.length-1;f>=0;f--){var y={};for(var m in n)y[m]="access"===m?{}:n[m];for(var m in n.access)y.access[m]=n.access[m];y.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var _=(0,r[f])("accessor"===l?{get:p.get,set:p.set}:p[c],y);if("accessor"===l){if(void 0===_)continue;if(null===_||"object"!=typeof _)throw new TypeError("Object expected");(s=i(_.get))&&(p.get=s),(s=i(_.set))&&(p.set=s),(s=i(_.init))&&o.unshift(s)}else(s=i(_))&&("field"===l?o.unshift(s):p[c]=s)}u&&Object.defineProperty(u,n.name,p),d=!0}function u(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function p(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function s(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((n=n.apply(e,t||[])).next())}))}function m(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(l){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var _=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function b(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||_(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function S(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}function C(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function j(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function w(e){return this instanceof w?(this.v=e,this):new w(e)}function g(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||s(e,t)}))})}function s(e,t){try{(r=o[e](t)).value instanceof w?Promise.resolve(r.value.v).then(l,c):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function O(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:w(e[n](t)),done:!1}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var E=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function I(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&_(t,e,r);return E(t,e),t}function N(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function M(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function D(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function k(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var F="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function B(e){function t(t){e.error=e.hasError?new F(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const q={__extends:o,__assign:a,__rest:i,__decorate:s,__param:l,__metadata:f,__awaiter:y,__generator:m,__createBinding:_,__exportStar:b,__values:v,__read:S,__spread:h,__spreadArrays:C,__spreadArray:j,__await:w,__asyncGenerator:g,__asyncDelegator:O,__asyncValues:P,__makeTemplateObject:x,__importStar:I,__importDefault:N,__classPrivateFieldGet:T,__classPrivateFieldSet:M,__classPrivateFieldIn:D,__addDisposableResource:k,__disposeResources:B}}},l={};function c(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}};return s[e](r,r.exports,c),r.exports}c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{var e=u;Object.defineProperty(e,"__esModule",{value:!0}),e.isControlled=e.Stepper=void 0;var t=c(831);Object.defineProperty(e,"Stepper",{enumerable:!0,get:function(){return t.Stepper}});var r=c(317);Object.defineProperty(e,"isControlled",{enumerable:!0,get:function(){return r.isControlled}})})(),u})()));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/stepper",
3
- "version": "1.0.1",
3
+ "version": "1.1.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.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"
33
+ "@nimbus-ds/box": "^4.4.0",
34
+ "@nimbus-ds/card": "^3.2.1",
35
+ "@nimbus-ds/icon": "^3.5.1",
36
+ "@nimbus-ds/icons": "^1.21.0",
37
+ "@nimbus-ds/styles": "^9.62.0",
38
+ "@nimbus-ds/text": "^6.8.0"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
42
42
  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@nimbus-ds/button": "^2.10.1",
46
- "@nimbus-ds/webpack": "^1.7.1"
45
+ "@nimbus-ds/button": "^2.11.1",
46
+ "@nimbus-ds/webpack": "^1.7.2"
47
47
  }
48
48
  }
package/src/Stepper.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useEffect, useMemo, useState } from "react";
2
2
 
3
- import { Box, BoxProps } from "@nimbus-ds/box";
3
+ import { Box, type BoxProps } from "@nimbus-ds/box";
4
4
  import {
5
- StepperProps,
6
- StepperComponents,
7
- ControlledStepperProperties,
5
+ type StepperProps,
6
+ type StepperComponents,
7
+ type ControlledStepperProperties,
8
8
  } from "./stepper.types";
9
9
  import { StepperItem, StepperCard, StepperContext } from "./components";
10
10
  import { isControlled } from "./stepper.definitions";
11
- import { StepperItemProps } from "./components/StepperItem/stepperItem.types";
11
+ import { type StepperItemProps } from "./components/StepperItem/stepperItem.types";
12
12
 
13
13
  /**
14
14
  * Stepper component guides users through a multi-step process,
@@ -17,6 +17,7 @@ import { StepperItemProps } from "./components/StepperItem/stepperItem.types";
17
17
  * Step numbers are automatically assigned based on child position.
18
18
  */
19
19
  const StepperComponent: React.FC<StepperProps> = ({
20
+ className,
20
21
  activeStep,
21
22
  children,
22
23
  ...rest
@@ -81,6 +82,7 @@ const StepperComponent: React.FC<StepperProps> = ({
81
82
  return (
82
83
  <StepperContext.Provider value={contextValue}>
83
84
  <Box
85
+ className={className}
84
86
  display="flex"
85
87
  flexWrap="wrap"
86
88
  gap="2"
package/src/components/StepperCard/StepperCard.tsx CHANGED
@@ -1,15 +1,19 @@
1
1
  import React from "react";
2
2
  import { Card } from "@nimbus-ds/card";
3
3
 
4
- import { StepperCardProps } from "./stepperCard.types";
4
+ import { type StepperCardProps } from "./stepperCard.types";
5
5
 
6
6
  /**
7
7
  * StepperCard is a container component that wraps content in a Card component.
8
8
  * It provides consistent styling and spacing for stepper-related content.
9
9
  * Uses the design system's Card component with small padding for optimal layout.
10
10
  */
11
- const StepperCard: React.FC<StepperCardProps> = ({ children }) => <Card padding="small">{children}</Card>;
11
+ const StepperCard: React.FC<StepperCardProps> = ({ className, children }) => (
12
+ <Card className={className} padding="small">
13
+ {children}
14
+ </Card>
15
+ );
12
16
 
13
17
  StepperCard.displayName = "Stepper.Card";
14
18
 
15
- export { StepperCard };
19
+ export { StepperCard };
package/src/components/StepperCard/stepperCard.types.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { ReactNode } from "react";
1
+ import { type ReactNode } from "react";
2
2
 
3
3
  export interface StepperCardProperties {
4
+ className?: string;
4
5
  /**
5
6
  * The content to be rendered inside the card container
6
7
  * @TJS-type React.ReactNode
@@ -8,4 +9,4 @@ export interface StepperCardProperties {
8
9
  children: ReactNode;
9
10
  }
10
11
 
11
- export type StepperCardProps = StepperCardProperties;
12
+ export type StepperCardProps = StepperCardProperties;
package/src/components/StepperContext/StepperContext.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { createContext } from "react";
2
- import { StepperContextValue } from "./stepperContext.types";
2
+ import { type StepperContextValue } from "./stepperContext.types";
3
3
 
4
4
  export const StepperContext = createContext<StepperContextValue>({
5
5
  totalSteps: 1,
6
6
  activeStep: 0,
7
7
  selectedStep: undefined,
8
8
  onSelect: undefined,
9
- });
9
+ });
package/src/components/StepperContext/stepperContext.spec.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
2
2
  import { render, screen } from "@testing-library/react";
3
3
  import "@testing-library/jest-dom";
4
4
  import { StepperContext } from "./StepperContext";
5
- import { StepperContextValue } from "./stepperContext.types";
5
+ import { type StepperContextValue } from "./stepperContext.types";
6
6
 
7
7
  // Test component that consumes the context
8
8
  const TestConsumer = () => {
@@ -26,19 +26,19 @@ describe("GIVEN <StepperContext />", () => {
26
26
  describe("WHEN providing context value", () => {
27
27
  it("THEN should provide totalSteps to consuming components", () => {
28
28
  makeSut({ totalSteps: 5, activeStep: 1, selectedStep: 1 });
29
-
29
+
30
30
  expect(screen.getByTestId("total-steps")).toHaveTextContent("5");
31
31
  });
32
32
 
33
33
  it("THEN should handle single step scenario", () => {
34
34
  makeSut({ totalSteps: 1, activeStep: 1, selectedStep: 1 });
35
-
35
+
36
36
  expect(screen.getByTestId("total-steps")).toHaveTextContent("1");
37
37
  });
38
38
 
39
39
  it("THEN should handle many steps scenario", () => {
40
40
  makeSut({ totalSteps: 10, activeStep: 1, selectedStep: 1 });
41
-
41
+
42
42
  expect(screen.getByTestId("total-steps")).toHaveTextContent("10");
43
43
  });
44
44
  });
@@ -46,9 +46,9 @@ describe("GIVEN <StepperContext />", () => {
46
46
  describe("WHEN no provider is present", () => {
47
47
  it("THEN should use default context value", () => {
48
48
  render(<TestConsumer />);
49
-
49
+
50
50
  // Default value should be 1 as defined in StepperContext
51
51
  expect(screen.getByTestId("total-steps")).toHaveTextContent("1");
52
52
  });
53
53
  });
54
- });
54
+ });
package/src/components/StepperItem/StepperItem.tsx CHANGED
@@ -4,7 +4,7 @@ import { Text } from "@nimbus-ds/text";
4
4
  import { CheckCircleIcon } from "@nimbus-ds/icons";
5
5
  import { stepper } from "@nimbus-ds/styles";
6
6
 
7
- import { StepperItemProps } from "./stepperItem.types";
7
+ import { type StepperItemProps } from "./stepperItem.types";
8
8
  import { StepperContext } from "../StepperContext";
9
9
  import { joinClassNames, StepperItemState } from "./StepperItem.definitions";
10
10
 
@@ -13,7 +13,7 @@ import { joinClassNames, StepperItemState } from "./StepperItem.definitions";
13
13
  * It displays the step number or check icon, label, and connecting line.
14
14
  */
15
15
  const StepperItem: React.FC<StepperItemProps> = ({
16
- className: _className,
16
+ className,
17
17
  style: _style,
18
18
  step,
19
19
  label,
@@ -72,6 +72,7 @@ const StepperItem: React.FC<StepperItemProps> = ({
72
72
  <>
73
73
  <div
74
74
  className={joinClassNames(
75
+ className,
75
76
  stepper.classnames.item,
76
77
  (isPendingStep || isSelectedStep) && stepper.classnames.item__disabled
77
78
  )}
package/src/components/StepperItem/stepperItem.spec.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { render, screen, fireEvent } from "@testing-library/react";
3
3
  import { StepperItem } from "./StepperItem";
4
- import { StepperItemProps } from "./stepperItem.types";
4
+ import { type StepperItemProps } from "./stepperItem.types";
5
5
  import { StepperContext } from "../StepperContext";
6
6
 
7
7
  const makeSut = (
@@ -16,7 +16,12 @@ const makeSut = (
16
16
  const defaultSelectedStep = selectedStep ?? 0;
17
17
  render(
18
18
  <StepperContext.Provider
19
- value={{ totalSteps: defaultTotalSteps, activeStep: defaultActiveStep, selectedStep: defaultSelectedStep, onSelect }}
19
+ value={{
20
+ totalSteps: defaultTotalSteps,
21
+ activeStep: defaultActiveStep,
22
+ selectedStep: defaultSelectedStep,
23
+ onSelect,
24
+ }}
20
25
  >
21
26
  <StepperItem {...props} data-testid="stepper-item" />
22
27
  </StepperContext.Provider>
@@ -254,8 +259,6 @@ describe("GIVEN <Stepper.Item />", () => {
254
259
  expect(stepperItem.getAttribute("role")).toBe("button");
255
260
  expect(stepperItem.getAttribute("tabIndex")).toBe("0");
256
261
  });
257
-
258
-
259
262
  });
260
263
 
261
264
  describe("WHEN step is not clickable", () => {
package/src/components/StepperItem/stepperItem.types.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { HTMLAttributes } from "react";
1
+ import { type HTMLAttributes } from "react";
2
2
 
3
3
  /**
4
4
  * Represents the visual state of a step
@@ -18,4 +18,4 @@ export interface StepperItemProperties {
18
18
  }
19
19
 
20
20
  export type StepperItemProps = StepperItemProperties &
21
- HTMLAttributes<HTMLDivElement>;
21
+ HTMLAttributes<HTMLDivElement>;
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": "1.0.0",
6
+ "version": "1.1.0",
7
7
  "docLink": "https://nimbus.nuvemshop.com.br/documentation/composite-components/stepper",
8
8
  "props": [
9
9
  {
@@ -54,8 +54,13 @@
54
54
  },
55
55
  {
56
56
  "name": "Stepper.Card",
57
- "totalProps": 1,
57
+ "totalProps": 2,
58
58
  "props": [
59
+ {
60
+ "type": "string",
61
+ "title": "className",
62
+ "required": false
63
+ },
59
64
  {
60
65
  "description": "The content to be rendered inside the card container",
61
66
  "type": "React.ReactNode",
package/src/stepper.spec.tsx CHANGED
@@ -3,8 +3,8 @@ import { render, screen, fireEvent } from "@testing-library/react";
3
3
 
4
4
  import { Stepper } from "./Stepper";
5
5
  import {
6
- BaseStepperProperties,
7
- ControlledStepperProperties,
6
+ type BaseStepperProperties,
7
+ type ControlledStepperProperties,
8
8
  } from "./stepper.types";
9
9
 
10
10
  const makeUncontrolledSut = (props: BaseStepperProperties) => {
@@ -48,7 +48,9 @@ describe("GIVEN <Stepper />", () => {
48
48
  expect(stepper.getAttribute("aria-valuenow")).toBe("2");
49
49
  expect(stepper.getAttribute("aria-valuemin")).toBe("1");
50
50
  expect(stepper.getAttribute("aria-valuemax")).toBe("3");
51
- expect(stepper.getAttribute("aria-label")).toBe("Multi-step process: Step 2 of 3");
51
+ expect(stepper.getAttribute("aria-label")).toBe(
52
+ "Multi-step process: Step 2 of 3"
53
+ );
52
54
  });
53
55
 
54
56
  it("THEN should render with single step", () => {
@@ -73,7 +75,9 @@ describe("GIVEN <Stepper />", () => {
73
75
 
74
76
  const stepper = screen.getByTestId("stepper-element");
75
77
  expect(stepper.getAttribute("aria-valuenow")).toBe("1");
76
- expect(stepper.getAttribute("aria-label")).toBe("Multi-step process: Step 1 of 2");
78
+ expect(stepper.getAttribute("aria-label")).toBe(
79
+ "Multi-step process: Step 1 of 2"
80
+ );
77
81
  });
78
82
 
79
83
  it("THEN should handle maximum activeStep", () => {
package/src/stepper.types.ts CHANGED
@@ -1,7 +1,8 @@
1
- import React, { ReactNode } from "react";
2
- import { BoxProps } from "@nimbus-ds/box";
3
- import { StepperItemProps } from "./components/StepperItem";
4
- import { StepperCardProps } from "./components/StepperCard";
1
+ import { type ReactNode } from "react";
2
+ import type React from "react";
3
+ import { type BoxProps } from "@nimbus-ds/box";
4
+ import { type StepperItemProps } from "./components/StepperItem";
5
+ import { type StepperCardProps } from "./components/StepperCard";
5
6
 
6
7
  export interface StepperComponents {
7
8
  Item: React.FC<Omit<StepperItemProps, "step">>;
@@ -38,11 +39,16 @@ export interface ControlledStepperProperties extends BaseStepperProperties {
38
39
  /**
39
40
  * Props for the Stepper component, supporting both controlled and uncontrolled modes
40
41
  */
41
- export type StepperProps = (BaseStepperProperties | ControlledStepperProperties) & Omit<BoxProps, "display" | "flexWrap" | "gap">;
42
+ export type StepperProps = (
43
+ | BaseStepperProperties
44
+ | ControlledStepperProperties
45
+ ) &
46
+ Omit<BoxProps, "display" | "flexWrap" | "gap">;
42
47
 
43
48
  // For docs purposes, we need to merge the two types
44
- export type StepperProperties = BaseStepperProperties & ControlledStepperProperties;
49
+ export type StepperProperties = BaseStepperProperties &
50
+ ControlledStepperProperties;
45
51
 
46
52
  // Re-export types from components for convenience
47
53
  export type { StepperItemProps, StepState } from "./components/StepperItem";
48
- export type { StepperCardProps } from "./components/StepperCard";
54
+ export type { StepperCardProps } from "./components/StepperCard";