@cfx-dev/ui-components 0.0.11 → 0.0.13

package/dist/{Rail-DoYzqKk4.js → Rail-BCY3h7eP.js}

@@ -2,7 +2,7 @@ import { jsx as _ } from "react/jsx-runtime";
 import r from "react";
 import { Interactive as w } from "./components/Interactive/Interactive.js";
 import { clsx as A } from "./utils/clsx.js";
-import { c as C } from "./hooks-Bv1kQUpO.js";
+import { d as C } from "./hooks-GAujvL7d.js";
 import { c as b } from "./math-i2ceybzU.js";
 import './assets/Rail.css';const P = "_virtual_sn3qq_1", T = "_root_sn3qq_5", y = "_active_sn3qq_13", z = "_scroller_sn3qq_17", M = "_content_sn3qq_27", R = "_thumb_sn3qq_42", a = {
   virtual: P,

package/dist/components/BackdropPortal/BackdropPortal.js

@@ -1,10 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
-import { a as r } from "../../outlet-C4wpavcH.js";
-const a = r("backdrop");
+import { jsx as t } from "react/jsx-runtime";
+import { a } from "../../hooks-GAujvL7d.js";
 function e({
-  children: t
+  children: o
 }) {
-  return /* @__PURE__ */ o(a, { children: t });
+  const r = a("backdrop");
+  return /* @__PURE__ */ t(r, { children: o });
 }
 export {
   e as BackdropPortal

package/dist/components/Flyout/Flyout.js

@@ -1,58 +1,57 @@
 import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { F as k } from "../../Combination-Dj-a6dCZ.js";
-import { Button as p } from "../Button/Button.js";
-import { I as h } from "../../Icons-B26SczGZ.js";
-import { Interactive as f } from "../Interactive/Interactive.js";
+import d from "react";
+import { F as p } from "../../Combination-Dj-a6dCZ.js";
+import { Button as h } from "../Button/Button.js";
+import { I as f } from "../../Icons-B26SczGZ.js";
+import { Interactive as u } from "../Interactive/Interactive.js";
 import { clsx as l } from "../../utils/clsx.js";
-import { n as u } from "../../functional-C0pE183N.js";
-import { b as v } from "../../hooks-Bv1kQUpO.js";
-import { a as b } from "../../outlet-C4wpavcH.js";
-import '../../assets/Flyout.css';const z = "_root_11ks7_1", N = "_holder_11ks7_6", C = "_active_11ks7_15", y = "_backdrop_11ks7_15", x = "_mask_11ks7_28", F = "_content_11ks7_90", I = "_header_11ks7_95", L = "_title_11ks7_101", e = {
-  root: z,
+import { n as v } from "../../functional-C0pE183N.js";
+import { a as b, c as z } from "../../hooks-GAujvL7d.js";
+import '../../assets/Flyout.css';const N = "_root_11ks7_1", C = "_holder_11ks7_6", y = "_active_11ks7_15", x = "_backdrop_11ks7_15", F = "_mask_11ks7_28", I = "_content_11ks7_90", L = "_header_11ks7_95", g = "_title_11ks7_101", e = {
+  root: N,
   "size-normal": "_size-normal_11ks7_6",
-  holder: N,
+  holder: C,
   "size-small": "_size-small_11ks7_9",
   "size-xsmall": "_size-xsmall_11ks7_12",
-  active: C,
-  backdrop: y,
+  active: y,
+  backdrop: x,
   "backdrop-appearance": "_backdrop-appearance_11ks7_1",
-  mask: x,
+  mask: F,
   "holder-appearance": "_holder-appearance_11ks7_1",
-  content: F,
-  header: I,
-  title: L
-}, g = b("overlay-outlet");
+  content: I,
+  header: L,
+  title: g
+};
 function j(c) {
   const {
     disabled: o = !1,
     size: r = "normal",
-    onClose: t = u,
+    onClose: a = v,
     children: n,
-    holderClassName: d
-  } = c;
-  m.useEffect(() => {
+    holderClassName: m
+  } = c, _ = b("flyout-outlet");
+  d.useEffect(() => {
     if (o)
       return;
-    const a = document.getElementById("cfxui-root");
-    return a == null || a.classList.add("shrink"), () => a == null ? void 0 : a.classList.remove("shrink");
-  }, [o]), v(t);
-  const _ = l(e.root, e[`size-${r}`], {
+    const t = document.getElementById("cfxui-root");
+    return t == null || t.classList.add("shrink"), () => t == null ? void 0 : t.classList.remove("shrink");
+  }, [o]), z(a);
+  const k = l(e.root, e[`size-${r}`], {
     [e.active]: !o
   });
-  return /* @__PURE__ */ s(g, { children: /* @__PURE__ */ i("div", { className: _, children: [
-    /* @__PURE__ */ s(f, { showPointer: !1, className: e.backdrop, onClick: t }),
-    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, d), children: /* @__PURE__ */ s(k, { disabled: !!o, className: e.content, children: n }) }) })
+  return /* @__PURE__ */ s(_, { children: /* @__PURE__ */ i("div", { className: k, children: [
+    /* @__PURE__ */ s(u, { showPointer: !1, className: e.backdrop, onClick: a }),
+    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, m), children: /* @__PURE__ */ s(p, { disabled: !!o, className: e.content, children: n }) }) })
   ] }) });
 }
-j.Header = m.forwardRef(function(o, r) {
+j.Header = d.forwardRef(function(o, r) {
   const {
-    onClose: t,
+    onClose: a,
     children: n
   } = o;
   return /* @__PURE__ */ i("div", { ref: r, className: e.header, children: [
     /* @__PURE__ */ s("div", { className: e.title, children: n }),
-    !!t && /* @__PURE__ */ s(p, { size: "large", icon: h.exit, onClick: t })
+    !!a && /* @__PURE__ */ s(h, { size: "large", icon: f.exit, onClick: a })
   ] });
 });
 export {

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import n from "react";
 import { Indicator as q } from "../Indicator/Indicator.js";
 import { clsx as H } from "../../utils/clsx.js";
 import { getValue as J } from "../../utils/getValue.js";
-import { u as i } from "../../hooks-Bv1kQUpO.js";
+import { u as i } from "../../hooks-GAujvL7d.js";
 import '../../assets/Input.css';const O = "_root_gmtev_1", P = "_input_gmtev_1", Q = "_small_gmtev_8", U = "_large_gmtev_12", Y = "_decorator_gmtev_60", Z = "_error_gmtev_68", $ = "_disabled_gmtev_72", ee = "_description_gmtev_106", e = {
   root: O,
   input: P,

package/dist/components/Input/RichInput.js

@@ -3,7 +3,7 @@ import r from "react";
 import { Button as D } from "../Button/Button.js";
 import { I as F } from "../../Icons-B26SczGZ.js";
 import { clsx as L } from "../../utils/clsx.js";
-import { u as i } from "../../hooks-Bv1kQUpO.js";
+import { u as i } from "../../hooks-GAujvL7d.js";
 import '../../assets/RichInput.css';const T = "_root_16on4_1", j = "_renderer_16on4_1", z = "_small_16on4_8", E = "_large_16on4_13", H = "_clear_16on4_95", t = {
   root: T,
   renderer: j,

package/dist/components/Layout/Scrollable/Rail.js

@@ -2,9 +2,9 @@ import "react/jsx-runtime";
 import "react";
 import "../../Interactive/Interactive.js";
 import "../../../utils/clsx.js";
-import "../../../hooks-Bv1kQUpO.js";
+import "../../../hooks-GAujvL7d.js";
 import "../../../math-i2ceybzU.js";
-import { R as e } from "../../../Rail-DoYzqKk4.js";
+import { R as e } from "../../../Rail-BCY3h7eP.js";
 export {
   e as Rail
 };

package/dist/components/Layout/Scrollable/Scrollable.js

@@ -3,7 +3,7 @@ import r from "react";
 import { useContextualStyle as W } from "../../Style/Style.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import k from "../../../utils/mergeRefs.js";
-import { s as o, R as w } from "../../../Rail-DoYzqKk4.js";
+import { s as o, R as w } from "../../../Rail-BCY3h7eP.js";
 const N = {
   size: 0,
   scrollPos: 0,

package/dist/components/Layout/Scrollable/VirtualScrollable.js

@@ -4,7 +4,7 @@ import { _ as ie } from "../../../extends-Dk_bSU3E.js";
 import { _ as ne } from "../../../inheritsLoose-A8WKSWDx.js";
 import { clsx as oe } from "../../../utils/clsx.js";
 import { Scrollable as le } from "./Scrollable.js";
-import { s as se } from "../../../Rail-DoYzqKk4.js";
+import { s as se } from "../../../Rail-BCY3h7eP.js";
 function $(r) {
   if (r === void 0)
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import { Button as _ } from "../Button/Button.js";
 import { I as f } from "../../Icons-B26SczGZ.js";
 import { Overlay as s } from "../Overlay/Overlay.js";
-import { n as c } from "../../functional-C0pE183N.js";
-import { b as h } from "../../hooks-Bv1kQUpO.js";
+import { n } from "../../functional-C0pE183N.js";
+import { c as h } from "../../hooks-GAujvL7d.js";
 import '../../assets/Modal.css';const v = "_root_1v8ee_1", C = "_close_1v8ee_27", u = "_header_1v8ee_37", N = "_footer_1v8ee_47", r = {
   root: v,
   "modal-appearance": "_modal-appearance_1v8ee_1",
@@ -13,15 +13,15 @@ import '../../assets/Modal.css';const v = "_root_1v8ee_1", C = "_close_1v8ee_27"
 };
 function l(a) {
   const {
-    onClose: e = c,
+    onClose: e = n,
     children: d,
     backdropClassName: i,
     contentClassName: m,
     disableBackdropClose: p = !1
-  } = a, t = p ? c : e;
-  return h(t), /* @__PURE__ */ n(s, { children: [
+  } = a, t = p ? n : e;
+  return h(t), /* @__PURE__ */ c(s, { children: [
     /* @__PURE__ */ o(s.Backdrop, { onClick: t, className: i }),
-    /* @__PURE__ */ o(s.Content, { className: m, children: /* @__PURE__ */ n("div", { className: r.root, children: [
+    /* @__PURE__ */ o(s.Content, { className: m, children: /* @__PURE__ */ c("div", { className: r.root, children: [
       !!e && /* @__PURE__ */ o("div", { className: r.close, children: /* @__PURE__ */ o(_, { size: "large", theme: "transparent", icon: f.exit, onClick: e }) }),
       d
     ] }) })

package/dist/components/OnScreenSensor.js

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import t from "react";
 import { n as o } from "../functional-C0pE183N.js";
-import { u as s } from "../hooks-Bv1kQUpO.js";
+import { u as s } from "../hooks-GAujvL7d.js";
 const l = {
   width: "0",
   height: "0"

package/dist/components/Overlay/Overlay.js

@@ -1,27 +1,27 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import n from "react";
-import { F as s } from "../../Combination-Dj-a6dCZ.js";
-import { Interactive as i } from "../Interactive/Interactive.js";
-import { clsx as a } from "../../utils/clsx.js";
-import { a as m } from "../../outlet-C4wpavcH.js";
-import '../../assets/Overlay.css';const u = "_root_15udb_1", f = "_backdrop_15udb_9", _ = "_content_15udb_27", e = {
-  root: u,
-  backdrop: f,
+import { F as i } from "../../Combination-Dj-a6dCZ.js";
+import { Interactive as m } from "../Interactive/Interactive.js";
+import { clsx as e } from "../../utils/clsx.js";
+import { a as u } from "../../hooks-GAujvL7d.js";
+import '../../assets/Overlay.css';const f = "_root_15udb_1", _ = "_backdrop_15udb_9", p = "_content_15udb_27", a = {
+  root: f,
+  backdrop: _,
   "backdrop-appearance": "_backdrop-appearance_15udb_1",
-  content: _
-}, p = m("overlay-outlet");
+  content: p
+};
 function l(c) {
   const {
     className: o,
-    children: t
-  } = c, d = a(e.root, o);
-  return /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r("div", { className: d, children: t }) });
+    children: r
+  } = c, s = e(a.root, o), d = u("overlay-outlet");
+  return /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t("div", { className: s, children: r }) });
 }
-l.Backdrop = n.forwardRef(function(o, t) {
-  return /* @__PURE__ */ r(i, { ref: t, onClick: o.onClick, className: a(e.backdrop, o.className), children: o.children });
+l.Backdrop = n.forwardRef(function(o, r) {
+  return /* @__PURE__ */ t(m, { ref: r, onClick: o.onClick, className: e(a.backdrop, o.className), children: o.children });
 });
-l.Content = n.forwardRef(function(o, t) {
-  return /* @__PURE__ */ r("div", { ref: t, className: a(e.content, o.className), children: /* @__PURE__ */ r(s, { children: o.children }) });
+l.Content = n.forwardRef(function(o, r) {
+  return /* @__PURE__ */ t("div", { ref: r, className: e(a.content, o.className), children: /* @__PURE__ */ t(i, { children: o.children }) });
 });
 export {
   l as Overlay

package/dist/components/Shroud/Shroud.js

@@ -1,35 +1,34 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import s from "react";
-import { a as h } from "../../hooks-Bv1kQUpO.js";
-import { P as p } from "../../outlets-BsMV5obW.js";
-import { ui as v } from "../ui.js";
-import '../../assets/Shroud.css';const x = "_root_7v6x1_1", _ = "_tile_7v6x1_6", e = {
-  root: x,
-  tile: _
-}, S = s.forwardRef(function(c, n) {
+import o from "react";
+import { a as p, b as v } from "../../hooks-GAujvL7d.js";
+import { ui as x } from "../ui.js";
+import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", b = "_tile_7v6x1_6", e = {
+  root: _,
+  tile: b
+}, S = o.forwardRef(function(c, n) {
   const {
     forRef: r
-  } = c, [d, u] = s.useState({}), i = s.useCallback(() => {
+  } = c, [u, d] = o.useState({}), f = p("pre-title"), i = o.useCallback(() => {
     if (!r.current)
       return;
-    const o = r.current.getBoundingClientRect(), f = {
-      x: o.x,
-      y: o.y,
-      w: o.width,
-      h: o.height,
+    const s = r.current.getBoundingClientRect(), h = {
+      x: s.x,
+      y: s.y,
+      w: s.width,
+      h: s.height,
       sw: globalThis.screen.availWidth,
       sh: globalThis.screen.availHeight
     };
-    u(
+    d(
       Object.fromEntries(
-        Object.entries(f).flatMap(([a, l]) => [
-          [`--${a}`, v.px(l)],
+        Object.entries(h).flatMap(([a, l]) => [
+          [`--${a}`, x.px(l)],
           [`--${a}-raw`, l]
         ])
       )
     );
   }, []);
-  return s.useEffect(i, []), h(i), /* @__PURE__ */ t(p, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: d, children: [
+  return o.useEffect(i, []), v(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

package/dist/components/Title/Title.js

@@ -1,12 +1,12 @@
-import { jsxs as w, Fragment as L, jsx as _ } from "react/jsx-runtime";
-import l from "react";
-import { T as k } from "../../outlets-BsMV5obW.js";
-import { clsx as y } from "../../utils/clsx.js";
+import { jsxs as L, Fragment as k, jsx as p } from "react/jsx-runtime";
+import f from "react";
+import { clsx as O } from "../../utils/clsx.js";
+import { a as y } from "../../hooks-GAujvL7d.js";
 import C from "../../utils/mergeRefs.js";
-import '../../assets/Title.css';const O = "_wrapper_1l1sn_1", R = "_appearance_1l1sn_1", T = "_animated_1l1sn_26", $ = "_root_1l1sn_71", M = "_shortcut_1l1sn_84", d = {
-  wrapper: O,
-  appearance: R,
-  animated: T,
+import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
+  wrapper: R,
+  appearance: T,
+  animated: $,
   "fixed-on-top": "_fixed-on-top_1l1sn_29",
   "fixed-on-top-left": "_fixed-on-top-left_1l1sn_35",
   "fixed-on-bottom": "_fixed-on-bottom_1l1sn_41",
@@ -14,11 +14,11 @@ import '../../assets/Title.css';const O = "_wrapper_1l1sn_1", R = "_appearance_1
   "fixed-on-bottom-right": "_fixed-on-bottom-right_1l1sn_53",
   "fixed-on-left": "_fixed-on-left_1l1sn_59",
   "fixed-on-right": "_fixed-on-right_1l1sn_65",
-  root: $,
-  shortcut: M
-}, c = 10;
-function N(i, a, [t, o]) {
-  const r = i ? o : o - 20, s = i ? t : t + 16;
+  root: M,
+  shortcut: N
+}, i = 10;
+function S(a, l, [e, n]) {
+  const r = a ? n : n - 20, s = a ? e : e + 16;
   return {
     // Prefer top and left for element to snap to the pixel grid
     // as when using transform it will become blurry in most of the cases as top and left values are floats
@@ -26,88 +26,88 @@ function N(i, a, [t, o]) {
     left: `${s}px`,
     // transform: `translate(${left}px, ${top}px)`,
     maxWidth: `calc(100vw - ${s}px - 10px)`,
-    animationDelay: `${a}ms`
+    animationDelay: `${l}ms`
   };
 }
-function S(i, a) {
+function F(a, l) {
   const {
-    x: t,
-    y: o,
+    x: e,
+    y: n,
     width: r,
     height: s
-  } = i.getBoundingClientRect();
-  let n = 0, e = 0;
-  switch (a) {
+  } = a.getBoundingClientRect();
+  let t = 0, c = 0;
+  switch (l) {
     case "top": {
-      n = t + r / 2, e = o - c;
+      t = e + r / 2, c = n - i;
       break;
     }
     case "top-left": {
-      n = t, e = o - c;
+      t = e, c = n - i;
       break;
     }
     case "bottom": {
-      n = t + r / 2, e = o + s + c;
+      t = e + r / 2, c = n + s + i;
       break;
     }
     case "bottom-left": {
-      n = t, e = o + s + c;
+      t = e, c = n + s + i;
       break;
     }
     case "bottom-right": {
-      n = t + r, e = o + s + c;
+      t = e + r, c = n + s + i;
       break;
     }
     case "left": {
-      n = t - c, e = o + s / 2;
+      t = e - i, c = n + s / 2;
       break;
     }
     case "right": {
-      n = t + r + c, e = o + s / 2;
+      t = e + r + i, c = n + s / 2;
       break;
     }
   }
-  return [n, e];
+  return [t, c];
 }
-function B(i) {
+function D(a) {
   const {
-    title: a,
-    children: t,
-    animated: o = !0,
+    title: l,
+    children: e,
+    animated: n = !0,
     fixedOn: r = "bottom",
     delay: s = 0
-  } = i, n = l.useRef(r);
-  n.current = r;
-  const e = l.useRef(null), [b, p] = l.useState(!1), [g, m] = l.useState([0, 0]);
-  l.useEffect(() => {
-    if (!e.current)
+  } = a, t = f.useRef(r);
+  t.current = r;
+  const c = y("title"), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
+  f.useEffect(() => {
+    if (!o.current)
       return;
-    const u = (f) => {
-      n.current && e.current ? m(S(e.current, n.current)) : m([f.clientX, f.clientY]), p(!0);
-    }, h = () => {
-      p(!1);
-    }, v = (f) => {
-      n.current || m([f.clientX, f.clientY]);
+    const d = (u) => {
+      t.current && o.current ? _(F(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
+    }, v = () => {
+      x(!1);
+    }, b = (u) => {
+      t.current || _([u.clientX, u.clientY]);
     };
-    return e.current.addEventListener("mouseenter", u), e.current.addEventListener("mouseleave", h), e.current.addEventListener("mousemove", v), () => {
-      e.current && (e.current.removeEventListener("mouseenter", u), e.current.removeEventListener("mouseleave", h), e.current.removeEventListener("mousemove", v));
+    return o.current.addEventListener("mouseenter", d), o.current.addEventListener("mouseleave", v), o.current.addEventListener("mousemove", b), () => {
+      o.current && (o.current.removeEventListener("mouseenter", d), o.current.removeEventListener("mouseleave", v), o.current.removeEventListener("mousemove", b));
     };
   }, []);
-  let x = null;
-  if (b && a) {
-    const u = y(d.wrapper, d[`fixed-on-${r}`], {
-      [d.animated]: o
+  let h = null;
+  if (g && l) {
+    const d = O(m.wrapper, m[`fixed-on-${r}`], {
+      [m.animated]: n
     });
-    x = /* @__PURE__ */ _(k, { children: /* @__PURE__ */ _("div", { className: u, style: N(!!r, s, g), children: /* @__PURE__ */ _("div", { className: d.root, children: a }) }) });
+    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: S(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: l }) }) });
   }
-  const E = typeof t == "function" ? t(e) : l.cloneElement(t, {
-    ref: C(e, t.props.ref)
+  const w = typeof e == "function" ? e(o) : f.cloneElement(e, {
+    ref: C(o, e.props.ref)
   });
-  return /* @__PURE__ */ w(L, { children: [
-    E,
-    x
+  return /* @__PURE__ */ L(k, { children: [
+    w,
+    h
   ] });
 }
 export {
-  B as Title
+  D as Title
 };

package/dist/hooks-GAujvL7d.js

@@ -0,0 +1,86 @@
+import { jsx as d } from "react/jsx-runtime";
+import o from "react";
+import { $ as f } from "./index-C75OpfGQ.js";
+const i = Symbol("Uninitialized");
+function E(e, ...t) {
+  const n = o.useRef(i);
+  return n.current === i && (n.current = e(...t)), n.current;
+}
+function u(e) {
+  const t = o.useRef(e);
+  return t.current = e, t;
+}
+function c(e, t = "keydown", n) {
+  o.useEffect(() => {
+    const r = (s) => {
+      c.shouldProcessEvent(s) && e.current(s);
+    };
+    return window.addEventListener(t, r, n), () => {
+      window.removeEventListener(t, r, n);
+    };
+  }, [t, n]);
+}
+c.shouldProcessEvent = (e) => {
+  if (e.target instanceof Element) {
+    if (e.target.hasAttribute("contenteditable"))
+      return !1;
+    switch (e.target.tagName) {
+      case "INPUT":
+      case "SELECT":
+      case "TEXTAREA":
+        return !1;
+      default:
+        return !0;
+    }
+  }
+  return !0;
+};
+function a(e) {
+  const t = u((n) => {
+    a.isCloseEvent(n) && e();
+  });
+  c(t);
+}
+a.isCloseEvent = (e) => e.key === "Escape";
+function m(e) {
+  const t = u(e);
+  o.useEffect(() => {
+    const n = () => t.current();
+    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []);
+}
+function b(e) {
+  const {
+    children: t
+  } = e;
+  return /* @__PURE__ */ d("div", { style: { display: "none" }, children: t });
+}
+function w(e) {
+  const [t, n] = o.useState(() => b);
+  return o.useEffect(() => {
+    let r = document.getElementById(e);
+    r || (r = document.createElement("div"), r.id = e, document.body.appendChild(r));
+    const s = ({
+      children: l
+    }) => f.createPortal(l, r);
+    n(() => s);
+  }, [e]), t;
+}
+const v = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useDynamicRef: u,
+  useGlobalKeyboardEvent: c,
+  useInstance: E,
+  useKeyboardClose: a,
+  useOutlet: w,
+  useWindowResize: m
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  w as a,
+  m as b,
+  a as c,
+  E as d,
+  c as e,
+  v as h,
+  u
+};

package/dist/main.d.ts

@@ -62,7 +62,6 @@ export { Text } from './components/Text/Text';
 export { Textarea } from './components/Textarea/Textarea';
 export { Title } from './components/Title/Title';
 export { Icons, BrandIcon } from './components/Icons';
-export * as outlets from './components/outlets';
 export { OnScreenSensor } from './components/OnScreenSensor';
 export { ui } from './components/ui';
 export { Symbols } from './components/Symbols';

package/dist/main.js

@@ -1,11 +1,11 @@
 import { clsx as o } from "./utils/clsx.js";
 import { f as r } from "./functional-C0pE183N.js";
 import { getValue as t } from "./utils/getValue.js";
-import { h as e } from "./hooks-Bv1kQUpO.js";
+import { h as e } from "./hooks-GAujvL7d.js";
 import { l as m } from "./links-CgOD-Vfj.js";
 import { m as p } from "./math-i2ceybzU.js";
 import f from "./utils/mergeRefs.js";
-import { o as x } from "./outlet-C4wpavcH.js";
+import { o as x } from "./outlet-B11a3Kgw.js";
 import { s as a } from "./string-NVxCUbqk.js";
 import { Checkbox as P } from "./components/Checkbox/Checkbox.js";
 import { Button as y } from "./components/Button/Button.js";
@@ -29,7 +29,7 @@ import { Box as eo } from "./components/Layout/Box/Box.js";
 import { Center as po } from "./components/Layout/Center/Center.js";
 import { Flex as xo } from "./components/Layout/Flex/Flex.js";
 import { Pad as lo } from "./components/Layout/Pad/Pad.js";
-import { Page as so } from "./components/Layout/Page/Page.js";
+import { Page as io } from "./components/Layout/Page/Page.js";
 import { Scrollable as co } from "./components/Layout/Scrollable/Scrollable.js";
 import { Loaf as Bo } from "./components/Loaf/Loaf.js";
 import { Modal as So } from "./components/Modal/Modal.js";
@@ -50,10 +50,9 @@ import { Text as Qo } from "./components/Text/Text.js";
 import { Textarea as Wo } from "./components/Textarea/Textarea.js";
 import { Title as Yo } from "./components/Title/Title.js";
 import { B as _o, I as $o } from "./Icons-B26SczGZ.js";
-import { o as rr } from "./outlets-BsMV5obW.js";
-import { OnScreenSensor as er } from "./components/OnScreenSensor.js";
-import { ui as pr } from "./components/ui.js";
-import { Symbols as xr } from "./components/Symbols.js";
+import { OnScreenSensor as rr } from "./components/OnScreenSensor.js";
+import { ui as er } from "./components/ui.js";
+import { Symbols as pr } from "./components/Symbols.js";
 const S = {
   clsx: o,
   getValue: t,
@@ -91,10 +90,10 @@ export {
   Bo as Loaf,
   So as Modal,
   ho as NavList,
-  er as OnScreenSensor,
+  rr as OnScreenSensor,
   vo as Overlay,
   lo as Pad,
-  so as Page,
+  io as Page,
   bo as Popover,
   Co as PremiumBadge,
   Fo as Prose,
@@ -107,12 +106,11 @@ export {
   jo as Spacer,
   zo as Style,
   Go as Switch,
-  xr as Symbols,
+  pr as Symbols,
   Jo as Tabular,
   Qo as Text,
   Wo as Textarea,
   Yo as Title,
-  rr as outlets,
-  pr as ui,
+  er as ui,
   S as utils
 };

package/dist/outlet-B11a3Kgw.js

@@ -0,0 +1,27 @@
+import { $ as o } from "./index-C75OpfGQ.js";
+function r(t) {
+  let e = null;
+  if (typeof window < "u" && (e = document.getElementById(t)), !e)
+    throw new Error(`Attempted to connect the outlet to the DOM node with ID #${t}, but no such node exists.`);
+  return ({
+    children: n
+  }) => o.createPortal(n, e);
+}
+function u() {
+  let t = null;
+  if (typeof window < "u" && (t = document.createElement("div"), document.body.appendChild(t)), !t)
+    throw new Error("Attempted to create an outlet, but no such outlet exists.");
+  return ({
+    children: e
+  }) => o.createPortal(e, t);
+}
+const c = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  attachOutlet: r,
+  createOutlet: u
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  r as a,
+  u as c,
+  c as o
+};

package/dist/utils/clsx.js

@@ -1,14 +1,22 @@
-function o(r) {
-  if (!r)
-    return "";
-  if (typeof r == "string" || typeof r == "number")
-    return r.toString();
-  const t = [];
-  return typeof r == "object" && (Array.isArray(r) ? r.forEach((e) => t.push(o(e))) : Object.values(r).forEach((e) => t.push(o(e)))), t.filter(Boolean).join(" ");
+function n(t) {
+  let l, e = "";
+  if (typeof t == "string" || typeof t == "number")
+    e += t;
+  else if (typeof t == "object")
+    if (Array.isArray(t))
+      for (let f = 0; f < t.length; f++)
+        t[f] && (l = n(t[f])) && (e && (e += " "), e += l);
+    else
+      for (const f in t)
+        t[f] && (e && (e += " "), e += f);
+  return e;
 }
-function n(...r) {
-  return [...r].map((t) => o(t)).filter(Boolean).join(" ");
+function o(...t) {
+  let l = 0, e, f, r = "";
+  for (; l < t.length; )
+    (f = t[l++]) && (e = n(f)) && (r && (r += " "), r += e);
+  return r;
 }
 export {
-  n as clsx
+  o as clsx
 };

package/dist/utils/hooks.d.ts

@@ -11,3 +11,4 @@ export declare namespace useKeyboardClose {
     var isCloseEvent: (event: KeyboardEvent) => boolean;
 }
 export declare function useWindowResize<T extends () => void>(callback: T): void;
+export declare function useOutlet(id: string): React.FC<React.PropsWithChildren>;

package/dist/utils/hooks.js

@@ -1,9 +1,12 @@
+import "react/jsx-runtime";
 import "react";
-import { u as o, d as u, c as n, b as r, a as b } from "../hooks-Bv1kQUpO.js";
+import "../index-C75OpfGQ.js";
+import { u, e as r, d as i, c as m, a as n, b } from "../hooks-GAujvL7d.js";
 export {
-  o as useDynamicRef,
-  u as useGlobalKeyboardEvent,
-  n as useInstance,
-  r as useKeyboardClose,
+  u as useDynamicRef,
+  r as useGlobalKeyboardEvent,
+  i as useInstance,
+  m as useKeyboardClose,
+  n as useOutlet,
   b as useWindowResize
 };

package/dist/utils/outlet.js

@@ -1,5 +1,5 @@
 import "../index-C75OpfGQ.js";
-import { a as r, c } from "../outlet-C4wpavcH.js";
+import { a as r, c } from "../outlet-B11a3Kgw.js";
 export {
   r as attachOutlet,
   c as createOutlet

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -17,6 +17,7 @@
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "lint": "eslint --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
     "lint:fix": "eslint --fix --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
+    "test": "vitest run",
     "preview": "vite preview",
     "prepublishOnly": "yarn build",
     "storybook": "storybook dev -p 6006",
@@ -71,6 +72,7 @@
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-static-copy": "^1.0.5"
+    "vite-plugin-static-copy": "^1.0.5",
+    "vitest": "^1.6.0"
   }
 }

package/dist/components/outlets.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const PreTitleOutlet: import('react').FC<{
-    children?: import('react').ReactNode;
-}>;
-export declare const TitleOutlet: import('react').FC<{
-    children?: import('react').ReactNode;
-}>;
-export declare const AfterTitleOutlet: import('react').FC<{
-    children?: import('react').ReactNode;
-}>;

package/dist/components/outlets.js

@@ -1,7 +0,0 @@
-import "../outlet-C4wpavcH.js";
-import { A as r, P as i, T } from "../outlets-BsMV5obW.js";
-export {
-  r as AfterTitleOutlet,
-  i as PreTitleOutlet,
-  T as TitleOutlet
-};

package/dist/hooks-Bv1kQUpO.js

@@ -1,65 +0,0 @@
-import r from "react";
-const a = Symbol("Uninitialized");
-function f(e, ...t) {
-  const n = r.useRef(a);
-  return n.current === a && (n.current = e(...t)), n.current;
-}
-function o(e) {
-  const t = r.useRef(e);
-  return t.current = e, t;
-}
-function s(e, t = "keydown", n) {
-  r.useEffect(() => {
-    const i = (u) => {
-      s.shouldProcessEvent(u) && e.current(u);
-    };
-    return window.addEventListener(t, i, n), () => {
-      window.removeEventListener(t, i, n);
-    };
-  }, [t, n]);
-}
-s.shouldProcessEvent = (e) => {
-  if (e.target instanceof Element) {
-    if (e.target.hasAttribute("contenteditable"))
-      return !1;
-    switch (e.target.tagName) {
-      case "INPUT":
-      case "SELECT":
-      case "TEXTAREA":
-        return !1;
-      default:
-        return !0;
-    }
-  }
-  return !0;
-};
-function c(e) {
-  const t = o((n) => {
-    c.isCloseEvent(n) && e();
-  });
-  s(t);
-}
-c.isCloseEvent = (e) => e.key === "Escape";
-function l(e) {
-  const t = o(e);
-  r.useEffect(() => {
-    const n = () => t.current();
-    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
-  }, []);
-}
-const E = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  useDynamicRef: o,
-  useGlobalKeyboardEvent: s,
-  useInstance: f,
-  useKeyboardClose: c,
-  useWindowResize: l
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  l as a,
-  c as b,
-  f as c,
-  s as d,
-  E as h,
-  o as u
-};

package/dist/outlet-C4wpavcH.js

@@ -1,25 +0,0 @@
-import { $ as o } from "./index-C75OpfGQ.js";
-function n(t) {
-  const e = document.getElementById(t);
-  if (!e)
-    throw new Error(`Tried to attach outlet to the DOM node #${t}, but there is no such`);
-  return ({
-    children: r
-  }) => o.createPortal(r, e);
-}
-function a() {
-  const t = document.createElement("div");
-  return document.body.appendChild(t), ({
-    children: e
-  }) => o.createPortal(e, t);
-}
-const u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  attachOutlet: n,
-  createOutlet: a
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  n as a,
-  a as c,
-  u as o
-};

package/dist/outlets-BsMV5obW.js

@@ -1,13 +0,0 @@
-import { c as t } from "./outlet-C4wpavcH.js";
-const e = t(), o = t(), l = t(), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  AfterTitleOutlet: l,
-  PreTitleOutlet: e,
-  TitleOutlet: o
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  l as A,
-  e as P,
-  o as T,
-  s as o
-};