@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

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

@@ -0,0 +1,40 @@
+import { t as a } from "../../dist-B9GE4SXf.js";
+var r = 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" }
+});
+export {
+  e as spinnerIconVariants,
+  r as spinnerVariants
+};

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,57 @@
+import { t as l } from "../../utils-DnIJruo0.js";
+import { stepItemVariants as b, stepListVariants as k, stepperVariants as C } from "./Stepper.variants.js";
+import { StepItem as I } from "./components/StepItem/StepItem.js";
+import { useMemo as L } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var q = ({ className: u, classNames: i, clickable: f = !1, currentStep: a, fullWidth: n = !1, icons: p, orientation: v = "vertical", showConnector: h = !0, size: d = "sm", steps: m, theme: g, variant: z = "inline", onStepClick: V }) => {
+  const c = z ?? "inline", e = c === "horizontal" ? "horizontal" : v ?? "vertical", S = d ?? "sm", s = L(() => m.map((t, r) => t.status ? t : a !== void 0 ? r < a ? {
+    ...t,
+    status: "completed"
+  } : r === a ? {
+    ...t,
+    status: "active"
+  } : {
+    ...t,
+    status: "pending"
+  } : {
+    ...t,
+    status: "pending"
+  }), [m, a]);
+  return /* @__PURE__ */ o("nav", {
+    className: l(C({
+      orientation: e,
+      fullWidth: n
+    }), u, i?.root),
+    "data-theme": g,
+    "aria-label": "Progress steps",
+    children: /* @__PURE__ */ o("ol", {
+      className: l(k({
+        orientation: e,
+        fullWidth: n
+      }), i?.list),
+      children: s.map((t, r) => /* @__PURE__ */ o("li", {
+        className: l(b({
+          orientation: e,
+          fullWidth: n
+        }), i?.item),
+        children: /* @__PURE__ */ o(I, {
+          step: t,
+          index: r,
+          isLast: r === s.length - 1,
+          orientation: e,
+          clickable: f ?? !1,
+          onClick: () => V?.(t, r),
+          size: S,
+          showConnector: h ?? !0,
+          nextStepStatus: s[r + 1]?.status,
+          variant: c,
+          classNames: i,
+          icons: p
+        })
+      }, t.id))
+    })
+  });
+};
+export {
+  q as Stepper
+};

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

@@ -0,0 +1,355 @@
+import { t } from "../../dist-B9GE4SXf.js";
+var e = t(["flex"], {
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row", "items-start"]
+    },
+    fullWidth: {
+      true: ["w-full"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
+}), r = t([
+  "flex",
+  "list-none",
+  "p-0",
+  "m-0"
+], {
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row"]
+    },
+    fullWidth: {
+      true: ["w-full"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
+}), i = t(["list-none"], {
+  variants: {
+    orientation: {
+      vertical: [],
+      horizontal: []
+    },
+    fullWidth: {
+      true: [],
+      false: []
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    fullWidth: !0,
+    class: [
+      "flex-1",
+      "min-w-0",
+      "last:flex-none"
+    ]
+  }],
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
+}), n = t([
+  "flex",
+  "group",
+  "relative"
+], {
+  variants: {
+    orientation: {
+      vertical: [],
+      horizontal: ["min-w-0"]
+    },
+    variant: {
+      inline: [
+        "flex-row",
+        "items-center",
+        "gap-4"
+      ],
+      stacked: [
+        "flex-col",
+        "items-center",
+        "gap-2"
+      ],
+      horizontal: [
+        "flex-row",
+        "items-center",
+        "gap-4"
+      ]
+    },
+    clickable: {
+      true: ["cursor-pointer"],
+      false: ["cursor-default"]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "inline",
+    clickable: !1
+  }
+}), l = 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-13.5",
+        "h-13.5",
+        "text-lg",
+        "font-semibold"
+      ]
+    }
+  },
+  defaultVariants: {
+    status: "pending",
+    size: "sm"
+  }
+}), s = t([
+  "flex",
+  "flex-col",
+  "gap-0.5"
+], {
+  variants: { variant: {
+    inline: ["items-start"],
+    stacked: ["items-center"],
+    horizontal: ["items-start"]
+  } },
+  defaultVariants: { variant: "inline" }
+}), o = 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"]
+    }
+  },
+  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"]
+    }
+  },
+  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: [
+    {
+      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-6.5",
+        "my-1"
+      ]
+    },
+    {
+      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",
+    size: "sm",
+    variant: "inline"
+  }
+}), m = t([
+  "flex",
+  "items-center",
+  "flex-1"
+], {
+  variants: { variant: {
+    inline: ["mt-2.5"],
+    stacked: ["mt-6.5"],
+    horizontal: ["mt-0"]
+  } },
+  defaultVariants: { variant: "inline" }
+});
+export {
+  m as horizontalConnectorWrapperVariants,
+  c as stepConnectorVariants,
+  s as stepContentVariants,
+  d as stepDescriptionVariants,
+  l as stepIndicatorVariants,
+  i as stepItemVariants,
+  o as stepLabelVariants,
+  r as stepListVariants,
+  n as stepVariants,
+  e as stepperVariants
+};

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

@@ -0,0 +1,123 @@
+import { t } from "../../../../utils-DnIJruo0.js";
+import { t as v } from "../../../../StepIndicatorContent-yB2HfOdY.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",
+        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

@@ -0,0 +1,17 @@
+import { t as m } from "../../../../utils-DnIJruo0.js";
+import { stepConnectorVariants as n } from "../../Stepper.variants.js";
+import { memo as i } from "react";
+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 {
+  C as StepConnector
+};

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

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

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

@@ -0,0 +1,8 @@
+import { HorizontalStepItem as e } from "../HorizontalStepItem/HorizontalStepItem.js";
+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

@@ -0,0 +1,72 @@
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { t as x } from "../../../../StepIndicatorContent-yB2HfOdY.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",
+        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 {
+  G as VerticalStepItem
+};

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

@@ -0,0 +1,13 @@
+var _ = {
+  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.js

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