@konstructio/ui 0.0.12-alpha.2 → 0.0.12-alpha.21

package/dist/components/Switch/Switch.js

@@ -1,103 +1,103 @@
-import { jsxs as P, jsx as u } from "react/jsx-runtime";
-import * as p from "react";
-import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
-import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
-import { u as O } from "../../index-B_6_jmOO.js";
-import { u as V, a as D } from "../../index-4ecjw_Aj.js";
-import { P as g } from "../../index-BTeAm7mx.js";
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
+import * as h from "react";
+import { forwardRef as _, useRef as H, useId as M, useImperativeHandle as $, useEffect as j } from "react";
+import { a as z, c as B, b as q } from "../../index-Cva-e5M4.js";
+import { u as A } from "../../index-B_6_jmOO.js";
+import { u as F, a as O } from "../../index-4ecjw_Aj.js";
+import { P as R } from "../../index-D7QNmo_D.js";
 import { cn as x } from "../../utils/index.js";
-import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
-import { useTheme as W } from "../../contexts/theme.hook.js";
-var k = "Switch", [X, ie] = q(k), [G, J] = X(k), R = p.forwardRef(
-  (e, s) => {
+import { thumbVariants as V, switchVariants as D } from "./Switch.variants.js";
+import { useTheme as L } from "../../contexts/theme.hook.js";
+var S = "Switch", [U, ae] = B(S), [W, X] = U(S), y = h.forwardRef(
+  (e, d) => {
     const {
       __scopeSwitch: t,
-      name: c,
-      checked: n,
-      defaultChecked: h,
-      required: o,
-      disabled: a,
-      value: i = "on",
+      name: s,
+      checked: a,
+      defaultChecked: n,
+      required: u,
+      disabled: r,
+      value: o = "on",
       onCheckedChange: m,
-      form: r,
+      form: c,
       ...l
-    } = e, [d, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = d ? r || !!d.closest("form") : !0, [S = !1, T] = B({
-      prop: n,
-      defaultProp: h,
+    } = e, [p, b] = h.useState(null), w = A(d, (k) => b(k)), f = h.useRef(!1), C = p ? c || !!p.closest("form") : !0, [v = !1, g] = z({
+      prop: a,
+      defaultProp: n,
       onChange: m
     });
-    return /* @__PURE__ */ P(G, { scope: t, checked: S, disabled: a, children: [
-      /* @__PURE__ */ u(
-        g.button,
+    return /* @__PURE__ */ P(W, { scope: t, checked: v, disabled: r, children: [
+      /* @__PURE__ */ i(
+        R.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": S,
-          "aria-required": o,
-          "data-state": E(S),
-          "data-disabled": a ? "" : void 0,
-          disabled: a,
-          value: i,
+          "aria-checked": v,
+          "aria-required": u,
+          "data-state": T(v),
+          "data-disabled": r ? "" : void 0,
+          disabled: r,
+          value: o,
           ...l,
-          ref: v,
-          onClick: F(e.onClick, (C) => {
-            T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
+          ref: w,
+          onClick: q(e.onClick, (k) => {
+            g((I) => !I), C && (f.current = k.isPropagationStopped(), f.current || k.stopPropagation());
           })
         }
       ),
-      w && /* @__PURE__ */ u(
-        K,
+      C && /* @__PURE__ */ i(
+        G,
         {
-          control: d,
+          control: p,
           bubbles: !f.current,
-          name: c,
-          value: i,
-          checked: S,
-          required: o,
-          disabled: a,
-          form: r,
+          name: s,
+          value: o,
+          checked: v,
+          required: u,
+          disabled: r,
+          form: c,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-R.displayName = k;
-var y = "SwitchThumb", N = p.forwardRef(
-  (e, s) => {
-    const { __scopeSwitch: t, ...c } = e, n = J(y, t);
-    return /* @__PURE__ */ u(
-      g.span,
+y.displayName = S;
+var N = "SwitchThumb", E = h.forwardRef(
+  (e, d) => {
+    const { __scopeSwitch: t, ...s } = e, a = X(N, t);
+    return /* @__PURE__ */ i(
+      R.span,
       {
-        "data-state": E(n.checked),
-        "data-disabled": n.disabled ? "" : void 0,
-        ...c,
-        ref: s
+        "data-state": T(a.checked),
+        "data-disabled": a.disabled ? "" : void 0,
+        ...s,
+        ref: d
       }
     );
   }
 );
-N.displayName = y;
-var K = (e) => {
-  const { control: s, checked: t, bubbles: c = !0, ...n } = e, h = p.useRef(null), o = V(t), a = D(s);
-  return p.useEffect(() => {
-    const i = h.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (o !== t && l) {
-      const d = new Event("click", { bubbles: c });
-      l.call(i, t), i.dispatchEvent(d);
+E.displayName = N;
+var G = (e) => {
+  const { control: d, checked: t, bubbles: s = !0, ...a } = e, n = h.useRef(null), u = F(t), r = O(d);
+  return h.useEffect(() => {
+    const o = n.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (u !== t && l) {
+      const p = new Event("click", { bubbles: s });
+      l.call(o, t), o.dispatchEvent(p);
     }
-  }, [o, t, c]), /* @__PURE__ */ u(
+  }, [u, t, s]), /* @__PURE__ */ i(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
       defaultChecked: t,
-      ...n,
+      ...a,
       tabIndex: -1,
-      ref: h,
+      ref: n,
       style: {
         ...e.style,
-        ...a,
+        ...r,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -106,68 +106,66 @@ var K = (e) => {
     }
   );
 };
-function E(e) {
+function T(e) {
   return e ? "checked" : "unchecked";
 }
-var Q = R, Y = N;
-const ue = _(
+var J = y, K = E;
+const ne = _(
   ({
     name: e,
-    defaultChecked: s,
-    alignment: t = "horizontal",
-    theme: c,
-    thumbClassName: n,
-    className: h,
-    label: o
-  }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), l = M(), { theme: d } = W(), b = c ?? d, v = e ? `${l}-${e}` : l;
-    $(a, () => r.current, [r]), j(() => {
-      r.current && (r.current.value = `${i}`);
-    }, [i]);
-    const f = z(
-      (w) => m(w),
-      []
-    );
-    return /* @__PURE__ */ P(
+    alignment: d = "horizontal",
+    theme: t,
+    thumbClassName: s,
+    className: a,
+    label: n,
+    defaultChecked: u,
+    onChange: r,
+    value: o
+  }, m) => {
+    const c = H(null), l = M(), { theme: p } = L(), b = t ?? p, w = e ? `${l}-${e}` : l;
+    return $(m, () => c.current, [c]), j(() => {
+      c.current && (c.current.value = `${o}`);
+    }, [o]), /* @__PURE__ */ P(
       "div",
       {
         className: x(
           "w-full flex gap-3",
-          t === "vertical" ? "flex-col" : "flex-row"
+          d === "vertical" ? "flex-col" : "flex-row"
         ),
         children: [
-          o ? /* @__PURE__ */ u(
+          n ? /* @__PURE__ */ i(
             "label",
             {
               className: "text-base",
-              htmlFor: v,
+              htmlFor: w,
               style: { paddingRight: 15 },
-              children: o
+              children: n
             }
           ) : null,
-          /* @__PURE__ */ u(
-            Q,
+          /* @__PURE__ */ i(
+            J,
             {
-              id: v,
-              defaultChecked: s,
-              onCheckedChange: f,
-              className: x(U({ theme: b, className: h })),
-              "aria-label": o,
-              children: /* @__PURE__ */ u(
-                Y,
+              id: w,
+              defaultChecked: u,
+              checked: o,
+              onCheckedChange: (f) => r == null ? void 0 : r(f),
+              className: x(D({ theme: b, className: a })),
+              "aria-label": n,
+              children: /* @__PURE__ */ i(
+                K,
                 {
-                  className: L({
+                  className: V({
                     theme: b,
-                    className: n
+                    className: s
                   })
                 }
               )
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ i(
             "input",
             {
-              ref: r,
+              ref: c,
               name: e,
               type: "text",
               className: "hidden",
@@ -180,5 +178,5 @@ const ue = _(
   }
 );
 export {
-  ue as Switch
+  ne as Switch
 };

package/dist/components/Switch/Switch.variants.js

@@ -1,8 +1,8 @@
 import { c as t } from "../../index-BNmRGtA6.js";
 const e = t(
   [
-    "w-12",
-    "h-7",
+    "w-[44px]",
+    "h-[22px]",
     "flex",
     "items-center",
     "rounded-full",
@@ -28,8 +28,8 @@ const e = t(
 ), r = t(
   [
     "block",
-    "w-6",
-    "h-6",
+    "w-[18px]",
+    "h-[18px]",
     "bg-white",
     "rounded-full",
     "shadow-md",

package/dist/components/Table/Table.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as p } from "../../utils/index.js";
+import { tableVariants as f } from "./Table.variants.js";
+import { Head as s } from "./components/Head.js";
+import { Row as l } from "./components/Row.js";
+import { Filter as n } from "./components/Filter.js";
+import { Body as c } from "./components/Body.js";
+import { useTheme as d } from "../../contexts/theme.hook.js";
+const o = ({ children: r, className: t, theme: m, ...e }) => {
+  const { theme: i } = d();
+  return /* @__PURE__ */ a(
+    "table",
+    {
+      className: p(
+        f({
+          className: t,
+          theme: m ?? i
+        })
+      ),
+      ...e,
+      children: r
+    }
+  );
+};
+o.Head = s;
+o.Row = l;
+o.Filter = n;
+o.Body = c;
+export {
+  o as Table
+};

package/dist/components/Table/Table.variants.js

@@ -0,0 +1,78 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t(
+  [
+    "table-auto",
+    "w-full",
+    "border-collapse",
+    "border-spacing-0",
+    "rounded",
+    "shadow-sm"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), a = t(
+  [
+    "h-8",
+    "text-inherit",
+    "[&>td]:py-3",
+    "[&>td]:px-4",
+    "text-slate-700",
+    "hover:bg-zinc-100",
+    "hover:cursor-pointer"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      isSelected: {
+        true: "bg-purple-50",
+        false: ""
+      }
+    }
+  }
+), o = t(
+  [
+    "h-[18px]",
+    "bg-slate-100",
+    "[&>tr>th]:py-3",
+    "[&>tr>th]:px-4",
+    "[&>tr>th]:uppercase",
+    "text-left"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      }
+    }
+  }
+), s = t([], {
+  variants: {
+    theme: {
+      kubefirst: "",
+      colony: "",
+      civo: ""
+    }
+  }
+});
+export {
+  s as bodyVariants,
+  o as headVariants,
+  a as rowVariants,
+  r as tableVariants
+};

package/dist/components/Table/components/Body.js

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import { bodyVariants as n } from "../Table.variants.js";
+import { cn as i } from "../../../utils/index.js";
+import { useTheme as p } from "../../../contexts/theme.hook.js";
+const d = ({
+  children: o,
+  className: t,
+  theme: e,
+  ...m
+}) => {
+  const { theme: r } = p();
+  return /* @__PURE__ */ s(
+    "tbody",
+    {
+      className: i(
+        n({
+          className: t,
+          theme: e ?? r
+        })
+      ),
+      ...m,
+      children: o
+    }
+  );
+};
+export {
+  d as Body
+};

package/dist/components/Table/components/Filter.js

@@ -0,0 +1,9 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Input as i } from "../../Input/Input.js";
+const o = ({ children: s, ...r }) => /* @__PURE__ */ t("div", { className: "flex px-4 py-6 rounded-t", children: [
+  /* @__PURE__ */ e(i, { className: "!w-1/3", ...r }),
+  /* @__PURE__ */ e("div", { className: "w-1/4 flex justify-end", children: s })
+] });
+export {
+  o as Filter
+};

package/dist/components/Table/components/Head.js

@@ -0,0 +1,28 @@
+import { jsx as a } from "react/jsx-runtime";
+import { headVariants as s } from "../Table.variants.js";
+import { cn as h } from "../../../utils/index.js";
+import { useTheme as n } from "../../../contexts/theme.hook.js";
+const d = ({
+  children: e,
+  className: t,
+  theme: m,
+  ...o
+}) => {
+  const { theme: r } = n();
+  return /* @__PURE__ */ a(
+    "thead",
+    {
+      className: h(
+        s({
+          className: t,
+          theme: m ?? r
+        })
+      ),
+      ...o,
+      children: e
+    }
+  );
+};
+export {
+  d as Head
+};

package/dist/components/Table/components/Row.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { rowVariants as p } from "../Table.variants.js";
+import { cn as a } from "../../../utils/index.js";
+import { useTheme as f } from "../../../contexts/theme.hook.js";
+const w = ({
+  children: t,
+  className: o,
+  theme: e,
+  width: r,
+  isSelected: m,
+  onSelect: s,
+  ...n
+}) => {
+  const { theme: i } = f();
+  return /* @__PURE__ */ c(
+    "tr",
+    {
+      style: { width: r },
+      onClick: s,
+      className: a(
+        p({
+          className: o,
+          theme: e ?? i,
+          isSelected: m
+        })
+      ),
+      ...n,
+      children: t
+    }
+  );
+};
+export {
+  w as Row
+};

package/dist/components/Tag/Tag.js

@@ -1,7 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as i } from "../../utils/index.js";
-import { tagVariants as m } from "./Tag.variants.js";
-const n = ({ label: t, color: a }) => /* @__PURE__ */ r("div", { className: i(m({ color: a })), children: /* @__PURE__ */ r("span", { className: "text-inherit", children: t }) });
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { S as r } from "../../index-B_6_jmOO.js";
+import { cn as o } from "../../utils/index.js";
+import { tagVariants as c } from "./Tag.variants.js";
+const u = ({
+  label: i,
+  color: s,
+  rightIcon: t,
+  leftIcon: e,
+  className: l,
+  "data-value": m
+}) => /* @__PURE__ */ n("div", { className: o(c({ color: s, className: l })), "data-value": m, children: [
+  e ? /* @__PURE__ */ a(r, { className: "text-inherit", children: e }) : null,
+  /* @__PURE__ */ a("span", { className: "text-inherit", children: i }),
+  t ? /* @__PURE__ */ a(r, { className: "text-inherit", children: t }) : null
+] });
 export {
-  n as Tag
+  u as Tag
 };

package/dist/components/Tag/Tag.variants.js

@@ -1,6 +1,16 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const f = e(
-  ["px-2", "py-1", "rounded-md", "w-max", "text-xs"],
+  [
+    "px-2",
+    "py-1",
+    "rounded-md",
+    "w-max",
+    "text-xs",
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-1"
+  ],
   {
     variants: {
       color: {

package/dist/components/TagSelect/TagSelect.js

@@ -1,73 +1,8 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { forwardRef as g, useId as w, useRef as C, useImperativeHandle as T, useEffect as R } from "react";
-import { cn as r } from "../../utils/index.js";
-import { Tag as d } from "../Tag/Tag.js";
-import { useTagSelect as S } from "./hooks/useTagSelect.js";
-import { tagSelectVariants as k, tagItemVariants as I, tagListVariants as V } from "./TagSelect.variants.js";
-import { C as j } from "../../chevron-up-DgLBQCKD.js";
-import { useTheme as y } from "../../contexts/theme.hook.js";
-const z = g(({ label: s, name: l, options: f, placeholder: h = "Select a value...", theme: o }, x) => {
-  const c = w(), { theme: a } = y(), t = C(null), {
-    isOpen: n,
-    selectedTag: m,
-    value: p,
-    wrapperRef: b,
-    handleClickTag: N,
-    handleOpenDropdown: v
-  } = S();
-  return T(x, () => t.current, [t]), R(() => {
-    t.current && (t.current.value = p);
-  }, [p]), /* @__PURE__ */ u("div", { ref: b, className: "flex flex-col w-full relative", children: [
-    s ? /* @__PURE__ */ e("label", { className: "m-2 cursor-pointer", htmlFor: l ?? c, children: s }) : null,
-    /* @__PURE__ */ u(
-      "div",
-      {
-        id: l ?? c,
-        className: r(k({ theme: o ?? a })),
-        role: "combobox",
-        onClick: v,
-        "aria-expanded": n,
-        children: [
-          m ? /* @__PURE__ */ e(d, { ...m }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
-          /* @__PURE__ */ e(
-            j,
-            {
-              className: r(
-                "w-4 h-4 text-inherit transition-all duration-50",
-                n ? "rotate-0" : "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e("input", { ref: t, type: "text", name: l, className: "hidden" }),
-    n ? /* @__PURE__ */ e(
-      "ul",
-      {
-        role: "listbox",
-        className: r(V({ theme: o ?? a })),
-        children: f.map((i) => /* @__PURE__ */ e(
-          "li",
-          {
-            className: r(I({ theme: o ?? a })),
-            role: "option",
-            children: /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                role: "button",
-                className: "m-0 p-0 w-full",
-                onClick: () => N(i),
-                children: /* @__PURE__ */ e(d, { label: i.label, color: i.color })
-              }
-            )
-          }
-        ))
-      }
-    ) : null
-  ] });
-});
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { TagSelectProvider as f } from "./contexts/TagSelect.provider.js";
+import { Wrapper as i } from "./components/Wrapper/Wrapper.js";
+const n = p(({ options: o, multiselect: e, ...t }, m) => /* @__PURE__ */ r(f, { defaultOptions: o, multiselect: e, children: /* @__PURE__ */ r(i, { ref: m, ...t }) }));
 export {
-  z as TagSelect
+  n as TagSelect
 };