@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.js

@@ -1,200 +1,123 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { memo as H } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import { stepIndicatorVariants as v, stepLabelVariants as C, stepDescriptionVariants as k, stepContentVariants as g, stepVariants as I } from "../../Stepper.variants.js";
-import { getStepAriaLabel as x } from "../../utils/index.js";
-import { StepConnector as w } from "../StepConnector/StepConnector.js";
-import { StepIndicatorContent as S } from "../StepIndicatorContent/StepIndicatorContent.js";
-import { useStepItemLogic as y } from "../../hooks/useStepItemLogic.js";
-const K = ({
-  classNames: r,
-  clickable: D,
-  icons: m,
-  index: c,
-  isLast: p,
-  showConnector: b,
-  size: a,
-  step: i,
-  variant: t,
-  onClick: V
-}) => {
-  const {
-    isClickable: l,
-    isDisabled: h,
-    LabelComponent: s,
-    status: e,
-    handleClick: u,
-    handleKeyDown: f
-  } = y({ clickable: D, step: i, onClick: V });
-  return t === "horizontal" ? /* @__PURE__ */ d("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ d(
-      "div",
-      {
-        className: o(
-          I({
-            orientation: "horizontal",
-            variant: t,
-            clickable: l
-          }),
-          r?.stepWrapper
-        ),
-        role: l ? "button" : void 0,
-        tabIndex: l ? 0 : void 0,
-        onClick: u,
-        onKeyDown: f,
-        "aria-current": e === "active" ? "step" : void 0,
-        ...h && { "aria-disabled": !0 },
-        "aria-label": x(c, i.label, e),
-        children: [
-          /* @__PURE__ */ n(
-            "div",
-            {
-              className: o(
-                v({ status: e, size: a }),
-                r?.indicator
-              ),
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ n(
-                S,
-                {
-                  status: e,
-                  index: c,
-                  size: a,
-                  icons: m,
-                  className: r?.indicatorContent
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: o(
-                g({ variant: t }),
-                r?.content
-              ),
-              children: [
-                i.label && /* @__PURE__ */ n(
-                  s,
-                  {
-                    className: o(
-                      C({ status: e, size: a, variant: t }),
-                      r?.label
-                    ),
-                    children: i.label
-                  }
-                ),
-                i.description && /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: o(
-                      k({ status: e, size: a, variant: t }),
-                      r?.description
-                    ),
-                    children: i.description
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    !p && b && /* @__PURE__ */ n(
-      "div",
-      {
-        className: o(
-          "h-0.5 w-7.5 mx-2 transition-colors duration-200",
-          e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400",
-          r?.connector
-        ),
-        role: "presentation",
-        "aria-hidden": "true"
-      }
-    )
-  ] }) : /* @__PURE__ */ d("div", { className: "flex flex-1 items-start", children: [
-    /* @__PURE__ */ d(
-      "div",
-      {
-        className: o(
-          I({
-            orientation: "horizontal",
-            variant: t,
-            clickable: l
-          }),
-          r?.stepWrapper
-        ),
-        role: l ? "button" : void 0,
-        tabIndex: l ? 0 : void 0,
-        onClick: u,
-        onKeyDown: f,
-        "aria-current": e === "active" ? "step" : void 0,
-        ...h && { "aria-disabled": !0 },
-        "aria-label": x(c, i.label, e),
-        children: [
-          /* @__PURE__ */ n(
-            "div",
-            {
-              className: o(
-                v({ status: e, size: a }),
-                r?.indicator
-              ),
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ n(
-                S,
-                {
-                  status: e,
-                  index: c,
-                  size: a,
-                  icons: m,
-                  className: r?.indicatorContent
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: o(g({ variant: t }), r?.content),
-              children: [
-                i.label && /* @__PURE__ */ n(
-                  s,
-                  {
-                    className: o(
-                      C({ status: e, size: a, variant: t }),
-                      r?.label
-                    ),
-                    children: i.label
-                  }
-                ),
-                i.description && /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: o(
-                      k({ status: e, size: a, variant: t }),
-                      r?.description
-                    ),
-                    children: i.description
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    !p && b && /* @__PURE__ */ n(
-      w,
-      {
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { t as v } from "../../../../StepIndicatorContent-D5z1Ziqg.js";
+import { useStepItemLogic as w } from "../../hooks/useStepItemLogic.js";
+import { stepContentVariants as C, stepDescriptionVariants as k, stepIndicatorVariants as g, stepLabelVariants as I, stepVariants as x } from "../../Stepper.variants.js";
+import { getStepAriaLabel as S } from "../../utils/index.js";
+import { StepConnector as y } from "../StepConnector/StepConnector.js";
+import { memo as K } from "react";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+var L = ({ classNames: r, clickable: D, icons: m, index: c, isLast: p, showConnector: b, size: n, step: i, variant: o, onClick: V }) => {
+  const { isClickable: l, isDisabled: h, LabelComponent: s, status: e, handleClick: u, handleKeyDown: f } = w({
+    clickable: D,
+    step: i,
+    onClick: V
+  });
+  return o === "horizontal" ? /* @__PURE__ */ d("div", {
+    className: "flex items-center",
+    children: [/* @__PURE__ */ d("div", {
+      className: t(x({
         orientation: "horizontal",
-        status: e,
-        size: a,
-        variant: t,
-        className: o("mt-6.5", r?.connector)
-      }
-    )
-  ] });
-}, F = H(K);
+        variant: o,
+        clickable: l
+      }), r?.stepWrapper),
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
+      onClick: u,
+      onKeyDown: f,
+      "aria-current": e === "active" ? "step" : void 0,
+      ...h && { "aria-disabled": !0 },
+      "aria-label": S(c, i.label, e),
+      children: [/* @__PURE__ */ a("div", {
+        className: t(g({
+          status: e,
+          size: n
+        }), r?.indicator),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ a(v, {
+          status: e,
+          index: c,
+          size: n,
+          icons: m,
+          className: r?.indicatorContent
+        })
+      }), /* @__PURE__ */ d("div", {
+        className: t(C({ variant: o }), r?.content),
+        children: [i.label && /* @__PURE__ */ a(s, {
+          className: t(I({
+            status: e,
+            size: n,
+            variant: o
+          }), r?.label),
+          children: i.label
+        }), i.description && /* @__PURE__ */ a("span", {
+          className: t(k({
+            status: e,
+            size: n,
+            variant: o
+          }), r?.description),
+          children: i.description
+        })]
+      })]
+    }), !p && b && /* @__PURE__ */ a("div", {
+      className: t("h-0.5 w-7.5 mx-2 transition-colors duration-200", e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400", r?.connector),
+      role: "presentation",
+      "aria-hidden": "true"
+    })]
+  }) : /* @__PURE__ */ d("div", {
+    className: "flex flex-1 items-start",
+    children: [/* @__PURE__ */ d("div", {
+      className: t(x({
+        orientation: "horizontal",
+        variant: o,
+        clickable: l
+      }), r?.stepWrapper),
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
+      onClick: u,
+      onKeyDown: f,
+      "aria-current": e === "active" ? "step" : void 0,
+      ...h && { "aria-disabled": !0 },
+      "aria-label": S(c, i.label, e),
+      children: [/* @__PURE__ */ a("div", {
+        className: t(g({
+          status: e,
+          size: n
+        }), r?.indicator),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ a(v, {
+          status: e,
+          index: c,
+          size: n,
+          icons: m,
+          className: r?.indicatorContent
+        })
+      }), /* @__PURE__ */ d("div", {
+        className: t(C({ variant: o }), r?.content),
+        children: [i.label && /* @__PURE__ */ a(s, {
+          className: t(I({
+            status: e,
+            size: n,
+            variant: o
+          }), r?.label),
+          children: i.label
+        }), i.description && /* @__PURE__ */ a("span", {
+          className: t(k({
+            status: e,
+            size: n,
+            variant: o
+          }), r?.description),
+          children: i.description
+        })]
+      })]
+    }), !p && b && /* @__PURE__ */ a(y, {
+      orientation: "horizontal",
+      status: e,
+      size: n,
+      variant: o,
+      className: t("mt-6.5", r?.connector)
+    })]
+  });
+}, F = K(L);
 export {
   F as HorizontalStepItem
 };

package/dist/components/Stepper/components/StepConnector/StepConnector.js

@@ -1,29 +1,17 @@
-import { jsx as m } from "react/jsx-runtime";
+import { t as m } from "../../../../utils-DHuiYnx1.js";
+import { stepConnectorVariants as n } from "../../Stepper.variants.js";
 import { memo as i } from "react";
-import { cn as p } from "../../../../utils/index.js";
-import { stepConnectorVariants as s } from "../../Stepper.variants.js";
-const a = ({
-  className: o,
-  orientation: r,
-  size: t,
-  status: e,
-  variant: n
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: p(
-      s({
-        orientation: r,
-        size: t,
-        status: e,
-        variant: n
-      }),
-      o
-    ),
-    role: "presentation",
-    "aria-hidden": "true"
-  }
-), l = i(a);
+import { jsx as p } from "react/jsx-runtime";
+var s = ({ className: r, orientation: o, size: t, status: e, variant: a }) => /* @__PURE__ */ p("div", {
+  className: m(n({
+    orientation: o,
+    size: t,
+    status: e,
+    variant: a
+  }), r),
+  role: "presentation",
+  "aria-hidden": "true"
+}), C = i(s);
 export {
-  l as StepConnector
+  C as StepConnector
 };

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.js

@@ -1,23 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { cn as d } from "../../../../utils/index.js";
-import { CHECK_ICON_SIZE_MAP as m, ICON_SIZE_MAP as p } from "../../constants/index.js";
-import { c as f } from "../../../../createLucideIcon-CP-mMPfa.js";
-import { ExclamationIcon as h } from "../../../../assets/icons/components/Exclamation.js";
-const a = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], I = f("check", a), u = ({
-  className: r,
-  icons: t,
-  index: i,
-  size: o,
-  status: n
-}) => n === "completed" ? t?.completed ? /* @__PURE__ */ e("span", { className: r, children: t.completed }) : /* @__PURE__ */ e(
-  I,
-  {
-    className: d(m[o], r),
-    strokeWidth: 2.5,
-    "aria-hidden": "true"
-  }
-) : n === "error" ? t?.error ? /* @__PURE__ */ e("span", { className: r, children: t.error }) : /* @__PURE__ */ e(h, { size: p[o], className: r }) : /* @__PURE__ */ e("span", { className: r, "aria-hidden": "true", children: i + 1 }), x = c(u);
+import { t as o } from "../../../../StepIndicatorContent-D5z1Ziqg.js";
 export {
-  x as StepIndicatorContent
+  o as StepIndicatorContent
 };

package/dist/components/Stepper/components/StepItem/StepItem.js

@@ -1,8 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import { memo as r } from "react";
 import { HorizontalStepItem as e } from "../HorizontalStepItem/HorizontalStepItem.js";
-import { VerticalStepItem as m } from "../VerticalStepItem/VerticalStepItem.js";
-const i = (t) => t.orientation === "horizontal" || t.variant === "horizontal" ? /* @__PURE__ */ o(e, { ...t }) : /* @__PURE__ */ o(m, { ...t }), I = r(i);
+import { VerticalStepItem as o } from "../VerticalStepItem/VerticalStepItem.js";
+import { memo as m } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = (t) => t.orientation === "horizontal" || t.variant === "horizontal" ? /* @__PURE__ */ r(e, { ...t }) : /* @__PURE__ */ r(o, { ...t }), I = m(i);
 export {
   I as StepItem
 };

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.js

@@ -1,114 +1,72 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { memo as V } from "react";
-import { cn as a } from "../../../../utils/index.js";
-import { stepIndicatorVariants as I, stepLabelVariants as S, stepDescriptionVariants as k, stepContentVariants as v, stepVariants as w } from "../../Stepper.variants.js";
-import { getStepAriaLabel as D } from "../../utils/index.js";
-import { StepConnector as L } from "../StepConnector/StepConnector.js";
-import { StepIndicatorContent as g } from "../StepIndicatorContent/StepIndicatorContent.js";
-import { useStepItemLogic as j } from "../../hooks/useStepItemLogic.js";
-const y = ({
-  classNames: e,
-  clickable: d,
-  icons: s,
-  index: p,
-  isLast: m,
-  showConnector: b,
-  size: i,
-  step: r,
-  variant: o,
-  onClick: f
-}) => {
-  const {
-    isClickable: l,
-    isDisabled: C,
-    LabelComponent: h,
-    status: t,
-    handleClick: u,
-    handleKeyDown: x
-  } = j({ clickable: d, step: r, onClick: f });
-  return /* @__PURE__ */ c("div", { className: o === "stacked" ? "flex flex-col items-center" : "flex flex-col", children: [
-    /* @__PURE__ */ c(
-      "div",
-      {
-        className: a(
-          w({
-            orientation: "vertical",
-            variant: o,
-            clickable: l
-          }),
-          e?.stepWrapper
-        ),
-        role: l ? "button" : void 0,
-        tabIndex: l ? 0 : void 0,
-        onClick: u,
-        onKeyDown: x,
-        "aria-current": t === "active" ? "step" : void 0,
-        ...C && { "aria-disabled": !0 },
-        "aria-label": D(p, r.label, t),
-        children: [
-          /* @__PURE__ */ n(
-            "div",
-            {
-              className: a(
-                I({ status: t, size: i }),
-                e?.indicator
-              ),
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ n(
-                g,
-                {
-                  status: t,
-                  index: p,
-                  size: i,
-                  icons: s,
-                  className: e?.indicatorContent
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ c(
-            "div",
-            {
-              className: a(v({ variant: o }), e?.content),
-              children: [
-                r.label && /* @__PURE__ */ n(
-                  h,
-                  {
-                    className: a(
-                      S({ status: t, size: i, variant: o }),
-                      e?.label
-                    ),
-                    children: r.label
-                  }
-                ),
-                r.description && /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: a(
-                      k({ status: t, size: i, variant: o }),
-                      e?.description
-                    ),
-                    children: r.description
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    !m && b && /* @__PURE__ */ n(
-      L,
-      {
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { t as x } from "../../../../StepIndicatorContent-D5z1Ziqg.js";
+import { useStepItemLogic as V } from "../../hooks/useStepItemLogic.js";
+import { stepContentVariants as I, stepDescriptionVariants as S, stepIndicatorVariants as k, stepLabelVariants as D, stepVariants as L } from "../../Stepper.variants.js";
+import { getStepAriaLabel as g } from "../../utils/index.js";
+import { StepConnector as j } from "../StepConnector/StepConnector.js";
+import { memo as w } from "react";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+var y = ({ classNames: e, clickable: m, icons: p, index: d, isLast: s, showConnector: b, size: o, step: r, variant: i, onClick: f }) => {
+  const { isClickable: l, isDisabled: h, LabelComponent: C, status: t, handleClick: u, handleKeyDown: v } = V({
+    clickable: m,
+    step: r,
+    onClick: f
+  });
+  return /* @__PURE__ */ c("div", {
+    className: i === "stacked" ? "flex flex-col items-center" : "flex flex-col",
+    children: [/* @__PURE__ */ c("div", {
+      className: a(L({
         orientation: "vertical",
-        status: t,
-        size: i,
-        variant: o,
-        className: e?.connector
-      }
-    )
-  ] });
-}, H = V(y);
+        variant: i,
+        clickable: l
+      }), e?.stepWrapper),
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
+      onClick: u,
+      onKeyDown: v,
+      "aria-current": t === "active" ? "step" : void 0,
+      ...h && { "aria-disabled": !0 },
+      "aria-label": g(d, r.label, t),
+      children: [/* @__PURE__ */ n("div", {
+        className: a(k({
+          status: t,
+          size: o
+        }), e?.indicator),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ n(x, {
+          status: t,
+          index: d,
+          size: o,
+          icons: p,
+          className: e?.indicatorContent
+        })
+      }), /* @__PURE__ */ c("div", {
+        className: a(I({ variant: i }), e?.content),
+        children: [r.label && /* @__PURE__ */ n(C, {
+          className: a(D({
+            status: t,
+            size: o,
+            variant: i
+          }), e?.label),
+          children: r.label
+        }), r.description && /* @__PURE__ */ n("span", {
+          className: a(S({
+            status: t,
+            size: o,
+            variant: i
+          }), e?.description),
+          children: r.description
+        })]
+      })]
+    }), !s && b && /* @__PURE__ */ n(j, {
+      orientation: "vertical",
+      status: t,
+      size: o,
+      variant: i,
+      className: e?.connector
+    })]
+  });
+}, G = w(y);
 export {
-  H as VerticalStepItem
+  G as VerticalStepItem
 };

package/dist/components/Stepper/constants/index.js

@@ -1,4 +1,4 @@
-const _ = {
+var _ = {
   sm: 12,
   md: 16,
   lg: 24

package/dist/components/Stepper/hooks/index.js

@@ -1,4 +1,4 @@
-import { useStepItemLogic as t } from "./useStepItemLogic.js";
+import { useStepItemLogic as o } from "./useStepItemLogic.js";
 export {
-  t as useStepItemLogic
+  o as useStepItemLogic
 };

package/dist/components/Stepper/hooks/useStepItemLogic.js

@@ -1,27 +1,24 @@
-import { S as b } from "../../../index-BvoZGpli.js";
+import { t as u } from "../../../dist-DXJSck4j.js";
 import { useCallback as s } from "react";
-function m({
-  clickable: c,
-  onClick: t,
-  step: n
-}) {
-  const i = n.status ?? "pending", l = n.disabled || i === "active", r = !!(n.onClick || t), o = c && !l && r, f = typeof n.label == "string" ? "span" : b, e = s(() => {
-    o && (n.onClick ? n.onClick() : t && t());
-  }, [o, n.onClick, t]), u = s(
-    (a) => {
-      o && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e());
-    },
-    [o, e]
-  );
+function d({ clickable: c, onClick: e, step: n }) {
+  const i = n.status ?? "pending", l = n.disabled || i === "active", r = !!(n.onClick || e), t = c && !l && r, f = typeof n.label == "string" ? "span" : u, o = s(() => {
+    t && (n.onClick ? n.onClick() : e && e());
+  }, [
+    t,
+    n.onClick,
+    e
+  ]);
   return {
-    isClickable: o,
+    isClickable: t,
     isDisabled: l,
     LabelComponent: f,
     status: i,
-    handleClick: e,
-    handleKeyDown: u
+    handleClick: o,
+    handleKeyDown: s((a) => {
+      t && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o());
+    }, [t, o])
   };
 }
 export {
-  m as useStepItemLogic
+  d as useStepItemLogic
 };

package/dist/components/Stepper/utils/index.js

@@ -1,13 +1,12 @@
-const c = {
+var n = {
   completed: ", completed",
   active: ", current",
   error: ", error",
   pending: ""
 };
-function p(t, e, r) {
-  const n = `Step ${t + 1}`, o = typeof e == "string" ? `: ${e}` : "";
-  return `${n}${o}${c[r]}`;
+function o(r, e, t) {
+  return `${`Step ${r + 1}`}${typeof e == "string" ? `: ${e}` : ""}${n[t]}`;
 }
 export {
-  p as getStepAriaLabel
+  o as getStepAriaLabel
 };