@viasat/beam-react 2.0.0

package/utils/hooks/useElementResize.d.ts

@@ -0,0 +1 @@
+export declare const useElementResize: (resizeEnabled: boolean, resizableElementRef: React.RefObject<HTMLElement>, resizeHandlerRef: React.RefObject<HTMLElement>, minWidth?: number, maxWidth?: number, defaultWidth?: number) => number;

package/utils/hooks/useElementResize.es.js

@@ -0,0 +1,46 @@
+import { useState as y, useRef as C, useCallback as s, useMemo as S, useEffect as f } from "react";
+import { a as M } from "../../chunks/constants.BBi77pmH.js";
+import { d as W } from "../../chunks/helpers.Wv7n4ip7.js";
+const g = (p, n, r, d = 165, v = 400, X = 0) => {
+  const [a, w] = y(X), c = C(0), m = C(!1), L = s(
+    (t) => {
+      if (!n.current) return;
+      const P = t.clientX - c.current;
+      c.current = t.clientX;
+      const h = n.current.offsetWidth, u = m.current ? h - P : h + P;
+      u >= d && u <= v && (requestAnimationFrame(() => {
+        n.current && (n.current.style.inlineSize = `${u}px`);
+      }), w(u));
+    },
+    [n, d, v]
+  ), o = S(
+    () => W(L, M),
+    [L]
+  ), e = s(
+    (t) => {
+      r.current && r.current.releasePointerCapture(t.pointerId), n.current && (n.current.style.transition = ""), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+    },
+    [o, n, r]
+  ), i = s(
+    (t) => {
+      t.preventDefault(), n.current && (m.current = getComputedStyle(n.current).direction === "rtl", n.current.style.transition = "none"), r.current && r.current.setPointerCapture(t.pointerId), c.current = t.clientX, document.addEventListener("pointermove", o), document.addEventListener("pointerup", e);
+    },
+    [o, e, n, r]
+  );
+  return f(() => {
+    if (!p || !r.current || !document) return;
+    const t = r.current;
+    return t && t.addEventListener("pointerdown", i), () => {
+      t && t.removeEventListener("pointerdown", i), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+    };
+  }, [
+    i,
+    o,
+    e,
+    p,
+    r
+  ]), a;
+};
+export {
+  g as useElementResize
+};

package/utils/hooks/useId.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),a=require("../safeReact.cjs.js"),i=require("../../chunks/constants.hwjHOsvT.js");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const r=f(u);var l=u.useLayoutEffect;let c=!1,d=0;const s=()=>`${i.prefix}-${Math.random().toString(36).slice(2,6)}${d++}`;function g(){const[e,t]=r.useState(()=>c?s():void 0);return l(()=>{e==null&&t(s())},[]),r.useEffect(()=>{c=!0},[]),e}const p=a.SafeReact.useId,b=p||g;exports.useId=b;

package/utils/hooks/useId.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ * @see https://floating-ui.com/docs/react-utils#useid
+ */
+export declare const useId: () => string;

package/utils/hooks/useId.es.js

@@ -0,0 +1,24 @@
+import * as t from "react";
+import { useLayoutEffect as f } from "react";
+import { SafeReact as n } from "../safeReact.es.js";
+import { p as a } from "../../chunks/constants.BBi77pmH.js";
+var i = f;
+let o = !1, u = 0;
+const r = () => `${a}-${Math.random().toString(36).slice(2, 6)}${u++}`;
+function c() {
+  const [e, s] = t.useState(
+    () => (
+      // if server-side, we don't want to generate an id
+      o ? r() : void 0
+    )
+  );
+  return i(() => {
+    e == null && s(r());
+  }, []), t.useEffect(() => {
+    o = !0;
+  }, []), e;
+}
+const d = n.useId, I = d || c;
+export {
+  I as useId
+};

package/utils/hooks/useIsMounted.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),u=()=>{const[t,s]=e.useState(!1);return e.useEffect(()=>{s(!0)},[]),t};exports.useIsMounted=u;

package/utils/hooks/useIsMounted.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A custom React hook that tracks whether the component is mounted.
+ *
+ * This is particularly useful in scenarios where certain browser-specific objects
+ * or APIs (e.g., `window`, `document`) are not defined during the initial server-side render (SSR).
+ * By using this hook, you can ensure that such logic only runs after the component
+ * has been mounted on the client side.
+ *
+ * @returns {boolean} `true` if the component is mounted, otherwise `false`.
+ */
+export declare const useIsMounted: () => boolean;

package/utils/hooks/useIsMounted.es.js

@@ -0,0 +1,10 @@
+import { useState as s, useEffect as o } from "react";
+const n = () => {
+  const [e, t] = s(!1);
+  return o(() => {
+    t(!0);
+  }, []), e;
+};
+export {
+  n as useIsMounted
+};

package/utils/hooks/useKeyboardNavigation.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),y=require("./index.cjs.js");function b({currentValue:d,items:r,containerRef:t,dataAttribute:g,disabledClassName:i,onFocusItem:k,onSelectItem:f,isHorizontal:u=!0}){const h=y.useRTLDirection(t),l=w.useRef(new Map);w.useEffect(()=>{if(!t.current)return;const n=t.current,c=new Map;r.forEach(a=>{const e=`[${g}="${CSS.escape(a)}"]`,s=n.querySelector(e);c.set(a,(s==null?void 0:s.classList.contains(i))??!1)}),l.current=c},[r,t,g,i]);const o=w.useCallback((n,c)=>{if(!t.current)return-1;let a=n,e=0;for(;e<r.length;){a=(a+c+r.length)%r.length;const s=r[a];if(!l.current.get(s))return a;e++}return-1},[r,t]);return{handleKeyDown:w.useCallback(n=>{if(!r||r.length===0)return;const c=r.indexOf(d);if(["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"," "].includes(n.key)){if(n.preventDefault(),n.key==="Enter"||n.key===" "){f==null||f(d);return}let e=-1;switch(n.key){case"ArrowRight":u&&(e=o(c,h?-1:1));break;case"ArrowLeft":u&&(e=o(c,h?1:-1));break;case"ArrowDown":u||(e=o(c,1));break;case"ArrowUp":u||(e=o(c,-1));break;case"Home":e=o(-1,1);break;case"End":e=o(r.length,-1);break}e>=0&&k(r[e])}},[d,r,u,h,o,k,f])}}exports.useKeyboardNavigation=b;

package/utils/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,38 @@
+interface KeyboardNavigationOptions {
+    /**
+     * Current value of the selected item
+     */
+    currentValue: string;
+    /**
+     * Array of all available item values
+     */
+    items: string[];
+    /**
+     * Reference to the container element
+     */
+    containerRef: React.RefObject<HTMLElement>;
+    /**
+     * Data attribute to use to find items in the container
+     */
+    dataAttribute: string;
+    /**
+     * CSS class name that indicates an item is disabled
+     */
+    disabledClassName: string;
+    /**
+     * Callback to focus an item at a specific index
+     */
+    onFocusItem: (value: string) => void;
+    /**
+     * Callback to select an item
+     */
+    onSelectItem?: (value: string) => void;
+    /**
+     * Whether the component is in horizontal orientation
+     */
+    isHorizontal?: boolean;
+}
+export declare function useKeyboardNavigation({ currentValue, items, containerRef, dataAttribute, disabledClassName, onFocusItem, onSelectItem, isHorizontal, }: KeyboardNavigationOptions): {
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+};
+export {};

package/utils/hooks/useKeyboardNavigation.es.js

@@ -0,0 +1,97 @@
+import { useRef as b, useEffect as x, useCallback as p } from "react";
+import { useRTLDirection as i } from "./index.es.js";
+function E({
+  currentValue: s,
+  items: r,
+  containerRef: f,
+  dataAttribute: d,
+  disabledClassName: g,
+  onFocusItem: k,
+  onSelectItem: w,
+  isHorizontal: t = !0
+}) {
+  const h = i(f), y = b(/* @__PURE__ */ new Map());
+  x(() => {
+    if (!f.current) return;
+    const e = f.current, c = /* @__PURE__ */ new Map();
+    r.forEach((o) => {
+      const n = `[${d}="${CSS.escape(o)}"]`, u = e.querySelector(n);
+      c.set(
+        o,
+        (u == null ? void 0 : u.classList.contains(g)) ?? !1
+      );
+    }), y.current = c;
+  }, [r, f, d, g]);
+  const a = p(
+    (e, c) => {
+      if (!f.current) return -1;
+      let o = e, n = 0;
+      for (; n < r.length; ) {
+        o = (o + c + r.length) % r.length;
+        const u = r[o];
+        if (!y.current.get(u))
+          return o;
+        n++;
+      }
+      return -1;
+    },
+    [r, f]
+  );
+  return { handleKeyDown: p(
+    (e) => {
+      if (!r || r.length === 0)
+        return;
+      const c = r.indexOf(s);
+      if ([
+        "ArrowRight",
+        "ArrowLeft",
+        "ArrowDown",
+        "ArrowUp",
+        "Home",
+        "End",
+        "Enter",
+        " "
+        // Space
+      ].includes(e.key)) {
+        if (e.preventDefault(), e.key === "Enter" || e.key === " ") {
+          w == null || w(s);
+          return;
+        }
+        let n = -1;
+        switch (e.key) {
+          case "ArrowRight":
+            t && (n = a(c, h ? -1 : 1));
+            break;
+          case "ArrowLeft":
+            t && (n = a(c, h ? 1 : -1));
+            break;
+          case "ArrowDown":
+            t || (n = a(c, 1));
+            break;
+          case "ArrowUp":
+            t || (n = a(c, -1));
+            break;
+          case "Home":
+            n = a(-1, 1);
+            break;
+          case "End":
+            n = a(r.length, -1);
+            break;
+        }
+        n >= 0 && k(r[n]);
+      }
+    },
+    [
+      s,
+      r,
+      t,
+      h,
+      a,
+      k,
+      w
+    ]
+  ) };
+}
+export {
+  E as useKeyboardNavigation
+};

package/utils/hooks/useLocalStorage.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../chunks/constants.hwjHOsvT.js"),l=require("../../chunks/helpers.COm6C5Gf.js"),u=require("react");function f(e,t){typeof window>"u"||!window.localStorage||window.dispatchEvent(new StorageEvent("storage",{key:e,newValue:t}))}const c=l.debounce((e,t)=>{if(typeof window>"u"||!window.localStorage)return;const r=JSON.stringify(t);window.localStorage.setItem(e,r),f(e,r)},d.FPS_60),w=e=>{typeof window>"u"||!window.localStorage||(window.localStorage.removeItem(e),f(e,null))},S=e=>typeof window>"u"||!window.localStorage?null:window.localStorage.getItem(e);function g(e,t,r=!0){const[i,s]=u.useState(()=>{if(!r)return t??null;const o=S(e);return o!==null?o:typeof t<"u"?(c(e,t),JSON.stringify(t)):null}),a=u.useCallback(o=>{try{if(!r)return;const n=typeof o=="function"?o(i?JSON.parse(i):null):o;n==null?(w(e),s(null)):(c(e,n),s(JSON.stringify(n)))}catch(n){console.error(n)}},[e,i,r]);return u.useEffect(()=>{if(!r||typeof window>"u")return;const o=n=>{n.key===e&&s(n.newValue)};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)},[e,r]),[i?JSON.parse(i):t,a]}exports.useLocalStorage=g;

package/utils/hooks/useLocalStorage.d.ts

@@ -0,0 +1,3 @@
+type LocalStorageValue = string | null;
+export declare function useLocalStorage(key: string, initialValue?: LocalStorageValue, enabled?: boolean): any[];
+export {};

package/utils/hooks/useLocalStorage.es.js

@@ -0,0 +1,41 @@
+import { b as c } from "../../chunks/constants.BBi77pmH.js";
+import { d as w } from "../../chunks/helpers.Wv7n4ip7.js";
+import s from "react";
+function d(t, e) {
+  typeof window > "u" || !window.localStorage || window.dispatchEvent(new StorageEvent("storage", { key: t, newValue: e }));
+}
+const u = w((t, e) => {
+  if (typeof window > "u" || !window.localStorage) return;
+  const r = JSON.stringify(e);
+  window.localStorage.setItem(t, r), d(t, r);
+}, c), l = (t) => {
+  typeof window > "u" || !window.localStorage || (window.localStorage.removeItem(t), d(t, null));
+}, S = (t) => typeof window > "u" || !window.localStorage ? null : window.localStorage.getItem(t);
+function v(t, e, r = !0) {
+  const [i, f] = s.useState(() => {
+    if (!r) return e ?? null;
+    const o = S(t);
+    return o !== null ? o : typeof e < "u" ? (u(t, e), JSON.stringify(e)) : null;
+  }), a = s.useCallback(
+    (o) => {
+      try {
+        if (!r) return;
+        const n = typeof o == "function" ? o(i ? JSON.parse(i) : null) : o;
+        n == null ? (l(t), f(null)) : (u(t, n), f(JSON.stringify(n)));
+      } catch (n) {
+        console.error(n);
+      }
+    },
+    [t, i, r]
+  );
+  return s.useEffect(() => {
+    if (!r || typeof window > "u") return;
+    const o = (n) => {
+      n.key === t && f(n.newValue);
+    };
+    return window.addEventListener("storage", o), () => window.removeEventListener("storage", o);
+  }, [t, r]), [i ? JSON.parse(i) : e, a];
+}
+export {
+  v as useLocalStorage
+};

package/utils/keyboardComposition.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function r(...n){return e=>{for(const o of n){if(!o)continue;const t=o(e);if(e.defaultPrevented||t===!0)return}}}function p({baseProps:n,captureHandlers:e=[],bubbleHandlers:o=[]}){const{onKeyDown:t,onKeyDownCapture:s,...u}=n,a=r(...e,s),c=r(...o,t);return{...u,onKeyDownCapture:a,onKeyDown:c}}exports.augmentKeyboardProps=p;exports.composeHandlers=r;

package/utils/keyboardComposition.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type KeyHandler = (e: React.KeyboardEvent) => void | boolean | undefined;
+/**
+ * Compose handlers. Stops after a handler prevents default or explicitly returns true.
+ */
+export declare function composeHandlers(...handlers: Array<KeyHandler | undefined>): KeyHandler;
+export interface AugmentKeyboardPropsParams<E extends HTMLElement = HTMLElement> {
+    baseProps: React.HTMLProps<E>;
+    captureHandlers?: KeyHandler[];
+    bubbleHandlers?: KeyHandler[];
+}
+/**
+ * Safely layer our handlers around an opaque set of base props which MAY include
+ * either `onKeyDown` and/or `onKeyDownCapture`, or neither. We treat their presence
+ * as optional and never assume a specific ordering inside the library.
+ */
+export declare function augmentKeyboardProps<E extends HTMLElement>({ baseProps, captureHandlers, bubbleHandlers }: AugmentKeyboardPropsParams<E>): React.HTMLProps<E>;

package/utils/keyboardComposition.es.js

@@ -0,0 +1,21 @@
+function r(...o) {
+  return (e) => {
+    for (const n of o) {
+      if (!n) continue;
+      const t = n(e);
+      if (e.defaultPrevented || t === !0) return;
+    }
+  };
+}
+function p({ baseProps: o, captureHandlers: e = [], bubbleHandlers: n = [] }) {
+  const { onKeyDown: t, onKeyDownCapture: u, ...s } = o, c = r(...e, u), a = r(...n, t);
+  return {
+    ...s,
+    onKeyDownCapture: c,
+    onKeyDown: a
+  };
+}
+export {
+  p as augmentKeyboardProps,
+  r as composeHandlers
+};

package/utils/safeReact.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function a(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(c,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return c.default=e,Object.freeze(c)}const o=a(n),u={...o};exports.SafeReact=u;

package/utils/safeReact.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+export declare const SafeReact: {
+    createFactory<T extends HTMLElement>(type: keyof React.ReactHTML): React.HTMLFactory<T>;
+    createFactory(type: keyof React.ReactSVG): React.SVGFactory;
+    createFactory<P extends React.DOMAttributes<T>, T extends Element>(type: string): React.DOMFactory<P, T>;
+    createFactory<P>(type: React.FunctionComponent<P>): React.FunctionComponentFactory<P>;
+    createFactory<P>(type: React.ClassType<P, React.ClassicComponent<P, React.ComponentState>, React.ClassicComponentClass<P>>): React.CFactory<P, React.ClassicComponent<P, React.ComponentState>>;
+    createFactory<P, T extends React.Component<P, React.ComponentState>, C extends React.ComponentClass<P>>(type: React.ClassType<P, T, C>): React.CFactory<P, T>;
+    createFactory<P>(type: React.ComponentClass<P>): React.Factory<P>;
+    createElement(type: "input", props?: (React.InputHTMLAttributes<HTMLInputElement> & React.ClassAttributes<HTMLInputElement>) | null, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createElement<P extends React.HTMLAttributes<T>, T extends HTMLElement>(type: keyof React.ReactHTML, props?: (React.ClassAttributes<T> & P) | null, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<P, T>;
+    createElement<P extends React.SVGAttributes<T>, T extends SVGElement>(type: keyof React.ReactSVG, props?: (React.ClassAttributes<T> & P) | null, ...children: React.ReactNode[]): React.ReactSVGElement;
+    createElement<P extends React.DOMAttributes<T>, T extends Element>(type: string, props?: (React.ClassAttributes<T> & P) | null, ...children: React.ReactNode[]): React.DOMElement<P, T>;
+    createElement<P extends {}>(type: React.FunctionComponent<P>, props?: (React.Attributes & P) | null, ...children: React.ReactNode[]): React.FunctionComponentElement<P>;
+    createElement<P extends {}>(type: React.ClassType<P, React.ClassicComponent<P, React.ComponentState>, React.ClassicComponentClass<P>>, props?: (React.ClassAttributes<React.ClassicComponent<P, React.ComponentState>> & P) | null, ...children: React.ReactNode[]): React.CElement<P, React.ClassicComponent<P, React.ComponentState>>;
+    createElement<P extends {}, T extends React.Component<P, React.ComponentState>, C extends React.ComponentClass<P>>(type: React.ClassType<P, T, C>, props?: (React.ClassAttributes<T> & P) | null, ...children: React.ReactNode[]): React.CElement<P, T>;
+    createElement<P extends {}>(type: React.FunctionComponent<P> | React.ComponentClass<P> | string, props?: (React.Attributes & P) | null, ...children: React.ReactNode[]): React.ReactElement<P>;
+    cloneElement<P extends React.HTMLAttributes<T>, T extends HTMLElement>(element: React.DetailedReactHTMLElement<P, T>, props?: P, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<P, T>;
+    cloneElement<P extends React.HTMLAttributes<T>, T extends HTMLElement>(element: React.ReactHTMLElement<T>, props?: P, ...children: React.ReactNode[]): React.ReactHTMLElement<T>;
+    cloneElement<P extends React.SVGAttributes<T>, T extends SVGElement>(element: React.ReactSVGElement, props?: P, ...children: React.ReactNode[]): React.ReactSVGElement;
+    cloneElement<P extends React.DOMAttributes<T>, T extends Element>(element: React.DOMElement<P, T>, props?: React.DOMAttributes<T> & P, ...children: React.ReactNode[]): React.DOMElement<P, T>;
+    cloneElement<P>(element: React.FunctionComponentElement<P>, props?: Partial<P> & React.Attributes, ...children: React.ReactNode[]): React.FunctionComponentElement<P>;
+    cloneElement<P, T extends React.Component<P, React.ComponentState>>(element: React.CElement<P, T>, props?: Partial<P> & React.ClassAttributes<T>, ...children: React.ReactNode[]): React.CElement<P, T>;
+    cloneElement<P>(element: React.ReactElement<P>, props?: Partial<P> & React.Attributes, ...children: React.ReactNode[]): React.ReactElement<P>;
+    createContext<T>(defaultValue: T): React.Context<T>;
+    isValidElement<P>(object: {} | null | undefined): object is React.ReactElement<P>;
+    createRef<T>(): React.RefObject<T>;
+    forwardRef<T, P = {}>(render: React.ForwardRefRenderFunction<T, P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    memo<P extends object>(Component: React.FunctionComponent<P>, propsAreEqual?: (prevProps: Readonly<React.PropsWithChildren<P>>, nextProps: Readonly<React.PropsWithChildren<P>>) => boolean): React.NamedExoticComponent<P>;
+    memo<T extends React.ComponentType<any>>(Component: T, propsAreEqual?: (prevProps: Readonly<React.ComponentProps<T>>, nextProps: Readonly<React.ComponentProps<T>>) => boolean): React.MemoExoticComponent<T>;
+    lazy<T extends React.ComponentType<any>>(factory: () => Promise<{
+        default: T;
+    }>): React.LazyExoticComponent<T>;
+    useContext<T>(context: React.Context<T>): T;
+    useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
+    useState<S = undefined>(): [S | undefined, React.Dispatch<React.SetStateAction<S | undefined>>];
+    useReducer<R extends React.ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => React.ReducerStateWithoutAction<R>): [React.ReducerStateWithoutAction<R>, React.DispatchWithoutAction];
+    useReducer<R extends React.ReducerWithoutAction<any>>(reducer: R, initializerArg: React.ReducerStateWithoutAction<R>, initializer?: undefined): [React.ReducerStateWithoutAction<R>, React.DispatchWithoutAction];
+    useReducer<R extends React.Reducer<any, any>, I>(reducer: R, initializerArg: I & React.ReducerState<R>, initializer: (arg: I & React.ReducerState<R>) => React.ReducerState<R>): [React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>];
+    useReducer<R extends React.Reducer<any, any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => React.ReducerState<R>): [React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>];
+    useReducer<R extends React.Reducer<any, any>>(reducer: R, initialState: React.ReducerState<R>, initializer?: undefined): [React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>];
+    useRef<T>(initialValue: T): React.MutableRefObject<T>;
+    useRef<T>(initialValue: T | null): React.RefObject<T>;
+    useRef<T = undefined>(): React.MutableRefObject<T | undefined>;
+    useLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+    useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+    useImperativeHandle<T, R extends T>(ref: React.Ref<T> | undefined, init: () => R, deps?: React.DependencyList): void;
+    useCallback<T extends (...args: any[]) => any>(callback: T, deps: React.DependencyList): T;
+    useMemo<T>(factory: () => T, deps: React.DependencyList | undefined): T;
+    useDebugValue<T>(value: T, format?: (value: T) => any): void;
+    Children: React.ReactChildren;
+    Fragment: React.ExoticComponent<{
+        children?: React.ReactNode | undefined;
+    }>;
+    StrictMode: React.ExoticComponent<{
+        children?: React.ReactNode | undefined;
+    }>;
+    Suspense: React.ExoticComponent<React.SuspenseProps>;
+    version: string;
+    Profiler: React.ExoticComponent<React.ProfilerProps>;
+    Component: typeof React.Component;
+    PureComponent: typeof React.PureComponent;
+};

package/utils/safeReact.es.js

@@ -0,0 +1,5 @@
+import * as t from "react";
+const a = { ...t };
+export {
+  a as SafeReact
+};

package/utils/spacing.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../chunks/helpers.COm6C5Gf.js"),P=["m","mx","my","mTop","mBottom","mBefore","mAfter"],t=["p","px","py","pTop","pBottom","pBefore","pAfter"],o=["gap"],p=[...P,...t,...o],_=(r,e=p)=>A.partitionProps(r,e);exports.MARGIN_PROP_NAMES=P;exports.OTHER_SPACING_PROP_NAMES=o;exports.PADDING_PROP_NAMES=t;exports.SPACING_PROP_NAMES=p;exports.partitionSpacingProps=_;

package/utils/spacing.d.ts

@@ -0,0 +1,77 @@
+import { Spacing } from '@viasat/beam-shared/utils';
+export type PaddingSpacingProps = {
+    /**
+     * Specify all padding
+     */
+    p?: Spacing;
+    /**
+     * Specify all margin
+     */
+    m?: Spacing;
+    /**
+     * Specify before and after padding
+     */
+    px?: Spacing;
+    /**
+     * Specify top and bottom padding
+     */
+    py?: Spacing;
+    /**
+     * Specify top padding
+     */
+    pTop?: Spacing;
+    /**
+     * Specify bottom padding
+     */
+    pBottom?: Spacing;
+    /**
+     * Specify before padding
+     */
+    pBefore?: Spacing;
+    /**
+     * Specify after padding
+     */
+    pAfter?: Spacing;
+};
+export type MarginSpacingProps = {
+    /**
+     * Specify all margin
+     */
+    m?: Spacing;
+    /**
+     * Specify before and after margin
+     */
+    mx?: Spacing;
+    /**
+     * Specify top and bottom margin
+     */
+    my?: Spacing;
+    /**
+     * Specify top margin
+     */
+    mTop?: Spacing;
+    /**
+     * Specify bottom margin
+     */
+    mBottom?: Spacing;
+    /**
+     * Specify before margin
+     */
+    mBefore?: Spacing;
+    /**
+     * Specify after margin
+     */
+    mAfter?: Spacing;
+};
+export type OtherSpacingProps = {
+    /**
+     * Specify gap between child elements
+     */
+    gap?: Spacing;
+};
+export type SpacingProps = PaddingSpacingProps & MarginSpacingProps & OtherSpacingProps;
+export declare const MARGIN_PROP_NAMES: readonly ["m", "mx", "my", "mTop", "mBottom", "mBefore", "mAfter"];
+export declare const PADDING_PROP_NAMES: readonly ["p", "px", "py", "pTop", "pBottom", "pBefore", "pAfter"];
+export declare const OTHER_SPACING_PROP_NAMES: readonly ["gap"];
+export declare const SPACING_PROP_NAMES: readonly ["m", "mx", "my", "mTop", "mBottom", "mBefore", "mAfter", "p", "px", "py", "pTop", "pBottom", "pBefore", "pAfter", "gap"];
+export declare const partitionSpacingProps: <PartitionProps extends Record<string, unknown>>(props: PartitionProps, propNames?: readonly string[]) => [Record<string, Spacing | undefined>, Omit<PartitionProps, keyof (typeof propNames)[number]>];

package/utils/spacing.es.js

@@ -0,0 +1,29 @@
+import { p as t } from "../chunks/helpers.Wv7n4ip7.js";
+const r = [
+  "m",
+  "mx",
+  "my",
+  "mTop",
+  "mBottom",
+  "mBefore",
+  "mAfter"
+], P = [
+  "p",
+  "px",
+  "py",
+  "pTop",
+  "pBottom",
+  "pBefore",
+  "pAfter"
+], m = ["gap"], A = [
+  ...r,
+  ...P,
+  ...m
+], _ = (o, p = A) => t(o, p);
+export {
+  r as MARGIN_PROP_NAMES,
+  m as OTHER_SPACING_PROP_NAMES,
+  P as PADDING_PROP_NAMES,
+  A as SPACING_PROP_NAMES,
+  _ as partitionSpacingProps
+};

package/utils/theming/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useBeamTheme.cjs.js");exports.ALL_THEMES=e.ALL_THEMES;exports.BeamThemeProvider=e.BeamThemeProvider;exports.fromAttr=e.fromAttr;exports.toAttr=e.toAttr;exports.useBeamTheme=e.useBeamTheme;

package/utils/theming/index.d.ts

@@ -0,0 +1 @@
+export * from './useBeamTheme';

package/utils/theming/index.es.js

@@ -0,0 +1,8 @@
+import { ALL_THEMES as m, BeamThemeProvider as t, fromAttr as o, toAttr as A, useBeamTheme as T } from "./useBeamTheme.es.js";
+export {
+  m as ALL_THEMES,
+  t as BeamThemeProvider,
+  o as fromAttr,
+  A as toAttr,
+  T as useBeamTheme
+};

package/utils/theming/useBeamTheme.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),d=require("react"),a=require("../../chunks/constants.hwjHOsvT.js");function K(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const l=K(d);var F=(e,n,t,s,r,o,h,u)=>{let f=document.documentElement,g=["light","dark"];function E(m){(Array.isArray(e)?e:[e]).forEach(p=>{let c=p==="class",A=c&&o?r.map(b=>o[b]||b):r;c?(f.classList.remove(...A),f.classList.add(o&&o[m]?o[m]:m)):f.setAttribute(p,m)}),v(m)}function v(m){u&&g.includes(m)&&(f.style.colorScheme=m)}function i(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(s)E(s);else try{let m=localStorage.getItem(n)||t,p=h&&m==="system"?i():m;E(p)}catch{}},D=["light","dark"],N="(prefers-color-scheme: dark)",V=typeof window>"u",P=l.createContext(void 0),Q={setTheme:e=>{},themes:[]},W=()=>{var e;return(e=l.useContext(P))!=null?e:Q},q=e=>l.useContext(P)?l.createElement(l.Fragment,null,e.children):l.createElement(G,{...e}),z=["light","dark"],G=({forcedTheme:e,disableTransitionOnChange:n=!1,enableSystem:t=!0,enableColorScheme:s=!0,storageKey:r="theme",themes:o=z,defaultTheme:h=t?"system":"light",attribute:u="data-theme",value:f,children:g,nonce:E,scriptProps:v})=>{let[i,m]=l.useState(()=>$(r,h)),[p,c]=l.useState(()=>i==="system"?L():i),A=f?Object.values(f):o,b=l.useCallback(T=>{let y=T;if(!y)return;T==="system"&&t&&(y=L());let M=f?f[y]:y,x=n?X(E):null,k=document.documentElement,j=S=>{S==="class"?(k.classList.remove(...A),M&&k.classList.add(M)):S.startsWith("data-")&&(M?k.setAttribute(S,M):k.removeAttribute(S))};if(Array.isArray(u)?u.forEach(j):j(u),s){let S=D.includes(h)?h:null,H=D.includes(y)?y:S;k.style.colorScheme=H}x==null||x()},[E]),C=l.useCallback(T=>{let y=typeof T=="function"?T(i):T;m(y);try{localStorage.setItem(r,y)}catch{}},[i]),_=l.useCallback(T=>{let y=L(T);c(y),i==="system"&&t&&!e&&b("system")},[i,e]);l.useEffect(()=>{let T=window.matchMedia(N);return T.addListener(_),_(T),()=>T.removeListener(_)},[_]),l.useEffect(()=>{let T=y=>{y.key===r&&(y.newValue?m(y.newValue):C(h))};return window.addEventListener("storage",T),()=>window.removeEventListener("storage",T)},[C]),l.useEffect(()=>{b(e??i)},[e,i]);let Y=l.useMemo(()=>({theme:i,setTheme:C,forcedTheme:e,resolvedTheme:i==="system"?p:i,themes:t?[...o,"system"]:o,systemTheme:t?p:void 0}),[i,C,e,p,t,o]);return l.createElement(P.Provider,{value:Y},l.createElement(J,{forcedTheme:e,storageKey:r,attribute:u,enableSystem:t,enableColorScheme:s,defaultTheme:h,value:f,themes:o,nonce:E,scriptProps:v}),g)},J=l.memo(({forcedTheme:e,storageKey:n,attribute:t,enableSystem:s,enableColorScheme:r,defaultTheme:o,value:h,themes:u,nonce:f,scriptProps:g})=>{let E=JSON.stringify([t,n,o,e,u,h,s,r]).slice(1,-1);return l.createElement("script",{...g,suppressHydrationWarning:!0,nonce:typeof window>"u"?f:"",dangerouslySetInnerHTML:{__html:`(${F.toString()})(${E})`}})}),$=(e,n)=>{if(V)return;let t;try{t=localStorage.getItem(e)||void 0}catch{}return t||n},X=e=>{let n=document.createElement("style");return e&&n.setAttribute("nonce",e),n.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(n),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(n)},1)}},L=e=>(e||(e=window.matchMedia(N)),e.matches?"dark":"light");const w=e=>[a.themeClassName(e.mode),a.accentThemeClassName(e.accent),"bm-expressive-accent",a.productTypeThemeClassName(e.productType)].join(" "),R=e=>{var o,h;if(!e)return a.DEFAULT_THEME;e=e.replaceAll(a.prefix,"");const n=e.split(" "),t=a.themeTypeValues.find(u=>n.includes(u))??a.DEFAULT_MODE,s=((o=Object.entries(a.ACCENT).find(([,u])=>n.includes(u)))==null?void 0:o[1])??a.DEFAULT_ACCENT,r=((h=Object.entries(a.PRODUCT_TYPE).find(([,u])=>n.includes(u)))==null?void 0:h[1])??a.DEFAULT_PRODUCT_TYPE;return{mode:t,accent:s,productType:r}},U=Object.values(a.themeTypeValues).flatMap(e=>Object.values(a.ACCENT).flatMap(n=>Object.values(a.PRODUCT_TYPE).map(t=>[a.themeClassName(e),a.accentThemeClassName(n),"bm-expressive-accent",a.productTypeThemeClassName(t)].join(" ")))),B="(prefers-color-scheme: dark)";function Z(){return typeof window>"u"?"light":window.matchMedia(B).matches?"dark":"light"}const I=d.createContext(null),ee=q,te=({children:e,defaultTheme:n=a.DEFAULT_THEME,forcedMode:t,enableSystemMode:s=!1,...r})=>{const o={...a.DEFAULT_THEME,...n,mode:t??(s?Z():n.mode)};return O.jsx(ee,{attribute:a.ATTRIBUTE,storageKey:a.STORAGE_KEY,defaultTheme:w(o),themes:U,enableSystem:!0,enableColorScheme:!1,...r,children:O.jsx(ne,{enableSystemMode:s,forcedMode:t,children:e})})},ne=({children:e,enableSystemMode:n,forcedMode:t})=>{const s=W(),r=d.useMemo(()=>R(s.theme),[s.theme]),o=d.useCallback(c=>{t||s.setTheme(w({...r,mode:c}))},[r,s,t]),h=d.useCallback(c=>s.setTheme(w({...r,accent:c})),[r,s]),u=d.useCallback(c=>s.setTheme(w({...r,productType:c})),[r,s]),f=d.useCallback(()=>o(r.mode==="light"?"dark":"light"),[r.mode,o]),g=d.useCallback(()=>{if(typeof window>"u")return;const c=localStorage.getItem(a.SYSTEM_MODE_ENABLED_KEY);return c?c==="true":n},[n]),[E,v]=d.useState(void 0),i=d.useCallback(c=>{v(c),localStorage.setItem(a.SYSTEM_MODE_ENABLED_KEY,c.toString())},[v]);d.useEffect(()=>{i(g()??n),t&&s.setTheme(w({...r,mode:t}))},[]);const m=d.useRef(o);m.current=o,d.useEffect(()=>{if(typeof window>"u")return;const c=window.matchMedia(B),A=localStorage.getItem(a.STORAGE_KEY),b=C=>{E&&m.current(C.matches?"dark":"light")};return E&&(!A&&m.current(c.matches?"dark":"light"),c.addEventListener("change",b)),()=>{c.removeEventListener("change",b)}},[E]),d.useEffect(()=>{typeof window>"u"||(document.documentElement.style.colorScheme=r.mode)},[r.mode]);const p=d.useMemo(()=>({theme:r,systemMode:s.systemTheme,systemModeEnabled:E,setSystemModeEnabled:i,setMode:o,setAccent:h,setProductType:u,toggleMode:f}),[r,s.systemTheme,E,i,o,h,u,f]);return O.jsx(I.Provider,{value:p,children:e})},se=()=>{const e=d.useContext(I);if(!e)throw new Error("useBeamTheme must be used within <BeamThemeProvider>");return e};exports.ALL_THEMES=U;exports.BeamThemeProvider=te;exports.fromAttr=R;exports.toAttr=w;exports.useBeamTheme=se;

package/utils/theming/useBeamTheme.d.ts

@@ -0,0 +1,34 @@
+import { BeamTheme, ThemeTypes, Accent, ProductType } from '@viasat/beam-shared/utils/constants';
+export declare const toAttr: (t: BeamTheme) => string;
+export declare const fromAttr: (attr?: string) => BeamTheme;
+export declare const ALL_THEMES: string[];
+export interface BeamThemeContextValue {
+    theme: BeamTheme;
+    systemMode: ThemeTypes | undefined;
+    systemModeEnabled: boolean | undefined;
+    setSystemModeEnabled: (enabled: boolean) => void;
+    setMode: (mode: ThemeTypes) => void;
+    setAccent: (accent: Accent) => void;
+    setProductType: (productType: ProductType) => void;
+    toggleMode: () => void;
+}
+export interface BeamThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * The default mode, accent and productType to use.
+     */
+    defaultTheme?: Partial<BeamTheme>;
+    /**
+     * If provided, the mode will be locked to the provided value and all mode controls will be a no-op.
+     */
+    forcedMode?: ThemeTypes;
+    /**
+     * If true, the system mode will be used as the default mode and will
+     * dynamically update mode when the system theme changes. Otherwise, the default mode will be used.
+     *
+     * @default false
+     */
+    enableSystemMode?: boolean;
+}
+export declare const BeamThemeProvider: React.FC<BeamThemeProviderProps>;
+export declare const useBeamTheme: () => BeamThemeContextValue;