@viasat/beam-react 2.2.0 → 2.8.0

package/lib/Card/Card.es.js

@@ -1,98 +1,197 @@
-import { jsx as N, jsxs as K } from "react/jsx-runtime";
-import { useCallback as p } from "react";
-import L from "clsx";
-import { g as T } from "../../chunks/classNames.DNsS4J__.js";
+import { jsxs as le, jsx as E } from "react/jsx-runtime";
+import { useRef as ne, useMemo as de, useCallback as g } from "react";
+import R from "clsx";
+import { g as ce } from "../../chunks/classNames.DNsS4J__.js";
 import "../../chunks/constants.BBi77pmH.js";
-import { g as j } from "../../chunks/dom.CVmkHCnh.js";
-import { Box as F } from "../Box/Box.es.js";
-import { s as o } from "../../chunks/card.module.Dy87qmTH.js";
-import { MediaAbove as R } from "./Card.MediaAbove.es.js";
-import { Header as _ } from "./Card.Header.es.js";
-import { MediaBelow as C } from "./Card.MediaBelow.es.js";
-import { Body as O } from "./Card.Body.es.js";
-import { Content as V } from "./Card.Content.es.js";
-import { Footer as W } from "./Card.Footer.es.js";
-import { CardProvider as q } from "./CardContext.es.js";
-import { StateLayer as z } from "../StateLayer/StateLayer.es.js";
-const { baseClassNamePrefix: m, classModifierPrefix: E } = T("card"), G = 'button, a, input, select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', i = ({
-  children: B,
-  className: h,
-  density: v = "md",
-  borderColor: b,
-  borderRadius: x,
-  backgroundColor: y,
-  shadow: $,
-  type: c,
-  as: I,
-  disabled: r = !1,
-  href: l,
-  target: d,
-  rel: P,
-  onClick: a,
-  ...g
+import { Box as ue } from "../Box/Box.es.js";
+import "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import "../../utils/hooks/useId.es.js";
+import { useInteractiveProps as me } from "../../utils/hooks/useInteractiveProps.es.js";
+import { s as t } from "../../chunks/card.module.ByBYpexJ.js";
+import { BOX_BORDER_RADIUS_TO_CSS_VAR as fe } from "../Box/utils.es.js";
+import { MediaAbove as be } from "./Card.MediaAbove.es.js";
+import { Header as pe } from "./Card.Header.es.js";
+import { MediaBelow as he } from "./Card.MediaBelow.es.js";
+import { Body as ye } from "./Card.Body.es.js";
+import { Content as $e } from "./Card.Content.es.js";
+import { Footer as Ie } from "./Card.Footer.es.js";
+import { useCardGroupContext as ve } from "./CardContext.es.js";
+import { useCardGroup as Ne } from "./useCardGroup.es.js";
+import { StateLayer as Ce } from "../StateLayer/StateLayer.es.js";
+const { baseClassNamePrefix: d, classModifierPrefix: n, subElementClassPrefix: c } = ce("card"), Ee = 'button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', l = ({
+  children: T,
+  className: A,
+  density: x = "md",
+  borderColor: w,
+  borderRadius: b,
+  backgroundColor: S,
+  shadow: B,
+  type: D,
+  as: L,
+  disabled: k = !1,
+  href: M,
+  target: O,
+  rel: G,
+  onClick: i,
+  selectionMode: H = "single",
+  showIndicator: V = !1,
+  selected: j,
+  defaultSelected: F = !1,
+  onSelect: K,
+  name: U,
+  value: W,
+  style: p,
+  ...u
 }) => {
-  const u = !!c, s = c === "clickable", n = I ?? (l ? "a" : "div"), f = p(
-    (t) => {
-      if (!t || !(t instanceof Element)) return !1;
-      const M = t.closest(G);
-      if (!M) return !1;
-      const H = t.closest(`.${o[m]}`);
-      return M !== H;
+  const h = ve();
+  process.env.NODE_ENV !== "production" && h && D === "clickable" && console.warn(
+    'Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.'
+  );
+  const y = h ? "selectable" : D, $ = !!y, r = y === "clickable", o = y === "selectable", {
+    selected: I,
+    handleChange: X,
+    resolvedValue: q,
+    isSelectionEligible: v,
+    resolvedDisabled: a,
+    resolvedName: z,
+    resolvedShowIndicator: J,
+    inputType: _
+  } = Ne({
+    cardGroup: h,
+    selected: j,
+    defaultSelected: F,
+    value: W,
+    id: u.id,
+    disabled: k,
+    name: U,
+    selectionMode: H,
+    showIndicator: V,
+    onSelect: K
+  }), N = ne(null), m = L ?? (r && M ? "a" : "div"), Q = de(() => b ? {
+    ...p,
+    "--bm-card-radius-outer": fe[b]
+  } : p, [b, p]), f = g(
+    (e) => {
+      if (!e || !(e instanceof Element)) return !1;
+      const C = e.closest(Ee);
+      if (!C) return !1;
+      const s = e.closest(`.${t[d]}`);
+      return C !== s;
     },
     []
-  ), w = p(
-    (t) => {
-      if (!(r || !s)) {
-        if (f(t.target)) {
-          t.preventDefault(), t.stopPropagation();
-          return;
+  ), Y = g(
+    (e) => {
+      if (a) return;
+      if (f(e.target)) {
+        if (r && m === "a") {
+          const s = e.target, P = s == null ? void 0 : s.closest('a, [role="link"]');
+          (!P || P === e.currentTarget) && e.preventDefault();
         }
-        a == null || a(t);
+        return;
+      }
+      if (r && (i == null || i(e)), o) {
+        if (!v) return;
+        const s = e.target;
+        if (s.tagName === "INPUT" && s.hasAttribute("data-card-input"))
+          return;
+        N.current && N.current.click();
       }
     },
-    [r, s, f, a]
-  ), A = p(
-    (t) => {
-      r || !s || t.key !== "Enter" && t.key !== " " || f(t.target) || (t.preventDefault(), a == null || a(t));
+    [
+      r,
+      o,
+      v,
+      f,
+      m,
+      i,
+      a
+    ]
+  ), Z = g(
+    (e) => {
+      a || e.key !== "Enter" && e.key !== " " || f(e.target) || (e.preventDefault(), r && (i == null || i(e)));
     },
-    [r, s, f, a]
-  ), D = n === "div", S = L(
-    o[m],
-    !y && o[`${m}--default-background`],
-    !$ && o[`${m}--default-shadow`],
-    !b && o[`${m}--default-border`],
-    !x && o[`${m}--default-border-radius`],
-    u && o[`${E}interactive`],
-    s && o[`${E}clickable`],
-    r && o[`${E}disabled`],
-    h
-  ), e = {};
-  return u && (e.tabIndex = r ? -1 : 0, e["aria-disabled"] = r || void 0, s && (e.onClick = w, D && (e.onKeyDown = A), n === "a" && l && !r && (e.href = l, d && (e.target = d), e.rel = j(d, P)), n === "button" && (e.type = "button"), n === "div" && (e.role = "button"))), /* @__PURE__ */ N(q, { value: { density: v, type: c, disabled: r }, children: /* @__PURE__ */ K(
-    F,
+    [r, f, i, a]
+  ), ee = R(
+    t[d],
+    !S && t[`${d}--default-background`],
+    !B && t[`${d}--default-shadow`],
+    !w && t[`${d}--default-border`],
+    $ && t[`${n}interactive`],
+    r && t[`${n}clickable`],
+    o && t[`${n}selectable`],
+    o && I && t[`${n}selected`],
+    a && t[`${n}disabled`],
+    x && t[`${n}density-${x}`],
+    A
+  ), te = me({
+    isInteractive: $,
+    disabled: a,
+    isClickable: r,
+    elementType: m,
+    href: r ? M : void 0,
+    target: r ? O : void 0,
+    rel: r ? G : void 0,
+    onClick: Y,
+    onKeyDown: Z
+  }), re = () => !o || !v ? null : /* @__PURE__ */ E(
+    "input",
+    {
+      ref: N,
+      type: _,
+      className: t[`${c}hidden-input`],
+      checked: I,
+      disabled: a,
+      name: z,
+      value: q,
+      onChange: X,
+      "aria-label": u["aria-label"],
+      "aria-labelledby": u["aria-labelledby"],
+      "data-card-input": ""
+    }
+  ), ae = () => {
+    if (!o || !J) return null;
+    const e = R(
+      t[`${c}selection-indicator`],
+      t[`${c}selection-indicator--${_}`],
+      I && t[`${c}selection-indicator--checked`],
+      a && t[`${c}selection-indicator--disabled`]
+    );
+    return /* @__PURE__ */ E("span", { className: e, "aria-hidden": "true" });
+  }, {
+    "aria-label": ie,
+    "aria-labelledby": oe,
+    ...se
+  } = u;
+  return /* @__PURE__ */ le(
+    ue,
     {
-      as: n,
-      className: S,
-      borderColor: b,
-      borderRadius: x,
+      as: m,
+      className: ee,
+      borderColor: w,
       borderWidth: "md",
-      backgroundColor: y,
-      shadow: $,
-      ...e,
-      ...g,
+      backgroundColor: S,
+      shadow: B,
+      style: Q,
+      ...te,
+      ...se,
+      "aria-label": o ? void 0 : ie,
+      "aria-labelledby": o ? void 0 : oe,
       children: [
-        u && !r && /* @__PURE__ */ N(z, {}),
-        B
+        re(),
+        ae(),
+        $ && !a && /* @__PURE__ */ E(Ce, {}),
+        T
       ]
     }
-  ) });
+  );
 };
-i.displayName = "Card";
-i.MediaAbove = R;
-i.MediaBelow = C;
-i.Header = _;
-i.Body = O;
-i.Content = V;
-i.Footer = W;
+l.displayName = "Card";
+l.MediaAbove = be;
+l.MediaBelow = he;
+l.Header = pe;
+l.Body = ye;
+l.Content = $e;
+l.Footer = Ie;
 export {
-  i as Card
+  l as Card
 };

package/lib/Card/CardContext.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),t=r.createContext(void 0),s=({children:e,value:o})=>n.jsx(t.Provider,{value:o,children:e}),d=()=>{const e=r.useContext(t);if(!e)throw new Error("useCard must be used within a CardProvider");return e};exports.CardProvider=s;exports.useCard=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),r=require("react"),e=r.createContext(void 0),n=({children:t,value:o})=>u.jsx(e.Provider,{value:o,children:t}),s=()=>r.useContext(e);exports.CardGroupProvider=n;exports.useCardGroupContext=s;

package/lib/Card/CardContext.d.ts

@@ -1,13 +1,15 @@
 import { default as React } from 'react';
-import { CardDensity, CardType } from '@viasat/beam-shared/components/card';
-interface CardContextValue {
-    density: CardDensity;
-    type?: CardType;
+import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
+export interface CardGroupContextValue {
+    selectionMode?: CardGroupSelectionMode;
+    showIndicator?: boolean;
+    name?: string;
     disabled?: boolean;
+    value?: string | string[];
+    onItemSelect?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const CardProvider: ({ children, value, }: {
+export declare const CardGroupProvider: ({ children, value, }: {
     children: React.ReactNode;
-    value: CardContextValue;
+    value: CardGroupContextValue;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const useCard: () => CardContextValue;
-export {};
+export declare const useCardGroupContext: () => CardGroupContextValue | undefined;

package/lib/Card/CardContext.es.js

@@ -1,15 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import { createContext as n, useContext as d } from "react";
-const t = n(void 0), C = ({
-  children: r,
-  value: o
-}) => /* @__PURE__ */ e(t.Provider, { value: o, children: r }), a = () => {
-  const r = d(t);
-  if (!r)
-    throw new Error("useCard must be used within a CardProvider");
-  return r;
-};
+import { createContext as n, useContext as u } from "react";
+const r = n(void 0), p = ({
+  children: o,
+  value: t
+}) => /* @__PURE__ */ e(r.Provider, { value: t, children: o }), s = () => u(r);
 export {
-  C as CardProvider,
-  a as useCard
+  p as CardGroupProvider,
+  s as useCardGroupContext
 };

package/lib/Card/CardGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),f=require("clsx"),h=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const G=require("../../chunks/card.module.8KnCe1uR.js");require("../../chunks/CSSLookup.DESAWWRT.js");const I=require("../../utils/hooks/useId.cjs.js"),M=require("./CardContext.cjs.js"),V=require("./useCardGroupValue.cjs.js"),{classModifierPrefix:j}=h.getBEMClassNames("card"),i=u=>{const{children:d,className:c,disabled:e=!1,selectionMode:a="single",showIndicator:r=!1,name:n,value:m,defaultValue:b,onChange:C,"aria-label":p,"aria-labelledby":q,...g}=u,v=I.useId(),s=n??v,{currentValue:l,handleItemSelect:o}=V.useCardGroupValue({value:m,defaultValue:b,selectionMode:a,onChange:C}),N=f(e&&G.styles[`${j}disabled`],c),_=a==="single"?"radiogroup":"group",x=y.useMemo(()=>({selectionMode:a,showIndicator:r,name:s,disabled:e,value:l,onItemSelect:o}),[a,r,s,e,l,o]);return t.jsx("div",{role:_,"aria-disabled":e||void 0,"aria-label":p,"aria-labelledby":q,className:N,...g,children:t.jsx(M.CardGroupProvider,{value:x,children:d})})};i.displayName="CardGroup";exports.CardGroup=i;

package/lib/Card/CardGroup.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
+export type CardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+    /**
+     * The Cards that belong to this CardGroup
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible group label
+     */
+    'aria-label'?: string;
+    /**
+     * ID(s) of elements that label the group
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Specify if all cards in the group are disabled
+     * @default false
+     */
+    'disabled'?: boolean;
+    /**
+     * Specify the selection mode for the group
+     * @default 'single'
+     */
+    'selectionMode'?: CardGroupSelectionMode;
+    /**
+     * When true, shows a visual selection indicator (radio or checkbox) on cards
+     * @default false
+     */
+    'showIndicator'?: boolean;
+    /**
+     * Specify the shared name attribute for form integration when selectable.
+     * When omitted, CardGroup will auto-generate a name
+     */
+    'name'?: string;
+    /**
+     * Controlled value for the group.
+     *
+     * - single selection expects a string
+     * - multiple selection expects a string[]
+     */
+    'value'?: string | string[];
+    /**
+     * Uncontrolled initial value for the group
+     */
+    'defaultValue'?: string | string[];
+    /**
+     * Callback invoked when the group selection changes
+     */
+    'onChange'?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const CardGroup: {
+    (props: CardGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/Card/CardGroup.es.js

@@ -0,0 +1,67 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import y from "clsx";
+import { g as G } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as I } from "../../chunks/card.module.ByBYpexJ.js";
+import "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import { useId as M } from "../../utils/hooks/useId.es.js";
+import { CardGroupProvider as V } from "./CardContext.es.js";
+import { useCardGroupValue as B } from "./useCardGroupValue.es.js";
+const { classModifierPrefix: L } = G("card"), P = (i) => {
+  const {
+    children: m,
+    className: d,
+    disabled: e = !1,
+    selectionMode: a = "single",
+    showIndicator: r = !1,
+    name: n,
+    value: c,
+    defaultValue: u,
+    onChange: p,
+    "aria-label": f,
+    "aria-labelledby": b,
+    ...g
+  } = i, v = M(), o = n ?? v, { currentValue: l, handleItemSelect: s } = B({
+    value: c,
+    defaultValue: u,
+    selectionMode: a,
+    onChange: p
+  }), N = y(
+    e && I[`${L}disabled`],
+    d
+  ), C = a === "single" ? "radiogroup" : "group", h = x(
+    () => ({
+      selectionMode: a,
+      showIndicator: r,
+      name: o,
+      disabled: e,
+      value: l,
+      onItemSelect: s
+    }),
+    [
+      a,
+      r,
+      o,
+      e,
+      l,
+      s
+    ]
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      role: C,
+      "aria-disabled": e || void 0,
+      "aria-label": f,
+      "aria-labelledby": b,
+      className: N,
+      ...g,
+      children: /* @__PURE__ */ t(V, { value: h, children: m })
+    }
+  );
+};
+P.displayName = "CardGroup";
+export {
+  P as CardGroup
+};

package/lib/Card/card.utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(r){return r==="single"?"radio":"checkbox"}function o(r){return Array.isArray(r)?r[0]:r}function n(r){return r?Array.isArray(r)?r:[r]:[]}exports.getInputType=e;exports.normalizeToArray=n;exports.normalizeToSingle=o;

package/lib/Card/card.utils.d.ts

@@ -0,0 +1,7 @@
+import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
+/**
+ * Maps selection mode to the underlying input/indicator type.
+ */
+export declare function getInputType(selectionMode?: CardGroupSelectionMode): 'radio' | 'checkbox';
+export declare function normalizeToSingle(input?: string | string[]): string | undefined;
+export declare function normalizeToArray(input?: string | string[]): string[];

package/lib/Card/card.utils.es.js

@@ -0,0 +1,14 @@
+function e(r) {
+  return r === "single" ? "radio" : "checkbox";
+}
+function n(r) {
+  return Array.isArray(r) ? r[0] : r;
+}
+function o(r) {
+  return r ? Array.isArray(r) ? r : [r] : [];
+}
+export {
+  e as getInputType,
+  o as normalizeToArray,
+  n as normalizeToSingle
+};

package/lib/Card/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Card.cjs.js");exports.Card=r.Card;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Card.cjs.js"),e=require("./CardGroup.cjs.js");exports.Card=r.Card;exports.CardGroup=e.CardGroup;

package/lib/Card/index.d.ts

@@ -1,2 +1,10 @@
 import { Card, CardProps } from './Card';
-export { Card, type CardProps };
+import { CardGroup, CardGroupProps } from './CardGroup';
+export { Card, type CardProps, CardGroup, type CardGroupProps };
+export type { CardBodyProps } from './Card.Body';
+export type { CardContentProps } from './Card.Content';
+export type { CardFooterProps, CardFooterActionsProps } from './Card.Footer';
+export type { CardHeaderProps, CardHeaderHeadingProps, CardHeaderHeadingTextProps, CardHeaderEyebrowProps, CardHeaderSupportingTextProps, CardHeaderContentBeforeProps, CardHeaderContentAfterProps, } from './Card.Header';
+export type { CardMediaProps } from './Card.Media';
+export type { CardMediaAboveProps } from './Card.MediaAbove';
+export type { CardMediaBelowProps } from './Card.MediaBelow';

package/lib/Card/index.es.js

@@ -1,4 +1,6 @@
-import { Card as a } from "./Card.es.js";
+import { Card as p } from "./Card.es.js";
+import { CardGroup as d } from "./CardGroup.es.js";
 export {
-  a as Card
+  p as Card,
+  d as CardGroup
 };

package/lib/Card/useCardGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),k=require("./card.utils.cjs.js");function q({cardGroup:e,selected:C,defaultSelected:S,value:b,id:m,disabled:I,name:y,selectionMode:M,showIndicator:a,onSelect:n}){const t=!!e,s=b??m,o=!t||!!s;l.useEffect(()=>{process.env.NODE_ENV!=="production"&&t&&!s&&console.warn("Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection.")},[]);const f=I||(e==null?void 0:e.disabled)||!1,c=(e==null?void 0:e.name)??y,h=(e==null?void 0:e.showIndicator)??a,w=(e==null?void 0:e.selectionMode)??M??"single",E=k.getInputType(w),[_,A]=l.useState(()=>t?!1:S),N=C!==void 0?C:_,i=e==null?void 0:e.value,v=(e==null?void 0:e.selectionMode)??"single",T=l.useMemo(()=>!t||!s?null:v==="single"?i===s:Array.isArray(i)?i.includes(s):!1,[i,v,t,s]),V=t?T??!1:N,d=l.useCallback(g=>{f||!o||(e!=null&&e.onItemSelect&&s?e.onItemSelect(s,g):A(g.target.checked),n==null||n(g))},[f,o,e,s,n]);return{selected:V,handleChange:d,resolvedValue:s,isSelectionEligible:o,resolvedDisabled:f,resolvedName:c,resolvedShowIndicator:h,inputType:E}}exports.useCardGroup=q;

package/lib/Card/useCardGroup.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
+import { CardGroupContextValue } from './CardContext';
+interface UseCardGroupParams {
+    cardGroup: CardGroupContextValue | undefined;
+    selected: boolean | undefined;
+    defaultSelected: boolean;
+    value: string | undefined;
+    id: string | undefined;
+    disabled: boolean;
+    name: string | undefined;
+    selectionMode?: CardGroupSelectionMode;
+    showIndicator: boolean;
+    onSelect?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface UseCardGroupReturn {
+    selected: boolean;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    resolvedValue: string | undefined;
+    isSelectionEligible: boolean;
+    resolvedDisabled: boolean;
+    resolvedName: string | undefined;
+    resolvedShowIndicator: boolean;
+    inputType: 'radio' | 'checkbox';
+}
+export declare function useCardGroup({ cardGroup, selected: controlledSelected, defaultSelected, value, id, disabled, name, selectionMode, showIndicator, onSelect, }: UseCardGroupParams): UseCardGroupReturn;
+export {};

package/lib/Card/useCardGroup.es.js

@@ -0,0 +1,42 @@
+import { useEffect as O, useState as _, useMemo as j, useCallback as q } from "react";
+import { getInputType as z } from "./card.utils.es.js";
+function J({
+  cardGroup: e,
+  selected: g,
+  defaultSelected: C,
+  value: v,
+  id: I,
+  disabled: S,
+  name: h,
+  selectionMode: M,
+  showIndicator: b,
+  onSelect: n
+}) {
+  const t = !!e, s = v ?? I, l = !t || !!s;
+  O(() => {
+    process.env.NODE_ENV !== "production" && t && !s && console.warn(
+      "Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection."
+    );
+  }, []);
+  const o = S || (e == null ? void 0 : e.disabled) || !1, w = (e == null ? void 0 : e.name) ?? h, y = (e == null ? void 0 : e.showIndicator) ?? b, E = (e == null ? void 0 : e.selectionMode) ?? M ?? "single", A = z(E), [N, V] = _(
+    () => t ? !1 : C
+  ), k = g !== void 0 ? g : N, i = e == null ? void 0 : e.value, m = (e == null ? void 0 : e.selectionMode) ?? "single", D = j(() => !t || !s ? null : m === "single" ? i === s : Array.isArray(i) ? i.includes(s) : !1, [i, m, t, s]), T = t ? D ?? !1 : k, x = q(
+    (f) => {
+      o || !l || (e != null && e.onItemSelect && s ? e.onItemSelect(s, f) : V(f.target.checked), n == null || n(f));
+    },
+    [o, l, e, s, n]
+  );
+  return {
+    selected: T,
+    handleChange: x,
+    resolvedValue: s,
+    isSelectionEligible: l,
+    resolvedDisabled: o,
+    resolvedName: w,
+    resolvedShowIndicator: y,
+    inputType: A
+  };
+}
+export {
+  J as useCardGroup
+};

package/lib/Card/useCardGroupValue.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("./card.utils.cjs.js");function b({value:o,defaultValue:n,selectionMode:t,onChange:r}){const u=o!==void 0,[d,y]=a.useState(()=>t==="single"?s.normalizeToSingle(n):s.normalizeToArray(n)),i=u?o:d,e=a.useMemo(()=>t==="single"?s.normalizeToSingle(i):s.normalizeToArray(i),[i,t]),f=a.useCallback((l,S)=>{if(t==="single"){u||y(l),r==null||r(l,S);return}const c=s.normalizeToArray(e),T=c.includes(l)?c.filter(z=>z!==l):[...c,l];u||y(T),r==null||r(T,S)},[t,e,u,r]);return{currentValue:e,handleItemSelect:f}}exports.useCardGroupValue=b;

package/lib/Card/useCardGroupValue.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
+interface UseCardGroupValueParams {
+    value: string | string[] | undefined;
+    defaultValue: string | string[] | undefined;
+    selectionMode: CardGroupSelectionMode;
+    onChange?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface UseCardGroupValueReturn {
+    currentValue: string | string[] | undefined;
+    handleItemSelect: (itemValue: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function useCardGroupValue({ value, defaultValue, selectionMode, onChange, }: UseCardGroupValueParams): UseCardGroupValueReturn;
+export {};

package/lib/Card/useCardGroupValue.es.js

@@ -0,0 +1,29 @@
+import { useState as I, useMemo as T, useCallback as a } from "react";
+import { normalizeToSingle as x, normalizeToArray as f } from "./card.utils.es.js";
+function w({
+  value: m,
+  defaultValue: o,
+  selectionMode: t,
+  onChange: r
+}) {
+  const l = m !== void 0, [y, p] = I(
+    () => t === "single" ? x(o) : f(o)
+  ), u = l ? m : y, c = T(
+    () => t === "single" ? x(u) : f(u),
+    [u, t]
+  ), z = a(
+    (s, n) => {
+      if (t === "single") {
+        l || p(s), r == null || r(s, n);
+        return;
+      }
+      const i = f(c), S = i.includes(s) ? i.filter((A) => A !== s) : [...i, s];
+      l || p(S), r == null || r(S, n);
+    },
+    [t, c, l, r]
+  );
+  return { currentValue: c, handleItemSelect: z };
+}
+export {
+  w as useCardGroupValue
+};