@konstructio/ui 0.1.2-alpha.9 → 0.1.2-alpha.93

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

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

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

@@ -0,0 +1,24 @@
+import { t as u } from "../../../dist-CMPkuWNy.js";
+import { useCallback as s } from "react";
+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: t,
+    isDisabled: l,
+    LabelComponent: f,
+    status: i,
+    handleClick: o,
+    handleKeyDown: s((a) => {
+      t && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o());
+    }, [t, o])
+  };
+}
+export {
+  d as useStepItemLogic
+};

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

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

package/dist/components/Switch/Switch.js

@@ -1,201 +1,4 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
-import * as h from "react";
-import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
-import { a as A, c as U, b as q } from "../../index-BfXxHr_2.js";
-import { u as N } from "../../index-DQH6odE9.js";
-import { u as F } from "../../index-BZPx6jYI.js";
-import { u as L } from "../../index-BAEWsOG1.js";
-import { P } from "../../index-BVRIAMfe.js";
-import { cn as R } from "../../utils/index.js";
-import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
-var b = "Switch", [D, ce] = U(b), [W, X] = D(b), y = h.forwardRef(
-  (e, l) => {
-    const {
-      __scopeSwitch: t,
-      name: s,
-      checked: o,
-      defaultChecked: d,
-      required: u,
-      disabled: r,
-      value: c = "on",
-      onCheckedChange: m,
-      form: n,
-      ...a
-    } = e, [p, f] = h.useState(null), w = N(l, (v) => f(v)), x = h.useRef(!1), k = p ? n || !!p.closest("form") : !0, [S, B] = A({
-      prop: o,
-      defaultProp: d ?? !1,
-      onChange: m,
-      caller: b
-    });
-    return /* @__PURE__ */ C(W, { scope: t, checked: S, disabled: r, children: [
-      /* @__PURE__ */ i(
-        P.button,
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": S,
-          "aria-required": u,
-          "data-state": I(S),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
-          value: c,
-          ...a,
-          ref: w,
-          onClick: q(e.onClick, (v) => {
-            B((T) => !T), k && (x.current = v.isPropagationStopped(), x.current || v.stopPropagation());
-          })
-        }
-      ),
-      k && /* @__PURE__ */ i(
-        _,
-        {
-          control: p,
-          bubbles: !x.current,
-          name: s,
-          value: c,
-          checked: S,
-          required: u,
-          disabled: r,
-          form: n,
-          style: { transform: "translateX(-100%)" }
-        }
-      )
-    ] });
-  }
-);
-y.displayName = b;
-var g = "SwitchThumb", E = h.forwardRef(
-  (e, l) => {
-    const { __scopeSwitch: t, ...s } = e, o = X(g, t);
-    return /* @__PURE__ */ i(
-      P.span,
-      {
-        "data-state": I(o.checked),
-        "data-disabled": o.disabled ? "" : void 0,
-        ...s,
-        ref: l
-      }
-    );
-  }
-);
-E.displayName = g;
-var G = "SwitchBubbleInput", _ = h.forwardRef(
-  ({
-    __scopeSwitch: e,
-    control: l,
-    checked: t,
-    bubbles: s = !0,
-    ...o
-  }, d) => {
-    const u = h.useRef(null), r = N(u, d), c = F(t), m = L(l);
-    return h.useEffect(() => {
-      const n = u.current;
-      if (!n) return;
-      const a = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(
-        a,
-        "checked"
-      ).set;
-      if (c !== t && f) {
-        const w = new Event("click", { bubbles: s });
-        f.call(n, t), n.dispatchEvent(w);
-      }
-    }, [c, t, s]), /* @__PURE__ */ i(
-      "input",
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: t,
-        ...o,
-        tabIndex: -1,
-        ref: r,
-        style: {
-          ...o.style,
-          ...m,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
-        }
-      }
-    );
-  }
-);
-_.displayName = G;
-function I(e) {
-  return e ? "checked" : "unchecked";
-}
-var J = y, K = E;
-const ne = H(
-  ({
-    name: e,
-    alignment: l = "horizontal",
-    theme: t,
-    thumbClassName: s,
-    className: o,
-    label: d,
-    defaultChecked: u,
-    value: r,
-    helperText: c,
-    onChange: m
-  }, n) => {
-    const a = M(null), p = $(), f = e ? `${p}-${e}` : p;
-    return j(n, () => a.current, [a]), z(() => {
-      a.current && (a.current.value = `${r}`);
-    }, [r]), /* @__PURE__ */ C(
-      "div",
-      {
-        className: R(
-          "w-full flex gap-3",
-          l === "vertical" ? "flex-col" : "flex-row"
-        ),
-        "data-theme": t,
-        children: [
-          /* @__PURE__ */ i(
-            J,
-            {
-              id: f,
-              defaultChecked: u,
-              checked: r,
-              onCheckedChange: (w) => m?.(w),
-              className: R(V({ className: o })),
-              "aria-label": d,
-              children: /* @__PURE__ */ i(
-                K,
-                {
-                  className: O({
-                    className: s
-                  })
-                }
-              )
-            }
-          ),
-          d ? /* @__PURE__ */ C(
-            "label",
-            {
-              className: "flex flex-col text-slate-800 dark:text-white text-sm",
-              htmlFor: f,
-              style: { paddingRight: 15 },
-              children: [
-                d,
-                c ? /* @__PURE__ */ i("span", { className: "text-slate-600 dark:text-slate-400 text-xs", children: c }) : null
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ i(
-            "input",
-            {
-              ref: a,
-              name: e,
-              type: "text",
-              className: "hidden",
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+import { t as o } from "../../Switch-CT2R9JgM.js";
 export {
-  ne as Switch
+  o as Switch
 };

package/dist/components/Switch/Switch.variants.js

@@ -1,24 +1,33 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a([
-  "w-[40px]",
-  "h-[20px]",
+import { t as a } from "../../dist-Bcn6lMQe.js";
+var t = a([
+  "w-10",
+  "h-5",
   "flex",
   "items-center",
   "rounded-full",
   "shadow",
   "focus:shadow-md",
   "data-[state=unchecked]:bg-gray-300",
-  "dark:data-[state=unchecked]:bg-gray-600",
+  "dark:data-[state=unchecked]:bg-metal-600",
   "transition-all",
   "delay-10",
   "duration-250",
   "cursor-pointer",
   "bg-aurora-500",
-  "kubefirst:bg-kubefirst-primary"
-]), e = a([
+  "kubefirst:bg-kubefirst-primary",
+  "[&+label,&+span]:cursor-pointer",
+  "disabled:[&+label,&+span,&]:cursor-not-allowed",
+  "disabled:bg-gray-200",
+  "disabled:data-[state=unchecked]:[&>span]:bg-white",
+  "disabled:data-[state=unchecked]:bg-gray-200",
+  "dark:disabled:bg-metal-700",
+  "dark:disabled:data-[state=unchecked]:[&>span]:bg-metal-600",
+  "dark:disabled:data-[state=unchecked]:bg-metal-700",
+  "dark:disabled:[&>span]:bg-metal-600"
+]), d = a([
   "block",
-  "w-[16px]",
-  "h-[16px]",
+  "w-4",
+  "h-4",
   "bg-white",
   "dark:bg-gray-400",
   "dark:data-[state=checked]:bg-white",
@@ -31,6 +40,6 @@ const r = a([
   "duration-300"
 ]);
 export {
-  r as switchVariants,
-  e as thumbVariants
+  t as switchVariants,
+  d as thumbVariants
 };

package/dist/components/Table/Table.js

@@ -1,27 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as i } from "../../utils/index.js";
-import { tableVariants as p } from "./Table.variants.js";
-import { Body as f } from "./components/Body.js";
-import { Filter as l } from "./components/Filter.js";
-import { Head as d } from "./components/Head.js";
-import { Row as s } from "./components/Row.js";
-const o = ({ children: r, className: m, theme: t, ...a }) => /* @__PURE__ */ e(
-  "table",
-  {
-    className: i(
-      p({
-        className: m
-      })
-    ),
-    "data-theme": t,
-    ...a,
-    children: r
-  }
-);
-o.Body = f;
-o.Filter = l;
-o.Head = d;
-o.Row = s;
+import { t as e } from "../../utils-COaoD3PI.js";
+import { tableVariants as i } from "./Table.variants.js";
+import { Body as p } from "./components/Body.js";
+import { Filter as f } from "./components/Filter.js";
+import { Head as l } from "./components/Head.js";
+import { Row as d } from "./components/Row.js";
+import { jsx as s } from "react/jsx-runtime";
+var o = ({ children: r, className: m, theme: t, ...a }) => /* @__PURE__ */ s("table", {
+  className: e(i({ className: m })),
+  "data-theme": t,
+  ...a,
+  children: r
+});
+o.Body = p;
+o.Filter = f;
+o.Head = l;
+o.Row = d;
 export {
   o as Table
 };

package/dist/components/Table/Table.variants.js

@@ -1,39 +1,32 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t([
+import { t } from "../../dist-Bcn6lMQe.js";
+var a = t([
   "table-auto",
   "w-full",
   "border-collapse",
   "border-spacing-0",
   "rounded"
-]), a = t(
-  [
-    "h-8",
-    "text-inherit",
-    "[&>td]:py-3",
-    "[&>td]:px-4",
-    "text-slate-700",
-    "hover:bg-zinc-100",
-    "hover:cursor-pointer"
-  ],
-  {
-    variants: {
-      isSelected: {
-        true: "bg-purple-50",
-        false: ""
-      }
-    }
-  }
-), o = t([
+]), e = t([
+  "h-8",
+  "text-inherit",
+  "[&>td]:py-3",
+  "[&>td]:px-4",
+  "text-slate-700",
+  "hover:bg-zinc-100",
+  "hover:cursor-pointer"
+], { variants: { isSelected: {
+  true: "bg-purple-50",
+  false: ""
+} } }), o = t([
   "h-[18px]",
   "bg-slate-100",
   "[&>tr>th]:py-3",
   "[&>tr>th]:px-4",
   "[&>tr>th]:uppercase",
   "text-left"
-]), s = t([]);
+]), p = t([]);
 export {
-  s as bodyVariants,
+  p as bodyVariants,
   o as headVariants,
-  a as rowVariants,
-  r as tableVariants
+  e as rowVariants,
+  a as tableVariants
 };

package/dist/components/Table/components/Body.js

@@ -1,18 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as s } from "../../../utils/index.js";
+import { t } from "../../../utils-COaoD3PI.js";
 import { bodyVariants as a } from "../Table.variants.js";
-const d = ({ children: o, className: r, ...m }) => /* @__PURE__ */ t(
-  "tbody",
-  {
-    className: s(
-      a({
-        className: r
-      })
-    ),
-    ...m,
-    children: o
-  }
-);
+import { jsx as s } from "react/jsx-runtime";
+var f = ({ children: o, className: r, ...m }) => /* @__PURE__ */ s("tbody", {
+  className: t(a({ className: r })),
+  ...m,
+  children: o
+});
 export {
-  d as Body
+  f as Body
 };