@hortiview/shared-components 2.10.2 → 2.11.1

package/dist/components/Stepper/components/StepperButton.js

@@ -1,60 +1,74 @@
-import { jsx as p } from "react/jsx-runtime";
-import { B as s } from "../../../index.es-DUcI2Zyr.js";
-import { useMemo as c } from "react";
-import { s as i } from "../../../stepper.module-HuqmDJPj.js";
-const $ = ({
-  label: o,
-  onClick: u,
-  disabled: n,
-  className: a,
+import { jsx as i } from "react/jsx-runtime";
+import { B as a } from "../../../index.es-B0QNuIUR.js";
+import { useMemo as v } from "react";
+import { s as f } from "../../../stepper.module-c-CWmpkt.js";
+const y = ({
+  label: p,
+  onClick: n,
+  disabled: s,
+  className: m,
   showArrowIcon: t = !0,
-  buttonSize: e = "themeDefault",
-  fullWidth: r = !0
-}) => /* @__PURE__ */ p(
-  s,
-  {
-    "data-testid": "stepper-previous-button",
-    className: `${i.stepperButton} ${a ?? ""}`,
-    onClick: u,
-    disabled: n,
-    fullWidth: r,
-    buttonSize: e,
-    variant: "outlined",
-    leadingIcon: t ? "arrow_back" : void 0,
-    type: "button",
-    children: o
-  }
-), x = ({
-  label: o,
-  onClick: u,
-  disabled: n,
-  className: a,
+  leadingIcon: e,
+  trailingIcon: r,
+  buttonSize: u = "themeDefault",
+  fullWidth: o = !0
+}) => {
+  const d = v(() => {
+    if (e) return e;
+    if (!r)
+      return t ? "arrow_back" : void 0;
+  }, [e, r, t]);
+  return /* @__PURE__ */ i(
+    a,
+    {
+      "data-testid": "stepper-previous-button",
+      className: `${f.stepperButton} ${m ?? ""}`,
+      onClick: n,
+      disabled: s,
+      fullWidth: o,
+      buttonSize: u,
+      variant: "outlined",
+      leadingIcon: d,
+      trailingIcon: r,
+      type: "button",
+      children: p
+    }
+  );
+}, N = ({
+  label: p,
+  onClick: n,
+  disabled: s,
+  className: m,
   isStepLoading: t,
   isLastStep: e,
   showArrowIcon: r = !0,
-  buttonSize: m = "themeDefault",
-  fullWidth: d = !0
+  leadingIcon: u,
+  trailingIcon: o,
+  buttonSize: d = "themeDefault",
+  fullWidth: b = !0
 }) => {
-  const l = c(() => {
-    if (!t && !e)
+  const B = v(() => {
+    if (o) return o;
+    if (!u && !t && !e)
       return r ? "arrow_forward" : void 0;
-  }, [e, t, r]);
-  return /* @__PURE__ */ p(
-    s,
+  }, [e, t, r, u, o]);
+  return /* @__PURE__ */ i(
+    a,
     {
       "data-testid": "stepper-next-button",
-      className: `${i.stepperButton} ${t ? i.stepperButtonLoading : ""} ${a ?? ""}`,
-      onClick: u,
-      disabled: t || n,
-      fullWidth: d,
-      trailingIcon: l,
+      className: `${f.stepperButton} ${t ? f.stepperButtonLoading : ""} ${m ?? ""}`,
+      onClick: n,
+      disabled: t || s,
+      fullWidth: b,
+      trailingIcon: B,
+      leadingIcon: u,
       type: e ? "submit" : "button",
-      buttonSize: m,
-      children: o
+      buttonSize: d,
+      children: p
     }
   );
 };
 export {
-  x as StepperNextButton,
-  $ as StepperPreviousButton
+  N as StepperNextButton,
+  y as StepperPreviousButton
 };

package/dist/components/Stepper/components/StepperHeader.d.ts

@@ -1,9 +1,15 @@
 import { StepperBaseProps } from '../stepperTypes';
 
 /**
- * A component that displays the header of the stepper, including the step indicator (see {@link StepperIndicator}) and title.
+ * A component that displays the specified type of stepper header based on the provided type prop.
+ *
+ * If the type is 'default', it displays a stepper indicator with dots and the title of the current step.
+ * If the type is 'description', it shows the current step out of total steps and the title of the current step.
+ *
+ * @param stepperType - The type of the stepper indicator.
  * @param steps - An array of steps for the stepper.
  * @param currentStep - The current step index.
+ * @param customTotalSteps - A custom total number of steps to display in the stepper header.
  * @returns
  */
-export declare const StepperHeader: ({ steps, currentStep }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperHeader: ({ stepperType, steps, currentStep, customTotalSteps, }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/components/StepperHeader.js

@@ -1,34 +1,80 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { G as o } from "../../../index.es-DsGuBR0Z.js";
-import { T as p } from "../../../index.es-DCSgIiJH.js";
-import { s as i } from "../../../stepper.module-HuqmDJPj.js";
-import { StepperIndicator as s } from "./StepperIndicator.js";
-const f = ({ steps: e, currentStep: r }) => /* @__PURE__ */ a(
-  o,
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { G as s } from "../../../index.es-C1SajYlm.js";
+import { T as n } from "../../../index.es-NEYPxnlS.js";
+import { s as t } from "../../../stepper.module-c-CWmpkt.js";
+import { StepperIndicator as o } from "./StepperIndicator.js";
+const y = ({
+  stepperType: d,
+  steps: e,
+  currentStep: i,
+  customTotalSteps: p
+}) => d === "description" ? /* @__PURE__ */ a(
+  s,
+  {
+    "data-testid": "description-stepper-header",
+    className: t.stepperDescriptionContainer,
+    secondaryAlign: "stretch",
+    gap: "none",
+    fullWidth: !0,
+    children: [
+      /* @__PURE__ */ r(
+        s,
+        {
+          className: t.stepperDescriptionProgress,
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          children: /* @__PURE__ */ a(n, { "data-testid": "description-stepper-header-progress", level: 2, children: [
+            e[i].step,
+            "/",
+            p ?? e.length
+          ] })
+        }
+      ),
+      /* @__PURE__ */ r(
+        s,
+        {
+          className: t.stepperDescriptionText,
+          primaryAlign: "flex-start",
+          secondaryAlign: "center",
+          children: /* @__PURE__ */ r(
+            n,
+            {
+              "data-testid": "description-stepper-header-description",
+              themeColor: "secondary-font",
+              level: 2,
+              children: e[i].title ?? ""
+            }
+          )
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ a(
+  s,
   {
     "data-testid": "stepper-header",
-    className: i.stepperContainer,
+    className: t.stepperContainer,
     gap: "dense",
     primaryAlign: "center",
     secondaryAlign: "center",
     direction: "vertical",
     fullWidth: !0,
     children: [
-      /* @__PURE__ */ t(s, { steps: e, currentStep: r }),
-      /* @__PURE__ */ t(
-        p,
+      /* @__PURE__ */ r(o, { steps: e, currentStep: i }),
+      /* @__PURE__ */ r(
+        n,
         {
           "data-testid": "stepper-header-description",
           level: 2,
           bold: !0,
           tag: "div",
-          className: i.stepperTitle,
-          children: e[r]?.title
+          className: t.stepperTitle,
+          children: e[i]?.title
         }
       )
     ]
   }
 );
 export {
-  f as StepperHeader
+  y as StepperHeader
 };

package/dist/components/Stepper/components/StepperIndicator.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { G as p } from "../../../index.es-DsGuBR0Z.js";
-import { s as e } from "../../../stepper.module-HuqmDJPj.js";
+import { G as p } from "../../../index.es-C1SajYlm.js";
+import { s as e } from "../../../stepper.module-c-CWmpkt.js";
 const m = ({ steps: a, currentStep: i }) => /* @__PURE__ */ r(p, { gap: "dense", "data-testid": "stepper-indicator", children: a.map((t, o) => /* @__PURE__ */ r(
   "div",
   {

package/dist/components/Stepper/stepperTypes.d.ts

@@ -15,17 +15,21 @@ export type Step = {
      */
     name: string;
     /**
-     * The step number, starting from 0.
+     * The step number that is displayed when the stepper type is 'description'.
+     * @remarks This property is not visible within the stepper type 'default' and only serves as an identifier for the step.
      */
     step: number;
     /**
-     * The title of the step showing in the Stepper.
+     * The title/description of the step showing in the Stepper.
      */
-    title: string;
+    title: string | ReactNode;
     /**
      * Whether the step is optional or not showing a different design.
+     *
+     * @remarks There's no adjusted display logic for optional steps when using the description type stepper.
+     * In that case, use the title prop / description to indicate that the step is optional.
      */
-    optional: boolean;
+    optional?: boolean;
     /**
      * The props for the next button, including onClick, label, className and disabled state. {@link StepperButtonProps}
      */
@@ -40,6 +44,8 @@ export type Step = {
  * @param {boolean} disabled - Whether the button is disabled or not.
  * @param {() => void} onClick - The function to be called when the button is clicked.
  * @param {string | ReactNode} label - The label of the button.
+ * @param {string | ReactNode} leadingIcon - A custom leading icon for the button. Takes precedence over showArrowIcon.
+ * @param {string | ReactNode} trailingIcon - A custom trailing icon for the button. Takes precedence over showArrowIcon.
  * @param {boolean} showArrowIcon - Whether to show a leading/trailing arrow icon for the button.
  * @param {string} buttonSize - The size of the button, defaults to 'themeDefault'.
  * @param {boolean} fullWidth - Whether the button should take the full width of its container. *
@@ -57,12 +63,21 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
      * Whether to show a leading/trailing arrow icon for the button.
      */
     showArrowIcon?: boolean;
+    /**
+     * A custom leading icon for the button. Takes precedence over showArrowIcon.
+     */
+    leadingIcon?: string | ReactNode;
+    /**
+     * A custom trailing icon for the button. Takes precedence over showArrowIcon.
+     */
+    trailingIcon?: string | ReactNode;
     /**
      * Property adapted from Element library
      */
     buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
+ * @param {string} stepperType - The type of the stepper indicator. Defaults to 'dots'.
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
  * @param {boolean} isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
@@ -71,10 +86,23 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
  * @param {boolean} showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper.
  */
 export type StepperProps = {
+    /**
+     * The display-type of the Stepper.
+     * - `default` – Shows a row of dots for each step.
+     * - `description` – Displays progress numerically (n/n) and the title next to it.
+     *
+     * @default default
+     */
+    stepperType?: 'default' | 'description';
     /**
      * An array of steps for the stepper.
      */
     steps: Step[];
+    /**
+     * A custom total number of steps to display in the stepper header.
+     * @remarks This can be used to show a different total number of steps than the length of the steps array.
+     */
+    customTotalSteps?: number;
     /**
      * The current step index.
      */
@@ -101,7 +129,9 @@ export type StepperProps = {
     showPreviousButtonOnFirstStep?: boolean;
 };
 /**
+ * @param {string} type - The type of the stepper indicator.
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
+ * @param {number} customTotalSteps - A custom total number of steps to display in the stepper header.
  */
-export type StepperBaseProps = Pick<StepperProps, 'steps' | 'currentStep'>;
+export type StepperBaseProps = Pick<StepperProps, 'stepperType' | 'steps' | 'currentStep' | 'customTotalSteps'>;

package/dist/components/VerticalDivider/VerticalDivider.test.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a as r } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r } from "../../react.esm-BbMrgZCM.js";
 import { VerticalDivider as s } from "./VerticalDivider.js";
 import { d as o, t as l, g as i } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 o("VerticalDivider Test", () => {

package/dist/correct-is-regexp-logic-BBlm4UpN.js

@@ -0,0 +1,44 @@
+import { r as g, e as v, f as R } from "./index-_ck2BRrZ.js";
+var s, c;
+function x() {
+  if (c) return s;
+  c = 1;
+  var e = /* @__PURE__ */ v(), a = /* @__PURE__ */ R(), r = /* @__PURE__ */ g(), n = r("match");
+  return s = function(o) {
+    var t;
+    return e(o) && ((t = o[n]) !== void 0 ? !!t : a(o) === "RegExp");
+  }, s;
+}
+var u, p;
+function h() {
+  if (p) return u;
+  p = 1;
+  var e = /* @__PURE__ */ x(), a = TypeError;
+  return u = function(r) {
+    if (e(r))
+      throw new a("The method doesn't accept regular expressions");
+    return r;
+  }, u;
+}
+var i, f;
+function q() {
+  if (f) return i;
+  f = 1;
+  var e = /* @__PURE__ */ g(), a = e("match");
+  return i = function(r) {
+    var n = /./;
+    try {
+      "/./"[r](n);
+    } catch {
+      try {
+        return n[a] = !1, "/./"[r](n);
+      } catch {
+      }
+    }
+    return !1;
+  }, i;
+}
+export {
+  h as a,
+  q as r
+};

package/dist/{defineProperty-CmuOyxyf.js → defineProperty-K2c2Cqi7.js}

@@ -1,6 +1,6 @@
 import { g as a } from "./_commonjsHelpers-BkfeUUK-.js";
-import { W as Hr, k as Nr, n as Ur, l as f, m as zr, h as Xr, X as Mr, z as Yr, U as Wr, T as P, A as d, v as Zr, Y as Jr, Z as Lr, j as Qr, $ as Vr, u as re, a0 as ee, a1 as te, a2 as kr } from "./index-Cpb-8cAN.js";
-import { c as ie, d as oe, f as ne, e as ae, _ as y, g as ue } from "./es.string.iterator-DrqCBub-.js";
+import { W as Hr, D as Nr, i as Ur, j as f, s as zr, t as Xr, X as Ar, y as Yr, U as Wr, T as P, z as d, u as Zr, Y as Jr, Z as Lr, C as Qr, $ as Vr, q as re, a0 as ee, a1 as te, a2 as Br } from "./index-_ck2BRrZ.js";
+import { c as ie, d as oe, f as ne, e as ae, _ as y, g as ue } from "./es.string.iterator-5IsLbO9h.js";
 var O, Q;
 function se() {
   return Q || (Q = 1, O = /* @__PURE__ */ Hr()), O;
@@ -42,17 +42,17 @@ function ye() {
   var r = /* @__PURE__ */ ce();
   return b = r, b;
 }
-var m, or;
+var D, or;
 function Pe() {
-  return or || (or = 1, m = /* @__PURE__ */ ye()), m;
+  return or || (or = 1, D = /* @__PURE__ */ ye()), D;
 }
 var de = Pe();
 const ut = /* @__PURE__ */ a(de);
-var D = { exports: {} }, nr = {}, ar;
+var m = { exports: {} }, nr = {}, ar;
 function qe() {
   if (ar) return nr;
   ar = 1;
-  var r = /* @__PURE__ */ f(), e = /* @__PURE__ */ Yr(), t = /* @__PURE__ */ Wr(), i = Mr().f, o = /* @__PURE__ */ P(), n = !o || e(function() {
+  var r = /* @__PURE__ */ f(), e = /* @__PURE__ */ Yr(), t = /* @__PURE__ */ Wr(), i = Ar().f, o = /* @__PURE__ */ P(), n = !o || e(function() {
     i(1);
   });
   return r({ target: "Object", stat: !0, forced: n, sham: !o }, {
@@ -63,12 +63,12 @@ function qe() {
 }
 var ur;
 function Oe() {
-  if (ur) return D.exports;
+  if (ur) return m.exports;
   ur = 1, qe();
-  var r = /* @__PURE__ */ d(), e = r.Object, t = D.exports = function(o, n) {
+  var r = /* @__PURE__ */ d(), e = r.Object, t = m.exports = function(o, n) {
     return e.getOwnPropertyDescriptor(o, n);
   };
-  return e.getOwnPropertyDescriptor.sham && (t.sham = !0), D.exports;
+  return e.getOwnPropertyDescriptor.sham && (t.sham = !0), m.exports;
 }
 var w, sr;
 function $e() {
@@ -84,7 +84,7 @@ function le() {
 var be = le();
 const st = /* @__PURE__ */ a(be);
 var fr = {}, _, vr;
-function me() {
+function De() {
   if (vr) return _;
   vr = 1;
   var r = /* @__PURE__ */ Jr(), e = /* @__PURE__ */ Zr(), t = /* @__PURE__ */ Lr(), i = /* @__PURE__ */ Vr(), o = /* @__PURE__ */ Qr(), n = e([].concat);
@@ -94,10 +94,10 @@ function me() {
   }, _;
 }
 var cr;
-function De() {
+function me() {
   if (cr) return fr;
   cr = 1;
-  var r = /* @__PURE__ */ f(), e = /* @__PURE__ */ P(), t = /* @__PURE__ */ me(), i = /* @__PURE__ */ Wr(), o = /* @__PURE__ */ Mr(), n = /* @__PURE__ */ re();
+  var r = /* @__PURE__ */ f(), e = /* @__PURE__ */ P(), t = /* @__PURE__ */ De(), i = /* @__PURE__ */ Wr(), o = /* @__PURE__ */ Ar(), n = /* @__PURE__ */ re();
   return r({ target: "Object", stat: !0, sham: !e }, {
     getOwnPropertyDescriptors: function(s) {
       for (var u = i(s), c = o.f, Y = t(u), Z = {}, J = 0, L, q; Y.length > J; )
@@ -109,7 +109,7 @@ function De() {
 var g, yr;
 function we() {
   if (yr) return g;
-  yr = 1, De();
+  yr = 1, me();
   var r = /* @__PURE__ */ d();
   return g = r.Object.getOwnPropertyDescriptors, g;
 }
@@ -157,14 +157,14 @@ function Se() {
 }
 var xe = Se();
 const ft = /* @__PURE__ */ a(xe);
-var I = { exports: {} }, mr = {}, Dr;
+var I = { exports: {} }, Dr = {}, mr;
 function Ie() {
-  if (Dr) return mr;
-  Dr = 1;
+  if (mr) return Dr;
+  mr = 1;
   var r = /* @__PURE__ */ f(), e = /* @__PURE__ */ P(), t = te().f;
   return r({ target: "Object", stat: !0, forced: Object.defineProperty !== t, sham: !e }, {
     defineProperty: t
-  }), mr;
+  }), Dr;
 }
 var wr;
 function Ge() {
@@ -176,7 +176,7 @@ function Ge() {
   return e.defineProperty.sham && (t.sham = !0), I.exports;
 }
 var G, hr;
-function Br() {
+function kr() {
   if (hr) return G;
   hr = 1;
   var r = /* @__PURE__ */ Ge();
@@ -184,61 +184,61 @@ function Br() {
 }
 var T, _r;
 function Te() {
-  return _r || (_r = 1, T = /* @__PURE__ */ Br()), T;
+  return _r || (_r = 1, T = /* @__PURE__ */ kr()), T;
 }
 var Fe = Te();
 const vt = /* @__PURE__ */ a(Fe);
 var F, gr;
-function Ke() {
+function Ce() {
   if (gr) return F;
   gr = 1;
-  var r = /* @__PURE__ */ Br();
+  var r = /* @__PURE__ */ kr();
   return F = r, F;
 }
-var K, Rr;
-function Ae() {
-  if (Rr) return K;
+var C, Rr;
+function Ke() {
+  if (Rr) return C;
   Rr = 1;
-  var r = /* @__PURE__ */ Ke();
-  return K = r, K;
+  var r = /* @__PURE__ */ Ce();
+  return C = r, C;
 }
-var A, jr;
-function Ce() {
-  return jr || (jr = 1, A = /* @__PURE__ */ Ae()), A;
+var K, jr;
+function Me() {
+  return jr || (jr = 1, K = /* @__PURE__ */ Ke()), K;
 }
-var Me = /* @__PURE__ */ Ce();
-const We = /* @__PURE__ */ a(Me);
-var C, Er;
-function ke() {
-  if (Er) return C;
+var Ae = /* @__PURE__ */ Me();
+const We = /* @__PURE__ */ a(Ae);
+var M, Er;
+function Be() {
+  if (Er) return M;
   Er = 1, ie(), oe(), ne();
-  var r = /* @__PURE__ */ kr();
-  return C = r.f("iterator"), C;
+  var r = /* @__PURE__ */ Br();
+  return M = r.f("iterator"), M;
 }
-var M, Sr;
-function Be() {
-  if (Sr) return M;
+var A, Sr;
+function ke() {
+  if (Sr) return A;
   Sr = 1;
-  var r = /* @__PURE__ */ ke();
-  return ae(), M = r, M;
+  var r = /* @__PURE__ */ Be();
+  return ae(), A = r, A;
 }
 var W, xr;
 function He() {
   if (xr) return W;
   xr = 1;
-  var r = /* @__PURE__ */ Be();
+  var r = /* @__PURE__ */ ke();
   return W = r, W;
 }
-var k, Ir;
+var B, Ir;
 function Ne() {
-  if (Ir) return k;
+  if (Ir) return B;
   Ir = 1;
   var r = /* @__PURE__ */ He();
-  return k = r, k;
+  return B = r, B;
 }
-var B, Gr;
+var k, Gr;
 function Ue() {
-  return Gr || (Gr = 1, B = /* @__PURE__ */ Ne()), B;
+  return Gr || (Gr = 1, k = /* @__PURE__ */ Ne()), k;
 }
 var ze = /* @__PURE__ */ Ue();
 const Xe = /* @__PURE__ */ a(ze);
@@ -254,7 +254,7 @@ var H, Tr;
 function Ye() {
   if (Tr) return H;
   Tr = 1, ue();
-  var r = /* @__PURE__ */ kr();
+  var r = /* @__PURE__ */ Br();
   return H = r.f("toPrimitive"), H;
 }
 var N, Fr;
@@ -264,23 +264,23 @@ function Ze() {
   var r = /* @__PURE__ */ Ye();
   return N = r, N;
 }
-var U, Kr;
+var U, Cr;
 function Je() {
-  if (Kr) return U;
-  Kr = 1;
+  if (Cr) return U;
+  Cr = 1;
   var r = /* @__PURE__ */ Ze();
   return U = r, U;
 }
-var z, Ar;
+var z, Kr;
 function Le() {
-  if (Ar) return z;
-  Ar = 1;
+  if (Kr) return z;
+  Kr = 1;
   var r = /* @__PURE__ */ Je();
   return z = r, z;
 }
-var X, Cr;
+var X, Mr;
 function Qe() {
-  return Cr || (Cr = 1, X = /* @__PURE__ */ Le()), X;
+  return Mr || (Mr = 1, X = /* @__PURE__ */ Le()), X;
 }
 var Ve = /* @__PURE__ */ Qe();
 const rt = /* @__PURE__ */ a(Ve);