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

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/Filter/Filter.js

@@ -9,7 +9,7 @@ const t = ({
   theme: o = "civo",
   children: r
 }) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
-t.displayName = "Filter";
+t.displayName = "KonstructFilter";
 t.BadgeMultiSelect = l;
 t.DateFilterDropdown = p;
 t.ResetButton = s;

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -2,8 +2,8 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Badge as o } from "../../../Badge/Badge.js";
 import { Button as m } from "../../../Button/Button.js";
 import { Checkbox as k } from "../../../Checkbox/Checkbox.js";
-import { cn as l } from "../../../../utils/index.js";
 import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
+import { cn as r } from "../../../../utils/index.js";
 import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
 import { C as B } from "../../../../chevron-down-DgT-uSF9.js";
 const $ = ({
@@ -14,7 +14,7 @@ const $ = ({
 }) => {
   const {
     wrapperRef: h,
-    isOpen: r,
+    isOpen: l,
     selectedOptions: u,
     selectedCount: c,
     handleOpen: g,
@@ -26,8 +26,8 @@ const $ = ({
     /* @__PURE__ */ t(
       "button",
       {
-        className: l(y(), {
-          "text-slate-700 dark:text-metal-50": r
+        className: r(y(), {
+          "text-slate-700 dark:text-metal-50": l
         }),
         onClick: g,
         children: [
@@ -36,19 +36,18 @@ const $ = ({
           /* @__PURE__ */ e(
             B,
             {
-              className: l(C(), {
-                "rotate-180": r,
-                "text-blue-600 dark:text-aurora-500": r
+              className: r(C(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": l
               })
             }
           )
         ]
       }
     ),
-    r && /* @__PURE__ */ t(
+    l && /* @__PURE__ */ t(
       "div",
       {
-        className: l(
+        className: r(
           "absolute",
           "top-full",
           "mt-1",
@@ -88,7 +87,7 @@ const $ = ({
           /* @__PURE__ */ t(
             "div",
             {
-              className: l(
+              className: r(
                 "flex",
                 "justify-center",
                 "items-center",