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

package/dist/components/Spinner/Spinner.variants.js

@@ -1,27 +1,53 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const t = a(["h-full", "flex", "justify-center", "items-center", "flex-col", "gap-6", "animate-in", "fade-in-80"], {
-  variants: {
-    size: {
-      sm: [],
-      md: [],
-      lg: []
+const t = a(
+  [
+    "h-full",
+    "flex",
+    "justify-center",
+    "items-center",
+    "flex-col",
+    "gap-6",
+    "animate-in",
+    "fade-in-80"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [],
+        md: [],
+        lg: []
+      }
+    },
+    defaultVariants: {
+      size: "md"
     }
-  },
-  defaultVariants: {
-    size: "md"
   }
-}), e = a(["animate-spin", "animate-duration-time-2", "bg-linear-to-r", "from-black/20", "from-1%", "via-black/50", "via-40%", "to-aurora-500", "dark:from-white/20", "dark:via-white/50"], {
-  variants: {
-    size: {
-      sm: ["w-20", "h-20"],
-      md: ["w-40", "h-40"],
-      lg: ["w-60", "h-60"]
+), e = a(
+  [
+    "animate-spin",
+    "animate-duration-time-2",
+    "bg-linear-to-r",
+    "from-black/20",
+    "from-1%",
+    "via-black/50",
+    "via-40%",
+    "to-aurora-500",
+    "dark:from-white/20",
+    "dark:via-white/50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: ["w-20", "h-20"],
+        md: ["w-40", "h-40"],
+        lg: ["w-60", "h-60"]
+      }
+    },
+    defaultVariants: {
+      size: "md"
     }
-  },
-  defaultVariants: {
-    size: "md"
   }
-});
+);
 export {
   e as spinnerIconVariants,
   t as spinnerVariants

package/dist/components/Stepper/Stepper.js

@@ -1,59 +1,75 @@
-import { jsx as v } from "react/jsx-runtime";
-import { c as R } from "../../compiler-runtime-DA41awpA.js";
-import { cn as g } from "../../utils/index.js";
-import { StepItem as W } from "./components/StepItem/StepItem.js";
-import { stepperVariants as $, stepListVariants as q, stepItemVariants as y } from "./Stepper.variants.js";
-const J = (E) => {
-  const t = R.c(29), {
-    className: d,
-    classNames: i,
-    clickable: V,
-    currentStep: n,
-    icons: h,
-    orientation: w,
-    showConnector: I,
-    size: L,
-    steps: S,
-    theme: z,
-    variant: j,
-    onStepClick: k
-  } = E, C = V === void 0 ? !1 : V, O = w === void 0 ? "vertical" : w, N = I === void 0 ? !0 : I, P = L === void 0 ? "sm" : L, p = (j === void 0 ? "inline" : j) ?? "inline", s = p === "horizontal" ? "horizontal" : O ?? "vertical", b = P ?? "sm";
-  let f;
-  if (t[0] !== n || t[1] !== S) {
-    let o;
-    t[3] !== n ? (o = (e, x) => e.status ? e : n !== void 0 ? x < n ? {
-      ...e,
-      status: "completed"
-    } : x === n ? {
-      ...e,
-      status: "active"
-    } : {
-      ...e,
-      status: "pending"
-    } : {
-      ...e,
-      status: "pending"
-    }, t[3] = n, t[4] = o) : o = t[4], f = S.map(o), t[0] = n, t[1] = S, t[2] = f;
-  } else
-    f = t[2];
-  const m = f;
-  let r;
-  t[5] !== d || t[6] !== i?.root || t[7] !== s ? (r = g($({
-    orientation: s
-  }), d, i?.root), t[5] = d, t[6] = i?.root, t[7] = s, t[8] = r) : r = t[8];
-  let a;
-  t[9] !== i?.list || t[10] !== s ? (a = g(q({
-    orientation: s
-  }), i?.list), t[9] = i?.list, t[10] = s, t[11] = a) : a = t[11];
-  let l;
-  t[12] !== i || t[13] !== C || t[14] !== h || t[15] !== k || t[16] !== s || t[17] !== b || t[18] !== p || t[19] !== N || t[20] !== m ? (l = m.map((o, e) => /* @__PURE__ */ v("li", { className: g(y({
-    orientation: s
-  }), i?.item), children: /* @__PURE__ */ v(W, { step: o, index: e, isLast: e === m.length - 1, orientation: s, clickable: C ?? !1, onClick: () => k?.(o, e), size: b, showConnector: N ?? !0, nextStepStatus: m[e + 1]?.status, variant: p, classNames: i, icons: h }) }, o.id)), t[12] = i, t[13] = C, t[14] = h, t[15] = k, t[16] = s, t[17] = b, t[18] = p, t[19] = N, t[20] = m, t[21] = l) : l = t[21];
-  let c;
-  t[22] !== a || t[23] !== l ? (c = /* @__PURE__ */ v("ol", { className: a, children: l }), t[22] = a, t[23] = l, t[24] = c) : c = t[24];
-  let u;
-  return t[25] !== c || t[26] !== r || t[27] !== z ? (u = /* @__PURE__ */ v("nav", { className: r, "data-theme": z, "aria-label": "Progress steps", children: c }), t[25] = c, t[26] = r, t[27] = z, t[28] = u) : u = t[28], u;
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as S } from "react";
+import { cn as s } from "../../utils/index.js";
+import { StepItem as b } from "./components/StepItem/StepItem.js";
+import { stepItemVariants as k, stepListVariants as C, stepperVariants as I } from "./Stepper.variants.js";
+const P = ({
+  className: c,
+  classNames: r,
+  clickable: u = !1,
+  currentStep: o,
+  icons: f,
+  orientation: p = "vertical",
+  showConnector: h = !0,
+  size: v = "sm",
+  steps: l,
+  theme: d,
+  variant: g = "inline",
+  onStepClick: z
+}) => {
+  const m = g ?? "inline", e = m === "horizontal" ? "horizontal" : p ?? "vertical", V = v ?? "sm", n = S(
+    () => l.map((t, i) => t.status ? t : o !== void 0 ? i < o ? { ...t, status: "completed" } : i === o ? { ...t, status: "active" } : { ...t, status: "pending" } : { ...t, status: "pending" }),
+    [l, o]
+  );
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      className: s(
+        I({ orientation: e }),
+        c,
+        r?.root
+      ),
+      "data-theme": d,
+      "aria-label": "Progress steps",
+      children: /* @__PURE__ */ a(
+        "ol",
+        {
+          className: s(
+            C({ orientation: e }),
+            r?.list
+          ),
+          children: n.map((t, i) => /* @__PURE__ */ a(
+            "li",
+            {
+              className: s(
+                k({ orientation: e }),
+                r?.item
+              ),
+              children: /* @__PURE__ */ a(
+                b,
+                {
+                  step: t,
+                  index: i,
+                  isLast: i === n.length - 1,
+                  orientation: e,
+                  clickable: u ?? !1,
+                  onClick: () => z?.(t, i),
+                  size: V,
+                  showConnector: h ?? !0,
+                  nextStepStatus: n[i + 1]?.status,
+                  variant: m,
+                  classNames: r,
+                  icons: f
+                }
+              )
+            },
+            t.id
+          ))
+        }
+      )
+    }
+  );
 };
 export {
-  J as Stepper
+  P as Stepper
 };

package/dist/components/Stepper/Stepper.variants.js

@@ -50,25 +50,63 @@ const e = t(["flex"], {
     variant: "inline",
     clickable: !1
   }
-}), s = t(["flex", "items-center", "justify-center", "rounded-full", "shrink-0", "font-medium", "transition-all", "duration-200"], {
-  variants: {
-    status: {
-      completed: ["bg-transparent", "border-2", "border-aurora-500", "text-aurora-500", "dark:border-aurora-500", "dark:text-aurora-500"],
-      active: ["bg-aurora-500", "text-slate-700", "border-0", "dark:bg-aurora-500", "dark:text-metal-900"],
-      pending: ["border-2", "border-slate-300", "text-slate-600", "bg-transparent", "dark:border-metal-200", "dark:text-metal-200"],
-      error: ["bg-red-600", "text-white", "border-0", "dark:bg-red-600", "dark:text-white"]
+}), s = t(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "shrink-0",
+    "font-medium",
+    "transition-all",
+    "duration-200"
+  ],
+  {
+    variants: {
+      status: {
+        completed: [
+          "bg-transparent",
+          "border-2",
+          "border-aurora-500",
+          "text-aurora-500",
+          "dark:border-aurora-500",
+          "dark:text-aurora-500"
+        ],
+        active: [
+          "bg-aurora-500",
+          "text-slate-700",
+          "border-0",
+          "dark:bg-aurora-500",
+          "dark:text-metal-900"
+        ],
+        pending: [
+          "border-2",
+          "border-slate-300",
+          "text-slate-600",
+          "bg-transparent",
+          "dark:border-metal-200",
+          "dark:text-metal-200"
+        ],
+        error: [
+          "bg-red-600",
+          "text-white",
+          "border-0",
+          "dark:bg-red-600",
+          "dark:text-white"
+        ]
+      },
+      size: {
+        sm: ["w-5", "h-5", "text-xs", "uppercase", "tracking-wide"],
+        md: ["w-[37px]", "h-[37px]", "text-sm", "font-semibold"],
+        lg: ["w-[54px]", "h-[54px]", "text-lg", "font-semibold"]
+      }
     },
-    size: {
-      sm: ["w-5", "h-5", "text-xs", "uppercase", "tracking-wide"],
-      md: ["w-[37px]", "h-[37px]", "text-sm", "font-semibold"],
-      lg: ["w-[54px]", "h-[54px]", "text-lg", "font-semibold"]
+    defaultVariants: {
+      status: "pending",
+      size: "sm"
     }
-  },
-  defaultVariants: {
-    status: "pending",
-    size: "sm"
   }
-}), o = t(["flex", "flex-col", "gap-0.5"], {
+), o = t(["flex", "flex-col", "gap-0.5"], {
   variants: {
     variant: {
       inline: ["items-start"],
@@ -79,135 +117,153 @@ const e = t(["flex"], {
   defaultVariants: {
     variant: "inline"
   }
-}), l = t(["font-medium", "transition-colors", "duration-200", "leading-tight", "select-none"], {
-  variants: {
-    status: {
-      completed: ["text-slate-700", "dark:text-metal-200"],
-      active: ["text-slate-700", "dark:text-metal-50"],
-      pending: ["text-slate-600", "dark:text-metal-50"],
-      error: ["text-red-700", "dark:text-red-500"]
-    },
-    size: {
-      sm: ["text-sm"],
-      md: ["text-sm"],
-      lg: ["text-base"]
+}), l = t(
+  [
+    "font-medium",
+    "transition-colors",
+    "duration-200",
+    "leading-tight",
+    "select-none"
+  ],
+  {
+    variants: {
+      status: {
+        completed: ["text-slate-700", "dark:text-metal-200"],
+        active: ["text-slate-700", "dark:text-metal-50"],
+        pending: ["text-slate-600", "dark:text-metal-50"],
+        error: ["text-red-700", "dark:text-red-500"]
+      },
+      size: {
+        sm: ["text-sm"],
+        md: ["text-sm"],
+        lg: ["text-base"]
+      },
+      variant: {
+        inline: ["text-left"],
+        stacked: ["text-center"],
+        horizontal: ["text-left"]
+      }
     },
-    variant: {
-      inline: ["text-left"],
-      stacked: ["text-center"],
-      horizontal: ["text-left"]
+    defaultVariants: {
+      status: "pending",
+      size: "sm",
+      variant: "inline"
     }
-  },
-  defaultVariants: {
-    status: "pending",
-    size: "sm",
-    variant: "inline"
   }
-}), d = t(["transition-colors", "duration-200", "leading-tight", "select-none"], {
-  variants: {
-    status: {
-      completed: ["text-slate-500", "dark:text-slate-400"],
-      active: ["text-slate-600", "dark:text-slate-300"],
-      pending: ["text-slate-400", "dark:text-slate-500"],
-      error: ["text-red-500", "dark:text-red-400"]
-    },
-    size: {
-      sm: ["text-xs"],
-      md: ["text-xs"],
-      lg: ["text-sm"]
+), d = t(
+  ["transition-colors", "duration-200", "leading-tight", "select-none"],
+  {
+    variants: {
+      status: {
+        completed: ["text-slate-500", "dark:text-slate-400"],
+        active: ["text-slate-600", "dark:text-slate-300"],
+        pending: ["text-slate-400", "dark:text-slate-500"],
+        error: ["text-red-500", "dark:text-red-400"]
+      },
+      size: {
+        sm: ["text-xs"],
+        md: ["text-xs"],
+        lg: ["text-sm"]
+      },
+      variant: {
+        inline: ["text-left"],
+        stacked: ["text-center"],
+        horizontal: ["text-left"]
+      }
     },
-    variant: {
-      inline: ["text-left"],
-      stacked: ["text-center"],
-      horizontal: ["text-left"]
+    defaultVariants: {
+      status: "pending",
+      size: "sm",
+      variant: "inline"
     }
-  },
-  defaultVariants: {
-    status: "pending",
-    size: "sm",
-    variant: "inline"
   }
-}), c = t(["transition-colors", "duration-200"], {
-  variants: {
-    orientation: {
-      vertical: ["w-0.5"],
-      horizontal: ["h-0.5", "flex-1", "min-w-4"]
-    },
-    status: {
-      completed: ["bg-aurora-500", "dark:bg-aurora-500"],
-      active: ["bg-aurora-500", "dark:bg-aurora-500"],
-      pending: ["bg-slate-300", "dark:bg-metal-400"],
-      error: ["bg-red-700", "dark:bg-red-600"]
-    },
-    size: {
-      sm: [],
-      md: [],
-      lg: []
-    },
-    variant: {
-      inline: [],
-      stacked: [],
-      horizontal: []
-    }
-  },
-  compoundVariants: [
-    // Vertical inline connectors by size
-    {
-      orientation: "vertical",
-      variant: "inline",
-      size: "sm",
-      class: ["h-6", "ml-[9px]", "my-1"]
+), c = t(
+  ["transition-colors", "duration-200"],
+  {
+    variants: {
+      orientation: {
+        vertical: ["w-0.5"],
+        horizontal: ["h-0.5", "flex-1", "min-w-4"]
+      },
+      status: {
+        completed: ["bg-aurora-500", "dark:bg-aurora-500"],
+        active: ["bg-aurora-500", "dark:bg-aurora-500"],
+        pending: ["bg-slate-300", "dark:bg-metal-400"],
+        error: ["bg-red-700", "dark:bg-red-600"]
+      },
+      size: {
+        sm: [],
+        md: [],
+        lg: []
+      },
+      variant: {
+        inline: [],
+        stacked: [],
+        horizontal: []
+      }
     },
-    {
+    compoundVariants: [
+      // Vertical inline connectors by size
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "sm",
+        class: ["h-6", "ml-[9px]", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "md",
+        class: ["h-6", "ml-[17px]", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "lg",
+        class: ["h-6", "ml-[26px]", "my-1"]
+      },
+      // Vertical stacked connectors by size
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "sm",
+        class: ["h-6", "mx-auto", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "md",
+        class: ["h-7", "mx-auto", "my-2"]
+      },
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "lg",
+        class: ["h-8", "mx-auto", "my-2"]
+      }
+    ],
+    defaultVariants: {
       orientation: "vertical",
-      variant: "inline",
-      size: "md",
-      class: ["h-6", "ml-[17px]", "my-1"]
-    },
-    {
-      orientation: "vertical",
-      variant: "inline",
-      size: "lg",
-      class: ["h-6", "ml-[26px]", "my-1"]
-    },
-    // Vertical stacked connectors by size
-    {
-      orientation: "vertical",
-      variant: "stacked",
+      status: "pending",
       size: "sm",
-      class: ["h-6", "mx-auto", "my-1"]
-    },
-    {
-      orientation: "vertical",
-      variant: "stacked",
-      size: "md",
-      class: ["h-7", "mx-auto", "my-2"]
-    },
-    {
-      orientation: "vertical",
-      variant: "stacked",
-      size: "lg",
-      class: ["h-8", "mx-auto", "my-2"]
+      variant: "inline"
     }
-  ],
-  defaultVariants: {
-    orientation: "vertical",
-    status: "pending",
-    size: "sm",
-    variant: "inline"
   }
-}), x = t(["flex", "items-center", "flex-1"], {
-  variants: {
-    variant: {
-      inline: ["mt-2.5"],
-      stacked: ["mt-[26px]"],
-      horizontal: ["mt-0"]
+), x = t(
+  ["flex", "items-center", "flex-1"],
+  {
+    variants: {
+      variant: {
+        inline: ["mt-2.5"],
+        stacked: ["mt-[26px]"],
+        horizontal: ["mt-0"]
+      }
+    },
+    defaultVariants: {
+      variant: "inline"
     }
-  },
-  defaultVariants: {
-    variant: "inline"
   }
-});
+);
 export {
   x as horizontalConnectorWrapperVariants,
   c as stepConnectorVariants,