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

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

@@ -1,53 +1,27 @@
 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: []
-      }
-    },
-    defaultVariants: {
-      size: "md"
+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"
   }
-), 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"
+}), 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"
   }
-);
+});
 export {
   e as spinnerIconVariants,
   t as spinnerVariants

package/dist/components/Stepper/Stepper.js

@@ -1,75 +1,59 @@
-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
-          ))
-        }
-      )
-    }
-  );
+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;
 };
 export {
-  P as Stepper
+  J as Stepper
 };

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

@@ -50,63 +50,25 @@ 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"
-        ]
-      },
-      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"]
-      }
+}), 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"]
     },
-    defaultVariants: {
-      status: "pending",
-      size: "sm"
+    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"
   }
-), o = t(["flex", "flex-col", "gap-0.5"], {
+}), o = t(["flex", "flex-col", "gap-0.5"], {
   variants: {
     variant: {
       inline: ["items-start"],
@@ -117,153 +79,135 @@ 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"]
-      },
-      variant: {
-        inline: ["text-left"],
-        stacked: ["text-center"],
-        horizontal: ["text-left"]
-      }
+}), 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"]
     },
-    defaultVariants: {
-      status: "pending",
-      size: "sm",
-      variant: "inline"
+    size: {
+      sm: ["text-sm"],
+      md: ["text-sm"],
+      lg: ["text-base"]
+    },
+    variant: {
+      inline: ["text-left"],
+      stacked: ["text-center"],
+      horizontal: ["text-left"]
     }
+  },
+  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"]
-      },
-      variant: {
-        inline: ["text-left"],
-        stacked: ["text-center"],
-        horizontal: ["text-left"]
-      }
+}), 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"]
     },
-    defaultVariants: {
-      status: "pending",
-      size: "sm",
-      variant: "inline"
+    size: {
+      sm: ["text-xs"],
+      md: ["text-xs"],
+      lg: ["text-sm"]
+    },
+    variant: {
+      inline: ["text-left"],
+      stacked: ["text-center"],
+      horizontal: ["text-left"]
     }
+  },
+  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: []
-      }
+}), 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"]
     },
-    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",
-      status: "pending",
+      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",
-      variant: "inline"
+      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",
+    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"]
-      }
-    },
-    defaultVariants: {
-      variant: "inline"
+}), x = t(["flex", "items-center", "flex-1"], {
+  variants: {
+    variant: {
+      inline: ["mt-2.5"],
+      stacked: ["mt-[26px]"],
+      horizontal: ["mt-0"]
     }
+  },
+  defaultVariants: {
+    variant: "inline"
   }
-);
+});
 export {
   x as horizontalConnectorWrapperVariants,
   c as stepConnectorVariants,