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

package/dist/components/PieChart/PieChart.js

@@ -1,87 +1,77 @@
-import { jsx as L } from "react/jsx-runtime";
-import { c as M } from "../../compiler-runtime-DA41awpA.js";
-import { C as N, A as O, D as Q } from "../../index-qDQP8rW4.js";
-N.register(O);
-const Y = (J) => {
-  const t = M.c(38), {
-    values: w,
-    colors: h,
-    borderColors: F,
-    borderWidth: E,
-    cutoutPercentage: T,
-    title: l,
-    subtitle: o,
-    titleFontSize: j,
-    subtitleFontSize: k,
-    titleColor: R,
-    subtitleColor: q,
-    titleFontWeight: G,
-    subtitleFontWeight: H,
-    redraw: I
-  } = J;
-  let b;
-  t[0] !== h ? (b = h === void 0 ? ["#525252", "#00D492"] : h, t[0] = h, t[1] = b) : b = t[1];
-  const S = b;
-  let g;
-  t[2] !== F ? (g = F === void 0 ? ["#FFFFFF", "#FFFFFF"] : F, t[2] = F, t[3] = g) : g = t[3];
-  const W = g, _ = E === void 0 ? 0 : E, K = T === void 0 ? 80 : T, n = j === void 0 ? 16 : j, r = k === void 0 ? 14 : k, d = R === void 0 ? "#111827" : R, a = q === void 0 ? "#6B7280" : q, f = G === void 0 ? "bold" : G, u = H === void 0 ? "normal" : H, $ = I === void 0 ? !0 : I;
-  let m;
-  t[4] !== W || t[5] !== _ || t[6] !== S || t[7] !== w ? (m = {
-    datasets: [{
-      data: w,
-      backgroundColor: S,
-      borderWidth: _,
-      borderColor: W
-    }]
-  }, t[4] = W, t[5] = _, t[6] = S, t[7] = w, t[8] = m) : m = t[8];
-  const y = m;
-  let p;
-  t[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = {
-    legend: {
-      display: !1
-    }
-  }, t[9] = p) : p = t[9];
-  const D = `${K}%`;
-  let v;
-  t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = {
-    mode: null
-  }, t[10] = v) : v = t[10];
-  let x;
-  t[11] !== D ? (x = {
-    plugins: p,
-    cutout: D,
-    hover: v
-  }, t[11] = D, t[12] = x) : x = t[12];
-  const z = x;
-  let c;
-  if (t[13] !== o || t[14] !== a || t[15] !== r || t[16] !== u || t[17] !== l || t[18] !== d || t[19] !== n || t[20] !== f) {
-    if (c = [], l) {
-      let i;
-      t[22] !== o || t[23] !== l || t[24] !== d || t[25] !== n || t[26] !== f ? (i = {
-        id: "titleCenter",
-        beforeDraw(s) {
-          const e = s.ctx, P = s.width, B = s.height;
-          e.restore(), e.font = `${f} ${n}px sans-serif`, e.fillStyle = d, e.textAlign = "center", e.textBaseline = "middle", e.fillText(l, P / 2, B / 2 - (o ? n / 2 : 0)), e.save();
+import { jsx as y } from "react/jsx-runtime";
+import { C as A, A as v, D as B } from "../../index-qDQP8rW4.js";
+import { useMemo as i } from "react";
+A.register(v);
+const E = ({
+  values: p,
+  colors: c = ["#525252", "#00D492"],
+  borderColors: x = ["#FFFFFF", "#FFFFFF"],
+  borderWidth: h = 0,
+  cutoutPercentage: m = 80,
+  title: r,
+  subtitle: n,
+  titleFontSize: o = 16,
+  subtitleFontSize: t = 14,
+  titleColor: l = "#111827",
+  subtitleColor: g = "#6B7280",
+  titleFontWeight: u = "bold",
+  subtitleFontWeight: w = "normal",
+  redraw: F = !0
+}) => {
+  const D = i(
+    () => ({
+      datasets: [
+        {
+          data: p,
+          backgroundColor: c,
+          borderWidth: h,
+          borderColor: x
         }
-      }, t[22] = o, t[23] = l, t[24] = d, t[25] = n, t[26] = f, t[27] = i) : i = t[27], c.push(i);
-    }
-    if (o) {
-      let i;
-      t[28] !== o || t[29] !== a || t[30] !== r || t[31] !== u ? (i = {
-        id: "subtitleCenter",
-        beforeDraw(s) {
-          const e = s.ctx, P = s.width, B = s.height;
-          e.restore(), e.font = `${u} ${r}px sans-serif`, e.fillStyle = a, e.fillText(o, P / 2, B / 2 + r / 2), e.save();
+      ]
+    }),
+    [x, h, c, p]
+  ), $ = i(
+    () => ({
+      plugins: {
+        legend: {
+          display: !1
         }
-      }, t[28] = o, t[29] = a, t[30] = r, t[31] = u, t[32] = i) : i = t[32], c.push(i);
-    }
-    t[13] = o, t[14] = a, t[15] = r, t[16] = u, t[17] = l, t[18] = d, t[19] = n, t[20] = f, t[21] = c;
-  } else
-    c = t[21];
-  const A = c;
-  let C;
-  return t[33] !== y || t[34] !== z || t[35] !== A || t[36] !== $ ? (C = /* @__PURE__ */ L(Q, { data: y, options: z, plugins: A, redraw: $ }), t[33] = y, t[34] = z, t[35] = A, t[36] = $, t[37] = C) : C = t[37], C;
+      },
+      cutout: `${m}%`,
+      hover: { mode: null }
+    }),
+    [m]
+  ), C = i(() => {
+    const a = [];
+    return r && a.push({
+      id: "titleCenter",
+      beforeDraw(e) {
+        const s = e.ctx, f = e.width, d = e.height;
+        s.restore(), s.font = `${u} ${o}px sans-serif`, s.fillStyle = l, s.textAlign = "center", s.textBaseline = "middle", s.fillText(
+          r,
+          f / 2,
+          d / 2 - (n ? o / 2 : 0)
+        ), s.save();
+      }
+    }), n && a.push({
+      id: "subtitleCenter",
+      beforeDraw(e) {
+        const s = e.ctx, f = e.width, d = e.height;
+        s.restore(), s.font = `${w} ${t}px sans-serif`, s.fillStyle = g, s.fillText(n, f / 2, d / 2 + t / 2), s.save();
+      }
+    }), a;
+  }, [
+    n,
+    g,
+    t,
+    w,
+    r,
+    l,
+    o,
+    u
+  ]);
+  return /* @__PURE__ */ y(B, { data: D, options: $, plugins: C, redraw: F });
 };
 export {
-  Y as PieChart
+  E as PieChart
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,50 +1,41 @@
-import { jsxs as g, jsx as d } from "react/jsx-runtime";
-import { c as B } from "../../compiler-runtime-DA41awpA.js";
-import { cn as y } from "../../utils/index.js";
-import { progressBarTrackVariants as M, progressBarFillVariants as P } from "./ProgressBar.variants.js";
-const F = (w) => {
-  const e = B.c(24), {
-    className: h,
-    fillClassName: o,
-    leftContent: n,
-    percent: C,
-    rightContent: m,
-    status: j,
-    theme: p,
-    trackClassName: N
-  } = w, k = Math.min(Math.max(C, 0), 100), x = n || m;
-  let t;
-  e[0] !== h ? (t = y("flex flex-col gap-1 w-full", h), e[0] = h, e[1] = t) : t = e[1];
-  let s;
-  e[2] !== x || e[3] !== n || e[4] !== m ? (s = x && /* @__PURE__ */ g("div", { className: "flex items-center justify-between", children: [
-    n && /* @__PURE__ */ d("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: n }),
-    m && /* @__PURE__ */ d("div", { className: "text-right shrink-0", children: m })
-  ] }), e[2] = x, e[3] = n, e[4] = m, e[5] = s) : s = e[5];
-  let l;
-  e[6] !== N ? (l = M({
-    className: N
-  }), e[6] = N, e[7] = l) : l = e[7];
-  const u = o ? null : j;
-  let a;
-  e[8] !== o || e[9] !== u ? (a = P({
-    status: u,
-    className: o
-  }), e[8] = o, e[9] = u, e[10] = a) : a = e[10];
-  const v = `${k}%`;
-  let i;
-  e[11] !== v ? (i = {
-    width: v
-  }, e[11] = v, e[12] = i) : i = e[12];
-  let r;
-  e[13] !== a || e[14] !== i ? (r = /* @__PURE__ */ d("div", { className: a, style: i }), e[13] = a, e[14] = i, e[15] = r) : r = e[15];
-  let c;
-  e[16] !== l || e[17] !== r ? (c = /* @__PURE__ */ d("div", { className: l, children: r }), e[16] = l, e[17] = r, e[18] = c) : c = e[18];
-  let f;
-  return e[19] !== t || e[20] !== s || e[21] !== c || e[22] !== p ? (f = /* @__PURE__ */ g("div", { className: t, "data-theme": p, children: [
-    s,
-    c
-  ] }), e[19] = t, e[20] = s, e[21] = c, e[22] = p, e[23] = f) : f = e[23], f;
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { cn as n } from "../../utils/index.js";
+import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
+const w = ({
+  className: c,
+  fillClassName: r,
+  leftContent: e,
+  percent: l,
+  rightContent: a,
+  status: m,
+  theme: d,
+  trackClassName: t
+}) => {
+  const o = Math.min(Math.max(l, 0), 100), h = e || a;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: n("flex flex-col gap-1 w-full", c),
+      "data-theme": d,
+      children: [
+        h && /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+          e && /* @__PURE__ */ s("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: e }),
+          a && /* @__PURE__ */ s("div", { className: "text-right shrink-0", children: a })
+        ] }),
+        /* @__PURE__ */ s("div", { className: x({ className: t }), children: /* @__PURE__ */ s(
+          "div",
+          {
+            className: p({
+              status: r ? null : m,
+              className: r
+            }),
+            style: { width: `${o}%` }
+          }
+        ) })
+      ]
+    }
+  );
 };
 export {
-  F as ProgressBar
+  w as ProgressBar
 };

package/dist/components/ProgressBar/ProgressBar.variants.js

@@ -1,17 +1,34 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const t = r(["relative", "h-2", "w-full", "rounded", "bg-gray-300", "dark:bg-gray-700"]), s = r(["absolute", "inset-y-0", "left-0", "rounded", "transition-[width,background-color]", "duration-500"], {
-  variants: {
-    status: {
-      default: "bg-metal-600",
-      success: "bg-green-600",
-      warning: "bg-amber-500",
-      error: "bg-red-500"
+const t = r([
+  "relative",
+  "h-2",
+  "w-full",
+  "rounded",
+  "bg-gray-300",
+  "dark:bg-gray-700"
+]), s = r(
+  [
+    "absolute",
+    "inset-y-0",
+    "left-0",
+    "rounded",
+    "transition-[width,background-color]",
+    "duration-500"
+  ],
+  {
+    variants: {
+      status: {
+        default: "bg-metal-600",
+        success: "bg-green-600",
+        warning: "bg-amber-500",
+        error: "bg-red-500"
+      }
+    },
+    defaultVariants: {
+      status: "default"
     }
-  },
-  defaultVariants: {
-    status: "default"
   }
-});
+);
 export {
   s as progressBarFillVariants,
   t as progressBarTrackVariants

package/dist/components/Radio/Radio.js

@@ -1,73 +1,97 @@
-import { jsx as g, jsxs as K } from "react/jsx-runtime";
-import { c as D } from "../../compiler-runtime-DA41awpA.js";
-import { forwardRef as G, useId as H } from "react";
-import { Typography as q } from "../Typography/Typography.js";
-import { cn as b } from "../../utils/index.js";
-import { wrapperRadioVariants as J, radioVariants as L, labelRadioVariants as z } from "./Radio.variants.js";
-const M = G((A, k) => {
-  const e = D.c(45), {
-    checked: I,
-    className: y,
-    defaultChecked: s,
-    disabled: a,
-    label: v,
-    labelTextClassName: w,
-    description: u,
-    descriptionClassName: V,
-    name: x,
-    theme: $,
-    value: l,
-    wrapperClassName: j,
-    onChange: F
-  } = A, t = I === void 0 ? !1 : I, i = `${H()}-${x}`;
-  let C;
-  e[0] !== F ? (C = (B) => {
-    F?.(B);
-  }, e[0] = F, e[1] = C) : C = e[1];
-  const T = C;
-  let o;
-  e[2] !== a || e[3] !== j ? (o = b(J({
-    className: j,
-    disabled: a || !1
-  })), e[2] = a, e[3] = j, e[4] = o) : o = e[4];
-  let c;
-  e[5] !== T || e[6] !== l ? (c = () => T(l), e[5] = T, e[6] = l, e[7] = c) : c = e[7];
-  let n;
-  e[8] !== t || e[9] !== s || e[10] !== i || e[11] !== a || e[12] !== x || e[13] !== k || e[14] !== c || e[15] !== l ? (n = /* @__PURE__ */ g("input", { ref: k, id: i, type: "radio", name: x, value: l, checked: t, defaultChecked: s, className: "hidden peer", onChange: c, disabled: a }), e[8] = t, e[9] = s, e[10] = i, e[11] = a, e[12] = x, e[13] = k, e[14] = c, e[15] = l, e[16] = n) : n = e[16];
-  let r;
-  e[17] !== t || e[18] !== y || e[19] !== s || e[20] !== a ? (r = b(L({
-    className: y,
-    disabled: a || !1,
-    checked: t || s || !1
-  })), e[17] = t, e[18] = y, e[19] = s, e[20] = a, e[21] = r) : r = e[21];
-  let d;
-  e[22] !== r ? (d = /* @__PURE__ */ g("span", { className: r }), e[22] = r, e[23] = d) : d = e[23];
-  const E = u && "flex flex-col gap-1";
-  let m;
-  e[24] !== E ? (m = b(E), e[24] = E, e[25] = m) : m = e[25];
-  let p;
-  e[26] !== w ? (p = b(z({
-    className: w
-  })), e[26] = w, e[27] = p) : p = e[27];
-  let f;
-  e[28] !== v || e[29] !== p ? (f = /* @__PURE__ */ g(q, { component: "span", className: p, children: v }), e[28] = v, e[29] = p, e[30] = f) : f = e[30];
-  let h;
-  e[31] !== u || e[32] !== V ? (h = u && /* @__PURE__ */ g(q, { component: "span", className: b(z({
-    className: V
-  })), children: u }), e[31] = u, e[32] = V, e[33] = h) : h = e[33];
-  let N;
-  e[34] !== f || e[35] !== h || e[36] !== m ? (N = /* @__PURE__ */ K("div", { className: m, children: [
-    f,
-    h
-  ] }), e[34] = f, e[35] = h, e[36] = m, e[37] = N) : N = e[37];
-  let R;
-  return e[38] !== i || e[39] !== N || e[40] !== o || e[41] !== n || e[42] !== d || e[43] !== $ ? (R = /* @__PURE__ */ K("label", { htmlFor: i, className: o, "data-theme": $, children: [
-    n,
-    d,
-    N
-  ] }), e[38] = i, e[39] = N, e[40] = o, e[41] = n, e[42] = d, e[43] = $, e[44] = R) : R = e[44], R;
-});
-M.displayName = "KonstructRadio";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { Typography as d } from "../Typography/Typography.js";
+import { cn as a } from "../../utils/index.js";
+import { radioVariants as F, labelRadioVariants as p, wrapperRadioVariants as $ } from "./Radio.variants.js";
+const C = V(
+  ({
+    checked: r = !1,
+    className: f,
+    defaultChecked: l,
+    disabled: e,
+    label: N,
+    labelTextClassName: h,
+    description: o,
+    descriptionClassName: x,
+    name: m,
+    theme: R,
+    value: n,
+    wrapperClassName: u,
+    onChange: i
+  }, y) => {
+    const t = `${j()}-${m}`, b = w(
+      (g) => {
+        i?.(g);
+      },
+      [i]
+    );
+    return /* @__PURE__ */ c(
+      "label",
+      {
+        htmlFor: t,
+        className: a(
+          $({
+            className: u,
+            disabled: e || !1
+          })
+        ),
+        "data-theme": R,
+        children: [
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: y,
+              id: t,
+              type: "radio",
+              name: m,
+              value: n,
+              checked: r,
+              defaultChecked: l,
+              className: "hidden peer",
+              onChange: () => b(n),
+              disabled: e
+            }
+          ),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: a(
+                F({
+                  className: f,
+                  disabled: e || !1,
+                  checked: r || l || !1
+                })
+              )
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: a(o && "flex flex-col gap-1"), children: [
+            /* @__PURE__ */ s(
+              d,
+              {
+                component: "span",
+                className: a(
+                  p({ className: h })
+                ),
+                children: N
+              }
+            ),
+            o && /* @__PURE__ */ s(
+              d,
+              {
+                component: "span",
+                className: a(
+                  p({ className: x })
+                ),
+                children: o
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+C.displayName = "KonstructRadio";
 export {
-  M as Radio
+  C as Radio
 };

package/dist/components/Radio/Radio.variants.js

@@ -1,42 +1,94 @@
 import { c as e } from "../../index-D29mdTf5.js";
-const a = e(["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"], {
-  variants: {
-    disabled: {
-      true: ["cursor-not-allowed"],
-      false: ["cursor-pointer"]
+const a = e(
+  ["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"],
+  {
+    variants: {
+      disabled: {
+        true: ["cursor-not-allowed"],
+        false: ["cursor-pointer"]
+      }
+    },
+    defaultVariants: {
+      disabled: !1
     }
-  },
-  defaultVariants: {
-    disabled: !1
   }
-}), o = e(["border", "border-zinc-400", "dark:border-metal-600", "duration-300", "inline-block", "rounded-full", "transition-all", "flex", "flex-col", "items-center", "justify-center", "before:content-['']", "before:rounded-full", "before:w-0", "before:h-0", "before:duration-100", "before:transition-all", "h-4", "w-4", "peer-checked:before:h-[70%]", "peer-checked:before:w-[70%]"], {
-  variants: {
-    disabled: {
-      true: "",
-      false: ""
+), o = e(
+  [
+    "border",
+    "border-zinc-400",
+    "dark:border-metal-600",
+    "duration-300",
+    "inline-block",
+    "rounded-full",
+    "transition-all",
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "before:content-['']",
+    "before:rounded-full",
+    "before:w-0",
+    "before:h-0",
+    "before:duration-100",
+    "before:transition-all",
+    "h-4",
+    "w-4",
+    "peer-checked:before:h-[70%]",
+    "peer-checked:before:w-[70%]"
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: ""
+      },
+      checked: {
+        true: "",
+        false: ""
+      }
     },
-    checked: {
-      true: "",
-      false: ""
+    compoundVariants: [
+      {
+        disabled: !1,
+        checked: [!0, !1],
+        class: [
+          "kubefirst:peer-checked:border-kubefirst-primary",
+          "kubefirst:peer-checked:before:bg-kubefirst-primary",
+          "peer-checked:border-aurora-500",
+          "peer-checked:before:bg-aurora-500"
+        ]
+      },
+      {
+        disabled: !0,
+        checked: !0,
+        class: [
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-300",
+          "cursor-not-allowed",
+          "[&+span]:cursor-not-allowed",
+          "dark:peer-checked:before:bg-aurora-500/50",
+          "dark:peer-checked:border-aurora-500/50"
+        ]
+      },
+      {
+        disabled: !0,
+        checked: !1,
+        class: [
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-50",
+          "cursor-not-allowed",
+          "[&+span]:cursor-not-allowed",
+          "bg-gray-50",
+          "dark:bg-metal-800",
+          "dark:bg-metal-800"
+        ]
+      }
+    ],
+    defaultVariants: {
+      disabled: !1
     }
-  },
-  compoundVariants: [{
-    disabled: !1,
-    checked: [!0, !1],
-    class: ["kubefirst:peer-checked:border-kubefirst-primary", "kubefirst:peer-checked:before:bg-kubefirst-primary", "peer-checked:border-aurora-500", "peer-checked:before:bg-aurora-500"]
-  }, {
-    disabled: !0,
-    checked: !0,
-    class: ["peer-checked:border-zinc-300", "peer-checked:before:bg-zinc-300", "cursor-not-allowed", "[&+span]:cursor-not-allowed", "dark:peer-checked:before:bg-aurora-500/50", "dark:peer-checked:border-aurora-500/50"]
-  }, {
-    disabled: !0,
-    checked: !1,
-    class: ["peer-checked:border-zinc-300", "peer-checked:before:bg-zinc-50", "cursor-not-allowed", "[&+span]:cursor-not-allowed", "bg-gray-50", "dark:bg-metal-800", "dark:bg-metal-800"]
-  }],
-  defaultVariants: {
-    disabled: !1
   }
-}), c = e(["text-sm", "text-zinc-700"]);
+), c = e(["text-sm", "text-zinc-700"]);
 export {
   c as labelRadioVariants,
   o as radioVariants,