@konstructio/ui 0.0.12 → 0.0.13-alpha.2

package/dist/components/NumberInput/NumberInput.js

@@ -1,49 +1,46 @@
-import { jsxs as y, jsx as u } from "react/jsx-runtime";
-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 $ } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.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";
+import { jsxs as m, jsx as u } from "react/jsx-runtime";
+import { R as O } from "../../index-CWKdynYu.js";
+import p, { forwardRef as d, useId as N, useCallback as w } from "react";
+import { cn as y } from "../../utils/index.js";
+import { labelVariants as z, buttonVariants as j, numberInputVariants as _ } from "./NumberInput.variants.js";
+import { P as s } from "../../index-C5psggHV.js";
 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 v = Object.assign || function(t) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var e in r)
+        Object.prototype.hasOwnProperty.call(r, e) && (t[e] = r[e]);
     }
-    return e;
+    return t;
   }, v.apply(this, arguments);
 }
-function V(e, o) {
-  if (e == null) return {};
-  var r = M(e, o), t, n;
+function E(t, i) {
+  if (t == null) return {};
+  var r = $(t, i), e, n;
   if (Object.getOwnPropertySymbols) {
-    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]);
+    var o = Object.getOwnPropertySymbols(t);
+    for (n = 0; n < o.length; n++)
+      e = o[n], !(i.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (r[e] = t[e]);
   }
   return r;
 }
-function M(e, o) {
-  if (e == null) return {};
-  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]);
+function $(t, i) {
+  if (t == null) return {};
+  var r = {}, e = Object.keys(t), n, o;
+  for (o = 0; o < e.length; o++)
+    n = e[o], !(i.indexOf(n) >= 0) && (r[n] = t[n]);
   return r;
 }
-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"]);
+var h = d(function(t, i) {
+  var r = t.color, e = r === void 0 ? "currentColor" : r, n = t.size, o = n === void 0 ? 24 : n, f = E(t, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", v({
-    ref: o,
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: t,
+    stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -54,48 +51,48 @@ var O = d(function(e, o) {
     y2: "12"
   }));
 });
-O.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+h.propTypes = {
+  color: s.string,
+  size: s.oneOfType([s.string, s.number])
 };
-O.displayName = "Minus";
+h.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 b = Object.assign || function(t) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var e in r)
+        Object.prototype.hasOwnProperty.call(r, e) && (t[e] = r[e]);
     }
-    return e;
+    return t;
   }, b.apply(this, arguments);
 }
-function R(e, o) {
-  if (e == null) return {};
-  var r = S(e, o), t, n;
+function L(t, i) {
+  if (t == null) return {};
+  var r = W(t, i), e, n;
   if (Object.getOwnPropertySymbols) {
-    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]);
+    var o = Object.getOwnPropertySymbols(t);
+    for (n = 0; n < o.length; n++)
+      e = o[n], !(i.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (r[e] = t[e]);
   }
   return r;
 }
-function S(e, o) {
-  if (e == null) return {};
-  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]);
+function W(t, i) {
+  if (t == null) return {};
+  var r = {}, e = Object.keys(t), n, o;
+  for (o = 0; o < e.length; o++)
+    n = e[o], !(i.indexOf(n) >= 0) && (r[n] = t[n]);
   return r;
 }
-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"]);
+var g = d(function(t, i) {
+  var r = t.color, e = r === void 0 ? "currentColor" : r, n = t.size, o = n === void 0 ? 24 : n, f = L(t, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", b({
-    ref: o,
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: t,
+    stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -112,81 +109,64 @@ var g = d(function(e, o) {
   }));
 });
 g.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+  color: s.string,
+  size: s.oneOfType([s.string, s.number])
 };
 g.displayName = "Plus";
-const Q = d(
+const S = d(
   ({
-    className: e,
-    init: o,
-    label: r,
-    max: t = -1 / 0,
-    min: n = 1 / 0,
-    name: i,
-    theme: f,
-    onChange: s
-  }, 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), 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), 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: i ?? N,
-          className: h(
-            L({
-              theme: m
-            })
-          ),
-          children: r
-        }
-      ) : null,
-      /* @__PURE__ */ y("div", { className: "flex items-center", role: "presentation", children: [
-        /* @__PURE__ */ y(
+    className: t,
+    label: i,
+    max: r = -1 / 0,
+    min: e = 1 / 0,
+    name: n,
+    theme: o,
+    value: f,
+    onChange: l
+  }, x) => {
+    const P = N(), a = f ?? 0, k = w(() => {
+      let c = 0;
+      e === 1 / 0 ? c = a - 1 : c = Math.max(e, a - 1), l == null || l({ target: { value: c } });
+    }, [a, e, l]), I = w(() => {
+      let c = 0;
+      r === -1 / 0 ? c = a + 1 : c = Math.min(r, a + 1), l == null || l({ target: { value: c } });
+    }, [a, r, l]);
+    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", "data-theme": o, children: [
+      i ? /* @__PURE__ */ u("label", { htmlFor: n ?? P, className: y(z()), children: i }) : null,
+      /* @__PURE__ */ m("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ m(
           "button",
           {
             type: "button",
-            onClick: z,
-            className: h(
-              P({ theme: m, button: "rigth" })
-            ),
+            onClick: k,
+            className: y(j({ button: "rigth" })),
             children: [
-              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(j, { children: "Decrement" })
+              /* @__PURE__ */ u(h, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(O, { children: "Decrement" })
             ]
           }
         ),
         /* @__PURE__ */ u(
           "input",
           {
-            ref: k,
+            ref: x,
             type: "number",
-            value: c,
-            name: i,
-            className: h(
-              W({ className: e, theme: m })
-            ),
+            value: a,
+            name: n,
+            className: y(_({ className: t })),
             readOnly: !0,
-            "aria-label": r
+            "aria-label": typeof i == "string" ? i : "number input"
           }
         ),
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ m(
           "button",
           {
             type: "button",
-            onClick: _,
-            className: h(
-              P({ theme: m, button: "left" })
-            ),
+            onClick: I,
+            className: y(j({ button: "left" })),
             children: [
               /* @__PURE__ */ u(g, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(j, { children: "Increment" })
+              /* @__PURE__ */ u(O, { children: "Increment" })
             ]
           }
         )
@@ -195,5 +175,5 @@ const Q = d(
   }
 );
 export {
-  Q as NumberInput
+  S as NumberInput
 };

package/dist/components/NumberInput/NumberInput.variants.js

@@ -1,71 +1,50 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
+const r = e([
+  "[&::-webkit-inner-spin-button]:appearance-none",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[-moz-appearance:textfield]",
+  "appearance-none",
+  "border",
+  "border-x-0",
+  "focus-visible:outline-none",
+  "focus-visible:ring-transparent",
+  "h-9",
+  "max-w-16",
+  "text-right",
+  "px-3",
+  "border-gray-200"
+]), n = e(
   [
-    "[&::-webkit-inner-spin-button]:appearance-none",
-    "[&::-webkit-outer-spin-button]:appearance-none",
-    "[-moz-appearance:textfield]",
-    "appearance-none",
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
     "border",
-    "border-x-0",
-    "focus-visible:outline-none",
-    "focus-visible:ring-transparent",
-    "p-1",
-    "text-center"
+    "text-slate-400",
+    "border-gray-200",
+    "cursor-pointer"
   ],
   {
     variants: {
-      theme: {
-        colony: ["border-red-700", "text-red-700"],
-        kubefirst: ["border-kubefirst-primary", "text-kubefirst-primary"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), a = e(
-  ["p-2", "items-center", "justify-center", "border"],
-  {
-    variants: {
-      theme: {
-        colony: ["border-red-700", "text-red-700", "hover:bg-red-50"],
-        kubefirst: [
-          "border-kubefirst-primary",
-          "text-kubefirst-primary",
-          "hover:text-kubefirst-secondary",
-          "hover:border-kubefirst-secondary",
-          "hover:bg-purple-100"
-        ],
-        civo: ""
-      },
       button: {
-        left: ["rounded-e-sm"],
-        rigth: ["rounded-s-sm"]
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
       }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
     }
   }
-), n = e(["pl-1", "text-base", "cursor-pointer"], {
+), a = e(["cursor-pointer"], {
   variants: {
     variant: {
       default: ""
-    },
-    theme: {
-      kubefirst: "",
-      colony: "",
-      civo: ""
     }
   },
   defaultVariants: {
-    variant: "default",
-    theme: "kubefirst"
+    variant: "default"
   }
 });
 export {
-  a as buttonVariants,
-  n as labelVariants,
-  t as numberInputVariants
+  n as buttonVariants,
+  a as labelVariants,
+  r as numberInputVariants
 };

package/dist/components/ProgressBar/ProgressBar.js

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

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

@@ -1,27 +1,14 @@
 import { c as s } from "../../index-BNmRGtA6.js";
-const t = s(
-  ["h-2", "rounded-full", "overflow-hidden", "mt-4", "bg-zinc-200"],
-  {
-    variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), r = s(
+const a = s([
+  "h-2",
+  "rounded-full",
+  "overflow-hidden",
+  "mt-4",
+  "bg-zinc-200"
+]), t = s(
   ["h-full", "bg-[length:100%_100%]", "animate-gradient-move"],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       status: {
         success: "",
         progress: "",
@@ -31,27 +18,19 @@ const t = s(
     compoundVariants: [
       {
         status: "progress",
-        theme: "kubefirst",
-        class: ["bg-kubefirst-gradient"]
+        class: ["bg-linear-to-r from-[#81e2b4] to-kubefirst-primary"]
       },
       {
         status: "success",
-        theme: "kubefirst",
         class: ["bg-[#81E2B4]"]
-      },
-      {
-        status: "progress",
-        theme: "colony",
-        class: ["bg-kubefirst-gradient"]
       }
     ],
     defaultVariants: {
-      theme: "kubefirst",
       status: "success"
     }
   }
 );
 export {
-  r as progressBarProgress,
-  t as progressBarVariants
+  t as progressBarProgress,
+  a as progressBarVariants
 };

package/dist/components/Radio/Radio.js

@@ -1,61 +1,78 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
-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 { cn as F } from "../../utils/index.js";
-import { radioVariants as R } from "./Radio.variants.js";
-const q = x(
+import { forwardRef as x, useId as V, useCallback as h } from "react";
+import { cn as e } from "../../utils/index.js";
+import { radioVariants as j, labelRadioVariants as w, wrapperRadioVariants as F } from "./Radio.variants.js";
+const z = x(
   ({
-    checked: m = !1,
-    className: i,
-    defaultChecked: a,
+    checked: i = !1,
+    className: m,
+    defaultChecked: l,
+    disabled: s,
     label: c,
+    labelTextClassName: p,
     name: t,
-    theme: l,
-    value: s,
-    onChange: e
-  }, p) => {
-    const d = N(), { theme: n } = j(), o = `${d}-${t}`, f = b(
-      (h) => {
-        e == null || e(h);
+    theme: f,
+    value: o,
+    wrapperClassName: n,
+    onChange: a
+  }, N) => {
+    const d = `${V()}-${t}`, R = h(
+      (b) => {
+        a == null || a(b);
       },
-      [e]
+      [a]
     );
     return /* @__PURE__ */ u(
       "label",
       {
-        htmlFor: o,
-        className: "inline-flex items-center cursor-pointer",
+        htmlFor: d,
+        className: e(
+          F({
+            className: n,
+            disabled: s || !1
+          })
+        ),
+        "data-theme": f,
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: p,
-              id: o,
+              ref: N,
+              id: d,
               type: "radio",
               name: t,
-              value: s,
-              checked: m,
-              defaultChecked: a,
+              value: o,
+              checked: i,
+              defaultChecked: l,
               className: "hidden peer",
-              onChange: () => f(s)
+              onChange: () => R(o),
+              disabled: s
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
-              className: F(
-                R({ className: i, theme: l ?? n })
+              className: e(
+                j({
+                  className: m,
+                  disabled: s || !1,
+                  checked: i || l || !1
+                })
               )
             }
           ),
-          /* @__PURE__ */ r("span", { className: "ml-2", children: c })
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: e(w({ className: p })),
+              children: c
+            }
+          )
         ]
       }
     );
   }
 );
 export {
-  q as Radio
+  z as Radio
 };