@konstructio/ui 0.1.2-alpha.54 → 0.1.2-alpha.55

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

@@ -1,92 +1,97 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { S as w } from "../../../../index-BvoZGpli.js";
-import { cn as t } from "../../../../utils/index.js";
-import { stepIndicatorVariants as C, stepLabelVariants as g, stepDescriptionVariants as y, stepContentVariants as $, stepVariants as S } from "../../Stepper.variants.js";
-import { StepConnector as K } from "../StepConnector/StepConnector.js";
-import { StepIndicatorContent as x } from "../StepIndicatorContent/StepIndicatorContent.js";
-const L = ({
-  classNames: o,
+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: h,
-  index: d,
-  isLast: f,
-  showConnector: u,
+  icons: m,
+  index: c,
+  isLast: p,
+  showConnector: b,
   size: a,
-  step: r,
-  variant: i,
-  onClick: b
+  step: i,
+  variant: t,
+  onClick: V
 }) => {
-  const e = r.status ?? "pending", I = i === "horizontal", p = r.disabled || e === "active", V = !!(r.onClick || b), l = D && !p && V, v = typeof r.label == "string" ? "span" : w, m = () => {
-    l && (r.onClick ? r.onClick() : b && b());
-  }, k = (s) => {
-    l && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), m());
-  };
-  return I ? /* @__PURE__ */ c("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ c(
+  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: t(
-          S({
+        className: o(
+          I({
             orientation: "horizontal",
-            variant: i,
+            variant: t,
             clickable: l
           }),
-          o?.stepWrapper
+          r?.stepWrapper
         ),
         role: l ? "button" : void 0,
         tabIndex: l ? 0 : void 0,
-        onClick: m,
-        onKeyDown: k,
+        onClick: u,
+        onKeyDown: f,
         "aria-current": e === "active" ? "step" : void 0,
-        "aria-disabled": p || void 0,
-        "aria-label": `Step ${d + 1}${typeof r.label == "string" ? `: ${r.label}` : ""}${e === "completed" ? ", completed" : e === "active" ? ", current" : e === "error" ? ", error" : ""}`,
+        ...h && { "aria-disabled": !0 },
+        "aria-label": x(c, i.label, e),
         children: [
           /* @__PURE__ */ n(
             "div",
             {
-              className: t(
-                C({ status: e, size: a }),
-                o?.indicator
+              className: o(
+                v({ status: e, size: a }),
+                r?.indicator
               ),
               "aria-hidden": "true",
               children: /* @__PURE__ */ n(
-                x,
+                S,
                 {
                   status: e,
-                  index: d,
+                  index: c,
                   size: a,
-                  icons: h,
-                  className: o?.indicatorContent
+                  icons: m,
+                  className: r?.indicatorContent
                 }
               )
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ d(
             "div",
             {
-              className: t(
-                $({ variant: i }),
-                o?.content
+              className: o(
+                g({ variant: t }),
+                r?.content
               ),
               children: [
-                r.label && /* @__PURE__ */ n(
-                  v,
+                i.label && /* @__PURE__ */ n(
+                  s,
                   {
-                    className: t(
-                      g({ status: e, size: a, variant: i }),
-                      o?.label
+                    className: o(
+                      C({ status: e, size: a, variant: t }),
+                      r?.label
                     ),
-                    children: r.label
+                    children: i.label
                   }
                 ),
-                r.description && /* @__PURE__ */ n(
+                i.description && /* @__PURE__ */ n(
                   "span",
                   {
-                    className: t(
-                      y({ status: e, size: a, variant: i }),
-                      o?.description
+                    className: o(
+                      k({ status: e, size: a, variant: t }),
+                      r?.description
                     ),
-                    children: r.description
+                    children: i.description
                   }
                 )
               ]
@@ -95,81 +100,81 @@ const L = ({
         ]
       }
     ),
-    !f && u && /* @__PURE__ */ n(
+    !p && b && /* @__PURE__ */ n(
       "div",
       {
-        className: t(
+        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",
-          o?.connector
+          r?.connector
         ),
         role: "presentation",
         "aria-hidden": "true"
       }
     )
-  ] }) : /* @__PURE__ */ c("div", { className: "flex flex-1 items-start", children: [
-    /* @__PURE__ */ c(
+  ] }) : /* @__PURE__ */ d("div", { className: "flex flex-1 items-start", children: [
+    /* @__PURE__ */ d(
       "div",
       {
-        className: t(
-          S({
+        className: o(
+          I({
             orientation: "horizontal",
-            variant: i,
+            variant: t,
             clickable: l
           }),
-          o?.stepWrapper
+          r?.stepWrapper
         ),
         role: l ? "button" : void 0,
         tabIndex: l ? 0 : void 0,
-        onClick: m,
-        onKeyDown: k,
+        onClick: u,
+        onKeyDown: f,
         "aria-current": e === "active" ? "step" : void 0,
-        "aria-disabled": p || void 0,
-        "aria-label": `Step ${d + 1}${typeof r.label == "string" ? `: ${r.label}` : ""}${e === "completed" ? ", completed" : e === "active" ? ", current" : e === "error" ? ", error" : ""}`,
+        ...h && { "aria-disabled": !0 },
+        "aria-label": x(c, i.label, e),
         children: [
           /* @__PURE__ */ n(
             "div",
             {
-              className: t(
-                C({ status: e, size: a }),
-                o?.indicator
+              className: o(
+                v({ status: e, size: a }),
+                r?.indicator
               ),
               "aria-hidden": "true",
               children: /* @__PURE__ */ n(
-                x,
+                S,
                 {
                   status: e,
-                  index: d,
+                  index: c,
                   size: a,
-                  icons: h,
-                  className: o?.indicatorContent
+                  icons: m,
+                  className: r?.indicatorContent
                 }
               )
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ d(
             "div",
             {
-              className: t($({ variant: i }), o?.content),
+              className: o(g({ variant: t }), r?.content),
               children: [
-                r.label && /* @__PURE__ */ n(
-                  v,
+                i.label && /* @__PURE__ */ n(
+                  s,
                   {
-                    className: t(
-                      g({ status: e, size: a, variant: i }),
-                      o?.label
+                    className: o(
+                      C({ status: e, size: a, variant: t }),
+                      r?.label
                     ),
-                    children: r.label
+                    children: i.label
                   }
                 ),
-                r.description && /* @__PURE__ */ n(
+                i.description && /* @__PURE__ */ n(
                   "span",
                   {
-                    className: t(
-                      y({ status: e, size: a, variant: i }),
-                      o?.description
+                    className: o(
+                      k({ status: e, size: a, variant: t }),
+                      r?.description
                     ),
-                    children: r.description
+                    children: i.description
                   }
                 )
               ]
@@ -178,18 +183,18 @@ const L = ({
         ]
       }
     ),
-    !f && u && /* @__PURE__ */ n(
-      K,
+    !p && b && /* @__PURE__ */ n(
+      w,
       {
         orientation: "horizontal",
         status: e,
         size: a,
-        variant: i,
-        className: t("mt-6.5", o?.connector)
+        variant: t,
+        className: o("mt-6.5", r?.connector)
       }
     )
   ] });
-};
+}, F = H(K);
 export {
-  L as HorizontalStepItem
+  F as HorizontalStepItem
 };

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { Props } from './StepConnector.types';
-export declare const StepConnector: FC<Props>;
+export declare const StepConnector: import('react').NamedExoticComponent<Props>;

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

@@ -1,17 +1,18 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as a } from "../../../../utils/index.js";
-import { stepConnectorVariants as m } from "../../Stepper.variants.js";
-const d = ({
+import { jsx as m } from "react/jsx-runtime";
+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__ */ i(
+}) => /* @__PURE__ */ m(
   "div",
   {
-    className: a(
-      m({
+    className: p(
+      s({
         orientation: r,
         size: t,
         status: e,
@@ -22,7 +23,7 @@ const d = ({
     role: "presentation",
     "aria-hidden": "true"
   }
-);
+), l = i(a);
 export {
-  d as StepConnector
+  l as StepConnector
 };

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { Props } from './StepIndicatorContent.types';
-export declare const StepIndicatorContent: FC<Props>;
+export declare const StepIndicatorContent: import('react').NamedExoticComponent<Props>;

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

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

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { Props } from './StepItem.types';
-export declare const StepItem: FC<Props>;
+export declare const StepItem: import('react').NamedExoticComponent<Props>;

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

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

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { Props } from './VerticalStepItem.types';
-export declare const VerticalStepItem: FC<Props>;
+export declare const VerticalStepItem: import('react').NamedExoticComponent<Props>;

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

@@ -1,89 +1,94 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { S as y } from "../../../../index-BvoZGpli.js";
-import { cn as l } from "../../../../utils/index.js";
-import { stepIndicatorVariants as S, stepLabelVariants as V, stepDescriptionVariants as D, stepContentVariants as w, stepVariants as I } from "../../Stepper.variants.js";
-import { StepConnector as $ } from "../StepConnector/StepConnector.js";
+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";
-const q = ({
-  classNames: r,
-  clickable: b,
-  icons: C,
+import { useStepItemLogic as j } from "../../hooks/useStepItemLogic.js";
+const y = ({
+  classNames: e,
+  clickable: d,
+  icons: s,
   index: p,
-  isLast: h,
-  showConnector: u,
-  size: o,
-  step: e,
-  variant: n,
-  onClick: c
+  isLast: m,
+  showConnector: b,
+  size: i,
+  step: r,
+  variant: o,
+  onClick: f
 }) => {
-  const t = e.status ?? "pending", m = e.disabled || t === "active", k = !!(e.onClick || c), i = b && !m && k, v = typeof e.label == "string" ? "span" : y, f = () => {
-    i && (e.onClick ? e.onClick() : c && c());
-  }, x = (d) => {
-    i && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), f());
-  };
-  return /* @__PURE__ */ s("div", { className: n === "stacked" ? "flex flex-col items-center" : "flex flex-col", children: [
-    /* @__PURE__ */ s(
+  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: l(
-          I({
+        className: a(
+          w({
             orientation: "vertical",
-            variant: n,
-            clickable: i
+            variant: o,
+            clickable: l
           }),
-          r?.stepWrapper
+          e?.stepWrapper
         ),
-        role: i ? "button" : void 0,
-        tabIndex: i ? 0 : void 0,
-        onClick: f,
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: u,
         onKeyDown: x,
         "aria-current": t === "active" ? "step" : void 0,
-        "aria-disabled": m || void 0,
-        "aria-label": `Step ${p + 1}${typeof e.label == "string" ? `: ${e.label}` : ""}${t === "completed" ? ", completed" : t === "active" ? ", current" : t === "error" ? ", error" : ""}`,
+        ...C && { "aria-disabled": !0 },
+        "aria-label": D(p, r.label, t),
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: l(
-                S({ status: t, size: o }),
-                r?.indicator
+              className: a(
+                I({ status: t, size: i }),
+                e?.indicator
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ a(
+              children: /* @__PURE__ */ n(
                 g,
                 {
                   status: t,
                   index: p,
-                  size: o,
-                  icons: C,
-                  className: r?.indicatorContent
+                  size: i,
+                  icons: s,
+                  className: e?.indicatorContent
                 }
               )
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "div",
             {
-              className: l(w({ variant: n }), r?.content),
+              className: a(v({ variant: o }), e?.content),
               children: [
-                e.label && /* @__PURE__ */ a(
-                  v,
+                r.label && /* @__PURE__ */ n(
+                  h,
                   {
-                    className: l(
-                      V({ status: t, size: o, variant: n }),
-                      r?.label
+                    className: a(
+                      S({ status: t, size: i, variant: o }),
+                      e?.label
                     ),
-                    children: e.label
+                    children: r.label
                   }
                 ),
-                e.description && /* @__PURE__ */ a(
+                r.description && /* @__PURE__ */ n(
                   "span",
                   {
-                    className: l(
-                      D({ status: t, size: o, variant: n }),
-                      r?.description
+                    className: a(
+                      k({ status: t, size: i, variant: o }),
+                      e?.description
                     ),
-                    children: e.description
+                    children: r.description
                   }
                 )
               ]
@@ -92,18 +97,18 @@ const q = ({
         ]
       }
     ),
-    !h && u && /* @__PURE__ */ a(
-      $,
+    !m && b && /* @__PURE__ */ n(
+      L,
       {
         orientation: "vertical",
         status: t,
-        size: o,
-        variant: n,
-        className: r?.connector
+        size: i,
+        variant: o,
+        className: e?.connector
       }
     )
   ] });
-};
+}, H = V(y);
 export {
-  q as VerticalStepItem
+  H as VerticalStepItem
 };

package/dist/components/Stepper/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { StepSize } from '../Stepper.types';
+export declare const ICON_SIZE_MAP: Record<StepSize, number>;
+export declare const CHECK_ICON_SIZE_MAP: Record<StepSize, string>;

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

@@ -0,0 +1,13 @@
+const _ = {
+  sm: 12,
+  md: 16,
+  lg: 24
+}, m = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-6 w-6"
+};
+export {
+  m as CHECK_ICON_SIZE_MAP,
+  _ as ICON_SIZE_MAP
+};

package/dist/components/Stepper/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useStepItemLogic } from './useStepItemLogic';

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

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

package/dist/components/Stepper/hooks/useStepItemLogic.d.ts

@@ -0,0 +1,2 @@
+import { UseStepItemLogicProps, UseStepItemLogicReturn } from './useStepItemLogic.types';
+export declare function useStepItemLogic({ clickable, onClick, step, }: UseStepItemLogicProps): UseStepItemLogicReturn;

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

@@ -0,0 +1,27 @@
+import { S as b } from "../../../index-BvoZGpli.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]
+  );
+  return {
+    isClickable: o,
+    isDisabled: l,
+    LabelComponent: f,
+    status: i,
+    handleClick: e,
+    handleKeyDown: u
+  };
+}
+export {
+  m as useStepItemLogic
+};