@ngrok/mantle 0.83.9 → 0.84.0

package/README.md

@@ -74,10 +74,10 @@ const result = await highlighter.highlight({
 
 ## Related Packages
 
-| Package                                   | Description                                                                            | Links                                                                                                                                                                        |
-| ----------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@ngrok/mantle-vite-plugins`              | Vite + rehype plugins for code block highlighting and Tailwind CSS source optimization | [GitHub](https://github.com/ngrok/mantle/tree/main/packages/mantle-vite-plugins) · [npm](https://www.npmjs.com/package/@ngrok/mantle-vite-plugins)                           |
-| `@ngrok/mantle-server-syntax-highlighter` | Server-side syntax highlighting engine powered by Shiki                                | [GitHub](https://github.com/ngrok/mantle/tree/main/packages/mantle-server-syntax-highlighter) · [npm](https://www.npmjs.com/package/@ngrok/mantle-server-syntax-highlighter) |
+| Package                                   | Description                                             | Links                                                                                                                                                                        |
+| ----------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@ngrok/mantle-vite-plugins`              | Vite + rehype plugins for code block highlighting       | [GitHub](https://github.com/ngrok/mantle/tree/main/packages/mantle-vite-plugins) · [npm](https://www.npmjs.com/package/@ngrok/mantle-vite-plugins)                           |
+| `@ngrok/mantle-server-syntax-highlighter` | Server-side syntax highlighting engine powered by Shiki | [GitHub](https://github.com/ngrok/mantle/tree/main/packages/mantle-server-syntax-highlighter) · [npm](https://www.npmjs.com/package/@ngrok/mantle-server-syntax-highlighter) |
 
 ## Contributing
 

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.83.9",
+	"version": "0.84.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -57,6 +57,7 @@
 		"@ngrok/mantle/label",
 		"@ngrok/mantle/line-chart",
 		"@ngrok/mantle/list",
+		"@ngrok/mantle/live-region",
 		"@ngrok/mantle/main",
 		"@ngrok/mantle/media-object",
 		"@ngrok/mantle/multi-select",
@@ -89,6 +90,7 @@
 		"@ngrok/mantle/tooltip",
 		"@ngrok/mantle/types",
 		"@ngrok/mantle/utils",
+		"@ngrok/mantle/visually-hidden",
 		"@ngrok/mantle/well"
 	]
 }

package/dist/hooks.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./use-is-hydrated-DDCqXmju.js";import{t as r}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as i}from"./use-callback-ref-IYti9y7x.js";import{t as a}from"./use-matches-media-query-Bd_GhhVd.js";import{n as o,t as s}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{n as c,r as l,t as u}from"./use-breakpoint-Dqu12Szq.js";import{t as d}from"./in-view-C2DpZ6s0.js";import{useCallback as f,useEffect as p,useMemo as m,useReducer as h,useRef as g,useState as _,useSyncExternalStore as v}from"react";function y(e,t){let[n,r]=_(e);return p(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function b(e,t){let n=i(e),r=g(0);return p(()=>()=>window.clearTimeout(r.current),[]),f((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function x(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function S(){return null}function C(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function w(e,t){let n=m(()=>x(e),[e]),r=v(n,()=>window.localStorage.getItem(e),S);return[r==null?t:C(r,t),f(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function T(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function E(){return null}function D(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function O(e,t){let n=m(()=>T(e),[e]),r=v(n,()=>window.sessionStorage.getItem(e),E);return[r==null?t:D(r,t),f(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function k(){let e=o();return m(()=>e?`auto`:`smooth`,[e])}function A(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,s]=_(a);return p(()=>{if(!e.current||i&&o)return;function a(){return s(!0),i?void 0:()=>s(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return d(e.current,a,c)},[t,e,n,i,r]),o}function j(){let e=g([]),t=g([]),[,n]=h(e=>e+1,0),r=f(r=>{e.current.push(r),t.current=[],n()},[]),i=f(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=f(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return m(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{u as breakpoints,s as getPrefersReducedMotion,c as useBreakpoint,i as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,y as useDebounce,b as useDebouncedCallback,A as useInView,l as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,w as useLocalStorage,a as useMatchesMediaQuery,o as usePrefersReducedMotion,k as useScrollBehavior,O as useSessionStorage,j as useUndoRedo};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./use-is-hydrated-DDCqXmju.js";import{t as r}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as i}from"./use-callback-ref-IYti9y7x.js";import{t as a}from"./use-matches-media-query-Bd_GhhVd.js";import{n as o,t as s}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{n as c,r as l,t as u}from"./use-breakpoint-Dqu12Szq.js";import{t as d}from"./in-view-T_AAYaaF.js";import{useCallback as f,useEffect as p,useMemo as m,useReducer as h,useRef as g,useState as _,useSyncExternalStore as v}from"react";function y(e,t){let[n,r]=_(e);return p(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function b(e,t){let n=i(e),r=g(0);return p(()=>()=>window.clearTimeout(r.current),[]),f((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function x(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function S(){return null}function C(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function w(e,t){let n=m(()=>x(e),[e]),r=v(n,()=>window.localStorage.getItem(e),S);return[r==null?t:C(r,t),f(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function T(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function E(){return null}function D(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function O(e,t){let n=m(()=>T(e),[e]),r=v(n,()=>window.sessionStorage.getItem(e),E);return[r==null?t:D(r,t),f(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function k(){let e=o();return m(()=>e?`auto`:`smooth`,[e])}function A(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,s]=_(a);return p(()=>{if(!e.current||i&&o)return;function a(){return s(!0),i?void 0:()=>s(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return d(e.current,a,c)},[t,e,n,i,r]),o}function j(){let e=g([]),t=g([]),[,n]=h(e=>e+1,0),r=f(r=>{e.current.push(r),t.current=[],n()},[]),i=f(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=f(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return m(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{u as breakpoints,s as getPrefersReducedMotion,c as useBreakpoint,i as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,y as useDebounce,b as useDebouncedCallback,A as useInView,l as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,w as useLocalStorage,a as useMatchesMediaQuery,o as usePrefersReducedMotion,k as useScrollBehavior,O as useSessionStorage,j as useUndoRedo};

package/dist/in-view-T_AAYaaF.js

@@ -0,0 +1 @@
+const e={some:0,all:1};function t(t,n,{root:r,margin:i,amount:a=`some`}={}){let o=new WeakMap,s=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target);if(e.isIntersecting!==!!t){if(e.isIntersecting){let t=n(e.target,e);typeof t==`function`?o.set(e.target,t):s.unobserve(e.target)}else typeof t==`function`&&(t(e),o.delete(e.target))}})},{root:r,rootMargin:i,threshold:typeof a==`number`?a:e[a]});return s.observe(t),()=>{s.unobserve(t),s.disconnect()}}export{t};

package/dist/live-region.d.ts

@@ -0,0 +1,68 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { ComponentProps } from "react";
+//#region src/components/live-region/live-region.d.ts
+type LiveRegionProps = ComponentProps<"span"> & WithAsChild & {
+  /**
+   * How urgently a screen reader announces a changed message: `"polite"`
+   * waits for the current utterance to finish, `"assertive"` interrupts it.
+   * `"polite"` renders `role="status"`; `"assertive"` renders `role="alert"`.
+   *
+   * @default "polite"
+   */
+  politeness?: "polite" | "assertive";
+};
+/**
+ * Announces its text to screen readers when the text changes. Renders a
+ * persistent, visually hidden `<span>` live region with `role="status"` and
+ * `aria-live="polite"`. When `politeness` is `"assertive"`, it renders
+ * `role="alert"` alone: the role already carries assertive live-region
+ * semantics, and a redundant `aria-live` makes VoiceOver on iOS announce the
+ * message twice.
+ *
+ * A live region announces reliably only when it already exists in the
+ * accessibility tree before its text changes. Keep `LiveRegion` mounted from
+ * first paint and swap only its children. A screen reader does not
+ * re-announce a message identical to the previous one; when the same message
+ * must repeat, clear the children first. The derived `role` and `aria-live`
+ * read as defaults: a `role` or `aria-live` prop wins.
+ *
+ * **When to use**
+ * - Announce a completed client-side navigation: the new page name, after a route change.
+ * - Announce an async result that moves focus nowhere: "3 results found", "Draft saved".
+ *
+ * **When not to use**
+ * - For status the user must see. Use {@link https://mantle.ngrok.com/components/feedback/alert Alert} or {@link https://mantle.ngrok.com/components/feedback/toast Toast}, which pair visible UI with their own announcements.
+ * - For hidden text that never changes. Use {@link https://mantle.ngrok.com/components/primitives/visually-hidden VisuallyHidden}.
+ *
+ * **Polymorphism.** Pass `asChild` to render the live region as a different
+ * element instead of the default `<span>`.
+ *
+ * | Data Attribute | Value           | Description                                                               |
+ * | -------------- | --------------- | ------------------------------------------------------------------------- |
+ * | `data-slot`    | `"live-region"` | Stamped on the rendered element, and joined onto the child via `asChild`. |
+ *
+ * @see https://mantle.ngrok.com/components/primitives/live-region
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions
+ *
+ * @example
+ * ```tsx
+ * import { LiveRegion } from "@ngrok/mantle/live-region";
+ *
+ * // Mount the region before the first message, then swap the message.
+ * function SearchResults({ results }: { results: string[] }) {
+ *   return (
+ *     <>
+ *       <LiveRegion>{`${results.length} results found`}</LiveRegion>
+ *       <ul>
+ *         {results.map((result) => (
+ *           <li key={result}>{result}</li>
+ *         ))}
+ *       </ul>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const LiveRegion: ({ asChild, className, politeness, ref, ...props }: LiveRegionProps) => import("react").JSX.Element;
+//#endregion
+export { LiveRegion };

package/dist/live-region.js

@@ -0,0 +1 @@
+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,className:i,politeness:a=`polite`,ref:o,...s})=>n(r?t:`span`,{ref:o,"data-slot":`live-region`,role:a===`assertive`?`alert`:`status`,"aria-live":a===`assertive`?void 0:`polite`,"aria-atomic":`true`,className:e(`sr-only`,i),...s});export{r as LiveRegion};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.83.9)
+# @ngrok/mantle (0.84.0)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 
@@ -60,6 +60,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/label`
 - `@ngrok/mantle/line-chart`
 - `@ngrok/mantle/list`
+- `@ngrok/mantle/live-region`
 - `@ngrok/mantle/main`
 - `@ngrok/mantle/media-object`
 - `@ngrok/mantle/multi-select`
@@ -92,4 +93,5 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/tooltip`
 - `@ngrok/mantle/types`
 - `@ngrok/mantle/utils`
+- `@ngrok/mantle/visually-hidden`
 - `@ngrok/mantle/well`

package/dist/multi-select.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./slot-DpNWVci8.js";import{r as i}from"./layer-container-CglTh9-6.js";import{a,r as o}from"./field-Bpptk_9t.js";import{t as s}from"./field-B1wqeZr4.js";import{n as c}from"./separator-D0D6VyyM.js";import{t as l}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{XIcon as b}from"@phosphor-icons/react/X";import{CheckIcon as x}from"@phosphor-icons/react/Check";import*as S from"@ariakit/react";import{LockIcon as C}from"@phosphor-icons/react/Lock";const w=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),T=[],E=u({current:null}),D=u({current:[]}),O=u({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),k=({children:e,defaultSelectedValue:t=T,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return v(E.Provider,{value:r,children:v(O.Provider,{value:s,children:v(D.Provider,{value:o,children:v(S.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})},A=({"aria-invalid":n,className:r,children:i,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...d})=>{let p=f(E),{inputRef:m}=f(O),h=S.useComboboxContext(),g=a(),{validation:_}=o({"aria-invalid":n,validation:u??g});return v(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":_||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,l),...d,children:i})},j=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=h(null);return y(`span`,{ref:e(u,c),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),N(e.currentTarget);return}s?.(e)},...l,children:[i,v(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&N(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:v(n,{svg:o?v(C,{}):v(b,{weight:`bold`}),className:`size-4`})})]})},M={Root:k,Trigger:A,TagValues:({children:e,lockedValues:t=T})=>{let n=S.useComboboxContext(),r=S.useStoreState(n,`selectedValue`),i=(w(r)?r:void 0)??T,a=h(i);a.current=i;let o=f(D);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(O),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let g=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!w(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},x=()=>{u.current?.focus()},C=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):x();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&N(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;g(()=>b(e))}else g(()=>{a.current.length>0?b(0):x()});else g(()=>{t<a.current.length?b(t):x()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),x(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&x()}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&N(t)}else y(e)}},v(_,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&N(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>C(e,n),onClick:()=>b(n)};return e?e(r):v(j,{...r},t)})})},Input:({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:o,onValueChange:c,placeholder:l,ref:u,...d})=>{let p=S.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(O),g=f(s),_=S.useStoreState(p,`selectedValue`),y=((w(_)?_:void 0)?.length??0)>0;return v(S.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,u),...d,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})},Tag:j,Content:({asChild:e=!1,backdrop:n=!1,children:a,className:o,modal:s=!0,portalElement:c,preventBodyScroll:l,ref:u,sameWidth:m=!0,unmountOnHide:h=!0,..._})=>{let y=f(E),b=i(),[x,C]=g(!1);p(()=>{C(y.current?.closest(`[data-mantle-modal-content]`)!=null)},[y]);let w=x||b!=null,T=d(()=>y.current?.getBoundingClientRect()??null,[y]),D=d(e=>typeof c==`function`?c(e):c??y.current?.closest(`[data-mantle-modal-content]`)??(b instanceof HTMLElement?b:null)??e.ownerDocument.body,[b,c,y]),O=d(e=>!(e.target instanceof Node&&y.current?.contains(e.target)),[y]);return v(S.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,o),backdrop:n,getAnchorRect:T,gutter:4,hideOnInteractOutside:O,modal:s,portalElement:D,preventBodyScroll:l??!w,ref:u,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,sameWidth:m,unmountOnHide:h,..._,children:a})},ContentFooter:({className:e,children:n,ref:r,...i})=>v(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:n}),Item:({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let d=f(D),p=s!=null&&d.current.includes(s);return y(S.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:l,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,v(S.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:v(n,{svg:v(x,{weight:`bold`}),className:`size-4 text-accent-600`})})]})},Group:({asChild:e=!1,children:t,ref:n,...i})=>v(S.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,...i,children:t}),GroupLabel:({asChild:e=!1,children:n,className:i,ref:a,...o})=>v(S.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,...o,children:n}),GroupDescription:({className:e,children:n,ref:r,...i})=>v(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n}),Separator:({className:e,ref:n,...r})=>v(c,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r}),Empty:({className:e,children:n,ref:r,...i})=>v(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n})};function N(e){l()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{M as MultiSelect};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./slot-DpNWVci8.js";import{r as i}from"./layer-container-CglTh9-6.js";import{a,r as o}from"./field-Bpptk_9t.js";import{t as s}from"./field-B1wqeZr4.js";import{n as c}from"./separator-D0D6VyyM.js";import{t as l}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{XIcon as b}from"@phosphor-icons/react/X";import{CheckIcon as x}from"@phosphor-icons/react/Check";import*as S from"@ariakit/react";import{LockIcon as C}from"@phosphor-icons/react/Lock";const w=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),T=[],E=u({current:null}),D=u({current:[]}),O=u({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),k=({children:e,defaultSelectedValue:t=T,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return v(E.Provider,{value:r,children:v(O.Provider,{value:s,children:v(D.Provider,{value:o,children:v(S.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})},A=({"aria-invalid":n,className:r,children:i,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...d})=>{let p=f(E),{inputRef:m}=f(O),h=S.useComboboxContext(),g=a(),{validation:_}=o({"aria-invalid":n,validation:u??g});return v(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":_||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,l),...d,children:i})},j=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=h(null);return y(`span`,{ref:e(u,c),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),N(e.currentTarget);return}s?.(e)},...l,children:[i,v(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&N(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:v(n,{svg:o?v(C,{}):v(b,{weight:`bold`}),className:`size-4`})})]})},M={Root:k,Trigger:A,TagValues:({children:e,lockedValues:t=T})=>{let n=S.useComboboxContext(),r=S.useStoreState(n,`selectedValue`),i=(w(r)?r:void 0)??T,a=h(i);a.current=i;let o=f(D);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(O),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let g=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!w(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},x=()=>{u.current?.focus()},C=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):x();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&N(e);break}if(y(n),e.key===`Backspace`){if(t>0){let e=t-1;g(()=>b(e))}else g(()=>{a.current.length>0?b(0):x()})}else g(()=>{t<a.current.length?b(t):x()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),x(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&x()}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null){if(o.current.includes(e)){let t=c.current.get(e);t&&N(t)}else y(e)}}},v(_,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&N(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>C(e,n),onClick:()=>b(n)};return e?e(r):v(j,{...r},t)})})},Input:({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:o,onValueChange:c,placeholder:l,ref:u,...d})=>{let p=S.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(O),g=f(s),_=S.useStoreState(p,`selectedValue`),y=((w(_)?_:void 0)?.length??0)>0;return v(S.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,u),...d,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})},Tag:j,Content:({asChild:e=!1,backdrop:n=!1,children:a,className:o,modal:s=!0,portalElement:c,preventBodyScroll:l,ref:u,sameWidth:m=!0,unmountOnHide:h=!0,..._})=>{let y=f(E),b=i(),[x,C]=g(!1);p(()=>{C(y.current?.closest(`[data-mantle-modal-content]`)!=null)},[y]);let w=x||b!=null,T=d(()=>y.current?.getBoundingClientRect()??null,[y]),D=d(e=>typeof c==`function`?c(e):c??y.current?.closest(`[data-mantle-modal-content]`)??(b instanceof HTMLElement?b:null)??e.ownerDocument.body,[b,c,y]),O=d(e=>!(e.target instanceof Node&&y.current?.contains(e.target)),[y]);return v(S.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,o),backdrop:n,getAnchorRect:T,gutter:4,hideOnInteractOutside:O,modal:s,portalElement:D,preventBodyScroll:l??!w,ref:u,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,sameWidth:m,unmountOnHide:h,..._,children:a})},ContentFooter:({className:e,children:n,ref:r,...i})=>v(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:n}),Item:({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let d=f(D),p=s!=null&&d.current.includes(s);return y(S.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:l,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,v(S.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:v(n,{svg:v(x,{weight:`bold`}),className:`size-4 text-accent-600`})})]})},Group:({asChild:e=!1,children:t,ref:n,...i})=>v(S.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,...i,children:t}),GroupLabel:({asChild:e=!1,children:n,className:i,ref:a,...o})=>v(S.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,...o,children:n}),GroupDescription:({className:e,children:n,ref:r,...i})=>v(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n}),Separator:({className:e,ref:n,...r})=>v(c,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r}),Empty:({className:e,children:n,ref:r,...i})=>v(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n})};function N(e){l()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{M as MultiSelect};

package/dist/sandbar.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{t as i}from"./slot-DpNWVci8.js";import{t as a}from"./button-Bc0lEOJ2.js";import{t as o}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as s,useCallback as c,useContext as l,useEffect as u,useId as d,useImperativeHandle as f,useMemo as p,useRef as m,useState as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=`Unsaved changes`,b=1e3,ee=[{transform:`translateX(0)`},{transform:`translateX(-8px)`},{transform:`translateX(8px)`},{transform:`translateX(-6px)`},{transform:`translateX(6px)`},{transform:`translateX(-3px)`},{transform:`translateX(3px)`},{transform:`translateX(0)`}];function x(e,t){let n=t.current?`${e}\u00A0`:e;return t.current=!t.current,n}const S=s(null);function C(e){let t=l(S);return g(t,`${e} must be rendered as a child of <Sandbar.Root>.`),t}const w={Root:({"aria-label":e,"aria-labelledby":i,children:a,className:s,"data-slot":l,handleRef:d,onTransitionEnd:g,open:C,ref:w,...T})=>{let[E,D]=h(C?`open`:`closed`),[O,k]=h(``),[A,j]=h(``),[M,N]=h(null),P=m(null),F=m(null),I=t(F,w),L=m(null),R=m(void 0),z=m(void 0),B=m(void 0),te=m(!1),ne=m(!1),V=m(!1),H=m(null),U=m(null),W=m(C),G=m(E),K=c(e=>{k(x(e,te)),window.clearTimeout(R.current),R.current=window.setTimeout(()=>{k(``)},b)},[]),q=c(e=>{j(x(e,ne)),window.clearTimeout(z.current),z.current=window.setTimeout(()=>{j(``)},b)},[]),J=c(e=>(N(e),()=>{N(t=>t===e?null:t)}),[]),Y=c(({button:e,isSaving:t})=>{let n=V.current;if(V.current=t,!t||n||(K(`Saving changes…`),e==null||!e.matches(`:disabled`)))return;let r=document.activeElement,i=r===e,a=r===document.body&&U.current===e;(i||a)&&F.current?.focus({preventScroll:!0})},[K]),X=c(e=>{q(e?.announcement??`You have unsaved changes. Save or discard them before leaving.`);let t=F.current;if(t==null||o()||typeof t.animate!=`function`)return;L.current!=null&&(L.current.cancel(),L.current=null);let n=t.animate(ee,{duration:400,easing:`ease-in-out`});n.onfinish=()=>{L.current=null},L.current=n},[q]);f(d,()=>({shake:X}),[X]);let re=p(()=>({announceAssertive:q,registerMessage:J,reportSaving:Y}),[q,J,Y]);u(()=>{D(C?e=>e===`open`||e===`opening`?e:e===`closing`?`open`:`opening`:e=>e===`closed`?e:e===`opening`?`closed`:`closing`)},[C]),u(()=>{if(E!==`opening`)return;let e=window.requestAnimationFrame(()=>{e=window.requestAnimationFrame(()=>{D(e=>e===`opening`?`open`:e)})});return()=>{window.cancelAnimationFrame(e)}},[E]),u(()=>{if(E!==`closing`)return;let e=window.setTimeout(()=>{D(`closed`)},400);return()=>{window.clearTimeout(e)}},[E]),u(()=>{let t=W.current;if(W.current=C,!C){t&&(window.clearTimeout(R.current),k(``));return}if(t)return;let n=(F.current?.querySelector(`[data-slot~="sandbar-message"]`))?.textContent?.trim();K(n||e||y)},[K,e,C]),u(()=>{let e=G.current;if(G.current=E,E!==`closed`||e!==`closing`)return;let t=P.current,n=document.activeElement,r=t!=null&&n instanceof HTMLElement&&t.contains(n),i=n===document.body&&U.current!=null,a=H.current;H.current=null,U.current=null,!(!r&&!i)&&(a==null||!a.isConnected||a.matches(`:disabled`)||typeof a.checkVisibility==`function`&&!a.checkVisibility()||a.focus())},[E]),u(()=>()=>{window.clearTimeout(R.current),window.clearTimeout(z.current),B.current!=null&&window.cancelAnimationFrame(B.current),L.current?.cancel()},[]);let ie=e=>{let t=P.current,n=e.relatedTarget;t!=null&&(n==null||!t.contains(n))&&n instanceof HTMLElement&&(H.current=n),e.target instanceof HTMLElement&&(U.current=e.target)},Z=e=>{if(e.relatedTarget!=null){let t=P.current;(t==null||!t.contains(e.relatedTarget))&&(U.current=null);return}let t=e.target;t instanceof HTMLElement&&(B.current!=null&&window.cancelAnimationFrame(B.current),B.current=window.requestAnimationFrame(()=>{B.current=void 0;let e=F.current;e==null||e.hidden||(!t.isConnected||t.matches(`:disabled`)||t.hidden)&&document.activeElement===document.body&&e.focus({preventScroll:!0})}))},ae=e=>{g?.(e),e.target===e.currentTarget&&(e.propertyName===`opacity`||e.propertyName===`translate`)&&D(e=>e===`closing`?`closed`:e)},Q=i??(e==null&&M!=null?M:void 0),oe=Q==null?e??y:e,$=E===`closed`,se=$||E===`closing`;return _(S.Provider,{value:re,children:v(`div`,{className:`pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4 sm:bottom-10`,onBlur:Z,onFocus:ie,ref:P,children:[_(`div`,{"aria-atomic":`true`,"aria-live":`polite`,className:`sr-only`,role:`status`,children:O}),_(`div`,{className:`sr-only`,role:`alert`,children:A}),_(`div`,{className:n(`invert-theme pointer-events-auto flex w-fit max-w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 rounded-2xl border border-transparent bg-base px-4 py-3 text-strong shadow-lg`,`max-h-[60svh] overflow-y-auto`,`focus:outline-hidden`,`[&[hidden]]:hidden`,`transition-[opacity,translate] ease-out`,`data-state-open:duration-400`,`data-state-closed:pointer-events-none data-state-closed:opacity-0 data-state-closed:duration-200 motion-safe:data-state-closed:translate-y-[calc(100%+2.5rem)]`,`data-state-closed:ease-[cubic-bezier(0.4,0,1,1),cubic-bezier(0,0,0.2,1)]`,s),...T,"aria-label":oe,"aria-labelledby":Q,"data-slot":r(l,`sandbar`),"data-state":E===`open`?`open`:`closed`,hidden:$?!0:void 0,inert:se?!0:void 0,onTransitionEnd:ae,ref:I,role:`group`,tabIndex:-1,children:a})]})})},Message:({asChild:a,className:o,"data-slot":s,id:c,ref:l,...u})=>{let{registerMessage:f}=C(`Sandbar.Message`),p=d(),h=c??p,g=m(null),v=t(g,l);return e(()=>f(g.current?.id||h),[h,f]),_(a?i:`p`,{className:n(`text-sm font-sans`,o),id:h,...u,"data-slot":r(s,`sandbar-message`),ref:v})},Actions:({asChild:e,className:t,"data-slot":a,...o})=>_(e?i:`div`,{className:n(`flex flex-wrap items-center justify-center gap-2`,t),...o,"data-slot":r(a,`sandbar-actions`)}),SaveButton:({appearance:n=`filled`,children:i,"data-slot":o,intent:s=`neutral`,isLoading:c=!1,ref:l,...u})=>{let{reportSaving:d}=C(`Sandbar.SaveButton`),f=m(null),p=t(f,l);return e(()=>{d({button:f.current,isSaving:!!c})},[c,d]),e(()=>()=>{d({button:null,isSaving:!1})},[d]),_(a,{appearance:n,intent:s,isLoading:c,ref:p,...u,"data-slot":r(o,`sandbar-save-button`),children:i})},DiscardButton:({appearance:e=`outlined`,children:t,"data-slot":n,intent:i=`neutral`,...o})=>_(a,{appearance:e,intent:i,...o,"data-slot":r(n,`sandbar-discard-button`),children:t})};export{w as Sandbar};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{t as i}from"./slot-DpNWVci8.js";import{t as a}from"./button-Bc0lEOJ2.js";import{t as o}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{createContext as s,useCallback as c,useContext as l,useEffect as u,useId as d,useImperativeHandle as f,useMemo as p,useRef as m,useState as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=`Unsaved changes`,b=1e3,ee=[{transform:`translateX(0)`},{transform:`translateX(-8px)`},{transform:`translateX(8px)`},{transform:`translateX(-6px)`},{transform:`translateX(6px)`},{transform:`translateX(-3px)`},{transform:`translateX(3px)`},{transform:`translateX(0)`}];function x(e,t){let n=t.current?`${e}\u00A0`:e;return t.current=!t.current,n}const S=s(null);function C(e){let t=l(S);return g(t,`${e} must be rendered as a child of <Sandbar.Root>.`),t}const w={Root:({"aria-label":e,"aria-labelledby":i,children:a,className:s,"data-slot":l,handleRef:d,onTransitionEnd:g,open:C,ref:w,...T})=>{let[E,D]=h(C?`open`:`closed`),[O,k]=h(``),[A,j]=h(``),[M,N]=h(null),P=m(null),F=m(null),I=t(F,w),L=m(null),R=m(void 0),z=m(void 0),B=m(void 0),te=m(!1),ne=m(!1),V=m(!1),H=m(null),U=m(null),W=m(C),G=m(E),K=c(e=>{k(x(e,te)),window.clearTimeout(R.current),R.current=window.setTimeout(()=>{k(``)},b)},[]),q=c(e=>{j(x(e,ne)),window.clearTimeout(z.current),z.current=window.setTimeout(()=>{j(``)},b)},[]),J=c(e=>(N(e),()=>{N(t=>t===e?null:t)}),[]),Y=c(({button:e,isSaving:t})=>{let n=V.current;if(V.current=t,!t||n||(K(`Saving changes…`),e==null||!e.matches(`:disabled`)))return;let r=document.activeElement,i=r===e,a=r===document.body&&U.current===e;(i||a)&&F.current?.focus({preventScroll:!0})},[K]),X=c(e=>{q(e?.announcement??`You have unsaved changes. Save or discard them before leaving.`);let t=F.current;if(t==null||o()||typeof t.animate!=`function`)return;L.current!=null&&(L.current.cancel(),L.current=null);let n=t.animate(ee,{duration:400,easing:`ease-in-out`});n.finished.catch(()=>{}),n.onfinish=()=>{L.current=null},L.current=n},[q]);f(d,()=>({shake:X}),[X]);let re=p(()=>({announceAssertive:q,registerMessage:J,reportSaving:Y}),[q,J,Y]);u(()=>{D(C?e=>e===`open`||e===`opening`?e:e===`closing`?`open`:`opening`:e=>e===`closed`?e:e===`opening`?`closed`:`closing`)},[C]),u(()=>{if(E!==`opening`)return;let e=window.requestAnimationFrame(()=>{e=window.requestAnimationFrame(()=>{D(e=>e===`opening`?`open`:e)})});return()=>{window.cancelAnimationFrame(e)}},[E]),u(()=>{if(E!==`closing`)return;let e=window.setTimeout(()=>{D(`closed`)},400);return()=>{window.clearTimeout(e)}},[E]),u(()=>{let t=W.current;if(W.current=C,!C){t&&(window.clearTimeout(R.current),k(``));return}if(t)return;let n=(F.current?.querySelector(`[data-slot~="sandbar-message"]`))?.textContent?.trim();K(n||e||y)},[K,e,C]),u(()=>{let e=G.current;if(G.current=E,E!==`closed`||e!==`closing`)return;let t=P.current,n=document.activeElement,r=t!=null&&n instanceof HTMLElement&&t.contains(n),i=n===document.body&&U.current!=null,a=H.current;H.current=null,U.current=null,!(!r&&!i)&&(a==null||!a.isConnected||a.matches(`:disabled`)||typeof a.checkVisibility==`function`&&!a.checkVisibility()||a.focus())},[E]),u(()=>()=>{window.clearTimeout(R.current),window.clearTimeout(z.current),B.current!=null&&window.cancelAnimationFrame(B.current),L.current?.cancel()},[]);let ie=e=>{let t=P.current,n=e.relatedTarget;t!=null&&(n==null||!t.contains(n))&&n instanceof HTMLElement&&(H.current=n),e.target instanceof HTMLElement&&(U.current=e.target)},Z=e=>{if(e.relatedTarget!=null){let t=P.current;(t==null||!t.contains(e.relatedTarget))&&(U.current=null);return}let t=e.target;t instanceof HTMLElement&&(B.current!=null&&window.cancelAnimationFrame(B.current),B.current=window.requestAnimationFrame(()=>{B.current=void 0;let e=F.current;e==null||e.hidden||(!t.isConnected||t.matches(`:disabled`)||t.hidden)&&document.activeElement===document.body&&e.focus({preventScroll:!0})}))},ae=e=>{g?.(e),e.target===e.currentTarget&&(e.propertyName===`opacity`||e.propertyName===`translate`)&&D(e=>e===`closing`?`closed`:e)},Q=i??(e==null&&M!=null?M:void 0),oe=Q==null?e??y:e,$=E===`closed`,se=$||E===`closing`;return _(S.Provider,{value:re,children:v(`div`,{className:`pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4 sm:bottom-10`,onBlur:Z,onFocus:ie,ref:P,children:[_(`div`,{"aria-atomic":`true`,"aria-live":`polite`,className:`sr-only`,role:`status`,children:O}),_(`div`,{className:`sr-only`,role:`alert`,children:A}),_(`div`,{className:n(`invert-theme pointer-events-auto flex w-fit max-w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 rounded-2xl border border-transparent bg-base px-4 py-3 text-strong shadow-lg`,`max-h-[60svh] overflow-y-auto`,`focus:outline-hidden`,`[&[hidden]]:hidden`,`transition-[opacity,translate] ease-out`,`data-state-open:duration-400`,`data-state-closed:pointer-events-none data-state-closed:opacity-0 data-state-closed:duration-200 motion-safe:data-state-closed:translate-y-[calc(100%+2.5rem)]`,`data-state-closed:ease-[cubic-bezier(0.4,0,1,1),cubic-bezier(0,0,0.2,1)]`,s),...T,"aria-label":oe,"aria-labelledby":Q,"data-slot":r(l,`sandbar`),"data-state":E===`open`?`open`:`closed`,hidden:$?!0:void 0,inert:se?!0:void 0,onTransitionEnd:ae,ref:I,role:`group`,tabIndex:-1,children:a})]})})},Message:({asChild:a,className:o,"data-slot":s,id:c,ref:l,...u})=>{let{registerMessage:f}=C(`Sandbar.Message`),p=d(),h=c??p,g=m(null),v=t(g,l);return e(()=>f(g.current?.id||h),[h,f]),_(a?i:`p`,{className:n(`text-sm font-sans`,o),id:h,...u,"data-slot":r(s,`sandbar-message`),ref:v})},Actions:({asChild:e,className:t,"data-slot":a,...o})=>_(e?i:`div`,{className:n(`flex flex-wrap items-center justify-center gap-2`,t),...o,"data-slot":r(a,`sandbar-actions`)}),SaveButton:({appearance:n=`filled`,children:i,"data-slot":o,intent:s=`neutral`,isLoading:c=!1,ref:l,...u})=>{let{reportSaving:d}=C(`Sandbar.SaveButton`),f=m(null),p=t(f,l);return e(()=>{d({button:f.current,isSaving:!!c})},[c,d]),e(()=>()=>{d({button:null,isSaving:!1})},[d]),_(a,{appearance:n,intent:s,isLoading:c,ref:p,...u,"data-slot":r(o,`sandbar-save-button`),children:i})},DiscardButton:({appearance:e=`outlined`,children:t,"data-slot":n,intent:i=`neutral`,...o})=>_(a,{appearance:e,intent:i,...o,"data-slot":r(n,`sandbar-discard-button`),children:t})};export{w as Sandbar};

package/dist/source-all.css

@@ -2,13 +2,8 @@
  * @ngrok/mantle/source-all.css
  *
  * Import this alongside mantle.css to tell Tailwind to scan ALL mantle component
- * dist files for utility class names. This is equivalent to what mantle.css used
- * to do automatically and is the correct choice for apps that use most or all
- * mantle components (e.g. a dashboard).
- *
- * For apps that use a small subset of mantle (e.g. a marketing site), prefer the
- * @ngrok/mantle Vite plugin instead — it automatically injects @source directives
- * only for the components your app actually imports, reducing generated CSS size.
+ * dist files for utility class names. This is the supported way to register
+ * mantle's Tailwind sources.
  *
  * Usage:
  *   @import "@ngrok/mantle/mantle.css";

package/dist/utils.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./copy-to-clipboard-B4UB6pts.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-Wa9W2F61.js";import{t as h}from"./in-view-C2DpZ6s0.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./copy-to-clipboard-B4UB6pts.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-Wa9W2F61.js";import{t as h}from"./in-view-T_AAYaaF.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};

package/dist/visually-hidden.d.ts

@@ -0,0 +1,41 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { ComponentProps } from "react";
+//#region src/components/visually-hidden/visually-hidden.d.ts
+/**
+ * Content for assistive technology only. Renders a native `<span>` clipped to
+ * a one-pixel box (the `sr-only` technique, never `display: none`). Screen
+ * readers read the content; sighted users never see it.
+ *
+ * **When to use**
+ * - State context the visual design already carries: "(opens in a new tab)" on an external link, a caption on a layout table.
+ * - Give a screen reader a text alternative for content it cannot read, such as a decorative chart.
+ * - Style the message of a {@link https://mantle.ngrok.com/components/primitives/live-region LiveRegion}, which builds on the same technique.
+ *
+ * **When not to use**
+ * - To name an icon-only control. Voice-control software skips a control whose only label is hidden DOM text, so use `aria-label`, as {@link https://mantle.ngrok.com/components/actions/icon-button IconButton}'s required `label` prop does.
+ * - To hide content from assistive technology too. Use the `hidden` attribute or `aria-hidden`.
+ * - For a link that appears on focus. Use {@link https://mantle.ngrok.com/components/primitives/skip-to-main-link SkipToMainLink}.
+ *
+ * **Polymorphism.** Pass `asChild` to hide a more semantic element instead of
+ * the default `<span>` (a `<caption>`, a `<legend>`, a heading).
+ *
+ * | Data Attribute | Value               | Description                                                               |
+ * | -------------- | ------------------- | ------------------------------------------------------------------------- |
+ * | `data-slot`    | `"visually-hidden"` | Stamped on the rendered element, and joined onto the child via `asChild`. |
+ *
+ * @see https://mantle.ngrok.com/components/primitives/visually-hidden
+ * @see https://webaim.org/techniques/css/invisiblecontent/
+ *
+ * @example
+ * ```tsx
+ * import { VisuallyHidden } from "@ngrok/mantle/visually-hidden";
+ *
+ * <a href="https://status.ngrok.com" target="_blank" rel="noreferrer">
+ *   ngrok status
+ *   <VisuallyHidden> (opens in a new tab)</VisuallyHidden>
+ * </a>
+ * ```
+ */
+declare const VisuallyHidden: ({ asChild, className, ref, ...props }: ComponentProps<"span"> & WithAsChild) => import("react").JSX.Element;
+//#endregion
+export { VisuallyHidden };

package/dist/visually-hidden.js

@@ -0,0 +1 @@
+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,className:i,ref:a,...o})=>n(r?t:`span`,{ref:a,"data-slot":`visually-hidden`,className:e(`sr-only`,i),...o});export{r as VisuallyHidden};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.83.9",
+  "version": "0.84.0",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -82,6 +82,7 @@
     "./label": "./dist/label.js",
     "./line-chart": "./dist/line-chart.js",
     "./list": "./dist/list.js",
+    "./live-region": "./dist/live-region.js",
     "./main": "./dist/main.js",
     "./media-object": "./dist/media-object.js",
     "./multi-select": "./dist/multi-select.js",
@@ -114,10 +115,11 @@
     "./tooltip": "./dist/tooltip.js",
     "./types": "./dist/types.js",
     "./utils": "./dist/utils.js",
+    "./visually-hidden": "./dist/visually-hidden.js",
     "./well": "./dist/well.js"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.37",
+    "@ariakit/react": "0.4.38",
     "@headlessui/react": "2.2.10",
     "@radix-ui/react-dialog": "1.1.23",
     "@radix-ui/react-dropdown-menu": "2.1.24",

package/dist/in-view-C2DpZ6s0.js

@@ -1 +0,0 @@
-const e={some:0,all:1};function t(t,n,{root:r,margin:i,amount:a=`some`}={}){let o=new WeakMap,s=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target);if(e.isIntersecting!==!!t)if(e.isIntersecting){let t=n(e.target,e);typeof t==`function`?o.set(e.target,t):s.unobserve(e.target)}else typeof t==`function`&&(t(e),o.delete(e.target))})},{root:r,rootMargin:i,threshold:typeof a==`number`?a:e[a]});return s.observe(t),()=>{s.unobserve(t),s.disconnect()}}export{t};