@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/dist/Outline/Outline.js

@@ -27,7 +27,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useScrollSpy } from "./useScrollSpy.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -200,7 +200,7 @@ export function Outline({
       block: 'start'
     });
   };
-  return /*#__PURE__*/_jsxs("nav", {
+  return /*#__PURE__*/_jsxDEV("nav", {
     ...props,
     ref: mergeRefs(rootRef, ref),
     "aria-label": label,
@@ -208,19 +208,19 @@ export function Outline({
     ...mergeProps(themeProps('outline', {
       density
     }), stylex.props(styles.root, xstyle), className, style),
-    children: [/*#__PURE__*/_jsx("ul", {
+    children: [/*#__PURE__*/_jsxDEV("ul", {
       ...{
         className: "x78zum5 xdt5ytf x1lsbc85 x1ghz6dp x1717udv xe8uvvx x98rzlu xeuugli"
       },
       role: "list",
       children: items.map(item => {
         const isActive = item.id === resolvedActiveId;
-        return /*#__PURE__*/_jsx("li", {
+        return /*#__PURE__*/_jsxDEV("li", {
           ...{
             className: "x3ct3a4 x1ghz6dp x1717udv"
           },
           role: "listitem",
-          children: /*#__PURE__*/_jsx(LinkComponent, {
+          children: /*#__PURE__*/_jsxDEV(LinkComponent, {
             href: `#${item.id}`,
             "aria-current": isActive ? 'true' : undefined,
             onClick: handleClick(item.id),
@@ -228,31 +228,31 @@ export function Outline({
               active: isActive ? 'active' : null,
               level: item.level
             }), stylex.props(styles.link, densityStyles[density], getIndentStyle(item.level), isActive && styles.activeLink, isActive && styles.activeAnchor)),
-            children: /*#__PURE__*/_jsx("span", {
+            children: /*#__PURE__*/_jsxDEV("span", {
               ...{
                 className: "xb3r6kr xlyipyv xuxw1ft"
               },
               children: item.label
-            })
-          })
-        }, item.id);
+            }, void 0, false)
+          }, void 0, false)
+        }, item.id, false);
       })
-    }), /*#__PURE__*/_jsx("div", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x1n2onr6 xfo62xy x2lah0s x1clqncf"
       },
       "aria-hidden": "true",
-      children: /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x10l6tqk x13vifvy x1ey2m1c x1o0tod xfo62xy x1m4xfpy xjspbzw x47corl"
         }
-      })
-    }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
       ...mergeProps(themeProps('outline-indicator'), {
         className: "x10l6tqk x1o0tod xfo62xy xowkcby xjspbzw x47corl x1vjfegm x1tsffl5 x1ltwjim x1qjb5ga x1xuz8iz xkvfbh3 xlr8y92"
       }),
       "aria-hidden": "true"
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 Outline.displayName = 'Outline';

package/dist/OverflowList/OverflowList.js

@@ -23,7 +23,7 @@ import { useOverflow } from "../hooks/useOverflow.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     k1xSpc: "x78zum5",
@@ -178,26 +178,26 @@ export function OverflowList({
   // Render a placeholder for measurement — uses all items as overflow
   // so the indicator renders at its maximum possible width.
   const measureIndicator = overflowRenderer?.(allItems);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: measureRef,
       "aria-hidden": "true",
       inert: true,
       ...stylex.props(styles.measureContainer, gapStyles[gap]),
-      children: [childArray, measureIndicator != null && /*#__PURE__*/_jsx("div", {
+      children: [childArray, measureIndicator != null && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x3nfvp2"
         },
         children: measureIndicator
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
       ref: mergeRefs(ref, containerRef),
       ...mergeProps(themeProps('overflow-list'), stylex.props(styles.container, gapStyles[gap], observeParent && hasOverflow && styles.fillParent, xstyle), className, style),
       ...props,
       children: [collapseFrom === 'start' && hasOverflow && overflowRenderer?.(overflowItems), visibleItems.map(({
         child
       }) => child), collapseFrom === 'end' && hasOverflow && overflowRenderer?.(overflowItems)]
-    })]
-  });
+    }, void 0, true)]
+  }, void 0, true);
 }
 OverflowList.displayName = 'OverflowList';

package/dist/Overlay/Overlay.js

@@ -20,7 +20,7 @@ import { useOverlay } from "./useOverlay.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { overlayScope, overlayContainerStyles } from "./overlay.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Overlay — renders content on top of media with a scrim background
  * and automatic theme inversion.
@@ -79,12 +79,12 @@ export function Overlay({
       el.style.borderRadius = radius;
     }
   }, []);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: mergeRefs(ref, overlay.containerRef),
     ...mergeProps(themeProps('overlay'), stylex.props(overlayScope, overlayContainerStyles.root, xstyle), className, style),
     onClick: overlay.containerProps.onClick,
     onMouseUp: overlay.containerProps.onMouseUp,
     children: [children, overlay.element]
-  });
+  }, void 0, true);
 }
 Overlay.displayName = 'Overlay';

package/dist/Overlay/OverlayScrim.js

@@ -23,7 +23,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Types (re-exported from index.ts for consumers)
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -214,16 +214,16 @@ export function OverlayScrim({
 }) {
   const isControlled = isOpen !== undefined;
   const themeMode = scrim === 'dark' ? 'dark' : scrim === 'light' ? 'light' : null;
-  const content = themeMode ? /*#__PURE__*/_jsx(MediaTheme, {
+  const content = themeMode ? /*#__PURE__*/_jsxDEV(MediaTheme, {
     mode: themeMode,
     children: children
-  }) : children;
+  }, void 0, false) : children;
   const visibility = isControlled ? getControlledVisibility(isOpen, position) : getShowOnVisibility(showOn, position);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('overlay-scrim', {
       position
     }), stylex.props(styles.base, positionMap[position], alignMap[align], scrim === 'dark' && styles.scrimDark, scrim === 'light' && styles.scrimLight, visibility.base, visibility.bottom, visibility.top)),
     inert: isControlled && !isOpen ? true : undefined,
     children: content
-  });
+  }, void 0, false);
 }

package/dist/Overlay/useOverlay.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { overlayScope, overlayContainerStyles } from "./overlay.markers.stylex.js";
 import { OverlayScrim } from "./OverlayScrim.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Touch detection
 // =============================================================================
@@ -117,14 +117,14 @@ export function useOverlay({
   }), [resolved.className, resolved.style, needsTouchToggle, onClick, onMouseUp]);
 
   // Render function — matches tooltip's renderTooltip pattern
-  const renderOverlay = useCallback(children => /*#__PURE__*/_jsx(OverlayScrim, {
+  const renderOverlay = useCallback(children => /*#__PURE__*/_jsxDEV(OverlayScrim, {
     scrim: scrim,
     position: position,
     align: align,
     showOn: showOn,
     isOpen: effectiveIsOpen,
     children: children
-  }), [scrim, position, align, showOn, effectiveIsOpen]);
+  }, void 0, false), [scrim, position, align, showOn, effectiveIsOpen]);
 
   // Pre-rendered element when content is provided
   const element = content != null ? renderOverlay(content) : null;

package/dist/Pagination/Pagination.d.ts

@@ -116,7 +116,7 @@ export declare function generatePageRange(currentPage: number, totalPages: numbe
  * />
  * ```
  */
-export declare function Pagination({ page, onChange, changeAction, totalItems, totalPages: totalPagesProp, hasMore, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, variant, siblingCount, size, isDisabled, label, 'data-testid': testId, xstyle, className, style, ref, }: PaginationProps): import("react").JSX.Element | null;
+export declare function Pagination({ page, onChange, changeAction, totalItems, totalPages: totalPagesProp, hasMore, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, variant, siblingCount, size, isDisabled, label, 'data-testid': testId, xstyle, className, style, ref, ...rest }: PaginationProps): import("react").JSX.Element | null;
 export declare namespace Pagination {
     var displayName: string;
 }

package/dist/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiGD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAoB,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,eAAe,sCAiQjB;yBArRe,UAAU"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiGD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAoB,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAqTjB;yBA1Ue,UAAU"}

package/dist/Pagination/Pagination.js

@@ -27,6 +27,7 @@ import { Icon } from "../Icon/index.js";
 import { Selector } from "../Selector/index.js";
 import { Text } from "../Text/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useListFocus } from "../hooks/useListFocus.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -53,7 +54,7 @@ import { themeProps } from "../utils/themeProps.js";
  */
 
 /** Size of the pagination controls. */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -172,7 +173,8 @@ export function Pagination({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   const [, startTransition] = useTransition();
 
@@ -192,6 +194,21 @@ export function Pagination({
   // in-flight target instead of stalling on the last committed page.
   const [optimisticPage, setOptimisticPage] = useOptimistic(page);
 
+  // Roving-tabindex + arrow/Home/End keyboard nav for the dots variant, owned
+  // by the shared useListFocus primitive (mirrors SegmentedControl). It stamps a
+  // single tab stop across the dots and moves focus horizontally; selection
+  // follows focus via handleDotsFocus so arrow keys move the active page.
+  const {
+    listRef: dotsListRef,
+    handleKeyDown: handleDotsKeyDown,
+    handleFocus: handleDotsRovingFocus
+  } = useListFocus({
+    itemSelector: 'button',
+    hasRovingTabIndex: true,
+    wrap: true,
+    orientation: 'horizontal'
+  });
+
   // Compute pagination state
   const computedTotalPages = totalPagesProp ?? (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);
   const hasPrevious = optimisticPage > 1;
@@ -221,6 +238,26 @@ export function Pagination({
       await changeAction?.(newPage);
     });
   };
+
+  // Selection-follows-focus for the dots (APG radiogroup pattern): useListFocus
+  // only *moves* focus, so when focus lands on a dot -- via arrow/Home/End, or a
+  // click that focuses it -- we select that dot's page. handleDotsRovingFocus
+  // keeps the roving tab stop in sync. The current page is skipped so tabbing
+  // into the group is a no-op.
+  const handleDotsFocus = e => {
+    handleDotsRovingFocus(e);
+    if (isDisabled) {
+      return;
+    }
+    const focused = e.target?.closest('button[data-page]');
+    if (!focused) {
+      return;
+    }
+    const nextPage = Number(focused.dataset.page);
+    if (Number.isFinite(nextPage) && nextPage !== optimisticPage) {
+      handlePageChange(nextPage);
+    }
+  };
   const handlePrevious = () => {
     if (hasPrevious) {
       handlePageChange(optimisticPage - 1);
@@ -251,12 +288,12 @@ export function Pagination({
             return null;
           }
           const pageRange = generatePageRange(optimisticPage, computedTotalPages, siblingCount);
-          return /*#__PURE__*/_jsx(_Fragment, {
+          return /*#__PURE__*/_jsxDEV(_Fragment, {
             children: pageRange.map((item, index) => {
               if (item === '...') {
                 const previousPage = pageRange[index - 1];
                 const nextPage = pageRange[index + 1];
-                return /*#__PURE__*/_jsx("span", {
+                return /*#__PURE__*/_jsxDEV("span", {
                   "aria-hidden": "true",
                   ...{
                     0: {
@@ -267,10 +304,10 @@ export function Pagination({
                     }
                   }[!!isSm << 0],
                   children: "\u2026"
-                }, `ellipsis-${previousPage}-${nextPage}`);
+                }, `ellipsis-${previousPage}-${nextPage}`, false);
               }
               const isActive = item === optimisticPage;
-              return /*#__PURE__*/_jsx(Button, {
+              return /*#__PURE__*/_jsxDEV(Button, {
                 label: `Go to page ${item}`,
                 "aria-label": `Go to page ${item}`,
                 variant: "ghost",
@@ -280,117 +317,133 @@ export function Pagination({
                 "aria-current": isActive ? 'page' : undefined,
                 xstyle: isActive && styles.activePage,
                 children: item
-              }, item);
+              }, item, false);
             })
-          });
+          }, void 0, false);
         }
       case 'count':
         {
           if (totalItems == null) {
             return null;
           }
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x78zum5 x6s0dn4 xuxw1ft"
             },
-            children: /*#__PURE__*/_jsx(Text, {
+            children: /*#__PURE__*/_jsxDEV(Text, {
               type: "body",
               size: "sm",
               color: "secondary",
               children: `${rangeStart}\u2013${rangeEnd} of ${totalItems}`
-            })
-          });
+            }, void 0, false)
+          }, void 0, false);
         }
       case 'compact':
         {
           if (computedTotalPages == null) {
             return null;
           }
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x78zum5 x6s0dn4 xuxw1ft"
             },
-            children: /*#__PURE__*/_jsx(Text, {
+            children: /*#__PURE__*/_jsxDEV(Text, {
               type: "body",
               size: "sm",
               color: "secondary",
               children: `Page ${optimisticPage} of ${computedTotalPages}`
-            })
-          });
+            }, void 0, false)
+          }, void 0, false);
         }
       case 'dots':
         {
           if (computedTotalPages == null) {
             return null;
           }
-          return /*#__PURE__*/_jsx("div", {
+          return /*#__PURE__*/_jsxDEV("div", {
+            ref: dotsListRef,
             ...{
               className: "x78zum5 x6s0dn4 xzye2dw"
             },
             role: "group",
             "aria-label": "Page indicators",
+            onKeyDown: handleDotsKeyDown,
+            onFocus: handleDotsFocus,
             children: Array.from({
               length: computedTotalPages
-            }, (_, i) => /*#__PURE__*/_jsx("button", {
-              type: "button",
-              "aria-label": `Go to page ${i + 1}`,
-              "aria-current": i + 1 === optimisticPage ? 'page' : undefined,
-              onClick: () => handlePageChange(i + 1),
-              disabled: isDisabled,
-              ...mergeProps(themeProps('pagination-dot', {
-                active: i + 1 === optimisticPage ? 'active' : null,
-                size
-              }), {
-                0: {
-                  className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x17x4s8c x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
-                },
-                4: {
-                  className: "xc342km xng3xce x1717udv x16rqkct x17x4s8c x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v"
-                },
-                2: {
-                  className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1ewilqj"
-                },
-                6: {
-                  className: "xc342km xng3xce x1717udv x16rqkct x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1ewilqj"
-                },
-                1: {
-                  className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x17x4s8c x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1h6gzvc xbyyjgo"
-                },
-                5: {
-                  className: "xc342km xng3xce x1717udv x16rqkct x17x4s8c x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1h6gzvc xbyyjgo"
-                },
-                3: {
-                  className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1ewilqj x1h6gzvc xbyyjgo"
-                },
-                7: {
-                  className: "xc342km xng3xce x1717udv x16rqkct x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1ewilqj x1h6gzvc xbyyjgo"
-                }
-              }[!!isSm << 2 | !!(i + 1 === optimisticPage) << 1 | !!isDisabled << 0])
-            }, i + 1))
-          });
+            }, (_, i) => {
+              const isActive = i + 1 === optimisticPage;
+              return /*#__PURE__*/_jsxDEV("button", {
+                type: "button",
+                "data-page": i + 1,
+                "aria-label": `Go to page ${i + 1}`,
+                "aria-current": isActive ? 'page' : undefined
+                // The active dot is the single roving tab stop; useListFocus
+                // maintains it as focus and the active page move.
+                ,
+                tabIndex: isActive ? 0 : -1
+                // Selection is driven by focus (handleDotsFocus); clicking only
+                // needs to focus the dot, which some browsers (Safari) skip for
+                // buttons, so focus it explicitly.
+                ,
+                onClick: e => e.currentTarget.focus(),
+                disabled: isDisabled,
+                ...mergeProps(themeProps('pagination-dot', {
+                  active: isActive ? 'active' : null,
+                  size
+                }), {
+                  0: {
+                    className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x17x4s8c x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+                  },
+                  4: {
+                    className: "xc342km xng3xce x1717udv x16rqkct x17x4s8c x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v"
+                  },
+                  2: {
+                    className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1ewilqj"
+                  },
+                  6: {
+                    className: "xc342km xng3xce x1717udv x16rqkct x1ypdohk x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1ewilqj"
+                  },
+                  1: {
+                    className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x17x4s8c x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1h6gzvc xbyyjgo"
+                  },
+                  5: {
+                    className: "xc342km xng3xce x1717udv x16rqkct x17x4s8c x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1h6gzvc xbyyjgo"
+                  },
+                  3: {
+                    className: "x1f0dxl5 xoqw5ej xc342km xng3xce x1717udv x16rqkct x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1ewilqj x1h6gzvc xbyyjgo"
+                  },
+                  7: {
+                    className: "xc342km xng3xce x1717udv x16rqkct x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1ewilqj x1h6gzvc xbyyjgo"
+                  }
+                }[!!isSm << 2 | !!isActive << 1 | !!isDisabled << 0])
+              }, i + 1, false);
+            })
+          }, void 0, false);
         }
       case 'none':
       default:
         return null;
     }
   };
-  return /*#__PURE__*/_jsxs("nav", {
+  return /*#__PURE__*/_jsxDEV("nav", {
     ref: ref,
-    "aria-label": label,
-    "data-testid": testId,
     ...mergeProps(themeProps('pagination', {
       variant,
       size
     }), stylex.props(styles.root, xstyle), className, style),
-    children: [pageSizeOptions != null && pageSizeOptions.length > 0 && /*#__PURE__*/_jsx("div", {
+    ...rest,
+    "aria-label": label,
+    "data-testid": testId,
+    children: [pageSizeOptions != null && pageSizeOptions.length > 0 && /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 x6s0dn4 x1txdalj"
       },
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x1dmp6jm"
         },
-        children: /*#__PURE__*/_jsx(Selector, {
+        children: /*#__PURE__*/_jsxDEV(Selector, {
           label: "Items per page",
           isLabelHidden: true,
           options: pageSizeOptions.map(opt => String(opt)),
@@ -398,36 +451,36 @@ export function Pagination({
           onChange: handlePageSizeChange,
           size: buttonSize,
           isDisabled: isDisabled
-        })
-      })
-    }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 x6s0dn4 xzye2dw"
       },
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/*#__PURE__*/_jsxDEV(Button, {
         label: "Go to previous page",
         variant: "ghost",
         size: buttonSize,
-        icon: /*#__PURE__*/_jsx(Icon, {
+        icon: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "chevronLeft",
           size: isSm ? 'sm' : 'md'
-        }),
+        }, void 0, false),
         onClick: handlePrevious,
         isDisabled: isDisabled || !hasPrevious,
         isIconOnly: true
-      }), renderIndicator(), /*#__PURE__*/_jsx(Button, {
+      }, void 0, false), renderIndicator(), /*#__PURE__*/_jsxDEV(Button, {
         label: "Go to next page",
         variant: "ghost",
         size: buttonSize,
-        icon: /*#__PURE__*/_jsx(Icon, {
+        icon: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "chevronRight",
           size: isSm ? 'sm' : 'md'
-        }),
+        }, void 0, false),
         onClick: handleNext,
         isDisabled: isDisabled || !hasNext,
         isIconOnly: true
-      })]
-    })]
-  });
+      }, void 0, false)]
+    }, void 0, true)]
+  }, void 0, true);
 }
 Pagination.displayName = 'Pagination';

package/dist/Popover/Popover.js

@@ -30,7 +30,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Helpers
 // =============================================================================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const BUTTON_SELECTOR = 'button, [role="button"]';
 
 /**
@@ -296,17 +296,17 @@ export function Popover({
 
   // Sibling mode: render only the popover (no wrapper needed)
   if (anchorRef && children == null) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: popover.render(/*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: popover.render(/*#__PURE__*/_jsxDEV("div", {
         "data-testid": testId,
         ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
-      }), {
+      }, void 0, false), {
         placement,
         alignment,
         xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
       })
-    });
+    }, void 0, false);
   }
 
   // Render prop mode: children is a function — pass trigger props directly
@@ -319,39 +319,39 @@ export function Popover({
       'aria-expanded': popover.isOpen,
       'aria-controls': popover.id
     };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [children(triggerProps), popover.render(/*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [children(triggerProps), popover.render(/*#__PURE__*/_jsxDEV("div", {
         "data-testid": testId,
         ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
         children: content
-      }), {
+      }, void 0, false), {
         placement,
         alignment,
         xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
       })]
-    });
+    }, void 0, true);
   }
 
   // Automatic mode: wrap children in context + anchor wrapper
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(InteractiveRoleContext, {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV(InteractiveRoleContext, {
       value: "button",
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ref: wrapperRef,
         ...{
           className: "x3nfvp2"
         },
         children: children
-      })
-    }), popover.render(/*#__PURE__*/_jsx("div", {
+      }, void 0, false)
+    }, void 0, false), popover.render(/*#__PURE__*/_jsxDEV("div", {
       "data-testid": testId,
       ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
       children: content
-    }), {
+    }, void 0, false), {
       placement,
       alignment,
       xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
     })]
-  });
+  }, void 0, true);
 }
 Popover.displayName = 'Popover';