@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/Autocomplete/components/index.js

@@ -1,4 +1,4 @@
-import { List as t } from "./List/List.js";
+import { List as r } from "./List/List.js";
 export {
-  t as List
+  r as List
 };

package/dist/components/Autocomplete/hooks/useAutocomplete.js

@@ -1,76 +1,52 @@
-import { useState as i, useEffect as d, useCallback as g } from "react";
-import { filterByValue as k } from "../../../utils/index.js";
-const A = ({
-  options: l,
-  inputRef: n,
-  wrapperRef: o,
-  onChange: a
-}) => {
-  const [f, m] = i(() => l ?? []), [h, s] = i(!1), [E, b] = i("");
-  d(() => {
-    const t = new AbortController();
-    return n.current?.addEventListener("focus", () => s(!0), {
-      signal: t.signal
-    }), () => {
-      t.abort();
+import { r as O } from "../../../utils-DnIJruo0.js";
+import { useClickOutside as k } from "../../../hooks/useClickOutside.js";
+import { useCallback as E, useEffect as c, useState as i } from "react";
+var v = ({ options: l, inputRef: t, wrapperRef: r, onChange: u }) => {
+  const [m, d] = i(() => l ?? []), [b, n] = i(!1), [f, g] = i("");
+  c(() => {
+    const e = new AbortController();
+    return t.current?.addEventListener("focus", () => n(!0), { signal: e.signal }), () => {
+      e.abort();
     };
-  }, [n]), d(() => {
-    const t = new AbortController(), r = (e) => {
-      e.key === "Escape" && (s(!1), n.current?.blur());
-    }, u = (e) => {
-      o.current?.contains(e.target) || s(!1);
+  }, [t]);
+  const C = E(() => {
+    n(!1);
+  }, []);
+  k(r, C), c(() => {
+    const e = new AbortController(), o = (s) => {
+      s.key === "Escape" && (n(!1), t.current?.blur());
     };
-    return document.addEventListener("keydown", r, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", u, {
-      signal: t.signal
-    }), () => {
-      t.abort();
+    return document.addEventListener("keydown", o, { signal: e.signal }), () => {
+      e.abort();
     };
-  }, [n, o]), d(() => {
-    const t = new AbortController();
-    return o.current?.addEventListener(
-      "focusout",
-      (r) => {
-        o.current?.contains(r.relatedTarget) || s(!1);
-      },
-      { signal: t.signal }
-    ), () => {
-      t.abort();
+  }, [t]), c(() => {
+    const e = new AbortController();
+    return r.current?.addEventListener("focusout", (o) => {
+      r.current?.contains(o.relatedTarget) || n(!1);
+    }, { signal: e.signal }), () => {
+      e.abort();
     };
-  }, [o]);
-  const c = g(
-    (t) => {
-      if (t.length === 0)
-        m(l);
-      else {
-        const r = l.map(({ value: e }) => e), u = k(r, t).map(
-          (e) => ({ value: e })
-        );
-        m(u);
-      }
-    },
-    [l]
-  ), v = g(
-    (t) => {
-      b(t.target.value), c(t.target.value), a?.(t.target.value);
-    },
-    [c, a]
-  ), O = g(
-    (t) => {
-      b(t), c(t), a?.(t), s(!1);
-    },
-    [c, a]
-  );
+  }, [r]);
+  const h = (e) => {
+    if (e.length === 0) d(l);
+    else {
+      const o = l.map(({ value: a }) => a), s = O(o, e).map((a) => ({ value: a }));
+      d(s);
+    }
+  };
   return {
-    inputRef: n,
-    newOptions: f,
-    showOptions: h,
-    value: E,
-    handleChange: v,
-    handleSelectValue: O
+    inputRef: t,
+    newOptions: m,
+    showOptions: b,
+    value: f,
+    handleChange: (e) => {
+      g(e.target.value), h(e.target.value), u?.(e.target.value);
+    },
+    handleSelectValue: (e) => {
+      g(e), h(e), u?.(e), n(!1);
+    }
   };
 };
 export {
-  A as useAutocomplete
+  v as useAutocomplete
 };

package/dist/components/Autocomplete/hooks/useNavigationList.js

@@ -1,66 +1,54 @@
-import { useRef as b, useEffect as l } from "react";
-const w = ({
-  ulRef: t,
-  inputRef: o,
-  wrapperRef: u,
-  options: a
-}) => {
+import { useEffect as l, useRef as b } from "react";
+var w = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
   const r = b(0);
   l(() => {
-    const e = t.current?.querySelectorAll("li") ?? [], c = new AbortController(), n = () => {
+    const e = t.current?.querySelectorAll("li") ?? [], n = new AbortController(), o = () => {
       r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
     }, i = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, o.current?.focus());
+      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, c.current?.focus());
     };
-    return t.current?.addEventListener(
-      "keydown",
-      (s) => {
-        switch (s.preventDefault(), s.key) {
-          case "ArrowDown": {
-            n();
-            break;
-          }
-          case "Tab": {
-            s.shiftKey ? i() : n();
-            break;
-          }
-          case "ArrowUp": {
-            r.current === 0 ? o.current?.focus() : i();
-            break;
-          }
-          case "Enter": {
-            e[r.current].querySelector("button")?.click();
-            break;
-          }
-        }
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
+    return t.current?.addEventListener("keydown", (s) => {
+      switch (s.preventDefault(), s.key) {
+        case "ArrowDown":
+          o();
+          break;
+        case "Tab":
+          s.shiftKey ? i() : o();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? c.current?.focus() : i();
+          break;
+        case "Enter":
+        case " ":
+          e[r.current].click();
+      }
+    }, { signal: n.signal }), () => {
+      n.abort();
     };
-  }, [o, t, a, r]), l(() => {
+  }, [
+    c,
+    t,
+    a,
+    r
+  ]), l(() => {
     const e = new AbortController();
-    return o.current?.addEventListener(
-      "keydown",
-      (c) => {
-        if (c.key === "ArrowDown") {
-          const n = t.current?.querySelector("li");
-          n && n.focus();
-        }
-      },
-      { signal: e.signal }
-    ), () => {
+    return c.current?.addEventListener("keydown", (n) => {
+      if (n.key === "ArrowDown") {
+        const o = t.current?.querySelector("li");
+        o && o.focus();
+      }
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [o, t, a]), l(() => {
+  }, [
+    c,
+    t,
+    a
+  ]), l(() => {
     const e = new AbortController();
-    return u.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
-      },
-      { signal: e.signal }
-    ), () => {
+    return u.current?.addEventListener("mouseenter", () => {
+      (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
+    }, { signal: e.signal }), () => {
       e.abort();
     };
   }, [t, u]);

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,37 @@
+import { t as u } from "../../utils-DnIJruo0.js";
+import { ProfileIcon as f } from "../../assets/icons/components/Profile.js";
+import { avatarVariants as g } from "./Avatar.variants.js";
+import { useGravatarUrl as h } from "./hooks/use-gravatar-url.js";
+import { useState as U } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var N = {
+  sm: 28,
+  md: 40,
+  lg: 56
+}, E = ({ alt: m, className: s, email: i, fallback: t, icon: l, size: e = "md", src: o, theme: n }) => {
+  const d = h(o ? void 0 : i, N[e ?? "md"] * 2), r = o ?? d, [c, p] = U(null), v = !!r && c !== r;
+  return /* @__PURE__ */ a("span", {
+    role: "img",
+    "aria-label": m,
+    "data-theme": n,
+    className: u(g({ size: e }), s),
+    children: v ? /* @__PURE__ */ a("img", {
+      src: r,
+      alt: "",
+      className: "size-full object-cover",
+      onError: () => {
+        p(r);
+      }
+    }) : t ? /* @__PURE__ */ a("span", {
+      "aria-hidden": "true",
+      children: t
+    }) : l ?? /* @__PURE__ */ a(f, {
+      "aria-hidden": "true",
+      className: "size-1/2"
+    })
+  });
+};
+E.displayName = "KonstructAvatar";
+export {
+  E as Avatar
+};

package/dist/components/Avatar/Avatar.variants.js

@@ -0,0 +1,25 @@
+import { t as e } from "../../dist-B9GE4SXf.js";
+var s = e([
+  "inline-flex",
+  "shrink-0",
+  "items-center",
+  "justify-center",
+  "overflow-hidden",
+  "rounded-full",
+  "bg-sky-400/15",
+  "font-medium",
+  "uppercase",
+  "text-sky-600",
+  "select-none",
+  "dark:text-sky-400"
+], {
+  variants: { size: {
+    sm: ["size-7", "text-[10px]"],
+    md: ["size-10", "text-sm"],
+    lg: ["size-14", "text-lg"]
+  } },
+  defaultVariants: { size: "md" }
+});
+export {
+  s as avatarVariants
+};

package/dist/components/Avatar/hooks/index.js

@@ -0,0 +1,5 @@
+import { buildGravatarUrl as a, useGravatarUrl as t } from "./use-gravatar-url.js";
+export {
+  a as buildGravatarUrl,
+  t as useGravatarUrl
+};

package/dist/components/Avatar/hooks/use-gravatar-url.js

@@ -0,0 +1,25 @@
+import { useEffect as s, useState as l } from "react";
+var u = "https://gravatar.com/avatar", c = (r) => Array.from(new Uint8Array(r)).map((t) => t.toString(16).padStart(2, "0")).join(""), i = async (r, t) => {
+  const a = globalThis.crypto?.subtle;
+  if (!a) return null;
+  const e = new TextEncoder().encode(r.trim().toLowerCase()), n = c(await a.digest("SHA-256", e));
+  return `${u}/${n}?d=404&s=${t}`;
+}, f = (r, t) => {
+  const [a, e] = l(null);
+  return s(() => {
+    if (!r) {
+      e(null);
+      return;
+    }
+    let n = !1;
+    return i(r, t).then((o) => {
+      n || e(o);
+    }), () => {
+      n = !0;
+    };
+  }, [r, t]), a;
+};
+export {
+  i as buildGravatarUrl,
+  f as useGravatarUrl
+};

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,40 @@
+import { t as r } from "../../utils-DnIJruo0.js";
+import { avatarVariants as i } from "../Avatar/Avatar.variants.js";
+import { Avatar as v } from "../Avatar/Avatar.js";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+var x = 5, f = ({ className: s, emptyLabel: c = "No members yet", items: a, label: h = (e) => `${e} members`, max: g = x, overflowLabel: p = (e) => `${e} more members`, size: t = "sm", theme: d }) => {
+  if (a.length === 0) return /* @__PURE__ */ l("span", {
+    role: "img",
+    "aria-label": c,
+    "data-theme": d,
+    className: r(i({ size: t }), "border border-dashed border-metal-500 bg-metal-300/15 text-metal-400", s),
+    children: "?"
+  });
+  const e = a.slice(0, g), m = a.length - e.length;
+  return /* @__PURE__ */ b("ul", {
+    "aria-label": h(a.length),
+    "data-theme": d,
+    className: r("flex list-none items-center p-0", s),
+    children: [e.map((o, n) => /* @__PURE__ */ l("li", {
+      className: r("relative flex", n > 0 && "-ml-2"),
+      style: { zIndex: e.length - n },
+      children: /* @__PURE__ */ l(v, {
+        ...o,
+        size: t,
+        className: r("border-2 border-white dark:border-metal-800", o.className)
+      })
+    }, o.id)), m > 0 ? /* @__PURE__ */ l("li", {
+      className: "relative -ml-2 flex",
+      children: /* @__PURE__ */ b("span", {
+        role: "img",
+        "aria-label": p(m),
+        className: r(i({ size: t }), "border-2 border-white bg-gray-200 text-gray-600 dark:border-metal-800 dark:bg-metal-700 dark:text-metal-300"),
+        children: ["+", m]
+      })
+    }) : null]
+  });
+};
+f.displayName = "KonstructAvatarGroup";
+export {
+  f as AvatarGroup
+};

package/dist/components/Badge/Badge.js

@@ -1,80 +1,66 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { useRef as h, useState as g, useCallback as v, useEffect as w } from "react";
-import { cn as m } from "../../utils/index.js";
-import { buttonDismissVariants as x, badgeVariants as y } from "./Badge.variants.js";
-import { S as M } from "../../index-DQH6odE9.js";
-import { c as N } from "../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const Z = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], V = N("x", Z), D = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%20%3e%3cpath%20d='M7.05002%201.45002C7.05002%201.17155%206.9394%200.904476%206.74249%200.707562C6.54557%200.510649%206.2785%200.400024%206.00002%200.400024C5.72155%200.400024%205.45448%200.510649%205.25756%200.707562C5.06065%200.904476%204.95002%201.17155%204.95002%201.45002C4.95002%201.7285%205.06065%201.99557%205.25756%202.19249C5.45448%202.3894%205.72155%202.50002%206.00002%202.50002C6.2785%202.50002%206.54557%202.3894%206.74249%202.19249C6.9394%201.99557%207.05002%201.7285%207.05002%201.45002ZM7.05002%2010.55C7.05002%2010.2715%206.9394%2010.0045%206.74249%209.80756C6.54557%209.61065%206.2785%209.50002%206.00002%209.50002C5.72155%209.50002%205.45448%209.61065%205.25756%209.80756C5.06065%2010.0045%204.95002%2010.2715%204.95002%2010.55C4.95002%2010.8285%205.06065%2011.0956%205.25756%2011.2925C5.45448%2011.4894%205.72155%2011.6%206.00002%2011.6C6.2785%2011.6%206.54557%2011.4894%206.74249%2011.2925C6.9394%2011.0956%207.05002%2010.8285%207.05002%2010.55ZM1.45002%207.05002C1.7285%207.05002%201.99557%206.9394%202.19249%206.74249C2.3894%206.54557%202.50002%206.2785%202.50002%206.00002C2.50002%205.72155%202.3894%205.45448%202.19249%205.25756C1.99557%205.06065%201.7285%204.95002%201.45002%204.95002C1.17155%204.95002%200.904476%205.06065%200.707562%205.25756C0.510649%205.45448%200.400024%205.72155%200.400024%206.00002C0.400024%206.2785%200.510649%206.54557%200.707562%206.74249C0.904476%206.9394%201.17155%207.05002%201.45002%207.05002ZM11.6%206.00002C11.6%205.72155%2011.4894%205.45448%2011.2925%205.25756C11.0956%205.06065%2010.8285%204.95002%2010.55%204.95002C10.2715%204.95002%2010.0045%205.06065%209.80756%205.25756C9.61065%205.45448%209.50002%205.72155%209.50002%206.00002C9.50002%206.2785%209.61065%206.54557%209.80756%206.74249C10.0045%206.9394%2010.2715%207.05002%2010.55%207.05002C10.8285%207.05002%2011.0956%206.9394%2011.2925%206.74249C11.4894%206.54557%2011.6%206.2785%2011.6%206.00002ZM3.52596%209.9594C3.62349%209.86187%203.70085%209.74609%203.75363%209.61867C3.80641%209.49124%203.83358%209.35467%203.83358%209.21674C3.83358%209.07882%203.80641%208.94225%203.75363%208.81482C3.70085%208.6874%203.62349%208.57161%203.52596%208.47409C3.42844%208.37656%203.31265%208.2992%203.18523%208.24642C3.0578%208.19364%202.92123%208.16647%202.78331%208.16647C2.50476%208.16647%202.23761%208.27712%202.04065%208.47409C1.84368%208.67105%201.73303%208.93819%201.73303%209.21674C1.73303%209.49529%201.84368%209.76243%202.04065%209.9594C2.23761%2010.1564%202.50476%2010.267%202.78331%2010.267C3.06186%2010.267%203.329%2010.1564%203.52596%209.9594ZM3.52596%203.52377C3.62833%203.42738%203.7103%203.31141%203.76701%203.18274C3.82371%203.05407%203.85399%202.91532%203.85605%202.77472C3.85812%202.63413%203.83192%202.49455%203.77902%202.36427C3.72611%202.23399%203.64758%202.11566%203.54808%202.01631C3.44858%201.91695%203.33014%201.8386%203.19978%201.78589C3.06942%201.73318%202.92981%201.70718%202.78921%201.70945C2.64862%201.71172%202.50992%201.74221%202.38133%201.7991C2.25274%201.85599%202.13689%201.93814%202.04065%202.04065C1.84368%202.23761%201.73303%202.50476%201.73303%202.78331C1.73303%203.06186%201.84368%203.329%202.04065%203.52596C2.23761%203.72293%202.50476%203.83358%202.78331%203.83358C3.06186%203.83358%203.329%203.72293%203.52596%203.52596V3.52377ZM8.47409%209.9594C8.57161%2010.0569%208.6874%2010.1343%208.81482%2010.1871C8.94225%2010.2399%209.07882%2010.267%209.21674%2010.267C9.35467%2010.267%209.49124%2010.2399%209.61867%2010.1871C9.74609%2010.1343%209.86187%2010.0569%209.9594%209.9594C10.0569%209.86187%2010.1343%209.74609%2010.1871%209.61867C10.2399%209.49124%2010.267%209.35467%2010.267%209.21674C10.267%209.07882%2010.2399%208.94225%2010.1871%208.81482C10.1343%208.6874%2010.0569%208.57161%209.9594%208.47409C9.86187%208.37656%209.74609%208.2992%209.61867%208.24642C9.49124%208.19364%209.35467%208.16647%209.21674%208.16647C9.07882%208.16647%208.94225%208.19364%208.81482%208.24642C8.6874%208.2992%208.57161%208.37656%208.47409%208.47409C8.37656%208.57161%208.2992%208.6874%208.24642%208.81482C8.19364%208.94225%208.16647%209.07882%208.16647%209.21674C8.16647%209.35467%208.19364%209.49124%208.24642%209.61867C8.2992%209.74609%208.37656%209.86187%208.47409%209.9594Z'%20fill='currentColor'%20/%3e%3c/svg%3e", P = ({
-  className: d,
-  dismissible: u = !1,
-  label: a,
-  leftIcon: r,
-  loading: o = !1,
-  size: i,
-  variant: n,
-  onClick: e,
-  onDismiss: l
-}) => {
-  const C = h(null), [p, b] = g("visible"), f = v(
-    (t) => {
-      t.stopPropagation(), l?.(), b("hidden");
-    },
-    [l]
-  );
-  return w(() => {
-    const t = new AbortController();
-    return C.current?.addEventListener(
-      "animationend",
-      () => {
-        C.current?.style.setProperty("display", "none"), C.current?.remove();
-      },
-      { signal: t.signal }
-    ), () => t.abort();
-  }, []), /* @__PURE__ */ c(
-    "span",
-    {
-      ref: C,
-      className: m(
-        y({ variant: n, size: i, className: d }),
-        e && "cursor-pointer"
-      ),
-      role: e ? "button" : void 0,
-      onClick: e,
-      tabIndex: e ? 0 : void 0,
-      "aria-label": e ? `${a} badge` : void 0,
-      "aria-busy": o,
-      "aria-live": "polite",
-      "data-state": p,
-      children: [
-        o && /* @__PURE__ */ s(D, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
-        r ? /* @__PURE__ */ s(M, { className: "h-3 w-3", children: r }) : null,
-        a,
-        u && /* @__PURE__ */ c(
-          "button",
-          {
-            type: "button",
-            className: m(x({ size: i, variant: n })),
-            onClick: f,
-            "aria-label": "Dismiss",
-            children: [
-              /* @__PURE__ */ s(V, { className: "h-full w-full" }),
-              /* @__PURE__ */ s("span", { className: "sr-only", children: "Dismiss" })
-            ]
-          }
-        )
-      ]
-    }
-  );
+import { t as c } from "../../dist-CK8FUUUn.js";
+import { t as p } from "../../utils-DnIJruo0.js";
+import { LoaderIcon as x } from "../../assets/icons/components/Loader.js";
+import { t as D } from "../../x-C8O1IsaM.js";
+import { badgeVariants as V, buttonDismissVariants as j } from "./Badge.variants.js";
+import { useEffect as E, useRef as L, useState as P } from "react";
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+var q = ({ className: b, dismissible: h = !1, isSelectable: g = !0, label: i, leftIcon: n, loading: o = !1, rightIcon: l, size: m, variant: d, onClick: e, onDismiss: v }) => {
+  const u = L(null), [r, N] = P("visible"), y = (t) => {
+    t.stopPropagation(), v?.(), N("hidden");
+  };
+  return E(() => {
+    if (r !== "hidden") return;
+    const t = new AbortController(), a = u.current;
+    return a?.addEventListener("animationend", (w) => {
+      w.target === a && (a.style.setProperty("display", "none"), a.remove());
+    }, { signal: t.signal }), () => t.abort();
+  }, [r]), /* @__PURE__ */ f("span", {
+    ref: u,
+    className: p(V({
+      variant: d,
+      size: m,
+      className: b
+    }), {
+      "select-none": !g,
+      "cursor-pointer": e
+    }),
+    role: e ? "button" : void 0,
+    onClick: e,
+    tabIndex: e ? 0 : void 0,
+    "aria-label": e ? `${i} badge` : void 0,
+    "aria-busy": o,
+    "aria-live": "polite",
+    "data-state": r,
+    children: [
+      o && /* @__PURE__ */ s(x, {
+        size: 12,
+        className: "animate-spin animate-duration-time-2"
+      }),
+      n ? /* @__PURE__ */ s(c, {
+        className: "h-3 w-3",
+        children: n
+      }) : null,
+      i,
+      h ? /* @__PURE__ */ f("button", {
+        type: "button",
+        className: p(j({
+          size: m,
+          variant: d
+        })),
+        onClick: y,
+        "aria-label": "Dismiss",
+        children: [/* @__PURE__ */ s(D, { className: "h-full w-full" }), /* @__PURE__ */ s("span", {
+          className: "sr-only",
+          children: "Dismiss"
+        })]
+      }) : l ? /* @__PURE__ */ s(c, {
+        className: "h-3 w-3",
+        children: l
+      }) : null
+    ]
+  });
 };
 export {
-  P as Badge
+  q as Badge
 };