@konstructio/ui 0.1.2-alpha.99 → 0.1.3

package/dist/components/PieChart/PieChart.js

@@ -1,51 +1,12 @@
-import { a as $, r as D, t as v } from "../../dist-BHslNQd82.js";
-import { useMemo as i } from "react";
-import { jsx as y } from "react/jsx-runtime";
-$.register(D);
-var T = ({ values: p, colors: x = ["#525252", "#00D492"], borderColors: h = ["#FFFFFF", "#FFFFFF"], borderWidth: m = 0, cutoutPercentage: l = 80, title: n, subtitle: s, titleFontSize: a = 16, subtitleFontSize: o = 14, titleColor: g = "#111827", subtitleColor: c = "#6B7280", titleFontWeight: u = "bold", subtitleFontWeight: w = "normal", redraw: F = !0 }) => /* @__PURE__ */ y(v, {
-  data: i(() => ({ datasets: [{
-    data: p,
-    backgroundColor: x,
-    borderWidth: m,
-    borderColor: h
-  }] }), [
-    h,
-    m,
-    x,
-    p
-  ]),
-  options: i(() => ({
-    plugins: { legend: { display: !1 } },
-    cutout: `${l}%`,
-    hover: { mode: null }
-  }), [l]),
-  plugins: i(() => {
-    const f = [];
-    return n && f.push({
-      id: "titleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${u} ${a}px sans-serif`, e.fillStyle = g, e.textAlign = "center", e.textBaseline = "middle", e.fillText(n, t / 2, d / 2 - (s ? a / 2 : 0)), e.save();
-      }
-    }), s && f.push({
-      id: "subtitleCenter",
-      beforeDraw(r) {
-        const e = r.ctx, t = r.width, d = r.height;
-        e.restore(), e.font = `${w} ${o}px sans-serif`, e.fillStyle = c, e.fillText(s, t / 2, d / 2 + o / 2), e.save();
-      }
-    }), f;
-  }, [
-    s,
-    c,
-    o,
-    w,
-    n,
-    g,
-    a,
-    u
-  ]),
-  redraw: F
+import { Suspense as a, lazy as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var l = e(() => import("./components/PieChartContent/PieChartContent.js").then((r) => ({ default: r.PieChartContent }))), n = (r) => /* @__PURE__ */ t(a, {
+  fallback: /* @__PURE__ */ t("div", {
+    className: "w-full h-full",
+    "aria-busy": "true"
+  }),
+  children: /* @__PURE__ */ t(l, { ...r })
 });
 export {
-  T as PieChart
+  n as PieChart
 };

package/dist/components/PieChart/components/PieChartContent/PieChartContent.js

@@ -0,0 +1,56 @@
+import { a as j, r as A, t as B } from "../../../../dist-BCqfbYE9.js";
+import { a as e } from "../../../../utils-DnIJruo0.js";
+import { useMemo as i } from "react";
+import { jsx as T } from "react/jsx-runtime";
+j.register(A);
+var q = ({ values: d, colors: h = [e("--color-neutral-600"), e("--color-emerald-400")], borderColors: m = [e("--color-white"), e("--color-white")], borderWidth: p = 0, cutoutPercentage: x = 80, title: a, subtitle: n, titleFontSize: s = 16, subtitleFontSize: l = 14, titleColor: g = e("--color-gray-900"), subtitleColor: w = e("--color-gray-500"), titleFontWeight: u = "bold", subtitleFontWeight: y = "normal", redraw: C = !0 }) => {
+  const $ = i(() => ({ datasets: [{
+    data: d,
+    backgroundColor: h,
+    borderWidth: p,
+    borderColor: m
+  }] }), [
+    m,
+    p,
+    h,
+    d
+  ]), v = i(() => ({
+    plugins: { legend: { display: !1 } },
+    cutout: `${x}%`,
+    hover: { mode: null }
+  }), [x]), D = i(() => {
+    const t = [];
+    return a && t.push({
+      id: "titleCenter",
+      beforeDraw(o) {
+        const r = o.ctx, c = o.width, f = o.height;
+        r.restore(), r.font = `${u} ${s}px sans-serif`, r.fillStyle = g, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, c / 2, f / 2 - (n ? s / 2 : 0)), r.save();
+      }
+    }), n && t.push({
+      id: "subtitleCenter",
+      beforeDraw(o) {
+        const r = o.ctx, c = o.width, f = o.height;
+        r.restore(), r.font = `${y} ${l}px sans-serif`, r.fillStyle = w, r.fillText(n, c / 2, f / 2 + l / 2), r.save();
+      }
+    }), t;
+  }, [
+    n,
+    w,
+    l,
+    y,
+    a,
+    g,
+    s,
+    u
+  ]);
+  return /* @__PURE__ */ T(B, {
+    "aria-label": a ? [a, n].filter(Boolean).join(" ") : "Pie chart",
+    data: $,
+    options: v,
+    plugins: D,
+    redraw: C
+  });
+};
+export {
+  q as PieChartContent
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,32 +1,38 @@
-import { t as n } from "../../utils-COaoD3PI.js";
-import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
-import { jsx as s, jsxs as i } from "react/jsx-runtime";
-var w = ({ className: l, fillClassName: r, leftContent: a, percent: c, rightContent: e, status: m, theme: d, trackClassName: t }) => {
-  const h = Math.min(Math.max(c, 0), 100), o = a || e;
+import { t as p } from "../../dist-C_jtUTU9.js";
+import { t as v } from "../../utils-DnIJruo0.js";
+import { progressBarFillVariants as x, progressBarTrackVariants as f } from "./ProgressBar.variants.js";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var b = ({ ariaLabel: m, className: d, fillClassName: l, leftContent: e, percent: o, rightContent: r, status: s, theme: n, trackClassName: t }) => {
+  const c = Math.min(Math.max(o, 0), 100), h = e || r;
   return /* @__PURE__ */ i("div", {
-    className: n("flex flex-col gap-1 w-full", l),
-    "data-theme": d,
-    children: [o && /* @__PURE__ */ i("div", {
+    className: v("flex flex-col gap-1 w-full", d),
+    "data-theme": n,
+    children: [h && /* @__PURE__ */ i("div", {
       className: "flex items-center justify-between",
-      children: [a && /* @__PURE__ */ s("div", {
+      children: [e && /* @__PURE__ */ a("div", {
         className: "overflow-hidden text-ellipsis whitespace-nowrap",
-        children: a
-      }), e && /* @__PURE__ */ s("div", {
-        className: "text-right shrink-0",
         children: e
+      }), r && /* @__PURE__ */ a("div", {
+        className: "text-right shrink-0",
+        children: r
       })]
-    }), /* @__PURE__ */ s("div", {
-      className: x({ className: t }),
-      children: /* @__PURE__ */ s("div", {
-        className: p({
-          status: r ? null : m,
-          className: r
+    }), /* @__PURE__ */ i("div", {
+      className: f({ className: t }),
+      role: "progressbar",
+      "aria-label": m,
+      "aria-valuenow": c,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: [/* @__PURE__ */ a("div", {
+        className: x({
+          status: l ? null : s,
+          className: l
         }),
-        style: { width: `${h}%` }
-      })
+        style: { width: `${c}%` }
+      }), s && /* @__PURE__ */ a(p, { children: s })]
     })]
   });
 };
 export {
-  w as ProgressBar
+  b as ProgressBar
 };

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

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
+import { t as r } from "../../dist-B9GE4SXf.js";
 var t = r([
   "relative",
   "h-2",

package/dist/components/Radio/Radio.js

@@ -1,53 +1,52 @@
-import { t as a } from "../../utils-COaoD3PI.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { labelRadioVariants as p, radioVariants as V, wrapperRadioVariants as j } from "./Radio.variants.js";
-import { forwardRef as w, useCallback as F, useId as $ } from "react";
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-var v = w(({ checked: l = !1, className: f, defaultChecked: o, disabled: e, label: N, labelTextClassName: h, description: r, descriptionClassName: x, name: m, theme: R, value: n, wrapperClassName: u, onChange: t }, y) => {
-  const i = `${$()}-${m}`, b = F((g) => {
-    t?.(g);
-  }, [t]);
-  return /* @__PURE__ */ d("label", {
-    htmlFor: i,
-    className: a(j({
-      className: u,
-      disabled: e || !1
+import { Typography as i } from "../Typography/Typography.js";
+import { t as a } from "../../utils-DnIJruo0.js";
+import { labelRadioVariants as p, radioVariants as V, wrapperRadioVariants as b } from "./Radio.variants.js";
+import { forwardRef as j, useId as w } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var F = j(({ checked: o = !1, className: d, defaultChecked: l, disabled: r, label: f, labelTextClassName: N, description: e, descriptionClassName: h, name: m, theme: x, value: n, wrapperClassName: y, onChange: R, onClick: g }, u) => {
+  const t = `${w()}-${m}`;
+  return /* @__PURE__ */ c("label", {
+    htmlFor: t,
+    className: a(b({
+      className: y,
+      disabled: r || !1
     })),
-    "data-theme": R,
+    "data-theme": x,
     children: [
       /* @__PURE__ */ s("input", {
-        ref: y,
-        id: i,
+        ref: u,
+        id: t,
         type: "radio",
         name: m,
         value: n,
-        checked: l,
-        defaultChecked: o,
-        className: "hidden peer",
-        onChange: () => b(n),
-        disabled: e
+        checked: o,
+        defaultChecked: l,
+        className: "sr-only peer",
+        onChange: () => R?.(n),
+        onClick: g,
+        disabled: r
       }),
       /* @__PURE__ */ s("span", { className: a(V({
-        className: f,
-        disabled: e || !1,
-        checked: l || o || !1
+        className: d,
+        disabled: r || !1,
+        checked: o || l || !1
       })) }),
-      /* @__PURE__ */ d("div", {
-        className: a(r && "flex flex-col gap-1"),
-        children: [/* @__PURE__ */ s(c, {
+      /* @__PURE__ */ c("div", {
+        className: a(e && "flex flex-col gap-1"),
+        children: [/* @__PURE__ */ s(i, {
           component: "span",
-          className: a(p({ className: h })),
-          children: N
-        }), r && /* @__PURE__ */ s(c, {
+          className: a(p({ className: N })),
+          children: f
+        }), e && /* @__PURE__ */ s(i, {
           component: "span",
-          className: a(p({ className: x })),
-          children: r
+          className: a(p({ className: h })),
+          children: e
         })]
       })
     ]
   });
 });
-v.displayName = "KonstructRadio";
+F.displayName = "KonstructRadio";
 export {
-  v as Radio
+  F as Radio
 };

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

@@ -1,10 +1,11 @@
-import { t as e } from "../../dist-Bcn6lMQe.js";
+import { t as e } from "../../dist-B9GE4SXf.js";
 var a = e([
   "inline-flex",
   "items-center",
   "cursor-pointer",
   "gap-2",
-  "w-max"
+  "w-max",
+  "tap-target"
 ], {
   variants: { disabled: {
     true: ["cursor-not-allowed"],
@@ -12,6 +13,9 @@ var a = e([
   } },
   defaultVariants: { disabled: !1 }
 }), o = e([
+  "relative",
+  "shrink-0",
+  "touch-hit-area",
   "border",
   "border-zinc-400",
   "dark:border-metal-600",
@@ -32,7 +36,10 @@ var a = e([
   "h-4",
   "w-4",
   "peer-checked:before:h-[70%]",
-  "peer-checked:before:w-[70%]"
+  "peer-checked:before:w-[70%]",
+  "peer-focus-visible:outline-2",
+  "peer-focus-visible:outline-offset-2",
+  "peer-focus-visible:outline-aurora-500"
 ], {
   variants: {
     disabled: {
@@ -82,9 +89,9 @@ var a = e([
     }
   ],
   defaultVariants: { disabled: !1 }
-}), d = e(["text-sm", "text-zinc-700"]);
+}), t = e(["text-sm", "text-zinc-700"]);
 export {
-  d as labelRadioVariants,
+  t as labelRadioVariants,
   o as radioVariants,
   a as wrapperRadioVariants
 };

package/dist/components/RadioCard/RadioCard.js

@@ -1,21 +1,39 @@
-import { t as a } from "../../utils-COaoD3PI.js";
-import { Card as d } from "../Card/Card.js";
-import { Radio as l } from "../Radio/Radio.js";
-import { radioCardVariants as e } from "./RadioCard.variants.js";
-import { jsx as o } from "react/jsx-runtime";
-var f = ({ wrapperClassName: r, theme: i, labelWrapperClassName: t, checked: m, description: s, ...p }) => /* @__PURE__ */ o(d, {
-  "data-theme": i,
-  className: a(e({ className: r })),
-  wrapperClassName: a("w-max", r),
-  isActive: m,
-  children: /* @__PURE__ */ o(l, {
-    wrapperClassName: a("w-full h-full p-3 gap-3", t),
-    checked: m,
-    description: s,
-    ...p
-  })
-});
-f.displayName = "KonstructRadioCard";
+import { t as a } from "../../utils-DnIJruo0.js";
+import { Badge as v } from "../Badge/Badge.js";
+import { Card as x } from "../Card/Card.js";
+import { Radio as h } from "../Radio/Radio.js";
+import { radioCardVariants as w } from "./RadioCard.variants.js";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+var b = ({ wrapperClassName: l, theme: p, labelWrapperClassName: d, checked: r, className: n, content: s, contentClassName: f, description: c, hideIndicator: u = !1, label: i, tag: m, ...C }) => {
+  const e = typeof s == "function" ? s(!!r) : s, N = m ? /* @__PURE__ */ t("span", {
+    className: "flex items-center gap-2",
+    children: [i, /* @__PURE__ */ o(v, {
+      variant: "info",
+      label: m
+    })]
+  }) : i;
+  return /* @__PURE__ */ t(x, {
+    "data-theme": p,
+    className: a(w({
+      hasContent: !!e,
+      className: l
+    })),
+    wrapperClassName: a("w-max", l),
+    isActive: r,
+    children: [/* @__PURE__ */ o(h, {
+      wrapperClassName: a("w-full h-full p-3 gap-3", d),
+      className: a(u && "hidden", n),
+      checked: r,
+      description: c,
+      label: N,
+      ...C
+    }), e ? /* @__PURE__ */ o("div", {
+      className: a("relative w-full px-3 pb-3", f),
+      children: e
+    }) : null]
+  });
+};
+b.displayName = "KonstructRadioCard";
 export {
-  f as RadioCard
+  b as RadioCard
 };

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,10 +1,16 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
-var e = r([
+import { t } from "../../dist-B9GE4SXf.js";
+var e = t([
   "flex",
   "items-center",
   "p-0",
   "border"
-]);
+], {
+  variants: { hasContent: {
+    true: ["flex-col", "items-stretch"],
+    false: []
+  } },
+  defaultVariants: { hasContent: !1 }
+});
 export {
   e as radioCardVariants
 };

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,28 +1,28 @@
-import { t } from "../../utils-COaoD3PI.js";
+import { t as e } from "../../utils-DnIJruo0.js";
 import { RadioCard as C } from "../RadioCard/RadioCard.js";
 import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
-import { useCallback as S, useState as k } from "react";
-import { jsx as a } from "react/jsx-runtime";
-var g = ({ className: o, defaultChecked: m, direction: s, name: d, options: c, theme: i, wrapperClassName: p, onValueChange: e }) => {
-  const [n, f] = k(m), l = S((r) => {
-    f(r), e?.(r);
-  }, [e]);
-  return /* @__PURE__ */ a("div", {
-    className: t(N({
-      className: p,
-      direction: s
+import { useState as S } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var k = ({ className: t, defaultChecked: a, direction: m, name: d, options: s, theme: c, wrapperClassName: i, onValueChange: n }) => {
+  const [p, f] = S(a), h = (r) => {
+    f(r), n?.(r);
+  };
+  return /* @__PURE__ */ o("div", {
+    className: e(N({
+      className: i,
+      direction: m
     })),
-    "data-theme": i,
-    children: c.map(({ value: r, ...h }) => /* @__PURE__ */ a(C, {
+    "data-theme": c,
+    children: s.map(({ value: r, ...l }) => /* @__PURE__ */ o(C, {
       value: r,
       name: d,
-      className: t(o),
-      checked: n === r,
-      onChange: () => l(r),
-      ...h
+      className: e(t),
+      checked: p === r,
+      onChange: () => h(r),
+      ...l
     }, r))
   });
 };
 export {
-  g as RadioCardGroup
+  k as RadioCardGroup
 };

package/dist/components/RadioCardGroup/RadioCardGroup.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../dist-Bcn6lMQe.js";
+import { t as a } from "../../dist-B9GE4SXf.js";
 var o = a(["flex"], {
   variants: { direction: {
     row: ["flex-row", "gap-8"],

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,29 +1,29 @@
-import { t as G } from "../../dist-CMPkuWNy.js";
-import { t as s } from "../../utils-COaoD3PI.js";
-import { Radio as R } from "../Radio/Radio.js";
-import { radioGroupVariants as b } from "./RadioGroup.variants.js";
-import { useCallback as j, useState as I } from "react";
-import { jsx as m } from "react/jsx-runtime";
-var D = ({ asChild: a, className: c, defaultChecked: i, direction: n, name: d, options: p, theme: l, value: e, wrapperClassName: f, onValueChange: r }) => {
-  const S = a ? G : "div", o = e !== void 0, [h, C] = I(() => i), N = o ? e : h, k = j((t) => {
-    o || C(t), r?.(t);
-  }, [o, r]);
-  return /* @__PURE__ */ m(S, {
-    className: s(b({
-      className: f,
-      direction: n
+import { t as R } from "../../dist-CK8FUUUn.js";
+import { t as r } from "../../utils-DnIJruo0.js";
+import { Radio as g } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+import { useState as k } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var A = ({ asChild: m, className: n, defaultChecked: a, direction: i, name: c, options: d, theme: p, value: t, wrapperClassName: l, onValueChange: f }) => {
+  const h = m ? R : "div", e = t !== void 0, [S, C] = k(() => a), N = e ? t ?? void 0 : S, x = (o) => {
+    e || C(o), f?.(o);
+  };
+  return /* @__PURE__ */ s(h, {
+    className: r(j({
+      className: l,
+      direction: i
     })),
-    "data-theme": l,
-    children: p.map(({ value: t, ...x }) => /* @__PURE__ */ m(R, {
-      value: t,
-      name: d,
-      className: s(c),
-      checked: N === t,
-      onChange: () => k(t),
-      ...x
-    }, t))
+    "data-theme": p,
+    children: d.map(({ value: o, ...G }) => /* @__PURE__ */ s(g, {
+      value: o,
+      name: c,
+      className: r(n),
+      checked: N === o,
+      onChange: () => x(o),
+      ...G
+    }, o))
   });
 };
 export {
-  D as RadioGroup
+  A as RadioGroup
 };

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../dist-Bcn6lMQe.js";
+import { t as a } from "../../dist-B9GE4SXf.js";
 var o = a(["flex"], {
   variants: { direction: {
     row: ["flex-row", "gap-8"],

package/dist/components/Range/Range.js

@@ -1,52 +1,54 @@
-import { t as e } from "../../utils-COaoD3PI.js";
-import { i as v, n as V, r as c, t as R } from "../../dist-BfrkYZKI.js";
-import { rangeOutsideVariants as j, rangeVariants as b, thumbVariants as i, trackVariants as k } from "./Range.variants.js";
-import { forwardRef as w, useCallback as y, useEffect as C, useImperativeHandle as S, useRef as T, useState as $ } from "react";
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-var A = w(({ label: n, labelWrapperClassName: u, defaultValue: m = [0, 100], name: o, theme: f, size: l, showValue: d, ...h }, p) => {
-  const t = T(null), [s, x] = $(m);
-  S(p, () => t.current, [t]), C(() => {
-    t.current && (t.current.value = `[${s.toString()}]`);
-  }, [s]);
-  const N = y((g) => x(g), []);
-  return /* @__PURE__ */ r("div", {
+import { i as v, n as V, r as i, t as S } from "../../dist-Bg6GCX6S.js";
+import { t as e } from "../../utils-DnIJruo0.js";
+import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as w } from "./Range.variants.js";
+import { forwardRef as y, useEffect as b, useImperativeHandle as k, useRef as C, useState as T } from "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var q = y(({ label: n, labelWrapperClassName: m, defaultValue: u = [0, 100], name: d, theme: f, size: l, showValue: o, ...h }, p) => {
+  const r = C(null), [t, x] = T(u);
+  k(p, () => r.current, [r]), b(() => {
+    r.current && (r.current.value = `[${t.toString()}]`);
+  }, [t]);
+  const N = (g) => {
+    x(g);
+  };
+  return /* @__PURE__ */ s("div", {
     className: "w-full relative flex flex-col gap-3",
     "data-theme": f,
     children: [
-      /* @__PURE__ */ r("div", {
-        className: e("flex items-center", n ? "justify-between" : "justify-end", u),
-        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, d ? /* @__PURE__ */ r("span", {
+      /* @__PURE__ */ s("div", {
+        className: e("flex items-center", n ? "justify-between" : "justify-end", m),
+        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, o ? /* @__PURE__ */ s("span", {
           className: "text-xs",
           children: [
-            s[0],
+            t[0],
             " - ",
-            s[1]
+            t[1]
           ]
         }) : null]
       }),
       /* @__PURE__ */ a("input", {
-        ref: t,
-        name: o,
+        ref: r,
+        name: d,
         className: "hidden",
         type: "text"
       }),
-      /* @__PURE__ */ r(V, {
-        value: s,
-        className: e(b()),
+      /* @__PURE__ */ s(S, {
+        value: t,
+        className: e(j()),
         onValueChange: N,
         ...h,
         children: [
           /* @__PURE__ */ a(v, {
-            className: e(k({ size: l })),
-            children: /* @__PURE__ */ a(R, { className: e(j()) })
+            className: e(w({ size: l })),
+            children: /* @__PURE__ */ a(V, { className: e(R()) })
           }),
-          /* @__PURE__ */ a(c, { className: e(i({ size: l })) }),
-          /* @__PURE__ */ a(c, { className: e(i({ size: l })) })
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) }),
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) })
         ]
       })
     ]
   });
 });
 export {
-  A as Range
+  q as Range
 };

package/dist/components/Range/Range.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
+import { t as r } from "../../dist-B9GE4SXf.js";
 var e = r([
   "relative",
   "flex",