@astryxdesign/core 0.1.1 → 0.1.2-canary.3893cd5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (169) hide show
  1. package/CHANGELOG.md +105 -0
  2. package/README.md +119 -1
  3. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
  4. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  5. package/dist/AvatarGroup/AvatarGroupOverflow.js +4 -1
  6. package/dist/Banner/Banner.d.ts +7 -0
  7. package/dist/Banner/Banner.d.ts.map +1 -1
  8. package/dist/Banner/Banner.js +9 -2
  9. package/dist/Button/Button.d.ts +12 -2
  10. package/dist/Button/Button.d.ts.map +1 -1
  11. package/dist/Button/Button.js +51 -13
  12. package/dist/EmptyState/EmptyState.d.ts.map +1 -1
  13. package/dist/EmptyState/EmptyState.js +7 -1
  14. package/dist/HoverCard/HoverCard.d.ts +2 -2
  15. package/dist/HoverCard/HoverCard.d.ts.map +1 -1
  16. package/dist/HoverCard/HoverCard.js +18 -6
  17. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  18. package/dist/HoverCard/useHoverCard.js +7 -3
  19. package/dist/Kbd/Kbd.d.ts.map +1 -1
  20. package/dist/Kbd/Kbd.js +1 -1
  21. package/dist/Layer/anchorName.d.ts +20 -0
  22. package/dist/Layer/anchorName.d.ts.map +1 -0
  23. package/dist/Layer/anchorName.js +36 -0
  24. package/dist/Layer/useLayer.d.ts +19 -0
  25. package/dist/Layer/useLayer.d.ts.map +1 -1
  26. package/dist/Layer/useLayer.js +15 -6
  27. package/dist/Link/Link.d.ts +1 -1
  28. package/dist/Link/Link.js +2 -2
  29. package/dist/Link/LinkProvider.d.ts +1 -0
  30. package/dist/Link/LinkProvider.d.ts.map +1 -1
  31. package/dist/Link/LinkProvider.js +1 -0
  32. package/dist/Markdown/Markdown.d.ts.map +1 -1
  33. package/dist/Markdown/Markdown.js +13 -3
  34. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  35. package/dist/MobileNav/MobileNav.js +13 -0
  36. package/dist/Pagination/Pagination.d.ts.map +1 -1
  37. package/dist/Pagination/Pagination.js +31 -27
  38. package/dist/Slider/Slider.js +2 -2
  39. package/dist/Table/BaseTable.d.ts.map +1 -1
  40. package/dist/Table/BaseTable.js +27 -8
  41. package/dist/Table/Table.d.ts.map +1 -1
  42. package/dist/Table/Table.js +30 -7
  43. package/dist/Table/TableRow.d.ts +6 -1
  44. package/dist/Table/TableRow.d.ts.map +1 -1
  45. package/dist/Table/TableRow.js +15 -7
  46. package/dist/Table/index.d.ts +3 -1
  47. package/dist/Table/index.d.ts.map +1 -1
  48. package/dist/Table/index.js +1 -0
  49. package/dist/Table/plugins/stickyColumns/index.d.ts +3 -0
  50. package/dist/Table/plugins/stickyColumns/index.d.ts.map +1 -0
  51. package/dist/Table/plugins/stickyColumns/index.js +3 -0
  52. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts +25 -0
  53. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -0
  54. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +369 -0
  55. package/dist/Table/types.d.ts +95 -5
  56. package/dist/Table/types.d.ts.map +1 -1
  57. package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
  58. package/dist/Table/useBaseTablePlugins.js +1 -1
  59. package/dist/Text/text.stylex.d.ts +2 -2
  60. package/dist/Text/text.stylex.js +2 -2
  61. package/dist/Timestamp/Timestamp.d.ts +1 -1
  62. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  63. package/dist/Timestamp/Timestamp.js +28 -3
  64. package/dist/ToggleButton/ToggleButton.d.ts +7 -9
  65. package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
  66. package/dist/ToggleButton/ToggleButton.js +34 -57
  67. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  68. package/dist/Tokenizer/Tokenizer.js +1 -1
  69. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  70. package/dist/Tooltip/useTooltip.js +1 -0
  71. package/dist/astryx.css +30 -1
  72. package/dist/astryx.umd.js +147 -0
  73. package/dist/astryx.umd.js.map +7 -0
  74. package/dist/theme/generateThemeRules.js +1 -1
  75. package/dist/theme/syntax/SyntaxTheme.d.ts +1 -1
  76. package/dist/theme/syntax/SyntaxTheme.js +1 -1
  77. package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
  78. package/dist/theme/syntax/defineSyntaxTheme.js +2 -2
  79. package/dist/theme/syntax/presets.d.ts +1 -1
  80. package/dist/theme/syntax/presets.d.ts.map +1 -1
  81. package/dist/theme/syntax/presets.js +1 -1
  82. package/dist/theme/syntax/tokens.d.ts +1 -1
  83. package/dist/theme/syntax/tokens.js +1 -1
  84. package/dist/theme/types.d.ts +1 -1
  85. package/package.json +6 -2
  86. package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -0
  87. package/src/Banner/Banner.doc.mjs +8 -0
  88. package/src/Banner/Banner.test.tsx +16 -7
  89. package/src/Banner/Banner.tsx +9 -2
  90. package/src/Button/Button.doc.mjs +6 -0
  91. package/src/Button/Button.test.tsx +105 -11
  92. package/src/Button/Button.tsx +73 -5
  93. package/src/Chat/ChatComposer.doc.mjs +3 -0
  94. package/src/Chat/ChatComposerDrawer.doc.mjs +12 -0
  95. package/src/CheckboxInput/CheckboxInput.doc.mjs +8 -0
  96. package/src/ClickableCard/ClickableCard.doc.mjs +15 -0
  97. package/src/Dialog/Dialog.doc.mjs +2 -2
  98. package/src/EmptyState/EmptyState.test.tsx +4 -2
  99. package/src/EmptyState/EmptyState.tsx +6 -2
  100. package/src/HoverCard/HoverCard.doc.mjs +3 -0
  101. package/src/HoverCard/HoverCard.test.tsx +189 -2
  102. package/src/HoverCard/HoverCard.tsx +20 -16
  103. package/src/HoverCard/useHoverCard.tsx +13 -10
  104. package/src/Icon/Icon.doc.mjs +8 -0
  105. package/src/Kbd/Kbd.tsx +2 -9
  106. package/src/Layer/anchorName.test.ts +146 -0
  107. package/src/Layer/anchorName.ts +46 -0
  108. package/src/Layer/useLayer.doc.mjs +7 -2
  109. package/src/Layer/useLayer.tsx +33 -9
  110. package/src/Layout/Layout.doc.mjs +1 -1
  111. package/src/Lightbox/Lightbox.doc.mjs +0 -2
  112. package/src/Link/Link.test.tsx +2 -2
  113. package/src/Link/Link.tsx +3 -3
  114. package/src/Link/LinkProvider.tsx +1 -0
  115. package/src/List/List.doc.mjs +7 -0
  116. package/src/Markdown/Markdown.doc.mjs +2 -0
  117. package/src/Markdown/Markdown.test.tsx +17 -26
  118. package/src/Markdown/Markdown.tsx +16 -6
  119. package/src/MobileNav/MobileNav.doc.mjs +8 -8
  120. package/src/MobileNav/MobileNav.tsx +13 -0
  121. package/src/MobileNav/MobileNavReopen.test.tsx +118 -0
  122. package/src/OverflowList/OverflowList.doc.mjs +17 -0
  123. package/src/Pagination/Pagination.test.tsx +137 -13
  124. package/src/Pagination/Pagination.tsx +33 -28
  125. package/src/ProgressBar/ProgressBar.test.tsx +13 -3
  126. package/src/Resizable/Resizable.doc.mjs +1 -1
  127. package/src/Section/Section.doc.mjs +11 -0
  128. package/src/SelectableCard/SelectableCard.doc.mjs +15 -0
  129. package/src/Selector/Selector.doc.mjs +4 -0
  130. package/src/Skeleton/Skeleton.doc.mjs +11 -1
  131. package/src/Slider/Slider.doc.mjs +4 -0
  132. package/src/Slider/Slider.test.tsx +3 -16
  133. package/src/Slider/Slider.tsx +1 -1
  134. package/src/TabList/TabList.doc.mjs +6 -0
  135. package/src/Table/BaseTable.tsx +51 -24
  136. package/src/Table/Table.doc.mjs +12 -0
  137. package/src/Table/Table.test.tsx +29 -30
  138. package/src/Table/Table.tsx +22 -1
  139. package/src/Table/TableRow.tsx +37 -7
  140. package/src/Table/index.ts +3 -0
  141. package/src/Table/plugins/stickyColumns/index.ts +4 -0
  142. package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +163 -0
  143. package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +407 -0
  144. package/src/Table/types.ts +101 -4
  145. package/src/Table/useBaseTablePlugins.ts +1 -0
  146. package/src/Table/useTableColumnResize.doc.mjs +96 -0
  147. package/src/Table/useTableStickyColumns.doc.mjs +59 -0
  148. package/src/Text/Heading.doc.mjs +15 -2
  149. package/src/Text/Text.doc.mjs +7 -1
  150. package/src/Text/text.stylex.ts +2 -2
  151. package/src/Timestamp/Timestamp.doc.mjs +9 -0
  152. package/src/Timestamp/Timestamp.test.tsx +44 -18
  153. package/src/Timestamp/Timestamp.tsx +30 -10
  154. package/src/ToggleButton/ToggleButton.doc.mjs +9 -3
  155. package/src/ToggleButton/ToggleButton.test.tsx +39 -18
  156. package/src/ToggleButton/ToggleButton.tsx +46 -83
  157. package/src/Tokenizer/Tokenizer.tsx +4 -1
  158. package/src/Toolbar/Toolbar.doc.mjs +65 -5
  159. package/src/Tooltip/Tooltip.test.tsx +13 -0
  160. package/src/Tooltip/useTooltip.tsx +2 -3
  161. package/src/hooks/useImageMode.test.ts +133 -0
  162. package/src/theme/derivedVarRegistry.test.ts +4 -0
  163. package/src/theme/generateThemeRules.test.ts +7 -8
  164. package/src/theme/generateThemeRules.ts +1 -1
  165. package/src/theme/syntax/SyntaxTheme.tsx +1 -1
  166. package/src/theme/syntax/defineSyntaxTheme.ts +20 -11
  167. package/src/theme/syntax/presets.ts +5 -2
  168. package/src/theme/syntax/tokens.ts +1 -1
  169. package/src/theme/types.ts +1 -1
package/dist/Kbd/Kbd.js CHANGED
@@ -122,7 +122,7 @@ export function Kbd({
122
122
  "aria-hidden": "true",
123
123
  children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
124
124
  ...{
125
- className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xw8gpjh xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
125
+ className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
126
126
  },
127
127
  children: getKeyDisplay(key, isMac)
128
128
  }, key))
@@ -0,0 +1,20 @@
1
+ /**
2
+ * @file anchorName.ts
3
+ * @input HTMLElement with CSS anchor-name property
4
+ * @output Helpers for managing comma-separated anchor-name lists
5
+ * @position Utility; used by useLayer for multi-anchor support
6
+ *
7
+ * SYNC: When modified, update:
8
+ * - /packages/core/src/Layer/useLayer.tsx (imports from here)
9
+ */
10
+ /**
11
+ * CSS `anchor-name` is a comma-separated list, so multiple layers can anchor to
12
+ * the same element (e.g. several TopNavMegaMenus anchored to one <nav>). These
13
+ * helpers add/remove a single layer's anchor id without clobbering the others —
14
+ * overwriting the whole property would break every sibling layer's positioning.
15
+ */
16
+ export declare function readAnchorNames(el: HTMLElement): string[];
17
+ export declare function writeAnchorNames(el: HTMLElement, names: string[]): void;
18
+ export declare function addAnchorName(el: HTMLElement, name: string): void;
19
+ export declare function removeAnchorName(el: HTMLElement, name: string): void;
20
+ //# sourceMappingURL=anchorName.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"anchorName.d.ts","sourceRoot":"","sources":["../../src/Layer/anchorName.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,wBAAgB,eAAe,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAOzD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAEvE;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAMjE;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAKpE"}
@@ -0,0 +1,36 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ /**
4
+ * @file anchorName.ts
5
+ * @input HTMLElement with CSS anchor-name property
6
+ * @output Helpers for managing comma-separated anchor-name lists
7
+ * @position Utility; used by useLayer for multi-anchor support
8
+ *
9
+ * SYNC: When modified, update:
10
+ * - /packages/core/src/Layer/useLayer.tsx (imports from here)
11
+ */
12
+
13
+ /**
14
+ * CSS `anchor-name` is a comma-separated list, so multiple layers can anchor to
15
+ * the same element (e.g. several TopNavMegaMenus anchored to one <nav>). These
16
+ * helpers add/remove a single layer's anchor id without clobbering the others —
17
+ * overwriting the whole property would break every sibling layer's positioning.
18
+ */
19
+
20
+ export function readAnchorNames(el) {
21
+ const value = el.style.anchorName ?? '';
22
+ return value.split(',').map(name => name.trim()).filter(Boolean);
23
+ }
24
+ export function writeAnchorNames(el, names) {
25
+ el.style.anchorName = names.join(', ');
26
+ }
27
+ export function addAnchorName(el, name) {
28
+ const names = readAnchorNames(el);
29
+ if (!names.includes(name)) {
30
+ names.push(name);
31
+ writeAnchorNames(el, names);
32
+ }
33
+ }
34
+ export function removeAnchorName(el, name) {
35
+ writeAnchorNames(el, readAnchorNames(el).filter(existing => existing !== name));
36
+ }
@@ -24,6 +24,12 @@ export type LayerAlignment = 'start' | 'center' | 'end';
24
24
  export interface ContextRenderProps {
25
25
  placement?: LayerPlacement;
26
26
  alignment?: LayerAlignment;
27
+ /**
28
+ * ARIA role applied to the popover container (e.g. `'tooltip'`). Lets
29
+ * consumers complete the ARIA pattern and gives test tooling a stable,
30
+ * non-hashed selector for the layer.
31
+ */
32
+ role?: string;
27
33
  /**
28
34
  * StyleX styles for the popover container.
29
35
  */
@@ -38,6 +44,19 @@ export interface ContextRenderProps {
38
44
  * Merged after StyleX and anchor positioning styles.
39
45
  */
40
46
  style?: React.CSSProperties;
47
+ /**
48
+ * HTML tag to render the popover container as.
49
+ *
50
+ * Defaults to `'div'`. Pass `'span'` when the layer must render inline-safe
51
+ * markup — e.g. a `HoverCard` wrapping inline text inside a `<p>`. A `<span>`
52
+ * is phrasing content, so it stays put in the DOM tree instead of being
53
+ * reparented out of a paragraph by the HTML parser, which keeps server and
54
+ * client markup identical. The Popover API and CSS anchor positioning work
55
+ * the same on either tag.
56
+ *
57
+ * @default 'div'
58
+ */
59
+ as?: 'div' | 'span';
41
60
  }
42
61
  /**
43
62
  * Render props for fixed mode (manual coordinates)
@@ -1 +1 @@
1
- {"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACrE;AAuCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;AAC3E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC"}
1
+ {"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
@@ -14,6 +14,7 @@
14
14
  */
15
15
  import React, { useCallback, useId, useRef, useState } from 'react';
16
16
  import * as stylex from '@stylexjs/stylex';
17
+ import { addAnchorName, removeAnchorName } from "./anchorName.js";
17
18
  import "../theme/tokens.stylex.js";
18
19
  import { typographyVars } from "../theme/tokens.stylex.js";
19
20
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -160,12 +161,13 @@ export function useLayer(options) {
160
161
 
161
162
  // Ref for trigger element (context mode only)
162
163
  const ref = mode === 'context' ? el => {
163
- // Cleanup previous element
164
- if (triggerRef.current) {
165
- triggerRef.current.style.anchorName = '';
164
+ // Remove only THIS layer's anchor name from the previous element so
165
+ // other layers sharing the same trigger keep their anchors.
166
+ if (triggerRef.current && triggerRef.current !== el) {
167
+ removeAnchorName(triggerRef.current, anchorId);
166
168
  }
167
169
  if (el) {
168
- el.style.anchorName = anchorId;
170
+ addAnchorName(el, anchorId);
169
171
  }
170
172
  triggerRef.current = el;
171
173
  } : undefined;
@@ -202,9 +204,11 @@ export function useLayer(options) {
202
204
  const {
203
205
  placement = 'above',
204
206
  alignment = 'center',
207
+ role,
205
208
  xstyle,
206
209
  className: extraClassName,
207
- style: extraStyle
210
+ style: extraStyle,
211
+ as: Container = 'div'
208
212
  } = props || {};
209
213
 
210
214
  // CSS anchor positioning (dynamic, not in StyleX)
@@ -215,9 +219,14 @@ export function useLayer(options) {
215
219
  };
216
220
  const stylexResult = stylex.props(styles.base, xstyle);
217
221
  const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
218
- return /*#__PURE__*/_jsx("div", {
222
+
223
+ // Render as the requested tag. A `span` keeps the layer phrasing content
224
+ // so it is valid (and stays put on hydration) inside inline contexts like
225
+ // a `<p>`; `div` remains the default for block layers.
226
+ return /*#__PURE__*/_jsx(Container, {
219
227
  ref: popoverRefCallback,
220
228
  id: id,
229
+ role: role,
221
230
  popover: lightDismiss ? 'auto' : 'manual',
222
231
  className: combinedClassName,
223
232
  style: {
@@ -104,7 +104,7 @@ export interface LinkProps extends BaseProps<HTMLAnchorElement | HTMLButtonEleme
104
104
  weight?: TextWeight;
105
105
  /**
106
106
  * Text color. Forwarded to Text.
107
- * @default 'active'
107
+ * @default 'accent'
108
108
  */
109
109
  color?: TextColor;
110
110
  /**
package/dist/Link/Link.js CHANGED
@@ -95,7 +95,7 @@ const linkColorStyles = {
95
95
  kMwMTN: "xv1l7n4",
96
96
  $$css: true
97
97
  },
98
- active: {
98
+ accent: {
99
99
  kMwMTN: "xjse4m1",
100
100
  $$css: true
101
101
  },
@@ -133,7 +133,7 @@ export function Link({
133
133
  type = 'body',
134
134
  size,
135
135
  weight,
136
- color = 'active',
136
+ color = 'accent',
137
137
  display = 'inline',
138
138
  maxLines = 0,
139
139
  children,
@@ -19,6 +19,7 @@
19
19
  * - /packages/core/src/Link/index.ts
20
20
  * - /packages/core/src/Link/Link.doc.mjs
21
21
  * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
22
+ * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
22
23
  */
23
24
  import { type ReactNode } from 'react';
24
25
  import type { LinkComponentType } from './types';
@@ -1 +1 @@
1
- {"version":3,"file":"LinkProvider.d.ts","sourceRoot":"","sources":["../../src/Link/LinkProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;OASG;IACH,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iBAAiB,+BAGpE;yBAHe,YAAY"}
1
+ {"version":3,"file":"LinkProvider.d.ts","sourceRoot":"","sources":["../../src/Link/LinkProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;OASG;IACH,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iBAAiB,+BAGpE;yBAHe,YAAY"}
@@ -23,6 +23,7 @@
23
23
  * - /packages/core/src/Link/index.ts
24
24
  * - /packages/core/src/Link/Link.doc.mjs
25
25
  * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
26
+ * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
26
27
  */
27
28
  import { useMemo } from 'react';
28
29
  import { LinkContext } from "./LinkContext.js";
@@ -1 +1 @@
1
- {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}
@@ -795,7 +795,17 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
795
795
  children: paraChildren
796
796
  }, index);
797
797
  }
798
- return /*#__PURE__*/_jsx("p", {
798
+ // Markdown paragraphs render as <div>, not <p>: inline content can
799
+ // include block-level nodes (images, custom inline components), and a
800
+ // <p> would reparent them, desyncing SSR markup from the hydrated DOM.
801
+ // Block spacing comes from token-based StyleX margins, so the rendered
802
+ // appearance is unchanged. role="paragraph" re-exposes the paragraph
803
+ // role in the accessibility tree (a pure ARIA hint — it does not trigger
804
+ // the parser's block-child reparenting) so prose semantics are preserved
805
+ // without the <p> composition hazard. Consumers who want a real <p>
806
+ // element can still pass components={{paragraph: 'p'}}.
807
+ return /*#__PURE__*/_jsx("div", {
808
+ role: "paragraph",
799
809
  ...stylex.props(spacing, contentWidthValue != null ? dynamicStyles.proseWidth(contentWidthValue) : null, contentAlign !== 'start' ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign]) : null, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
800
810
  children: paraChildren
801
811
  }, index);
@@ -953,12 +963,12 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
953
963
  {
954
964
  const safeSrc = sanitizeUrl(node.src);
955
965
  if (safeSrc == null) {
956
- return /*#__PURE__*/_jsxs("p", {
966
+ return /*#__PURE__*/_jsxs("div", {
957
967
  ...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
958
968
  children: ["[", node.alt, "]"]
959
969
  }, index);
960
970
  }
961
- return /*#__PURE__*/_jsx("p", {
971
+ return /*#__PURE__*/_jsx("div", {
962
972
  ...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
963
973
  children: /*#__PURE__*/_jsx("img", {
964
974
  src: safeSrc,
@@ -1 +1 @@
1
- {"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+BA2JhB;yBAxKe,SAAS"}
1
+ {"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+BAwKhB;yBArLe,SAAS"}
@@ -233,8 +233,21 @@ export function MobileNav({
233
233
  return () => {
234
234
  if (closeTimeoutRef.current) {
235
235
  clearTimeout(closeTimeoutRef.current);
236
+ closeTimeoutRef.current = null;
236
237
  }
237
238
  document.documentElement.style.overflow = '';
239
+ // Close the native dialog on teardown if it's still open. Inside AppShell
240
+ // the drawer is mounted in an <Activity> that switches to mode="hidden"
241
+ // when the drawer closes; React then runs this cleanup (with a stale
242
+ // isOpen) instead of re-running the effect with isOpen=false, so the
243
+ // close branch above never fires. If we leave the <dialog> `open` here,
244
+ // showModal() is skipped on the next open (the dialog is already open in
245
+ // the hidden tree) and the drawer can never be re-opened. Closing it
246
+ // unconditionally on teardown keeps the native dialog state in sync so a
247
+ // subsequent open cleanly calls showModal() again.
248
+ if (dialog.open) {
249
+ dialog.close();
250
+ }
238
251
  };
239
252
  }, [isOpen, side]);
240
253
 
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAqCA,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,QAAa,EACb,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,sCAyOjB;yBA7Pe,UAAU"}
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAqCA,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,QAAa,EACb,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,sCA8OjB;yBAlQe,UAAU"}
@@ -18,7 +18,7 @@
18
18
  * pageSize, pageSizeOptions, onPageSizeChange, variant, siblingCount, size, isDisabled,
19
19
  * label, data-testid, xstyle
20
20
  */
21
- import { useTransition } from 'react';
21
+ import { useOptimistic, useTransition } from 'react';
22
22
  import * as stylex from '@stylexjs/stylex';
23
23
  import "../theme/tokens.stylex.js";
24
24
  import { colorVars, fontWeightVars, sizeVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -173,12 +173,16 @@ export function Pagination({
173
173
  style,
174
174
  ref
175
175
  }) {
176
- const [isPending, startTransition] = useTransition();
176
+ const [, startTransition] = useTransition();
177
+
178
+ // Track the page optimistically so rapid prev/next clicks advance from the
179
+ // in-flight target instead of stalling on the last committed page.
180
+ const [optimisticPage, setOptimisticPage] = useOptimistic(page);
177
181
 
178
182
  // Compute pagination state
179
183
  const computedTotalPages = totalPagesProp ?? (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);
180
- const hasPrevious = page > 1;
181
- const hasNext = computedTotalPages != null ? page < computedTotalPages : hasMore ?? false;
184
+ const hasPrevious = optimisticPage > 1;
185
+ const hasNext = computedTotalPages != null ? optimisticPage < computedTotalPages : hasMore ?? false;
182
186
 
183
187
  // Return null for empty state
184
188
  if (totalItems != null && totalItems <= 0) {
@@ -187,42 +191,42 @@ export function Pagination({
187
191
  if (computedTotalPages != null && computedTotalPages <= 0) {
188
192
  return null;
189
193
  }
194
+
195
+ // Interruptible: re-clicking before the transition settles starts a fresh one
196
+ // with the next optimistic page rather than being dropped, so there is no
197
+ // re-entry guard.
190
198
  const handlePageChange = newPage => {
191
- if (isDisabled || isPending) {
199
+ if (isDisabled) {
192
200
  return;
193
201
  }
202
+ // Keep onChange urgent so controlled page state updates in the same commit
203
+ // as the click; only the optimistic indicator and changeAction defer.
194
204
  onChange(newPage);
195
- if (changeAction) {
196
- startTransition(async () => {
197
- await changeAction(newPage);
198
- });
199
- }
205
+ startTransition(async () => {
206
+ setOptimisticPage(newPage);
207
+ await changeAction?.(newPage);
208
+ });
200
209
  };
201
210
  const handlePrevious = () => {
202
211
  if (hasPrevious) {
203
- handlePageChange(page - 1);
212
+ handlePageChange(optimisticPage - 1);
204
213
  }
205
214
  };
206
215
  const handleNext = () => {
207
216
  if (hasNext) {
208
- handlePageChange(page + 1);
217
+ handlePageChange(optimisticPage + 1);
209
218
  }
210
219
  };
211
220
  const handlePageSizeChange = value => {
212
221
  const newSize = Number(value);
213
222
  onPageSizeChange?.(newSize);
214
- // Reset to page 1 when page size changes
215
- onChange(1);
216
- if (changeAction) {
217
- startTransition(async () => {
218
- await changeAction(1);
219
- });
220
- }
223
+ // Reset to page 1 when page size changes.
224
+ handlePageChange(1);
221
225
  };
222
226
 
223
227
  // Item range for count display
224
- const rangeStart = (page - 1) * pageSize + 1;
225
- const rangeEnd = totalItems != null ? Math.min(page * pageSize, totalItems) : page * pageSize;
228
+ const rangeStart = (optimisticPage - 1) * pageSize + 1;
229
+ const rangeEnd = totalItems != null ? Math.min(optimisticPage * pageSize, totalItems) : optimisticPage * pageSize;
226
230
  const buttonSize = size === 'sm' ? 'sm' : 'md';
227
231
  const isSm = size === 'sm';
228
232
  const renderIndicator = () => {
@@ -232,7 +236,7 @@ export function Pagination({
232
236
  if (computedTotalPages == null) {
233
237
  return null;
234
238
  }
235
- const pageRange = generatePageRange(page, computedTotalPages, siblingCount);
239
+ const pageRange = generatePageRange(optimisticPage, computedTotalPages, siblingCount);
236
240
  return /*#__PURE__*/_jsx(_Fragment, {
237
241
  children: pageRange.map((item, index) => {
238
242
  if (item === '...') {
@@ -251,7 +255,7 @@ export function Pagination({
251
255
  children: "\u2026"
252
256
  }, `ellipsis-${previousPage}-${nextPage}`);
253
257
  }
254
- const isActive = item === page;
258
+ const isActive = item === optimisticPage;
255
259
  return /*#__PURE__*/_jsx(Button, {
256
260
  label: `Go to page ${item}`,
257
261
  "aria-label": `Go to page ${item}`,
@@ -296,7 +300,7 @@ export function Pagination({
296
300
  type: "body",
297
301
  size: "sm",
298
302
  color: "secondary",
299
- children: `Page ${page} of ${computedTotalPages}`
303
+ children: `Page ${optimisticPage} of ${computedTotalPages}`
300
304
  })
301
305
  });
302
306
  }
@@ -316,11 +320,11 @@ export function Pagination({
316
320
  }, (_, i) => /*#__PURE__*/_jsx("button", {
317
321
  type: "button",
318
322
  "aria-label": `Go to page ${i + 1}`,
319
- "aria-current": i + 1 === page ? 'page' : undefined,
323
+ "aria-current": i + 1 === optimisticPage ? 'page' : undefined,
320
324
  onClick: () => handlePageChange(i + 1),
321
325
  disabled: isDisabled,
322
326
  ...mergeProps(themeProps('pagination-dot', {
323
- active: i + 1 === page ? 'active' : null,
327
+ active: i + 1 === optimisticPage ? 'active' : null,
324
328
  size
325
329
  }), {
326
330
  0: {
@@ -347,7 +351,7 @@ export function Pagination({
347
351
  7: {
348
352
  className: "xc342km xng3xce x1717udv x16rqkct x15406qy xuedmi6 xlr8y92 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1wu31ai xcenk2v x1ewilqj x1h6gzvc xbyyjgo"
349
353
  }
350
- }[!!isSm << 2 | !!(i + 1 === page) << 1 | !!isDisabled << 0])
354
+ }[!!isSm << 2 | !!(i + 1 === optimisticPage) << 1 | !!isDisabled << 0])
351
355
  }, i + 1))
352
356
  });
353
357
  }
@@ -484,10 +484,10 @@ export function Slider({
484
484
  orientation
485
485
  }), {
486
486
  0: {
487
- className: "x10l6tqk xwmxj5m xjspbzw x13vifvy x1ey2m1c x51ohtg x1nrll8i xuuh30"
487
+ className: "x10l6tqk xdsb6cv xjspbzw x13vifvy x1ey2m1c x51ohtg x1nrll8i xuuh30"
488
488
  },
489
489
  1: {
490
- className: "x10l6tqk xwmxj5m xjspbzw xu96u03 x3m8u43 xqu0tyb xwa60dl x1cb1t30"
490
+ className: "x10l6tqk xdsb6cv xjspbzw xu96u03 x3m8u43 xqu0tyb xwa60dl x1cb1t30"
491
491
  }
492
492
  }[!!isHorizontal << 0])
493
493
  }), /*#__PURE__*/_jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAWf,MAAM,SAAS,CAAC;AA6fjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CACzC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAEjC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
1
+ {"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAyhBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
@@ -105,7 +105,7 @@ function TableRowInner({
105
105
  CellComponent
106
106
  }) {
107
107
  // Build cells first
108
- const cells = columns.map(col => {
108
+ const cells = columns.map((col, columnIndex) => {
109
109
  // Apply column alignment to body cells
110
110
  const initialCellHtmlProps = {};
111
111
  if (col.align) {
@@ -113,10 +113,13 @@ function TableRowInner({
113
113
  textAlign: col.align
114
114
  };
115
115
  }
116
- const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, {
116
+ const initialBodyCellRenderProps = {
117
117
  htmlProps: initialCellHtmlProps,
118
- styles: []
119
- }, col, item);
118
+ styles: [],
119
+ columnIndex,
120
+ columns: columns
121
+ };
122
+ const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, initialBodyCellRenderProps, col, item, columnIndex, columns);
120
123
  const isDefaultRenderer = !col.renderCell;
121
124
  const rawContent = isDefaultRenderer ? defaultCellRenderer(item, col.key) : col.renderCell?.(item) ?? null;
122
125
 
@@ -265,7 +268,7 @@ function BaseTableInner({
265
268
  });
266
269
 
267
270
  // --- Plugin pipeline: header cells ---
268
- const headerCells = resolvedColumns.map(col => {
271
+ const headerCells = resolvedColumns.map((col, columnIndex) => {
269
272
  const headerContent = col.header ?? col.key;
270
273
 
271
274
  // Build initial htmlProps with column alignment if specified
@@ -277,11 +280,14 @@ function BaseTableInner({
277
280
  textAlign: col.align
278
281
  };
279
282
  }
280
- const cellRenderProps = applyPlugins(plugins, p => p.transformHeaderCell, {
283
+ const initialHeaderRenderProps = {
281
284
  htmlProps: initialHeaderHtmlProps,
282
285
  styles: [],
283
- content: headerContent
284
- }, col);
286
+ content: headerContent,
287
+ columnIndex,
288
+ columns: resolvedColumns
289
+ };
290
+ const cellRenderProps = applyPlugins(plugins, p => p.transformHeaderCell, initialHeaderRenderProps, col, columnIndex, resolvedColumns);
285
291
 
286
292
  // Apply pre-computed column width styles on the <th>.
287
293
  // With table-layout: fixed, header cell sizing controls column widths.
@@ -348,6 +354,7 @@ function BaseTableInner({
348
354
  children: [hasColumns && /*#__PURE__*/_jsx(TableHeader, {
349
355
  children: /*#__PURE__*/_jsx(RowComponent, {
350
356
  ...headerRowRenderProps.htmlProps,
357
+ isHeaderRow: true,
351
358
  xstyle: headerRowRenderProps.styles,
352
359
  children: headerRowRenderProps.children
353
360
  })
@@ -381,8 +388,20 @@ function BaseTableInner({
381
388
  // when columns exceed the container width. This wrapper sits between
382
389
  // the <table> and transformTableContext, so plugin chrome (pagination,
383
390
  // toolbars) renders outside the scroll area.
391
+ //
392
+ // Before rendering the wrapper, run the plugin `transformScrollWrapper`
393
+ // pipeline so plugins can attach a ref to the scroll container (scroll-aware
394
+ // sticky shadows, virtualization) and inject before/after chrome.
384
395
  if (ScrollWrapper) {
396
+ const scrollWrapperRenderProps = applyPlugins(plugins, p => p.transformScrollWrapper, {
397
+ htmlProps: {},
398
+ styles: []
399
+ });
385
400
  tableElement = /*#__PURE__*/_jsx(ScrollWrapper, {
401
+ htmlProps: scrollWrapperRenderProps.htmlProps,
402
+ styles: scrollWrapperRenderProps.styles,
403
+ beforeTable: scrollWrapperRenderProps.beforeTable,
404
+ afterTable: scrollWrapperRenderProps.afterTable,
386
405
  children: tableElement
387
406
  });
388
407
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAMjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AA6HD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAOjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AAiJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}
@@ -41,7 +41,7 @@ import { themeProps } from "../utils/themeProps.js";
41
41
  *
42
42
  * @template T - The row data type
43
43
  */
44
- import { jsx as _jsx } from "react/jsx-runtime";
44
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
45
45
  // =============================================================================
46
46
  // StyleX Styles (table-level only; cell/row/header styles owned by components)
47
47
  // =============================================================================
@@ -53,14 +53,37 @@ const tableStyles = {
53
53
  $$css: true
54
54
  }
55
55
  };
56
+ const scrollWrapperStyles = {
57
+ base: {
58
+ kXHlph: "xw2csxc",
59
+ kuHK5b: "x5lxg6s",
60
+ $$css: true
61
+ },
62
+ containerBleed: {
63
+ keTefX: "xojxgvx",
64
+ k71WvV: "x1fcf3bl",
65
+ kzqmXN: "xx6qvi6",
66
+ keoZOQ: "xkibk3",
67
+ k1K539: "xlayyun",
68
+ $$css: true
69
+ }
70
+ };
56
71
  function TableScrollWrapper({
57
- children
72
+ children,
73
+ htmlProps,
74
+ styles: pluginStyles,
75
+ beforeTable,
76
+ afterTable
58
77
  }) {
59
- return /*#__PURE__*/_jsx("div", {
60
- ...mergeProps(themeProps('table-scroll-wrapper'), {
61
- className: "xw2csxc x5lxg6s xojxgvx x1fcf3bl xx6qvi6 xkibk3 xlayyun"
62
- }),
63
- children: children
78
+ const {
79
+ ref,
80
+ ...restHtmlProps
81
+ } = htmlProps ?? {};
82
+ return /*#__PURE__*/_jsxs("div", {
83
+ ref: ref,
84
+ ...restHtmlProps,
85
+ ...mergeProps(themeProps('table-scroll-wrapper'), stylex.props(scrollWrapperStyles.base, scrollWrapperStyles.containerBleed, ...(pluginStyles ?? []))),
86
+ children: [beforeTable, children, afterTable]
64
87
  });
65
88
  }
66
89
 
@@ -22,6 +22,11 @@ export interface TableRowProps extends BaseProps<HTMLTableRowElement> {
22
22
  * Must be a `stylex.create()` value — not an inline style object.
23
23
  */
24
24
  xstyle?: StyleXStyles[];
25
+ /**
26
+ * Whether this row is the header row. Header rows skip the striped/hover
27
+ * row styling (which is only meant for body rows).
28
+ */
29
+ isHeaderRow?: boolean;
25
30
  }
26
31
  /**
27
32
  * TableRow — a `<tr>` wrapper for children/streaming mode.
@@ -39,7 +44,7 @@ export interface TableRowProps extends BaseProps<HTMLTableRowElement> {
39
44
  * </Table>
40
45
  * ```
41
46
  */
42
- export declare function TableRow({ children, xstyle, ref, ...props }: TableRowProps): import("react").JSX.Element;
47
+ export declare function TableRow({ children, xstyle, ref, isHeaderRow, ...props }: TableRowProps): import("react").JSX.Element;
43
48
  export declare namespace TableRow {
44
49
  var displayName: string;
45
50
  }