se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index69.js.map

@@ -1 +1 @@
-{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useFocusManagement.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nexport interface UseFocusManagementOptions {\n  /**\n   * CSS selector to query the primary focus target.\n   * Default: 'h1'\n   */\n  targetSelector?: string;\n  /**\n   * Fallback element id if selector target is not found.\n   * Default: 'main-content'\n   */\n  fallbackId?: string;\n}\n\n/**\n * Generic focus management hook for route/state driven UI transitions.\n * Useful for both route changes and in-page multi-step wizards.\n * \n * Always skips first render and uses animation frame for safe DOM timing.\n */\nexport function useFocusManagement(\n  dependencies: DependencyList,\n  {\n    targetSelector = '#main-content h1',\n    fallbackId = 'main-content'\n  }: UseFocusManagementOptions = {}\n): void {\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    // Always skip first render\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    const focusTarget = () => {\n      const el = (document.querySelector(targetSelector) || document.getElementById(fallbackId)) as HTMLElement;\n      if (el) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');\n        el.focus();\n      }\n    };\n\n    // Always use animation frame for safe DOM timing\n    const rafId = requestAnimationFrame(focusTarget);\n    return () => cancelAnimationFrame(rafId);\n  }, dependencies);\n}\n"],"names":["useFocusManagement","dependencies","targetSelector","fallbackId","isFirstRender","useRef","useEffect","current","rafId","requestAnimationFrame","focusTarget","el","document","querySelector","getElementById","hasAttribute","setAttribute","focus","cancelAnimationFrame"],"mappings":";AAsBO,SAASA,EACdC,GACA;AAAA,EACEC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACY,IAAI,IACzB;AACN,QAAMC,IAAgBC,EAAO,EAAI;AAEjCC,EAAAA,EAAU,MAAM;AAEd,QAAIF,EAAcG,SAAS;AACzBH,MAAAA,EAAcG,UAAU;AACxB;AAAA,IACF;AAWA,UAAMC,IAAQC,sBATMC,MAAM;AACxB,YAAMC,IAAMC,SAASC,cAAcX,CAAc,KAAKU,SAASE,eAAeX,CAAU;AACxF,MAAIQ,MACGA,EAAGI,aAAa,UAAU,KAAGJ,EAAGK,aAAa,YAAY,IAAI,GAClEL,EAAGM,MAAAA;AAAAA,IAEP,CAG+C;AAC/C,WAAO,MAAMC,qBAAqBV,CAAK;AAAA,EACzC,GAAGP,CAAY;AACjB;"}
+{"version":3,"file":"index69.js","sources":["../src/components/Link/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\n/**\n * Allows native anchor attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own href/onClick/aria-label/aria-labelledby/aria-describedby typing.\n */\ntype NativeAnchorProps = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'target' | 'rel' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'\n>;\n\nexport interface LinkProps extends NativeAnchorProps {\n  /**\n   * URL to navigate to (required for actual links)\n   */\n  href: string;\n  /**\n   * Link text content (string only). Ignored when children are provided.\n   */\n  label?: string;\n  /**\n   * Rich content to render inside the link. Takes precedence over label.\n   */\n  children?: React.ReactNode;\n  /**\n   * If true, automatically adds target=\"_blank\" and rel=\"noopener noreferrer\"\n   * Also appends \" (opens in a new tab)\" to aria-label for screen readers\n   */\n  external?: boolean;\n  /**\n   * Accessible name for the link. Use when link text is generic or unclear.\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this link.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this link.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Click handler (e.g., for analytics tracking)\n   */\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * Override target (if you need something other than \"_blank\" for external links).\n   * Note: If external={true} and target is provided, the provided target will be used.\n   */\n  target?: string;\n  /**\n   * Override rel (if you need something other than \"noopener noreferrer\" for external links).\n   * Note: If external={true} and rel is provided, the provided rel will be used.\n   */\n  rel?: string;\n}\n\nconst EXTERNAL_LINK_ARIA_SUFFIX = ' (opens in a new tab)';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      label,\n      children,\n      external = false,\n      className = '',\n      automationId = '',\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      onClick,\n      target,\n      rel,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedLabel = children ? undefined : label;\n    // Handle external link attributes\n    // If external={true}, default to target=\"_blank\" and rel=\"noopener noreferrer\"\n    // Explicit target/rel props can override these defaults\n    const targetAttr = external ? (target ?? '_blank') : target;\n    const relAttr = external ? (rel ?? 'noopener noreferrer') : rel;\n\n    // Compute accessible name/description props with correct precedence\n    // Precedence: ariaLabelledBy > ariaLabel > visible text content\n    const accessibleNameProps = getA11yNameAttributes({\n      // External link aria-label enhancement for screen readers:\n      // When external={true}, always append \"(opens in a new tab)\"\n      ariaLabel:\n        external ? `${ariaLabel ?? resolvedLabel ?? ''}${EXTERNAL_LINK_ARIA_SUFFIX}` : ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy\n    });\n\n    const linkClassName = ['se-design-link', 'focus-outline', 'focus-visible:underline', className]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        target={targetAttr}\n        rel={relAttr}\n        className={linkClassName}\n        data-automation-id={automationId}\n        onClick={onClick}\n        {...props}\n        {...accessibleNameProps}\n      >\n        {children ?? label}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["EXTERNAL_LINK_ARIA_SUFFIX","Link","href","label","children","external","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","onClick","target","rel","props","ref","resolvedLabel","undefined","targetAttr","relAttr","accessibleNameProps","getA11yNameAttributes","linkClassName","filter","Boolean","join","React","createElement","_extends","displayName"],"mappings":";;;;;;;;;;;;;AAsEA,MAAMA,IAA4B,yBAErBC,sBACX,CACE;AAAA,EACEC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAgBZ,IAAWa,SAAYd,GAIvCe,IAAab,IAAYO,KAAU,WAAYA,GAC/CO,IAAUd,IAAYQ,KAAO,wBAAyBA,GAItDO,IAAsBC,EAAsB;AAAA;AAAA;AAAA,IAGhDb,WACEH,IAAW,GAAGG,KAAaQ,KAAiB,EAAE,GAAGhB,CAAyB,KAAKQ;AAAAA,IACjFC,gBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,EAAAA,CACD,GAEKY,IAAgB,CAAC,kBAAkB,iBAAiB,2BAA2BhB,CAAS,EAC3FiB,OAAOC,OAAO,EACdC,KAAK,GAAG;AAEX,SACEC,gBAAAA,EAAAC,cAAA,KAAAC,EAAA;AAAA,IACEb,KAAAA;AAAAA,IACAb,MAAAA;AAAAA,IACAU,QAAQM;AAAAA,IACRL,KAAKM;AAAAA,IACLb,WAAWgB;AAAAA,IACX,sBAAoBf;AAAAA,IACpBI,SAAAA;AAAAA,EAAAA,GACIG,GACAM,CAAmB,GAEtBhB,KAAYD,CACZ;AAEP,CACF;AAEAF,EAAK4B,cAAc;"}

package/dist/index7.js

@@ -1,11 +1,11 @@
-import c, { useState as h, useCallback as i } from "react";
-import "./index72.js";
-import { isElementVisible as p } from "./index205.js";
+import s, { useState as h, useCallback as i } from "react";
+import "./index77.js";
+import { isElementVisible as p } from "./index210.js";
 const x = ({
   skipLinks: n,
-  className: r = ""
+  className: c = ""
 }) => {
-  const [s, u] = h(n), l = i(() => {
+  const [r, u] = h(n), l = i(() => {
     const t = n.filter((e) => {
       const o = document.getElementById(e.id);
       return p(o);
@@ -30,10 +30,10 @@ const x = ({
       });
     }
   }, []);
-  return n.length === 0 ? null : /* @__PURE__ */ c.createElement("div", {
-    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${r}`,
+  return n.length === 0 ? null : /* @__PURE__ */ s.createElement("div", {
+    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${c}`,
     onFocus: a
-  }, s.map((t) => /* @__PURE__ */ c.createElement("a", {
+  }, r.map((t) => /* @__PURE__ */ s.createElement("a", {
     key: t.id,
     href: `#${t.id}`,
     className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
@@ -43,6 +43,7 @@ const x = ({
   }, t.label)));
 };
 export {
-  x as SkipLinksBar
+  x as SkipLinksBar,
+  x as default
 };
 //# sourceMappingURL=index7.js.map

package/dist/index70.js

@@ -1,69 +1,148 @@
-import * as n from "react";
-import { getA11yNameAttributes as C } from "./index81.js";
-function M({
-  itemIds: r,
-  tabIndex: v = 0,
-  defaultFocusedId: u,
-  orientation: a = "horizontal",
-  cols: i,
-  loop: k = !0,
-  onFocusChange: f,
-  role: h
-}) {
-  const [c, b] = n.useState(u || r[0] || ""), g = n.useRef({});
-  n.useEffect(() => {
-    if (r.length > 0 && !r.includes(c)) {
-      const t = u || r[0] || "";
-      b(t);
+import a from "react";
+import { Button as f } from "./index4.js";
+import { Badge as j } from "./index10.js";
+import { Icon as q } from "./index6.js";
+import { Link as N } from "./index69.js";
+import { CustomModal as G } from "./index13.js";
+import { useStableId as J } from "./index211.js";
+/* empty css         */
+const K = {
+  lg: {
+    width: "768px",
+    height: "500px"
+  },
+  sm: {
+    width: "656px",
+    height: "384px"
+  }
+}, ea = ({
+  isOpen: u,
+  onClose: n,
+  trigger: c,
+  modalWidth: b,
+  modalHeight: g,
+  variant: x,
+  size: t = "lg",
+  availabilityLabel: k = "Available on ",
+  availabilityBadgeText: r,
+  title: C,
+  description: v,
+  learnMoreLinkText: o,
+  learnMoreHref: l,
+  onLearnMoreClick: s,
+  featureListDesc: m,
+  featuresList: I = [],
+  featureItemIcon: L,
+  mediaContent: S,
+  laterButtonText: _,
+  purchaseButtonText: A,
+  onLaterClick: F,
+  onPurchaseClick: P,
+  className: $ = "",
+  modalContentClassName: D = "",
+  automationId: i = "",
+  id: z
+}) => {
+  const p = J(z, "paywall-title"), B = () => {
+    F?.(), n();
+  }, d = K[t], O = b ?? d.width, w = g ?? d.height, y = x === "with-points" && t === "lg", h = I.map((e) => typeof e == "string" ? {
+    text: e
+  } : {
+    text: e.text,
+    icon: e.icon,
+    href: e.href,
+    external: e.external,
+    onLinkClick: e.onLinkClick
+  }), R = y && h.length > 0, W = L ?? /* @__PURE__ */ a.createElement(q, {
+    name: "info",
+    rotation: "180"
+  }), Y = /* @__PURE__ */ a.createElement("section", {
+    className: `paywall paywall-ctn paywall-ctn--${t} ${$}`,
+    "data-automation-id": i
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card"
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-content"
+  }, r && /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-availability"
+  }, /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-availability-label"
+  }, k), /* @__PURE__ */ a.createElement(j, {
+    label: r,
+    className: "paywall-card-badge",
+    bgColor: "var(--color-yellow-100)",
+    textColor: "var(--color-yellow-700)"
+  })), /* @__PURE__ */ a.createElement("h3", {
+    id: p,
+    className: "paywall-card-title"
+  }, C), /* @__PURE__ */ a.createElement("p", {
+    className: "paywall-card-description"
+  }, v, o && (l || s) && /* @__PURE__ */ a.createElement(N, {
+    href: l ?? "#",
+    label: o,
+    external: !!l,
+    className: "paywall-card-learn-more",
+    onClick: (e) => {
+      l || e.preventDefault(), s?.(e);
     }
-  }, [r, c, u]);
-  const x = n.useCallback((t) => {
-    b((e) => e === t ? e : (f?.(t), t));
-  }, [f]), y = n.useCallback((t) => {
-    const e = g.current[t];
-    e ? e.focus() : (b(t), f?.(t));
-  }, [f]), p = n.useCallback((t, e = 1) => {
-    if (r.length === 0) return;
-    const o = r.indexOf(c), l = Math.max(0, o);
-    let s = l;
-    switch (t) {
-      case "first":
-        s = 0;
-        break;
-      case "last":
-        s = r.length - 1;
-        break;
-      case "prev":
-        k ? s = (l - e + r.length) % r.length : s = Math.max(0, l - e);
-        break;
-      case "next":
-        k ? s = (l + e) % r.length : s = Math.min(r.length - 1, l + e);
-        break;
+  })), y && m && /* @__PURE__ */ a.createElement("p", {
+    className: "paywall-card-features-intro"
+  }, m), R && /* @__PURE__ */ a.createElement("ul", {
+    className: "paywall-card-features-list"
+  }, h.map((e) => /* @__PURE__ */ a.createElement("li", {
+    key: e.text,
+    className: "paywall-card-feature-item"
+  }, /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-feature-icon",
+    "aria-hidden": !0
+  }, e.icon ?? W), /* @__PURE__ */ a.createElement("span", null, e.href || e.onLinkClick ? /* @__PURE__ */ a.createElement(N, {
+    href: e.href ?? "#",
+    label: e.text,
+    external: e.external,
+    onClick: (E) => {
+      e.href || E.preventDefault(), e.onLinkClick?.(E);
     }
-    const w = r[s];
-    w && g.current[w]?.focus();
-  }, [r, c, k]), A = n.useCallback((t) => ({
-    ref: (e) => {
-      g.current[t] = e;
+  }) : e.text)))), /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-actions"
+  }, /* @__PURE__ */ a.createElement(f, {
+    type: "ghost",
+    size: "md",
+    label: _,
+    onClick: B,
+    className: "paywall-card-btn-later"
+  }), /* @__PURE__ */ a.createElement(f, {
+    type: "primary",
+    size: "md",
+    label: A,
+    onClick: P,
+    className: "paywall-card-btn-purchase"
+  }))), /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-media"
+  }, S))), Z = /* @__PURE__ */ a.createElement("div", {
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": p,
+    className: `paywall-modal-content ${D}`,
+    style: {
+      height: w,
+      minHeight: w
+    }
+  }, Y);
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, c && /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-trigger"
+  }, c), /* @__PURE__ */ a.createElement(G, {
+    isOpen: u,
+    onClose: n,
+    onModalClick: () => {
     },
-    tabIndex: c === t ? v : -1,
-    onFocus: () => x(t)
-  }), [c, v, x]), R = n.useCallback((t) => {
-    let e = null, o = 1;
-    t.key === "Home" ? e = "first" : t.key === "End" ? e = "last" : (a !== "vertical" && (t.key === "ArrowLeft" ? e = "prev" : t.key === "ArrowRight" && (e = "next")), !e && a !== "horizontal" && (t.key === "ArrowUp" ? e = "prev" : t.key === "ArrowDown" && (e = "next"), e && i && (o = i))), e && (t.preventDefault(), t.stopPropagation(), p(e, o));
-  }, [a, i, p]), z = n.useCallback((t) => {
-    const e = {};
-    return h && (e.role = h), a === "horizontal" ? e["aria-orientation"] = "horizontal" : a === "vertical" && (e["aria-orientation"] = "vertical"), t && Object.assign(e, C(t)), e;
-  }, [h, a]);
-  return {
-    setFocusedId: x,
-    focusItem: y,
-    handleKeyDown: R,
-    getRovingItemProps: A,
-    getContainerProps: z
-  };
-}
+    renderModalContent: () => Z,
+    width: O,
+    contentClassName: "paywall-modal-content-wrapper",
+    automationId: i
+  }));
+};
 export {
-  M as useRovingFocus
+  ea as Paywall,
+  ea as default
 };
 //# sourceMappingURL=index70.js.map

package/dist/index70.js.map

@@ -1 +1 @@
-{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getA11yNameAttributes, AccessibleNameInput } from './accessibleName';\nexport type { AccessibleNameInput };\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n  /**\n   * Array of item IDs in order\n   */\n  itemIds: string[];\n\n  /**\n   * The tabIndex to apply to the currently focused item in the roving group.\n   * Defaults to 0 \n   */\n  tabIndex?: number;\n\n  /**\n   * Initial focused item ID. Defaults to first item.\n   */\n  defaultFocusedId?: string;\n\n  /**\n   * Orientation for arrow key mapping.\n   * - horizontal: ArrowLeft/ArrowRight\n   * - vertical: ArrowUp/ArrowDown\n   * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n   */\n  orientation?: 'horizontal' | 'vertical' | 'grid';\n\n  /**\n   * Number of columns in the grid. Required when orientation is 'grid'.\n   * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n   */\n  cols?: number;\n\n  /**\n   * Whether navigation wraps around at ends. Defaults to true.\n   */\n  loop?: boolean;\n\n  /**\n   * Callback when focus changes\n   */\n  onFocusChange?: (id: string) => void;\n\n  /**\n   * ARIA role for the container element (e.g. 'grid', 'menu', 'tablist', 'toolbar').\n   * Returned via getContainerProps().\n   */\n  role?: React.AriaRole;\n}\n\nexport interface RovingItemProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n}\n\nexport interface RovingContainerProps {\n  role?: React.AriaRole;\n  'aria-orientation'?: 'horizontal' | 'vertical';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n}\n\nexport interface UseRovingFocusReturn {\n  /**\n   * Set focused item ID manually\n   */\n  setFocusedId: (id: string) => void;\n\n  /**\n   * Imperatively focus a DOM element by id.\n   * If the element exists in refs, focus it immediately.\n   * If not yet in DOM, update state so it gets focus once rendered.\n   */\n  focusItem: (id: string) => void;\n\n  /**\n   * Keyboard handler for arrow/Home/End navigation.\n   * Attach to each item's onKeyDown.\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n\n  /**\n   * Get props for an item in the roving focus group (ref + tabIndex)\n   */\n  getRovingItemProps: (id: string) => RovingItemProps;\n\n  /**\n   * Props to spread on the container element.\n   * Returns role (if provided), aria-orientation (derived from orientation; omitted for grid),\n   * and any accessible name/description attributes passed in.\n   */\n  getContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['tab1', 'tab2', 'tab3'],\n *   orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n *   orientation: 'grid',\n *   cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n  itemIds,\n  tabIndex = 0,\n  defaultFocusedId,\n  orientation = 'horizontal',\n  cols,\n  loop = true,\n  onFocusChange,\n  role\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n  const [focusedId, setFocusedIdState] = React.useState<string>(\n    defaultFocusedId || itemIds[0] || ''\n  );\n\n  const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n  // Sync focusedId if itemIds change and current focusedId is no longer valid\n  React.useEffect(() => {\n    if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n      const newFocusedId = defaultFocusedId || itemIds[0] || '';\n      setFocusedIdState(newFocusedId);\n    }\n  }, [itemIds, focusedId, defaultFocusedId]);\n\n  const setFocusedId = React.useCallback(\n    (id: string) => {\n      setFocusedIdState((prev) => {\n        if (prev === id) return prev;\n        onFocusChange?.(id);\n        return id;\n      });\n    },\n    [onFocusChange]\n  );\n\n  const focusItem = React.useCallback(\n    (id: string) => {\n      const el = itemRefs.current[id];\n      if (el) {\n        el.focus();\n      } else {\n        // element not yet in DOM (e.g. month just changed) — update state so it gets focus once rendered\n        setFocusedIdState(id);\n        onFocusChange?.(id);\n      }\n    },\n    [onFocusChange]\n  );\n\n  const moveFocus = React.useCallback(\n    (direction: RovingDirection, step: number = 1) => {\n      if (itemIds.length === 0) return;\n\n      const currentIdx = itemIds.indexOf(focusedId);\n      const safeIdx = Math.max(0, currentIdx);\n      let nextIdx = safeIdx;\n\n      switch (direction) {\n        case 'first':\n          nextIdx = 0;\n          break;\n        case 'last':\n          nextIdx = itemIds.length - 1;\n          break;\n        case 'prev':\n          if (loop) {\n            nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n          } else {\n            nextIdx = Math.max(0, safeIdx - step);\n          }\n          break;\n        case 'next':\n          if (loop) {\n            nextIdx = (safeIdx + step) % itemIds.length;\n          } else {\n            nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n          }\n          break;\n      }\n\n      const nextId = itemIds[nextIdx];\n      if (!nextId) return;\n\n      itemRefs.current[nextId]?.focus();\n    },\n    [itemIds, focusedId, loop]\n  );\n\n  const getRovingItemProps = React.useCallback(\n    (id: string): RovingItemProps => ({\n      ref: (el: HTMLElement | null) => {\n        itemRefs.current[id] = el;\n      },\n      tabIndex: focusedId === id ? tabIndex : -1,\n      onFocus: () => setFocusedId(id)\n    }),\n    [focusedId, tabIndex, setFocusedId]\n  );\n\n  // Keyboard handler for arrow/Home/End navigation\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let direction: RovingDirection | null = null;\n      let step = 1;\n\n      if (e.key === 'Home') {\n        direction = 'first';\n      } else if (e.key === 'End') {\n        direction = 'last';\n      } else {\n        // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n        if (orientation !== 'vertical') {\n          if (e.key === 'ArrowLeft') direction = 'prev';\n          else if (e.key === 'ArrowRight') direction = 'next';\n        }\n        // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n        if (!direction && orientation !== 'horizontal') {\n          if (e.key === 'ArrowUp') direction = 'prev';\n          else if (e.key === 'ArrowDown') direction = 'next';\n          if (direction && cols) step = cols;\n        }\n      }\n\n      if (direction) {\n        e.preventDefault();\n        e.stopPropagation();\n        moveFocus(direction, step);\n      }\n    },\n    [orientation, cols, moveFocus]\n  );\n\n  const getContainerProps = React.useCallback((nameInput?: AccessibleNameInput): RovingContainerProps => {\n    const props: RovingContainerProps = {};\n    if (role) props.role = role;\n    if (orientation === 'horizontal') props['aria-orientation'] = 'horizontal';\n    else if (orientation === 'vertical') props['aria-orientation'] = 'vertical';\n    // grid: aria-orientation omitted — not applicable for role=\"grid\"\n    if (nameInput) Object.assign(props, getA11yNameAttributes(nameInput));\n    return props;\n  }, [role, orientation]);\n\n  return {\n    setFocusedId,\n    focusItem,\n    handleKeyDown,\n    getRovingItemProps,\n    getContainerProps\n  };\n}\n"],"names":["React","getA11yNameAttributes","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","role","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","prev","focusItem","el","current","focus","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","getRovingItemProps","ref","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation","getContainerProps","nameInput","props","Object","assign"],"mappings":"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"}
+{"version":3,"file":"index70.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n  | string\n  | {\n      text: string;\n      icon?: ReactNode;\n      /** If provided, the feature text becomes a hyperlink navigating to this URL */\n      href?: string;\n      /** If true, opens the href in a new tab (only applicable when href is set) */\n      external?: boolean;\n      /** Click handler — use with href for analytics, or alone for SPA actions */\n      onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n    };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n  lg: { width: '768px', height: '500px' },\n  sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n  isOpen: boolean;\n  onClose: () => void;\n  trigger?: ReactNode;\n  modalWidth?: string;\n  modalHeight?: string;\n  variant: PaywallVariant;\n  size?: PaywallSize;\n  availabilityLabel?: string;\n  availabilityBadgeText?: string;\n  title: string;\n  description: string;\n  learnMoreLinkText?: string;\n  learnMoreHref?: string;\n  onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  featureListDesc?: string;\n  featuresList?: PaywallFeatureItem[];\n  featureItemIcon?: ReactNode;\n  mediaContent?: ReactNode;\n  laterButtonText: string;\n  purchaseButtonText: string;\n  onLaterClick?: () => void;\n  onPurchaseClick?: () => void;\n  className?: string;\n  modalContentClassName?: string;\n  automationId?: string;\n  id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n  isOpen,\n  onClose,\n  trigger,\n  modalWidth,\n  modalHeight,\n  variant,\n  size = 'lg',\n  availabilityLabel = 'Available on ',\n  availabilityBadgeText,\n  title,\n  description,\n  learnMoreLinkText,\n  learnMoreHref,\n  onLearnMoreClick,\n  featureListDesc,\n  featuresList = [],\n  featureItemIcon,\n  mediaContent,\n  laterButtonText,\n  purchaseButtonText,\n  onLaterClick,\n  onPurchaseClick,\n  className = '',\n  modalContentClassName = '',\n  automationId = '',\n  id: providedId,\n}) => {\n  const titleId = useStableId(providedId, 'paywall-title');\n\n  const handleLaterClick = () => {\n    onLaterClick?.();\n    onClose();\n  };\n\n  const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n  const width = modalWidth ?? dimensions.width;\n  const height = modalHeight ?? dimensions.height;\n\n  const withPoints = variant === 'with-points' && size === 'lg';\n  const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n    typeof item === 'string'\n      ? { text: item }\n      : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n  );\n  const showFeatures = withPoints && normalizedFeatures.length > 0;\n  const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n  const content = (\n    <section\n      className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n      data-automation-id={automationId}\n    >\n      <div className=\"paywall-card\">\n        <div className=\"paywall-card-content\">\n          {availabilityBadgeText && (\n            <span className=\"paywall-card-availability\">\n              <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n              <Badge\n                label={availabilityBadgeText}\n                className=\"paywall-card-badge\"\n                bgColor=\"var(--color-yellow-100)\"\n                textColor=\"var(--color-yellow-700)\"\n              />\n            </span>\n          )}\n          <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n          <p className=\"paywall-card-description\">\n            {description}\n            {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n              <Link\n                href={learnMoreHref ?? '#'}\n                label={learnMoreLinkText}\n                external={!!learnMoreHref}\n                className=\"paywall-card-learn-more\"\n                onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n              />\n            )}\n          </p>\n          {withPoints && featureListDesc && (\n            <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n          )}\n          {showFeatures && (\n            <ul className=\"paywall-card-features-list\">\n              {normalizedFeatures.map((item) => (\n                <li key={item.text} className=\"paywall-card-feature-item\">\n                  <span className=\"paywall-card-feature-icon\" aria-hidden>\n                    {item.icon ?? defaultIcon}\n                  </span>\n                  <span>\n                    {item.href || item.onLinkClick ? (\n                      <Link\n                        href={item.href ?? '#'}\n                        label={item.text}\n                        external={item.external}\n                        onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n                      />\n                    ) : (\n                      item.text\n                    )}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n          <div className=\"paywall-card-actions\">\n            <Button\n              type=\"ghost\"\n              size=\"md\"\n              label={laterButtonText}\n              onClick={handleLaterClick}\n              className=\"paywall-card-btn-later\"\n            />\n            <Button\n              type=\"primary\"\n              size=\"md\"\n              label={purchaseButtonText}\n              onClick={onPurchaseClick}\n              className=\"paywall-card-btn-purchase\"\n            />\n          </div>\n        </div>\n        <div className=\"paywall-card-media\">\n          {mediaContent}\n        </div>\n      </div>\n    </section>\n  );\n\n  const modalContent = (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      className={`paywall-modal-content ${modalContentClassName}`}\n      style={{ height, minHeight: height }}\n    >\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n      <CustomModal\n        isOpen={isOpen}\n        onClose={onClose}\n        onModalClick={() => {}}\n        renderModalContent={() => modalContent}\n        width={width}\n        contentClassName=\"paywall-modal-content-wrapper\"\n        automationId={automationId}\n      />\n    </>\n  );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"AA6BA,OAAAA,OAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkF;AAAA,EACtFC,IAAI;AAAA,IAAEC,OAAO;AAAA,IAASC,QAAQ;AAAA,EAAA;AAAA,EAC9BC,IAAI;AAAA,IAAEF,OAAO;AAAA,IAASC,QAAQ;AAAA,EAAA;AAChC,GAgCaE,KAA4BA,CAAC;AAAA,EACxCC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,mBAAAA,IAAoB;AAAA,EACpBC,uBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA,IAAe,CAAA;AAAA,EACfC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,uBAAAA,IAAwB;AAAA,EACxBC,cAAAA,IAAe;AAAA,EACfC,IAAIC;AACN,MAAM;AACJ,QAAMC,IAAUlC,EAAYiC,GAAY,eAAe,GAEjDE,IAAmBA,MAAM;AAC7BR,IAAAA,IAAAA,GACAnB,EAAAA;AAAAA,EACF,GAEM4B,IAAanC,EAAwBY,CAAI,GACzCV,IAAQO,KAAc0B,EAAWjC,OACjCC,IAASO,KAAeyB,EAAWhC,QAEnCiC,IAAazB,MAAY,iBAAiBC,MAAS,MACnDyB,IAAqBhB,EAAaiB,IAAI,CAACC,MAC3C,OAAOA,KAAS,WACZ;AAAA,IAAEC,MAAMD;AAAAA,EAAAA,IACR;AAAA,IAAEC,MAAMD,EAAKC;AAAAA,IAAMC,MAAMF,EAAKE;AAAAA,IAAMC,MAAMH,EAAKG;AAAAA,IAAMC,UAAUJ,EAAKI;AAAAA,IAAUC,aAAaL,EAAKK;AAAAA,EAAAA,CACtG,GACMC,IAAeT,KAAcC,EAAmBS,SAAS,GACzDC,IAAczB,KAAmB0B,gBAAAA,EAAAC,cAACrD,GAAI;AAAA,IAACsD,MAAK;AAAA,IAAOC,UAAS;AAAA,EAAA,CAAM,GAElEC,IACJJ,gBAAAA,EAAAC,cAAA,WAAA;AAAA,IACErB,WAAW,oCAAoChB,CAAI,IAAIgB,CAAS;AAAA,IAChE,sBAAoBE;AAAAA,EAAAA,GAEpBkB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACboB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACZd,KACCkC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GACdoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GAAmCf,CAAwB,GAC3EmC,gBAAAA,EAAAC,cAACtD,GAAK;AAAA,IACJ0D,OAAOvC;AAAAA,IACPc,WAAU;AAAA,IACV0B,SAAQ;AAAA,IACRC,WAAU;AAAA,EAAA,CACX,CACG,GAERP,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIlB,IAAIE;AAAAA,IAASL,WAAU;AAAA,EAAA,GAAsBb,CAAU,GAC3DiC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGrB,WAAU;AAAA,EAAA,GACVZ,GACAC,MAAsBC,KAAiBC,MACtC6B,gBAAAA,EAAAC,cAACpD,GAAI;AAAA,IACH6C,MAAMxB,KAAiB;AAAA,IACvBmC,OAAOpC;AAAAA,IACP0B,UAAU,CAAC,CAACzB;AAAAA,IACZU,WAAU;AAAA,IACV4B,SAAUC,CAAAA,MAAM;AAAE,MAAKvC,KAAiBuC,EAAEC,eAAAA,GAAoBvC,IAAmBsC,CAAC;AAAA,IAAG;AAAA,EAAA,CACtF,CAEF,GACFrB,KAAchB,KACb4B,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGrB,WAAU;AAAA,EAAA,GAA+BR,CAAmB,GAEhEyB,KACCG,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIrB,WAAU;AAAA,EAAA,GACXS,EAAmBC,IAAKC,CAAAA,MACvBS,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIU,KAAKpB,EAAKC;AAAAA,IAAMZ,WAAU;AAAA,EAAA,GAC5BoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,IAA4B,eAAA;AAAA,EAAA,GACzCW,EAAKE,QAAQM,CACV,GACNC,gBAAAA,EAAAC,cAAA,QAAA,MACGV,EAAKG,QAAQH,EAAKK,cACjBI,gBAAAA,EAAAC,cAACpD,GAAI;AAAA,IACH6C,MAAMH,EAAKG,QAAQ;AAAA,IACnBW,OAAOd,EAAKC;AAAAA,IACZG,UAAUJ,EAAKI;AAAAA,IACfa,SAAUC,CAAAA,MAAM;AAAE,MAAKlB,EAAKG,QAAQe,EAAEC,eAAAA,GAAoBnB,EAAKK,cAAca,CAAC;AAAA,IAAG;AAAA,EAAA,CAClF,IAEDlB,EAAKC,IAEH,CACJ,CACL,CACC,GAENQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACboB,gBAAAA,EAAAC,cAACvD,GAAM;AAAA,IACLkE,MAAK;AAAA,IACLhD,MAAK;AAAA,IACLyC,OAAO7B;AAAAA,IACPgC,SAAStB;AAAAA,IACTN,WAAU;AAAA,EAAA,CACX,GACDoB,gBAAAA,EAAAC,cAACvD,GAAM;AAAA,IACLkE,MAAK;AAAA,IACLhD,MAAK;AAAA,IACLyC,OAAO5B;AAAAA,IACP+B,SAAS7B;AAAAA,IACTC,WAAU;AAAA,EAAA,CACX,CACE,CACF,GACLoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACZL,CACE,CACF,CACE,GAGLsC,IACJb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEa,MAAK;AAAA,IACL,cAAW;AAAA,IACX,mBAAiB7B;AAAAA,IACjBL,WAAW,yBAAyBC,CAAqB;AAAA,IACzDkC,OAAO;AAAA,MAAE5D,QAAAA;AAAAA,MAAQ6D,WAAW7D;AAAAA,IAAAA;AAAAA,EAAO,GAElCiD,CACE;AAGP,SACEJ,gBAAAA,EAAAC,cAAAD,EAAAiB,UAAA,MACGzD,KAAWwC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GAAmBpB,CAAc,GAC7DwC,gBAAAA,EAAAC,cAACnD,GAAW;AAAA,IACVQ,QAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACA2D,cAAcA,MAAM;AAAA,IAAC;AAAA,IACrBC,oBAAoBA,MAAMN;AAAAA,IAC1B3D,OAAAA;AAAAA,IACAkE,kBAAiB;AAAA,IACjBtC,cAAAA;AAAAA,EAAAA,CACD,CACD;AAEN;"}

package/dist/index71.js

@@ -1,30 +1,15 @@
-const l = ['button:not([disabled]):not([tabindex="-1"])', '[href]:not([tabindex="-1"])', 'input:not([disabled]):not([tabindex="-1"])', 'select:not([disabled]):not([tabindex="-1"])', 'textarea:not([disabled]):not([tabindex="-1"])', '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]:not([tabindex="-1"])'].join(", "), u = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
-function s({
-  container: e,
-  includeRoles: t = !1,
-  additionalSelectors: r = [],
-  filterHidden: a = !1
+function i({
+  titleId: r,
+  descriptionId: t,
+  isFocusable: a = !1
 }) {
-  if (!e) return [];
-  const d = [t ? u : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
-  return a ? i.filter((n) => {
-    const o = window.getComputedStyle(n);
-    return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
-  }) : i;
-}
-function b(e) {
-  const t = s(e);
-  return t.length > 0 ? t[0] : null;
-}
-function c(e) {
-  const t = s(e);
-  return t.length > 0 ? t[t.length - 1] : null;
+  const e = {
+    role: "region",
+    "aria-labelledby": r
+  };
+  return t && (e["aria-describedby"] = t), a && (e.tabIndex = -1), e;
 }
 export {
-  l as FOCUSABLE_SELECTOR,
-  u as FOCUSABLE_WITH_ROLES_SELECTOR,
-  b as getFirstFocusableElement,
-  s as getFocusableElements,
-  c as getLastFocusableElement
+  i as getRegionAttributes
 };
 //# sourceMappingURL=index71.js.map

package/dist/index71.js.map

@@ -1 +1 @@
-{"version":3,"file":"index71.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'button:not([disabled]):not([tabindex=\"-1\"])',\n  '[href]:not([tabindex=\"-1\"])',\n  'input:not([disabled]):not([tabindex=\"-1\"])',\n  'select:not([disabled]):not([tabindex=\"-1\"])',\n  'textarea:not([disabled]):not([tabindex=\"-1\"])',\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n  '[contenteditable=\"true\"]:not([tabindex=\"-1\"])'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n  FOCUSABLE_SELECTOR,\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n  /**\n   * Container element to search within. If null/undefined, returns empty array.\n   */\n  container: HTMLElement | null;\n  /**\n   * Whether to include role-based focusable elements (menuitem, option, etc.).\n   * Default: false (uses base selector only)\n   */\n  includeRoles?: boolean;\n  /**\n   * Additional custom selectors to include.\n   */\n  additionalSelectors?: string[];\n  /**\n   * Whether to filter out hidden/invisible elements.\n   * Default: false (returns all matching elements regardless of visibility)\n   */\n  filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: menuRef.current,\n *   includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: customWidgetRef.current,\n *   additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n  container,\n  includeRoles = false,\n  additionalSelectors = [],\n  filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n  if (!container) return [];\n\n  const selector = [\n    includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n    ...additionalSelectors\n  ].filter(Boolean).join(', ');\n\n  const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n  if (!filterHidden) return elements;\n\n  // Filter out hidden/invisible elements\n  return elements.filter((el) => {\n    const style = window.getComputedStyle(el);\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0' &&\n      !el.hasAttribute('hidden') &&\n      el.offsetWidth > 0 &&\n      el.offsetHeight > 0\n    );\n  });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length","getLastFocusableElement"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,+CACA,+BACA,8CACA,+CACA,iDACA,mDACA,+CAA+C,EAC/CC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;AAMO,SAASE,EACdH,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAWA,EAAWC,SAAS,CAAC,IAAI;AACrE;"}
+{"version":3,"file":"index71.js","sources":["../src/utils/a11y/regionAttributes.ts"],"sourcesContent":["/**\n * Returns ARIA attributes for a region container element.\n * Used for semantic containers that need role=\"region\" with proper labeling.\n * \n * @param options - Configuration options\n * @param options.titleId - Required. ID of the heading element that labels this region\n * @param options.descriptionId - Optional. ID of the description element\n * @param options.isFocusable - Optional. Whether to make the region focusable (adds tabIndex={-1})\n * @returns Object with region ARIA attributes\n */\nexport function getRegionAttributes({\n  titleId,\n  descriptionId,\n  isFocusable = false\n}: {\n  titleId: string;\n  descriptionId?: string;\n  isFocusable?: boolean;\n}): {\n  role: 'region';\n  'aria-labelledby': string;\n  'aria-describedby'?: string;\n  tabIndex?: number;\n} {\n  const attributes: {\n    role: 'region';\n    'aria-labelledby': string;\n    'aria-describedby'?: string;\n    tabIndex?: number;\n  } = {\n    role: 'region',\n    'aria-labelledby': titleId\n  };\n\n  if (descriptionId) {\n    attributes['aria-describedby'] = descriptionId;\n  }\n\n  if (isFocusable) {\n    attributes.tabIndex = -1;\n  }\n\n  return attributes;\n}\n"],"names":["getRegionAttributes","titleId","descriptionId","isFocusable","attributes","role","tabIndex"],"mappings":"AAUO,SAASA,EAAoB;AAAA,EAClCC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA,IAAc;AAKhB,GAKE;AACA,QAAMC,IAKF;AAAA,IACFC,MAAM;AAAA,IACN,mBAAmBJ;AAAAA,EAAAA;AAGrB,SAAIC,MACFE,EAAW,kBAAkB,IAAIF,IAG/BC,MACFC,EAAWE,WAAW,KAGjBF;AACT;"}

package/dist/index72.js

@@ -1,111 +1,58 @@
-import { useRef as p, useLayoutEffect as a } from "react";
-import { getFirstFocusableElement as A, getFocusableElements as L } from "./index71.js";
-let f = null;
-function F(e) {
-  const n = e.composedPath();
-  for (const s of n)
-    if (s instanceof HTMLElement && s.tabIndex >= 0) {
-      f = s;
+import * as s from "react";
+import { isVirtualClick as x } from "./index83.js";
+function I({
+  disabled: v = !1,
+  loading: l = !1,
+  onClick: u,
+  onKeyboardActivate: n,
+  isNative: o = !0,
+  role: y = "button",
+  tabIndex: C = 0,
+  stopPropagation: c = !1,
+  preventDefault: f = !1,
+  pressed: P,
+  onPointerDown: k,
+  onMouseDown: b,
+  onTouchStart: p
+} = {}) {
+  const e = v || l, a = s.useRef(!1), t = s.useCallback(() => {
+    a.current = !0;
+  }, []), D = s.useCallback((r) => {
+    if (e) return;
+    c && r.stopPropagation(), f && r.preventDefault();
+    const h = x(r.nativeEvent), w = a.current;
+    a.current = !1;
+    const m = h ? "virtual" : w ? "pointer" : "keyboard";
+    if ((m === "keyboard" || m === "virtual") && n) {
+      n(r);
       return;
     }
-}
-function k(e) {
-  (e.key === "Enter" || e.key === " ") && (f = document.activeElement);
-}
-typeof document < "u" && (document.addEventListener("pointerdown", F, !0), document.addEventListener("keydown", k, !0));
-function T() {
-  const e = f;
-  return f = null, e;
-}
-let m = null, l = null;
-function _(e) {
-  l !== null && cancelAnimationFrame(l), m = e, l = requestAnimationFrame(() => {
-    m = null, l = null;
-  });
-}
-function I() {
-  l !== null && (cancelAnimationFrame(l), l = null);
-  const e = m;
-  return m = null, e;
-}
-function w(e, n) {
-  return n === "none" ? null : n === "first" ? A({
-    container: e
-  }) || e : n === "container" ? e : typeof n == "string" ? e.querySelector(n) : n instanceof HTMLElement ? n : null;
-}
-function C({
-  enabled: e,
-  containerRef: n,
-  restoreFocus: s = !0,
-  initialFocus: d = "first",
-  returnFocusRef: g,
-  portalContainerRefs: h
-}) {
-  const u = p(null), E = p(null);
-  return a(() => {
-    if (!e) {
-      if (s && u.current) {
-        const t = u.current;
-        u.current = null, requestAnimationFrame(() => {
-          t.isConnected && t.focus();
-        });
-      }
-      return;
-    }
-    const r = n.current;
-    if (!r) return;
-    const c = g?.current ?? I() ?? f ?? document.activeElement;
-    if (f = null, c?.tagName === "IFRAME") {
-      u.current = null;
-      return;
-    }
-    return u.current = c, r.contains(document.activeElement) || requestAnimationFrame(() => {
-      w(r, d)?.focus();
-    }), () => {
-      if (s && u.current) {
-        const t = u.current;
-        u.current = null, requestAnimationFrame(() => {
-          t.isConnected && t.focus();
-        });
-      }
-    };
-  }, [e, n, s, d]), a(() => {
-    if (!e) return;
-    const r = n.current;
-    if (!r) return;
-    const c = (t) => {
-      if (t.key === "Tab") {
-        const o = L({
-          container: r
-        });
-        if (o.length === 0) {
-          t.preventDefault(), r.focus();
-          return;
-        }
-        const i = o[0], v = o[o.length - 1], y = document.activeElement;
-        t.shiftKey && y === i ? (t.preventDefault(), v.focus()) : !t.shiftKey && y === v && (t.preventDefault(), i.focus());
-      }
-    };
-    return document.addEventListener("keydown", c, !0), () => document.removeEventListener("keydown", c, !0);
-  }, [e, n]), a(() => {
-    if (!e) return;
-    const r = n.current;
-    if (!r) return;
-    const c = (t) => {
-      const o = t.target;
-      o?.tagName !== "IFRAME" && (r.contains(o) ? E.current = o : h?.current?.some((i) => i.current?.contains(o)) || (E.current || A({
-        container: r
-      }) || r).focus());
-    };
-    return document.addEventListener("focusin", c, !0), () => document.removeEventListener("focusin", c, !0);
-  }, [e, n]), {
-    triggerRef: u
+    u?.(r);
+  }, [e, u, n, c, f]), R = s.useCallback((r) => {
+    e || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
+  }, [e]), d = {
+    onPointerDown: k ? (r) => {
+      t(), k(r);
+    } : t,
+    onMouseDown: b ? (r) => {
+      t(), b(r);
+    } : t,
+    onTouchStart: p ? (r) => {
+      t(), p(r);
+    } : t,
+    onClick: D,
+    "aria-disabled": e ? "true" : void 0,
+    "aria-busy": l ? "true" : void 0,
+    "aria-pressed": P
+  };
+  o || (d.onKeyDown = R);
+  const i = {
+    pressProps: d,
+    isDisabled: e
   };
+  return o || (i.role = y, i.tabIndex = e ? -1 : C), i;
 }
 export {
-  I as consumeFocusAnchor,
-  T as consumeLastInteractedElement,
-  _ as setFocusAnchor,
-  C as useFocusTrap
+  I as useAccessiblePress
 };
 //# sourceMappingURL=index72.js.map