@stenajs-webui/core 21.26.0 → 21.27.0

package/dist/components/layout/space/Space.d.ts

@@ -5,4 +5,4 @@ export interface SpaceProps {
     num?: number;
     vertical?: boolean;
 }
-export declare const Space: React.VFC<SpaceProps>;
+export declare const Space: React.FC<SpaceProps>;

package/dist/hooks/UseOnScreen.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare const useOnScreen: (ref: RefObject<Element>, options?: IntersectionObserverInit) => boolean;
+export declare const useOnScreen: (ref: RefObject<Element | null>, options?: IntersectionObserverInit) => boolean;

package/dist/index.es.js

@@ -6,10 +6,9 @@ import _ from "@emotion/styled";
 import { system as z, background as F, border as N, borderRight as U, borderLeft as V, borderTop as q, borderBottom as j, borderColor as B, borderRadius as W, borderStyle as X, borderWidth as G, boxShadow as Y, flexbox as K, overflow as Z, position as J, layout as Q, zIndex as ee, left as te, right as re, top as ue, bottom as ne } from "styled-system";
 import { memoize as oe, pickBy as se, debounce as ie } from "lodash-es";
 import L from "classnames";
-import * as ae from "react-dom";
-const ce = "_separatorLine_nzfcz_1", le = {
-  separatorLine: ce
-}, ut = h(
+const ae = "_separatorLine_nzfcz_1", ce = {
+  separatorLine: ae
+}, rt = h(
   ({
     color: e = P("--lhds-color-ui-300"),
     size: t = "100%",
@@ -18,7 +17,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
   }, n) => /* @__PURE__ */ a(
     "hr",
     {
-      className: le.separatorLine,
+      className: ce.separatorLine,
       "aria-hidden": !0,
       color: e,
       style: {
@@ -29,7 +28,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
       ref: n
     }
   )
-), de = _.button`
+), le = _.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -52,7 +51,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
   ${({ width: e }) => e ? `width: ${e};` : ""}
   ${({ height: e }) => e ? `height: ${e};` : ""}
   ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
-`, nt = h(
+`, ut = h(
   ({
     disableFocusHighlight: e,
     onClick: t,
@@ -69,7 +68,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
     type: M = "button",
     ...O
   }, A) => /* @__PURE__ */ a(
-    de,
+    le,
     {
       opacityOnHover: s,
       title: u,
@@ -88,10 +87,10 @@ const ce = "_separatorLine_nzfcz_1", le = {
       children: i
     }
   )
-), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, pe = (e) => {
+), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, de = (e) => {
   if (e !== 0)
     return `calc(${e} * var(--swui-metrics-space))`;
-}, E = (e) => pe(x(e)), me = {
+}, E = (e) => de(x(e)), pe = {
   // react props
   // https://github.com/facebook/react/blob/5495a7f24aef85ba6937truetrue1ce962673ca9f5fde6/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
   children: !0,
@@ -578,16 +577,16 @@ const ce = "_separatorLine_nzfcz_1", le = {
   for: !0,
   class: !0,
   autofocus: !0
-}, he = `^((${Object.keys(me).join(
+}, me = `^((${Object.keys(pe).join(
   "|"
-)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, fe = new RegExp(he), ge = oe(
-  (e) => fe.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
-), ye = {
+)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`, he = new RegExp(me), fe = oe(
+  (e) => he.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
+), ge = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
   modal: "var(--swui-shadow-modal)",
   bottom: "var(--swui-shadow-bottom)"
-}, ve = [
+}, ye = [
   "spacing",
   "indent",
   "gap",
@@ -595,7 +594,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
   "height",
   "overflow",
   "display"
-], be = (e) => ve.includes(e), we = z({
+], ve = (e) => ye.includes(e), be = z({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
@@ -625,10 +624,10 @@ const ce = "_separatorLine_nzfcz_1", le = {
   },
   shadow: {
     property: "boxShadow",
-    transform: (e) => ye[e] ?? e
+    transform: (e) => ge[e] ?? e
   }
 }), b = _("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? be(e) ? !1 : ge(e) : !1
+  shouldForwardProp: (e) => typeof e == "string" ? ve(e) ? !1 : fe(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -636,7 +635,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${we};
+  ${be};
   ${F};
   ${N};
   ${U};
@@ -677,11 +676,11 @@ const ce = "_separatorLine_nzfcz_1", le = {
     ${({ focusWithinBackground: e }) => e ? `background: ${e};` : ""}
     ${({ focusWithinBorder: e }) => e ? `border: ${e};` : ""}
   }
-`, ot = h(
+`, nt = h(
   function(t, r) {
     return /* @__PURE__ */ a(b, { ref: r, ...t });
   }
-), xe = (e) => {
+), we = (e) => {
   const { x: t, y: r, width: u, height: n, bottom: o, top: s, left: c, right: i } = e.getBoundingClientRect();
   return {
     width: u,
@@ -693,12 +692,12 @@ const ce = "_separatorLine_nzfcz_1", le = {
     right: i,
     bottom: o
   };
-}, ke = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, _e = (e, t) => {
+}, xe = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, ke = (e, t) => {
   const [r, u] = g(), n = m(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
-        const o = xe(e.current);
-        (!r || !ke(r, o)) && t && t(o), u(o);
+        const o = we(e.current);
+        (!r || !xe(r, o)) && t && t(o), u(o);
       }
     });
   }, [e, r, u, t]);
@@ -707,27 +706,27 @@ const ce = "_separatorLine_nzfcz_1", le = {
   }, [n]), {
     dimensions: r
   };
-}, st = h(
+}, ot = h(
   function({ onResize: t, ...r }, u) {
     const n = y(null);
-    return _e(u ?? n, t), /* @__PURE__ */ a(b, { ...r, ref: u });
+    return ke(u ?? n, t), /* @__PURE__ */ a(b, { ...r, ref: u });
   }
-), it = h(
+), st = h(
   function(t, r) {
     return /* @__PURE__ */ a(b, { row: !0, ref: r, ...t });
   }
-), at = h(function({ num: t = 1, ...r }, u) {
+), it = h(function({ num: t = 1, ...r }, u) {
   return /* @__PURE__ */ a(b, { indent: t, ref: u, ...r });
-}), ct = h(
+}), at = h(
   function({ num: t = 1, ...r }, u) {
     return /* @__PURE__ */ a(b, { spacing: t, ref: u, ...r });
   }
-), $e = _.div`
+), _e = _.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`, lt = ({
+`, ct = ({
   half: e = !1,
   horizontal: t = !1,
   num: r = 1,
@@ -735,7 +734,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
 }) => {
   const n = r * (e ? 0.5 : 1);
   return /* @__PURE__ */ a(
-    $e,
+    _e,
     {
       style: {
         "--current-size": n,
@@ -744,21 +743,21 @@ const ce = "_separatorLine_nzfcz_1", le = {
       }
     }
   );
-}, dt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ a(S, { children: r(e) }) : /* @__PURE__ */ a(S, { children: e }), Se = "_visuallyHidden_1gevf_1", Ee = {
-  visuallyHidden: Se
-}, Te = (e) => se(e, Ce), Ce = (e, t) => Ie(t), Ie = (e) => e.startsWith("data-") || e.startsWith("aria-"), pt = ({
+}, lt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ a(S, { children: r(e) }) : /* @__PURE__ */ a(S, { children: e }), $e = "_visuallyHidden_1gevf_1", Se = {
+  visuallyHidden: $e
+}, Ee = (e) => se(e, Te), Te = (e, t) => Ce(t), Ce = (e) => e.startsWith("data-") || e.startsWith("aria-"), dt = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("span", { className: Ee.visuallyHidden, ...Te(t), children: e }), Re = "_text_1iisw_1", Le = "_standard_1iisw_24", Me = "_bold_1iisw_27", Oe = "_caption_1iisw_31", Ae = "_overline_1iisw_39", Pe = "_large_1iisw_48", De = "_medium_1iisw_53", He = "_small_1iisw_58", ze = "_smaller_1iisw_63", k = {
-  text: Re,
-  standard: Le,
-  bold: Me,
-  caption: Oe,
-  overline: Ae,
-  large: Pe,
-  medium: De,
-  small: He,
-  smaller: ze
+}) => /* @__PURE__ */ a("span", { className: Se.visuallyHidden, ...Ee(t), children: e }), Ie = "_text_1iisw_1", Re = "_standard_1iisw_24", Le = "_bold_1iisw_27", Me = "_caption_1iisw_31", Oe = "_overline_1iisw_39", Ae = "_large_1iisw_48", Pe = "_medium_1iisw_53", De = "_small_1iisw_58", He = "_smaller_1iisw_63", k = {
+  text: Ie,
+  standard: Re,
+  bold: Le,
+  caption: Me,
+  overline: Oe,
+  large: Ae,
+  medium: Pe,
+  small: De,
+  smaller: He
 }, w = h(
   ({
     children: e,
@@ -789,15 +788,15 @@ const ce = "_separatorLine_nzfcz_1", le = {
       children: e
     }
   )
-), mt = w, ht = (e) => /* @__PURE__ */ a(w, { size: "small", ...e }), ft = (e) => /* @__PURE__ */ a(w, { size: "smaller", ...e }), gt = (e) => /* @__PURE__ */ a(w, { size: "medium", ...e }), yt = (e) => /* @__PURE__ */ a(w, { size: "large", ...e }), Fe = "_heading_1cnsg_1", Ne = "_h1_1cnsg_10", Ue = "_h2_1cnsg_14", Ve = "_h3_1cnsg_18", qe = "_h4_1cnsg_22", je = "_h5_1cnsg_26", Be = "_h6_1cnsg_30", T = {
-  heading: Fe,
-  h1: Ne,
-  h2: Ue,
-  h3: Ve,
-  h4: qe,
-  h5: je,
-  h6: Be
-}, We = h(
+), pt = w, mt = (e) => /* @__PURE__ */ a(w, { size: "small", ...e }), ht = (e) => /* @__PURE__ */ a(w, { size: "smaller", ...e }), ft = (e) => /* @__PURE__ */ a(w, { size: "medium", ...e }), gt = (e) => /* @__PURE__ */ a(w, { size: "large", ...e }), ze = "_heading_1cnsg_1", Fe = "_h1_1cnsg_10", Ne = "_h2_1cnsg_14", Ue = "_h3_1cnsg_18", Ve = "_h4_1cnsg_22", qe = "_h5_1cnsg_26", je = "_h6_1cnsg_30", T = {
+  heading: ze,
+  h1: Fe,
+  h2: Ne,
+  h3: Ue,
+  h4: Ve,
+  h5: qe,
+  h6: je
+}, Be = h(
   ({
     variant: e = "h3",
     className: t,
@@ -818,7 +817,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
       children: s
     }
   )
-), vt = (e) => /* @__PURE__ */ a(We, { variant: "h2", ...e }), Xe = (e, t) => e === t, bt = (e, t, r = Xe) => {
+), yt = (e) => /* @__PURE__ */ a(Be, { variant: "h2", ...e }), We = (e, t) => e === t, vt = (e, t, r = We) => {
   const u = m(
     (i) => {
       e.some((l) => r(l, i)) || t([...e, i]);
@@ -864,7 +863,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
     r((s) => !s);
   }, [r]);
   return [t, u, n, o];
-}, wt = (e, t) => {
+}, bt = (e, t) => {
   const [r, u] = g(e);
   return d(() => {
     const n = setTimeout(() => {
@@ -874,7 +873,7 @@ const ce = "_separatorLine_nzfcz_1", le = {
       clearTimeout(n);
     };
   }, [e, t]), r;
-}, xt = (e, t) => {
+}, wt = (e, t) => {
   const [r, u] = g(e);
   return d(() => {
     e && u(!0);
@@ -886,12 +885,12 @@ const ce = "_separatorLine_nzfcz_1", le = {
     };
   }, [e, t]), r;
 };
-let Ge = 0;
-const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
+let Xe = 0;
+const C = (e) => `webui-${e ? e + "-" : ""}${++Xe}`, xt = (e) => {
   const [t, r] = g(() => C(e));
   return d(() => r(C(e)), [e]), t;
 }, v = (e, t, r) => {
-  const u = y();
+  const u = y(null);
   d(() => {
     u.current = r;
   }, [r]), d(() => {
@@ -907,10 +906,10 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
       s && s.removeEventListener(t, o);
     };
   }, [t, e]);
-}, _t = (e) => {
+}, kt = (e) => {
   const [t, r, u] = $(!1);
   d(() => {
-    document.activeElement === ae.findDOMNode(e.current) ? r() : u();
+    document.activeElement === e.current ? r() : u();
   }, [e, u, r]), v(e, "focus", r), v(e, "blur", u);
   const n = m(() => {
     e.current && e.current.focus();
@@ -918,16 +917,16 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
     e.current && e.current.blur();
   }, [e]);
   return { isInFocus: t, focus: n, blur: o };
-}, $t = (e) => {
+}, _t = (e) => {
   const t = D.useRef(e);
   return t.current = e, t;
-}, St = (e) => {
+}, $t = (e) => {
   const [t, r, u] = $(!1);
   return v(e, "mouseover", r), v(e, "mouseout", u), t;
-}, Et = (e) => {
+}, St = (e) => {
   const [t, r, u] = $(!1);
   return v(e, "mouseenter", r), v(e, "mouseleave", u), t;
-}, Tt = (e, t) => {
+}, Et = (e, t) => {
   const r = y(() => {
   });
   d(() => {
@@ -940,7 +939,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
       document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u);
     };
   }, [...e]);
-}, Ct = (e, t, r) => {
+}, Tt = (e, t, r) => {
   const u = y(() => {
   });
   d(() => {
@@ -953,7 +952,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
       document.removeEventListener("mousedown", n, r), document.removeEventListener("touchstart", n, r);
     };
   }, [e, r]);
-}, I = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], It = (e, t) => {
+}, I = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], Ct = (e, t) => {
   const r = y(() => {
   });
   d(() => {
@@ -966,7 +965,7 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
       );
     };
   }, [t]);
-}, Rt = (e, t) => {
+}, It = (e, t) => {
   const [r, u] = g(!1), { rootMargin: n, root: o, threshold: s } = t || {}, c = R(() => new IntersectionObserver(
     ([i]) => u(i.isIntersecting),
     {
@@ -978,13 +977,13 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
   return d(() => (e.current && c.observe(e.current), () => {
     c.disconnect();
   }), [c, e]), r;
-}, Lt = (e) => {
+}, Rt = (e) => {
   const t = y(null);
   return d(() => {
     e && (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, Mt = (e, t, r = !0) => {
-  const [u, n] = g(e), o = y(), s = m(
+}, Lt = (e, t, r = !0) => {
+  const [u, n] = g(e), o = y(null), s = m(
     (c, i = t) => {
       n(c), r && clearTimeout(o.current), o.current = setTimeout(() => n(e), i);
     },
@@ -993,71 +992,71 @@ const C = (e) => `webui-${e ? e + "-" : ""}${++Ge}`, kt = (e) => {
   return d(() => () => {
     clearTimeout(o.current);
   }, []), [u, s];
-}, Ot = () => R(() => /* @__PURE__ */ new Date(), []), At = (e) => {
+}, Mt = () => R(() => /* @__PURE__ */ new Date(), []), Ot = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, Pt = (e, t) => t, Dt = (e) => Object.keys(e).filter((t) => e[t]), Ht = (e) => {
+}, At = (e, t) => t, Pt = (e) => Object.keys(e).filter((t) => e[t]), Dt = (e) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
-}, zt = (e) => {
+}, Ht = (e) => {
   try {
     const t = parseInt(e, 10);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
 };
-function Ft(e, t) {
+function zt(e, t) {
   if (e == null)
     throw new Error("Invariant error: " + t);
 }
 export {
   b as Box,
-  nt as Clickable,
-  ot as Column,
-  vt as HeaderText,
-  We as Heading,
-  at as Indent,
-  yt as LargeText,
-  dt as Nest,
-  st as ResizeAwareBox,
-  it as Row,
-  pt as ScreenReaderOnlyText,
-  ut as SeparatorLine,
-  ht as SmallText,
-  ft as SmallerText,
-  lt as Space,
-  ct as Spacing,
-  gt as StandardText,
+  ut as Clickable,
+  nt as Column,
+  yt as HeaderText,
+  Be as Heading,
+  it as Indent,
+  gt as LargeText,
+  lt as Nest,
+  ot as ResizeAwareBox,
+  st as Row,
+  dt as ScreenReaderOnlyText,
+  rt as SeparatorLine,
+  mt as SmallText,
+  ht as SmallerText,
+  ct as Space,
+  at as Spacing,
+  ft as StandardText,
   w as Text,
-  mt as Txt,
+  pt as Txt,
   x as booleanOrNumberToNumber,
-  Pt as exhaustSwitchCase,
-  At as exhaustSwitchCaseElseThrow,
-  Te as getDataProps,
-  xe as getDimensionObject,
-  Ft as invariant,
-  Ht as parseFloatElseUndefined,
-  zt as parseIntElseUndefined,
-  Dt as truthyKeysAsList,
-  bt as useArraySet,
+  At as exhaustSwitchCase,
+  Ot as exhaustSwitchCaseElseThrow,
+  Ee as getDataProps,
+  we as getDimensionObject,
+  zt as invariant,
+  Dt as parseFloatElseUndefined,
+  Ht as parseIntElseUndefined,
+  Pt as truthyKeysAsList,
+  vt as useArraySet,
   $ as useBoolean,
-  wt as useDebounce,
-  xt as useDelayedFalse,
-  kt as useDomId,
-  _e as useElementDimensions,
-  _t as useElementFocus,
+  bt as useDebounce,
+  wt as useDelayedFalse,
+  xt as useDomId,
+  ke as useElementDimensions,
+  kt as useElementFocus,
   v as useEventListener,
-  Lt as useForwardedRef,
-  $t as useLatest,
-  Et as useMouseIsEntered,
-  St as useMouseIsOver,
-  Tt as useMultiOnClickOutside,
-  Ct as useOnClickOutside,
-  It as useOnNoMouseMovement,
-  Rt as useOnScreen,
-  Mt as useTimeoutState,
-  Ot as useToday
+  Rt as useForwardedRef,
+  _t as useLatest,
+  St as useMouseIsEntered,
+  $t as useMouseIsOver,
+  Et as useMultiOnClickOutside,
+  Tt as useOnClickOutside,
+  Ct as useOnNoMouseMovement,
+  It as useOnScreen,
+  Lt as useTimeoutState,
+  Mt as useToday
 };
 //# sourceMappingURL=index.es.js.map