@ngrok/mantle 0.70.2 → 0.71.0

package/dist/tooltip.d.ts

@@ -5,15 +5,26 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 //#region src/components/tooltip/tooltip.d.ts
 /**
- * Wraps your app to provide global functionality to your tooltips.
- * Only one instance of this component should be rendered in your app, preferably at the root.
+ * Wraps your app to provide shared global behavior for your tooltips, such
+ * as consistent delay and hover settings. Mount one instance at the root of
+ * your app when you want app-wide tooltip defaults. Children render
+ * `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.
  *
  * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider
  *
  * @example
  * ```tsx
  * <TooltipProvider>
- *   <App />
+ *   <Tooltip.Root>
+ *     <Tooltip.Trigger asChild>
+ *       <Button type="button" appearance="outlined">
+ *         Hover me
+ *       </Button>
+ *     </Tooltip.Trigger>
+ *     <Tooltip.Content>
+ *       This is a tooltip
+ *     </Tooltip.Content>
+ *   </Tooltip.Root>
  * </TooltipProvider>
  * ```
  */
@@ -26,8 +37,9 @@ declare const TooltipProvider: {
 };
 /**
  * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- * This is the root, stateful component that manages the open/closed state of the tooltip.
- * Will throw if you have not wrapped your app in a `TooltipProvider`.
+ * This is the root, stateful component that manages the open/closed state of
+ * the tooltip. Wrap your app in `TooltipProvider` when you want shared
+ * app-wide delay and hover settings.
  *
  * @see https://mantle.ngrok.com/components/tooltip#tooltiproot
  *
@@ -74,14 +86,18 @@ declare namespace Trigger {
 }
 /**
  * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- * Wrapping your app in a `TooltipProvider` is recommended to share global tooltip behavior (delay, hover settings) across your application.
  *
- * Use a `Tooltip` for short, non-interactive labels — for example, to clarify
- * the purpose of an icon-only button. Per the WAI-ARIA tooltip pattern,
- * tooltips never receive focus, so interactive content inside them is
- * unreachable for keyboard users. Prefer `Popover` when the floating content
- * must be interactive, or `HoverCard` for a sighted-only preview of content
- * that already lives behind a link.
+ * Use `Tooltip` to show a short, non-essential label or hint when the user
+ * hovers or focuses an element — e.g., the meaning of an icon button, a
+ * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:
+ * do not put buttons, links, or form controls inside one. Per the WAI-ARIA
+ * tooltip pattern, tooltips never receive focus, so interactive content
+ * inside them is unreachable for keyboard users. For interactive overlay
+ * content (forms, settings, color pickers), use `Popover`. For non-essential
+ * preview cards (user/repo previews, link previews), use `HoverCard`.
+ *
+ * Mount a `<TooltipProvider>` once at the app root when you want shared
+ * tooltip behavior such as consistent delay and hover settings.
  *
  * @see https://mantle.ngrok.com/components/tooltip
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
@@ -111,8 +127,9 @@ declare namespace Trigger {
 declare const Tooltip: {
   /**
    * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
-   * This is the root, stateful component that manages the open/closed state of the tooltip.
-   * Will throw if you have not wrapped your app in a `TooltipProvider`.
+   * This is the root, stateful component that manages the open/closed state of
+   * the tooltip. Wrap your app in `TooltipProvider` when you want shared
+   * app-wide delay and hover settings.
    *
    * @see https://mantle.ngrok.com/components/tooltip#tooltiproot
    *

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * Wrapping your app in a `TooltipProvider` is recommended to share global tooltip behavior (delay, hover settings) across your application.\n *\n * Use a `Tooltip` for short, non-interactive labels — for example, to clarify\n * the purpose of an icon-only button. Per the WAI-ARIA tooltip pattern,\n * tooltips never receive focus, so interactive content inside them is\n * unreachable for keyboard users. Prefer `Popover` when the floating content\n * must be interactive, or `HoverCard` for a sighted-only preview of content\n * that already lives behind a link.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKAkBA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,EACH,CAAA,CAEH,EAAgB,YAAc,mBAuB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,EAAS,CAAA,CAEhE,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,EAAS,CAAA,CAE3E,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,EACA,CACD,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,6EAA+E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,CACF,EAAQ,YAAc,kBAsCtB,MAAM,EAAU,CAsBf,OAoBA,UAoBA,UACA"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide shared global behavior for your tooltips, such\n * as consistent delay and hover settings. Mount one instance at the root of\n * your app when you want app-wide tooltip defaults. Children render\n * `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger asChild>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Hover me\n *       </Button>\n *     </Tooltip.Trigger>\n *     <Tooltip.Content>\n *       This is a tooltip\n *     </Tooltip.Content>\n *   </Tooltip.Root>\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of\n * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n * app-wide delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n *\n * Use `Tooltip` to show a short, non-essential label or hint when the user\n * hovers or focuses an element — e.g., the meaning of an icon button, a\n * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:\n * do not put buttons, links, or form controls inside one. Per the WAI-ARIA\n * tooltip pattern, tooltips never receive focus, so interactive content\n * inside them is unreachable for keyboard users. For interactive overlay\n * content (forms, settings, color pickers), use `Popover`. For non-essential\n * preview cards (user/repo previews, link previews), use `HoverCard`.\n *\n * Mount a `<TooltipProvider>` once at the app root when you want shared\n * tooltip behavior such as consistent delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of\n\t * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n\t * app-wide delay and hover settings.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKA6BA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,EACH,CAAA,CAEH,EAAgB,YAAc,mBAwB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,EAAS,CAAA,CAEhE,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,EAAS,CAAA,CAE3E,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,EACA,CACD,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,6EAA+E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,CACF,EAAQ,YAAc,kBA0CtB,MAAM,EAAU,CAuBf,OAoBA,UAoBA,UACA"}

package/dist/use-copy-to-clipboard-C7vsjJe-.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy-to-clipboard-C7vsjJe-.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * A hook that returns an async function to copy a string to the clipboard.\n *\n * `await` the returned function to know whether the write succeeded. It\n * throws when both the Clipboard API and the `execCommand` polyfill fail.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAUA,SAAS,GAAqB,CAC7B,OAAO"}
+{"version":3,"file":"use-copy-to-clipboard-C7vsjJe-.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * React hook that returns a stable async function for copying a string to\n * the system clipboard.\n *\n * The returned function uses the Clipboard API when available and falls back\n * to a `document.execCommand(\"copy\")` polyfill for older browsers. `await`\n * the call (or attach a `.then()` / `.catch()`) to observe whether the copy\n * succeeded — the function throws when both the Clipboard API and the\n * polyfill fail, or when called outside of a DOM environment.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n *\n * @returns An async function `(value: string) => Promise<void>` that writes\n *   `value` to the clipboard and rejects on failure.\n *\n * @example\n * // Copy a token on click and surface a toast on success/failure\n * const copy = useCopyToClipboard();\n *\n * async function handleCopy() {\n *   try {\n *     await copy(token);\n *     toast.success(\"Copied!\");\n *   } catch {\n *     toast.error(\"Could not copy to clipboard\");\n *   }\n * }\n *\n * return <button onClick={handleCopy}>Copy token</button>;\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAgCA,SAAS,GAAqB,CAC7B,OAAO"}

package/dist/use-matches-media-query-CojcYxlA.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-matches-media-query-CojcYxlA.js","names":[],"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\n/**\n * React hook that subscribes to and returns the result of a CSS media query.\n *\n * This hook uses `window.matchMedia` under the hood and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {string} query - A valid CSS media query string (e.g., `(max-width: 768px)`).\n *\n * @returns {boolean} `true` if the media query currently matches, otherwise `false`.\n *\n * @example\n * // Detect if the user prefers a dark color scheme:\n * const isDarkMode = useMatchesMediaQuery(\"(prefers-color-scheme: dark)\");\n *\n * if (isDarkMode) {\n *   document.body.classList.add(\"dark\");\n * } else {\n *   document.body.classList.remove(\"dark\");\n * }\n */\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"8DAsBA,SAAgB,EAAqB,EAAe,CAanD,OAAO,EAZW,EAChB,GAAyB,CACzB,IAAM,EAAa,OAAO,WAAW,EAAM,CAG3C,OADA,EAAW,iBAAiB,SAAU,EAAS,KAClC,CACZ,EAAW,oBAAoB,SAAU,EAAS,GAGpD,CAAC,EAAM,CACP,KAKQ,OAAO,WAAW,EAAM,CAAC,YAE3B,GACN"}
+{"version":3,"file":"use-matches-media-query-CojcYxlA.js","names":[],"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\n/**\n * React hook that subscribes to a CSS media query and returns whether it\n * currently matches, re-rendering whenever the result changes.\n *\n * Uses `window.matchMedia` under the hood and `useSyncExternalStore` for\n * compatibility with React's concurrent rendering model. Returns `false`\n * on the server; during hydration React uses that server snapshot before\n * updating to the client media-query value.\n *\n * For common viewport breakpoint checks, prefer the more specific\n * {@link useBreakpoint} or {@link useIsBelowBreakpoint} hooks.\n *\n * @param query - A valid CSS media query string\n *   (e.g. `\"(max-width: 768px)\"`, `\"(prefers-color-scheme: dark)\"`).\n * @returns `true` if the media query currently matches, otherwise `false`.\n *\n * @example\n * // Detect if the user prefers a dark color scheme\n * const prefersDark = useMatchesMediaQuery(\"(prefers-color-scheme: dark)\");\n *\n * return <div className={prefersDark ? \"dark\" : \"light\"}>Hello</div>;\n *\n * @example\n * // Show a different layout on portrait orientation\n * const isPortrait = useMatchesMediaQuery(\"(orientation: portrait)\");\n *\n * return isPortrait ? <PortraitLayout /> : <LandscapeLayout />;\n */\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"8DA8BA,SAAgB,EAAqB,EAAe,CAanD,OAAO,EAZW,EAChB,GAAyB,CACzB,IAAM,EAAa,OAAO,WAAW,EAAM,CAG3C,OADA,EAAW,iBAAiB,SAAU,EAAS,KAClC,CACZ,EAAW,oBAAoB,SAAU,EAAS,GAGpD,CAAC,EAAM,CAIE,KAED,OAAO,WAAW,EAAM,CAAC,YAE3B,GACN"}

package/dist/use-prefers-reduced-motion-aXfsyo-k.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-prefers-reduced-motion-aXfsyo-k.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n *   This keeps the “default” mental model explicit: if the system hasn’t opted out,\n *   animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n *   before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CAYd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAwBT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}
+{"version":3,"file":"use-prefers-reduced-motion-aXfsyo-k.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference once at\n * the time of the call.\n *\n * Useful in event handlers, animation entrypoints, or plain functions where\n * a React hook cannot be called. Prefer {@link usePrefersReducedMotion}\n * inside components — it subscribes to live changes.\n *\n * @returns `true` when the user has opted out of animations or when called\n *   outside a browser environment (SSR), `false` when motion is allowed.\n *\n * @remarks\n * The conservative SSR default of `true` matches\n * {@link usePrefersReducedMotion}: animations stay off until we can verify\n * the user's preference on the client.\n *\n * @example\n * // Skip a one-off entrance animation in a click handler\n * function onOpen() {\n *   if (getPrefersReducedMotion()) {\n *     element.style.opacity = \"1\";\n *     return;\n *   }\n *   element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });\n * }\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * React hook that subscribes to the user's `prefers-reduced-motion` media\n * query and re-renders when it changes.\n *\n * Defaults to `true` (reduce motion) on the server and during the first\n * client render to avoid animating before hydration. The initial client\n * effect reads the *real* preference and updates state. The underlying\n * media query used is `(prefers-reduced-motion: no-preference)` inverted —\n * \"if the system hasn't opted out, animations are allowed.\"\n *\n * @returns `true` when the user prefers reduced motion (animations should be\n *   shortened or skipped), `false` when full motion is acceptable.\n *\n * @remarks\n * If you need to support very old browsers that lack\n * `MediaQueryList.addEventListener`, consider falling back to\n * `addListener` / `removeListener`.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const prefersReducedMotion = usePrefersReducedMotion();\n * const duration = prefersReducedMotion ? 0 : 200;\n *\n * return <Modal transitionDuration={duration} />;\n *\n * @example\n * // Disable an autoplaying carousel when motion is reduced\n * const prefersReducedMotion = usePrefersReducedMotion();\n *\n * return <Carousel autoplay={!prefersReducedMotion} />;\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CA4Bd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAoCT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.70.2",
+  "version": "0.71.0",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -138,7 +138,6 @@
       "types": "./dist/data-table.d.ts",
       "import": "./dist/data-table.js"
     },
-    "./date-picker": {},
     "./description-list": {
       "@ngrok/src-live-types": "./src/components/description-list/index.ts",
       "types": "./dist/description-list.d.ts",
@@ -214,6 +213,11 @@
       "types": "./dist/multi-select.d.ts",
       "import": "./dist/multi-select.js"
     },
+    "./otp-input": {
+      "@ngrok/src-live-types": "./src/components/otp-input/index.ts",
+      "types": "./dist/otp-input.d.ts",
+      "import": "./dist/otp-input.js"
+    },
     "./pagination": {
       "@ngrok/src-live-types": "./src/components/pagination/index.ts",
       "types": "./dist/pagination.d.ts",
@@ -345,6 +349,7 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
+    "input-otp": "1.4.2",
     "react-day-picker": "9.14.0",
     "sonner": "2.0.7",
     "tailwind-merge": "3.5.0",
@@ -357,18 +362,18 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@tsdown/css": "0.21.9",
+    "@tsdown/css": "0.21.10",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitest/browser-playwright": "4.1.4",
+    "@vitest/browser-playwright": "4.1.5",
     "browserslist": "4.28.2",
     "date-fns": "4.1.0",
     "happy-dom": "20.9.0",
     "playwright": "1.59.1",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "tailwindcss": "4.2.2",
-    "tsdown": "0.21.9",
+    "tailwindcss": "4.2.4",
+    "tsdown": "0.21.10",
     "typescript": "6.0.3",
     "@cfg/tsconfig": "1.0.0"
   },
@@ -377,7 +382,7 @@
     "date-fns": "^4.1.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^4.2.2"
+    "tailwindcss": "^4.2.4"
   },
   "browserslist": [
     "last 2 years, not dead, > 0.2%"