@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.47

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsx as u, jsxs as B, Fragment as U } from "react/jsx-runtime";
-import * as h from "react";
+import * as m from "react";
 import S, { forwardRef as z, useId as V, useCallback as X } from "react";
 import { u as L } from "../../index-DLcqcWxM.js";
-import { c as J, P as w, a as Q, b as j } from "../../index-DKfEnhKr.js";
+import { c as J, P as R, a as Q, b as j } from "../../index-DKfEnhKr.js";
 import { u as Y } from "../../index-BZPx6jYI.js";
 import { u as Z } from "../../index-DtEcCIrM.js";
 import { P as ee } from "../../index-AV6ZtGhy.js";
@@ -10,43 +10,43 @@ import { cn as T } from "../../utils/index.js";
 import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";
 import { useToggle as oe } from "../../hooks/useToggle.js";
 import { P as y } from "../../index-BOE_3f_Z.js";
-function R() {
-  return R = Object.assign || function(e) {
-    for (var a = 1; a < arguments.length; a++) {
-      var o = arguments[a];
-      for (var n in o)
-        Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
+function E() {
+  return E = Object.assign || function(e) {
+    for (var c = 1; c < arguments.length; c++) {
+      var n = arguments[c];
+      for (var r in n)
+        Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
     }
     return e;
-  }, R.apply(this, arguments);
+  }, E.apply(this, arguments);
 }
-function ne(e, a) {
+function ne(e, c) {
   if (e == null) return {};
-  var o = ae(e, a), n, r;
+  var n = ce(e, c), r, o;
   if (Object.getOwnPropertySymbols) {
     var t = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < t.length; r++)
-      n = t[r], !(a.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+    for (o = 0; o < t.length; o++)
+      r = t[o], !(c.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
-  return o;
+  return n;
 }
-function ae(e, a) {
+function ce(e, c) {
   if (e == null) return {};
-  var o = {}, n = Object.keys(e), r, t;
-  for (t = 0; t < n.length; t++)
-    r = n[t], !(a.indexOf(r) >= 0) && (o[r] = e[r]);
-  return o;
+  var n = {}, r = Object.keys(e), o, t;
+  for (t = 0; t < r.length; t++)
+    o = r[t], !(c.indexOf(o) >= 0) && (n[o] = e[o]);
+  return n;
 }
-var I = z(function(e, a) {
-  var o = e.color, n = o === void 0 ? "currentColor" : o, r = e.size, t = r === void 0 ? 24 : r, l = ne(e, ["color", "size"]);
-  return /* @__PURE__ */ S.createElement("svg", R({
-    ref: a,
+var I = z(function(e, c) {
+  var n = e.color, r = n === void 0 ? "currentColor" : n, o = e.size, t = o === void 0 ? 24 : o, l = ne(e, ["color", "size"]);
+  return /* @__PURE__ */ S.createElement("svg", E({
+    ref: c,
     xmlns: "http://www.w3.org/2000/svg",
     width: t,
     height: t,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: r,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -59,13 +59,13 @@ I.propTypes = {
   size: y.oneOfType([y.string, y.number])
 };
 I.displayName = "Check";
-var P = "Checkbox", [ce, ye] = J(P), [se, N] = ce(P);
+var P = "Checkbox", [ae, ye] = J(P), [se, N] = ae(P);
 function ie(e) {
   const {
-    __scopeCheckbox: a,
-    checked: o,
-    children: n,
-    defaultChecked: r,
+    __scopeCheckbox: c,
+    checked: n,
+    children: r,
+    defaultChecked: o,
     disabled: t,
     form: l,
     name: f,
@@ -75,40 +75,40 @@ function ie(e) {
     // @ts-expect-error
     internal_do_not_use_render: i
   } = e, [p, x] = Q({
-    prop: o,
-    defaultProp: r ?? !1,
+    prop: n,
+    defaultProp: o ?? !1,
     onChange: d,
     caller: P
-  }), [m, C] = h.useState(null), [g, c] = h.useState(null), s = h.useRef(!1), _ = m ? !!l || !!m.closest("form") : (
+  }), [h, C] = m.useState(null), [g, a] = m.useState(null), s = m.useRef(!1), _ = h ? !!l || !!h.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
-  ), E = {
+  ), w = {
     checked: p,
     disabled: t,
     setChecked: x,
-    control: m,
+    control: h,
     setControl: C,
     name: f,
     form: l,
     value: k,
     hasConsumerStoppedPropagationRef: s,
     required: b,
-    defaultChecked: v(r) ? !1 : r,
+    defaultChecked: v(o) ? !1 : o,
     isFormControl: _,
     bubbleInput: g,
-    setBubbleInput: c
+    setBubbleInput: a
   };
   return /* @__PURE__ */ u(
     se,
     {
-      scope: a,
-      ...E,
-      children: le(i) ? i(E) : n
+      scope: c,
+      ...w,
+      children: le(i) ? i(w) : r
     }
   );
 }
-var M = "CheckboxTrigger", q = h.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: a, onClick: o, ...n }, r) => {
+var M = "CheckboxTrigger", q = m.forwardRef(
+  ({ __scopeCheckbox: e, onKeyDown: c, onClick: n, ...r }, o) => {
     const {
       control: t,
       value: l,
@@ -119,16 +119,16 @@ var M = "CheckboxTrigger", q = h.forwardRef(
       setChecked: i,
       hasConsumerStoppedPropagationRef: p,
       isFormControl: x,
-      bubbleInput: m
-    } = N(M, e), C = L(r, k), g = h.useRef(d);
-    return h.useEffect(() => {
-      const c = t?.form;
-      if (c) {
+      bubbleInput: h
+    } = N(M, e), C = L(o, k), g = m.useRef(d);
+    return m.useEffect(() => {
+      const a = t?.form;
+      if (a) {
         const s = () => i(g.current);
-        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
+        return a.addEventListener("reset", s), () => a.removeEventListener("reset", s);
       }
     }, [t, i]), /* @__PURE__ */ u(
-      w.button,
+      R.button,
       {
         type: "button",
         role: "checkbox",
@@ -138,25 +138,25 @@ var M = "CheckboxTrigger", q = h.forwardRef(
         "data-disabled": f ? "" : void 0,
         disabled: f,
         value: l,
-        ...n,
+        ...r,
         ref: C,
-        onKeyDown: j(a, (c) => {
-          c.key === "Enter" && c.preventDefault();
+        onKeyDown: j(c, (a) => {
+          a.key === "Enter" && a.preventDefault();
         }),
-        onClick: j(o, (c) => {
-          i((s) => v(s) ? !0 : !s), m && x && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
+        onClick: j(n, (a) => {
+          i((s) => v(s) ? !0 : !s), h && x && (p.current = a.isPropagationStopped(), p.current || a.stopPropagation());
         })
       }
     );
   }
 );
 q.displayName = M;
-var A = h.forwardRef(
-  (e, a) => {
+var A = m.forwardRef(
+  (e, c) => {
     const {
-      __scopeCheckbox: o,
-      name: n,
-      checked: r,
+      __scopeCheckbox: n,
+      name: r,
+      checked: o,
       defaultChecked: t,
       required: l,
       disabled: f,
@@ -168,13 +168,13 @@ var A = h.forwardRef(
     return /* @__PURE__ */ u(
       ie,
       {
-        __scopeCheckbox: o,
-        checked: r,
+        __scopeCheckbox: n,
+        checked: o,
         defaultChecked: t,
         disabled: f,
         required: l,
         onCheckedChange: b,
-        name: n,
+        name: r,
         form: k,
         value: d,
         internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
@@ -182,14 +182,14 @@ var A = h.forwardRef(
             q,
             {
               ...i,
-              ref: a,
-              __scopeCheckbox: o
+              ref: c,
+              __scopeCheckbox: n
             }
           ),
           p && /* @__PURE__ */ u(
             K,
             {
-              __scopeCheckbox: o
+              __scopeCheckbox: n
             }
           )
         ] })
@@ -198,20 +198,20 @@ var A = h.forwardRef(
   }
 );
 A.displayName = P;
-var F = "CheckboxIndicator", D = h.forwardRef(
-  (e, a) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
+var F = "CheckboxIndicator", D = m.forwardRef(
+  (e, c) => {
+    const { __scopeCheckbox: n, forceMount: r, ...o } = e, t = N(F, n);
     return /* @__PURE__ */ u(
       ee,
       {
-        present: n || v(t.checked) || t.checked === !0,
+        present: r || v(t.checked) || t.checked === !0,
         children: /* @__PURE__ */ u(
-          w.span,
+          R.span,
           {
             "data-state": W(t.checked),
             "data-disabled": t.disabled ? "" : void 0,
-            ...r,
-            ref: a,
+            ...o,
+            ref: c,
             style: { pointerEvents: "none", ...e.style }
           }
         )
@@ -220,11 +220,11 @@ var F = "CheckboxIndicator", D = h.forwardRef(
   }
 );
 D.displayName = F;
-var H = "CheckboxBubbleInput", K = h.forwardRef(
-  ({ __scopeCheckbox: e, ...a }, o) => {
+var H = "CheckboxBubbleInput", K = m.forwardRef(
+  ({ __scopeCheckbox: e, ...c }, n) => {
     const {
-      control: n,
-      hasConsumerStoppedPropagationRef: r,
+      control: r,
+      hasConsumerStoppedPropagationRef: o,
       checked: t,
       defaultChecked: l,
       required: f,
@@ -234,36 +234,36 @@ var H = "CheckboxBubbleInput", K = h.forwardRef(
       form: i,
       bubbleInput: p,
       setBubbleInput: x
-    } = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
-    h.useEffect(() => {
+    } = N(H, e), h = L(n, x), C = Y(t), g = Z(r);
+    m.useEffect(() => {
       const s = p;
       if (!s) return;
       const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
         _,
         "checked"
-      ).set, $ = !r.current;
+      ).set, $ = !o.current;
       if (C !== t && O) {
         const G = new Event("click", { bubbles: $ });
         s.indeterminate = v(t), O.call(s, v(t) ? !1 : t), s.dispatchEvent(G);
       }
-    }, [p, C, t, r]);
-    const c = h.useRef(v(t) ? !1 : t);
+    }, [p, C, t, o]);
+    const a = m.useRef(v(t) ? !1 : t);
     return /* @__PURE__ */ u(
-      w.input,
+      R.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: l ?? c.current,
+        defaultChecked: l ?? a.current,
         required: f,
         disabled: d,
         name: b,
         value: k,
         form: i,
-        ...a,
+        ...c,
         tabIndex: -1,
-        ref: m,
+        ref: h,
         style: {
-          ...a.style,
+          ...c.style,
           ...g,
           position: "absolute",
           pointerEvents: "none",
@@ -291,10 +291,10 @@ function W(e) {
 const de = z(
   ({
     ariaLabelledBy: e,
-    className: a,
-    defaultChecked: o,
-    disabled: n,
-    id: r,
+    className: c,
+    defaultChecked: n,
+    disabled: r,
+    id: o,
     label: t,
     labelClassName: l,
     name: f,
@@ -304,44 +304,48 @@ const de = z(
     onChange: i,
     ...p
   }, x) => {
-    const [m, C] = oe(o ?? !1), g = V(), c = X(
+    const [h, C] = oe(n ?? !1), g = V(), a = X(
       (s) => {
         C(s), i?.(s);
       },
       [i, C]
     );
-    return /* @__PURE__ */ B("div", { className: "flex items-center gap-2", "data-theme": d, children: [
+    return /* @__PURE__ */ B("div", { className: "flex items-center gap-4", "data-theme": d, children: [
       /* @__PURE__ */ u(
         A,
         {
-          id: r ?? g,
-          checked: m,
+          id: o ?? g,
+          checked: h,
           ref: x,
           name: f,
-          disabled: n,
+          disabled: r,
           "aria-labelledby": e,
           title: b,
           className: T(
             te({
-              className: a,
+              className: c,
               variant: k,
-              checked: m
+              checked: h
             })
           ),
-          onCheckedChange: c,
+          onCheckedChange: a,
           ...p,
-          children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2 civo:text-slate-700" }) })
+          children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2" }) })
         }
       ),
       t ? /* @__PURE__ */ u(
         "label",
         {
-          htmlFor: f ?? r,
+          htmlFor: f ?? o,
           className: T(
             re({
               className: l
-            })
+            }),
+            {
+              "cursor-not-allowed": r
+            }
           ),
+          onClick: () => !r && a(!h),
           children: t
         }
       ) : null

package/dist/components/Checkbox/Checkbox.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const t = e(
   [
     "cursor-pointer",
     "border",
@@ -12,8 +12,7 @@ const e = r(
     "transition-all",
     "text-slate-800",
     "border-zinc-400",
-    "kubefirst:border-kubefirst-primary",
-    "kubefirst:text-white"
+    "disabled:cursor-not-allowed"
   ],
   {
     variants: {
@@ -29,9 +28,31 @@ const e = r(
       {
         checked: !0,
         class: [
+          "kubefirst:border-kubefirst-primary",
           "kubefirst:bg-kubefirst-primary",
           "bg-aurora-500",
-          "border-aurora-500"
+          "border-aurora-500",
+          "disabled:bg-zinc-300",
+          "disabled:border-transparent",
+          "*:text-metal-900",
+          "kubefirst:*:text-white",
+          "disabled:*:text-white",
+          "dark:disabled:*:text-metal-900",
+          "dark:disabled:bg-aurora-500/45"
+        ]
+      },
+      {
+        checked: !1,
+        class: [
+          "kubefirst:border-kubefirst-primary",
+          "kubefirst:text-white",
+          "border-zinc-400",
+          "disabled:bg-zinc-50",
+          "disabled:border-zinc-300",
+          "dark:disabled:bg-metal-800",
+          "dark:disabled:border-metal-600",
+          "dark:border-metal-600",
+          "dark:bg-metal-800"
         ]
       }
     ],
@@ -39,12 +60,14 @@ const e = r(
       variant: "default"
     }
   }
-), a = r([
+), a = e([
+  "select-none",
   "cursor-pointer",
+  "text-sm",
   "text-slate-800",
   "dark:text-slate-50"
 ]);
 export {
-  e as checkboxVariants,
+  t as checkboxVariants,
   a as labelVariants
 };

package/dist/components/Counter/Counter.js

@@ -0,0 +1,210 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as x } from "../../index-BKjcReYh.js";
+import p, { forwardRef as g, useId as $, useCallback as N } from "react";
+import { cn as y } from "../../utils/index.js";
+import { labelVariants as T, buttonVariants as P, counterVariants as W } from "./Counter.variants.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { P as a } from "../../index-BOE_3f_Z.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 e;
+  }, v.apply(this, arguments);
+}
+function M(e, o) {
+  if (e == null) return {};
+  var r = R(e, o), t, 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]);
+  }
+  return r;
+}
+function R(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]);
+  return r;
+}
+var O = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = M(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+O.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+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;
+  }, b.apply(this, arguments);
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = B(e, o), t, 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]);
+  }
+  return r;
+}
+function B(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]);
+  return r;
+}
+var w = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = C(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", b({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
+  }), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+w.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+w.displayName = "Plus";
+const J = g(
+  ({
+    canDecrement: e = !0,
+    canIncrement: o = !0,
+    className: r,
+    decrementButtonClassName: t,
+    incrementButtonClassName: n,
+    isRequired: i,
+    label: l,
+    max: d = -1 / 0,
+    min: h = 1 / 0,
+    name: j,
+    theme: k,
+    value: z,
+    onChange: m
+  }, I) => {
+    const _ = $(), s = z ?? 0, E = N(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), m?.({ target: { value: c } });
+    }, [s, h, m]), L = N(() => {
+      let c = 0;
+      d === -1 / 0 ? c = s + 1 : c = Math.min(d, s + 1), m?.({ target: { value: c } });
+    }, [s, d, m]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", "data-theme": k, children: [
+      l ? /* @__PURE__ */ f(
+        V,
+        {
+          component: "label",
+          htmlFor: j ?? _,
+          variant: "labelLarge",
+          className: y(T()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600", children: "*" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: E,
+            className: y(
+              P({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(x, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: I,
+            type: "number",
+            value: s,
+            name: j,
+            className: y(W({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: y(
+              P({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(x, { children: "Increment" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  J as Counter
+};