@ngrok/mantle 0.82.0 → 0.82.1

package/dist/tooltip.d.ts

@@ -1,218 +1,2 @@
-import { ComponentProps, ComponentPropsWithoutRef } from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-//#region src/components/tooltip/tooltip.d.ts
-/**
- * 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/overlays/tooltip#tooltipprovider
- *
- * @example
- * ```tsx
- * <TooltipProvider>
- *   <Tooltip.Root>
- *     <Tooltip.Trigger asChild>
- *       <Button type="button" appearance="outlined" intent="neutral">
- *         Hover me
- *       </Button>
- *     </Tooltip.Trigger>
- *     <Tooltip.Content>
- *       This is a tooltip
- *     </Tooltip.Content>
- *   </Tooltip.Root>
- * </TooltipProvider>
- * ```
- */
-declare const TooltipProvider: ({ delayDuration, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react").JSX.Element;
-/**
- * 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. Wrap your app in `TooltipProvider` when you want shared
- * app-wide delay and hover settings.
- *
- * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
- * z-index. When multiple shared layers are open, the most recently mounted
- * layer renders on top.
- *
- * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiproot
- *
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger asChild>
- *     <Button type="button" appearance="outlined" intent="neutral">
- *       Hover me
- *     </Button>
- *   </Tooltip.Trigger>
- *   <Tooltip.Content>
- *     This is a tooltip
- *   </Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-declare function Root(props: ComponentProps<typeof TooltipPrimitive.Root>): import("react").JSX.Element;
-/**
- * The trigger button that opens the tooltip.
- *
- * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiptrigger
- *
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger asChild>
- *     <Button type="button" appearance="outlined" intent="neutral">
- *       Hover me
- *     </Button>
- *   </Tooltip.Trigger>
- *   <Tooltip.Content>
- *     This is a tooltip
- *   </Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-declare function Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): import("react").JSX.Element;
-/**
- * The content to render inside the tooltip.
- *
- * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
- * z-index. When multiple shared layers are open, the most recently mounted
- * layer renders on top.
- *
- * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltipcontent
- *
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger asChild>
- *     <Button type="button" appearance="outlined" intent="neutral">
- *       Hover me
- *     </Button>
- *   </Tooltip.Trigger>
- *   <Tooltip.Content>
- *     This is a tooltip
- *   </Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-declare const Content: ({ children, className, ref, sideOffset, ...props }: ComponentProps<typeof TooltipPrimitive.Content>) => import("react").JSX.Element;
-/**
- * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- *
- * 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.
- *
- * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
- * z-index. When multiple shared layers are open, the most recently mounted
- * layer renders on top.
- *
- * @see https://mantle.ngrok.com/components/overlays/tooltip
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
- *
- * @example
- * Composition:
- * ```
- * Tooltip.Root
- * ├── Tooltip.Trigger
- * └── Tooltip.Content
- * ```
- *
- * @example
- * ```tsx
- * <Tooltip.Root>
- *   <Tooltip.Trigger asChild>
- *     <Button type="button" appearance="outlined" intent="neutral">
- *       Hover me
- *     </Button>
- *   </Tooltip.Trigger>
- *   <Tooltip.Content>
- *     This is a tooltip
- *   </Tooltip.Content>
- * </Tooltip.Root>
- * ```
- */
-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. Wrap your app in `TooltipProvider` when you want shared
-   * app-wide delay and hover settings.
-   *
-   * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
-   * z-index. When multiple shared layers are open, the most recently mounted
-   * layer renders on top.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiproot
-   *
-   * @example
-   * ```tsx
-   * <Tooltip.Root>
-   *   <Tooltip.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">
-   *       Hover me
-   *     </Button>
-   *   </Tooltip.Trigger>
-   *   <Tooltip.Content>
-   *     This is a tooltip
-   *   </Tooltip.Content>
-   * </Tooltip.Root>
-   * ```
-   */
-  readonly Root: typeof Root;
-  /**
-   * The content to render inside the tooltip.
-   *
-   * `Tooltip.Content` renders at Tailwind `z-50`, Mantle's shared floating
-   * z-index. When multiple shared layers are open, the most recently mounted
-   * layer renders on top.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltipcontent
-   *
-   * @example
-   * ```tsx
-   * <Tooltip.Root>
-   *   <Tooltip.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">
-   *       Hover me
-   *     </Button>
-   *   </Tooltip.Trigger>
-   *   <Tooltip.Content>
-   *     This is a tooltip
-   *   </Tooltip.Content>
-   * </Tooltip.Root>
-   * ```
-   */
-  readonly Content: typeof Content;
-  /**
-   * The trigger button that opens the tooltip.
-   *
-   * @see https://mantle.ngrok.com/components/overlays/tooltip#tooltiptrigger
-   *
-   * @example
-   * ```tsx
-   * <Tooltip.Root>
-   *   <Tooltip.Trigger asChild>
-   *     <Button type="button" appearance="outlined" intent="neutral">
-   *       Hover me
-   *     </Button>
-   *   </Tooltip.Trigger>
-   *   <Tooltip.Content>
-   *     This is a tooltip
-   *   </Tooltip.Content>
-   * </Tooltip.Root>
-   * ```
-   */
-  readonly Trigger: typeof Trigger;
-};
-//#endregion
+import { n as TooltipProvider, t as Tooltip } from "./tooltip-mrpLz4DZ.js";
 export { Tooltip, TooltipProvider };

package/dist/tooltip.js

@@ -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{s as Tooltip,i as TooltipProvider};
+import{n as e,t}from"./tooltip-Dnu35cjU.js";export{t as Tooltip,e as TooltipProvider};

package/dist/well.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-Dpsqz16D.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r=!1,className:i,ref:a,...o})=>n(r?t:`div`,{ref:a,"data-slot":`well`,className:e(`border-card-muted bg-base relative rounded-md border shadow-inner`,i),...o});export{r as Well};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DpNWVci8.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r=!1,className:i,ref:a,...o})=>n(r?t:`div`,{ref:a,"data-slot":`well`,className:e(`border-card-muted bg-base relative rounded-md border shadow-inner`,i),...o});export{r as Well};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.82.0",
+  "version": "0.82.1",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",

package/dist/slot-BtwKJTLq.d.ts

@@ -1,25 +0,0 @@
-import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { ComponentProps } from "react";
-import { Slot } from "@radix-ui/react-slot";
-//#region src/components/slot/slot.d.ts
-type Props = ComponentProps<typeof Slot> & WithDataSlot;
-/**
- * Merges its props onto its immediate child. This is useful for creating
- * components that can be rendered as different elements. Automatically merges
- * className props using `cx` for proper Tailwind class handling, and
- * concatenates `data-slot` values in DOM order (the composing parent's slot
- * chain first, then the child's own) so `asChild` composition accumulates the
- * whole slot chain instead of one side clobbering the other.
- *
- * @see https://mantle.ngrok.com/components/primitives/slot
- *
- * @example
- * ```tsx
- * <Slot className="custom-class">
- *   <a href="/">Home</a>
- * </Slot>
- * ```
- */
-declare const Slot$1: ({ children, className, "data-slot": dataSlot, ref, ...props }: Props) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-//#endregion
-export { Slot$1 as t };

package/dist/slot-Dpsqz16D.js

@@ -1 +0,0 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{Children as n,cloneElement as r,isValidElement as i}from"react";import{jsx as a}from"react/jsx-runtime";import{Slot as o}from"@radix-ui/react-slot";const s=({children:s,className:c,"data-slot":l,ref:u,...d})=>i(s)?a(o,{ref:u,...d,children:r(s,{...s.props,className:e(c,s.props.className),"data-slot":t(l,s.props[`data-slot`])})}):n.only(s);export{s as t};

package/dist/theme-IAnQ35bd.js

@@ -1 +0,0 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{n as t}from"./browser-only-CmEEzfU3.js";import{t as n}from"./use-matches-media-query-CMSxHR9n.js";import{createContext as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";const d=[`light`,`dark`,`light-high-contrast`,`dark-high-contrast`],f=[`system`,...d],p=e=>e;function m(e){return typeof e==`string`&&f.includes(e)}const h=e=>e;function g(e){return typeof e==`string`&&d.includes(e)}const _=`(prefers-color-scheme: dark)`,v=`(prefers-contrast: more)`,y=`mantle-ui-theme`,b=`system`,x=r([`system`,()=>null]);function S({children:e}){let[n,r]=c(()=>{let e=N({cookie:t()?document.cookie:null});return w(e),e}),i=s(null);a(()=>{function e(e){let t=e??N({cookie:document.cookie});r(t),w(t)}e();try{`BroadcastChannel`in window&&(i.current=new BroadcastChannel(y),i.current.addEventListener(`message`,t=>{let n=t?.data?.theme;m(n)&&e(n)}))}catch{}function t(t){t.key===`${y}__ping`&&e()}window.addEventListener(`storage`,t);let n=window.matchMedia(_),a=window.matchMedia(v);function o(){e()}function s(){document.visibilityState===`visible`&&e()}return n.addEventListener(`change`,o),a.addEventListener(`change`,o),window.addEventListener(`pageshow`,o),document.addEventListener(`visibilitychange`,s),()=>{window.removeEventListener(`storage`,t),n.removeEventListener(`change`,o),a.removeEventListener(`change`,o),window.removeEventListener(`pageshow`,o),document.removeEventListener(`visibilitychange`,s);try{i.current?.close()}catch{}i.current=null}},[]);let l=o(()=>[n,e=>{L(e),r(e),w(e),F(e,{broadcastChannel:i.current,pingKey:`${y}__ping`})}],[n]);return u(x.Provider,{value:l,children:e})}function C(){let e=i(x);return l(e,`useTheme must be used within a ThemeProvider`),e}function w(e){if(!t())return;let n=window.document.documentElement,r=window.matchMedia(_).matches,i=window.matchMedia(v).matches,a=E(e,{prefersDarkMode:r,prefersHighContrast:i}),o=n.dataset.theme,s=n.dataset.appliedTheme,c=m(o)?o:void 0,l=g(s)?s:void 0;(c!==e||l!==a)&&(n.classList.remove(...d),n.classList.add(a),n.dataset.theme=e,n.dataset.appliedTheme=a)}function T(){if(!t())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,n=m(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:g(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:n}}function E(e,{prefersDarkMode:t,prefersHighContrast:n}){return e===`system`?O({prefersDarkMode:t,prefersHighContrast:n}):e}function D(){let e=i(x);return E(e==null?`system`:e[0],{prefersDarkMode:n(_),prefersHighContrast:n(v)})}function O({prefersDarkMode:e,prefersHighContrast:t}){return t?e?`dark-high-contrast`:`light-high-contrast`:e?`dark`:`light`}function k(e){let{storageKey:t,defaultTheme:n,themes:r,resolvedThemes:i,prefersDarkModeMediaQuery:a,prefersHighContrastMediaQuery:o}=e;function s(e){return typeof e==`string`&&r.includes(e)}function c(e){let t=document.cookie;if(!t)return null;try{let n=t.split(`;`).find(t=>t.trim().startsWith(`${e}=`))?.split(`=`)[1];return n?decodeURIComponent(n):null}catch{return null}}function l(e,t){let n=new Date;n.setFullYear(n.getFullYear()+1);let r=window.location.hostname,i=window.location.protocol,a=r===`ngrok.com`||r.endsWith(`.ngrok.com`)?`; domain=.ngrok.com`:``,o=i===`https:`?`; Secure`:``;return`${e}=${encodeURIComponent(t)}; expires=${n.toUTCString()}; path=/${a}; SameSite=Lax${o}`}function u(e,t){try{document.cookie=l(e,t)}catch{}}function d(e,t,n){return e===`system`?n?t?`dark-high-contrast`:`light-high-contrast`:t?`dark`:`light`:e}let f=null,p=null,m=null;try{f=c(t)}catch{}if(s(f))m=f;else{try{p=window.localStorage?.getItem(t)??null}catch{}s(p)&&(m=p)}let h=s(m)?m:n,g=matchMedia(a).matches,_=matchMedia(o).matches,v=d(h,g,_),y=document.documentElement;if(y.dataset.appliedTheme!==v||y.dataset.theme!==h){for(let e of i)y.classList.remove(e);y.classList.add(v),y.dataset.theme=h,y.dataset.appliedTheme=v}let b=s(f);try{if(s(p)&&!b){u(t,p);try{window.localStorage.removeItem(t)}catch{}}else b||u(t,h)}catch{}}function A(){let e={storageKey:y,defaultTheme:b,themes:f,resolvedThemes:d,prefersDarkModeMediaQuery:_,prefersHighContrastMediaQuery:v};return`(${k.toString()})(${JSON.stringify(e)})`}const j=({nonce:e})=>u(`script`,{dangerouslySetInnerHTML:{__html:A()},nonce:e,suppressHydrationWarning:!0});function M(n={}){let{className:r=``,ssrCookie:i}=n??{};return o(()=>{let n,a;if(!t())n=N({cookie:i}),a=E(n,{prefersDarkMode:!1,prefersHighContrast:!1});else{let e=window.matchMedia(_).matches,t=window.matchMedia(v).matches;n=N({cookie:document.cookie}),a=E(n,{prefersDarkMode:e,prefersHighContrast:t})}return{className:e(r,a),"data-applied-theme":a,"data-theme":n}},[r,i])}function N({cookie:e}){if(!e)return b;try{let t=e.split(`;`).find(e=>e.trim().startsWith(`${y}=`))?.split(`=`)[1],n=t?globalThis.decodeURIComponent(t):null;return m(n)?n:b}catch{return b}}function P(e){if(e)return e.split(`;`).map(e=>e.trim()).find(e=>e.startsWith(`${y}=`))}function F(e,t){let{broadcastChannel:n,pingKey:r}=t;try{if(n){n.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(r,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function I(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:n,protocol:r}=window.location,i=n===`ngrok.com`||n.endsWith(`.ngrok.com`)?`; domain=.ngrok.com`:``,a=r===`https:`?`; Secure`:``;return`${y}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${a}`}function L(e){if(t())try{document.cookie=I(e)}catch{}}export{A as a,M as c,p as d,g as f,f as h,N as i,C as l,d as m,S as n,T as o,m as p,P as r,D as s,j as t,h as u};