@drivenets/design-system 0.5.0 → 0.6.0

package/dist/components/ds-stepper/ds-stepper.js

@@ -3,73 +3,100 @@ import { useSteps } from "./hooks/use-steps.js";
 import { StepperContext } from "./hooks/use-stepper.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/ds-stepper.tsx
 function DsStepper(t0) {
-	const $ = c(19);
-	const { count, variant, activeStep, onStepChange, onComplete, children } = t0;
-	let t1;
-	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange) {
-		t1 = {
+	const $ = c(27);
+	const { count, variant, orientation: t1, floating: t2, activeStep, onStepChange, onComplete, children, className, actions } = t0;
+	const orientation = t1 === void 0 ? "vertical" : t1;
+	const floating = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange || $[4] !== orientation) {
+		t3 = {
 			count,
 			activeStep,
 			onStepChange,
-			onComplete
+			onComplete,
+			orientation
 		};
 		$[0] = activeStep;
 		$[1] = count;
 		$[2] = onComplete;
 		$[3] = onStepChange;
-		$[4] = t1;
-	} else t1 = $[4];
-	const stepsApi = useSteps(t1);
-	let t2;
-	if ($[5] !== stepsApi || $[6] !== variant) {
-		t2 = {
+		$[4] = orientation;
+		$[5] = t3;
+	} else t3 = $[5];
+	const stepsApi = useSteps(t3);
+	const isHorizontal = orientation === "horizontal";
+	let t4;
+	if ($[6] !== floating || $[7] !== orientation || $[8] !== stepsApi || $[9] !== variant) {
+		t4 = {
 			stepsApi,
-			variant
+			variant,
+			orientation,
+			floating
 		};
-		$[5] = stepsApi;
-		$[6] = variant;
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[8] !== stepsApi) {
-		t3 = stepsApi.getRootProps();
+		$[6] = floating;
+		$[7] = orientation;
 		$[8] = stepsApi;
-		$[9] = t3;
-	} else t3 = $[9];
-	const t4 = variant === "single";
-	let t5;
-	if ($[10] !== t4) {
-		t5 = classNames(ds_stepper_module_default.root, { [ds_stepper_module_default.variantSingle]: t4 });
+		$[9] = variant;
 		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== children || $[13] !== t3 || $[14] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			...t3,
-			className: t5,
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== stepsApi) {
+		t5 = stepsApi.getRootProps();
+		$[11] = stepsApi;
+		$[12] = t5;
+	} else t5 = $[12];
+	const t6 = variant === "single";
+	let t7;
+	if ($[13] !== className || $[14] !== t6) {
+		t7 = classNames(ds_stepper_module_default.root, { [ds_stepper_module_default.variantSingle]: t6 }, className);
+		$[13] = className;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== actions || $[17] !== children || $[18] !== isHorizontal) {
+		t8 = isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: ds_stepper_module_default.stepsContainer,
 			children
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: ds_stepper_module_default.horizontalActions,
+			children: actions
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, actions && /* @__PURE__ */ jsx("div", {
+			className: ds_stepper_module_default.verticalActions,
+			children: actions
+		})] });
+		$[16] = actions;
+		$[17] = children;
+		$[18] = isHorizontal;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t5 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			...t5,
+			className: t7,
+			children: t8
 		});
-		$[12] = children;
-		$[13] = t3;
-		$[14] = t5;
-		$[15] = t6;
-	} else t6 = $[15];
-	let t7;
-	if ($[16] !== t2 || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsx(StepperContext.Provider, {
-			value: t2,
-			children: t6
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t4 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsx(StepperContext.Provider, {
+			value: t4,
+			children: t9
 		});
-		$[16] = t2;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	return t7;
+		$[24] = t4;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
 }
 
 //#endregion

package/dist/components/ds-stepper/ds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-stepper.js","names":["classnames","styles","useSteps","StepperContext","DsStepperProps","DsStepper","t0","$","_c","count","variant","activeStep","onStepChange","onComplete","children","t1","stepsApi","t2","t3","getRootProps","t4","t5","root","variantSingle","t6","t7"],"sources":["../../../src/components/ds-stepper/ds-stepper.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport styles from './ds-stepper.module.scss';\nimport { useSteps } from './hooks/use-steps';\nimport { StepperContext } from './hooks/use-stepper';\nimport type { DsStepperProps } from './ds-stepper.types';\n\nexport function DsStepper({\n\tcount,\n\tvariant,\n\tactiveStep,\n\tonStepChange,\n\tonComplete,\n\tchildren,\n}: DsStepperProps) {\n\tconst stepsApi = useSteps({ count, activeStep, onStepChange, onComplete });\n\n\treturn (\n\t\t<StepperContext.Provider\n\t\t\tvalue={{\n\t\t\t\tstepsApi,\n\t\t\t\tvariant,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\t{...stepsApi.getRootProps()}\n\t\t\t\tclassName={classnames(styles.root, {\n\t\t\t\t\t[styles.variantSingle]: variant === 'single',\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StepperContext.Provider>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAOK,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAmB,MAAA,EAAAC,OAAAC,SAAAC,YAAAC,cAAAC,YAAAC,aAAAR;CAOT,IAAAS;AAAA,KAAAR,EAAA,OAAAI,cAAAJ,EAAA,OAAAE,SAAAF,EAAA,OAAAM,cAAAN,EAAA,OAAAK,cAAA;AACUG,OAAA;GAAAN;GAAAE;GAAAC;GAAAC;GAA+C;AAAAN,IAAA,KAAAI;AAAAJ,IAAA,KAAAE;AAAAF,IAAA,KAAAM;AAAAN,IAAA,KAAAK;AAAAL,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAzE,MAAAS,WAAiBd,SAASa,GAAgD;CAAC,IAAAE;AAAA,KAAAV,EAAA,OAAAS,YAAAT,EAAA,OAAAG,SAAA;AAIlEO,OAAA;GAAAD;GAAAN;GAGN;AAAAH,IAAA,KAAAS;AAAAT,IAAA,KAAAG;AAAAH,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAS,UAAA;AAGIE,OAAAF,SAAQG,cAAe;AAAAZ,IAAA,KAAAS;AAAAT,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAEF,MAAAa,KAAAV,YAAY;CAAQ,IAAAW;AAAA,KAAAd,EAAA,QAAAa,IAAA;AADlCC,OAAArB,WAAWC,0BAAMqB,MAAO,GACjCrB,0BAAMsB,gBAAiBH,IACxB,CAAC;AAAAb,IAAA,MAAAa;AAAAb,IAAA,MAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,QAAAO,YAAAP,EAAA,QAAAW,MAAAX,EAAA,QAAAc,IAAA;AAJHG,OAAA,oBAAA;GAOM,GANDN;GACO,WAAAG;GAIVP;IACI;AAAAP,IAAA,MAAAO;AAAAP,IAAA,MAAAW;AAAAX,IAAA,MAAAc;AAAAd,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;CAAA,IAAAkB;AAAA,KAAAlB,EAAA,QAAAU,MAAAV,EAAA,QAAAiB,IAAA;AAbPC,OAAA,oBAAA,eAAA;GACQ,OAAAR;aAKPO;IAQyB;AAAAjB,IAAA,MAAAU;AAAAV,IAAA,MAAAiB;AAAAjB,IAAA,MAAAkB;OAAAA,MAAAlB,EAAA;AAAA,QAd1BkB"}
+{"version":3,"file":"ds-stepper.js","names":["classnames","styles","useSteps","StepperContext","DsStepperProps","DsStepper","t0","$","_c","count","variant","orientation","t1","floating","t2","activeStep","onStepChange","onComplete","children","className","actions","undefined","t3","stepsApi","isHorizontal","t4","t5","getRootProps","t6","t7","root","variantSingle","t8","stepsContainer","horizontalActions","verticalActions","t9","t10"],"sources":["../../../src/components/ds-stepper/ds-stepper.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport styles from './ds-stepper.module.scss';\nimport { useSteps } from './hooks/use-steps';\nimport { StepperContext } from './hooks/use-stepper';\nimport type { DsStepperProps } from './ds-stepper.types';\n\nexport function DsStepper({\n\tcount,\n\tvariant,\n\torientation = 'vertical',\n\tfloating = false,\n\tactiveStep,\n\tonStepChange,\n\tonComplete,\n\tchildren,\n\tclassName,\n\tactions,\n}: DsStepperProps) {\n\tconst stepsApi = useSteps({ count, activeStep, onStepChange, onComplete, orientation });\n\n\tconst isHorizontal = orientation === 'horizontal';\n\n\treturn (\n\t\t<StepperContext.Provider\n\t\t\tvalue={{\n\t\t\t\tstepsApi,\n\t\t\t\tvariant,\n\t\t\t\torientation,\n\t\t\t\tfloating,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\t{...stepsApi.getRootProps()}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\tstyles.root,\n\t\t\t\t\t{\n\t\t\t\t\t\t[styles.variantSingle]: variant === 'single',\n\t\t\t\t\t},\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isHorizontal ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className={styles.stepsContainer}>{children}</div>\n\n\t\t\t\t\t\t{actions && <div className={styles.horizontalActions}>{actions}</div>}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{children}\n\n\t\t\t\t\t\t{actions && <div className={styles.verticalActions}>{actions}</div>}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</StepperContext.Provider>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAOK,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAmB,MAAA,EAAAC,OAAAC,SAAAC,aAAAC,IAAAC,UAAAC,IAAAC,YAAAC,cAAAC,YAAAC,UAAAC,WAAAC,YAAAd;CAGzB,MAAAK,cAAAC,OAAAS,SAAA,aAAAT;CACA,MAAAC,WAAAC,OAAAO,SAAA,QAAAP;CAAgB,IAAAQ;AAAA,KAAAf,EAAA,OAAAQ,cAAAR,EAAA,OAAAE,SAAAF,EAAA,OAAAU,cAAAV,EAAA,OAAAS,gBAAAT,EAAA,OAAAI,aAAA;AAQUW,OAAA;GAAAb;GAAAM;GAAAC;GAAAC;GAAAN;GAA4D;AAAAJ,IAAA,KAAAQ;AAAAR,IAAA,KAAAE;AAAAF,IAAA,KAAAU;AAAAV,IAAA,KAAAS;AAAAT,IAAA,KAAAI;AAAAJ,IAAA,KAAAe;OAAAA,MAAAf,EAAA;CAAtF,MAAAgB,WAAiBrB,SAASoB,GAA6D;CAEvF,MAAAE,eAAqBb,gBAAgB;CAAa,IAAAc;AAAA,KAAAlB,EAAA,OAAAM,YAAAN,EAAA,OAAAI,eAAAJ,EAAA,OAAAgB,YAAAhB,EAAA,OAAAG,SAAA;AAIzCe,OAAA;GAAAF;GAAAb;GAAAC;GAAAE;GAKN;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAI;AAAAJ,IAAA,KAAAgB;AAAAhB,IAAA,KAAAG;AAAAH,IAAA,MAAAkB;OAAAA,MAAAlB,EAAA;CAAA,IAAAmB;AAAA,KAAAnB,EAAA,QAAAgB,UAAA;AAGIG,OAAAH,SAAQI,cAAe;AAAApB,IAAA,MAAAgB;AAAAhB,IAAA,MAAAmB;OAAAA,MAAAnB,EAAA;CAID,MAAAqB,KAAAlB,YAAY;CAAQ,IAAAmB;AAAA,KAAAtB,EAAA,QAAAY,aAAAZ,EAAA,QAAAqB,IAAA;AAHnCC,OAAA7B,WACVC,0BAAM6B,MACN,GACE7B,0BAAM8B,gBAAiBH,IACxB,EACDT,UACA;AAAAZ,IAAA,MAAAY;AAAAZ,IAAA,MAAAqB;AAAArB,IAAA,MAAAsB;OAAAA,MAAAtB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,QAAAa,WAAAb,EAAA,QAAAW,YAAAX,EAAA,QAAAiB,cAAA;AAEAQ,OAAAR,eAAA,4CAEC,oBAAA;GAAgB,WAAAvB,0BAAMgC;GAAkBf;IAEvC,EAAAE,WAAW,oBAAA;GAAgB,WAAAnB,0BAAMiC;aAAqBd;IAAa,IAQrE,GAZA,4CAQEF,UAEAE,WAAW,oBAAA;GAAgB,WAAAnB,0BAAMkC;aAAmBf;IAAa,IAEnE;AAAAb,IAAA,MAAAa;AAAAb,IAAA,MAAAW;AAAAX,IAAA,MAAAiB;AAAAjB,IAAA,MAAAyB;OAAAA,MAAAzB,EAAA;CAAA,IAAA6B;AAAA,KAAA7B,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAyB,IAAA;AAtBFI,OAAA,oBAAA;GAuBM,GAtBDV;GACO,WAAAG;aAQVG;IAaI;AAAAzB,IAAA,MAAAmB;AAAAnB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAyB;AAAAzB,IAAA,MAAA6B;OAAAA,MAAA7B,EAAA;CAAA,IAAA8B;AAAA,KAAA9B,EAAA,QAAAkB,MAAAlB,EAAA,QAAA6B,IAAA;AA/BPC,QAAA,oBAAA,eAAA;GACQ,OAAAZ;aAOPW;IAwByB;AAAA7B,IAAA,MAAAkB;AAAAlB,IAAA,MAAA6B;AAAA7B,IAAA,MAAA8B;OAAAA,OAAA9B,EAAA;AAAA,QAhC1B8B"}

package/dist/components/ds-stepper/ds-stepper.module.cjs

@@ -1,17 +1,23 @@
 
 //#region src/components/ds-stepper/ds-stepper.module.scss
 var ds_stepper_module_default = {
-	"step": "_step_1qwaa_1",
-	"root": "_root_1qwaa_1",
-	"variantSingle": "_variantSingle_1qwaa_1",
-	"indicatorContainer": "_indicatorContainer_1qwaa_1",
-	"indicator": "_indicator_1qwaa_1",
-	"separator": "_separator_1qwaa_1",
-	"stepContent": "_stepContent_1qwaa_1",
-	"stepContentSingle": "_stepContentSingle_1qwaa_1",
-	"stepLabel": "_stepLabel_1qwaa_1",
-	"stepDescription": "_stepDescription_1qwaa_1",
-	"stepActions": "_stepActions_1qwaa_1"
+	"dragHandle": "_dragHandle_whfa9_1",
+	"root": "_root_whfa9_1",
+	"verticalActions": "_verticalActions_whfa9_1",
+	"step": "_step_whfa9_1",
+	"variantSingle": "_variantSingle_whfa9_1",
+	"indicatorContainer": "_indicatorContainer_whfa9_1",
+	"indicator": "_indicator_whfa9_1",
+	"separator": "_separator_whfa9_1",
+	"stepContent": "_stepContent_whfa9_1",
+	"stepContentSingle": "_stepContentSingle_whfa9_1",
+	"stepLabel": "_stepLabel_whfa9_1",
+	"stepDescription": "_stepDescription_whfa9_1",
+	"stepActions": "_stepActions_whfa9_1",
+	"stepsContainer": "_stepsContainer_whfa9_1",
+	"horizontalActions": "_horizontalActions_whfa9_1",
+	"stepLabelRow": "_stepLabelRow_whfa9_1",
+	"horizontalSeparator": "_horizontalSeparator_whfa9_1"
 };
 
 //#endregion

package/dist/components/ds-stepper/ds-stepper.module.js

@@ -1,16 +1,22 @@
 //#region src/components/ds-stepper/ds-stepper.module.scss
 var ds_stepper_module_default = {
-	"step": "_step_1qwaa_1",
-	"root": "_root_1qwaa_1",
-	"variantSingle": "_variantSingle_1qwaa_1",
-	"indicatorContainer": "_indicatorContainer_1qwaa_1",
-	"indicator": "_indicator_1qwaa_1",
-	"separator": "_separator_1qwaa_1",
-	"stepContent": "_stepContent_1qwaa_1",
-	"stepContentSingle": "_stepContentSingle_1qwaa_1",
-	"stepLabel": "_stepLabel_1qwaa_1",
-	"stepDescription": "_stepDescription_1qwaa_1",
-	"stepActions": "_stepActions_1qwaa_1"
+	"dragHandle": "_dragHandle_whfa9_1",
+	"root": "_root_whfa9_1",
+	"verticalActions": "_verticalActions_whfa9_1",
+	"step": "_step_whfa9_1",
+	"variantSingle": "_variantSingle_whfa9_1",
+	"indicatorContainer": "_indicatorContainer_whfa9_1",
+	"indicator": "_indicator_whfa9_1",
+	"separator": "_separator_whfa9_1",
+	"stepContent": "_stepContent_whfa9_1",
+	"stepContentSingle": "_stepContentSingle_whfa9_1",
+	"stepLabel": "_stepLabel_whfa9_1",
+	"stepDescription": "_stepDescription_whfa9_1",
+	"stepActions": "_stepActions_whfa9_1",
+	"stepsContainer": "_stepsContainer_whfa9_1",
+	"horizontalActions": "_horizontalActions_whfa9_1",
+	"stepLabelRow": "_stepLabelRow_whfa9_1",
+	"horizontalSeparator": "_horizontalSeparator_whfa9_1"
 };
 
 //#endregion

package/dist/components/ds-stepper/ds-stepper.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-stepper.module.js","names":[],"sources":["../../../src/components/ds-stepper/ds-stepper.module.scss"],"sourcesContent":[".step {\n\tpadding: 12px;\n\tdisplay: flex;\n\tgap: 16px;\n\tbackground: none;\n\tborder: none;\n\ttext-align: start;\n\tfont-family: inherit;\n\n\t.root.variantSingle & {\n\t\tpadding-block: 16px;\n\t\tpadding-inline-start: 12px;\n\t\tpadding-inline-end: 20px;\n\t\tborder-radius: 8px;\n\t}\n\n\t.root:not(.variantSingle) &[data-complete] {\n\t\tcursor: pointer;\n\t}\n\n\t&[data-current] {\n\t\tborder-radius: 4px;\n\t\tbackground: var(--color-background-action-secondary-hover);\n\t}\n\n\t.indicatorContainer {\n\t\tpadding: 0 2px;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\n\t\t.indicator {\n\t\t\theight: 36px;\n\t\t\twidth: 36px;\n\t\t\tborder: 2px solid var(--color-border);\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\tborder-radius: 100%;\n\n\t\t\t.variantSingle & {\n\t\t\t\theight: 32px;\n\t\t\t\twidth: 32px;\n\t\t\t}\n\t\t}\n\n\t\t&[data-complete] .indicator {\n\t\t\tcolor: var(--color-background-selected);\n\t\t\tborder-color: var(--color-background-selected);\n\t\t}\n\n\t\t&[data-current] .indicator {\n\t\t\tbackground: var(--color-background-selected);\n\t\t\tcolor: var(--white);\n\t\t\tborder: 3px solid var(--white);\n\t\t}\n\n\t\t.separator {\n\t\t\tposition: absolute;\n\t\t\twidth: 2px;\n\t\t\theight: calc(100% - 12px);\n\t\t\ttop: 36px;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: -1px;\n\t\t\tbackground: var(--color-border);\n\n\t\t\t&[data-complete] {\n\t\t\t\tbackground: var(--color-background-selected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&:last-child .indicatorContainer .separator {\n\t\tdisplay: none;\n\t}\n\n\t.stepContent {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-grow: 1;\n\n\t\t&.stepContentSingle {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\t}\n\n\t.stepLabel {\n\t\tpadding: 2px 0;\n\t\tfont-size: 16px;\n\t\tline-height: 1.5;\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-font-secondary);\n\n\t\t.root.variantSingle & {\n\t\t\tfont-size: 14px;\n\t\t}\n\t}\n\n\t.stepDescription {\n\t\tmargin: 0;\n\t\tfont-size: 14px;\n\t\tline-height: 1.4;\n\t\tcolor: var(--color-background-deselected);\n\t}\n\n\t&[data-current] {\n\t\t.stepLabel {\n\t\t\tcolor: var(--color-font-action);\n\t\t}\n\n\t\t.stepDescription {\n\t\t\tcolor: var(--color-font-main);\n\t\t}\n\t}\n\n\t&[data-complete] {\n\t\t.stepLabel {\n\t\t\tcolor: var(--color-font-main);\n\t\t}\n\n\t\t.stepDescription {\n\t\t\tcolor: var(--color-font-secondary);\n\t\t}\n\t}\n\n\t.stepContent:not(.stepContentSingle) .stepActions {\n\t\tmargin-top: 12px;\n\t}\n\n\t.stepActions {\n\t\tmargin-inline-start: auto;\n\t\tdisplay: flex;\n\t\tgap: 4px;\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-stepper.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-stepper/ds-stepper.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/mixins/_disabled.scss"],"sourcesContent":["@use '../../styles/mixin' as mixins;\n\n$step-padding: var(--spacing-sm);\n$step-gap: var(--spacing-standard);\n$step-border-radius: var(--spacing-3xs);\n\n$step-single-padding-block: var(--spacing-standard);\n$step-single-padding-inline-start: var(--spacing-sm);\n$step-single-padding-inline-end: var(--spacing-md);\n$step-single-border-radius: var(--spacing-xs);\n\n$indicator-size: 36px;\n$indicator-size-single: var(--icon-width-extra-large);\n$indicator-border-width: var(--spacing-4xs);\n$indicator-border-width-current: 3px;\n$indicator-container-padding: 0 var(--spacing-4xs);\n\n$separator-width: var(--spacing-4xs);\n$separator-offset: var(--spacing-sm);\n\n$label-padding: var(--spacing-4xs) 0;\n$label-font-size: var(--font-size-md);\n$label-font-size-single: var(--font-size-sm);\n$label-line-height: 1.5;\n$label-font-weight: var(--font-weight-medium);\n$description-font-size: var(--font-size-sm);\n$description-line-height: 1.4;\n\n$actions-margin-top: var(--spacing-sm);\n$actions-gap: var(--spacing-3xs);\n\n$drag-handle-size: 20px;\n\n$horizontal-current-min-width: 256px;\n$horizontal-description-line-clamp: 2;\n\n.dragHandle {\n\tdisplay: grid;\n\tplace-items: center;\n\tflex-shrink: 0;\n\twidth: $drag-handle-size;\n\theight: $drag-handle-size;\n\tcolor: var(--color-font-secondary);\n\tcursor: grab;\n}\n.root {\n\tbackground: var(--color-background);\n\toverflow-y: auto;\n}\n\n.verticalActions {\n\tdisplay: flex;\n\tgap: $actions-gap;\n\tpadding: $step-padding;\n}\n\n.step {\n\tposition: relative;\n\tpadding: $step-padding;\n\tdisplay: flex;\n\tgap: $step-gap;\n\tbackground: none;\n\tborder: none;\n\ttext-align: start;\n\tfont-family: inherit;\n\n\t@include mixins.disabled-overlay;\n\n\t.root.variantSingle & {\n\t\tpadding-block: $step-single-padding-block;\n\t\tpadding-inline-start: $step-single-padding-inline-start;\n\t\tpadding-inline-end: $step-single-padding-inline-end;\n\t\tborder-radius: $step-single-border-radius;\n\t}\n\n\t.root:not(.variantSingle) &[data-complete] {\n\t\tcursor: pointer;\n\t}\n\n\t&[data-current] {\n\t\tborder-radius: $step-border-radius;\n\t\tbackground: var(--color-background-action-secondary-hover);\n\t}\n\n\t.indicatorContainer {\n\t\tpadding: $indicator-container-padding;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\n\t\t.indicator {\n\t\t\theight: $indicator-size;\n\t\t\twidth: $indicator-size;\n\t\t\tborder: $indicator-border-width solid var(--color-border);\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\tborder-radius: 100%;\n\n\t\t\t.variantSingle & {\n\t\t\t\theight: $indicator-size-single;\n\t\t\t\twidth: $indicator-size-single;\n\t\t\t}\n\t\t}\n\n\t\t&[data-complete] .indicator {\n\t\t\tcolor: var(--color-background-selected);\n\t\t\tborder-color: var(--color-background-selected);\n\t\t}\n\n\t\t&[data-current] .indicator {\n\t\t\tbackground: var(--color-background-selected);\n\t\t\tcolor: var(--white);\n\t\t\tborder: $indicator-border-width-current solid var(--white);\n\t\t}\n\n\t\t.separator {\n\t\t\tposition: absolute;\n\t\t\twidth: $separator-width;\n\t\t\theight: calc(100% - $separator-offset);\n\t\t\ttop: $indicator-size;\n\t\t\tleft: 50%;\n\t\t\tmargin-left: calc($separator-width / -2);\n\t\t\tbackground: var(--color-border);\n\t\t\tz-index: 10;\n\n\t\t\t&[data-complete] {\n\t\t\t\tbackground: var(--color-background-selected);\n\t\t\t}\n\n\t\t\t&[data-current] {\n\t\t\t\tbackground: var(--color-background-selected);\n\t\t\t}\n\t\t}\n\t}\n\n\t.stepContent {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-grow: 1;\n\n\t\t&.stepContentSingle {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\t}\n\n\t.stepLabel {\n\t\tpadding: $label-padding;\n\t\tfont-size: $label-font-size;\n\t\tline-height: $label-line-height;\n\t\tfont-weight: $label-font-weight;\n\t\tcolor: var(--color-font-secondary);\n\n\t\t.root.variantSingle & {\n\t\t\tfont-size: $label-font-size-single;\n\t\t}\n\t}\n\n\t.stepDescription {\n\t\tmargin: 0;\n\t\tfont-size: $description-font-size;\n\t\tline-height: $description-line-height;\n\t\tcolor: var(--color-background-deselected);\n\t}\n\n\t&[data-current] {\n\t\t.stepLabel {\n\t\t\tcolor: var(--color-font-action);\n\t\t}\n\n\t\t.stepDescription {\n\t\t\tcolor: var(--color-font-main);\n\t\t}\n\t}\n\n\t&[data-complete] {\n\t\t.stepLabel {\n\t\t\tcolor: var(--color-font-main);\n\t\t}\n\n\t\t.stepDescription {\n\t\t\tcolor: var(--color-font-secondary);\n\t\t}\n\t}\n\n\t.stepContent:not(.stepContentSingle) .stepActions {\n\t\tmargin-top: $actions-margin-top;\n\t}\n\n\t.stepActions {\n\t\tmargin-inline-start: auto;\n\t\tdisplay: flex;\n\t\tgap: $actions-gap;\n\t}\n}\n\n.step[data-error] {\n\t.indicatorContainer .indicator {\n\t\tbackground: var(--color-background-danger-weak);\n\t\tcolor: var(--color-background-danger-strong);\n\t\tborder-color: var(--color-background-danger-strong);\n\t}\n\n\t.stepLabel {\n\t\tcolor: var(--color-font-danger);\n\t}\n}\n\n.root[data-orientation='horizontal'] {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: var(--spacing-xs) var(--spacing-standard);\n\n\t.stepsContainer {\n\t\tdisplay: flex;\n\t\tflex: 1 1 0;\n\t\talign-items: flex-start;\n\t\tmin-width: 0;\n\t\toverflow-x: auto;\n\t}\n\n\t.horizontalActions {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-shrink: 0;\n\t\tpadding-inline-start: var(--spacing-xs);\n\t}\n\n\t.step {\n\t\tflex: 1 1 0;\n\t\tpadding: var(--spacing-3xs) var(--spacing-xs);\n\t\tgap: var(--spacing-sm);\n\t\tborder-radius: var(--spacing-2xs);\n\t\toverflow: clip;\n\n\t\t&[data-current] {\n\t\t\tmin-width: $horizontal-current-min-width;\n\t\t\tborder-radius: var(--spacing-2xs);\n\t\t}\n\t}\n\n\t.indicatorContainer {\n\t\tpadding: 0;\n\n\t\t.indicator {\n\t\t\theight: $indicator-size;\n\t\t\twidth: $indicator-size;\n\t\t}\n\t}\n\n\t.stepContent {\n\t\tmin-width: 0;\n\t}\n\n\t.stepLabelRow {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--spacing-sm);\n\t\theight: $indicator-size;\n\t\tmin-width: 0;\n\t}\n\n\t.stepLabel {\n\t\tpadding: 0;\n\t\tfont-size: var(--font-size-sm);\n\t\tline-height: var(--line-height-sm);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tflex-shrink: 0;\n\t}\n\n\t.horizontalSeparator {\n\t\tflex: 1 1 0;\n\t\theight: var(--spacing-4xs);\n\t\tmin-width: 0;\n\t\tbackground: var(--color-border-contrast);\n\n\t\t&[data-complete] {\n\t\t\tbackground: var(--color-background-selected);\n\t\t}\n\n\t\t&[data-current] {\n\t\t\tbackground: var(--color-outline-moderate);\n\t\t}\n\t}\n\n\t.stepDescription {\n\t\tfont-size: var(--font-size-xs);\n\t\tline-height: var(--line-height-xs);\n\t\tmax-height: var(--spacing-8);\n\t\toverflow: hidden;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: $horizontal-description-line-clamp;\n\t\t-webkit-box-orient: vertical;\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-stepper/ds-stepper.types.d.cts

@@ -1,13 +1,22 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import * as steps from "@zag-js/steps";
 
 //#region src/components/ds-stepper/ds-stepper.types.d.ts
 type DsStepperVariant = 'single';
+type DsStepperOrientation = 'horizontal' | 'vertical';
 type DsStepperProps = PropsWithChildren<{
   variant?: DsStepperVariant;
+  orientation?: DsStepperOrientation;
+  floating?: boolean;
   onComplete?: steps.Props['onStepComplete'];
   activeStep?: steps.Props['step'];
+  className?: string;
+  /**
+   * Optional actions rendered at the end of the stepper.
+   * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
+   */
+  actions?: ReactNode;
 } & Pick<steps.Props, 'onStepChange' | 'count'>>;
 //#endregion
-export { DsStepperProps, DsStepperVariant };
+export { DsStepperOrientation, DsStepperProps, DsStepperVariant };
 //# sourceMappingURL=ds-stepper.types.d.cts.map

package/dist/components/ds-stepper/ds-stepper.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-stepper.types.d.cts","names":[],"sources":["../../../src/components/ds-stepper/ds-stepper.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA;KAEA,cAAA,GAAiB;EAFjB,OAAA,CAAA,EAIA,gBAJgB;EAEhB,UAAA,CAAA,EAGG,KAAA,CAAM,KAHK,CAAA,gBAAA,CAAA;EAEd,UAAA,CAAA,EAEG,KAAA,CAAM,KAFT,CAAA,MAAA,CAAA;CACG,GAEV,IAFgB,CAEX,KAAA,CAAM,KAFK,EAAA,cAAA,GAAA,OAAA,CAAA,CAAA"}
+{"version":3,"file":"ds-stepper.types.d.cts","names":[],"sources":["../../../src/components/ds-stepper/ds-stepper.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA;KAEA,oBAAA;AAFA,KAIA,cAAA,GAAiB,iBAJD,CAAA;EAEhB,OAAA,CAAA,EAIA,gBAJoB;EAEpB,WAAA,CAAA,EAGI,oBAHU;EAEd,QAAA,CAAA,EAAA,OAAA;EACI,UAAA,CAAA,EAED,KAAA,CAAM,KAFL,CAAA,gBAAA,CAAA;EAED,UAAM,CAAA,EACN,KAAA,CAAM,KADA,CAAA,MAAA,CAAA;EACN,SAAM,CAAA,EAAA,MAAA;EAMT;;;;EAZkC,OAAA,CAAA,EAYlC,SAZkC;IAazC,KAAK,KAAA,CAAM"}

package/dist/components/ds-stepper/ds-stepper.types.d.ts

@@ -1,13 +1,22 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import * as steps from "@zag-js/steps";
 
 //#region src/components/ds-stepper/ds-stepper.types.d.ts
 type DsStepperVariant = 'single';
+type DsStepperOrientation = 'horizontal' | 'vertical';
 type DsStepperProps = PropsWithChildren<{
   variant?: DsStepperVariant;
+  orientation?: DsStepperOrientation;
+  floating?: boolean;
   onComplete?: steps.Props['onStepComplete'];
   activeStep?: steps.Props['step'];
+  className?: string;
+  /**
+   * Optional actions rendered at the end of the stepper.
+   * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
+   */
+  actions?: ReactNode;
 } & Pick<steps.Props, 'onStepChange' | 'count'>>;
 //#endregion
-export { DsStepperProps, DsStepperVariant };
+export { DsStepperOrientation, DsStepperProps, DsStepperVariant };
 //# sourceMappingURL=ds-stepper.types.d.ts.map

package/dist/components/ds-stepper/ds-stepper.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-stepper.types.d.ts","names":[],"sources":["../../../src/components/ds-stepper/ds-stepper.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA;KAEA,cAAA,GAAiB;EAFjB,OAAA,CAAA,EAIA,gBAJgB;EAEhB,UAAA,CAAA,EAGG,KAAA,CAAM,KAHK,CAAA,gBAAA,CAAA;EAEd,UAAA,CAAA,EAEG,KAAA,CAAM,KAFT,CAAA,MAAA,CAAA;CACG,GAEV,IAFgB,CAEX,KAAA,CAAM,KAFK,EAAA,cAAA,GAAA,OAAA,CAAA,CAAA"}
+{"version":3,"file":"ds-stepper.types.d.ts","names":[],"sources":["../../../src/components/ds-stepper/ds-stepper.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA;KAEA,oBAAA;AAFA,KAIA,cAAA,GAAiB,iBAJD,CAAA;EAEhB,OAAA,CAAA,EAIA,gBAJoB;EAEpB,WAAA,CAAA,EAGI,oBAHU;EAEd,QAAA,CAAA,EAAA,OAAA;EACI,UAAA,CAAA,EAED,KAAA,CAAM,KAFL,CAAA,gBAAA,CAAA;EAED,UAAM,CAAA,EACN,KAAA,CAAM,KADA,CAAA,MAAA,CAAA;EACN,SAAM,CAAA,EAAA,MAAA;EAMT;;;;EAZkC,OAAA,CAAA,EAYlC,SAZkC;IAazC,KAAK,KAAA,CAAM"}

package/dist/components/ds-stepper/hooks/use-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-stepper.js","names":["createContext","useContext","DsStepperVariant","useSteps","StepsContext","stepsApi","ReturnType","variant","StepperContext","useStepper","context","Error"],"sources":["../../../../src/components/ds-stepper/hooks/use-stepper.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DsStepperVariant } from '../ds-stepper.types';\nimport type { useSteps } from './use-steps';\n\ntype StepsContext = {\n\tstepsApi: ReturnType<typeof useSteps>;\n\tvariant: DsStepperVariant | undefined;\n};\n\nexport const StepperContext = createContext<StepsContext | null>(null);\n\nexport function useStepper() {\n\tconst context = useContext(StepperContext);\n\n\tif (!context) {\n\t\tthrow new Error('useStepper must be used within a DsStepper');\n\t}\n\n\treturn context;\n}\n"],"mappings":";;;AASA,MAAaQ,iBAAiBR,cAAmC,KAAK;AAEtE,SAAOS,aAAA;CACN,MAAAC,UAAgBT,WAAWO,eAAe;AAE1C,KAAI,CAACE,QACJ,OAAM,IAAIC,MAAM,6CAA6C;AAC7D,QAEMD"}
+{"version":3,"file":"use-stepper.js","names":["createContext","useContext","DsStepperOrientation","DsStepperVariant","useSteps","StepsContext","stepsApi","ReturnType","variant","orientation","floating","StepperContext","useStepper","context","Error"],"sources":["../../../../src/components/ds-stepper/hooks/use-stepper.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DsStepperOrientation, DsStepperVariant } from '../ds-stepper.types';\nimport type { useSteps } from './use-steps';\n\ntype StepsContext = {\n\tstepsApi: ReturnType<typeof useSteps>;\n\tvariant: DsStepperVariant | undefined;\n\torientation: DsStepperOrientation;\n\tfloating: boolean;\n};\n\nexport const StepperContext = createContext<StepsContext | null>(null);\n\nexport function useStepper() {\n\tconst context = useContext(StepperContext);\n\n\tif (!context) {\n\t\tthrow new Error('useStepper must be used within a DsStepper');\n\t}\n\n\treturn context;\n}\n"],"mappings":";;;AAWA,MAAaW,iBAAiBX,cAAmC,KAAK;AAEtE,SAAOY,aAAA;CACN,MAAAC,UAAgBZ,WAAWU,eAAe;AAE1C,KAAI,CAACE,QACJ,OAAM,IAAIC,MAAM,6CAA6C;AAC7D,QAEMD"}

package/dist/components/ds-stepper/hooks/use-steps.cjs

@@ -7,32 +7,34 @@ let _zag_js_react = require("@zag-js/react");
 
 //#region src/components/ds-stepper/hooks/use-steps.ts
 function useSteps(t0) {
-	const $ = (0, react_compiler_runtime.c)(8);
-	const { count, activeStep, onStepChange, onComplete } = t0;
+	const $ = (0, react_compiler_runtime.c)(9);
+	const { count, activeStep, onStepChange, onComplete, orientation } = t0;
 	const t1 = (0, react.useId)();
 	let t2;
-	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange || $[4] !== t1) {
+	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange || $[4] !== orientation || $[5] !== t1) {
 		t2 = {
 			id: t1,
 			count,
 			step: activeStep,
 			onStepChange,
-			onStepComplete: onComplete
+			onStepComplete: onComplete,
+			orientation
 		};
 		$[0] = activeStep;
 		$[1] = count;
 		$[2] = onComplete;
 		$[3] = onStepChange;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = orientation;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
 	const service = (0, _zag_js_react.useMachine)(_zag_js_steps.machine, t2);
 	let t3;
-	if ($[6] !== service) {
+	if ($[7] !== service) {
 		t3 = _zag_js_steps.connect(service, _zag_js_react.normalizeProps);
-		$[6] = service;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = service;
+		$[8] = t3;
+	} else t3 = $[8];
 	return t3;
 }
 

package/dist/components/ds-stepper/hooks/use-steps.js

@@ -5,32 +5,34 @@ import { normalizeProps, useMachine } from "@zag-js/react";
 
 //#region src/components/ds-stepper/hooks/use-steps.ts
 function useSteps(t0) {
-	const $ = c(8);
-	const { count, activeStep, onStepChange, onComplete } = t0;
+	const $ = c(9);
+	const { count, activeStep, onStepChange, onComplete, orientation } = t0;
 	const t1 = useId();
 	let t2;
-	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange || $[4] !== t1) {
+	if ($[0] !== activeStep || $[1] !== count || $[2] !== onComplete || $[3] !== onStepChange || $[4] !== orientation || $[5] !== t1) {
 		t2 = {
 			id: t1,
 			count,
 			step: activeStep,
 			onStepChange,
-			onStepComplete: onComplete
+			onStepComplete: onComplete,
+			orientation
 		};
 		$[0] = activeStep;
 		$[1] = count;
 		$[2] = onComplete;
 		$[3] = onStepChange;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = orientation;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
 	const service = useMachine(steps.machine, t2);
 	let t3;
-	if ($[6] !== service) {
+	if ($[7] !== service) {
 		t3 = steps.connect(service, normalizeProps);
-		$[6] = service;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = service;
+		$[8] = t3;
+	} else t3 = $[8];
 	return t3;
 }
 

package/dist/components/ds-stepper/hooks/use-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-steps.js","names":["useId","steps","normalizeProps","useMachine","DsStepperProps","UseSteps","Pick","useSteps","t0","$","_c","count","activeStep","onStepChange","onComplete","t1","t2","id","step","onStepComplete","service","machine","t3","connect"],"sources":["../../../../src/components/ds-stepper/hooks/use-steps.ts"],"sourcesContent":["import { useId } from 'react';\nimport * as steps from '@zag-js/steps';\nimport { normalizeProps, useMachine } from '@zag-js/react';\nimport type { DsStepperProps } from '../ds-stepper.types';\n\ntype UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete'>;\n\nexport function useSteps({ count, activeStep, onStepChange, onComplete }: UseSteps) {\n\tconst service = useMachine(steps.machine, {\n\t\tid: useId(),\n\t\tcount,\n\t\tstep: activeStep,\n\t\tonStepChange,\n\t\tonStepComplete: onComplete,\n\t});\n\n\treturn steps.connect(service, normalizeProps);\n}\n"],"mappings":";;;;;;AAOA,SAAOO,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAC,OAAAC,YAAAC,cAAAC,eAAAN;CAEnB,MAAAO,KAAAf,OAAO;CAAA,IAAAgB;AAAA,KAAAP,EAAA,OAAAG,cAAAH,EAAA,OAAAE,SAAAF,EAAA,OAAAK,cAAAL,EAAA,OAAAI,gBAAAJ,EAAA,OAAAM,IAAA;AAD8BC,OAAA;GAAAC,IACrCF;GAAOJ;GAAAO,MAELN;GAAUC;GAAAM,gBAEAL;GAChB;AAAAL,IAAA,KAAAG;AAAAH,IAAA,KAAAE;AAAAF,IAAA,KAAAK;AAAAL,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;AAAAN,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAND,MAAAW,UAAgBjB,WAAWF,MAAKoB,SAAUL,GAMxC;CAAC,IAAAM;AAAA,KAAAb,EAAA,OAAAW,SAAA;AAEIE,OAAArB,MAAKsB,QAASH,SAASlB,eAAe;AAAAO,IAAA,KAAAW;AAAAX,IAAA,KAAAa;OAAAA,MAAAb,EAAA;AAAA,QAAtCa"}
+{"version":3,"file":"use-steps.js","names":["useId","steps","normalizeProps","useMachine","DsStepperProps","UseSteps","Pick","useSteps","t0","$","_c","count","activeStep","onStepChange","onComplete","orientation","t1","t2","id","step","onStepComplete","service","machine","t3","connect"],"sources":["../../../../src/components/ds-stepper/hooks/use-steps.ts"],"sourcesContent":["import { useId } from 'react';\nimport * as steps from '@zag-js/steps';\nimport { normalizeProps, useMachine } from '@zag-js/react';\nimport type { DsStepperProps } from '../ds-stepper.types';\n\ntype UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete' | 'orientation'>;\n\nexport function useSteps({ count, activeStep, onStepChange, onComplete, orientation }: UseSteps) {\n\tconst service = useMachine(steps.machine, {\n\t\tid: useId(),\n\t\tcount,\n\t\tstep: activeStep,\n\t\tonStepChange,\n\t\tonStepComplete: onComplete,\n\t\torientation,\n\t});\n\n\treturn steps.connect(service, normalizeProps);\n}\n"],"mappings":";;;;;;AAOA,SAAOO,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAC,OAAAC,YAAAC,cAAAC,YAAAC,gBAAAP;CAEnB,MAAAQ,KAAAhB,OAAO;CAAA,IAAAiB;AAAA,KAAAR,EAAA,OAAAG,cAAAH,EAAA,OAAAE,SAAAF,EAAA,OAAAK,cAAAL,EAAA,OAAAI,gBAAAJ,EAAA,OAAAM,eAAAN,EAAA,OAAAO,IAAA;AAD8BC,OAAA;GAAAC,IACrCF;GAAOL;GAAAQ,MAELP;GAAUC;GAAAO,gBAEAN;GAAUC;GAE1B;AAAAN,IAAA,KAAAG;AAAAH,IAAA,KAAAE;AAAAF,IAAA,KAAAK;AAAAL,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;AAAAN,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAPD,MAAAY,UAAgBlB,WAAWF,MAAKqB,SAAUL,GAOxC;CAAC,IAAAM;AAAA,KAAAd,EAAA,OAAAY,SAAA;AAEIE,OAAAtB,MAAKuB,QAASH,SAASnB,eAAe;AAAAO,IAAA,KAAAY;AAAAZ,IAAA,KAAAc;OAAAA,MAAAd,EAAA;AAAA,QAAtCc"}

package/dist/components/ds-stepper/index.d.ts

@@ -1,5 +1,5 @@
-import { DsStepperProps, DsStepperVariant } from "./ds-stepper.types.js";
+import { DsStepperOrientation, DsStepperProps, DsStepperVariant } from "./ds-stepper.types.js";
 import { DsStepper } from "./ds-stepper.js";
-import { DsStep } from "./components/ds-step.js";
-import { DsStepContent } from "./components/ds-step-content.js";
-import { DsNextStepButton } from "./components/ds-step-next-button.js";
+import { DsStep, DsStepProps } from "./components/ds-step.js";
+import { DsStepContent, DsStepContentProps } from "./components/ds-step-content.js";
+import { DsNextStepButton, DsNextStepButtonProps } from "./components/ds-step-next-button.js";

package/dist/components/ds-table/ds-table.d.cts

@@ -1,5 +1,5 @@
 import { DsDataTableProps } from "./ds-table.types.cjs";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
 
 //#region src/components/ds-table/ds-table.d.ts
 /**
@@ -38,7 +38,7 @@ declare const DsTable: <TData extends {
   columnVisibility: externalColumnVisibility,
   onColumnVisibilityChange,
   activeRowId
-}: DsDataTableProps<TData, TValue>) => react_jsx_runtime36.JSX.Element;
+}: DsDataTableProps<TData, TValue>) => react_jsx_runtime61.JSX.Element;
 //#endregion
 export { DsTable };
 //# sourceMappingURL=ds-table.d.cts.map

package/dist/components/ds-tabs/ds-tabs.d.cts

@@ -1,5 +1,5 @@
 import { DsTabsContentProps, DsTabsListProps, DsTabsProps, DsTabsTabProps } from "./ds-tabs.types.cjs";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/ds-tabs/ds-tabs.d.ts
 declare const DsTabs: {
@@ -12,12 +12,12 @@ declare const DsTabs: {
     className,
     style,
     children
-  }: DsTabsProps) => react_jsx_runtime37.JSX.Element;
+  }: DsTabsProps) => react_jsx_runtime51.JSX.Element;
   List: ({
     className,
     style,
     children
-  }: DsTabsListProps) => react_jsx_runtime37.JSX.Element;
+  }: DsTabsListProps) => react_jsx_runtime51.JSX.Element;
   Tab: ({
     value,
     disabled,
@@ -30,13 +30,13 @@ declare const DsTabs: {
     className,
     style,
     children
-  }: DsTabsTabProps) => react_jsx_runtime37.JSX.Element;
+  }: DsTabsTabProps) => react_jsx_runtime51.JSX.Element;
   Content: ({
     value,
     className,
     style,
     children
-  }: DsTabsContentProps) => react_jsx_runtime37.JSX.Element;
+  }: DsTabsContentProps) => react_jsx_runtime51.JSX.Element;
 };
 //#endregion
 export { DsTabs };

package/dist/components/ds-tag/ds-tag.d.cts

@@ -1,5 +1,5 @@
 import { DsTagProps } from "./ds-tag.types.cjs";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime59 from "react/jsx-runtime";
 
 //#region src/components/ds-tag/ds-tag.d.ts
 /**
@@ -19,7 +19,7 @@ declare const DsTag: ({
   onDelete,
   slots,
   ...rest
-}: DsTagProps) => react_jsx_runtime41.JSX.Element;
+}: DsTagProps) => react_jsx_runtime59.JSX.Element;
 //#endregion
 export { DsTag };
 //# sourceMappingURL=ds-tag.d.cts.map

package/dist/components/ds-tag/ds-tag.d.ts

@@ -1,5 +1,5 @@
 import { DsTagProps } from "./ds-tag.types.js";
-import * as react_jsx_runtime54 from "react/jsx-runtime";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 
 //#region src/components/ds-tag/ds-tag.d.ts
 /**
@@ -19,7 +19,7 @@ declare const DsTag: ({
   onDelete,
   slots,
   ...rest
-}: DsTagProps) => react_jsx_runtime54.JSX.Element;
+}: DsTagProps) => react_jsx_runtime60.JSX.Element;
 //#endregion
 export { DsTag };
 //# sourceMappingURL=ds-tag.d.ts.map

package/dist/components/ds-tag-filter/ds-tag-filter.d.cts

@@ -1,5 +1,5 @@
 import { DsTagFilterProps } from "./ds-tag-filter.types.cjs";
-import * as react_jsx_runtime65 from "react/jsx-runtime";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 
 //#region src/components/ds-tag-filter/ds-tag-filter.d.ts
 
@@ -18,7 +18,7 @@ declare const DsTagFilter: ({
   onItemDelete,
   onItemSelect,
   onExpand
-}: DsTagFilterProps) => react_jsx_runtime65.JSX.Element | null;
+}: DsTagFilterProps) => react_jsx_runtime60.JSX.Element | null;
 //#endregion
 export { DsTagFilter };
 //# sourceMappingURL=ds-tag-filter.d.cts.map

package/dist/components/ds-tag-filter/ds-tag-filter.d.ts

@@ -1,5 +1,5 @@
 import { DsTagFilterProps } from "./ds-tag-filter.types.js";
-import * as react_jsx_runtime59 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 
 //#region src/components/ds-tag-filter/ds-tag-filter.d.ts
 
@@ -18,7 +18,7 @@ declare const DsTagFilter: ({
   onItemDelete,
   onItemSelect,
   onExpand
-}: DsTagFilterProps) => react_jsx_runtime59.JSX.Element | null;
+}: DsTagFilterProps) => react_jsx_runtime53.JSX.Element | null;
 //#endregion
 export { DsTagFilter };
 //# sourceMappingURL=ds-tag-filter.d.ts.map

package/dist/components/ds-toggle/ds-toggle.d.cts

@@ -1,5 +1,5 @@
 import { DsToggleProps } from "./ds-toggle.types.cjs";
-import * as react_jsx_runtime66 from "react/jsx-runtime";
+import * as react_jsx_runtime62 from "react/jsx-runtime";
 
 //#region src/components/ds-toggle/ds-toggle.d.ts
 /**
@@ -18,7 +18,7 @@ declare const DsToggle: ({
   children,
   checked,
   ...rest
-}: DsToggleProps) => react_jsx_runtime66.JSX.Element;
+}: DsToggleProps) => react_jsx_runtime62.JSX.Element;
 //#endregion
 export { DsToggle };
 //# sourceMappingURL=ds-toggle.d.cts.map

package/dist/components/ds-toggle/ds-toggle.d.ts

@@ -1,5 +1,5 @@
 import { DsToggleProps } from "./ds-toggle.types.js";
-import * as react_jsx_runtime60 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/components/ds-toggle/ds-toggle.d.ts
 /**
@@ -18,7 +18,7 @@ declare const DsToggle: ({
   children,
   checked,
   ...rest
-}: DsToggleProps) => react_jsx_runtime60.JSX.Element;
+}: DsToggleProps) => react_jsx_runtime54.JSX.Element;
 //#endregion
 export { DsToggle };
 //# sourceMappingURL=ds-toggle.d.ts.map