@purpurds/radio-card-group 6.12.5 → 7.1.0

package/dist/radio-card-group.es.js

@@ -1,4 +1,4 @@
-import { jsx as f, Fragment as me, jsxs as I } from "react/jsx-runtime";
+import { jsx as f, Fragment as me, jsxs as N } from "react/jsx-runtime";
 import * as s from "react";
 import A, { useState as Ve, forwardRef as _e, isValidElement as Ke, Children as ae, cloneElement as Be } from "react";
 import "react-dom";
@@ -45,7 +45,7 @@ function He() {
   }(ie)), ie.exports;
 }
 var Ye = He();
-const Xe = /* @__PURE__ */ We(Ye), M = {
+const Xe = /* @__PURE__ */ We(Ye), $ = {
   "purpur-heading": "_purpur-heading_k9fhq_1",
   "purpur-heading--hyphens": "_purpur-heading--hyphens_k9fhq_8",
   "purpur-heading--negative": "_purpur-heading--negative_k9fhq_11",
@@ -74,17 +74,17 @@ const Xe = /* @__PURE__ */ We(Ye), M = {
 }) => {
   const u = a, c = Xe([
     t,
-    M[F],
-    M[`${F}--${r}`],
+    $[F],
+    $[`${F}--${r}`],
     {
-      [M[`${F}--hyphens`]]: n,
-      [M[`${F}--negative`]]: o
+      [$[`${F}--hyphens`]]: n,
+      [$[`${F}--negative`]]: o
     }
   ]);
   return /* @__PURE__ */ f(u, { className: c, ...i, children: e });
 };
 ge.displayName = "Heading";
-function N(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+function I(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(a) {
     if (e == null || e(a), n === !1 || !a.defaultPrevented)
       return t == null ? void 0 : t(a);
@@ -121,18 +121,18 @@ function j(e, t = []) {
     n = [...n, i];
     const p = (m) => {
       var y;
-      const { scope: _, children: d, ...l } = m, h = ((y = _ == null ? void 0 : _[e]) == null ? void 0 : y[c]) || u, v = s.useMemo(() => l, Object.values(l));
+      const { scope: g, children: d, ...l } = m, h = ((y = g == null ? void 0 : g[e]) == null ? void 0 : y[c]) || u, v = s.useMemo(() => l, Object.values(l));
       return /* @__PURE__ */ f(h.Provider, { value: v, children: d });
     };
     p.displayName = r + "Provider";
-    function g(m, _) {
+    function _(m, g) {
       var h;
-      const d = ((h = _ == null ? void 0 : _[e]) == null ? void 0 : h[c]) || u, l = s.useContext(d);
+      const d = ((h = g == null ? void 0 : g[e]) == null ? void 0 : h[c]) || u, l = s.useContext(d);
       if (l) return l;
       if (i !== void 0) return i;
       throw new Error(`\`${m}\` must be used within \`${r}\``);
     }
-    return [p, g];
+    return [p, _];
   }
   const a = () => {
     const r = n.map((i) => s.createContext(i));
@@ -218,7 +218,7 @@ var nr = [
   "span",
   "svg",
   "ul"
-], $ = nr.reduce((e, t) => {
+], M = nr.reduce((e, t) => {
   const n = s.forwardRef((o, a) => {
     const { asChild: r, ...i } = o, u = r ? q : t;
     return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(u, { ...i, ref: a });
@@ -241,19 +241,19 @@ function or(e) {
     }
   );
   c.displayName = u;
-  const p = e + "CollectionItemSlot", g = "data-radix-collection-item", m = A.forwardRef(
+  const p = e + "CollectionItemSlot", _ = "data-radix-collection-item", m = A.forwardRef(
     (d, l) => {
       const { scope: h, children: v, ...y } = d, b = A.useRef(null), E = P(l, b), O = r(p, h);
-      return A.useEffect(() => (O.itemMap.set(b, { ref: b, ...y }), () => void O.itemMap.delete(b))), /* @__PURE__ */ f(q, { [g]: "", ref: E, children: v });
+      return A.useEffect(() => (O.itemMap.set(b, { ref: b, ...y }), () => void O.itemMap.delete(b))), /* @__PURE__ */ f(q, { [_]: "", ref: E, children: v });
     }
   );
   m.displayName = p;
-  function _(d) {
+  function g(d) {
     const l = r(e + "CollectionConsumer", d);
     return A.useCallback(() => {
       const v = l.collectionRef.current;
       if (!v) return [];
-      const y = Array.from(v.querySelectorAll(`[${g}]`));
+      const y = Array.from(v.querySelectorAll(`[${_}]`));
       return Array.from(l.itemMap.values()).sort(
         (O, x) => y.indexOf(O.ref.current) - y.indexOf(x.ref.current)
       );
@@ -261,7 +261,7 @@ function or(e) {
   }
   return [
     { Provider: i, Slot: c, ItemSlot: m },
-    _,
+    g,
     o
   ];
 }
@@ -332,15 +332,15 @@ var _r = s.forwardRef((e, t) => {
     defaultCurrentTabStopId: u,
     onCurrentTabStopIdChange: c,
     onEntryFocus: p,
-    preventScrollOnEntryFocus: g = !1,
+    preventScrollOnEntryFocus: _ = !1,
     ...m
-  } = e, _ = s.useRef(null), d = P(t, _), l = ye(r), [h = null, v] = ve({
+  } = e, g = s.useRef(null), d = P(t, g), l = ye(r), [h = null, v] = ve({
     prop: i,
     defaultProp: u,
     onChange: c
   }), [y, b] = s.useState(!1), E = Q(p), O = be(n), x = s.useRef(!1), [Le, ne] = s.useState(0);
   return s.useEffect(() => {
-    const R = _.current;
+    const R = g.current;
     if (R)
       return R.addEventListener(K, E), () => R.removeEventListener(K, E);
   }, [E]), /* @__PURE__ */ f(
@@ -365,17 +365,17 @@ var _r = s.forwardRef((e, t) => {
         []
       ),
       children: /* @__PURE__ */ f(
-        $.div,
+        M.div,
         {
           tabIndex: y || Le === 0 ? -1 : 0,
           "data-orientation": o,
           ...m,
           ref: d,
           style: { outline: "none", ...e.style },
-          onMouseDown: N(e.onMouseDown, () => {
+          onMouseDown: I(e.onMouseDown, () => {
             x.current = !0;
           }),
-          onFocus: N(e.onFocus, (R) => {
+          onFocus: I(e.onFocus, (R) => {
             const qe = !x.current;
             if (R.target === R.currentTarget && qe && !y) {
               const oe = new CustomEvent(K, pr);
@@ -383,12 +383,12 @@ var _r = s.forwardRef((e, t) => {
                 const V = O().filter((w) => w.focusable), Ue = V.find((w) => w.active), je = V.find((w) => w.id === h), ze = [Ue, je, ...V].filter(
                   Boolean
                 ).map((w) => w.ref.current);
-                Ie(ze, g);
+                Ie(ze, _);
               }
             }
             x.current = !1;
           }),
-          onBlur: N(e.onBlur, () => b(!1))
+          onBlur: I(e.onBlur, () => b(!1))
         }
       )
     }
@@ -401,11 +401,11 @@ var _r = s.forwardRef((e, t) => {
       active: a = !1,
       tabStopId: r,
       ...i
-    } = e, u = ur(), c = r || u, p = mr(Se, n), g = p.currentTabStopId === c, m = be(n), { onFocusableItemAdd: _, onFocusableItemRemove: d } = p;
+    } = e, u = ur(), c = r || u, p = mr(Se, n), _ = p.currentTabStopId === c, m = be(n), { onFocusableItemAdd: g, onFocusableItemRemove: d } = p;
     return s.useEffect(() => {
       if (o)
-        return _(), () => d();
-    }, [o, _, d]), /* @__PURE__ */ f(
+        return g(), () => d();
+    }, [o, g, d]), /* @__PURE__ */ f(
       Z.ItemSlot,
       {
         scope: n,
@@ -413,17 +413,17 @@ var _r = s.forwardRef((e, t) => {
         focusable: o,
         active: a,
         children: /* @__PURE__ */ f(
-          $.span,
+          M.span,
           {
-            tabIndex: g ? 0 : -1,
+            tabIndex: _ ? 0 : -1,
             "data-orientation": p.orientation,
             ...i,
             ref: t,
-            onMouseDown: N(e.onMouseDown, (l) => {
+            onMouseDown: I(e.onMouseDown, (l) => {
               o ? p.onItemFocus(c) : l.preventDefault();
             }),
-            onFocus: N(e.onFocus, () => p.onItemFocus(c)),
-            onKeyDown: N(e.onKeyDown, (l) => {
+            onFocus: I(e.onFocus, () => p.onItemFocus(c)),
+            onKeyDown: I(e.onKeyDown, (l) => {
               if (l.key === "Tab" && l.shiftKey) {
                 p.onItemShiftTab();
                 return;
@@ -529,27 +529,27 @@ function Ir(e) {
     const p = D(o.current);
     r.current = u === "mounted" ? p : "none";
   }, [u]), U(() => {
-    const p = o.current, g = a.current;
-    if (g !== e) {
-      const _ = r.current, d = D(p);
-      e ? c("MOUNT") : d === "none" || (p == null ? void 0 : p.display) === "none" ? c("UNMOUNT") : c(g && _ !== d ? "ANIMATION_OUT" : "UNMOUNT"), a.current = e;
+    const p = o.current, _ = a.current;
+    if (_ !== e) {
+      const g = r.current, d = D(p);
+      e ? c("MOUNT") : d === "none" || (p == null ? void 0 : p.display) === "none" ? c("UNMOUNT") : c(_ && g !== d ? "ANIMATION_OUT" : "UNMOUNT"), a.current = e;
     }
   }, [e, c]), U(() => {
     if (t) {
       let p;
-      const g = t.ownerDocument.defaultView ?? window, m = (d) => {
+      const _ = t.ownerDocument.defaultView ?? window, m = (d) => {
         const h = D(o.current).includes(d.animationName);
         if (d.target === t && h && (c("ANIMATION_END"), !a.current)) {
           const v = t.style.animationFillMode;
-          t.style.animationFillMode = "forwards", p = g.setTimeout(() => {
+          t.style.animationFillMode = "forwards", p = _.setTimeout(() => {
             t.style.animationFillMode === "forwards" && (t.style.animationFillMode = v);
           });
         }
-      }, _ = (d) => {
+      }, g = (d) => {
         d.target === t && (r.current = D(o.current));
       };
-      return t.addEventListener("animationstart", _), t.addEventListener("animationcancel", m), t.addEventListener("animationend", m), () => {
-        g.clearTimeout(p), t.removeEventListener("animationstart", _), t.removeEventListener("animationcancel", m), t.removeEventListener("animationend", m);
+      return t.addEventListener("animationstart", g), t.addEventListener("animationcancel", m), t.addEventListener("animationend", m), () => {
+        _.clearTimeout(p), t.removeEventListener("animationstart", g), t.removeEventListener("animationcancel", m), t.removeEventListener("animationend", m);
       };
     } else
       c("ANIMATION_END");
@@ -579,11 +579,11 @@ var ee = "Radio", [Ar, Ae] = j(ee), [Er, Or] = Ar(ee), Ee = s.forwardRef(
       value: u = "on",
       onCheck: c,
       form: p,
-      ...g
-    } = e, [m, _] = s.useState(null), d = P(t, (v) => _(v)), l = s.useRef(!1), h = m ? p || !!m.closest("form") : !0;
-    return /* @__PURE__ */ I(Er, { scope: n, checked: a, disabled: i, children: [
+      ..._
+    } = e, [m, g] = s.useState(null), d = P(t, (v) => g(v)), l = s.useRef(!1), h = m ? p || !!m.closest("form") : !0;
+    return /* @__PURE__ */ N(Er, { scope: n, checked: a, disabled: i, children: [
       /* @__PURE__ */ f(
-        $.button,
+        M.button,
         {
           type: "button",
           role: "radio",
@@ -592,9 +592,9 @@ var ee = "Radio", [Ar, Ae] = j(ee), [Er, Or] = Ar(ee), Ee = s.forwardRef(
           "data-disabled": i ? "" : void 0,
           disabled: i,
           value: u,
-          ...g,
+          ..._,
           ref: d,
-          onClick: N(e.onClick, (v) => {
+          onClick: I(e.onClick, (v) => {
             a || c == null || c(), h && (l.current = v.isPropagationStopped(), l.current || v.stopPropagation());
           })
         }
@@ -621,7 +621,7 @@ var Oe = "RadioIndicator", Pe = s.forwardRef(
   (e, t) => {
     const { __scopeRadio: n, forceMount: o, ...a } = e, r = Or(Oe, n);
     return /* @__PURE__ */ f(we, { present: o || r.checked, children: /* @__PURE__ */ f(
-      $.span,
+      M.span,
       {
         "data-state": xe(r.checked),
         "data-disabled": r.disabled ? "" : void 0,
@@ -637,8 +637,8 @@ var Pr = (e) => {
   return s.useEffect(() => {
     const c = r.current, p = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(p, "checked").set;
     if (i !== n && m) {
-      const _ = new Event("click", { bubbles: o });
-      m.call(c, n), c.dispatchEvent(_);
+      const g = new Event("click", { bubbles: o });
+      m.call(c, n), c.dispatchEvent(g);
     }
   }, [i, n, o]), /* @__PURE__ */ f(
     "input",
@@ -666,7 +666,7 @@ function xe(e) {
 var xr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], re = "RadioGroup", [kr, pt] = j(re, [
   Re,
   Ae
-]), ke = Re(), Te = Ae(), [Tr, $r] = kr(re), $e = s.forwardRef(
+]), ke = Re(), Te = Ae(), [Tr, Mr] = kr(re), Me = s.forwardRef(
   (e, t) => {
     const {
       __scopeRadioGroup: n,
@@ -677,9 +677,9 @@ var xr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], re = "RadioGroup",
       disabled: u = !1,
       orientation: c,
       dir: p,
-      loop: g = !0,
+      loop: _ = !0,
       onValueChange: m,
-      ..._
+      ...g
     } = e, d = ke(n), l = ye(p), [h, v] = ve({
       prop: r,
       defaultProp: a,
@@ -701,16 +701,16 @@ var xr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], re = "RadioGroup",
             ...d,
             orientation: c,
             dir: l,
-            loop: g,
+            loop: _,
             children: /* @__PURE__ */ f(
-              $.div,
+              M.div,
               {
                 role: "radiogroup",
                 "aria-required": i,
                 "aria-orientation": c,
                 "data-disabled": u ? "" : void 0,
                 dir: l,
-                ..._,
+                ...g,
                 ref: t
               }
             )
@@ -720,14 +720,14 @@ var xr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], re = "RadioGroup",
     );
   }
 );
-$e.displayName = re;
-var Me = "RadioGroupItem", Fe = s.forwardRef(
+Me.displayName = re;
+var $e = "RadioGroupItem", Fe = s.forwardRef(
   (e, t) => {
-    const { __scopeRadioGroup: n, disabled: o, ...a } = e, r = $r(Me, n), i = r.disabled || o, u = ke(n), c = Te(n), p = s.useRef(null), g = P(t, p), m = r.value === a.value, _ = s.useRef(!1);
+    const { __scopeRadioGroup: n, disabled: o, ...a } = e, r = Mr($e, n), i = r.disabled || o, u = ke(n), c = Te(n), p = s.useRef(null), _ = P(t, p), m = r.value === a.value, g = s.useRef(!1);
     return s.useEffect(() => {
       const d = (h) => {
-        xr.includes(h.key) && (_.current = !0);
-      }, l = () => _.current = !1;
+        xr.includes(h.key) && (g.current = !0);
+      }, l = () => g.current = !1;
       return document.addEventListener("keydown", d), document.addEventListener("keyup", l), () => {
         document.removeEventListener("keydown", d), document.removeEventListener("keyup", l);
       };
@@ -747,14 +747,14 @@ var Me = "RadioGroupItem", Fe = s.forwardRef(
             ...c,
             ...a,
             name: r.name,
-            ref: g,
+            ref: _,
             onCheck: () => r.onValueChange(a.value),
-            onKeyDown: N((d) => {
+            onKeyDown: I((d) => {
               d.key === "Enter" && d.preventDefault();
             }),
-            onFocus: N(a.onFocus, () => {
+            onFocus: I(a.onFocus, () => {
               var d;
-              _.current && ((d = p.current) == null || d.click());
+              g.current && ((d = p.current) == null || d.click());
             })
           }
         )
@@ -762,15 +762,15 @@ var Me = "RadioGroupItem", Fe = s.forwardRef(
     );
   }
 );
-Fe.displayName = Me;
-var Mr = "RadioGroupIndicator", De = s.forwardRef(
+Fe.displayName = $e;
+var $r = "RadioGroupIndicator", De = s.forwardRef(
   (e, t) => {
     const { __scopeRadioGroup: n, ...o } = e, a = Te(n);
     return /* @__PURE__ */ f(Pe, { ...a, ...o, ref: t });
   }
 );
-De.displayName = Mr;
-var Fr = $e, Dr = Fe, Gr = De;
+De.displayName = $r;
+var Fr = Me, Dr = Fe, Gr = De;
 function Lr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -1000,7 +1000,7 @@ const G = "purpur-radio-card-group__item-image", et = (e) => !!(e != null && e.s
   }), p = C(`${G}-placeholder`, {
     [`${G}-placeholder--loaded`]: r
   });
-  return /* @__PURE__ */ I(me, { children: [
+  return /* @__PURE__ */ N(me, { children: [
     /* @__PURE__ */ f(
       "img",
       {
@@ -1015,30 +1015,20 @@ const G = "purpur-radio-card-group__item-image", et = (e) => !!(e != null && e.s
     !n && /* @__PURE__ */ f(Ge, { className: p })
   ] });
 }, S = "purpur-radio-card-group__item", Y = (e, { disabled: t }) => typeof e == "function" ? e({ disabled: t }) : e, tt = ({ title: e, ...t }, n) => {
-  const {
-    ["data-testid"]: o,
-    body: a,
-    children: r,
-    disabled: i,
-    id: u,
-    image: c,
-    required: p,
-    value: g
-  } = t, m = { ...t };
-  return /* @__PURE__ */ I("div", { className: C(`${S}-container`), ref: n, children: [
-    /* @__PURE__ */ I(
+  const { ["data-testid"]: o, body: a, children: r, disabled: i, id: u, image: c, value: p } = t, _ = { ...t };
+  return /* @__PURE__ */ N("div", { className: C(`${S}-container`), ref: n, children: [
+    /* @__PURE__ */ N(
       Dr,
       {
         className: C(S),
         "data-testid": o,
         disabled: i,
         id: u,
-        required: p,
-        value: g,
+        value: p,
         children: [
-          c && /* @__PURE__ */ f("span", { className: C(`${S}-image-container`), children: et(c) ? /* @__PURE__ */ f(rt, { ...c, "data-testid": o && `${o}-image` }) : Y(c, m) }),
-          /* @__PURE__ */ I("span", { className: C(`${S}-content`), children: [
-            /* @__PURE__ */ I("span", { className: C(`${S}-top-container`), children: [
+          c && /* @__PURE__ */ f("span", { className: C(`${S}-image-container`), children: et(c) ? /* @__PURE__ */ f(rt, { ...c, "data-testid": o && `${o}-image` }) : Y(c, _) }),
+          /* @__PURE__ */ N("span", { className: C(`${S}-content`), children: [
+            /* @__PURE__ */ N("span", { className: C(`${S}-top-container`), children: [
               typeof e == "string" ? /* @__PURE__ */ f(
                 J,
                 {
@@ -1048,7 +1038,7 @@ const G = "purpur-radio-card-group__item-image", et = (e) => !!(e != null && e.s
                   disabled: i,
                   children: e
                 }
-              ) : Y(e, m),
+              ) : Y(e, _),
               /* @__PURE__ */ f("span", { className: C(`${S}-radio`), children: /* @__PURE__ */ f(Gr, { className: C(`${S}-indicator`) }) })
             ] }),
             a && /* @__PURE__ */ f("span", { className: C(`${S}-bottom-container`), children: typeof a == "string" ? /* @__PURE__ */ f(
@@ -1059,7 +1049,7 @@ const G = "purpur-radio-card-group__item-image", et = (e) => !!(e != null && e.s
                 disabled: i,
                 children: a
               }
-            ) : Y(a, m) })
+            ) : Y(a, _) })
           ] })
         ]
       }
@@ -1074,30 +1064,33 @@ const nt = (e) => Ke(e) && (e == null ? void 0 : e.type) === te, dt = ["horizont
   children: n,
   className: o,
   items: a,
-  label: r,
-  labelTag: i = "h2",
+  heading: r,
+  headingTag: i = "h2",
   loop: u = !0,
   orientation: c = "vertical",
   radioPosition: p = "right",
-  ...g
+  ..._
 }, m) => {
-  const _ = ae.toArray(n).filter(nt);
-  return /* @__PURE__ */ I("div", { className: C(o, `${L}__container`), ref: m, children: [
-    r && /* @__PURE__ */ f(
+  const g = ae.toArray(n).filter(nt);
+  return /* @__PURE__ */ N("div", { className: C(o, `${L}__container`), ref: m, children: [
+    r && /* @__PURE__ */ N(
       ge,
       {
-        "data-testid": e ? `${e}-label` : void 0,
-        id: `${g.id}-label`,
+        "data-testid": e ? `${e}-heading` : void 0,
+        id: `${_.id}-heading`,
         tag: i,
         variant: "subsection-100",
-        children: `${g.required ? "* " : ""}${r}`
+        children: [
+          _.required && /* @__PURE__ */ f("span", { "aria-hidden": !0, children: "* " }),
+          r
+        ]
       }
     ),
-    (!!(a != null && a.length) || _.length) && /* @__PURE__ */ I(
+    (!!(a != null && a.length) || g.length) && /* @__PURE__ */ N(
       Fr,
       {
-        ...g,
-        "aria-labelledby": t || (r ? `${g.id}-label` : void 0),
+        ..._,
+        "aria-labelledby": t || (r ? `${_.id}-heading` : void 0),
         className: C(
           L,
           `${L}--${c}`,
@@ -1110,14 +1103,14 @@ const nt = (e) => Ke(e) && (e == null ? void 0 : e.type) === te, dt = ["horizont
             te,
             {
               ...d,
-              disabled: d.disabled || g.disabled,
+              disabled: d.disabled || _.disabled,
               "data-testid": e ? `${e}-item` : void 0
             },
             d.id
           )),
           ae.map(
-            _,
-            (d) => Be(d, { disabled: d.props.disabled || g.disabled })
+            g,
+            (d) => Be(d, { disabled: d.props.disabled || _.disabled })
           )
         ]
       }