@ngrok/mantle 0.82.0 → 0.83.0

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 (175) hide show
  1. package/dist/accordion.d.ts +7 -7
  2. package/dist/accordion.js +1 -1
  3. package/dist/agent.json +3 -1
  4. package/dist/{alert-BWwNPOMI.d.ts → alert-B1HXfkYn.d.ts} +9 -7
  5. package/dist/{alert-QMs0PqMq.js → alert-BuG2qS5l.js} +1 -1
  6. package/dist/alert-center.d.ts +220 -22
  7. package/dist/alert-center.js +1 -1
  8. package/dist/alert-dialog.d.ts +18 -18
  9. package/dist/alert-dialog.js +1 -1
  10. package/dist/alert.d.ts +1 -1
  11. package/dist/alert.js +1 -1
  12. package/dist/{anchor-DvbNsphX.js → anchor-3OGK2UKU.js} +1 -1
  13. package/dist/anchor.d.ts +2 -2
  14. package/dist/anchor.js +1 -1
  15. package/dist/app-layout.d.ts +296 -213
  16. package/dist/app-layout.js +1 -1
  17. package/dist/area-chart.d.ts +67 -19
  18. package/dist/area-chart.js +1 -1
  19. package/dist/avatar.d.ts +319 -0
  20. package/dist/avatar.js +1 -0
  21. package/dist/badge.js +1 -1
  22. package/dist/bar-chart.d.ts +73 -20
  23. package/dist/bar-chart.js +1 -1
  24. package/dist/breadcrumb.d.ts +50 -17
  25. package/dist/breadcrumb.js +1 -1
  26. package/dist/browser-only.d.ts +3 -3
  27. package/dist/{button-C-gMbPso.d.ts → button-BIf69CSV.d.ts} +2 -2
  28. package/dist/button-BLDjW1u9.js +1 -0
  29. package/dist/{button-C0S8RbaJ.js → button-CCkGqE1t.js} +1 -1
  30. package/dist/{button-BUospUB3.js → button-Cnja9Bsr.js} +1 -1
  31. package/dist/{button-C7vAl6lS.d.ts → button-DJ7AAgII.d.ts} +4 -6
  32. package/dist/{button-BO2CKsz6.js → button-DmJkYfyl.js} +1 -1
  33. package/dist/{button-DARFK2KJ.d.ts → button-PoIujPMX.d.ts} +2 -2
  34. package/dist/button.d.ts +3 -3
  35. package/dist/button.js +1 -1
  36. package/dist/calendar.d.ts +1 -1
  37. package/dist/calendar.js +1 -1
  38. package/dist/card.d.ts +15 -15
  39. package/dist/card.js +1 -1
  40. package/dist/centered-layout.js +1 -1
  41. package/dist/{chart-1cVjAcj8.d.ts → chart-0zcFJh4n.d.ts} +75 -22
  42. package/dist/chart-DBxT9BNl.js +2 -0
  43. package/dist/{choice-BNRQXszu.d.ts → choice-CVdQrs-m.d.ts} +118 -6
  44. package/dist/{choice-C9gLKECf.js → choice-CnwfjSEu.js} +1 -1
  45. package/dist/choice.d.ts +1 -1
  46. package/dist/choice.js +1 -1
  47. package/dist/{code-block-C9uaM9-V.js → code-block-CIE0F2fu.js} +1 -1
  48. package/dist/{code-block-B6OlZrSI.d.ts → code-block-CZWPrV4k.d.ts} +3 -3
  49. package/dist/code-block.d.ts +10 -7
  50. package/dist/code-block.js +2 -2
  51. package/dist/code-block_highlight-utils.d.ts +1 -1
  52. package/dist/code-block_highlight-utils.js +1 -1
  53. package/dist/code.js +1 -1
  54. package/dist/combobox.d.ts +8 -9
  55. package/dist/combobox.js +1 -1
  56. package/dist/command.d.ts +668 -106
  57. package/dist/command.js +1 -1
  58. package/dist/cookie-ca4g5CKp.js +1 -0
  59. package/dist/data-table.d.ts +6 -6
  60. package/dist/data-table.js +1 -1
  61. package/dist/description-list.js +1 -1
  62. package/dist/dialog-02mNrAT1.d.ts +806 -0
  63. package/dist/{dialog-Bsj_dX6r.js → dialog-BRjTD83p.js} +1 -1
  64. package/dist/dialog.d.ts +2 -805
  65. package/dist/dialog.js +1 -1
  66. package/dist/{dropdown-menu-fUMqjRC0.js → dropdown-menu-BRH0Wd_z.js} +1 -1
  67. package/dist/dropdown-menu-BcALUQMp.d.ts +1 -0
  68. package/dist/{dropdown-menu-D6pMAY7I.d.ts → dropdown-menu-DZOfj6HB.d.ts} +1 -1
  69. package/dist/dropdown-menu.d.ts +2 -2
  70. package/dist/dropdown-menu.js +1 -1
  71. package/dist/empty.js +1 -1
  72. package/dist/field.d.ts +5 -5
  73. package/dist/field.js +1 -1
  74. package/dist/flag.js +1 -1
  75. package/dist/hooks.d.ts +16 -17
  76. package/dist/hooks.js +1 -1
  77. package/dist/icons-DEVx1oP9.js +1 -0
  78. package/dist/icons.d.ts +7 -6
  79. package/dist/icons.js +1 -1
  80. package/dist/{in-view-DDEGUKDR.d.ts → in-view-gxyc9Q1_.d.ts} +1 -1
  81. package/dist/{input-BuYDU6CF.d.ts → input-DpnC3Xgj.d.ts} +2 -2
  82. package/dist/input.d.ts +1 -1
  83. package/dist/kbd.d.ts +1 -1
  84. package/dist/line-chart.d.ts +60 -13
  85. package/dist/line-chart.js +1 -1
  86. package/dist/list-CwL23L_B.js +1 -0
  87. package/dist/list.d.ts +2 -2
  88. package/dist/list.js +1 -1
  89. package/dist/llms.txt +3 -1
  90. package/dist/main.d.ts +32 -1
  91. package/dist/mantle-dark-high-contrast.css +30 -17
  92. package/dist/mantle-dark.css +48 -13
  93. package/dist/mantle-light-high-contrast.css +33 -15
  94. package/dist/mantle.css +436 -26
  95. package/dist/media-object.d.ts +5 -1
  96. package/dist/media-object.js +1 -1
  97. package/dist/multi-select.d.ts +7 -7
  98. package/dist/multi-select.js +1 -1
  99. package/dist/otp-input.d.ts +4 -4
  100. package/dist/otp-input.js +1 -1
  101. package/dist/pagination.d.ts +2 -2
  102. package/dist/pagination.js +1 -1
  103. package/dist/{primitive-Dv-3snU3.js → primitive-D-9GIFWb.js} +1 -1
  104. package/dist/progress.d.ts +4 -4
  105. package/dist/qr-code.d.ts +2 -2
  106. package/dist/qr-code.js +1 -1
  107. package/dist/radio-group.js +1 -1
  108. package/dist/sandbar.d.ts +471 -0
  109. package/dist/sandbar.js +1 -0
  110. package/dist/sandboxed-on-click.d.ts +4 -6
  111. package/dist/sandboxed-on-click.js +1 -1
  112. package/dist/scatter-plot.d.ts +69 -24
  113. package/dist/scatter-plot.js +1 -1
  114. package/dist/{select-0z7HVS6r.d.ts → select-DVHmgih8.d.ts} +13 -7
  115. package/dist/select-LK9NX-vV.js +1 -0
  116. package/dist/select.d.ts +1 -1
  117. package/dist/select.js +1 -1
  118. package/dist/selectable-list.d.ts +4 -4
  119. package/dist/selectable-list.js +1 -1
  120. package/dist/{separator-B5UmkVRL.d.ts → separator-CNDs98Dv.d.ts} +2 -2
  121. package/dist/{separator-BepAcFFy.js → separator-D0D6VyyM.js} +1 -1
  122. package/dist/separator.d.ts +1 -1
  123. package/dist/separator.js +1 -1
  124. package/dist/{sheet-_fXLjiq2.js → sheet-BOSknSN9.js} +1 -1
  125. package/dist/sheet.d.ts +1 -1
  126. package/dist/sheet.js +1 -1
  127. package/dist/sidebar.d.ts +783 -328
  128. package/dist/sidebar.js +1 -1
  129. package/dist/{skeleton-DsHXIa9j.js → skeleton-BhcJMpem.js} +1 -1
  130. package/dist/skeleton.js +1 -1
  131. package/dist/skip-to-main-link.js +1 -1
  132. package/dist/slider.d.ts +1 -1
  133. package/dist/slot-DdgxmuI5.d.ts +67 -0
  134. package/dist/slot-DpNWVci8.js +1 -0
  135. package/dist/slot.d.ts +1 -1
  136. package/dist/slot.js +1 -1
  137. package/dist/split-button.d.ts +12 -12
  138. package/dist/split-button.js +1 -1
  139. package/dist/switch.d.ts +2 -1
  140. package/dist/{table-CGxJwtbL.js → table-C_Nm_RSV.js} +1 -1
  141. package/dist/{table-CZBYEmyK.d.ts → table-D51ZtV4U.d.ts} +18 -8
  142. package/dist/table.d.ts +1 -1
  143. package/dist/table.js +1 -1
  144. package/dist/tabs.d.ts +8 -13
  145. package/dist/tabs.js +1 -1
  146. package/dist/{theme-FbfjYiD3.d.ts → theme-6OxNhf6l.d.ts} +6 -6
  147. package/dist/theme-CVfq037P.js +1 -0
  148. package/dist/theme-switcher.d.ts +4 -4
  149. package/dist/theme-switcher.js +1 -1
  150. package/dist/theme.d.ts +86 -23
  151. package/dist/theme.js +1 -1
  152. package/dist/toast.d.ts +9 -9
  153. package/dist/toast.js +1 -1
  154. package/dist/tooltip-Dnu35cjU.js +1 -0
  155. package/dist/tooltip-DuXGxIse.d.ts +220 -0
  156. package/dist/tooltip.d.ts +1 -217
  157. package/dist/tooltip.js +1 -1
  158. package/dist/use-breakpoint-Dqu12Szq.js +1 -0
  159. package/dist/use-callback-ref-IYti9y7x.js +1 -0
  160. package/dist/use-is-apple-platform-Cxwrb86L.js +1 -0
  161. package/dist/use-matches-media-query-Bd_GhhVd.js +1 -0
  162. package/dist/utils.d.ts +1 -1
  163. package/dist/well.js +1 -1
  164. package/package.json +4 -2
  165. package/dist/button-DvHMWAPl.js +0 -1
  166. package/dist/chart-DdBQ3xwx.js +0 -2
  167. package/dist/dropdown-menu-BbbQuae2.d.ts +0 -1
  168. package/dist/icons-CPbOq7cF.js +0 -1
  169. package/dist/list-CQFWx6Z8.js +0 -1
  170. package/dist/select-B-9yWrif.js +0 -1
  171. package/dist/slot-BtwKJTLq.d.ts +0 -25
  172. package/dist/slot-Dpsqz16D.js +0 -1
  173. package/dist/theme-IAnQ35bd.js +0 -1
  174. package/dist/use-breakpoint-Wd7_5-Mu.js +0 -1
  175. package/dist/use-matches-media-query-CMSxHR9n.js +0 -1
package/dist/theme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./theme-FbfjYiD3.js";
1
+ import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./theme-6OxNhf6l.js";
2
2
  import { PropsWithChildren } from "react";
3
3
  //#region src/components/theme/mantle-style-sheets.d.ts
4
4
  /**
@@ -65,24 +65,39 @@ declare function mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssU
65
65
  */
66
66
  type MantleStyleSheetsProps = MantleThemeCssUrls & {
67
67
  /**
68
- * Force a specific resolved theme's stylesheet to load unconditionally (`media="all"`),
69
- * regardless of the user's OS preference. Use this when your app is locked to a single
70
- * theme (e.g. a dark-only page) so the required CSS is render-blocking as intended.
68
+ * Force a specific resolved theme's stylesheet *pair* to load unconditionally
69
+ * (`media="all"`), regardless of the user's OS preference. Use this when your app is locked
70
+ * to a single theme (e.g. a dark-only page) so the required CSS is render-blocking as
71
+ * intended.
72
+ *
73
+ * Pairs, not single themes: the partner stylesheet (light ⇄ dark, light-high-contrast ⇄
74
+ * dark-high-contrast) is what `invert-theme` islands resolve against, so it is loaded and
75
+ * applied too. `forceTheme="light"` therefore renders the dark link (light itself is the
76
+ * base theme in `mantle.css`), and `forceTheme="light-high-contrast"` renders both
77
+ * high-contrast links. Only the *other* pair is omitted.
78
+ *
79
+ * Because the partner is *applied*, this prop only controls half the picture: which
80
+ * theme block wins is decided by the class on `<html>`. Mirror the same value into
81
+ * `PreventWrongThemeFlashScript` and `ThemeProvider` (and `useInitialHtmlThemeProps`
82
+ * if you use it) — those own that class. Forcing here alone leaves a user whose stored
83
+ * preference is dark with `<html class="dark">` and the dark sheet applied, so a
84
+ * `forceTheme="light"` page paints dark.
71
85
  *
72
86
  * When omitted, each stylesheet uses its OS media query and becomes non-render-blocking
73
87
  * for users whose OS preference does not match.
74
88
  *
75
89
  * @example
76
- * // Dark-only app — always load dark CSS eagerly
90
+ * // Dark-only app — always load the dark/light pair eagerly, and pin the root class
91
+ * <PreventWrongThemeFlashScript forceTheme="dark" nonce={nonce} />
77
92
  * <MantleStyleSheets forceTheme="dark" {...themeUrls} />
93
+ * // …and <ThemeProvider forceTheme="dark"> around the app
78
94
  */
79
95
  forceTheme?: ResolvedTheme;
80
96
  /**
81
97
  * The theme cookie string from the incoming HTTP request (e.g. `request.headers.get("Cookie")`
82
- * or the pre-extracted value from {@link extractThemeCookie}). When provided, the server can
83
- * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML,
84
- * eliminating the need for the inline fix script in cases where the user has a non-system
85
- * theme stored in their cookie.
98
+ * or the pre-extracted value from {@link extractThemeCookie}). When set, the server can
99
+ * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML.
100
+ * When the cookie stores a non-system theme, that removes the need for the inline fix script.
86
101
  *
87
102
  * @example
88
103
  * ```tsx
@@ -145,10 +160,16 @@ declare function fixMediaScriptContent(forceTheme?: ResolvedTheme): string;
145
160
  *
146
161
  * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by
147
162
  * `ThemeProvider`) and updates the `media` attributes to `"all"` when the user manually
148
- * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.
163
+ * selects a theme that differs from their OS preference, so the browser applies the correct CSS.
149
164
  *
150
- * When `forceTheme` is set, only the link tag for that theme is rendered — the others are
151
- * omitted entirely to avoid unnecessary network requests.
165
+ * Theme pairs load together — the active theme's pair partner (light ⇄ dark,
166
+ * light-high-contrast ⇄ dark-high-contrast) also gets `media="all"` — so
167
+ * `invert-theme` subtrees always have their opposite theme's CSS applied.
168
+ *
169
+ * When `forceTheme` is set, only the link tags for that theme's pair are rendered — the other
170
+ * pair is omitted entirely to avoid unnecessary network requests. Note the pair partner is
171
+ * applied (`media="all"`), not merely fetched, so it is render-blocking; that is what lets
172
+ * `invert-theme` islands resolve under a forced theme.
152
173
  *
153
174
  * @see https://mantle.ngrok.com/components/primitives/theme#mantlestylesheets
154
175
  *
@@ -171,13 +192,24 @@ declare function fixMediaScriptContent(forceTheme?: ResolvedTheme): string;
171
192
  declare function MantleStyleSheets({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl, forceTheme, nonce, ssrCookie }: MantleStyleSheetsProps): import("react").JSX.Element;
172
193
  //#endregion
173
194
  //#region src/components/theme/theme-provider.d.ts
174
- /**
175
- * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.
176
- */
177
195
  type ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];
178
- type ThemeProviderProps = PropsWithChildren;
196
+ type ThemeProviderProps = PropsWithChildren<{
197
+ /**
198
+ * Pin the theme that renders, ignoring the stored preference and the OS. Pass
199
+ * the same value you pass `MantleStyleSheets` and `PreventWrongThemeFlashScript`
200
+ * — those force which stylesheets are *applied*, and this forces the `<html>`
201
+ * class they key off. Leaving them out of sync is what makes a page paint in a
202
+ * theme nobody asked for: the pair partner's stylesheet is applied, so a stale
203
+ * `.dark` on the root would take over a `forceTheme="light"` page.
204
+ *
205
+ * The stored preference is still read and still written by `setTheme`, so a
206
+ * theme switcher keeps working and unforced pages honor the user's choice.
207
+ */
208
+ forceTheme?: ResolvedTheme;
209
+ }>;
179
210
  /**
180
- * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
211
+ * Tracks the theme preference and applies the resolved class to `<html>`. Stays
212
+ * in sync with the OS media queries and with the other open tabs.
181
213
  *
182
214
  * @see https://mantle.ngrok.com/components/primitives/theme#themeprovider
183
215
  *
@@ -187,8 +219,16 @@ type ThemeProviderProps = PropsWithChildren;
187
219
  * <App />
188
220
  * </ThemeProvider>
189
221
  * ```
222
+ *
223
+ * @example
224
+ * ```tsx
225
+ * // a page locked to light — mirror the same value everywhere it is forced
226
+ * <ThemeProvider forceTheme="light">
227
+ * <App />
228
+ * </ThemeProvider>
229
+ * ```
190
230
  */
191
- declare function ThemeProvider({ children }: ThemeProviderProps): import("react").JSX.Element;
231
+ declare function ThemeProvider({ children, forceTheme }: ThemeProviderProps): import("react").JSX.Element;
192
232
  /**
193
233
  * useTheme returns the current theme and a function to set the theme.
194
234
  *
@@ -207,8 +247,8 @@ declare function readThemeFromHtmlElement(): {
207
247
  theme: "dark" | "dark-high-contrast" | "light" | "light-high-contrast" | "system" | undefined;
208
248
  };
209
249
  /**
210
- * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
211
- * This will mirror the result that gets applied to the <html> element.
250
+ * Resolves `"system"` against the user's media query preferences, and returns any other theme unchanged.
251
+ * The result mirrors what lands on the `<html>` element.
212
252
  *
213
253
  * @see https://mantle.ngrok.com/components/primitives/theme
214
254
  */
@@ -219,9 +259,25 @@ declare function useAppliedTheme(): "dark" | "dark-high-contrast" | "light" | "l
219
259
  * It also applies the correct theme to the `<html>` element based on the user's media query preferences.
220
260
  *
221
261
  * @see https://mantle.ngrok.com/components/primitives/theme
262
+ *
263
+ * @param forceTheme - Pin the applied theme, bypassing the stored preference and
264
+ * the OS. Mirror the value passed to `MantleStyleSheets` and `ThemeProvider`.
265
+ *
266
+ * @example
267
+ * ```ts
268
+ * // a page locked to light, rendered outside React (e.g. a Go template)
269
+ * const scriptContent = preventWrongThemeFlashScriptContent("light");
270
+ * ```
222
271
  */
223
- declare function preventWrongThemeFlashScriptContent(): string;
272
+ declare function preventWrongThemeFlashScriptContent(forceTheme?: ResolvedTheme): string;
224
273
  type PreventWrongThemeFlashScriptProps = {
274
+ /**
275
+ * Pin the theme this page paints in, bypassing the stored preference and the
276
+ * OS. Mirror the same value you pass `MantleStyleSheets` and `ThemeProvider`:
277
+ * those force which stylesheets are *applied*, and this forces the `<html>`
278
+ * class they key off, before first paint.
279
+ */
280
+ forceTheme?: ResolvedTheme;
225
281
  /**
226
282
  * An optional CSP nonce to allowlist this inline script. Using this can help
227
283
  * you to avoid using the CSP `unsafe-inline` directive, which disables
@@ -259,13 +315,14 @@ type PreventWrongThemeFlashScriptProps = {
259
315
  * </head>
260
316
  * ```
261
317
  *
318
+ * @param forceTheme - Optional theme to pin, mirroring `MantleStyleSheets` and `ThemeProvider`.
262
319
  * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.
263
320
  * @returns {JSX.Element} A script tag injected before first paint.
264
321
  * @see preloadFontLink
265
322
  * @see PreloadFont
266
323
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
267
324
  */
268
- declare const PreventWrongThemeFlashScript: ({ nonce }: PreventWrongThemeFlashScriptProps) => import("react").JSX.Element;
325
+ declare const PreventWrongThemeFlashScript: ({ forceTheme, nonce }: PreventWrongThemeFlashScriptProps) => import("react").JSX.Element;
269
326
  type InitialThemeProps = {
270
327
  className: string;
271
328
  "data-applied-theme": ResolvedTheme;
@@ -273,6 +330,12 @@ type InitialThemeProps = {
273
330
  };
274
331
  type UseInitialHtmlThemePropsOptions = {
275
332
  className?: string;
333
+ /**
334
+ * Pin the resolved theme in the returned props, bypassing the cookie and the
335
+ * OS. Mirror the same value you pass `MantleStyleSheets`,
336
+ * `PreventWrongThemeFlashScript`, and `ThemeProvider`.
337
+ */
338
+ forceTheme?: ResolvedTheme;
276
339
  /**
277
340
  * Theme cookie string for SSR theme resolution. Pass only the theme cookie
278
341
  * pair (via {@link extractThemeCookie}) rather than the full raw `Cookie`
@@ -309,7 +372,7 @@ type GetStoredThemeOptions = {
309
372
  */
310
373
  declare function getStoredTheme({ cookie }: GetStoredThemeOptions): Theme;
311
374
  /**
312
- * Extract just the mantle theme cookie from a raw `Cookie` header string.
375
+ * Extract only the mantle theme cookie from a raw `Cookie` header string.
313
376
  *
314
377
  * Use this in SSR loaders to safely pass the theme cookie to
315
378
  * {@link useInitialHtmlThemeProps} without exposing the full `Cookie` header
package/dist/theme.js CHANGED
@@ -1 +1 @@
1
- import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-IAnQ35bd.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){let t=e.startsWith(`/`)?e:`/${e}`;return`${j}${t}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
1
+ import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-CVfq037P.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e,r=n===`light`||n===`dark`,i=n===`light-high-contrast`||n===`dark-high-contrast`;return{dark:r?`all`:S,lightHighContrast:i?`all`:C,darkHighContrast:i?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=l===`light`||l===`dark`,d=l===`light-high-contrast`||l===`dark-high-contrast`,f=document.getElementById(t),p=document.getElementById(n),m=document.getElementById(r);f&&(f.media=u?`all`:i),p&&(p.media=d?`all`:a),m&&(m.media=d?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i),p=!i&&l==null,m=!i||i!==`light-high-contrast`&&i!==`dark-high-contrast`,S=!i||i===`light-high-contrast`||i===`dark-high-contrast`;return v(g,{children:[m&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),S&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),S&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),p&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){let t=e.startsWith(`/`)?e:`/${e}`;return`${j}${t}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
package/dist/toast.d.ts CHANGED
@@ -33,18 +33,18 @@ declare const Toaster: ({ className, containerAriaLabel, dir, duration_ms, posit
33
33
  type MakeToastOptions = {
34
34
  /**
35
35
  * Time in milliseconds that should elapse before automatically closing the toast.
36
- * Will default to the `<Toaster />`'s `duration_ms` if not provided.
36
+ * Defaults to the `<Toaster />`'s `duration_ms` when omitted.
37
37
  *
38
38
  * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY
39
39
  */
40
40
  duration_ms?: number;
41
41
  /**
42
- * An optional custom ID for this toast. If not given, a unique ID is provided for you.
42
+ * An optional custom ID for this toast. When omitted, the toast gets a unique generated ID.
43
43
  */
44
44
  id?: string;
45
45
  };
46
46
  /**
47
- * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered
47
+ * Create a toast. Pass a `<Toast.Root>` component as the `children` to render
48
48
  * inside the `<Toaster />` section.
49
49
  *
50
50
  * @see https://mantle.ngrok.com/components/feedback/toast#maketoast
@@ -84,9 +84,9 @@ type ToastProps = ComponentProps<"div"> & WithAsChild & {
84
84
  intent: ToastIntent;
85
85
  };
86
86
  /**
87
- * A succinct message with an intent that is displayed temporarily. The intent
87
+ * A succinct message with an intent that appears temporarily. The intent
88
88
  * is the tone or status that the toast's color communicates.
89
- * Toasts are used to provide feedback to the user without interrupting their workflow.
89
+ * Toasts give the user feedback without interrupting their workflow.
90
90
  *
91
91
  * @see https://mantle.ngrok.com/components/feedback/toast#toastroot
92
92
  *
@@ -103,7 +103,7 @@ declare const Root: ({ asChild, children, className, intent, ref, ...props }: To
103
103
  type ToastIconProps = Partial<SvgOnlyProps>;
104
104
  /**
105
105
  * An icon that visually represents the intent of the toast.
106
- * If you do not provide an icon, the default icon and color for the intent is used.
106
+ * If you do not pass an icon, the toast uses the default icon and color for the intent.
107
107
  *
108
108
  * @see https://mantle.ngrok.com/components/feedback/toast#toasticon
109
109
  *
@@ -151,8 +151,8 @@ type ToastMessageProps = ComponentProps<"p"> & WithAsChild;
151
151
  */
152
152
  declare const Message: ({ asChild, className, ref, ...props }: ToastMessageProps) => import("react").JSX.Element;
153
153
  /**
154
- * A succinct message that is displayed temporarily. Toasts are used to provide
155
- * feedback to the user without interrupting their workflow.
154
+ * A succinct message that appears temporarily. Toasts give the user feedback
155
+ * without interrupting their workflow.
156
156
  *
157
157
  * @see https://mantle.ngrok.com/components/feedback/toast
158
158
  *
@@ -178,7 +178,7 @@ declare const Message: ({ asChild, className, ref, ...props }: ToastMessageProps
178
178
  */
179
179
  declare const Toast: {
180
180
  /**
181
- * A succinct message with an intent that is displayed temporarily.
181
+ * A succinct message with an intent that appears temporarily.
182
182
  *
183
183
  * @see https://mantle.ngrok.com/components/feedback/toast#toastroot
184
184
  *
package/dist/toast.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-Dpsqz16D.js";import{s as r}from"./theme-IAnQ35bd.js";import{createContext as i,useContext as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{CheckCircleIcon as l}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as u}from"@phosphor-icons/react/Info";import{WarningIcon as d}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as f}from"@phosphor-icons/react/WarningDiamond";import*as p from"sonner";const m=({className:t,containerAriaLabel:n,dir:i,duration_ms:a=4e3,position:o=`top-center`,style:c})=>{let l=r();return s(p.Toaster,{"data-slot":`toaster`,className:e(`toaster overlay-prompt pointer-events-auto *:duration-200`,t),containerAriaLabel:n,dir:i,duration:a,gap:12,position:o??`top-center`,style:c,theme:l,toastOptions:{unstyled:!0}})},h=i(``);function g(e,t){let n=t?.duration_ms;return typeof n==`number`&&n<=0&&(n=1/0),p.toast.custom(t=>s(h.Provider,{value:t,children:e}),{duration:n,...t?.id?{id:t.id}:{},unstyled:!0})}const _=i({intent:`info`}),v={Root:({asChild:t,children:r,className:i,intent:a,ref:l,...u})=>{let d=t?n:`div`,f=o(()=>({intent:a}),[a]);return s(_.Provider,{value:f,children:c(d,{"data-slot":`toast`,className:e(`relative flex items-start gap-2 text-sm font-sans`,`p-3 pl-3.75`,`bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg`,i),ref:l,...u,children:[s(b,{intent:a}),r]})})},Action:({asChild:t,className:r,onClick:i,ref:o,...c})=>{let l=a(h);return s(t?n:`button`,{"data-slot":`toast-action`,className:e(`shrink-0`,`data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs`,r),onClick:e=>{i?.(e),!e.defaultPrevented&&p.toast.dismiss(l)},ref:o,...c})},Icon:({className:n,svg:r,ref:i,...o})=>{let c=a(_);switch(c.intent){case`danger`:return s(t,{"data-slot":`toast-icon`,className:e(`text-danger-600`,n),ref:i,svg:r??s(d,{weight:`fill`}),...o});case`warning`:return s(t,{"data-slot":`toast-icon`,className:e(`text-warning-600`,n),ref:i,svg:r??s(f,{weight:`fill`}),...o});case`success`:return s(t,{"data-slot":`toast-icon`,className:e(`text-success-600`,n),ref:i,svg:r??s(l,{weight:`fill`}),...o});case`info`:return s(t,{"data-slot":`toast-icon`,className:e(`text-accent-600`,n),ref:i,svg:s(u,{weight:`fill`}),...o});default:throw Error(`Unreachable Case: ${c.intent}`)}},Message:({asChild:t,className:r,ref:i,...a})=>s(t?n:`p`,{"data-slot":`toast-message`,className:e(`text-strong flex-1 text-sm font-body`,r),ref:i,...a})},y={info:`bg-accent-600`,warning:`bg-warning-600`,success:`bg-success-600`,danger:`bg-danger-600`};function b({className:t,intent:n,...r}){return s(`div`,{"aria-hidden":!0,className:e(`z-1 absolute -inset-px right-auto w-1.5 rounded-l`,y[n],t),...r})}export{v as Toast,m as Toaster,g as makeToast};
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-DpNWVci8.js";import{s as r}from"./theme-CVfq037P.js";import{createContext as i,useContext as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{CheckCircleIcon as l}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as u}from"@phosphor-icons/react/Info";import{WarningIcon as d}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as f}from"@phosphor-icons/react/WarningDiamond";import*as p from"sonner";const m=({className:t,containerAriaLabel:n,dir:i,duration_ms:a=4e3,position:o=`top-center`,style:c})=>{let l=r();return s(p.Toaster,{"data-slot":`toaster`,className:e(`toaster overlay-prompt pointer-events-auto *:duration-200`,t),containerAriaLabel:n,dir:i,duration:a,gap:12,position:o??`top-center`,style:c,theme:l,toastOptions:{unstyled:!0}})},h=i(``);function g(e,t){let n=t?.duration_ms;return typeof n==`number`&&n<=0&&(n=1/0),p.toast.custom(t=>s(h.Provider,{value:t,children:e}),{duration:n,...t?.id?{id:t.id}:{},unstyled:!0})}const _=i({intent:`info`}),v={Root:({asChild:t,children:r,className:i,intent:a,ref:l,...u})=>{let d=t?n:`div`,f=o(()=>({intent:a}),[a]);return s(_.Provider,{value:f,children:c(d,{"data-slot":`toast`,className:e(`relative flex items-start gap-2 text-sm font-sans`,`p-3 pl-3.75`,`bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg`,i),ref:l,...u,children:[s(b,{intent:a}),r]})})},Action:({asChild:t,className:r,onClick:i,ref:o,...c})=>{let l=a(h);return s(t?n:`button`,{"data-slot":`toast-action`,className:e(`shrink-0`,`data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs`,r),onClick:e=>{i?.(e),!e.defaultPrevented&&p.toast.dismiss(l)},ref:o,...c})},Icon:({className:n,svg:r,ref:i,...o})=>{let c=a(_);switch(c.intent){case`danger`:return s(t,{"data-slot":`toast-icon`,className:e(`text-danger-600`,n),ref:i,svg:r??s(d,{weight:`fill`}),...o});case`warning`:return s(t,{"data-slot":`toast-icon`,className:e(`text-warning-600`,n),ref:i,svg:r??s(f,{weight:`fill`}),...o});case`success`:return s(t,{"data-slot":`toast-icon`,className:e(`text-success-600`,n),ref:i,svg:r??s(l,{weight:`fill`}),...o});case`info`:return s(t,{"data-slot":`toast-icon`,className:e(`text-accent-600`,n),ref:i,svg:s(u,{weight:`fill`}),...o});default:throw Error(`Unreachable Case: ${c.intent}`)}},Message:({asChild:t,className:r,ref:i,...a})=>s(t?n:`p`,{"data-slot":`toast-message`,className:e(`text-strong flex-1 text-sm font-body`,r),ref:i,...a})},y={info:`bg-accent-600`,warning:`bg-warning-600`,success:`bg-success-600`,danger:`bg-danger-600`};function b({className:t,intent:n,...r}){return s(`div`,{"aria-hidden":!0,className:e(`z-1 absolute -inset-px right-auto w-1.5 rounded-l`,y[n],t),...r})}export{v as Toast,m as Toaster,g as makeToast};
package/dist/tooltip-Dnu35cjU.js ADDED
@@ -0,0 +1 @@
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-tooltip";const i=({delayDuration:e=0,...n})=>t(r.Provider,{"data-slot":`tooltip-provider`,delayDuration:e??0,...n});function a(e){return t(r.Root,{"data-slot":`tooltip`,...e})}function o(e){return t(r.Trigger,{"data-slot":`tooltip-trigger`,...e})}const s={Root:a,Content:({children:i,className:a,ref:o,sideOffset:s=4,...c})=>t(r.Portal,{children:n(r.Content,{className:e(`bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow`,a),"data-slot":`tooltip-content`,ref:o,sideOffset:s,...c,children:[i,t(r.Arrow,{asChild:!0,children:t(`div`,{className:`bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs`})})]})}),Trigger:o};export{i as n,s as t};
package/dist/tooltip-DuXGxIse.d.ts ADDED
@@ -0,0 +1,220 @@
1
+ import { ComponentProps, ComponentPropsWithoutRef } from "react";
2
+ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
3
+ //#region src/components/tooltip/tooltip.d.ts
4
+ /**
5
+ * Wraps your app to set shared global behavior for your tooltips, such
6
+ * as consistent delay and hover settings. Mount exactly one instance, preferably
7
+ * at the root of your app. A nested provider applies its own timing props to its
8
+ * subtree. It also tracks `skipDelayDuration` separately, so a pointer that moves
9
+ * from one provider's trigger to the other's waits the delay again. Children
10
+ * render `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.
11
+ *
12
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltipprovider
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * <TooltipProvider>
17
+ * <Tooltip.Root>
18
+ * <Tooltip.Trigger asChild>
19
+ * <Button type="button" appearance="outlined" intent="neutral">
20
+ * Hover me
21
+ * </Button>
22
+ * </Tooltip.Trigger>
23
+ * <Tooltip.Content>
24
+ * This is a tooltip
25
+ * </Tooltip.Content>
26
+ * </Tooltip.Root>
27
+ * </TooltipProvider>
28
+ * ```
29
+ */
30
+ declare const TooltipProvider: ({ delayDuration, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react").JSX.Element;
31
+ /**
32
+ * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
33
+ * This is the root, stateful component that manages the open/closed state of
34
+ * the tooltip. Wrap your app in `TooltipProvider` when you want shared
35
+ * app-wide delay and hover settings.
36
+ *
37
+ * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
38
+ * z-index. When multiple shared layers are open, the most recently mounted
39
+ * layer renders on top.
40
+ *
41
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiproot
42
+ *
43
+ * @example
44
+ * ```tsx
45
+ * <Tooltip.Root>
46
+ * <Tooltip.Trigger asChild>
47
+ * <Button type="button" appearance="outlined" intent="neutral">
48
+ * Hover me
49
+ * </Button>
50
+ * </Tooltip.Trigger>
51
+ * <Tooltip.Content>
52
+ * This is a tooltip
53
+ * </Tooltip.Content>
54
+ * </Tooltip.Root>
55
+ * ```
56
+ */
57
+ declare function Root(props: ComponentProps<typeof TooltipPrimitive.Root>): import("react").JSX.Element;
58
+ /**
59
+ * The trigger button that opens the tooltip.
60
+ *
61
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiptrigger
62
+ *
63
+ * @example
64
+ * ```tsx
65
+ * <Tooltip.Root>
66
+ * <Tooltip.Trigger asChild>
67
+ * <Button type="button" appearance="outlined" intent="neutral">
68
+ * Hover me
69
+ * </Button>
70
+ * </Tooltip.Trigger>
71
+ * <Tooltip.Content>
72
+ * This is a tooltip
73
+ * </Tooltip.Content>
74
+ * </Tooltip.Root>
75
+ * ```
76
+ */
77
+ declare function Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): import("react").JSX.Element;
78
+ /**
79
+ * The content to render inside the tooltip.
80
+ *
81
+ * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
82
+ * z-index. When multiple shared layers are open, the most recently mounted
83
+ * layer renders on top.
84
+ *
85
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltipcontent
86
+ *
87
+ * @example
88
+ * ```tsx
89
+ * <Tooltip.Root>
90
+ * <Tooltip.Trigger asChild>
91
+ * <Button type="button" appearance="outlined" intent="neutral">
92
+ * Hover me
93
+ * </Button>
94
+ * </Tooltip.Trigger>
95
+ * <Tooltip.Content>
96
+ * This is a tooltip
97
+ * </Tooltip.Content>
98
+ * </Tooltip.Root>
99
+ * ```
100
+ */
101
+ declare const Content: ({ children, className, ref, sideOffset, ...props }: ComponentProps<typeof TooltipPrimitive.Content>) => import("react").JSX.Element;
102
+ /**
103
+ * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
104
+ *
105
+ * Use `Tooltip` to show a short, non-essential label or hint when the user
106
+ * hovers or focuses an element — e.g., the meaning of an icon button, a
107
+ * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:
108
+ * do not put buttons, links, or form controls inside one. Per the WAI-ARIA
109
+ * tooltip pattern, tooltips never receive focus, so interactive content
110
+ * inside them is unreachable for keyboard users. For interactive overlay
111
+ * content (forms, settings, color pickers), use `Popover`. For non-essential
112
+ * preview cards (user/repo previews, link previews), use `HoverCard`.
113
+ *
114
+ * Mount a `<TooltipProvider>` once at the app root when you want shared
115
+ * tooltip behavior such as consistent delay and hover settings.
116
+ *
117
+ * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
118
+ * z-index. When multiple shared layers are open, the most recently mounted
119
+ * layer renders on top.
120
+ *
121
+ * @see https://mantle.ngrok.com/components/overlays/tooltip
122
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
123
+ *
124
+ * @example
125
+ * Composition:
126
+ * ```
127
+ * Tooltip.Root
128
+ * ├── Tooltip.Trigger
129
+ * └── Tooltip.Content
130
+ * ```
131
+ *
132
+ * @example
133
+ * ```tsx
134
+ * <Tooltip.Root>
135
+ * <Tooltip.Trigger asChild>
136
+ * <Button type="button" appearance="outlined" intent="neutral">
137
+ * Hover me
138
+ * </Button>
139
+ * </Tooltip.Trigger>
140
+ * <Tooltip.Content>
141
+ * This is a tooltip
142
+ * </Tooltip.Content>
143
+ * </Tooltip.Root>
144
+ * ```
145
+ */
146
+ declare const Tooltip: {
147
+ /**
148
+ * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
149
+ * This is the root, stateful component that manages the open/closed state of
150
+ * the tooltip. Wrap your app in `TooltipProvider` when you want shared
151
+ * app-wide delay and hover settings.
152
+ *
153
+ * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
154
+ * z-index. When multiple shared layers are open, the most recently mounted
155
+ * layer renders on top.
156
+ *
157
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiproot
158
+ *
159
+ * @example
160
+ * ```tsx
161
+ * <Tooltip.Root>
162
+ * <Tooltip.Trigger asChild>
163
+ * <Button type="button" appearance="outlined" intent="neutral">
164
+ * Hover me
165
+ * </Button>
166
+ * </Tooltip.Trigger>
167
+ * <Tooltip.Content>
168
+ * This is a tooltip
169
+ * </Tooltip.Content>
170
+ * </Tooltip.Root>
171
+ * ```
172
+ */
173
+ readonly Root: typeof Root;
174
+ /**
175
+ * The content to render inside the tooltip.
176
+ *
177
+ * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
178
+ * z-index. When multiple shared layers are open, the most recently mounted
179
+ * layer renders on top.
180
+ *
181
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltipcontent
182
+ *
183
+ * @example
184
+ * ```tsx
185
+ * <Tooltip.Root>
186
+ * <Tooltip.Trigger asChild>
187
+ * <Button type="button" appearance="outlined" intent="neutral">
188
+ * Hover me
189
+ * </Button>
190
+ * </Tooltip.Trigger>
191
+ * <Tooltip.Content>
192
+ * This is a tooltip
193
+ * </Tooltip.Content>
194
+ * </Tooltip.Root>
195
+ * ```
196
+ */
197
+ readonly Content: typeof Content;
198
+ /**
199
+ * The trigger button that opens the tooltip.
200
+ *
201
+ * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiptrigger
202
+ *
203
+ * @example
204
+ * ```tsx
205
+ * <Tooltip.Root>
206
+ * <Tooltip.Trigger asChild>
207
+ * <Button type="button" appearance="outlined" intent="neutral">
208
+ * Hover me
209
+ * </Button>
210
+ * </Tooltip.Trigger>
211
+ * <Tooltip.Content>
212
+ * This is a tooltip
213
+ * </Tooltip.Content>
214
+ * </Tooltip.Root>
215
+ * ```
216
+ */
217
+ readonly Trigger: typeof Trigger;
218
+ };
219
+ //#endregion
220
+ export { TooltipProvider as n, Tooltip as t };