@astryxdesign/core 0.1.1-canary.a514b99 → 0.1.1-canary.ac73e47

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 (117) hide show
  1. package/README.md +119 -1
  2. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
  3. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  4. package/dist/AvatarGroup/AvatarGroupOverflow.js +4 -1
  5. package/dist/Banner/Banner.d.ts +7 -0
  6. package/dist/Banner/Banner.d.ts.map +1 -1
  7. package/dist/Banner/Banner.js +9 -2
  8. package/dist/Button/Button.d.ts +12 -2
  9. package/dist/Button/Button.d.ts.map +1 -1
  10. package/dist/Button/Button.js +51 -13
  11. package/dist/EmptyState/EmptyState.d.ts.map +1 -1
  12. package/dist/EmptyState/EmptyState.js +7 -1
  13. package/dist/HoverCard/HoverCard.d.ts +2 -2
  14. package/dist/HoverCard/HoverCard.d.ts.map +1 -1
  15. package/dist/HoverCard/HoverCard.js +18 -6
  16. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  17. package/dist/HoverCard/useHoverCard.js +6 -3
  18. package/dist/Kbd/Kbd.d.ts.map +1 -1
  19. package/dist/Kbd/Kbd.js +1 -1
  20. package/dist/Layer/useLayer.d.ts +13 -0
  21. package/dist/Layer/useLayer.d.ts.map +1 -1
  22. package/dist/Layer/useLayer.js +7 -2
  23. package/dist/Markdown/Markdown.d.ts.map +1 -1
  24. package/dist/Markdown/Markdown.js +13 -3
  25. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  26. package/dist/MobileNav/MobileNav.js +13 -0
  27. package/dist/Pagination/Pagination.d.ts.map +1 -1
  28. package/dist/Pagination/Pagination.js +31 -27
  29. package/dist/Slider/Slider.js +2 -2
  30. package/dist/Table/BaseTable.d.ts.map +1 -1
  31. package/dist/Table/BaseTable.js +26 -8
  32. package/dist/Table/Table.d.ts.map +1 -1
  33. package/dist/Table/Table.js +30 -7
  34. package/dist/Table/TableRow.d.ts.map +1 -1
  35. package/dist/Table/TableRow.js +3 -0
  36. package/dist/Table/index.d.ts +3 -1
  37. package/dist/Table/index.d.ts.map +1 -1
  38. package/dist/Table/index.js +1 -0
  39. package/dist/Table/plugins/stickyColumns/index.d.ts +3 -0
  40. package/dist/Table/plugins/stickyColumns/index.d.ts.map +1 -0
  41. package/dist/Table/plugins/stickyColumns/index.js +3 -0
  42. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts +25 -0
  43. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -0
  44. package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +369 -0
  45. package/dist/Table/types.d.ts +90 -5
  46. package/dist/Table/types.d.ts.map +1 -1
  47. package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
  48. package/dist/Table/useBaseTablePlugins.js +1 -1
  49. package/dist/Timestamp/Timestamp.d.ts +1 -1
  50. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  51. package/dist/Timestamp/Timestamp.js +28 -3
  52. package/dist/ToggleButton/ToggleButton.d.ts +7 -9
  53. package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
  54. package/dist/ToggleButton/ToggleButton.js +34 -57
  55. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  56. package/dist/Tokenizer/Tokenizer.js +1 -1
  57. package/dist/astryx.css +30 -1
  58. package/dist/astryx.umd.js +147 -0
  59. package/dist/astryx.umd.js.map +7 -0
  60. package/package.json +6 -2
  61. package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -0
  62. package/src/Banner/Banner.doc.mjs +8 -0
  63. package/src/Banner/Banner.test.tsx +16 -7
  64. package/src/Banner/Banner.tsx +9 -2
  65. package/src/Button/Button.doc.mjs +6 -0
  66. package/src/Button/Button.test.tsx +105 -11
  67. package/src/Button/Button.tsx +73 -5
  68. package/src/CheckboxInput/CheckboxInput.doc.mjs +8 -0
  69. package/src/EmptyState/EmptyState.test.tsx +4 -2
  70. package/src/EmptyState/EmptyState.tsx +6 -2
  71. package/src/HoverCard/HoverCard.doc.mjs +3 -0
  72. package/src/HoverCard/HoverCard.test.tsx +178 -2
  73. package/src/HoverCard/HoverCard.tsx +20 -16
  74. package/src/HoverCard/useHoverCard.tsx +12 -10
  75. package/src/Icon/Icon.doc.mjs +8 -0
  76. package/src/Kbd/Kbd.tsx +2 -9
  77. package/src/Layer/useLayer.doc.mjs +7 -2
  78. package/src/Layer/useLayer.tsx +19 -2
  79. package/src/Layout/Layout.doc.mjs +1 -1
  80. package/src/Lightbox/Lightbox.doc.mjs +0 -2
  81. package/src/List/List.doc.mjs +7 -0
  82. package/src/Markdown/Markdown.doc.mjs +2 -0
  83. package/src/Markdown/Markdown.test.tsx +17 -26
  84. package/src/Markdown/Markdown.tsx +16 -6
  85. package/src/MobileNav/MobileNav.doc.mjs +8 -8
  86. package/src/MobileNav/MobileNav.tsx +13 -0
  87. package/src/MobileNav/MobileNavReopen.test.tsx +118 -0
  88. package/src/Pagination/Pagination.test.tsx +137 -13
  89. package/src/Pagination/Pagination.tsx +33 -28
  90. package/src/Resizable/Resizable.doc.mjs +1 -1
  91. package/src/Section/Section.doc.mjs +11 -0
  92. package/src/Selector/Selector.doc.mjs +4 -0
  93. package/src/Skeleton/Skeleton.doc.mjs +11 -1
  94. package/src/Slider/Slider.doc.mjs +4 -0
  95. package/src/Slider/Slider.test.tsx +3 -16
  96. package/src/Slider/Slider.tsx +1 -1
  97. package/src/Table/BaseTable.tsx +50 -24
  98. package/src/Table/Table.doc.mjs +12 -0
  99. package/src/Table/Table.tsx +22 -1
  100. package/src/Table/TableRow.tsx +20 -0
  101. package/src/Table/index.ts +3 -0
  102. package/src/Table/plugins/stickyColumns/index.ts +4 -0
  103. package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +163 -0
  104. package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +407 -0
  105. package/src/Table/types.ts +96 -4
  106. package/src/Table/useBaseTablePlugins.ts +1 -0
  107. package/src/Table/useTableColumnResize.doc.mjs +96 -0
  108. package/src/Table/useTableStickyColumns.doc.mjs +59 -0
  109. package/src/Text/Heading.doc.mjs +13 -0
  110. package/src/Timestamp/Timestamp.test.tsx +44 -18
  111. package/src/Timestamp/Timestamp.tsx +30 -10
  112. package/src/ToggleButton/ToggleButton.doc.mjs +3 -3
  113. package/src/ToggleButton/ToggleButton.test.tsx +39 -18
  114. package/src/ToggleButton/ToggleButton.tsx +46 -83
  115. package/src/Tokenizer/Tokenizer.tsx +4 -1
  116. package/src/Toolbar/Toolbar.doc.mjs +2 -2
  117. package/src/theme/derivedVarRegistry.test.ts +4 -0
package/README.md CHANGED
@@ -70,7 +70,57 @@ npm install @astryxdesign/core @astryxdesign/theme-neutral
70
70
 
71
71
  Then pick your setup below based on your framework and styling approach.
72
72
 
73
- ### Next.js + Tailwind (simplest)
73
+ ### Next.js (simplest)
74
+
75
+ The fastest way to get started. No build plugins, no PostCSS, no Babel config — Astryx ships pre-built CSS and JS, so you import three stylesheets (order matters) and wrap your app in a theme provider.
76
+
77
+ **`src/app/globals.css`**
78
+
79
+ ```css
80
+ @import '@astryxdesign/core/reset.css';
81
+ @import '@astryxdesign/core/astryx.css';
82
+ @import '@astryxdesign/theme-neutral/theme.css';
83
+ ```
84
+
85
+ The import order maps to the layer cascade: `reset.css` (`@layer reset`) → `astryx.css` component styles (`@layer astryx-base`) → `theme.css` token overrides (`@layer astryx-theme`).
86
+
87
+ **`src/app/providers.tsx`**
88
+
89
+ ```tsx
90
+ 'use client';
91
+
92
+ import Link from 'next/link';
93
+ import {Theme} from '@astryxdesign/core/theme';
94
+ import {LinkProvider} from '@astryxdesign/core/Link';
95
+ import {neutralTheme} from '@astryxdesign/theme-neutral/built';
96
+
97
+ export function Providers({children}: {children: React.ReactNode}) {
98
+ return (
99
+ <Theme theme={neutralTheme}>
100
+ <LinkProvider component={Link}>{children}</LinkProvider>
101
+ </Theme>
102
+ );
103
+ }
104
+ ```
105
+
106
+ **`src/app/layout.tsx`**
107
+
108
+ ```tsx
109
+ import './globals.css';
110
+ import {Providers} from './providers';
111
+
112
+ export default function RootLayout({children}: {children: React.ReactNode}) {
113
+ return (
114
+ <html lang="en">
115
+ <body>
116
+ <Providers>{children}</Providers>
117
+ </body>
118
+ </html>
119
+ );
120
+ }
121
+ ```
122
+
123
+ ### Next.js + Tailwind
74
124
 
75
125
  No build plugins needed; XDS ships pre-built CSS that works alongside Tailwind.
76
126
 
@@ -183,3 +233,71 @@ npm install @astryxdesign/core @astryxdesign/theme-neutral
183
233
  ```
184
234
 
185
235
  Same CSS imports and providers as above. No build plugins needed; XDS ships pre-built.
236
+
237
+ ### No build step (CDN)
238
+
239
+ For prototypes, embeds, or pages without a bundler, load the components straight
240
+ from a public CDN. Two delivery options ship in the published package:
241
+
242
+ **1. UMD global (`<script>` tag).** A single pre-bundled file exposes every export
243
+ on `window.Astryx`. React and ReactDOM are peer dependencies — load them yourself.
244
+ Pair it with the precompiled stylesheet.
245
+
246
+ ```html
247
+ <!doctype html>
248
+ <html data-astryx-theme="neutral">
249
+ <head>
250
+ <link
251
+ rel="stylesheet"
252
+ href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/src/reset.css" />
253
+ <link
254
+ rel="stylesheet"
255
+ href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css" />
256
+ </head>
257
+ <body>
258
+ <div id="root"></div>
259
+ <script
260
+ crossorigin
261
+ src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
262
+ <script
263
+ crossorigin
264
+ src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
265
+ <script src="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.umd.js"></script>
266
+ <script>
267
+ const {Button, Card} = window.Astryx;
268
+ const e = React.createElement;
269
+ ReactDOM.createRoot(document.getElementById('root')).render(
270
+ e(Card, null, e(Button, {variant: 'primary'}, 'Hello from a CDN')),
271
+ );
272
+ </script>
273
+ </body>
274
+ </html>
275
+ ```
276
+
277
+ **2. ES modules (no UMD, no globals).** Use [esm.sh](https://esm.sh), which rewrites
278
+ bare imports to browser-resolvable URLs. An import map keeps a single React instance.
279
+
280
+ ```html
281
+ <link
282
+ rel="stylesheet"
283
+ href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css" />
284
+ <script type="importmap">
285
+ {
286
+ "imports": {
287
+ "react": "https://esm.sh/react@19",
288
+ "react-dom/client": "https://esm.sh/react-dom@19/client",
289
+ "@astryxdesign/core": "https://esm.sh/@astryxdesign/core?external=react,react-dom"
290
+ }
291
+ }
292
+ </script>
293
+ <script type="module">
294
+ import {createRoot} from 'react-dom/client';
295
+ import {Button} from '@astryxdesign/core';
296
+ // ...render as usual
297
+ </script>
298
+ ```
299
+
300
+ > Pin a version in production (e.g. `@astryxdesign/core@0.1.1`) — unversioned CDN URLs
301
+ > resolve to the latest release and are cached aggressively. The raw ESM entry
302
+ > (`dist/index.js`) uses bare `react` imports and will **not** run from a plain
303
+ > `<script src>`; use the UMD global or esm.sh as shown above.
package/dist/AvatarGroup/AvatarGroupOverflow.d.ts CHANGED
@@ -41,7 +41,7 @@ export interface AvatarGroupOverflowProps extends Omit<BaseProps<HTMLElement>, '
41
41
  * </AvatarGroup>
42
42
  * ```
43
43
  */
44
- export declare function AvatarGroupOverflow({ ref, count, onClick, children, xstyle, className, style, }: AvatarGroupOverflowProps): ReactNode;
44
+ export declare function AvatarGroupOverflow({ ref, count, onClick, children, xstyle, className, style, ...rest }: AvatarGroupOverflowProps): ReactNode;
45
45
  export declare namespace AvatarGroupOverflow {
46
46
  var displayName: string;
47
47
  }
package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,wBAAwB,GAAG,SAAS,CAsDtC;yBA9De,mBAAmB"}
1
+ {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAwDtC;yBAjEe,mBAAmB"}
package/dist/AvatarGroup/AvatarGroupOverflow.js CHANGED
@@ -100,7 +100,8 @@ export function AvatarGroupOverflow({
100
100
  children,
101
101
  xstyle,
102
102
  className,
103
- style
103
+ style,
104
+ ...rest
104
105
  }) {
105
106
  const group = useAvatarGroup();
106
107
  const numericSize = group?.numericSize ?? 36;
@@ -113,6 +114,7 @@ export function AvatarGroupOverflow({
113
114
  type: "button",
114
115
  onClick: onClick,
115
116
  "aria-label": label,
117
+ ...rest,
116
118
  ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
117
119
  children: content
118
120
  });
@@ -120,6 +122,7 @@ export function AvatarGroupOverflow({
120
122
  return /*#__PURE__*/_jsx("span", {
121
123
  ref: ref,
122
124
  "aria-label": label,
125
+ ...rest,
123
126
  ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
124
127
  children: content
125
128
  });
package/dist/Banner/Banner.d.ts CHANGED
@@ -12,6 +12,13 @@
12
12
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
13
13
  * - When children are provided, a collapse/expand toggle button appears in the end area
14
14
  *
15
+ * Title and description render as <div> (not <p>): they accept arbitrary
16
+ * ReactNode content, and <p> cannot legally contain block-level children
17
+ * (the HTML parser reparents them, desyncing SSR markup from the hydrated
18
+ * DOM). Using <div> keeps these slots composable with any content. Their
19
+ * StyleX styles set margin: 0 and explicit typography, so the rendered
20
+ * appearance is identical to the previous <p>.
21
+ *
15
22
  * SYNC: When modified, update these files to stay in sync:
16
23
  * - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
17
24
  * - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
package/dist/Banner/Banner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Hb;yBA1Ie,MAAM"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Hb;yBA1Ie,MAAM"}
package/dist/Banner/Banner.js CHANGED
@@ -16,6 +16,13 @@
16
16
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
17
17
  * - When children are provided, a collapse/expand toggle button appears in the end area
18
18
  *
19
+ * Title and description render as <div> (not <p>): they accept arbitrary
20
+ * ReactNode content, and <p> cannot legally contain block-level children
21
+ * (the HTML parser reparents them, desyncing SSR markup from the hydrated
22
+ * DOM). Using <div> keeps these slots composable with any content. Their
23
+ * StyleX styles set margin: 0 and explicit typography, so the rendered
24
+ * appearance is identical to the previous <p>.
25
+ *
19
26
  * SYNC: When modified, update these files to stay in sync:
20
27
  * - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
21
28
  * - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
@@ -291,12 +298,12 @@ export function Banner({
291
298
  ...{
292
299
  className: "x78zum5 xdt5ytf xxhr3t x98rzlu xeuugli"
293
300
  },
294
- children: [/*#__PURE__*/_jsx("p", {
301
+ children: [/*#__PURE__*/_jsx("div", {
295
302
  ...{
296
303
  className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0"
297
304
  },
298
305
  children: title
299
- }), description != null && /*#__PURE__*/_jsx("p", {
306
+ }), description != null && /*#__PURE__*/_jsx("div", {
300
307
  ...{
301
308
  className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4"
302
309
  },
package/dist/Button/Button.d.ts CHANGED
@@ -11,7 +11,7 @@
11
11
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
12
12
  * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
13
13
  *
14
- * Last synced props: label, variant, size, isDisabled, isLoading, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
14
+ * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
15
15
  */
16
16
  import { type ReactNode } from 'react';
17
17
  import type { BaseProps } from '../BaseProps';
@@ -93,6 +93,16 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
93
93
  * @default false
94
94
  */
95
95
  isLoading?: boolean;
96
+ /**
97
+ * Keep the button interactive while a `clickAction` is pending. The loading
98
+ * state still renders the spinner and `aria-busy`, but the button is not
99
+ * disabled and the in-flight action is not deduped — so a re-click lands and
100
+ * interrupts the previous action with a fresh one. Use for interruptible
101
+ * actions (e.g. a toggle whose action can be re-triggered before the previous
102
+ * one settles), not fire-once actions (submit/save/pay).
103
+ * @default false
104
+ */
105
+ isInterruptible?: boolean;
96
106
  /**
97
107
  * Click handler. For async actions that should show a loading state,
98
108
  * use `clickAction` instead.
@@ -175,7 +185,7 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
175
185
  * <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
176
186
  * ```
177
187
  */
178
- export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, clickAction, icon, isIconOnly, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
188
+ export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
179
189
  export declare namespace Button {
180
190
  var displayName: string;
181
191
  }
package/dist/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAoGrD,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAsGH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,IAAI,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAmFD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CAkLzB;yBAxMe,MAAM"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
package/dist/Button/Button.js CHANGED
@@ -15,7 +15,7 @@
15
15
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
16
16
  * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
17
17
  *
18
- * Last synced props: label, variant, size, isDisabled, isLoading, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
18
+ * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
19
19
  */
20
20
  import { useRef, useTransition } from 'react';
21
21
  import * as stylex from '@stylexjs/stylex';
@@ -88,6 +88,10 @@ const styles = {
88
88
  kmuXW: "x2lah0s",
89
89
  $$css: true
90
90
  },
91
+ contentWrapper: {
92
+ k1xSpc: "xjp7ctv",
93
+ $$css: true
94
+ },
91
95
  link: {
92
96
  kybGjl: "x1hl2dhg",
93
97
  $$css: true
@@ -202,6 +206,27 @@ const variants = {
202
206
  * Button size type derived from the sizeStyles StyleX object
203
207
  */
204
208
 
209
+ const spinnerReveal = "x18re5ia-B";
210
+ const contentHide = "x188b6p3-B";
211
+
212
+ // Hold the loading swap for a short delay so a fast action (e.g. clickAction)
213
+ // that settles within the delay never flashes a spinner. The spinner fade-in
214
+ // and the content hide share the same delay so the button never shows an empty
215
+ // frame in between. Reduced motion is instant.
216
+ const SPINNER_DELAY = durationVars['--duration-medium-min'];
217
+ const loadingStyles = {
218
+ hiddenContent: {
219
+ kMwMTN: "x19co3pv",
220
+ $$css: true
221
+ },
222
+ hiddenContentDelayed: {
223
+ kKVMdj: "x1ffowhz",
224
+ k44tkh: "xjlvqhv",
225
+ kWV6AL: "x10e4vud",
226
+ kKxzle: "x17yabm6 x14q22ui",
227
+ $$css: true
228
+ }
229
+ };
205
230
  const groupStyles = {
206
231
  horizontal: {
207
232
  krdFHd: "x15mokao x8eehn2",
@@ -265,6 +290,7 @@ export function Button({
265
290
  type = 'button',
266
291
  isDisabled = false,
267
292
  isLoading = false,
293
+ isInterruptible = false,
268
294
  clickAction,
269
295
  icon,
270
296
  isIconOnly = false,
@@ -284,10 +310,22 @@ export function Button({
284
310
  const size = useSize(sizeProp, 'md');
285
311
  const buttonGroup = useButtonGroup();
286
312
  const [isPending, startTransition] = useTransition();
313
+ // clickAction is normally fire-once (submit/save/pay), so a same-tick
314
+ // double-click must dedupe — which neither isPending nor useOptimistic do.
315
+ // Hence the ref guard. Interruptible callers (e.g. ToggleButton) opt out so a
316
+ // re-click can land and interrupt the in-flight action with a fresh one.
287
317
  const actionInFlightRef = useRef(false);
288
318
  const isLoadingState = isLoading || isPending;
319
+ // Delay the spinner reveal for action-driven loading (clickAction's own
320
+ // transition) so a fast action that settles within the delay does not flash
321
+ // a spinner. Interruptible loading is delayed too, so rapid re-clicks settle
322
+ // before any spinner shows. Explicit isLoading-only stays immediate, since
323
+ // the consumer is deliberately showing it.
324
+ const delaySpinner = isPending || isInterruptible;
289
325
  const groupDisabled = buttonGroup?.isDisabled ?? false;
290
- const buttonDisabled = isDisabled || groupDisabled || isLoadingState;
326
+ // When interruptible, the loading state drives the spinner and aria-busy but
327
+ // not disabled, so clicks keep landing and can interrupt the in-flight action.
328
+ const buttonDisabled = isDisabled || groupDisabled || isLoadingState && !isInterruptible;
291
329
  // isIconOnly prop is the source of truth for icon-only rendering.
292
330
  // When false (default), label is always rendered as visible text.
293
331
 
@@ -301,7 +339,9 @@ export function Button({
301
339
  // for keyboard users to reach the tooltip. Otherwise use native disabled.
302
340
  const useAriaDisabled = tooltip != null && buttonDisabled;
303
341
  const handleClick = e => {
304
- if (buttonDisabled || actionInFlightRef.current) {
342
+ // The ref guard dedupes fire-once actions. Interruptible callers skip it so
343
+ // a re-click while pending starts a fresh action that interrupts the prior.
344
+ if (buttonDisabled || actionInFlightRef.current && !isInterruptible) {
305
345
  e.preventDefault();
306
346
  return;
307
347
  }
@@ -344,22 +384,20 @@ export function Button({
344
384
  const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
345
385
  children: [isLoadingState && /*#__PURE__*/_jsx("span", {
346
386
  ...{
347
- className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1"
348
- },
387
+ 0: {
388
+ className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1"
389
+ },
390
+ 1: {
391
+ className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1 xqcmdr3 xb2rp9n xskzprw x17yabm6 x14q22ui"
392
+ }
393
+ }[!!delaySpinner << 0],
349
394
  "aria-hidden": "true",
350
395
  children: /*#__PURE__*/_jsx(Spinner, {
351
396
  size: "sm",
352
397
  shade: "inherit"
353
398
  })
354
399
  }), /*#__PURE__*/_jsxs("span", {
355
- ...{
356
- 0: {
357
- className: "xjp7ctv"
358
- },
359
- 1: {
360
- className: "xjp7ctv x19co3pv"
361
- }
362
- }[!!isLoadingState << 0],
400
+ ...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent)),
363
401
  "aria-hidden": isLoadingState || undefined,
364
402
  children: [icon && /*#__PURE__*/_jsx("span", {
365
403
  ...stylex.props(styles.iconWrapper, iconSizeStyles[size]),
package/dist/EmptyState/EmptyState.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0CjB;yBAtDe,UAAU"}
1
+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8CjB;yBA1De,UAAU"}
package/dist/EmptyState/EmptyState.js CHANGED
@@ -96,7 +96,13 @@ export function EmptyState({
96
96
  1: {
97
97
  className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
98
98
  }
99
- }[!!isCompact << 0], title), description != null && /*#__PURE__*/_jsx("p", {
99
+ }[!!isCompact << 0], title), description != null &&
100
+ /*#__PURE__*/
101
+ // Rendered as <div> (not <p>): description accepts ReactNode and a
102
+ // <p> cannot legally contain block children, which causes hydration
103
+ // mismatches. The StyleX style sets margin: 0, so appearance is
104
+ // unchanged.
105
+ _jsx("div", {
100
106
  ...{
101
107
  0: {
102
108
  className: "x1ghz6dp xjb2p0i xjm74w1 x1sodnla xw6l6zx xv1l7n4"
package/dist/HoverCard/HoverCard.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * @file HoverCard.tsx
3
- * @input Uses React, ReactDOM createPortal, useHoverCard hook
3
+ * @input Uses React, useHoverCard hook
4
4
  * @output Exports HoverCard component for hover/focus triggered layers
5
- * @position Layer component; uses inline-safe trigger wrapper and portals floating layer
5
+ * @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
6
6
  *
7
7
  * SYNC: When modified, update these files to stay in sync:
8
8
  * - /packages/core/src/HoverCard/HoverCard.test.tsx
package/dist/HoverCard/HoverCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAc,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAsG/B;yBAtHe,SAAS"}
1
+ {"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAgH/B;yBAhIe,SAAS"}
package/dist/HoverCard/HoverCard.js CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  /**
6
6
  * @file HoverCard.tsx
7
- * @input Uses React, ReactDOM createPortal, useHoverCard hook
7
+ * @input Uses React, useHoverCard hook
8
8
  * @output Exports HoverCard component for hover/focus triggered layers
9
- * @position Layer component; uses inline-safe trigger wrapper and portals floating layer
9
+ * @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
10
10
  *
11
11
  * SYNC: When modified, update these files to stay in sync:
12
12
  * - /packages/core/src/HoverCard/HoverCard.test.tsx
@@ -14,8 +14,7 @@
14
14
  * - /apps/storybook/stories/HoverCard.stories.tsx
15
15
  * - /packages/cli/templates/blocks/components/HoverCard/ (showcase blocks)
16
16
  */
17
- import React, { useCallback, useRef } from 'react';
18
- import { createPortal } from 'react-dom';
17
+ import { useCallback, useRef } from 'react';
19
18
  import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
20
19
  import * as stylex from '@stylexjs/stylex';
21
20
  import { useHoverCard } from "./useHoverCard.js";
@@ -125,11 +124,24 @@ export function HoverCard({
125
124
  }
126
125
  };
127
126
  }, [textOnly, hoverCard.ref, hoverCard.describedBy]);
128
- const renderedHoverCard = typeof document !== 'undefined' ? /*#__PURE__*/createPortal(hoverCard.renderHoverCard(content, {
127
+
128
+ // Render the floating layer inline, in the same place on the server and the
129
+ // client. The layer is a `popover` element opened via the Popover API, so the
130
+ // browser promotes it to the top layer when shown — that already escapes
131
+ // ancestor clipping, stacking, and transform containing-block traps, and CSS
132
+ // anchor positioning resolves the trigger reference regardless of where the
133
+ // element sits in the DOM, so no portal is needed to "escape" layout.
134
+ //
135
+ // The layer renders as inline-safe phrasing markup (a `<span>`, see
136
+ // useHoverCard), which stays put inside a `<p>` instead of being reparented
137
+ // by the HTML parser. That keeps the server markup and the first client
138
+ // render identical, so there is no hydration mismatch — and it preserves the
139
+ // inline-safety guarantee (no block elements injected into a paragraph).
140
+ const renderedHoverCard = hoverCard.renderHoverCard(content, {
129
141
  xstyle,
130
142
  className,
131
143
  style
132
- }), document.body) : null;
144
+ });
133
145
 
134
146
  // For text-only children: use inline span with ref on wrapper
135
147
  if (textOnly) {
package/dist/HoverCard/useHoverCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAyC3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,kBAAkB,KACvB,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAC1B,OAAO,GAAE,gBAAqB,GAC7B,eAAe,CA2RjB"}
1
+ {"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA6C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,kBAAkB,KACvB,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA2R5E"}
package/dist/HoverCard/useHoverCard.js CHANGED
@@ -261,11 +261,14 @@ export function useHoverCard(options = {}) {
261
261
  const renderProps = {
262
262
  placement: renderPlacement,
263
263
  alignment: props?.alignment ?? alignment,
264
- xstyle: [popoverXstyle, layerAnimations[renderPlacement]]
264
+ xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
265
+ // Render the layer as inline-safe phrasing markup so HoverCard stays
266
+ // valid (and hydration-stable) inside inline contexts like a `<p>`.
267
+ as: 'span'
265
268
  };
266
- return layer.render(/*#__PURE__*/_jsx("div", {
269
+ return layer.render(/*#__PURE__*/_jsx("span", {
267
270
  ...mergeProps(themeProps('hovercard'), {
268
- className: "x1vlblms xvmdzux x126nfab x1t818jl"
271
+ className: "x1lliihq x1vlblms xvmdzux x126nfab x1t818jl"
269
272
  }),
270
273
  onMouseEnter: () => {
271
274
  isHoveringContentRef.current = true;
package/dist/Kbd/Kbd.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiG5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAClB,IAAI,EACJ,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,QAAQ,qBA2BV;yBAlCe,GAAG"}
1
+ {"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiG5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBA2B3E;yBA3Be,GAAG"}
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))
package/dist/Layer/useLayer.d.ts CHANGED
@@ -38,6 +38,19 @@ export interface ContextRenderProps {
38
38
  * Merged after StyleX and anchor positioning styles.
39
39
  */
40
40
  style?: React.CSSProperties;
41
+ /**
42
+ * HTML tag to render the popover container as.
43
+ *
44
+ * Defaults to `'div'`. Pass `'span'` when the layer must render inline-safe
45
+ * markup — e.g. a `HoverCard` wrapping inline text inside a `<p>`. A `<span>`
46
+ * is phrasing content, so it stays put in the DOM tree instead of being
47
+ * reparented out of a paragraph by the HTML parser, which keeps server and
48
+ * client markup identical. The Popover API and CSS anchor positioning work
49
+ * the same on either tag.
50
+ *
51
+ * @default 'div'
52
+ */
53
+ as?: 'div' | 'span';
41
54
  }
42
55
  /**
43
56
  * Render props for fixed mode (manual coordinates)
package/dist/Layer/useLayer.d.ts.map CHANGED
@@ -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":"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;IAC5B;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;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"}
package/dist/Layer/useLayer.js CHANGED
@@ -204,7 +204,8 @@ export function useLayer(options) {
204
204
  alignment = 'center',
205
205
  xstyle,
206
206
  className: extraClassName,
207
- style: extraStyle
207
+ style: extraStyle,
208
+ as: Container = 'div'
208
209
  } = props || {};
209
210
 
210
211
  // CSS anchor positioning (dynamic, not in StyleX)
@@ -215,7 +216,11 @@ export function useLayer(options) {
215
216
  };
216
217
  const stylexResult = stylex.props(styles.base, xstyle);
217
218
  const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
218
- return /*#__PURE__*/_jsx("div", {
219
+
220
+ // Render as the requested tag. A `span` keeps the layer phrasing content
221
+ // so it is valid (and stays put on hydration) inside inline contexts like
222
+ // a `<p>`; `div` remains the default for block layers.
223
+ return /*#__PURE__*/_jsx(Container, {
219
224
  ref: popoverRefCallback,
220
225
  id: id,
221
226
  popover: lightDismiss ? 'auto' : 'manual',
package/dist/Markdown/Markdown.d.ts.map CHANGED
@@ -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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"}