@drivenets/design-system 0.4.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

@@ -1,38 +1,40 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 let react_compiler_runtime = require("react/compiler-runtime");
 let react = require("react");
-let __zag_js_steps = require("@zag-js/steps");
-__zag_js_steps = require_rolldown_runtime.__toESM(__zag_js_steps);
-let __zag_js_react = require("@zag-js/react");
+let _zag_js_steps = require("@zag-js/steps");
+_zag_js_steps = require_rolldown_runtime.__toESM(_zag_js_steps);
+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];
-	const service = (0, __zag_js_react.useMachine)(__zag_js_steps.machine, t2);
+		$[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) {
-		t3 = __zag_js_steps.connect(service, __zag_js_react.normalizeProps);
-		$[6] = service;
-		$[7] = t3;
-	} else t3 = $[7];
+	if ($[7] !== service) {
+		t3 = _zag_js_steps.connect(service, _zag_js_react.normalizeProps);
+		$[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/components/ds-table-cell/ds-table-cell.cjs

@@ -8,7 +8,7 @@ let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let __tanstack_react_table = require("@tanstack/react-table");
+let _tanstack_react_table = require("@tanstack/react-table");
 
 //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx
 const DsDefaultTableCell = (t0) => {
@@ -16,7 +16,7 @@ const DsDefaultTableCell = (t0) => {
 	const { cell } = t0;
 	let t1;
 	if ($[0] !== cell) {
-		t1 = (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
+		t1 = (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
 		$[0] = cell;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -124,6 +124,7 @@ const DsTableCell = (t0) => {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ds_dropdown_menu.DsDropdownMenu.Item, {
 					value: label_0,
 					disabled: isDisabled_0,
+					className: action_1.className,
 					onClick: _temp2,
 					onSelect: () => action_1.onClick(row.original),
 					children: [action_1.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: action_1.icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label_0 })]

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.js

@@ -122,6 +122,7 @@ const DsTableCell = (t0) => {
 				return /* @__PURE__ */ jsxs(DsDropdownMenu.Item, {
 					value: label_0,
 					disabled: isDisabled_0,
+					className: action_1.className,
 					onClick: _temp2,
 					onSelect: () => action_1.onClick(row.original),
 					children: [action_1.icon && /* @__PURE__ */ jsx(ds_icon_default, { icon: action_1.icon }), /* @__PURE__ */ jsx("span", { children: label_0 })]

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-table-cell.js","names":["Cell","flexRender","classnames","DsIcon","DsDropdownMenu","styles","DsTableCellProps","DsDefaultTableCell","t0","$","_c","cell","t1","column","columnDef","getContext","t2","tableCellEllipsis","DsTableCell","row","primaryRowActions","secondaryRowActions","t3","undefined","t4","length","t5","t6","action","disabled","original","some","hasSecondaryRowActions","t7","t8","action_0","i","isDisabled","label","rowActionIcon","tooltip","e","stopPropagation","onClick","icon","map","secondaryActionsTrigger","_temp","action_1","i_0","label_0","isDisabled_0","_temp2","t9","cellActions","t10","lastCell","e_0","e_1"],"sources":["../../../../../src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx"],"sourcesContent":["import { type Cell, flexRender } from '@tanstack/react-table';\nimport classnames from 'classnames';\nimport { DsIcon } from '../../../ds-icon';\nimport { DsDropdownMenu } from '../../../ds-dropdown-menu';\nimport styles from './ds-table-cell.module.scss';\nimport type { DsTableCellProps } from './ds-table-cell.types';\n\nconst DsDefaultTableCell = <TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) => {\n\treturn (\n\t\t<div className={styles.tableCellEllipsis}>\n\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t</div>\n\t);\n};\n\nexport const DsTableCell = <TData, TValue>({\n\trow,\n\tcell,\n\tprimaryRowActions = [],\n\tsecondaryRowActions = [],\n}: DsTableCellProps<TData, TValue>) => {\n\tif (primaryRowActions.length || secondaryRowActions.length) {\n\t\tconst hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));\n\t\treturn (\n\t\t\t<div className={styles.lastCell}>\n\t\t\t\t<DsDefaultTableCell cell={cell} />\n\t\t\t\t<div className={styles.cellActions}>\n\t\t\t\t\t{primaryRowActions.map((action, i) => {\n\t\t\t\t\t\tconst isDisabled = action.disabled?.(row.original);\n\t\t\t\t\t\tconst label = typeof action.label === 'function' ? action.label(row.original) : action.label;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName={classnames(styles.rowActionIcon, { [styles.disabled]: isDisabled })}\n\t\t\t\t\t\t\t\ttitle={action.tooltip || label}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\t\t\t\t\tif (isDisabled) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taction.onClick(row.original);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\t\taria-disabled={isDisabled}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DsIcon icon={action.icon} size=\"tiny\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasSecondaryRowActions && (\n\t\t\t\t\t\t<DsDropdownMenu.Root>\n\t\t\t\t\t\t\t<DsDropdownMenu.Trigger\n\t\t\t\t\t\t\t\tclassName={classnames(styles.rowActionIcon, styles.secondaryActionsTrigger)}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\ttitle=\"More actions\"\n\t\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<DsIcon icon=\"more_vert\" size=\"tiny\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</DsDropdownMenu.Trigger>\n\t\t\t\t\t\t\t<DsDropdownMenu.Content>\n\t\t\t\t\t\t\t\t{secondaryRowActions.map((action, i) => {\n\t\t\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\t\t\ttypeof action.label === 'function' ? action.label(row.original) : action.label;\n\t\t\t\t\t\t\t\t\tconst isDisabled = action.disabled?.(row.original);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\t\tvalue={label}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => action.onClick(row.original)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.icon && <DsIcon icon={action.icon} />}\n\t\t\t\t\t\t\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Item>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</DsDropdownMenu.Content>\n\t\t\t\t\t\t</DsDropdownMenu.Root>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\treturn <DsDefaultTableCell cell={cell} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"ds-table-cell.js","names":["Cell","flexRender","classnames","DsIcon","DsDropdownMenu","styles","DsTableCellProps","DsDefaultTableCell","t0","$","_c","cell","t1","column","columnDef","getContext","t2","tableCellEllipsis","DsTableCell","row","primaryRowActions","secondaryRowActions","t3","undefined","t4","length","t5","t6","action","disabled","original","some","hasSecondaryRowActions","t7","t8","action_0","i","isDisabled","label","rowActionIcon","tooltip","e","stopPropagation","onClick","icon","map","secondaryActionsTrigger","_temp","action_1","i_0","label_0","isDisabled_0","className","_temp2","t9","cellActions","t10","lastCell","e_0","e_1"],"sources":["../../../../../src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx"],"sourcesContent":["import { type Cell, flexRender } from '@tanstack/react-table';\nimport classnames from 'classnames';\nimport { DsIcon } from '../../../ds-icon';\nimport { DsDropdownMenu } from '../../../ds-dropdown-menu';\nimport styles from './ds-table-cell.module.scss';\nimport type { DsTableCellProps } from './ds-table-cell.types';\n\nconst DsDefaultTableCell = <TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) => {\n\treturn (\n\t\t<div className={styles.tableCellEllipsis}>\n\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t</div>\n\t);\n};\n\nexport const DsTableCell = <TData, TValue>({\n\trow,\n\tcell,\n\tprimaryRowActions = [],\n\tsecondaryRowActions = [],\n}: DsTableCellProps<TData, TValue>) => {\n\tif (primaryRowActions.length || secondaryRowActions.length) {\n\t\tconst hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));\n\t\treturn (\n\t\t\t<div className={styles.lastCell}>\n\t\t\t\t<DsDefaultTableCell cell={cell} />\n\t\t\t\t<div className={styles.cellActions}>\n\t\t\t\t\t{primaryRowActions.map((action, i) => {\n\t\t\t\t\t\tconst isDisabled = action.disabled?.(row.original);\n\t\t\t\t\t\tconst label = typeof action.label === 'function' ? action.label(row.original) : action.label;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName={classnames(styles.rowActionIcon, { [styles.disabled]: isDisabled })}\n\t\t\t\t\t\t\t\ttitle={action.tooltip || label}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\t\t\t\t\tif (isDisabled) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taction.onClick(row.original);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\t\taria-disabled={isDisabled}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DsIcon icon={action.icon} size=\"tiny\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasSecondaryRowActions && (\n\t\t\t\t\t\t<DsDropdownMenu.Root>\n\t\t\t\t\t\t\t<DsDropdownMenu.Trigger\n\t\t\t\t\t\t\t\tclassName={classnames(styles.rowActionIcon, styles.secondaryActionsTrigger)}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\ttitle=\"More actions\"\n\t\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<DsIcon icon=\"more_vert\" size=\"tiny\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</DsDropdownMenu.Trigger>\n\t\t\t\t\t\t\t<DsDropdownMenu.Content>\n\t\t\t\t\t\t\t\t{secondaryRowActions.map((action, i) => {\n\t\t\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\t\t\ttypeof action.label === 'function' ? action.label(row.original) : action.label;\n\t\t\t\t\t\t\t\t\tconst isDisabled = action.disabled?.(row.original);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<DsDropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\t\tvalue={label}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\t\t\tclassName={action.className}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => action.onClick(row.original)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.icon && <DsIcon icon={action.icon} />}\n\t\t\t\t\t\t\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t\t\t\t\t\t</DsDropdownMenu.Item>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</DsDropdownMenu.Content>\n\t\t\t\t\t\t</DsDropdownMenu.Root>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\treturn <DsDefaultTableCell cell={cell} />;\n};\n"],"mappings":"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"}

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

@@ -36,6 +36,10 @@ type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
    * Optional icon to be displayed for the action
    */
   icon?: IconType;
+  /**
+   * Optional className to apply custom styling to the action item
+   */
+  className?: string;
 };
 //#endregion
 export { RowAction, SecondaryRowAction };

package/dist/components/ds-table/components/ds-table-cell/ds-table-cell.types.d.ts

@@ -36,6 +36,10 @@ type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
    * Optional icon to be displayed for the action
    */
   icon?: IconType;
+  /**
+   * Optional className to apply custom styling to the action item
+   */
+  className?: string;
 };
 //#endregion
 export { RowAction, SecondaryRowAction };

package/dist/components/ds-table/components/ds-table-header/ds-table-header.cjs

@@ -13,7 +13,7 @@ let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let __tanstack_react_table = require("@tanstack/react-table");
+let _tanstack_react_table = require("@tanstack/react-table");
 
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = (t0) => {
@@ -59,7 +59,7 @@ const DsTableHeader = (t0) => {
 						style: headerStyle,
 						children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: require_ds_table_header_module.default.headerSortContainer,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, __tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: require_ds_table_header_module.default.pageButtonIconContainer,
 								children: {
 									asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {