@konstructio/ui 0.0.13-alpha.2 → 0.1.0-alpha.3

package/dist/components/Checkbox/Checkbox.js

@@ -1,238 +1,348 @@
-import { jsxs as S, jsx as f } from "react/jsx-runtime";
-import * as u from "react";
-import j, { forwardRef as _, useId as A, useCallback as H } from "react";
-import { u as K } from "../../index-Bk324h27.js";
-import { a as W, c as $, b as I } from "../../index-bYyfdsls.js";
-import { u as q, a as F } from "../../index-Bry5AFQ2.js";
-import { P as V } from "../../index-G_6jG4Qc.js";
-import { P as z } from "../../index-g-TFwd6Y.js";
-import { cn as N } from "../../utils/index.js";
-import { checkboxVariants as X, labelVariants as G } from "./Checkbox.variants.js";
-import { useToggle as J } from "../../hooks/useToggle.js";
-import { P } from "../../index-C5psggHV.js";
-function E() {
-  return E = Object.assign || function(e) {
-    for (var s = 1; s < arguments.length; s++) {
-      var t = arguments[s];
-      for (var o in t)
-        Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
+import { jsx as u, jsxs as B, Fragment as U } from "react/jsx-runtime";
+import * as h from "react";
+import S, { forwardRef as z, useId as V, useCallback as X } from "react";
+import { u as L } from "../../index-tIydFizp.js";
+import { c as J, a as Q, b as j } from "../../index-Cq1I1cG9.js";
+import { u as Y, a as Z } from "../../index-Bc1LNrRD.js";
+import { P as ee } from "../../index-Y44iCJcQ.js";
+import { P as w } from "../../index-ObZsP5Eh.js";
+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-C5psggHV.js";
+function R() {
+  return R = Object.assign || function(e) {
+    for (var c = 1; c < arguments.length; c++) {
+      var o = arguments[c];
+      for (var n in o)
+        Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
     }
     return e;
-  }, E.apply(this, arguments);
+  }, R.apply(this, arguments);
 }
-function Q(e, s) {
+function ne(e, c) {
   if (e == null) return {};
-  var t = U(e, s), o, n;
+  var o = ce(e, c), n, r;
   if (Object.getOwnPropertySymbols) {
-    var r = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < r.length; n++)
-      o = r[n], !(s.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(e, o) && (t[o] = e[o]);
+    var t = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < t.length; r++)
+      n = t[r], !(c.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
   }
-  return t;
+  return o;
 }
-function U(e, s) {
+function ce(e, c) {
   if (e == null) return {};
-  var t = {}, o = Object.keys(e), n, r;
-  for (r = 0; r < o.length; r++)
-    n = o[r], !(s.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
+  var o = {}, n = Object.keys(e), r, t;
+  for (t = 0; t < n.length; t++)
+    r = n[t], !(c.indexOf(r) >= 0) && (o[r] = e[r]);
+  return o;
 }
-var O = _(function(e, s) {
-  var t = e.color, o = t === void 0 ? "currentColor" : t, n = e.size, r = n === void 0 ? 24 : n, l = Q(e, ["color", "size"]);
-  return /* @__PURE__ */ j.createElement("svg", E({
-    ref: s,
+var I = z(function(e, c) {
+  var o = e.color, n = o === void 0 ? "currentColor" : o, r = e.size, t = r === void 0 ? 24 : r, i = ne(e, ["color", "size"]);
+  return /* @__PURE__ */ S.createElement("svg", R({
+    ref: c,
     xmlns: "http://www.w3.org/2000/svg",
-    width: r,
-    height: r,
+    width: t,
+    height: t,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: o,
+    stroke: n,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, l), /* @__PURE__ */ j.createElement("polyline", {
+  }, i), /* @__PURE__ */ S.createElement("polyline", {
     points: "20 6 9 17 4 12"
   }));
 });
-O.propTypes = {
-  color: P.string,
-  size: P.oneOfType([P.string, P.number])
+I.propTypes = {
+  color: y.string,
+  size: y.oneOfType([y.string, y.number])
 };
-O.displayName = "Check";
-var R = "Checkbox", [Y, he] = $(R), [Z, ee] = Y(R), L = u.forwardRef(
-  (e, s) => {
+I.displayName = "Check";
+var P = "Checkbox", [ae, ge] = J(P), [se, N] = ae(P);
+function ie(e) {
+  const {
+    __scopeCheckbox: c,
+    checked: o,
+    children: n,
+    defaultChecked: r,
+    disabled: t,
+    form: i,
+    name: f,
+    onCheckedChange: l,
+    required: b,
+    value: k = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: a
+  } = e, [p, C] = Q({
+    prop: o,
+    defaultProp: r ?? !1,
+    onChange: l,
+    caller: P
+  }), [m, v] = h.useState(null), [g, s] = h.useState(null), d = h.useRef(!1), _ = m ? !!i || !!m.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), E = {
+    checked: p,
+    disabled: t,
+    setChecked: C,
+    control: m,
+    setControl: v,
+    name: f,
+    form: i,
+    value: k,
+    hasConsumerStoppedPropagationRef: d,
+    required: b,
+    defaultChecked: x(r) ? !1 : r,
+    isFormControl: _,
+    bubbleInput: g,
+    setBubbleInput: s
+  };
+  return /* @__PURE__ */ u(
+    se,
+    {
+      scope: c,
+      ...E,
+      children: le(a) ? a(E) : n
+    }
+  );
+}
+var M = "CheckboxTrigger", q = h.forwardRef(
+  ({ __scopeCheckbox: e, onKeyDown: c, onClick: o, ...n }, r) => {
     const {
-      __scopeCheckbox: t,
-      name: o,
-      checked: n,
-      defaultChecked: r,
-      required: l,
-      disabled: c,
-      value: b = "on",
-      onCheckedChange: C,
-      form: d,
-      ...p
-    } = e, [i, h] = u.useState(null), k = K(s, (a) => h(a)), y = u.useRef(!1), g = i ? d || !!i.closest("form") : !0, [v = !1, w] = W({
-      prop: n,
-      defaultProp: r,
-      onChange: C
-    }), M = u.useRef(v);
-    return u.useEffect(() => {
-      const a = i == null ? void 0 : i.form;
-      if (a) {
-        const x = () => w(M.current);
-        return a.addEventListener("reset", x), () => a.removeEventListener("reset", x);
+      control: t,
+      value: i,
+      disabled: f,
+      checked: l,
+      required: b,
+      setControl: k,
+      setChecked: a,
+      hasConsumerStoppedPropagationRef: p,
+      isFormControl: C,
+      bubbleInput: m
+    } = N(M, e), v = L(r, k), g = h.useRef(l);
+    return h.useEffect(() => {
+      const s = t == null ? void 0 : t.form;
+      if (s) {
+        const d = () => a(g.current);
+        return s.addEventListener("reset", d), () => s.removeEventListener("reset", d);
       }
-    }, [i, w]), /* @__PURE__ */ S(Z, { scope: t, state: v, disabled: c, children: [
-      /* @__PURE__ */ f(
-        z.button,
-        {
-          type: "button",
-          role: "checkbox",
-          "aria-checked": m(v) ? "mixed" : v,
-          "aria-required": l,
-          "data-state": B(v),
-          "data-disabled": c ? "" : void 0,
-          disabled: c,
-          value: b,
-          ...p,
-          ref: k,
-          onKeyDown: I(e.onKeyDown, (a) => {
-            a.key === "Enter" && a.preventDefault();
-          }),
-          onClick: I(e.onClick, (a) => {
-            w((x) => m(x) ? !0 : !x), g && (y.current = a.isPropagationStopped(), y.current || a.stopPropagation());
-          })
-        }
-      ),
-      g && /* @__PURE__ */ f(
-        te,
-        {
-          control: i,
-          bubbles: !y.current,
-          name: o,
-          value: b,
-          checked: v,
-          required: l,
-          disabled: c,
-          form: d,
-          style: { transform: "translateX(-100%)" },
-          defaultChecked: m(r) ? !1 : r
-        }
-      )
-    ] });
+    }, [t, a]), /* @__PURE__ */ u(
+      w.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": x(l) ? "mixed" : l,
+        "aria-required": b,
+        "data-state": $(l),
+        "data-disabled": f ? "" : void 0,
+        disabled: f,
+        value: i,
+        ...n,
+        ref: v,
+        onKeyDown: j(c, (s) => {
+          s.key === "Enter" && s.preventDefault();
+        }),
+        onClick: j(o, (s) => {
+          a((d) => x(d) ? !0 : !d), m && C && (p.current = s.isPropagationStopped(), p.current || s.stopPropagation());
+        })
+      }
+    );
   }
 );
-L.displayName = R;
-var T = "CheckboxIndicator", D = u.forwardRef(
-  (e, s) => {
-    const { __scopeCheckbox: t, forceMount: o, ...n } = e, r = ee(T, t);
-    return /* @__PURE__ */ f(V, { present: o || m(r.state) || r.state === !0, children: /* @__PURE__ */ f(
-      z.span,
+q.displayName = M;
+var A = h.forwardRef(
+  (e, c) => {
+    const {
+      __scopeCheckbox: o,
+      name: n,
+      checked: r,
+      defaultChecked: t,
+      required: i,
+      disabled: f,
+      value: l,
+      onCheckedChange: b,
+      form: k,
+      ...a
+    } = e;
+    return /* @__PURE__ */ u(
+      ie,
       {
-        "data-state": B(r.state),
-        "data-disabled": r.disabled ? "" : void 0,
-        ...n,
-        ref: s,
-        style: { pointerEvents: "none", ...e.style }
+        __scopeCheckbox: o,
+        checked: r,
+        defaultChecked: t,
+        disabled: f,
+        required: i,
+        onCheckedChange: b,
+        name: n,
+        form: k,
+        value: l,
+        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
+          /* @__PURE__ */ u(
+            q,
+            {
+              ...a,
+              ref: c,
+              __scopeCheckbox: o
+            }
+          ),
+          p && /* @__PURE__ */ u(
+            W,
+            {
+              __scopeCheckbox: o
+            }
+          )
+        ] })
       }
-    ) });
+    );
   }
 );
-D.displayName = T;
-var te = (e) => {
-  const { control: s, checked: t, bubbles: o = !0, defaultChecked: n, ...r } = e, l = u.useRef(null), c = q(t), b = F(s);
-  u.useEffect(() => {
-    const d = l.current, p = window.HTMLInputElement.prototype, h = Object.getOwnPropertyDescriptor(p, "checked").set;
-    if (c !== t && h) {
-      const k = new Event("click", { bubbles: o });
-      d.indeterminate = m(t), h.call(d, m(t) ? !1 : t), d.dispatchEvent(k);
-    }
-  }, [c, t, o]);
-  const C = u.useRef(m(t) ? !1 : t);
-  return /* @__PURE__ */ f(
-    "input",
-    {
-      type: "checkbox",
-      "aria-hidden": !0,
-      defaultChecked: n ?? C.current,
-      ...r,
-      tabIndex: -1,
-      ref: l,
-      style: {
-        ...e.style,
-        ...b,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
+A.displayName = P;
+var F = "CheckboxIndicator", D = h.forwardRef(
+  (e, c) => {
+    const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
+    return /* @__PURE__ */ u(
+      ee,
+      {
+        present: n || x(t.checked) || t.checked === !0,
+        children: /* @__PURE__ */ u(
+          w.span,
+          {
+            "data-state": $(t.checked),
+            "data-disabled": t.disabled ? "" : void 0,
+            ...r,
+            ref: c,
+            style: { pointerEvents: "none", ...e.style }
+          }
+        )
       }
-    }
-  );
-};
-function m(e) {
+    );
+  }
+);
+D.displayName = F;
+var H = "CheckboxBubbleInput", W = h.forwardRef(
+  ({ __scopeCheckbox: e, ...c }, o) => {
+    const {
+      control: n,
+      hasConsumerStoppedPropagationRef: r,
+      checked: t,
+      defaultChecked: i,
+      required: f,
+      disabled: l,
+      name: b,
+      value: k,
+      form: a,
+      bubbleInput: p,
+      setBubbleInput: C
+    } = N(H, e), m = L(o, C), v = Y(t), g = Z(n);
+    h.useEffect(() => {
+      const d = p;
+      if (!d) return;
+      const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
+        _,
+        "checked"
+      ).set, G = !r.current;
+      if (v !== t && O) {
+        const K = new Event("click", { bubbles: G });
+        d.indeterminate = x(t), O.call(d, x(t) ? !1 : t), d.dispatchEvent(K);
+      }
+    }, [p, v, t, r]);
+    const s = h.useRef(x(t) ? !1 : t);
+    return /* @__PURE__ */ u(
+      w.input,
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: i ?? s.current,
+        required: f,
+        disabled: l,
+        name: b,
+        value: k,
+        form: a,
+        ...c,
+        tabIndex: -1,
+        ref: m,
+        style: {
+          ...c.style,
+          ...g,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+W.displayName = H;
+function le(e) {
+  return typeof e == "function";
+}
+function x(e) {
   return e === "indeterminate";
 }
-function B(e) {
-  return m(e) ? "indeterminate" : e ? "checked" : "unchecked";
+function $(e) {
+  return x(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-var re = L, oe = D;
-const be = _(
+const ye = z(
   ({
     ariaLabelledBy: e,
-    className: s,
-    defaultChecked: t,
-    disabled: o,
-    id: n,
-    label: r,
-    labelClassName: l,
-    name: c,
-    theme: b,
-    title: C,
-    variant: d,
-    onChange: p
-  }, i) => {
-    const [h, k] = J(t), y = A(), g = H(() => {
-      k(), p == null || p();
-    }, [p, k]);
-    return /* @__PURE__ */ S("div", { className: "flex items-center gap-2", "data-theme": b, children: [
-      /* @__PURE__ */ f(
-        re,
+    className: c,
+    defaultChecked: o,
+    disabled: n,
+    id: r,
+    label: t,
+    labelClassName: i,
+    name: f,
+    theme: l,
+    title: b,
+    variant: k,
+    onChange: a
+  }, p) => {
+    const [C, m] = oe(o), v = V(), g = X(() => {
+      m(), a == null || a();
+    }, [a, m]);
+    return /* @__PURE__ */ B("div", { className: "flex items-center gap-2", "data-theme": l, children: [
+      /* @__PURE__ */ u(
+        A,
         {
-          id: n ?? y,
-          checked: h,
-          ref: i,
-          name: c,
-          disabled: o,
+          id: r ?? v,
+          checked: C,
+          ref: p,
+          name: f,
+          disabled: n,
           "aria-labelledby": e,
-          title: C,
-          className: N(
-            X({
-              className: s,
-              variant: d,
-              checked: h
+          title: b,
+          className: T(
+            te({
+              className: c,
+              variant: k,
+              checked: C
             })
           ),
           onCheckedChange: g,
-          children: /* @__PURE__ */ f(oe, { children: /* @__PURE__ */ f(O, { className: "w-4 h-4 stroke-2" }) })
+          children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2" }) })
         }
       ),
-      r ? /* @__PURE__ */ f(
+      t ? /* @__PURE__ */ u(
         "label",
         {
-          htmlFor: c ?? n,
-          className: N(
-            G({
-              variant: d,
-              className: l
+          htmlFor: f ?? r,
+          className: T(
+            re({
+              className: i
             })
           ),
-          children: r
+          children: t
         }
       ) : null
     ] });
   }
 );
 export {
-  be as Checkbox
+  ye as Checkbox
 };

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

@@ -1,5 +1,5 @@
 import { c as r } from "../../index-BNmRGtA6.js";
-const e = r(
+const t = r(
   [
     "cursor-pointer",
     "border",
@@ -9,9 +9,11 @@ const e = r(
     "flex",
     "justify-center",
     "items-center",
+    "transition-all",
     "text-white",
     "border-kubefirst-primary",
-    "colony:border-red-700"
+    "colony:border-red-700",
+    "civo:border-civo-primary"
   ],
   {
     variants: {
@@ -26,24 +28,19 @@ const e = r(
     compoundVariants: [
       {
         checked: !0,
-        class: ["bg-kubefirst-primary", "colony:bg-red-700"]
+        class: [
+          "bg-kubefirst-primary",
+          "colony:bg-red-700",
+          "civo:bg-civo-primary"
+        ]
       }
     ],
     defaultVariants: {
       variant: "default"
     }
   }
-), t = r(["cursor-pointer"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
+), a = r(["cursor-pointer", "text-slate-800"]);
 export {
-  e as checkboxVariants,
-  t as labelVariants
+  t as checkboxVariants,
+  a as labelVariants
 };

package/dist/components/Command/Command.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { R as s, D as p } from "../../index-DvFiic6N.js";
-import { V as l } from "../../index-CWKdynYu.js";
+import { R as s, D as p } from "../../index-Ud3-A7-K.js";
+import { V as l } from "../../index-BRcC_VTj.js";
 import { cn as m } from "../../utils/index.js";
 import { wrapperVariants as f } from "./Command.variants.js";
 import { DialogContent as c } from "./components/DialogContent.js";

package/dist/components/Command/components/Command.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-dRxIWVBr.js";
+import { _ as o } from "../../../index-DmCJ8fIR.js";
 const s = p(({ className: r, children: a, ...e }, i) => /* @__PURE__ */ m(o, { ref: i, className: r, ...e, children: /* @__PURE__ */ m("div", { className: "w-[500px]", children: a }) }));
 s.displayName = o.displayName;
 export {

package/dist/components/Command/components/CommandEmpty.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as m } from "../../../index-dRxIWVBr.js";
+import { _ as m } from "../../../index-DmCJ8fIR.js";
 const r = p((t, e) => /* @__PURE__ */ o(
   m.Empty,
   {

package/dist/components/Command/components/CommandGroup.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-dRxIWVBr.js";
+import { _ as o } from "../../../index-DmCJ8fIR.js";
 import { cn as a } from "../../../utils/index.js";
 const t = p(({ className: r, ...m }, d) => /* @__PURE__ */ e(
   o.Group,

package/dist/components/Command/components/CommandInput.js

@@ -1,5 +1,5 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { _ as m } from "../../../index-dRxIWVBr.js";
+import { _ as m } from "../../../index-DmCJ8fIR.js";
 import s, { forwardRef as u } from "react";
 import { cn as f } from "../../../utils/index.js";
 import { searchInconInputVariants as v, inputVariants as g } from "../Command.variants.js";

package/dist/components/Command/components/CommandItem.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as i, useContext as p, useCallback as c } from "react";
-import { _ as r } from "../../../index-dRxIWVBr.js";
+import { _ as r } from "../../../index-DmCJ8fIR.js";
 import { cn as l } from "../../../utils/index.js";
 import { CommandContext as u } from "../contexts/Command.context.js";
 const f = i(({ className: a, onSelect: e, ...s }, o) => {

package/dist/components/Command/components/CommandList.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { _ as o } from "../../../index-dRxIWVBr.js";
+import { _ as o } from "../../../index-DmCJ8fIR.js";
 import { cn as t } from "../../../utils/index.js";
 const e = s(({ className: m, ...r }, a) => /* @__PURE__ */ i(
   o.List,

package/dist/components/Command/components/CommandSeparator.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as r } from "../../../index-dRxIWVBr.js";
+import { _ as r } from "../../../index-DmCJ8fIR.js";
 import { cn as t } from "../../../utils/index.js";
 const s = p(({ className: o, ...a }, m) => /* @__PURE__ */ e(
   r.Separator,