@viasat/beam-react 2.0.0

package/lib/index.es.js

@@ -0,0 +1,152 @@
+import { Accordion as e } from "./Accordion/Accordion.es.js";
+import { AccordionGroup as p } from "./Accordion/AccordionGroup.es.js";
+import { Alert as m } from "./Alert/Alert.es.js";
+import { Autocomplete as f } from "./Autocomplete/Autocomplete.es.js";
+import { Avatar as d } from "./Avatar/index.es.js";
+import { CloseButton as s } from "./CloseButton/CloseButton.es.js";
+import { Button as A, ButtonIconWrap as l } from "./Button/Button.es.js";
+import { Dialog as c } from "./Dialog/Dialog.es.js";
+import { Breadcrumb as v } from "./Breadcrumbs/Breadcrumbs.es.js";
+import { B as L } from "../chunks/BreadcrumbsItem.CPJ-ECZa.js";
+import { EmptyState as P } from "./EmptyState/EmptyState.es.js";
+import { Badge as g } from "./Badge/Badge.es.js";
+import { BadgeDot as _ } from "./BadgeDot/BadgeDot.es.js";
+import { Box as D } from "./Box/Box.es.js";
+import { Checkbox as I } from "./Checkbox/Checkbox.es.js";
+import { Chip as h } from "./Chips/Chip.es.js";
+import { ChipGroup as b } from "./Chips/ChipGroup.es.js";
+import { Divider as y } from "./Divider/Divider.es.js";
+import { default as k } from "./FileUpload/FileUpload.es.js";
+import { Flag as Y } from "./Flag/Flag.es.js";
+import { Form as w } from "./Form/Form.es.js";
+import { H as V } from "../chunks/form.context.CNWjF5qA.js";
+import { Icon as j } from "./Icon/Icon.es.js";
+import { SwitchGroup as z } from "./InputChoiceGroup/SwitchGroup/SwitchGroup.es.js";
+import { CheckboxGroup as X } from "./InputChoiceGroup/CheckboxGroup/CheckboxGroup.es.js";
+import { RadioButtonGroup as $ } from "./InputChoiceGroup/RadioButtonGroup/RadioButtonGroup.es.js";
+import { Label as ro } from "./Label/Label.es.js";
+import { Link as to } from "./Link/Link.es.js";
+import { List as xo } from "./List/List.es.js";
+import { ActionList as ao } from "./ActionList/ActionList.es.js";
+import { Logo as io } from "./Logo/Logo.es.js";
+import { Menu as so } from "./Menu/Menu.es.js";
+import { useMenuContext as Ao } from "./Menu/Menu.context.es.js";
+import { NativeSelect as To } from "./NativeSelect/NativeSelect.es.js";
+import { Pagination as So } from "./Pagination/Pagination.es.js";
+import { ProgressBar as Bo } from "./ProgressBar/ProgressBar.es.js";
+import { RadioButton as Co } from "./RadioButton/RadioButton.es.js";
+import { DRAWER_LAYOUT as No, HIDDEN_LAYOUT as go, LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME as Ro, NO_LAYOUT as _o, OPAQUE_BACKDROP as Oo, RAIL_LAYOUT as Do, Root as Ho, SideNav as Io, SideNavBackdrops as Eo, SideNavClosedLayouts as ho, SideNavOpenLayouts as Go, TRANSPARENT_BACKDROP as bo } from "./SideNav/SideNav.es.js";
+import { SideNavProvider as yo, useSideNavContext as Mo } from "./SideNav/SideNavContext.es.js";
+import { SegmentedControl as Fo } from "./SegmentedControl/SegmentedControl.es.js";
+import { Select as Wo } from "./Select/Select.es.js";
+import { Spinner as Ko } from "./Spinner/Spinner.es.js";
+import { StateLayer as Qo } from "./StateLayer/StateLayer.es.js";
+import { Stepper as qo } from "./Stepper/Stepper.es.js";
+import { processMetadata as Jo, useBeamStepper as Xo } from "./Stepper/useBeamStepper.es.js";
+import { Switch as $o } from "./Switch/Switch.es.js";
+import { Tabs as rr } from "./Tabs/Tabs.es.js";
+import { Text as tr } from "./Text/Text.es.js";
+import { TextArea as xr } from "./TextArea/TextArea.es.js";
+import { TextField as ar } from "./TextField/TextField.es.js";
+import { Toast as ir } from "./Toasts/Toast.es.js";
+import { T as nr, u as sr } from "../chunks/ToastContext.DzKCvrgk.js";
+import { ToastContainer as Ar } from "./Toasts/ToastContainer.es.js";
+import { Tooltip as Tr, TooltipIconTrigger as cr } from "./Tooltip/Tooltip.es.js";
+import { Header as vr, InternalHeader as Br } from "./Header/Header.es.js";
+import { HeaderMasthead as Cr } from "./Header/HeaderMasthead.es.js";
+import { HeaderActionGroup as Nr } from "./Header/HeaderActionGroup.es.js";
+import { HeaderNavigation as Rr } from "./Header/HeaderNavigation.es.js";
+import { PortalContext as Or, usePortal as Dr } from "./PortalProvider/PortalContext.es.js";
+import { PortalProvider as Ir } from "./PortalProvider/PortalProvider.es.js";
+import { Popover as hr } from "./Popover/Popover.es.js";
+import { PageHeader as br } from "./PageHeader/PageHeader.es.js";
+import { PageLayout as yr } from "./PageLayout/PageLayout.es.js";
+import { Slider as kr } from "./Slider/Slider.es.js";
+import { Card as Yr } from "./Card/Card.es.js";
+import { v as wr } from "../chunks/useFormValidator.hook.CSmddwEt.js";
+export {
+  e as Accordion,
+  p as AccordionGroup,
+  ao as ActionList,
+  m as Alert,
+  f as Autocomplete,
+  d as Avatar,
+  g as Badge,
+  _ as BadgeDot,
+  D as Box,
+  v as Breadcrumb,
+  L as BreadcrumbItem,
+  A as Button,
+  l as ButtonIconWrap,
+  Yr as Card,
+  I as Checkbox,
+  X as CheckboxGroup,
+  h as Chip,
+  b as ChipGroup,
+  s as CloseButton,
+  No as DRAWER_LAYOUT,
+  c as Dialog,
+  y as Divider,
+  P as EmptyState,
+  k as FileUpload,
+  Y as Flag,
+  w as Form,
+  go as HIDDEN_LAYOUT,
+  vr as Header,
+  Nr as HeaderActionGroup,
+  Cr as HeaderMasthead,
+  Rr as HeaderNavigation,
+  V as HelperText,
+  j as Icon,
+  Br as InternalHeader,
+  Ro as LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME,
+  ro as Label,
+  to as Link,
+  xo as List,
+  io as Logo,
+  so as Menu,
+  _o as NO_LAYOUT,
+  To as NativeSelect,
+  Oo as OPAQUE_BACKDROP,
+  br as PageHeader,
+  yr as PageLayout,
+  So as Pagination,
+  hr as Popover,
+  Or as PortalContext,
+  Ir as PortalProvider,
+  Bo as ProgressBar,
+  Do as RAIL_LAYOUT,
+  Co as RadioButton,
+  $ as RadioButtonGroup,
+  Ho as Root,
+  Fo as SegmentedControl,
+  Wo as Select,
+  Io as SideNav,
+  Eo as SideNavBackdrops,
+  ho as SideNavClosedLayouts,
+  Go as SideNavOpenLayouts,
+  yo as SideNavProvider,
+  kr as Slider,
+  Ko as Spinner,
+  Qo as StateLayer,
+  qo as Stepper,
+  $o as Switch,
+  z as SwitchGroup,
+  bo as TRANSPARENT_BACKDROP,
+  rr as Tabs,
+  tr as Text,
+  xr as TextArea,
+  ar as TextField,
+  ir as Toast,
+  Ar as ToastContainer,
+  nr as ToastProvider,
+  Tr as Tooltip,
+  cr as TooltipIconTrigger,
+  Jo as processMetadata,
+  Xo as useBeamStepper,
+  Ao as useMenuContext,
+  Dr as usePortal,
+  Mo as useSideNavContext,
+  sr as useToast,
+  wr as validators
+};

package/lib/wip/index.cjs.js

@@ -0,0 +1 @@
+"use strict";

package/lib/wip/index.es.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@viasat/beam-react",
+  "version": "2.0.0",
+  "description": "React component library for the Beam design system",
+  "license": "MIT",
+  "author": "Viasat",
+  "homepage": "https://react.beam.viasat.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://git.viasat.com/vega/beam",
+    "directory": "libs/react"
+  },
+  "bugs": {
+    "url": "https://git.viasat.com/vega/beam/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "beam",
+    "ui",
+    "component-library"
+  ],
+  "main": "./index.cjs.js",
+  "module": "./index.es.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.es.js",
+      "require": "./index.cjs.js",
+      "types": "./index.d.ts"
+    },
+    "./*": {
+      "import": "./lib/*/index.es.js",
+      "require": "./lib/*/index.cjs.js",
+      "types": "./lib/*/index.d.ts"
+    },
+    "./styles.css": "./assets/index.css"
+  },
+  "files": [
+    "index.cjs.js",
+    "index.es.js",
+    "index.d.ts",
+    "custom-properties.d.cjs.js",
+    "custom-properties.d.es.js",
+    "README.md",
+    "lib/",
+    "assets/",
+    "chunks/",
+    "utils/"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@viasat/beam-fonts": "2.0.0",
+    "@viasat/beam-shared": "2.0.0",
+    "@viasat/beam-styles": "2.0.0",
+    "@viasat/beam-tokens": "2.0.0",
+    "@viasat/beam-icons": "2.0.0",
+    "clsx": "^1.2.1",
+    "@floating-ui/react": "^0.26.18",
+    "@stepperize/react": "^5.1.5",
+    "@floating-ui/utils": "^0.2.9",
+    "use-isomorphic-layout-effect": "^1.2.0",
+    "next-themes": "^0.4.6"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}

package/utils/children.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");function n(r,i){for(const e of t.Children.toArray(r))if(t.isValidElement(e)&&i.includes(e.type))return e}exports.extractChild=n;

package/utils/children.d.ts

@@ -0,0 +1 @@
+export declare function extractChild<P>(children: React.ReactNode, types: readonly React.ElementType<P>[]): React.ReactElement<P> | undefined;

package/utils/children.es.js

@@ -0,0 +1,9 @@
+import { Children as e, isValidElement as o } from "react";
+function d(t, i) {
+  for (const r of e.toArray(t))
+    if (o(r) && i.includes(r.type))
+      return r;
+}
+export {
+  d as extractChild
+};

package/utils/extractSpecifiedComponents.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function a(p,c){const i=new Map(Object.entries(c).map(([e,n])=>[n,e])),o={},t=[];return r.Children.forEach(p,e=>{if(r.isValidElement(e)){const n=e.type,s=i.get(n);s?o[s]=e:t.push(e)}else t.push(e)}),[o,t]}exports.extractSpecifiedComponents=a;

package/utils/extractSpecifiedComponents.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+/**
+ * Extracts specific child components from a `ReactNode` collection based on a provided mapping
+ * of component names to their corresponding React functional components.
+ *
+ * @param {React.ReactNode} children - The children prop from a React component, typically containing
+ * a mix of various components and elements.
+ * @param {Record<Key, React.FC>} componentsMap - An object mapping keys (component names) to their
+ * corresponding React functional components. The keys are used to identify and extract the desired
+ * components from the `children`.
+ *
+ * @returns {[Partial<Record<Key, React.ReactElement>>, React.ReactNode[]]} A tuple where the first element
+ * is an object containing the extracted components, and the second element is an array of the remaining children.
+ *
+ * @example
+ * const [{ actions, masthead, navigation, sideNav }, rest] = extractNamedComponents(
+ *   children,
+ *   {
+ *     masthead: HeaderMasthead,
+ *     navigation: __Navigation,
+ *     actions: HeaderActions,
+ *   },
+ * );
+ *
+ * // `extracted` will contain the corresponding React elements if they were found in the `children`.
+ * // `rest` will contain the remaining React elements that were not extracted.
+ */
+export declare function extractSpecifiedComponents<Key extends string, C extends React.ElementType>(children: React.ReactNode, componentsMap: Record<Key, C>): [Partial<Record<Key, React.ReactElement>>, React.ReactNode[]];

package/utils/extractSpecifiedComponents.es.js

@@ -0,0 +1,16 @@
+import p from "react";
+function i(r, a) {
+  const c = new Map(
+    Object.entries(a).map(([e, n]) => [n, e])
+  ), o = {}, t = [];
+  return p.Children.forEach(r, (e) => {
+    if (p.isValidElement(e)) {
+      const n = e.type, s = c.get(n);
+      s ? o[s] = e : t.push(e);
+    } else
+      t.push(e);
+  }), [o, t];
+}
+export {
+  i as extractSpecifiedComponents
+};

package/utils/functions.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=e=>a.Children.only(e);function f(e,t){if(e!=null){if(typeof e=="function"){e(t);return}try{e.current=t}catch{console.warn(`Cannot assign value '${t}' to ref '${e}'`)}}}function o(...e){return t=>{e.forEach(r=>{f(r,t)})}}function i(e){return typeof e=="string"||typeof e=="number"?e.toString():Array.isArray(e)?e.map(i).join(""):a.isValidElement(e)?i(e.props.children):""}const l=(e,t)=>{const r=u(e),n=u(t);return!r||!n?!1:r===n||"displayName"in r&&"displayName"in n&&r.displayName===n.displayName||"name"in r&&"name"in n&&r.name===n.name},u=e=>typeof e=="function"?e:typeof e=="object"&&e&&"render"in e&&typeof e.render=="function"?e.render:null;exports.ensureSingularRef=s;exports.extractTextFromReactNode=i;exports.isSameComponent=l;exports.mergeRefs=o;

package/utils/functions.d.ts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { ReactRef } from './types';
+export declare const ensureSingularRef: (children: ReactNode) => React.ReactElement & {
+    ref?: React.Ref<unknown>;
+};
+/**
+ * Merges multiple refs into a single ref.
+ *
+ * @param refs
+ */
+export declare function mergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;
+export declare function extractTextFromReactNode(node: React.ReactNode): string;
+export declare const isSameComponent: (component1: unknown, component2: unknown) => boolean;

package/utils/functions.es.js

@@ -0,0 +1,35 @@
+import { Children as a, isValidElement as f } from "react";
+const l = (r) => a.only(r);
+function s(r, n) {
+  if (r != null) {
+    if (typeof r == "function") {
+      r(n);
+      return;
+    }
+    try {
+      r.current = n;
+    } catch {
+      console.warn(`Cannot assign value '${n}' to ref '${r}'`);
+    }
+  }
+}
+function c(...r) {
+  return (n) => {
+    r.forEach((e) => {
+      s(e, n);
+    });
+  };
+}
+function i(r) {
+  return typeof r == "string" || typeof r == "number" ? r.toString() : Array.isArray(r) ? r.map(i).join("") : f(r) ? i(r.props.children) : "";
+}
+const y = (r, n) => {
+  const e = u(r), t = u(n);
+  return !e || !t ? !1 : e === t || "displayName" in e && "displayName" in t && e.displayName === t.displayName || "name" in e && "name" in t && e.name === t.name;
+}, u = (r) => typeof r == "function" ? r : typeof r == "object" && r && "render" in r && typeof r.render == "function" ? r.render : null;
+export {
+  l as ensureSingularRef,
+  i as extractTextFromReactNode,
+  y as isSameComponent,
+  c as mergeRefs
+};

package/utils/hooks/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../../chunks/constants.hwjHOsvT.js"),p=require("../../chunks/helpers.COm6C5Gf.js"),a=require("../../chunks/CSSLookup.DESAWWRT.js"),w=require("./useId.cjs.js");function f(e,t=window.getComputedStyle(e)){return parseInt(t.getPropertyValue("-webkit-line-clamp"),10)>=1&&t.getPropertyValue("display")==="-webkit-box"&&t.getPropertyValue("overflow")==="hidden"}function g(e,t=window.getComputedStyle(e)){return t.getPropertyValue("text-overflow")==="ellipsis"&&t.getPropertyValue("white-space")==="nowrap"&&t.getPropertyValue("overflow")==="hidden"&&e.scrollWidth>e.clientWidth}function h(e){return e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight}function S(e){if(!e)return!1;if(h(e))return!0;const t=window.getComputedStyle(e);return f(e,t)||g(e,t)}const b=e=>{if(!e)return!1;const t=e.cloneNode(!0);t.style.position="absolute",t.style.whiteSpace="nowrap",t.style.width="auto",t.style.height="auto",t.style.visibility="hidden",document.body.appendChild(t);const n=t.offsetWidth>e.offsetWidth;return document.body.removeChild(t),n},l=(e,t=d.FPS_120,n=[])=>{const i=s.useRef(null);return s.useLayoutEffect(()=>{const{current:r}=i;if(!r)return;e();const u=p.debounce(()=>{e()},t),c=new ResizeObserver(u);return c.observe(r),()=>{c.disconnect(),u.cancel()}},[i,e,t,n]),{ref:i}},v=()=>{const[e,t]=s.useState(!1),n=()=>{i.current&&t(S(i.current))},{ref:i}=l(n);return{ref:i,isOverFlowing:e}},m=e=>{const[t,n]=s.useState(!1),i=()=>{r.current&&n(b(r.current))},{ref:r}=l(i,200);return{ref:r,isTextWrapping:t}},y=e=>{const[t,n]=s.useState(()=>a.CSSManager.findVar(e)??"");return s.useEffect(()=>{const i=r=>{n(r)};return a.CSSManager.findVar(e,i),()=>{a.CSSManager.unsubscribe(e,i)}},[e]),t};function C(e){const[t,n]=s.useState(!1);return s.useLayoutEffect(()=>{if(typeof window>"u")return;const i=o=>o?getComputedStyle(o).direction:"ltr",r=()=>{const o=e.current;return o?i(o)==="rtl"||!!o.closest('[dir="rtl"]')||i(document.documentElement)==="rtl":!1};n(r());const u=new MutationObserver(()=>n(r()));u.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class"],subtree:!0});const c=requestAnimationFrame(function o(){n(r()),requestAnimationFrame(o)});return()=>{u.disconnect(),cancelAnimationFrame(c)}},[e]),t}const W=()=>{const[e,t]=s.useState(!1);return s.useEffect(()=>{if(typeof window>"u")return;const n=()=>{const i="ontouchstart"in window||navigator.maxTouchPoints>0,r=window.innerHeight>window.innerWidth,u=r?window.innerWidth:window.innerHeight,c=r?window.innerHeight:window.innerWidth,o=u<1024||c<768;t(i&&o)};return n(),window.addEventListener("resize",n,{passive:!0}),window.addEventListener("orientationchange",n,{passive:!0}),()=>{window.removeEventListener("resize",n),window.removeEventListener("orientationchange",n)}},[]),e};exports.useId=w.useId;exports.useCSSLookup=y;exports.useIsOverFlowing=v;exports.useIsTextWrapping=m;exports.useMobileDetection=W;exports.useRTLDirection=C;exports.useResizeObserver=l;

package/utils/hooks/index.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { VoidFunction } from '@viasat/beam-shared/utils/constants';
+import { debounce } from '@viasat/beam-shared/utils/helpers';
+export { useId } from './useId';
+type WaitFor = Parameters<typeof debounce>[1];
+/**
+ * Hook to set up a resize observer on an element.
+ *
+ * @param resizeCallBack the callback to call when the element resizes
+ * @param waitFor the time to wait before calling the callback
+ * @param deps the dependencies to watch for changes
+ *
+ * @returns ref to attach to the element
+ */
+export declare const useResizeObserver: <T extends HTMLElement>(resizeCallBack: VoidFunction, waitFor?: WaitFor, deps?: React.DependencyList) => {
+    ref: React.MutableRefObject<T | null>;
+};
+/**
+ * Hook to check if an element is overflowing, when there is a height
+ * or width set to the element.
+ *
+ * @returns
+ */
+export declare const useIsOverFlowing: () => {
+    ref: React.MutableRefObject<HTMLElement | null>;
+    isOverFlowing: boolean;
+};
+/**
+ * Hook to check if an elements text wraps when there is no
+ * height or width set on the element. This hook will create a clone of
+ * the element, so there is a performance cost to using this hook.
+ *
+ * @param node the element to check if it is overflowing
+ * @returns
+ */
+export declare const useIsTextWrapping: (node: React.ReactNode) => {
+    ref: React.MutableRefObject<HTMLElement | null>;
+    isTextWrapping: boolean;
+};
+/**
+ * Takes in a CSS var evaluation (ideally from Beam token consts file) and
+ * looks for the declaration on the document root. The return value will be
+ * updated when the CSS var is updated or found if it wasn't initially on the
+ * document root.
+ *
+ * @param cssVar the CSS variable to look up
+ *
+ * @returns raw string value of the CSS variable
+ */
+export declare const useCSSLookup: (cssVar: string) => string;
+/**
+ * Returns true when the element itself, any ancestor, or <html>
+ * has RTL direction — updates live on attribute or CSS changes.
+ */
+export declare function useRTLDirection(ref: React.RefObject<HTMLElement>): boolean;
+export declare const useMobileDetection: () => boolean;

package/utils/hooks/index.es.js

@@ -0,0 +1,108 @@
+import { useState as u, useEffect as d, useRef as w, useLayoutEffect as l } from "react";
+import { a as f } from "../../chunks/constants.BBi77pmH.js";
+import { d as m } from "../../chunks/helpers.Wv7n4ip7.js";
+import { C as a } from "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import { useId as V } from "./useId.es.js";
+function h(e, t = window.getComputedStyle(e)) {
+  return parseInt(t.getPropertyValue("-webkit-line-clamp"), 10) >= 1 && t.getPropertyValue("display") === "-webkit-box" && t.getPropertyValue("overflow") === "hidden";
+}
+function g(e, t = window.getComputedStyle(e)) {
+  return t.getPropertyValue("text-overflow") === "ellipsis" && t.getPropertyValue("white-space") === "nowrap" && t.getPropertyValue("overflow") === "hidden" && e.scrollWidth > e.clientWidth;
+}
+function v(e) {
+  return e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight;
+}
+function b(e) {
+  if (!e) return !1;
+  if (v(e)) return !0;
+  const t = window.getComputedStyle(e);
+  return h(e, t) || g(e, t);
+}
+const y = (e) => {
+  if (!e) return !1;
+  const t = e.cloneNode(!0);
+  t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.width = "auto", t.style.height = "auto", t.style.visibility = "hidden", document.body.appendChild(t);
+  const n = t.offsetWidth > e.offsetWidth;
+  return document.body.removeChild(t), n;
+}, p = (e, t = f, n = []) => {
+  const i = w(null);
+  return l(() => {
+    const { current: r } = i;
+    if (!r) return;
+    e();
+    const s = m(() => {
+      e();
+    }, t), c = new ResizeObserver(s);
+    return c.observe(r), () => {
+      c.disconnect(), s.cancel();
+    };
+  }, [i, e, t, n]), { ref: i };
+}, x = () => {
+  const [e, t] = u(!1), n = () => {
+    i.current && t(b(i.current));
+  }, { ref: i } = p(n);
+  return { ref: i, isOverFlowing: e };
+}, E = (e) => {
+  const [t, n] = u(!1), i = () => {
+    r.current && n(y(r.current));
+  }, { ref: r } = p(i, 200);
+  return { ref: r, isTextWrapping: t };
+}, T = (e) => {
+  const [t, n] = u(
+    () => a.findVar(e) ?? ""
+  );
+  return d(() => {
+    const i = (r) => {
+      n(r);
+    };
+    return a.findVar(e, i), () => {
+      a.unsubscribe(e, i);
+    };
+  }, [e]), t;
+};
+function F(e) {
+  const [t, n] = u(!1);
+  return l(() => {
+    if (typeof window > "u") return;
+    const i = (o) => o ? getComputedStyle(o).direction : "ltr", r = () => {
+      const o = e.current;
+      return o ? i(o) === "rtl" || !!o.closest('[dir="rtl"]') || i(document.documentElement) === "rtl" : !1;
+    };
+    n(r());
+    const s = new MutationObserver(() => n(r()));
+    s.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["dir", "class"],
+      subtree: !0
+      // catch any descendant <div dir="rtl">
+    });
+    const c = requestAnimationFrame(function o() {
+      n(r()), requestAnimationFrame(o);
+    });
+    return () => {
+      s.disconnect(), cancelAnimationFrame(c);
+    };
+  }, [e]), t;
+}
+const O = () => {
+  const [e, t] = u(!1);
+  return d(() => {
+    if (typeof window > "u") return;
+    const n = () => {
+      const i = "ontouchstart" in window || navigator.maxTouchPoints > 0, r = window.innerHeight > window.innerWidth, s = r ? window.innerWidth : window.innerHeight, c = r ? window.innerHeight : window.innerWidth, o = s < 1024 || c < 768;
+      t(i && o);
+    };
+    return n(), window.addEventListener("resize", n, { passive: !0 }), window.addEventListener("orientationchange", n, { passive: !0 }), () => {
+      window.removeEventListener("resize", n), window.removeEventListener("orientationchange", n);
+    };
+  }, []), e;
+};
+export {
+  T as useCSSLookup,
+  V as useId,
+  x as useIsOverFlowing,
+  E as useIsTextWrapping,
+  O as useMobileDetection,
+  F as useRTLDirection,
+  p as useResizeObserver
+};

package/utils/hooks/useBoundingBox.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),m=({debounce:u=!1}={})=>{const[i,c]=e.useState(null),a=e.useRef(null),t=e.useMemo(()=>{if(typeof ResizeObserver>"u")return null;const n=()=>{var l;const o=(l=a.current)==null?void 0:l.getBoundingClientRect();c(o??null),s=Date.now()};let g,s=0;return new ResizeObserver(()=>{const o=Date.now();if(u&&o-s<u){const l=u-(o-s);clearTimeout(g),g=setTimeout(()=>n(),l)}else n()})},[u]);e.useEffect(()=>()=>{t==null||t.disconnect()},[t]);const f=e.useCallback(n=>{a.current=n,t==null||t.disconnect(),c((n==null?void 0:n.getBoundingClientRect())??null),n&&(t==null||t.observe(n))},[t]);return e.useMemo(()=>({boundingBox:i,setElementRef:f}),[i,f])};exports.useBoundingBox=m;

package/utils/hooks/useBoundingBox.d.ts

@@ -0,0 +1,6 @@
+export declare const useBoundingBox: ({ debounce, }?: {
+    debounce?: false | number;
+}) => {
+    boundingBox: DOMRect | null;
+    setElementRef: (node: HTMLElement | null) => void;
+};

package/utils/hooks/useBoundingBox.es.js

@@ -0,0 +1,39 @@
+import { useState as g, useRef as B, useMemo as a, useEffect as r, useCallback as R } from "react";
+const p = ({
+  debounce: e = !1
+} = {}) => {
+  const [i, s] = g(null), c = B(null), t = a(() => {
+    if (typeof ResizeObserver > "u")
+      return null;
+    const n = () => {
+      var o;
+      const u = (o = c.current) == null ? void 0 : o.getBoundingClientRect();
+      s(u ?? null), l = Date.now();
+    };
+    let m, l = 0;
+    return new ResizeObserver(() => {
+      const u = Date.now();
+      if (e && u - l < e) {
+        const o = e - (u - l);
+        clearTimeout(m), m = setTimeout(() => n(), o);
+      } else
+        n();
+    });
+  }, [e]);
+  r(() => () => {
+    t == null || t.disconnect();
+  }, [t]);
+  const f = R(
+    (n) => {
+      c.current = n, t == null || t.disconnect(), s((n == null ? void 0 : n.getBoundingClientRect()) ?? null), n && (t == null || t.observe(n));
+    },
+    [t]
+  );
+  return a(
+    () => ({ boundingBox: i, setElementRef: f }),
+    [i, f]
+  );
+};
+export {
+  p as useBoundingBox
+};

package/utils/hooks/useElementClick.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react");function o(s,{event:u,onClickInside:e,onClickOutside:r}){const c=Array.isArray(s)?s:[s];g.useEffect(()=>{const n=a=>{if(!a.target)return;const f=c.filter(t=>!!(t!=null&&t.current));if(!f.length)return;f.some(t=>{var m;return(m=t.current)==null?void 0:m.contains(a.target)})?e==null||e(a):r==null||r(a)};return document.addEventListener(u,n),()=>document.removeEventListener(u,n)},[u,e,r,...c])}exports.useElementClick=o;

package/utils/hooks/useElementClick.d.ts

@@ -0,0 +1,42 @@
+export type RefParam = React.RefObject<HTMLElement> | (React.RefObject<HTMLElement> | null | undefined)[] | null | undefined;
+export interface UseElementClickOptions {
+    event: 'click' | 'mousedown' | 'mouseup' | 'dblclick';
+    onClickInside?: (event: MouseEvent) => void;
+    onClickOutside?: (event: MouseEvent) => void;
+}
+/**
+ * Custom hook for handling click events relative to one or multiple elements.
+ * Executes callbacks depending on whether click occurred inside/outside target elements.
+ *
+ * @param ref - Single ref object or array of refs to monitor. Supports:
+ *             - Single element ref (React.RefObject<HTMLElement>)
+ *             - Array of element refs
+ *             - null/undefined (hook will do nothing)
+ * @param options - Configuration object:
+ *   - event: Mouse event type to listen for ('click'|'mousedown'|'mouseup'|'dblclick')
+ *   - onClickInside: Fires when click occurs inside ANY of elements
+ *   - onClickOutside: Fires when click occurs outside ALL elements
+ *
+ * @example
+ * // Single element usage
+ * useElementClick(modalRef, {
+ *   event: 'click',
+ *   onClickOutside: () => handleClose()
+ * });
+ *
+ * @example
+ * // Multiple elements usage
+ * useElementClick([modalRef, tooltipRef], {
+ *   event: 'mousedown',
+ *   onClickOutside: () => {
+ *     closeModal();
+ *     hideTooltip();
+ *   }
+ * });
+ *
+ * @remarks
+ * - Ignores refs with uninitialized .current property
+ * - Handles dynamic ref arrays (automatically filters invalid refs)
+ * - Uses event delegation on document level
+ */
+export declare function useElementClick(ref: RefParam, { event, onClickInside, onClickOutside }: UseElementClickOptions): void;

package/utils/hooks/useElementClick.es.js

@@ -0,0 +1,23 @@
+import { useEffect as c } from "react";
+function h(f, { event: m, onClickInside: t, onClickOutside: e }) {
+  const s = Array.isArray(f) ? f : [f];
+  c(() => {
+    const u = (a) => {
+      if (!a.target) return;
+      const n = s.filter(
+        (r) => !!(r != null && r.current)
+      );
+      if (!n.length) return;
+      n.some(
+        (r) => {
+          var E;
+          return (E = r.current) == null ? void 0 : E.contains(a.target);
+        }
+      ) ? t == null || t(a) : e == null || e(a);
+    };
+    return document.addEventListener(m, u), () => document.removeEventListener(m, u);
+  }, [m, t, e, ...s]);
+}
+export {
+  h as useElementClick
+};

package/utils/hooks/useElementResize.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),S=require("../../chunks/constants.hwjHOsvT.js"),X=require("../../chunks/helpers.COm6C5Gf.js"),q=(d,n,r,p=165,v=400,h=0)=>{const[C,y]=e.useState(h),i=e.useRef(0),a=e.useRef(!1),m=e.useCallback(t=>{if(!n.current)return;const L=t.clientX-i.current;i.current=t.clientX;const P=n.current.offsetWidth,c=a.current?P-L:P+L;c>=p&&c<=v&&(requestAnimationFrame(()=>{n.current&&(n.current.style.inlineSize=`${c}px`)}),y(c))},[n,p,v]),o=e.useMemo(()=>X.debounce(m,S.FPS_120),[m]),u=e.useCallback(t=>{r.current&&r.current.releasePointerCapture(t.pointerId),n.current&&(n.current.style.transition=""),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)},[o,n,r]),s=e.useCallback(t=>{t.preventDefault(),n.current&&(a.current=getComputedStyle(n.current).direction==="rtl",n.current.style.transition="none"),r.current&&r.current.setPointerCapture(t.pointerId),i.current=t.clientX,document.addEventListener("pointermove",o),document.addEventListener("pointerup",u)},[o,u,n,r]);return e.useEffect(()=>{if(!d||!r.current||!document)return;const t=r.current;return t&&t.addEventListener("pointerdown",s),()=>{t&&t.removeEventListener("pointerdown",s),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)}},[s,o,u,d,r]),C};exports.useElementResize=q;