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

package/dist/components/Select/contexts/select.provider.js

@@ -0,0 +1,58 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as e, useRef as f, useCallback as T, useEffect as p } from "react";
+import { SelectContext as N } from "./select.context.js";
+import { useToggle as O } from "../../../hooks/useToggle.js";
+const c = 1, R = 300, V = ({
+  children: C,
+  value: E,
+  name: i,
+  highlightSearch: S = !1,
+  options: n,
+  onChange: a,
+  onBlur: u
+}) => {
+  const [d, l] = e(n), v = f(S), [F, g] = O(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = f(void 0), D = T(
+    (r, m) => {
+      m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: { value: r, name: i ?? "" } }), u?.(), t.current = setTimeout(() => {
+        h(!1);
+      }, R);
+    },
+    [a, i, u]
+  ), G = T(
+    (r) => {
+      g(r), o(!0), s(c);
+    },
+    [g]
+  );
+  return p(() => {
+    l(n);
+  }, [n.length]), p(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ L(
+    N.Provider,
+    {
+      value: {
+        highlightSearchEnabled: v.current,
+        isOpen: F,
+        searchTerm: P,
+        value: E,
+        canFilter: b,
+        canContinueFetching: A,
+        page: _,
+        options: d,
+        isTyping: y,
+        setOptions: l,
+        setPage: s,
+        setCanContinueFetching: o,
+        setCanFilter: x,
+        setSearchTerm: I,
+        setValue: D,
+        toggleOpen: G
+      },
+      children: C
+    }
+  );
+};
+export {
+  V as SelectProvider
+};

package/dist/components/{Dropdown → Select}/hooks/useNavigationList.js

@@ -1,6 +1,6 @@
 import { useRef as g, useEffect as a } from "react";
-import { useDropdownContext as k } from "../contexts/dropdown.hook.js";
-const A = ({
+import { useSelectContext as k } from "../contexts/select.hook.js";
+const d = ({
   searchable: o,
   ulRef: n,
   wrapperInputRef: e,
@@ -46,5 +46,5 @@ const A = ({
   }, [s]);
 };
 export {
-  A as useNavigationUlList
+  d as useNavigationUlList
 };

package/dist/components/{Dropdown/hooks/useDropdown.js → Select/hooks/useSelect.js}

@@ -1,22 +1,22 @@
-import { useRef as m, useEffect as c, useCallback as b } from "react";
-import { useDropdownContext as L } from "../contexts/dropdown.hook.js";
-const p = ({
+import { useRef as m, useEffect as c, useCallback as w } from "react";
+import { useSelectContext as L } from "../contexts/select.hook.js";
+const y = ({
   ulRef: f,
-  inputRef: t,
-  disabled: w,
+  inputRef: r,
+  disabled: E,
   internalValue: u,
   onBlur: g
 }) => {
-  const r = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
+  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
   c(() => {
-    const e = new AbortController(), o = (l) => {
+    const e = new AbortController(), s = (l) => {
       l.key === "Escape" && n(!1);
-    }, s = (l) => {
-      r.current?.contains(l.target) || n(!1);
+    }, o = (l) => {
+      t.current?.contains(l.target) || n(!1);
     };
-    return document.addEventListener("keydown", o, {
+    return document.addEventListener("keydown", s, {
       signal: e.signal
-    }), document.addEventListener("mousedown", s, {
+    }), document.addEventListener("mousedown", o, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -29,20 +29,20 @@ const p = ({
     ), a.current?.addEventListener(
       "focusin",
       (l) => {
-        !w && l.target?.matches(":focus-visible") && n(!0);
+        !E && l.target?.matches(":focus-visible") && n(!0);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
-  }, [n, r]), c(() => {
+  }, [n, t]), c(() => {
     const e = new AbortController();
     return a.current?.addEventListener(
       "keydown",
-      (o) => {
-        if (o.key === "ArrowDown") {
-          const s = f.current?.querySelector("li");
-          s && s.focus();
+      (s) => {
+        if (s.key === "ArrowDown") {
+          const o = f.current?.querySelector("li");
+          o && o.focus();
         }
       },
       { signal: e.signal }
@@ -51,13 +51,13 @@ const p = ({
     };
   }, [a, f]), c(() => {
     const e = new AbortController();
-    return t?.current?.addEventListener(
+    return r?.current?.addEventListener(
       "focusin",
       () => {
         v(u?.value ?? ""), d(!1);
       },
       { signal: e.signal }
-    ), t?.current?.addEventListener(
+    ), r?.current?.addEventListener(
       "focusout",
       () => {
         d(!0);
@@ -69,35 +69,35 @@ const p = ({
         d(!1);
       },
       { signal: e.signal }
-    ), r.current?.addEventListener(
+    ), t.current?.addEventListener(
       "focusout",
-      (o) => {
-        r.current?.contains(o.relatedTarget) || n(!1);
+      (s) => {
+        t.current?.contains(s.relatedTarget) || n(!1);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
   }, [i]), c(() => {
-    t?.current && (t.current.value = i && u?.value || "");
+    r?.current && (r.current.value = i && u?.value || "");
   }, [u, i]), c(() => {
     const e = new AbortController();
-    return r.current?.addEventListener("focusout", (o) => {
-      const s = o.relatedTarget;
-      (!s || !r.current?.contains(s)) && (t?.current?.value || g?.());
+    return t.current?.addEventListener("focusout", (s) => {
+      const o = s.relatedTarget;
+      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
     }), () => {
       e.abort();
     };
-  }, [n, r, v, g, i]);
-  const E = b(() => {
-    n(!0), requestAnimationFrame(() => t?.current?.focus());
-  }, [t, n]);
+  }, [n, t, v, g, i]);
+  const b = w(() => {
+    n(!0), requestAnimationFrame(() => r?.current?.focus());
+  }, [r, n]);
   return {
-    wrapperRef: r,
+    wrapperRef: t,
     wrapperInputRef: a,
-    handleOpen: E
+    handleOpen: b
   };
 };
 export {
-  p as useDropdown
+  y as useSelect
 };

package/dist/components/Switch/Switch.js

@@ -1,115 +1,116 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
-import * as h from "react";
-import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
-import { a as A, c as U, P as N, b as q } from "../../index-DKfEnhKr.js";
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import * as p from "react";
+import { forwardRef as M, useRef as $, useId as j, useImperativeHandle as z, useEffect as A } from "react";
+import { a as U, c as q, P as N, b as F } from "../../index-DKfEnhKr.js";
 import { u as P } from "../../index-DLcqcWxM.js";
-import { u as F } from "../../index-BZPx6jYI.js";
-import { u as L } from "../../index-DtEcCIrM.js";
-import { cn as R } from "../../utils/index.js";
-import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
-var b = "Switch", [D, se] = U(b), [W, X] = D(b), y = h.forwardRef(
-  (e, l) => {
+import { u as L } from "../../index-BZPx6jYI.js";
+import { u as O } from "../../index-DtEcCIrM.js";
+import { Typography as R } from "../Typography/Typography.js";
+import { cn as C } from "../../utils/index.js";
+import { thumbVariants as V, switchVariants as D } from "./Switch.variants.js";
+var k = "Switch", [W, ne] = q(k), [X, G] = W(k), g = p.forwardRef(
+  (o, d) => {
     const {
-      __scopeSwitch: t,
-      name: s,
-      checked: o,
-      defaultChecked: d,
-      required: u,
-      disabled: r,
-      value: c = "on",
-      onCheckedChange: m,
-      form: n,
-      ...a
-    } = e, [p, f] = h.useState(null), w = P(l, (v) => f(v)), x = h.useRef(!1), k = p ? n || !!p.closest("form") : !0, [S, B] = A({
-      prop: o,
-      defaultProp: d ?? !1,
-      onChange: m,
-      caller: b
+      __scopeSwitch: e,
+      name: c,
+      checked: t,
+      defaultChecked: S,
+      required: r,
+      disabled: n,
+      value: a = "on",
+      onCheckedChange: v,
+      form: i,
+      ...u
+    } = o, [f, m] = p.useState(null), s = P(d, (x) => m(x)), h = p.useRef(!1), b = f ? i || !!f.closest("form") : !0, [w, T] = U({
+      prop: t,
+      defaultProp: S ?? !1,
+      onChange: v,
+      caller: k
     });
-    return /* @__PURE__ */ C(W, { scope: t, checked: S, disabled: r, children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ y(X, { scope: e, checked: w, disabled: n, children: [
+      /* @__PURE__ */ l(
         N.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": S,
-          "aria-required": u,
-          "data-state": I(S),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
-          value: c,
-          ...a,
-          ref: w,
-          onClick: q(e.onClick, (v) => {
-            B((T) => !T), k && (x.current = v.isPropagationStopped(), x.current || v.stopPropagation());
+          "aria-checked": w,
+          "aria-required": r,
+          "data-state": B(w),
+          "data-disabled": n ? "" : void 0,
+          disabled: n,
+          value: a,
+          ...u,
+          ref: s,
+          onClick: F(o.onClick, (x) => {
+            T((H) => !H), b && (h.current = x.isPropagationStopped(), h.current || x.stopPropagation());
           })
         }
       ),
-      k && /* @__PURE__ */ i(
-        _,
+      b && /* @__PURE__ */ l(
+        I,
         {
-          control: p,
-          bubbles: !x.current,
-          name: s,
-          value: c,
-          checked: S,
-          required: u,
-          disabled: r,
-          form: n,
+          control: f,
+          bubbles: !h.current,
+          name: c,
+          value: a,
+          checked: w,
+          required: r,
+          disabled: n,
+          form: i,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-y.displayName = b;
-var g = "SwitchThumb", E = h.forwardRef(
-  (e, l) => {
-    const { __scopeSwitch: t, ...s } = e, o = X(g, t);
-    return /* @__PURE__ */ i(
+g.displayName = k;
+var E = "SwitchThumb", _ = p.forwardRef(
+  (o, d) => {
+    const { __scopeSwitch: e, ...c } = o, t = G(E, e);
+    return /* @__PURE__ */ l(
       N.span,
       {
-        "data-state": I(o.checked),
-        "data-disabled": o.disabled ? "" : void 0,
-        ...s,
-        ref: l
+        "data-state": B(t.checked),
+        "data-disabled": t.disabled ? "" : void 0,
+        ...c,
+        ref: d
       }
     );
   }
 );
-E.displayName = g;
-var G = "SwitchBubbleInput", _ = h.forwardRef(
+_.displayName = E;
+var J = "SwitchBubbleInput", I = p.forwardRef(
   ({
-    __scopeSwitch: e,
-    control: l,
-    checked: t,
-    bubbles: s = !0,
-    ...o
-  }, d) => {
-    const u = h.useRef(null), r = P(u, d), c = F(t), m = L(l);
-    return h.useEffect(() => {
-      const n = u.current;
-      if (!n) return;
-      const a = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(
-        a,
+    __scopeSwitch: o,
+    control: d,
+    checked: e,
+    bubbles: c = !0,
+    ...t
+  }, S) => {
+    const r = p.useRef(null), n = P(r, S), a = L(e), v = O(d);
+    return p.useEffect(() => {
+      const i = r.current;
+      if (!i) return;
+      const u = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(
+        u,
         "checked"
       ).set;
-      if (c !== t && f) {
-        const w = new Event("click", { bubbles: s });
-        f.call(n, t), n.dispatchEvent(w);
+      if (a !== e && m) {
+        const s = new Event("click", { bubbles: c });
+        m.call(i, e), i.dispatchEvent(s);
       }
-    }, [c, t, s]), /* @__PURE__ */ i(
+    }, [a, e, c]), /* @__PURE__ */ l(
       "input",
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: t,
-        ...o,
+        defaultChecked: e,
+        ...t,
         tabIndex: -1,
-        ref: r,
+        ref: n,
         style: {
-          ...o.style,
-          ...m,
+          ...t.style,
+          ...v,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -119,72 +120,99 @@ var G = "SwitchBubbleInput", _ = h.forwardRef(
     );
   }
 );
-_.displayName = G;
-function I(e) {
-  return e ? "checked" : "unchecked";
+I.displayName = J;
+function B(o) {
+  return o ? "checked" : "unchecked";
 }
-var J = y, K = E;
-const ce = H(
+var K = g, Q = _;
+const ie = M(
   ({
-    name: e,
-    alignment: l = "horizontal",
-    theme: t,
-    thumbClassName: s,
-    className: o,
-    label: d,
-    defaultChecked: u,
-    value: r,
-    helperText: c,
-    onChange: m
-  }, n) => {
-    const a = M(null), p = $(), f = e ? `${p}-${e}` : p;
-    return j(n, () => a.current, [a]), z(() => {
-      a.current && (a.current.value = `${r}`);
-    }, [r]), /* @__PURE__ */ C(
+    alignment: o = "horizontal",
+    className: d,
+    defaultChecked: e,
+    disabled: c = !1,
+    helperText: t,
+    helperTextClassName: S,
+    label: r,
+    labelClassName: n,
+    name: a,
+    theme: v,
+    thumbClassName: i,
+    value: u,
+    onChange: f
+  }, m) => {
+    const s = $(null), h = j(), b = a ? `${h}-${a}` : h;
+    return z(m, () => s.current, [s]), A(() => {
+      s.current && (s.current.value = `${u}`);
+    }, [u]), /* @__PURE__ */ y(
       "div",
       {
-        className: R(
-          "w-full flex gap-3",
-          l === "vertical" ? "flex-col" : "flex-row"
+        className: C(
+          "w-full",
+          "flex",
+          "gap-3",
+          o === "vertical" ? "flex-col" : "flex-row"
         ),
-        "data-theme": t,
+        "data-theme": v,
         children: [
-          /* @__PURE__ */ i(
-            J,
+          /* @__PURE__ */ l(
+            K,
             {
-              id: f,
-              defaultChecked: u,
-              checked: r,
-              onCheckedChange: (w) => m?.(w),
-              className: R(V({ className: o })),
-              "aria-label": d,
-              children: /* @__PURE__ */ i(
-                K,
+              id: b,
+              defaultChecked: e,
+              checked: u,
+              onCheckedChange: (w) => f?.(w),
+              className: C(D({ className: d })),
+              "aria-label": r,
+              disabled: c,
+              children: /* @__PURE__ */ l(
+                Q,
                 {
-                  className: O({
-                    className: s
+                  className: V({
+                    className: i
                   })
                 }
               )
             }
           ),
-          d ? /* @__PURE__ */ C(
-            "label",
+          r ? /* @__PURE__ */ y(
+            R,
             {
-              className: "flex flex-col text-slate-800 dark:text-white text-sm",
-              htmlFor: f,
+              component: "label",
+              className: C(
+                "flex",
+                "flex-col",
+                "text-sm",
+                "dark:text-white",
+                "select-none",
+                n
+              ),
+              htmlFor: b,
               style: { paddingRight: 15 },
               children: [
-                d,
-                c ? /* @__PURE__ */ i("span", { className: "text-slate-600 dark:text-slate-400 text-xs", children: c }) : null
+                r,
+                t ? /* @__PURE__ */ l(
+                  R,
+                  {
+                    component: "span",
+                    className: C(
+                      "text-xs",
+                      "select-none",
+                      "text-slate-600",
+                      "dark:text-metal-400",
+                      S
+                    ),
+                    children: t
+                  }
+                ) : null
               ]
             }
           ) : null,
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "input",
             {
-              ref: a,
-              name: e,
+              ref: s,
+              name: a,
               type: "text",
               className: "hidden",
               "aria-hidden": "true"
@@ -196,5 +224,5 @@ const ce = H(
   }
 );
 export {
-  ce as Switch
+  ie as Switch
 };

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

@@ -1,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const r = a([
+const t = a([
   "w-10",
   "h-5",
   "flex",
@@ -8,14 +8,23 @@ const r = a([
   "shadow",
   "focus:shadow-md",
   "data-[state=unchecked]:bg-gray-300",
-  "dark:data-[state=unchecked]:bg-gray-600",
+  "dark:data-[state=unchecked]:bg-metal-600",
   "transition-all",
   "delay-10",
   "duration-250",
   "cursor-pointer",
   "bg-aurora-500",
-  "kubefirst:bg-kubefirst-primary"
-]), e = a([
+  "kubefirst:bg-kubefirst-primary",
+  "[&+label,&+span]:cursor-pointer",
+  "disabled:[&+label,&+span,&]:cursor-not-allowed",
+  "disabled:bg-gray-200",
+  "disabled:data-[state=unchecked]:[&>span]:bg-white",
+  "disabled:data-[state=unchecked]:bg-gray-200",
+  "dark:disabled:bg-metal-700",
+  "dark:disabled:data-[state=unchecked]:[&>span]:bg-metal-600",
+  "dark:disabled:data-[state=unchecked]:bg-metal-700",
+  "dark:disabled:[&>span]:bg-metal-600"
+]), d = a([
   "block",
   "w-4",
   "h-4",
@@ -31,6 +40,6 @@ const r = a([
   "duration-300"
 ]);
 export {
-  r as switchVariants,
-  e as thumbVariants
+  t as switchVariants,
+  d as thumbVariants
 };

package/dist/components/Typography/Typography.js

@@ -1,30 +1,28 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cn as n } from "../../utils/index.js";
-import { typographyVariants as c } from "./Typography.variants.js";
-const d = f(
-  ({ className: t, theme: r, children: p, variant: o, component: e, ...m }, a) => {
-    const s = e ?? (o?.includes("h") ? o : "p");
-    return /* @__PURE__ */ y(
-      s,
-      {
-        ref: a,
-        "data-theme": r,
-        className: n(
-          "text-slate-800",
-          "dark:text-metal-50",
-          c({
-            className: t,
-            variant: o
-          })
-        ),
-        ...m,
-        children: p
-      }
-    );
-  }
-);
-d.displayName = "Typography";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cn as c } from "../../utils/index.js";
+import { typographyVariants as f } from "./Typography.variants.js";
+const d = y(({ className: o, theme: r, children: p, variant: t, component: e, ...m }, a) => {
+  const s = e ?? (t?.includes("h") ? t : "p");
+  return /* @__PURE__ */ n(
+    s,
+    {
+      ref: a,
+      "data-theme": r,
+      className: c(
+        "text-slate-800",
+        "dark:text-metal-50",
+        f({
+          className: o,
+          variant: t
+        })
+      ),
+      ...m,
+      children: p
+    }
+  );
+});
+d.displayName = "KonstructTypography";
 export {
   d as Typography
 };

package/dist/components/Typography/Typography.variants.js

@@ -3,7 +3,7 @@ const a = t([], {
   variants: {
     variant: {
       h1: ["text-[57px]", "leading-16"],
-      h2: ["text-[45px]", "leading-[52px]"],
+      h2: ["text-[45px]", "leading-13"],
       h3: ["text-4xl", "leading-11"],
       h4: ["text-[32px]", "leading-10"],
       h5: ["text-[28px]", "leading-9"],
@@ -40,7 +40,7 @@ const a = t([], {
       body1: ["text-base", "leading-6", "tracking-[0.5px]"],
       body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
       body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
-      tooltip: ["text-sm", "leading-[22px]"]
+      tooltip: ["text-sm", "leading-5.5"]
     }
   },
   defaultVariants: {