@konstructio/ui 0.0.8 → 0.0.10

package/dist/components/NumberInput/NumberInput.js

@@ -1,45 +1,46 @@
 import { jsxs as y, jsx as u } from "react/jsx-runtime";
-import p, { forwardRef as b, useId as _, useState as E, useCallback as w } from "react";
 import { R as j } from "../../index-BtibbG81.js";
+import p, { forwardRef as d, useId as E, useState as T, useCallback as x } from "react";
 import "../../contexts/theme.context.js";
-import { useTheme as T } from "../../contexts/theme.hook.js";
+import { useTheme as $ } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { labelVariants as $, buttonVariants as x, numberInputVariants as L } from "./NumberInput.variants.js";
+import { cn as h } from "../../utils/index.js";
+import { labelVariants as L, buttonVariants as P, numberInputVariants as W } from "./NumberInput.variants.js";
 import { P as a } from "../../index-D68N8v8R.js";
-function h() {
-  return h = Object.assign || function(e) {
-    for (var i = 1; i < arguments.length; i++) {
-      var r = arguments[i];
+function v() {
+  return v = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, h.apply(this, arguments);
+  }, v.apply(this, arguments);
 }
-function W(e, i) {
+function V(e, o) {
   if (e == null) return {};
-  var r = V(e, i), t, n;
+  var r = M(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < o.length; n++)
-      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
   return r;
 }
-function V(e, i) {
+function M(e, o) {
   if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, o;
-  for (o = 0; o < t.length; o++)
-    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var d = b(function(e, i) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = W(e, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", h({
-    ref: i,
+var O = d(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, f = V(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: o,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: i,
+    height: i,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -53,45 +54,45 @@ var d = b(function(e, i) {
     y2: "12"
   }));
 });
-d.propTypes = {
+O.propTypes = {
   color: a.string,
   size: a.oneOfType([a.string, a.number])
 };
-d.displayName = "Minus";
-function v() {
-  return v = Object.assign || function(e) {
-    for (var i = 1; i < arguments.length; i++) {
-      var r = arguments[i];
+O.displayName = "Minus";
+function b() {
+  return b = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, v.apply(this, arguments);
+  }, b.apply(this, arguments);
 }
-function M(e, i) {
+function R(e, o) {
   if (e == null) return {};
-  var r = R(e, i), t, n;
+  var r = S(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < o.length; n++)
-      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
   return r;
 }
-function R(e, i) {
+function S(e, o) {
   if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, o;
-  for (o = 0; o < t.length; o++)
-    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var O = b(function(e, i) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = M(e, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", v({
-    ref: i,
+var g = d(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, f = R(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", b({
+    ref: o,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: i,
+    height: i,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -110,37 +111,39 @@ var O = b(function(e, i) {
     y2: "12"
   }));
 });
-O.propTypes = {
+g.propTypes = {
   color: a.string,
   size: a.oneOfType([a.string, a.number])
 };
-O.displayName = "Plus";
-const J = b(
+g.displayName = "Plus";
+const Q = d(
   ({
     className: e,
-    init: i,
+    init: o,
     label: r,
     max: t = -1 / 0,
     min: n = 1 / 0,
-    name: o,
+    name: i,
     theme: f,
     onChange: s
-  }, P) => {
-    const { theme: k } = T(), m = f ?? k, I = _(), [c, g] = E(() => i || 0), N = w(() => {
+  }, k) => {
+    const { theme: I } = $(), m = f ?? I, N = E(), [c, w] = T(() => o || 0), z = x(() => {
       let l = 0;
-      n === 1 / 0 ? l = c - 1 : l = Math.max(n, c - 1), g(l), s == null || s(l);
-    }, [c, n, s]), z = w(() => {
+      n === 1 / 0 ? l = c - 1 : l = Math.max(n, c - 1), w(l), s == null || s(l);
+    }, [c, n, s]), _ = x(() => {
       let l = 0;
-      t === -1 / 0 ? l = c + 1 : l = Math.min(t, c + 1), g(l), s == null || s(l);
+      t === -1 / 0 ? l = c + 1 : l = Math.min(t, c + 1), w(l), s == null || s(l);
     }, [c, t, s]);
     return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1", children: [
       r ? /* @__PURE__ */ u(
         "label",
         {
-          htmlFor: o ?? I,
-          className: $({
-            theme: m
-          }),
+          htmlFor: i ?? N,
+          className: h(
+            L({
+              theme: m
+            })
+          ),
           children: r
         }
       ) : null,
@@ -149,10 +152,12 @@ const J = b(
           "button",
           {
             type: "button",
-            onClick: N,
-            className: x({ theme: m, button: "rigth" }),
+            onClick: z,
+            className: h(
+              P({ theme: m, button: "rigth" })
+            ),
             children: [
-              /* @__PURE__ */ u(d, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
               /* @__PURE__ */ u(j, { children: "Decrement" })
             ]
           }
@@ -160,11 +165,13 @@ const J = b(
         /* @__PURE__ */ u(
           "input",
           {
-            ref: P,
+            ref: k,
             type: "number",
             value: c,
-            name: o,
-            className: L({ className: e, theme: m }),
+            name: i,
+            className: h(
+              W({ className: e, theme: m })
+            ),
             readOnly: !0,
             "aria-label": r
           }
@@ -173,10 +180,12 @@ const J = b(
           "button",
           {
             type: "button",
-            onClick: z,
-            className: x({ theme: m, button: "left" }),
+            onClick: _,
+            className: h(
+              P({ theme: m, button: "left" })
+            ),
             children: [
-              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(g, { className: "w-4 h-4" }),
               /* @__PURE__ */ u(j, { children: "Increment" })
             ]
           }
@@ -186,5 +195,5 @@ const J = b(
   }
 );
 export {
-  J as NumberInput
+  Q as NumberInput
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -3,7 +3,7 @@ import "../../contexts/theme.context.js";
 import { useTheme as l } from "../../contexts/theme.hook.js";
 import "react";
 import "../../js.cookie-OLEfuq_g.js";
-import { cn as t } from "../../utils/index.js";
+import { cn as o } from "../../utils/index.js";
 import { progressBarVariants as d, progressBarProgress as c } from "./ProgressBar.variants.js";
 const j = ({
   label: r,
@@ -11,20 +11,20 @@ const j = ({
   percent: s,
   status: n
 }) => {
-  const { theme: a } = l(), o = m ?? a;
+  const { theme: a } = l(), t = m ?? a;
   return /* @__PURE__ */ e("div", { className: "w-full", children: [
-    /* @__PURE__ */ e("div", { className: t("flex", r ? "justify-between" : "justify-end"), children: [
+    /* @__PURE__ */ e("div", { className: o("flex", r ? "justify-between" : "justify-end"), children: [
       r ? /* @__PURE__ */ i("label", { className: "font-semibold", children: r }) : null,
       /* @__PURE__ */ e("span", { className: "font-semibold", children: [
         s,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: d({ theme: o }), children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { className: o(d({ theme: t })), children: /* @__PURE__ */ i(
       "div",
       {
-        className: t(
-          c({ theme: o, status: n }),
+        className: o(
+          c({ theme: t, status: n }),
           s > 0 && s < 99 ? "transition-width duration-500" : "transition-colors duration-0"
         ),
         style: { width: `${s}%` }

package/dist/components/Radio/Radio.js

@@ -3,19 +3,20 @@ import { forwardRef as x, useId as N, useCallback as b } from "react";
 import "../../contexts/theme.context.js";
 import { useTheme as j } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { radioVariants as F } from "./Radio.variants.js";
-const I = x(
+import { cn as F } from "../../utils/index.js";
+import { radioVariants as R } from "./Radio.variants.js";
+const q = x(
   ({
-    checked: i = !1,
-    className: m,
+    checked: m = !1,
+    className: i,
     defaultChecked: a,
-    label: l,
-    name: s,
-    theme: c,
-    value: t,
+    label: c,
+    name: t,
+    theme: l,
+    value: s,
     onChange: e
-  }, d) => {
-    const p = N(), { theme: n } = j(), o = `${p}-${s}`, f = b(
+  }, p) => {
+    const d = N(), { theme: n } = j(), o = `${d}-${t}`, f = b(
       (h) => {
         e == null || e(h);
       },
@@ -30,29 +31,31 @@ const I = x(
           /* @__PURE__ */ r(
             "input",
             {
-              ref: d,
+              ref: p,
               id: o,
               type: "radio",
-              name: s,
-              value: t,
-              checked: i,
+              name: t,
+              value: s,
+              checked: m,
               defaultChecked: a,
               className: "hidden peer",
-              onChange: () => f(t)
+              onChange: () => f(s)
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
-              className: F({ className: m, theme: c ?? n })
+              className: F(
+                R({ className: i, theme: l ?? n })
+              )
             }
           ),
-          /* @__PURE__ */ r("span", { className: "ml-2", children: l })
+          /* @__PURE__ */ r("span", { className: "ml-2", children: c })
         ]
       }
     );
   }
 );
 export {
-  I as Radio
+  q as Radio
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,37 +1,41 @@
-import { jsx as m, Fragment as n } from "react/jsx-runtime";
-import { useState as k, useCallback as l } from "react";
+import { jsx as o, Fragment as N } from "react/jsx-runtime";
 import { S as R } from "../../index-DoOsnuB6.js";
+import { useState as T, useCallback as a } from "react";
 import "../../contexts/theme.context.js";
-import { useTheme as T } from "../../contexts/theme.hook.js";
+import { useTheme as b } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { Radio as b } from "../Radio/Radio.js";
-const z = ({
-  options: o,
-  theme: r,
-  name: c,
-  asChild: s,
-  defaultValue: i,
-  onValueChange: e
+import { cn as e } from "../../utils/index.js";
+import { Radio as j } from "../Radio/Radio.js";
+const D = ({
+  asChild: r,
+  className: c,
+  defaultValue: s,
+  name: i,
+  options: p,
+  theme: d,
+  wrapperClassName: f,
+  onValueChange: m
 }) => {
-  const p = s ? R : "div", { theme: d } = T(), [f, S] = k(i), h = l(
+  const S = r ? R : "div", { theme: h } = b(), [n, x] = T(s), l = a(
     (t) => {
-      S(t), e == null || e(t);
+      x(t), m == null || m(t);
     },
-    [e]
+    [m]
   );
-  return /* @__PURE__ */ m(p, { className: "flex gap-2", children: /* @__PURE__ */ m(n, { children: o.map(({ value: t, ...x }) => /* @__PURE__ */ m(
-    b,
+  return /* @__PURE__ */ o(S, { className: e("flex gap-2", f), children: /* @__PURE__ */ o(N, { children: p.map(({ value: t, ...k }) => /* @__PURE__ */ o(
+    j,
     {
       value: t,
-      theme: r ?? d,
-      name: c,
-      checked: f === t,
-      onChange: () => h(t),
-      ...x
+      theme: d ?? h,
+      name: i,
+      className: e(c),
+      checked: n === t,
+      onChange: () => l(t),
+      ...k
     },
     t
   )) }) });
 };
 export {
-  z as RadioGroup
+  D as RadioGroup
 };

package/dist/components/RadioGroup/RadioGroup.types.d.ts

@@ -1,11 +1,12 @@
 import { RadioProps } from '../Radio/Radio.types';
 export interface RadioGroupProps {
+    asChild?: boolean;
+    className?: RadioProps['className'];
+    defaultValue?: string;
     label?: string;
     name: string;
     options: Omit<RadioProps, 'name'>[];
-    asChild?: boolean;
     theme?: RadioProps['theme'];
-    className?: RadioProps['className'];
-    defaultValue?: string;
+    wrapperClassName?: string;
     onValueChange?: (value: string) => void;
 }

package/dist/components/Range/Range.js

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

package/dist/components/Slider/Slider.js

@@ -1,46 +1,46 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { forwardRef as N, useRef as v, useState as T, useImperativeHandle as V, useEffect as b, useCallback as R } from "react";
-import { R as g, T as j, b as k } from "../../index-z-AJyzdv.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { R as v, T, b as V } from "../../index-z-AJyzdv.js";
+import { forwardRef as b, useRef as R, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
 import "../../contexts/theme.context.js";
-import { useTheme as w } from "../../contexts/theme.hook.js";
+import { useTheme as y } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { cn as y } from "../../utils/index.js";
+import { cn as a } from "../../utils/index.js";
 import { sliderVariants as C, trackVariants as S, thumbVariants as E } from "./Slider.variants.js";
-const J = N(
-  ({ label: a, defaultValue: m = [0], name: i, theme: c, size: l, showValue: o, ...u }, f) => {
-    const e = v(null), [r, h] = T(m), { theme: d } = w(), s = c ?? d;
-    V(f, () => e.current, [e]), b(() => {
+const J = b(
+  ({ label: s, defaultValue: i = [0], name: c, theme: o, size: m, showValue: u, ...f }, h) => {
+    const e = R(null), [r, d] = g(i), { theme: p } = y(), n = o ?? p;
+    j(h, () => e.current, [e]), k(() => {
       e.current && (e.current.value = r.toString());
     }, [r]);
-    const p = R(
-      (x) => h(x),
+    const x = w(
+      (N) => d(N),
       []
     );
-    return /* @__PURE__ */ n("div", { className: "w-full relative flex flex-col gap-3", children: [
-      /* @__PURE__ */ n(
+    return /* @__PURE__ */ l("div", { className: "w-full relative flex flex-col gap-3", children: [
+      /* @__PURE__ */ l(
         "div",
         {
-          className: y(
+          className: a(
             "flex items-center",
-            a ? "justify-between" : "justify-end"
+            s ? "justify-between" : "justify-end"
           ),
           children: [
-            a ? /* @__PURE__ */ t("label", { children: a }) : null,
-            o ? /* @__PURE__ */ t("span", { className: "text-xs", children: r }) : null
+            s ? /* @__PURE__ */ t("label", { children: s }) : null,
+            u ? /* @__PURE__ */ t("span", { className: "text-xs", children: r }) : null
           ]
         }
       ),
-      /* @__PURE__ */ t("input", { ref: e, name: i, className: "hidden", type: "number" }),
-      /* @__PURE__ */ n(
-        g,
+      /* @__PURE__ */ t("input", { ref: e, name: c, className: "hidden", type: "number" }),
+      /* @__PURE__ */ l(
+        v,
         {
           value: r,
-          className: C({ theme: s }),
-          onValueChange: p,
-          ...u,
+          className: a(C({ theme: n })),
+          onValueChange: x,
+          ...f,
           children: [
-            /* @__PURE__ */ t(j, { className: S({ theme: s, size: l }) }),
-            /* @__PURE__ */ t(k, { className: E({ theme: s, size: l }) })
+            /* @__PURE__ */ t(T, { className: a(S({ theme: n, size: m })) }),
+            /* @__PURE__ */ t(V, { className: a(E({ theme: n, size: m })) })
           ]
         }
       )