@drivenets/design-system 0.4.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step-content.js","names":["ReactNode","useStepper","DsStepLabel","DsStepDescription","classnames","styles","DsStepContentProps","index","label","description","actions","DsStepContent","t0","$","_c","variant","stepsApi","t1","getItemState","current","t2","t3","stepContent","stepContentSingle","t4","t5","t6","stepActions","t7"],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useStepper } from '../hooks/use-stepper';\nimport { DsStepLabel } from './ds-step-label';\nimport { DsStepDescription } from './ds-step-description';\nimport classnames from 'classnames';\nimport styles from '../ds-stepper.module.scss';\n\ntype DsStepContentProps = {\n\tindex: number;\n\tlabel: string;\n\tdescription?: string;\n\tactions?: ReactNode;\n};\n\nexport function DsStepContent({ index, label, description, actions }: DsStepContentProps) {\n\tconst { variant, stepsApi } = useStepper();\n\tconst { current } = stepsApi.getItemState({ index });\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classnames(styles.stepContent, {\n\t\t\t\t[styles.stepContentSingle]: variant === 'single',\n\t\t\t})}\n\t\t>\n\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t{variant !== 'single' && description && <DsStepDescription>{description}</DsStepDescription>}\n\n\t\t\t{actions && current && <div className={styles.stepActions}>{actions}</div>}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAcA,SAAOW,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAuB,MAAA,EAAAP,OAAAC,OAAAC,aAAAC,YAAAE;CAC7B,MAAA,EAAAG,SAAAC,aAA8Bf,YAAY;CAAC,IAAAgB;AAAA,KAAAJ,EAAA,OAAAN,SAAAM,EAAA,OAAAG,UAAA;AACvBC,OAAAD,SAAQE,aAAc,EAAAX,OAAS,CAAC;AAAAM,IAAA,KAAAN;AAAAM,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAApD,MAAA,EAAAM,YAAoBF;CAKW,MAAAG,KAAAL,YAAY;CAAQ,IAAAM;AAAA,KAAAR,EAAA,OAAAO,IAAA;AADtCC,OAAAjB,WAAWC,0BAAMiB,aAAc,GACxCjB,0BAAMkB,oBAAqBH,IAC5B,CAAC;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAL,OAAA;AAEFgB,OAAA,oBAAC,yBAAahB,QAAoB;AAAAK,IAAA,KAAAL;AAAAK,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,OAAAJ,eAAAI,EAAA,OAAAE,SAAA;AAEjCU,OAAAV,YAAY,YAAZN,eAAuC,oBAAC,+BAAmBA,cAAgC;AAAAI,IAAA,KAAAJ;AAAAI,IAAA,KAAAE;AAAAF,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,QAAAH,WAAAG,EAAA,QAAAM,SAAA;AAE3FO,OAAAhB,WAAAS,WAAsB,oBAAA;GAAgB,WAAAd,0BAAMsB;aAAejB;IAAc;AAAAG,IAAA,MAAAH;AAAAG,IAAA,MAAAM;AAAAN,IAAA,MAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,QAAAQ,MAAAR,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,IAAA;AAT3EE,OAAA,qBAAA;GACY,WAAAP;;IAIXG;IAECC;IAEAC;;IACI;AAAAb,IAAA,MAAAQ;AAAAR,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;AAAAb,IAAA,MAAAe;OAAAA,MAAAf,EAAA;AAAA,QAVNe"}
+{"version":3,"file":"ds-step-content.js","names":["ReactNode","useStepper","DsStepLabel","DsStepDescription","DsStepSeparator","classnames","styles","DsStepContentProps","index","label","description","actions","DsStepContent","t0","$","_c","variant","orientation","stepsApi","t1","getItemState","current","isHorizontal","showDescription","t2","t3","stepContent","stepContentSingle","t4","stepLabelRow","stepActions","t5"],"sources":["../../../../src/components/ds-stepper/components/ds-step-content.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useStepper } from '../hooks/use-stepper';\nimport { DsStepLabel } from './ds-step-label';\nimport { DsStepDescription } from './ds-step-description';\nimport { DsStepSeparator } from './ds-step-separator';\nimport classnames from 'classnames';\nimport styles from '../ds-stepper.module.scss';\n\nexport type DsStepContentProps = {\n\tindex: number;\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\tactions?: ReactNode;\n};\n\nexport function DsStepContent({ index, label, description, actions }: DsStepContentProps) {\n\tconst { variant, orientation, stepsApi } = useStepper();\n\tconst { current } = stepsApi.getItemState({ index });\n\n\tconst isHorizontal = orientation === 'horizontal';\n\tconst showDescription = variant !== 'single' && description;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classnames(styles.stepContent, {\n\t\t\t\t[styles.stepContentSingle]: variant === 'single',\n\t\t\t})}\n\t\t>\n\t\t\t{isHorizontal ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className={styles.stepLabelRow}>\n\t\t\t\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t\t\t\t<DsStepSeparator index={index} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{showDescription && <DsStepDescription>{description}</DsStepDescription>}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<DsStepLabel>{label}</DsStepLabel>\n\n\t\t\t\t\t{showDescription && <DsStepDescription>{description}</DsStepDescription>}\n\n\t\t\t\t\t{actions && current && <div className={styles.stepActions}>{actions}</div>}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAOY,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAuB,MAAA,EAAAP,OAAAC,OAAAC,aAAAC,YAAAE;CAC7B,MAAA,EAAAG,SAAAC,aAAAC,aAA2CjB,YAAY;CAAC,IAAAkB;AAAA,KAAAL,EAAA,OAAAN,SAAAM,EAAA,OAAAI,UAAA;AACpCC,OAAAD,SAAQE,aAAc,EAAAZ,OAAS,CAAC;AAAAM,IAAA,KAAAN;AAAAM,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAApD,MAAA,EAAAO,YAAoBF;CAEpB,MAAAG,eAAqBL,gBAAgB;CACrC,MAAAM,kBAAwBP,YAAY,YAAZN;CAKO,MAAAc,KAAAR,YAAY;CAAQ,IAAAS;AAAA,KAAAX,EAAA,OAAAU,IAAA;AADtCC,OAAApB,WAAWC,0BAAMoB,aAAc,GACxCpB,0BAAMqB,oBAAqBH,IAC5B,CAAC;AAAAV,IAAA,KAAAU;AAAAV,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAH,WAAAG,EAAA,OAAAO,WAAAP,EAAA,OAAAJ,eAAAI,EAAA,OAAAN,SAAAM,EAAA,OAAAQ,gBAAAR,EAAA,QAAAL,SAAAK,EAAA,QAAAS,iBAAA;AAEDK,OAAAN,eAAA,4CAEC,qBAAA;GAAgB,WAAAhB,0BAAMuB;cACrB,oBAAC,yBAAapB,QAEd,sBAAC,mBAAuBD,QACzB;IAEC,EAAAe,mBAAmB,oBAAC,+BAAmBb,cAA+B,IAUxE,GAlBA;GAYC,oBAAC,yBAAaD,QAEb;GAAAc,mBAAmB,oBAAC,+BAAmBb,cAA+B;GAEtEC,WAAAU,WAAsB,oBAAA;IAAgB,WAAAf,0BAAMwB;cAAenB;KAAa;MAE1E;AAAAG,IAAA,KAAAH;AAAAG,IAAA,KAAAO;AAAAP,IAAA,KAAAJ;AAAAI,IAAA,KAAAN;AAAAM,IAAA,KAAAQ;AAAAR,IAAA,MAAAL;AAAAK,IAAA,MAAAS;AAAAT,IAAA,MAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,QAAAW,MAAAX,EAAA,QAAAc,IAAA;AAvBFG,OAAA,oBAAA;GACY,WAAAN;aAIVG;IAmBI;AAAAd,IAAA,MAAAW;AAAAX,IAAA,MAAAc;AAAAd,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;AAAA,QAxBNiB"}

package/dist/components/ds-stepper/components/ds-step-next-button.cjs

@@ -6,27 +6,44 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ds-stepper/components/ds-step-next-button.tsx
 function DsNextStepButton(t0) {
-	const $ = (0, react_compiler_runtime.c)(5);
-	const { children } = t0;
-	const context = require_use_stepper.useStepper();
+	const $ = (0, react_compiler_runtime.c)(11);
+	let children;
+	let rest;
 	let t1;
-	if ($[0] !== context.stepsApi) {
-		t1 = context.stepsApi.getNextTriggerProps();
-		$[0] = context.stepsApi;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== t0) {
+		({children, size: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		children = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const size = t1 === void 0 ? "small" : t1;
+	const context = require_use_stepper.useStepper();
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
-			...t1,
-			size: "small",
+	if ($[4] !== context.stepsApi) {
+		t2 = context.stepsApi.getNextTriggerProps();
+		$[4] = context.stepsApi;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== rest || $[8] !== size || $[9] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_button.default, {
+			...t2,
+			size,
+			...rest,
 			children
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+		$[6] = children;
+		$[7] = rest;
+		$[8] = size;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 }
 
 //#endregion

package/dist/components/ds-stepper/components/ds-step-next-button.d.cts

@@ -1,10 +1,13 @@
-import * as react_jsx_runtime54 from "react/jsx-runtime";
-import { PropsWithChildren } from "react";
+import { DsButtonProps } from "../../ds-button/versions/ds-button-legacy/ds-button-legacy.types.cjs";
+import * as react_jsx_runtime58 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
+type DsNextStepButtonProps = Pick<DsButtonProps, 'variant' | 'size' | 'className' | 'style' | 'children'>;
 declare function DsNextStepButton({
-  children
-}: PropsWithChildren): react_jsx_runtime54.JSX.Element;
+  children,
+  size,
+  ...rest
+}: DsNextStepButtonProps): react_jsx_runtime58.JSX.Element;
 //#endregion
-export { DsNextStepButton };
+export { DsNextStepButton, DsNextStepButtonProps };
 //# sourceMappingURL=ds-step-next-button.d.cts.map

package/dist/components/ds-stepper/components/ds-step-next-button.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-step-next-button.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;iBAIgB,gBAAA;;GAA+B,oBAAiB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-step-next-button.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;KAIY,qBAAA,GAAwB,KACnC;iBAIe,gBAAA;;;;GAAwD,wBAAqB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-stepper/components/ds-step-next-button.d.ts

@@ -1,10 +1,14 @@
-import * as react_jsx_runtime48 from "react/jsx-runtime";
-import { PropsWithChildren } from "react";
+import { DsButtonProps } from "../../ds-button/versions/ds-button-legacy/ds-button-legacy.types.js";
+import "../../ds-button/versions/ds-button-legacy/index.js";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.d.ts
+type DsNextStepButtonProps = Pick<DsButtonProps, 'variant' | 'size' | 'className' | 'style' | 'children'>;
 declare function DsNextStepButton({
-  children
-}: PropsWithChildren): react_jsx_runtime48.JSX.Element;
+  children,
+  size,
+  ...rest
+}: DsNextStepButtonProps): react_jsx_runtime51.JSX.Element;
 //#endregion
-export { DsNextStepButton };
+export { DsNextStepButton, DsNextStepButtonProps };
 //# sourceMappingURL=ds-step-next-button.d.ts.map

package/dist/components/ds-stepper/components/ds-step-next-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-step-next-button.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;iBAIgB,gBAAA;;GAA+B,oBAAiB,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-step-next-button.d.ts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":[],"mappings":";;;;;KAIY,qBAAA,GAAwB,KACnC;iBAIe,gBAAA;;;;GAAwD,wBAAqB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-stepper/components/ds-step-next-button.js

@@ -5,27 +5,44 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ds-stepper/components/ds-step-next-button.tsx
 function DsNextStepButton(t0) {
-	const $ = c(5);
-	const { children } = t0;
-	const context = useStepper();
+	const $ = c(11);
+	let children;
+	let rest;
 	let t1;
-	if ($[0] !== context.stepsApi) {
-		t1 = context.stepsApi.getNextTriggerProps();
-		$[0] = context.stepsApi;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== t0) {
+		({children, size: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		children = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const size = t1 === void 0 ? "small" : t1;
+	const context = useStepper();
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ds_button_default, {
-			...t1,
-			size: "small",
+	if ($[4] !== context.stepsApi) {
+		t2 = context.stepsApi.getNextTriggerProps();
+		$[4] = context.stepsApi;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== rest || $[8] !== size || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ds_button_default, {
+			...t2,
+			size,
+			...rest,
 			children
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+		$[6] = children;
+		$[7] = rest;
+		$[8] = size;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 }
 
 //#endregion

package/dist/components/ds-stepper/components/ds-step-next-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-step-next-button.js","names":["PropsWithChildren","useStepper","DsButton","DsNextStepButton","t0","$","_c","children","context","t1","stepsApi","getNextTriggerProps","t2"],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { useStepper } from '../hooks/use-stepper';\nimport DsButton from '../../ds-button/ds-button';\n\nexport function DsNextStepButton({ children }: PropsWithChildren) {\n\tconst context = useStepper();\n\n\treturn (\n\t\t<DsButton {...context.stepsApi.getNextTriggerProps()} size=\"small\">\n\t\t\t{children}\n\t\t</DsButton>\n\t);\n}\n"],"mappings":";;;;;;AAIA,SAAOG,iBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA0B,MAAA,EAAAC,aAAAH;CAChC,MAAAI,UAAgBP,YAAY;CAAC,IAAAQ;AAAA,KAAAJ,EAAA,OAAAG,QAAAE,UAAA;AAGdD,OAAAD,QAAOE,SAASC,qBAAsB;AAAAN,IAAA,KAAAG,QAAAE;AAAAL,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAI,IAAA;AAApDG,OAAA,oBAAC;GAAQ,GAAKH;GAA6C,MAAA;GACzDF;IACS;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAI;AAAAJ,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QAFXO"}
+{"version":3,"file":"ds-step-next-button.js","names":["useStepper","DsButton","DsButtonProps","DsNextStepButtonProps","Pick","DsNextStepButton","t0","$","_c","children","rest","t1","size","undefined","context","t2","stepsApi","getNextTriggerProps","t3"],"sources":["../../../../src/components/ds-stepper/components/ds-step-next-button.tsx"],"sourcesContent":["import { useStepper } from '../hooks/use-stepper';\nimport DsButton from '../../ds-button/ds-button';\nimport type { DsButtonProps } from '../../ds-button/versions/ds-button-legacy';\n\nexport type DsNextStepButtonProps = Pick<\n\tDsButtonProps,\n\t'variant' | 'size' | 'className' | 'style' | 'children'\n>;\n\nexport function DsNextStepButton({ children, size = 'small', ...rest }: DsNextStepButtonProps) {\n\tconst context = useStepper();\n\n\treturn (\n\t\t<DsButton {...context.stepsApi.getNextTriggerProps()} size={size} {...rest}>\n\t\t\t{children}\n\t\t</DsButton>\n\t);\n}\n"],"mappings":";;;;;;AASA,SAAOK,iBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAJ,EAAA,OAAAD,IAAA;AAA0B,GAAA,CAAAG,UAAAG,MAAAD,OAAAD,QAAAJ;AAA4DC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;QAAA;AAAAF,aAAAF,EAAA;AAAAG,SAAAH,EAAA;AAAAI,OAAAJ,EAAA;;CAAhD,MAAAK,OAAAD,OAAAE,SAAA,UAAAF;CAC5C,MAAAG,UAAgBd,YAAY;CAAC,IAAAe;AAAA,KAAAR,EAAA,OAAAO,QAAAE,UAAA;AAGdD,OAAAD,QAAOE,SAASC,qBAAsB;AAAAV,IAAA,KAAAO,QAAAE;AAAAT,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAE,YAAAF,EAAA,OAAAG,QAAAH,EAAA,OAAAK,QAAAL,EAAA,OAAAQ,IAAA;AAApDG,OAAA,oBAAC;GAAQ,GAAKH;GAA8CH;GAAI,GAAMF;GACpED;IACS;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAK;AAAAL,IAAA,KAAAQ;AAAAR,IAAA,MAAAW;OAAAA,MAAAX,EAAA;AAAA,QAFXW"}

package/dist/components/ds-stepper/components/ds-step-separator.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_ds_stepper_module = require('../ds-stepper.module.cjs');
+const require_use_stepper = require('../hooks/use-stepper.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-stepper/components/ds-step-separator.tsx
+function DsStepSeparator(t0) {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { index } = t0;
+	const { stepsApi, orientation } = require_use_stepper.useStepper();
+	const { last } = stepsApi.getItemState({ index });
+	if (last) return null;
+	let t1;
+	if ($[0] !== index || $[1] !== stepsApi) {
+		t1 = stepsApi.getSeparatorProps({ index });
+		$[0] = index;
+		$[1] = stepsApi;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = orientation === "horizontal" ? require_ds_stepper_module.default.horizontalSeparator : require_ds_stepper_module.default.separator;
+	let t3;
+	if ($[3] !== t1 || $[4] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...t1,
+			className: t2
+		});
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+
+//#endregion
+exports.DsStepSeparator = DsStepSeparator;

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

@@ -0,0 +1,36 @@
+import ds_stepper_module_default from "../ds-stepper.module.js";
+import { useStepper } from "../hooks/use-stepper.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-stepper/components/ds-step-separator.tsx
+function DsStepSeparator(t0) {
+	const $ = c(6);
+	const { index } = t0;
+	const { stepsApi, orientation } = useStepper();
+	const { last } = stepsApi.getItemState({ index });
+	if (last) return null;
+	let t1;
+	if ($[0] !== index || $[1] !== stepsApi) {
+		t1 = stepsApi.getSeparatorProps({ index });
+		$[0] = index;
+		$[1] = stepsApi;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = orientation === "horizontal" ? ds_stepper_module_default.horizontalSeparator : ds_stepper_module_default.separator;
+	let t3;
+	if ($[3] !== t1 || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			...t1,
+			className: t2
+		});
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+
+//#endregion
+export { DsStepSeparator };
+//# sourceMappingURL=ds-step-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-step-separator.js","names":["useStepper","styles","DsStepSeparatorProps","index","DsStepSeparator","t0","$","_c","stepsApi","orientation","last","getItemState","t1","getSeparatorProps","t2","horizontalSeparator","separator","t3"],"sources":["../../../../src/components/ds-stepper/components/ds-step-separator.tsx"],"sourcesContent":["import { useStepper } from '../hooks/use-stepper';\nimport styles from '../ds-stepper.module.scss';\n\ntype DsStepSeparatorProps = {\n\tindex: number;\n};\n\nexport function DsStepSeparator({ index }: DsStepSeparatorProps) {\n\tconst { stepsApi, orientation } = useStepper();\n\tconst { last } = stepsApi.getItemState({ index });\n\n\tif (last) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...stepsApi.getSeparatorProps({ index })}\n\t\t\tclassName={orientation === 'horizontal' ? styles.horizontalSeparator : styles.separator}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAOA,SAAOI,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAAJ,UAAAE;CAC/B,MAAA,EAAAG,UAAAC,gBAAkCT,YAAY;CAC9C,MAAA,EAAAU,SAAiBF,SAAQG,aAAc,EAAAR,OAAS,CAAC;AAEjD,KAAIO,KAAI,QACA;CACP,IAAAE;AAAA,KAAAN,EAAA,OAAAH,SAAAG,EAAA,OAAAE,UAAA;AAIKI,OAAAJ,SAAQK,kBAAmB,EAAAV,OAAS,CAAC;AAAAG,IAAA,KAAAH;AAAAG,IAAA,KAAAE;AAAAF,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAC9B,MAAAQ,KAAAL,gBAAgB,eAAeR,0BAAMc,sBAAuBd,0BAAMe;CAAU,IAAAC;AAAA,KAAAX,EAAA,OAAAM,MAAAN,EAAA,OAAAQ,IAAA;AAFxFG,OAAA,oBAAA;GAGE,GAFGL;GACO,WAAAE;IACV;AAAAR,IAAA,KAAAM;AAAAN,IAAA,KAAAQ;AAAAR,IAAA,KAAAW;OAAAA,MAAAX,EAAA;AAAA,QAHFW"}

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

@@ -2,6 +2,7 @@ const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs
 const require_ds_icon = require('../../ds-icon/ds-icon.cjs');
 const require_ds_stepper_module = require('../ds-stepper.module.cjs');
 const require_use_stepper = require('../hooks/use-stepper.cjs');
+const require_ds_step_separator = require('./ds-step-separator.cjs');
 let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
@@ -9,117 +10,171 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ds-stepper/components/ds-step.tsx
 function DsStep(t0) {
-	const $ = (0, react_compiler_runtime.c)(36);
-	const { index, children, className } = t0;
+	const $ = (0, react_compiler_runtime.c)(47);
+	const { index, children, className, disabled, variant: t1, slots, slotProps } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
 	const context = require_use_stepper.useStepper();
-	let t1;
+	let t2;
 	if ($[0] !== context.stepsApi || $[1] !== index) {
-		t1 = context.stepsApi.getItemState({ index });
+		t2 = context.stepsApi.getItemState({ index });
 		$[0] = context.stepsApi;
 		$[1] = index;
-		$[2] = t1;
-	} else t1 = $[2];
-	const { completed, current, last } = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const { completed, current, last } = t2;
 	const isSingleVariant = context.variant === "single";
+	const isHorizontal = context.orientation === "horizontal";
 	const isLast = last && context.stepsApi.value === index + 1;
 	if (isSingleVariant && !current && !isLast) return null;
-	const isClickable = completed && !isSingleVariant;
+	const isClickable = completed && !isSingleVariant && !disabled;
 	const Wrapper = isClickable ? "button" : "div";
-	let t2;
+	let t3;
 	if ($[3] !== context.stepsApi || $[4] !== index || $[5] !== isClickable) {
-		t2 = isClickable ? { onClick: () => {
+		t3 = isClickable ? { onClick: () => {
 			context.stepsApi.setStep(index);
 		} } : {};
 		$[3] = context.stepsApi;
 		$[4] = index;
 		$[5] = isClickable;
-		$[6] = t2;
-	} else t2 = $[6];
-	const props = t2;
-	let t3;
-	if ($[7] !== context.stepsApi || $[8] !== index) {
-		t3 = context.stepsApi.getItemProps({ index });
-		$[7] = context.stepsApi;
-		$[8] = index;
-		$[9] = t3;
-	} else t3 = $[9];
-	const t4 = current ? "" : void 0;
-	const t5 = completed ? "" : void 0;
+		$[6] = t3;
+	} else t3 = $[6];
+	const props = t3;
+	const t4 = slotProps?.indicator?.className;
+	let t5;
+	if ($[7] !== t4) {
+		t5 = (0, classnames.default)(require_ds_stepper_module.default.indicator, t4);
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const indicatorClassName = t5;
 	let t6;
-	if ($[10] !== className) {
-		t6 = (0, classnames.default)(require_ds_stepper_module.default.step, className);
-		$[10] = className;
-		$[11] = t6;
-	} else t6 = $[11];
+	if ($[9] !== completed || $[10] !== index || $[11] !== indicatorClassName || $[12] !== slotProps?.indicator || $[13] !== slots || $[14] !== variant) {
+		t6 = () => {
+			if (slots?.indicator) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...slotProps?.indicator,
+				className: indicatorClassName,
+				children: slots.indicator
+			});
+			if (variant === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...slotProps?.indicator,
+				className: slotProps?.indicator?.className,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "close",
+					className: indicatorClassName
+				})
+			});
+			if (completed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...slotProps?.indicator,
+				className: slotProps?.indicator?.className,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "check",
+					className: indicatorClassName
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...slotProps?.indicator,
+				className: indicatorClassName,
+				children: index + 1
+			});
+		};
+		$[9] = completed;
+		$[10] = index;
+		$[11] = indicatorClassName;
+		$[12] = slotProps?.indicator;
+		$[13] = slots;
+		$[14] = variant;
+		$[15] = t6;
+	} else t6 = $[15];
+	const renderIndicator = t6;
 	let t7;
-	if ($[12] !== context.stepsApi || $[13] !== index) {
-		t7 = context.stepsApi.getIndicatorProps({ index });
-		$[12] = context.stepsApi;
-		$[13] = index;
-		$[14] = t7;
-	} else t7 = $[14];
-	let t8;
-	if ($[15] !== completed || $[16] !== index) {
-		t8 = completed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-			icon: "check",
-			className: require_ds_stepper_module.default.indicator
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_ds_stepper_module.default.indicator,
-			children: index + 1
-		});
-		$[15] = completed;
-		$[16] = index;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
-	if ($[18] !== context.stepsApi || $[19] !== index) {
-		t9 = context.stepsApi.getSeparatorProps({ index });
-		$[18] = context.stepsApi;
-		$[19] = index;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== t9) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...t9,
-			className: require_ds_stepper_module.default.separator
+	if ($[16] !== context.stepsApi || $[17] !== index) {
+		t7 = context.stepsApi.getItemProps({ index });
+		$[16] = context.stepsApi;
+		$[17] = index;
+		$[18] = t7;
+	} else t7 = $[18];
+	const t8 = current ? "" : void 0;
+	const t9 = completed ? "" : void 0;
+	const t10 = disabled ? "" : void 0;
+	const t11 = variant === "error" ? "" : void 0;
+	let t12;
+	if ($[19] !== className) {
+		t12 = (0, classnames.default)(require_ds_stepper_module.default.step, className);
+		$[19] = className;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== context.floating) {
+		t13 = context.floating && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "drag_indicator",
+			className: require_ds_stepper_module.default.dragHandle,
+			"data-drag-handle": ""
 		});
-		$[21] = t9;
-		$[22] = t10;
-	} else t10 = $[22];
-	let t11;
-	if ($[23] !== t10 || $[24] !== t7 || $[25] !== t8) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			...t7,
+		$[21] = context.floating;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== context.stepsApi || $[24] !== index) {
+		t14 = context.stepsApi.getIndicatorProps({ index });
+		$[23] = context.stepsApi;
+		$[24] = index;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== renderIndicator) {
+		t15 = renderIndicator();
+		$[26] = renderIndicator;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== index || $[29] !== isHorizontal) {
+		t16 = !isHorizontal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_step_separator.DsStepSeparator, { index });
+		$[28] = index;
+		$[29] = isHorizontal;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...t14,
 			className: require_ds_stepper_module.default.indicatorContainer,
-			children: [t8, t10]
+			children: [t15, t16]
 		});
-		$[23] = t10;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t11;
-	} else t11 = $[26];
-	let t12;
-	if ($[27] !== Wrapper || $[28] !== children || $[29] !== props || $[30] !== t11 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
-			...t3,
-			"data-current": t4,
-			"data-complete": t5,
-			className: t6,
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== Wrapper || $[36] !== children || $[37] !== props || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t13 || $[42] !== t17 || $[43] !== t7 || $[44] !== t8 || $[45] !== t9) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+			...t7,
+			"data-current": t8,
+			"data-complete": t9,
+			"data-disabled": t10,
+			"data-error": t11,
+			className: t12,
 			...props,
-			children: [t11, children]
+			children: [
+				t13,
+				t17,
+				children
+			]
 		});
-		$[27] = Wrapper;
-		$[28] = children;
-		$[29] = props;
-		$[30] = t11;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t6;
-		$[35] = t12;
-	} else t12 = $[35];
-	return t12;
+		$[35] = Wrapper;
+		$[36] = children;
+		$[37] = props;
+		$[38] = t10;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t13;
+		$[42] = t17;
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t9;
+		$[46] = t18;
+	} else t18 = $[46];
+	return t18;
 }
 
 //#endregion

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

@@ -1,16 +1,35 @@
-import * as react_jsx_runtime52 from "react/jsx-runtime";
-import { PropsWithChildren } from "react";
+import * as react_jsx_runtime56 from "react/jsx-runtime";
+import { MouseEvent, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/ds-stepper/components/ds-step.d.ts
 type DsStepProps = PropsWithChildren<{
   index: number;
   className?: string;
+  disabled?: boolean;
+  /**
+   * Represents the variant type that determines the state or style of a component.
+   * @default 'default'
+   */
+  variant?: 'error' | 'default';
+  slots?: {
+    indicator?: ReactNode;
+  };
+  slotProps?: {
+    indicator?: {
+      className?: string;
+      onClick?: (event: MouseEvent<HTMLElement>) => void;
+    };
+  };
 }>;
 declare function DsStep({
   index,
   children,
-  className
-}: DsStepProps): react_jsx_runtime52.JSX.Element | null;
+  className,
+  disabled,
+  variant,
+  slots,
+  slotProps
+}: DsStepProps): react_jsx_runtime56.JSX.Element | null;
 //#endregion
-export { DsStep };
+export { DsStep, DsStepProps };
 //# sourceMappingURL=ds-step.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-step.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step.tsx"],"sourcesContent":[],"mappings":";;;;KAMK,WAAA,GAAc;;;AAN4B,CAAA,CAAA;AAW/B,iBAAA,MAAA,CAAM;EAAA,KAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAAiC,WAAjC,CAAA,EAA4C,mBAAA,CAAA,GAAA,CAAA,OAAA,GAA5C,IAAA"}
+{"version":3,"file":"ds-step.d.cts","names":[],"sources":["../../../../src/components/ds-stepper/components/ds-step.tsx"],"sourcesContent":[],"mappings":";;;;KAOY,WAAA,GAAc;;;EAAd,QAAA,CAAA,EAAA,OAAW;EAUT;;;;EAV6B,OAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EAoB3B,KAAA,CAAA,EAAA;IACf,SAAA,CAAA,EAXa,SAWb;EACA,CAAA;EACA,SAAA,CAAA,EAAA;IACA,SAAA,CAAA,EAAA;MACA,SAAA,CAAA,EAAA,MAAA;MACA,OAAA,CAAA,EAAA,CAAA,KAAA,EAXoB,UAWpB,CAX+B,WAW/B,CAAA,EAAA,GAAA,IAAA;IACA,CAAA;EACE,CAAA;CAAW,CAAA;AAAA,iBARE,MAAA,CAQF;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,OAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAAX,WAAW,CAAA,EAAA,mBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,IAAA"}