@ngrok/mantle 0.83.1 → 0.83.3

package/dist/code-block.d.ts

@@ -68,7 +68,7 @@ declare const Root$1: ({ asChild, className, defaultTab, activeTab, onActiveTabC
  * ```
  */
 declare const Body: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
-type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
+type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children" | "translate"> & {
   /**
    * The code value produced by `mantleCode("lang")` tagged template.
    * Contains pre-rendered Shiki HTML (when the Vite plugin is active) and
@@ -82,7 +82,13 @@ type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
  * Mantle's Vite plugin or server highlighter must set `value["~preHtml"]`.
  * Runtime highlighting and runtime line decoration are intentionally unsupported.
  *
+ * The `<pre>` always carries `translate="no"`, so a browser translation engine
+ * skips the code. A translated CLI flag, env var, or YAML key is wrong, and the
+ * reader copies it anyway. The `translate` prop is omitted from the type, so no
+ * call site can turn the guard off.
+ *
  * @see https://mantle.ngrok.com/components/data-display/code-block#codeblockcode
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate
  *
  * @example
  * ```tsx
@@ -126,6 +132,12 @@ declare const Header: ({ asChild, className, ref, ...props }: ComponentProps<"di
  * The (optional) title of the `CodeBlock`. Renders as `h3` by default;
  * use `asChild` to render a different element.
  *
+ * The heading carries `translate="no"` by default, because the title usually names
+ * a file — `example.ts` — and a translated filename names a file that does not
+ * exist. The slot takes arbitrary children though, so pass `translate="yes"` when
+ * the title is prose rather than a filename. `CodeBlock.Code` takes no such
+ * override — a block of code is never translatable.
+ *
  * @see https://mantle.ngrok.com/components/data-display/code-block#codeblocktitle
  *
  * @example
@@ -438,6 +450,9 @@ declare const CodeBlock: {
   /**
    * The code content. Renders pre-highlighted Shiki HTML when the Vite plugin is active.
    *
+   * The `<pre>` always carries `translate="no"`, so a browser translation engine
+   * skips the code.
+   *
    * @see https://mantle.ngrok.com/components/data-display/code-block#codeblockcode
    *
    * @example
@@ -626,6 +641,9 @@ declare const CodeBlock: {
   /**
    * The optional title rendered in the header.
    *
+   * The heading carries `translate="no"` by default, because the title usually
+   * names a file. Pass `translate="yes"` when the title is prose instead.
+   *
    * @see https://mantle.ngrok.com/components/data-display/code-block#codeblocktitle
    *
    * @example

package/dist/code-block.js

@@ -1,4 +1,4 @@
-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{t as i}from"./button-CCkGqE1t.js";import{t as a}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as o}from"./icons-CF1lbWtp.js";import{S as s,_ as c,a as l,b as u,c as d,d as f,f as p,g as m,h,i as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,y as D}from"./code-block-CIE0F2fu.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as k,useCallback as A,useContext as j,useEffect as M,useId as N,useLayoutEffect as P,useMemo as F,useRef as I,useState as L}from"react";import R from"tiny-invariant";import{jsx as z,jsxs as ee}from"react/jsx-runtime";import{CheckIcon as te}from"@phosphor-icons/react/Check";import{CopyIcon as ne}from"@phosphor-icons/react/Copy";import{FileTextIcon as re}from"@phosphor-icons/react/FileText";import{TerminalIcon as ie}from"@phosphor-icons/react/Terminal";import{Content as ae,List as oe,Root as se,Trigger as B}from"@radix-ui/react-tabs";function V(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const H=new WeakMap;function U(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function W(e){let t=H.get(e);if(t!=null&&ce(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=U(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return H.set(e,a),a}function G(e){H.delete(e)}function K(e){G(e),e.removeAttribute(`data-folded-regions`)}function ce(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function le(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function ue(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=U(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=W(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&le(e,r,t)}return!0}function de(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&ue(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const q=k(null);function J(){let e=j(q);return R(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const fe=({asChild:e=!1,className:n,defaultTab:i,activeTab:a,onActiveTabChange:o,ref:s,...c})=>{let l=I(``),[u,d]=L(!1),[f,p]=L(!1),[m,h]=L(void 0),g=A(e=>{h(t=>(R(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=A(e=>{h(t=>{R(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=F(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=z(e?r:`div`,{"data-slot":`code-block`,className:t(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-base font-mono`,`[&_svg]:shrink-0`,n),ref:s,...c});return z(q.Provider,{value:v,children:y?z(se,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})},pe=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`div`,{"data-slot":`code-block-body`,className:t(`relative`,n),ref:i,...a}),me=/SHIKI_VAL_(\d+)/g;function he(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const Y=new Map;function ge(e){if(e==null||e.length===0)return me;let t=Y.get(e);return t??(Y.size>=500&&Y.clear(),t=RegExp(`${he(e)}(\\d+)__`,`g`),Y.set(e,t)),t}function X(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(ge(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function _e(e,t,n){return X(e,t,n,e=>V(String(e)))}function ve(e,t,n){return X(e,t,n,e=>String(e))}const ye=({className:n,style:r,value:i,ref:a,...o})=>{let s=N(),c=I(null),{copyTextRef:l,hasCodeExpander:u,isCodeExpanded:d,registerCodeId:f,unregisterCodeId:p}=J(),{language:m,code:h,"~preValToken":g,"~preVals":_,"~highlightLines":v,"~lineNumberStart":y,"~preHtml":b,"~showLineNumbers":x}=i,S=v,C=y??1,w=x??!1,T=F(()=>_!=null&&_.length>0?ve(h,_,g):h,[g,_,h]);P(()=>{l.current=T},[l,T]),M(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=F(()=>{if(b!=null)return _!=null&&_.length>0?_e(b,_,g):b},[b,g,_]);M(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&K(t),de(e)},[E]);let D=E!=null,O=E??V(T),k=F(()=>({__html:O}),[O]);return z(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:t(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!D&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`aria-collapsed:max-h-[13.6rem]`,n),"data-highlighted":D?`true`:`false`,"data-lang":m,"data-mantle-highlight-lines":D&&S!=null&&S.length>0?S.join(`,`):void 0,"data-mantle-line-number-start":D&&w?String(C):`1`,"data-mantle-line-numbers":D&&w?`true`:`false`,id:s,ref:e(c,a),style:{...r,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...o,children:z(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:k})})},be=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`div`,{"data-slot":`code-block-header`,className:t(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,n),ref:i,...a}),xe=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`h3`,{"data-slot":`code-block-title`,ref:i,className:t(`m-0 font-sans text-xs font-medium`,n),...a}),Se=({className:e,label:n=`Copy code`,onCopy:r,onCopyError:o,onClick:s,ref:c,...l})=>{let{copyTextRef:u}=J(),d=a(),[f,p]=L(!1),m=I(void 0);return M(()=>()=>{m.current!=null&&clearTimeout(m.current)},[]),z(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-base`,children:z(i,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,label:n,icon:z(f?te:ne,{}),className:t(`bg-base not-disabled:hover:bg-neutral-500/15`,e),ref:c,onClick:async e=>{try{if(s?.(e),e.defaultPrevented){m.current!=null&&clearTimeout(m.current);return}let t=u.current;await d(t),r?.(t),p(!0),m.current!=null&&clearTimeout(m.current),m.current=setTimeout(()=>{p(!1)},2e3)}catch(e){o?.(e)}},...l})})},Z=({asChild:e=!1,className:i,onClick:a,ref:o,...s})=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=J();return M(()=>(d(!0),()=>{d(!1)}),[d]),ee(e?r:`button`,{...s,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:t(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-base px-4 py-2 font-sans text-gray-700 hover:bg-base-hover`,i),ref:o,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,z(n,{svg:z(O,{weight:`bold`}),className:t(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})};function Ce({className:e,preset:r,svg:i,...a}){let s=i;if(r!=null)switch(r){case`file`:s=z(re,{weight:`fill`});break;case`cli`:s=z(ie,{weight:`fill`});break;case`traffic-policy`:s=z(o,{})}return z(n,{"data-slot":`code-block-icon`,className:t(`size-5`,e),svg:s,...a})}const we={Root:fe,Body:pe,Code:ye,CopyButton:Se,ExpanderButton:Z,Header:be,Icon:Ce,TabContent:e=>z(ae,{"data-slot":`code-block-tab-content`,...e}),TabList:({className:e,ref:n,...r})=>z(oe,{"data-slot":`code-block-tab-list`,className:t(`scroll-fade-x flex min-w-0 items-center gap-1 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,e),ref:n,...r}),TabTrigger:({className:e,ref:n,...r})=>z(B,{"data-slot":`code-block-tab-trigger`,className:t(`shrink-0 cursor-pointer rounded px-1.5 py-0.5 font-sans text-xs font-medium whitespace-nowrap`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,e),ref:n,...r}),Title:xe},Q=`var(--shiki-foreground)`;function Te(e){return e.replace(/[&<]/g,e=>e===`&`?`&#x26;`:`&#x3C;`)}function Ee(e){return e===` `||e===`	`||e===`
+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{t as i}from"./button-CCkGqE1t.js";import{t as a}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as o}from"./icons-CF1lbWtp.js";import{S as s,_ as c,a as l,b as u,c as d,d as f,f as p,g as m,h,i as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,y as D}from"./code-block-CIE0F2fu.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as k,useCallback as A,useContext as j,useEffect as M,useId as N,useLayoutEffect as P,useMemo as F,useRef as I,useState as L}from"react";import R from"tiny-invariant";import{jsx as z,jsxs as ee}from"react/jsx-runtime";import{CheckIcon as te}from"@phosphor-icons/react/Check";import{CopyIcon as ne}from"@phosphor-icons/react/Copy";import{FileTextIcon as re}from"@phosphor-icons/react/FileText";import{TerminalIcon as ie}from"@phosphor-icons/react/Terminal";import{Content as ae,List as oe,Root as se,Trigger as B}from"@radix-ui/react-tabs";function V(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const H=new WeakMap;function U(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function W(e){let t=H.get(e);if(t!=null&&ce(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=U(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return H.set(e,a),a}function G(e){H.delete(e)}function K(e){G(e),e.removeAttribute(`data-folded-regions`)}function ce(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function le(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function ue(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=U(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=W(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&le(e,r,t)}return!0}function de(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&ue(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const q=k(null);function J(){let e=j(q);return R(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const fe=({asChild:e=!1,className:n,defaultTab:i,activeTab:a,onActiveTabChange:o,ref:s,...c})=>{let l=I(``),[u,d]=L(!1),[f,p]=L(!1),[m,h]=L(void 0),g=A(e=>{h(t=>(R(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=A(e=>{h(t=>{R(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=F(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=z(e?r:`div`,{"data-slot":`code-block`,className:t(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-base font-mono`,`[&_svg]:shrink-0`,n),ref:s,...c});return z(q.Provider,{value:v,children:y?z(se,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})},pe=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`div`,{"data-slot":`code-block-body`,className:t(`relative`,n),ref:i,...a}),me=/SHIKI_VAL_(\d+)/g;function he(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const Y=new Map;function ge(e){if(e==null||e.length===0)return me;let t=Y.get(e);return t??(Y.size>=500&&Y.clear(),t=RegExp(`${he(e)}(\\d+)__`,`g`),Y.set(e,t)),t}function X(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(ge(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function _e(e,t,n){return X(e,t,n,e=>V(String(e)))}function ve(e,t,n){return X(e,t,n,e=>String(e))}const ye=({className:n,style:r,value:i,ref:a,...o})=>{let s=N(),c=I(null),{copyTextRef:l,hasCodeExpander:u,isCodeExpanded:d,registerCodeId:f,unregisterCodeId:p}=J(),{language:m,code:h,"~preValToken":g,"~preVals":_,"~highlightLines":v,"~lineNumberStart":y,"~preHtml":b,"~showLineNumbers":x}=i,S=v,C=y??1,w=x??!1,T=F(()=>_!=null&&_.length>0?ve(h,_,g):h,[g,_,h]);P(()=>{l.current=T},[l,T]),M(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=F(()=>{if(b!=null)return _!=null&&_.length>0?_e(b,_,g):b},[b,g,_]);M(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&K(t),de(e)},[E]);let D=E!=null,O=E??V(T),k=F(()=>({__html:O}),[O]);return z(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:t(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!D&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`aria-collapsed:max-h-[13.6rem]`,n),"data-highlighted":D?`true`:`false`,"data-lang":m,"data-mantle-highlight-lines":D&&S!=null&&S.length>0?S.join(`,`):void 0,"data-mantle-line-number-start":D&&w?String(C):`1`,"data-mantle-line-numbers":D&&w?`true`:`false`,id:s,ref:e(c,a),style:{...r,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...o,translate:`no`,children:z(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:k})})},be=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`div`,{"data-slot":`code-block-header`,className:t(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,n),ref:i,...a}),xe=({asChild:e=!1,className:n,ref:i,...a})=>z(e?r:`h3`,{"data-slot":`code-block-title`,ref:i,className:t(`m-0 font-sans text-xs font-medium`,n),translate:`no`,...a}),Se=({className:e,label:n=`Copy code`,onCopy:r,onCopyError:o,onClick:s,ref:c,...l})=>{let{copyTextRef:u}=J(),d=a(),[f,p]=L(!1),m=I(void 0);return M(()=>()=>{m.current!=null&&clearTimeout(m.current)},[]),z(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-base`,children:z(i,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,label:n,icon:z(f?te:ne,{}),className:t(`bg-base not-disabled:hover:bg-neutral-500/15`,e),ref:c,onClick:async e=>{try{if(s?.(e),e.defaultPrevented){m.current!=null&&clearTimeout(m.current);return}let t=u.current;await d(t),r?.(t),p(!0),m.current!=null&&clearTimeout(m.current),m.current=setTimeout(()=>{p(!1)},2e3)}catch(e){o?.(e)}},...l})})},Z=({asChild:e=!1,className:i,onClick:a,ref:o,...s})=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=J();return M(()=>(d(!0),()=>{d(!1)}),[d]),ee(e?r:`button`,{...s,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:t(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-base px-4 py-2 font-sans text-gray-700 hover:bg-base-hover`,i),ref:o,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,z(n,{svg:z(O,{weight:`bold`}),className:t(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})};function Ce({className:e,preset:r,svg:i,...a}){let s=i;if(r!=null)switch(r){case`file`:s=z(re,{weight:`fill`});break;case`cli`:s=z(ie,{weight:`fill`});break;case`traffic-policy`:s=z(o,{})}return z(n,{"data-slot":`code-block-icon`,className:t(`size-5`,e),svg:s,...a})}const we={Root:fe,Body:pe,Code:ye,CopyButton:Se,ExpanderButton:Z,Header:be,Icon:Ce,TabContent:e=>z(ae,{"data-slot":`code-block-tab-content`,...e}),TabList:({className:e,ref:n,...r})=>z(oe,{"data-slot":`code-block-tab-list`,className:t(`scroll-fade-x flex min-w-0 items-center gap-1 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,e),ref:n,...r}),TabTrigger:({className:e,ref:n,...r})=>z(B,{"data-slot":`code-block-tab-trigger`,className:t(`shrink-0 cursor-pointer rounded px-1.5 py-0.5 font-sans text-xs font-medium whitespace-nowrap`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,e),ref:n,...r}),Title:xe},Q=`var(--shiki-foreground)`;function Te(e){return e.replace(/[&<]/g,e=>e===`&`?`&#x26;`:`&#x3C;`)}function Ee(e){return e===` `||e===`	`||e===`
 `||e===`\r`||e===`{`||e===`}`||e===`[`||e===`]`||e===`:`||e===`,`||e===`"`}function De(e,t,n){let r=e.length,i=[],a=`"`,o=t+1;for(;o<r;){let t=e[o];if(t===`\\`){let t=e[o+1]===`u`&&/^[0-9a-fA-F]{4}$/.test(e.slice(o+2,o+6))?6:2;a!==``&&(i.push({text:a,isEscape:!1}),a=``),i.push({text:e.slice(o,o+t),isEscape:!0}),o+=t;continue}if(t===`"`){a+=`"`,o+=1;break}a+=t,o+=1}a!==``&&i.push({text:a,isEscape:!1});let s=o;for(;s<r;){let t=e[s];if(t===` `||t===`	`||t===`
 `||t===`\r`){s+=1;continue}break}let c=e[s]===`:`?`var(--shiki-token-keyword)`:`var(--shiki-token-string-expression)`;for(let e of i)n(e.text,e.isEscape?`var(--shiki-token-escape, var(--shiki-token-constant))`:c);return o}function Oe(e){for(let t=0;t<e.length;t+=1){let n=e[t];if(n!=null&&n.color==null){let r=Q;for(let n=t+1;n<e.length;n+=1){let t=e[n];if(t!=null&&t.color!=null){r=t.color;break}}n.color=r}}let t=``,n=``,r=null,i=()=>{r!=null&&(t+=`<span style="color:${r}">${Te(n)}</span>`),n=``,r=null};for(let t of e)t!=null&&(t.color===r?n+=t.text:(i(),n=t.text,r=t.color));return i(),`<span class="line">${t}</span>`}function $(e){let t=[[]],n=t[0]??[],r=e.length,i=0,a=(e,t)=>{n.push({text:e,color:t})};for(;i<r;){let o=e[i];if(o===`
 `||o===`\r`){o===`\r`&&e[i+1]===`

package/dist/code.d.ts

@@ -18,7 +18,15 @@ import { ComponentProps } from "react";
  * **Polymorphism.** Pass `asChild` to render `Code` styling on a different
  * element (e.g. a link wrapping a code-styled label).
  *
+ * **Translation.** The `<code>` element carries `translate="no"` by default, so a
+ * browser translation engine skips the subtree. A translated CLI flag, env var,
+ * or YAML key is wrong, and the reader copies it anyway. `Code` also styles terms
+ * that are not code, so pass `translate="yes"` when the content is prose.
+ * `Kbd` and `CodeBlock.Code` take no such override — a key and a block of code
+ * are never translatable.
+ *
  * @see https://mantle.ngrok.com/components/data-display/code
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate
  *
  * @example
  * ```tsx

package/dist/code.js

@@ -1 +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:`code`,{ref:a,"data-slot":`code`,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,i),...o});export{r as Code};
+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:`code`,{ref:a,"data-slot":`code`,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,i),translate:`no`,...o});export{r as Code};

package/dist/command.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{n as r}from"./separator-D0D6VyyM.js";import{t as i}from"./dialog-32Hq6w6P.js";import{n as a,t as o}from"./use-is-apple-platform-Cxwrb86L.js";import{t as s}from"./use-callback-ref-IYti9y7x.js";import{t as c}from"./kbd-K8iaZ-Ti.js";import{createContext as l,useCallback as u,useContext as d,useEffect 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";import{MagnifyingGlassIcon as y}from"@phosphor-icons/react/MagnifyingGlass";import{Command as b,useCommandState as x}from"cmdk";const S=l(null);function C(){let e=d(S);return g(e,`useCommandDialog must be used within Command.DialogRoot.`),e}function w(){return d(S)}function T(e){let t=d(S);return g(t,`Command.${e} must be rendered inside Command.DialogRoot.`),t}const E=new Set([` `,`Enter`]);function D(e){return e.isComposing||e.key===`Process`||e.keyCode===229?{type:`open`}:e.metaKey||e.ctrlKey||e.altKey||E.has(e.key)?{type:`ignore`}:[...e.key].length===1?{type:`seed`,query:e.key}:{type:`ignore`}}function O(e){let t=(e.clipboardData?.getData(`text/plain`)??``).replace(/\s+/g,` `).trim();return t===``?{type:`open`}:{type:`seed`,query:t}}const k=({"aria-keyshortcuts":e,children:r,"data-slot":a,onKeyDown:s,onPaste:c,...l})=>{let{keyboardShortcut:u,open:d,openWithQuery:f}=T(`SearchTrigger`),p=o(),m=e=>{e.type!==`ignore`&&f(e.type===`seed`?e.query:void 0)},h=p?`Meta+K`:`Control+K`;return _(i.Trigger,{asChild:!0,children:_(n,{...l,"aria-keyshortcuts":e??(u?h:void 0),"data-slot":t(a,`command-search-trigger`),"data-state":d?`open`:`closed`,onKeyDown:e=>{if(s?.(e),e.defaultPrevented)return;let t=D(e.nativeEvent);t.type===`seed`&&e.preventDefault(),m(t)},onPaste:e=>{c?.(e),!e.defaultPrevented&&m(O(e.nativeEvent))},children:r})})},A=[];function j(){let e=Symbol(`command-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}function M(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`TEXTAREA`:!1}function N({enabled:e,onTrigger:t}){let n=s(t);f(()=>{if(!e)return;let t=j(),r=a(),i=e=>{if(!t.isOwner()||e.defaultPrevented||e.repeat||M(e.target))return;let i=r?e.metaKey:e.ctrlKey,a=r?e.ctrlKey:e.metaKey;e.key.toLowerCase()===`k`&&i&&!a&&!e.altKey&&!e.shiftKey&&(e.preventDefault(),n())};return window.addEventListener(`keydown`,i),()=>{window.removeEventListener(`keydown`,i),t.release()}},[e,n])}const P=({className:t,...n})=>_(b,{"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}),F={Root:P,DialogRoot:({children:e,defaultOpen:t=!1,keyboardShortcut:n=!0,onOpenChange:r,open:a,...o})=>{let s=a!=null,[c,l]=h(t),d=s?a:c,[f,m]=h(``),g=u((e,t)=>{e&&m(t??``),s||l(e),r?.(e)},[s,r]),v=u(e=>{g(e)},[g]),y=u(e=>{g(!0,e)},[g]),b=u(()=>{g(!d)},[g,d]);N({enabled:n,onTrigger:b});let x=p(()=>({keyboardShortcut:n,open:d,openWithQuery:y,query:f,setOpen:v,setQuery:m,toggle:b}),[n,d,y,f,v,b]);return _(S.Provider,{value:x,children:_(i.Root,{open:d,onOpenChange:v,...o,children:e})})},SearchTrigger:k,DialogTrigger:i.Trigger,DialogContent:({children:t,className:n,description:r=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:s=!0,title:c=`Command Palette`})=>{let l=m(null);return v(i.Content,{ref:l,className:e(`overflow-hidden p-0 relative`,n),onOpenAutoFocus:e=>{let t=l.current?.querySelector(`[data-slot~="command-input"]`);if(!(t instanceof HTMLInputElement)||t.disabled)return;e.preventDefault(),t.focus({preventScroll:!0});let n=t.value.length;t.setSelectionRange(n,n)},children:[v(i.Header,{className:`sr-only absolute`,children:[_(i.Title,{children:c}),_(i.Description,{children:r})]}),_(P,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),s&&_(`div`,{className:`absolute top-1.5 right-1.5`,children:_(i.CloseIconButton,{})})]})},Input:({className:n,"data-slot":r,onValueChange:i,ref:a,value:o,...s})=>{let c=w(),l=o!=null,u=l?o:c?.query;return v(`div`,{ref:a,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[_(y,{className:`size-5 shrink-0 opacity-50`}),_(b.Input,{className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,n),onValueChange:e=>{l||c?.setQuery(e),i?.(e)},value:u,...s,"data-slot":t(r,`command-input`)})]})},List:({className:t,...n})=>_(b.List,{"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}),Empty:({className:t,...n})=>_(b.Empty,{"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}),Group:({className:t,...n})=>_(b.Group,{"data-slot":`command-group`,className:e(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,t),...n}),Item:({className:t,...n})=>_(b.Item,{"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,t),...n}),Shortcut:({className:t,...n})=>_(`span`,{"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}),Separator:({className:t,...n})=>_(b.Separator,{"data-slot":`command-separator`,asChild:!0,...n,children:_(r,{className:e(`-mx-1 my-1 w-auto`,t)})})};function I({className:t,...n}){let r=o(),i=r?`⌘`:`⌃`,a=r?`Command`:`Control`;return v(c,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[_(`span`,{className:`sr-only`,children:a}),i]})}export{F as Command,I as MetaKey,D as searchActionFromKeyDown,O as searchActionFromPaste,C as useCommandDialog,x as useCommandState};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{n as r}from"./separator-D0D6VyyM.js";import{t as i}from"./dialog-32Hq6w6P.js";import{n as a,t as o}from"./use-is-apple-platform-Cxwrb86L.js";import{t as s}from"./use-callback-ref-IYti9y7x.js";import{t as c}from"./kbd-B9qmYaW8.js";import{createContext as l,useCallback as u,useContext as d,useEffect 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";import{MagnifyingGlassIcon as y}from"@phosphor-icons/react/MagnifyingGlass";import{Command as b,useCommandState as x}from"cmdk";const S=l(null);function C(){let e=d(S);return g(e,`useCommandDialog must be used within Command.DialogRoot.`),e}function w(){return d(S)}function T(e){let t=d(S);return g(t,`Command.${e} must be rendered inside Command.DialogRoot.`),t}const E=new Set([` `,`Enter`]);function D(e){return e.isComposing||e.key===`Process`||e.keyCode===229?{type:`open`}:e.metaKey||e.ctrlKey||e.altKey||E.has(e.key)?{type:`ignore`}:[...e.key].length===1?{type:`seed`,query:e.key}:{type:`ignore`}}function O(e){let t=(e.clipboardData?.getData(`text/plain`)??``).replace(/\s+/g,` `).trim();return t===``?{type:`open`}:{type:`seed`,query:t}}const k=({"aria-keyshortcuts":e,children:r,"data-slot":a,onKeyDown:s,onPaste:c,...l})=>{let{keyboardShortcut:u,open:d,openWithQuery:f}=T(`SearchTrigger`),p=o(),m=e=>{e.type!==`ignore`&&f(e.type===`seed`?e.query:void 0)},h=p?`Meta+K`:`Control+K`;return _(i.Trigger,{asChild:!0,children:_(n,{...l,"aria-keyshortcuts":e??(u?h:void 0),"data-slot":t(a,`command-search-trigger`),"data-state":d?`open`:`closed`,onKeyDown:e=>{if(s?.(e),e.defaultPrevented)return;let t=D(e.nativeEvent);t.type===`seed`&&e.preventDefault(),m(t)},onPaste:e=>{c?.(e),!e.defaultPrevented&&m(O(e.nativeEvent))},children:r})})},A=[];function j(){let e=Symbol(`command-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}function M(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`TEXTAREA`:!1}function N({enabled:e,onTrigger:t}){let n=s(t);f(()=>{if(!e)return;let t=j(),r=a(),i=e=>{if(!t.isOwner()||e.defaultPrevented||e.repeat||M(e.target))return;let i=r?e.metaKey:e.ctrlKey,a=r?e.ctrlKey:e.metaKey;e.key.toLowerCase()===`k`&&i&&!a&&!e.altKey&&!e.shiftKey&&(e.preventDefault(),n())};return window.addEventListener(`keydown`,i),()=>{window.removeEventListener(`keydown`,i),t.release()}},[e,n])}const P=({className:t,...n})=>_(b,{"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}),F={Root:P,DialogRoot:({children:e,defaultOpen:t=!1,keyboardShortcut:n=!0,onOpenChange:r,open:a,...o})=>{let s=a!=null,[c,l]=h(t),d=s?a:c,[f,m]=h(``),g=u((e,t)=>{e&&m(t??``),s||l(e),r?.(e)},[s,r]),v=u(e=>{g(e)},[g]),y=u(e=>{g(!0,e)},[g]),b=u(()=>{g(!d)},[g,d]);N({enabled:n,onTrigger:b});let x=p(()=>({keyboardShortcut:n,open:d,openWithQuery:y,query:f,setOpen:v,setQuery:m,toggle:b}),[n,d,y,f,v,b]);return _(S.Provider,{value:x,children:_(i.Root,{open:d,onOpenChange:v,...o,children:e})})},SearchTrigger:k,DialogTrigger:i.Trigger,DialogContent:({children:t,className:n,description:r=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:s=!0,title:c=`Command Palette`})=>{let l=m(null);return v(i.Content,{ref:l,className:e(`overflow-hidden p-0 relative`,n),onOpenAutoFocus:e=>{let t=l.current?.querySelector(`[data-slot~="command-input"]`);if(!(t instanceof HTMLInputElement)||t.disabled)return;e.preventDefault(),t.focus({preventScroll:!0});let n=t.value.length;t.setSelectionRange(n,n)},children:[v(i.Header,{className:`sr-only absolute`,children:[_(i.Title,{children:c}),_(i.Description,{children:r})]}),_(P,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),s&&_(`div`,{className:`absolute top-1.5 right-1.5`,children:_(i.CloseIconButton,{})})]})},Input:({className:n,"data-slot":r,onValueChange:i,ref:a,value:o,...s})=>{let c=w(),l=o!=null,u=l?o:c?.query;return v(`div`,{ref:a,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[_(y,{className:`size-5 shrink-0 opacity-50`}),_(b.Input,{className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,n),onValueChange:e=>{l||c?.setQuery(e),i?.(e)},value:u,...s,"data-slot":t(r,`command-input`)})]})},List:({className:t,...n})=>_(b.List,{"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}),Empty:({className:t,...n})=>_(b.Empty,{"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}),Group:({className:t,...n})=>_(b.Group,{"data-slot":`command-group`,className:e(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,t),...n}),Item:({className:t,...n})=>_(b.Item,{"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,t),...n}),Shortcut:({className:t,...n})=>_(`span`,{"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}),Separator:({className:t,...n})=>_(b.Separator,{"data-slot":`command-separator`,asChild:!0,...n,children:_(r,{className:e(`-mx-1 my-1 w-auto`,t)})})};function I({className:t,...n}){let r=o(),i=r?`⌘`:`⌃`,a=r?`Command`:`Control`;return v(c,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[_(`span`,{className:`sr-only`,children:a}),i]})}export{F as Command,I as MetaKey,D as searchActionFromKeyDown,O as searchActionFromPaste,C as useCommandDialog,x as useCommandState};

package/dist/data-table.d.ts

@@ -1,5 +1,5 @@
 import { t as ButtonIntent } from "./button-DdSKSj1c.js";
-import { n as ButtonAppearance, t as Button } from "./button-PoIujPMX.js";
+import { n as ButtonAppearance, t as Button } from "./button-BH79w6HV.js";
 import { r as IconButtonAppearance, t as IconButton } from "./button-DJ7AAgII.js";
 import { s as SortingMode } from "./direction-BjU0bPST.js";
 import { t as Table$1 } from "./table-D51ZtV4U.js";

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-Cnja9Bsr.js";import{t as n}from"./button-CCkGqE1t.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./icons-B_DDQcVD.js";import{t as a}from"./table-C_Nm_RSV.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({appearance:n=`ghost`,children:i,className:a,column:o,disableSorting:s=!1,iconPlacement:c=`end`,intent:l=`neutral`,sortingMode:u,sortIcon:d,onClick:m,...h}){let g=o.getIsSorted(),_=!s&&o.getCanSort(),v=_&&typeof g==`string`?g:`unsorted`,y=d?.(v)??f(B,{mode:u,direction:v});return p(t,{appearance:n,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,n===`ghost`&&l===`neutral`&&`text-muted`,a),"data-sort-direction":v,"data-table-header-action":!0,icon:y,iconPlacement:c,onClick:e=>{m?.(e),!e.defaultPrevented&&(!_||s||u===void 0||V(o,u))},intent:l,type:`button`,...h,children:[_&&v!==`unsorted`&&p(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,u===`alphanumeric`?v===`asc`?`ascending`:`descending`:r(v),` `,`order`]}),i]})}function T({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const E=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function D(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function O({className:t,renderExpanded:n,row:r,...i}){let s=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:p(d,{children:[s,r.getIsExpanded()&&f(R,{row:r,children:n(r)})]})}function k({children:e,...t}){let{table:n}=S(),r=n.getAllColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function A(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function j({children:t,className:n,...r}){return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[f(A,{}),t]})}function M({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&f(A,{}),t]})}function N(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function P({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const F=f(g,{weight:`bold`,className:`size-3.5`}),I=f(h,{weight:`bold`,className:`size-3.5`});function L({appearance:t=`ghost`,className:r,collapseIcon:i=I,expandIcon:a=F,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(n,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:t,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?N(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function R({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:N(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const z={Root:C,ActionCell:j,ActionHeader:M,Cell:a.Cell,Body:E,EmptyRow:k,Head:D,Header:T,HeaderSortButton:w,Row:O,ExpandHeader:P,RowExpandButton:L,ExpandedRow:R};function B({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(i,{mode:t,direction:e,...n})}function V(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{z as DataTable,N as expandedRowId};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-hEoKi6ZG.js";import{t as n}from"./button-CCkGqE1t.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./icons-B_DDQcVD.js";import{t as a}from"./table-C_Nm_RSV.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({canSort:e,sortDirection:t,sortingMode:n}){return!e||t===`unsorted`?``:n===`alphanumeric`?`Column sorted in ${t===`asc`?`ascending`:`descending`} order`:`Column sorted in ${r(t)} order`}function T({appearance:n=`ghost`,children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,intent:c=`neutral`,sortingMode:l,sortIcon:u,onClick:d,...m}){let h=a.getIsSorted(),g=!o&&a.getCanSort(),_=g&&typeof h==`string`?h:`unsorted`,v=u?.(_)??f(V,{mode:l,direction:_});return p(t,{appearance:n,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,n===`ghost`&&c===`neutral`&&`text-muted`,i),"data-sort-direction":_,"data-table-header-action":!0,icon:v,iconPlacement:s,onClick:e=>{d?.(e),!e.defaultPrevented&&(!g||o||l===void 0||H(a,l))},intent:c,type:`button`,...m,children:[f(`span`,{className:`sr-only`,children:w({canSort:g,sortDirection:_,sortingMode:l})}),r]})}function E({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const D=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function O(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k({className:t,renderExpanded:n,row:r,...i}){let s=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:p(d,{children:[s,r.getIsExpanded()&&f(z,{row:r,children:n(r)})]})}function A({children:e,...t}){let{table:n}=S(),r=n.getAllColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function j(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function M({children:t,className:n,...r}){return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[f(j,{}),t]})}function N({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[t,o&&f(j,{})]})}function P(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function F({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const I=f(g,{weight:`bold`,className:`size-3.5`}),L=f(h,{weight:`bold`,className:`size-3.5`});function R({appearance:t=`ghost`,className:r,collapseIcon:i=L,expandIcon:a=I,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(n,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:t,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?P(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function z({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:P(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const B={Root:C,ActionCell:M,ActionHeader:N,Cell:a.Cell,Body:D,EmptyRow:A,Head:O,Header:E,HeaderSortButton:T,Row:k,ExpandHeader:F,RowExpandButton:R,ExpandedRow:z};function V({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(i,{mode:t,direction:e,...n})}function H(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{B as DataTable,P as expandedRowId};

package/dist/field.d.ts

@@ -4,7 +4,7 @@ import { n as IconButtonProps, r as IconButtonAppearance } from "./button-DJ7AAg
 import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./field-7QeiTFwl.js";
 import { t as Label } from "./label-C6YH9skg.js";
 import { t as Slot } from "./slot-DdgxmuI5.js";
-import { t as Popover } from "./popover-CE4OlWkd.js";
+import { t as Popover } from "./popover-C9fEVWL1.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/field/field-context.d.ts
 /**

package/dist/field.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CCkGqE1t.js";import{i,n as a,r as o,t as s}from"./field-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-B1wqeZr4.js";import{t as d}from"./label-D-D11mlp.js";import{t as f}from"./popover-CQ9s7jG5.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r}),A=({htmlFor:e,ref:t,...n})=>{let r=v(c);return C(d,{ref:t,htmlFor:e??r?.controlId,...n})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a}),M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a}),N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})}),I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t}),L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`}),R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a}),z=({asChild:e,children:r,className:a,name:o,ref:l,validation:u,...d})=>{let f=e?n:`div`,p=y(),m=y(),h=y(),[g,v]=x(!1),S=i(u??(g?`error`:void 0)),w=_(()=>(v(!0),()=>{v(!1)}),[]),T=b(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:w,validation:S}),[p,m,h,g,o,w,S]);return C(c.Provider,{value:T,children:C(s,{validation:S,children:C(f,{ref:l,"data-slot":`field-item`,"data-validation":S,className:t(`flex w-full flex-col gap-1.5`,a),...d,children:r})})})},B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))},V=({asChild:e,className:r,ref:i,...a})=>{let o=e?n:`p`,s=v(c);return C(o,{ref:i,"data-slot":`field-description`,id:s?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a})},H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CCkGqE1t.js";import{i,n as a,r as o,t as s}from"./field-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-B1wqeZr4.js";import{t as d}from"./label-D-D11mlp.js";import{t as f}from"./popover-B1ZzHCym.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r}),A=({htmlFor:e,ref:t,...n})=>{let r=v(c);return C(d,{ref:t,htmlFor:e??r?.controlId,...n})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a}),M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a}),N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})}),I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t}),L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`}),R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a}),z=({asChild:e,children:r,className:a,name:o,ref:l,validation:u,...d})=>{let f=e?n:`div`,p=y(),m=y(),h=y(),[g,v]=x(!1),S=i(u??(g?`error`:void 0)),w=_(()=>(v(!0),()=>{v(!1)}),[]),T=b(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:w,validation:S}),[p,m,h,g,o,w,S]);return C(c.Provider,{value:T,children:C(s,{validation:S,children:C(f,{ref:l,"data-slot":`field-item`,"data-validation":S,className:t(`flex w-full flex-col gap-1.5`,a),...d,children:r})})})},B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))},V=({asChild:e,className:r,ref:i,...a})=>{let o=e?n:`p`,s=v(c);return C(o,{ref:i,"data-slot":`field-description`,id:s?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a})},H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};

package/dist/hover-card.d.ts

@@ -53,6 +53,10 @@ declare const Trigger: (props: ComponentProps<typeof HoverCardPrimitive.Trigger>
  * z-index. When multiple shared layers are open, the most recently mounted
  * layer renders on top.
  *
+ * It sets `position: relative`, so `HoverCard.Arrow`'s absolutely-positioned
+ * wrapper keeps one containing block through the open animation. An
+ * absolutely-positioned child of the content therefore anchors to the content.
+ *
  * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardcontent
  *
  * @example
@@ -70,6 +74,31 @@ declare const Trigger: (props: ComponentProps<typeof HoverCardPrimitive.Trigger>
  * ```
  */
 declare const Content: ({ className, onClick, align, sideOffset, ...props }: ComponentProps<typeof HoverCardPrimitive.Content>) => import("react").JSX.Element;
+type HoverCardArrowProps = Omit<ComponentProps<typeof HoverCardPrimitive.Arrow>, "asChild" | "children">;
+/**
+ * An optional tip that points from `HoverCard.Content` at its trigger. Render it
+ * as a child of `HoverCard.Content`. Radix positions it with floating-ui's arrow
+ * middleware, so it stays centered on the trigger when collision detection shifts
+ * or flips the content. It also repaints `HoverCard.Content`'s fill and border
+ * across its base, so the two edges read as one line, and carries its own shadow,
+ * clipped at that base so it never darkens the content's interior.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardarrow
+ *
+ * @example
+ * ```tsx
+ * <HoverCard.Root>
+ *   <HoverCard.Trigger asChild>
+ *     <Button type="button" appearance="link" intent="accent">@username</Button>
+ *   </HoverCard.Trigger>
+ *   <HoverCard.Content>
+ *     <HoverCard.Arrow />
+ *     <p>This is the hover card content.</p>
+ *   </HoverCard.Content>
+ * </HoverCard.Root>
+ * ```
+ */
+declare const Arrow: ({ className, height, width, ...props }: HoverCardArrowProps) => import("react").JSX.Element;
 /**
  * A floating card that appears when a user hovers over a trigger element.
  *
@@ -93,6 +122,7 @@ declare const Content: ({ className, onClick, align, sideOffset, ...props }: Com
  * HoverCard.Root
  * ├── HoverCard.Trigger
  * └── HoverCard.Content
+ *     └── HoverCard.Arrow
  * ```
  *
  * @example
@@ -134,6 +164,30 @@ declare const HoverCard: {
    * ```
    */
   readonly Root: typeof Root;
+  /**
+   * An optional tip that points from `HoverCard.Content` at its trigger. It stays
+   * centered on the trigger when collision detection shifts or flips the content,
+   * and its border continues `HoverCard.Content`'s own edge.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardarrow
+   *
+   * @example
+   * ```tsx
+   * <HoverCard.Root>
+   *   <HoverCard.Trigger asChild>
+   *     <Button type="button" appearance="link" intent="accent">@username</Button>
+   *   </HoverCard.Trigger>
+   *   <HoverCard.Content side="top">
+   *     <HoverCard.Arrow />
+   *     <div className="space-y-2">
+   *       <Text weight="strong">User Profile</Text>
+   *       <Text>Additional information about the user.</Text>
+   *     </div>
+   *   </HoverCard.Content>
+   * </HoverCard.Root>
+   * ```
+   */
+  readonly Arrow: typeof Arrow;
   /**
    * The content to render inside the hover card. Appears in a portal with rich styling and animations.
    *

package/dist/hover-card.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-hover-card";const r=({closeDelay:e=300,openDelay:r=100,...i})=>t(n.Root,{closeDelay:e,openDelay:r,...i}),i=e=>t(n.Trigger,{"data-slot":`hover-card-trigger`,...e}),a=n.Portal,o={Root:r,Content:({className:r,onClick:i,align:o=`center`,sideOffset:s=4,...c})=>t(a,{children:t(n.Content,{"data-slot":`hover-card-content`,align:o,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open: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`,r),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}),Portal:a,Trigger:i};export{o as HoverCard};
+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-hover-card";const i=({closeDelay:e=300,openDelay:n=100,...i})=>t(r.Root,{closeDelay:e,openDelay:n,...i}),a=e=>t(r.Trigger,{"data-slot":`hover-card-trigger`,...e}),o=r.Portal,s={Root:i,Arrow:({className:i,height:a=7,width:o=14,...s})=>t(r.Arrow,{"aria-hidden":`true`,asChild:!0,"data-slot":`hover-card-arrow`,height:a,width:o,...s,children:n(`svg`,{className:e(`fill-[var(--background-color-popover)]`,`[clip-path:inset(0_-200%_-200%_-200%)]`,`[filter:drop-shadow(0_0_4px_color-mix(in_oklab,var(--shadow-color)_var(--shadow-first-opacity),transparent))]`,i),children:[t(`polygon`,{points:`0,0 30,0 15,10`}),t(`polyline`,{className:`stroke-[color:var(--border-color-popover)]`,fill:`none`,points:`0,0 15,10 30,0`,strokeWidth:1.5,vectorEffect:`non-scaling-stroke`})]})}),Content:({className:n,onClick:i,align:a=`center`,sideOffset:s=4,...c})=>t(o,{children:t(r.Content,{"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`relative`,`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open: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`,n),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}),Portal:o,Trigger:a};export{s as HoverCard};

package/dist/{kbd-K8iaZ-Ti.js → kbd-B9qmYaW8.js}

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,translate:`no`,children:n})}export{n as t};

package/dist/kbd.d.ts

@@ -21,7 +21,13 @@ import { ComponentProps } from "react";
  * `aria-label` on the `<Kbd>` or include a visually-hidden label inside,
  * and mark the visible glyph `aria-hidden`.
  *
+ * **Translation.** The `<kbd>` element always carries `translate="no"`, so a
+ * browser translation engine skips the subtree. A translated shortcut names a
+ * key the reader's keyboard does not have. The `translate` prop is omitted from
+ * the type, so no call site can turn the guard off.
+ *
  * @see https://mantle.ngrok.com/components/data-display/kbd
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate
  *
  * @example
  * ```tsx
@@ -42,6 +48,6 @@ import { ComponentProps } from "react";
  * </Kbd>
  * ```
  */
-declare function Kbd({ children, className, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
+declare function Kbd({ children, className, ...props }: Omit<ComponentProps<"kbd">, "translate">): import("react").JSX.Element;
 //#endregion
 export { Kbd };

package/dist/kbd.js

@@ -1 +1 @@
-import{t as e}from"./kbd-K8iaZ-Ti.js";export{e as Kbd};
+import{t as e}from"./kbd-B9qmYaW8.js";export{e as Kbd};

package/dist/line-chart.d.ts

@@ -1,4 +1,4 @@
-import { _ as PointShape, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as CurveKind, h as ContinuousXScale, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, v as SeriesColor } from "./chart-0zcFJh4n.js";
+import { _ as PointShape, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as CurveKind, h as ContinuousXScale, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, v as SeriesColor } from "./chart-TWkSYqAs.js";
 //#region src/components/line-chart/line-chart.d.ts
 /**
  * Props for {@link LineChart.Root}. Lines encode value by vertical position,

package/dist/line-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DBxT9BNl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`line`,componentName:`LineChart`,slotName:`line-chart`,...e}),Line:e=>a(`LineChart.Line`,`line`,e),Grid:e=>n(`LineChart.Grid`,e),XAxis:e=>t(`LineChart.XAxis`,e),YAxis:e=>r(`LineChart.YAxis`,e),ReferenceLine:t=>e(`LineChart.ReferenceLine`,t),Tooltip:e=>s(`LineChart.Tooltip`,e),Legend:e=>l(i,{partName:`LineChart.Legend`,slotName:`line-chart`,...e}),CopyButton:e=>l(c,{partName:`LineChart.CopyButton`,slotName:`line-chart`,...e})};export{u as LineChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DorYMICt.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`line`,componentName:`LineChart`,slotName:`line-chart`,...e}),Line:e=>a(`LineChart.Line`,`line`,e),Grid:e=>n(`LineChart.Grid`,e),XAxis:e=>t(`LineChart.XAxis`,e),YAxis:e=>r(`LineChart.YAxis`,e),ReferenceLine:t=>e(`LineChart.ReferenceLine`,t),Tooltip:e=>s(`LineChart.Tooltip`,e),Legend:e=>l(i,{partName:`LineChart.Legend`,slotName:`line-chart`,...e}),CopyButton:e=>l(c,{partName:`LineChart.CopyButton`,slotName:`line-chart`,...e})};export{u as LineChart};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.83.1)
+# @ngrok/mantle (0.83.3)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/mantle-dark-high-contrast.css

@@ -314,6 +314,10 @@ mantle.css for the full strategy.
 	--color-chart-8: oklch(0.835 0.133 88.5); /* #ecc458 */
 	--color-chart-other: var(--color-neutral-500);
 
+	/* The decorative-chart fill — this theme's neutral-200, which holds
+	   --text-color-muted at 8.14:1. See mantle.css for the derivation. */
+	--color-chart-decorative: var(--color-neutral-200);
+
 	--text-color-strong: var(--color-black);
 	--text-color-body: var(--color-neutral-950);
 	--text-color-muted: --alpha(var(--color-black) / 0.75);

package/dist/mantle-dark.css

@@ -348,6 +348,10 @@ MARK: INVERT THEME in mantle.css for the full strategy.
 	--color-chart-8: oklch(0.668 0.137 83.5); /* #bd8c01 */
 	--color-chart-other: var(--color-neutral-500);
 
+	/* The decorative-chart fill — this theme's neutral-200, which holds
+	   --text-color-muted at 4.93:1. See mantle.css for the derivation. */
+	--color-chart-decorative: var(--color-neutral-200);
+
 	--text-color-strong: #fff;
 	--text-color-body: --alpha(#fff / 0.7);
 	--text-color-muted: --alpha(#fff / 0.5);

package/dist/mantle-light-high-contrast.css

@@ -310,6 +310,10 @@ mantle.css for the full strategy.
 	--color-chart-8: oklch(0.621 0.128 78); /* #b07b06 */
 	--color-chart-other: var(--color-neutral-500);
 
+	/* The decorative-chart fill — this theme's neutral-200, which holds
+	   --text-color-muted at 9.08:1. See mantle.css for the derivation. */
+	--color-chart-decorative: var(--color-neutral-200);
+
 	--text-color-strong: var(--color-black);
 	--text-color-body: var(--color-neutral-950);
 	--text-color-muted: --alpha(var(--color-black) / 0.75);

package/dist/mantle.css

@@ -266,7 +266,8 @@ MARK: THEME
 	   pair of slots stays apart for full-color readers and for dichromats, and so
 	   every slot clears 3:1 on that theme's card surface. Assign slots to series in
 	   order and never re-assign a series' slot when others are filtered out; series
-	   beyond 8 use --color-chart-other. */
+	   beyond 8 use --color-chart-other, and a decorative chart paints every series
+	   with --color-chart-decorative. */
 	--color-chart-1: var(--color-chart-1);
 	--color-chart-2: var(--color-chart-2);
 	--color-chart-3: var(--color-chart-3);
@@ -276,6 +277,7 @@ MARK: THEME
 	--color-chart-7: var(--color-chart-7);
 	--color-chart-8: var(--color-chart-8);
 	--color-chart-other: var(--color-chart-other);
+	--color-chart-decorative: var(--color-chart-decorative);
 }
 
 /**
@@ -391,6 +393,14 @@ from `:root` (see MARK: INVERT THEME below).
 	--color-chart-8: oklch(0.621 0.125 80.1); /* #ad7d0f */
 	--color-chart-other: var(--color-neutral-500);
 
+	/* The fill every series wears on a decorative chart, in place of its categorical
+	   slot. It is neutral because a placeholder encodes no series identity, and it is
+	   this light because the message laid over it must stay readable: --text-color-muted
+	   over neutral-200 measures 4.56:1 here, and neutral-300 drops it to 4.24:1 — under
+	   the 4.5:1 floor for 14px text. Each theme aliases its own neutral-200, and
+	   chart/decorative-contrast.test.tsx measures all four. */
+	--color-chart-decorative: var(--color-neutral-200);
+
 	--text-color-strong: var(--color-neutral-950);
 	--text-color-body: --alpha(var(--color-neutral-950) / 0.75);
 	--text-color-muted: --alpha(var(--color-neutral-950) / 0.6);

package/dist/pagination.d.ts

@@ -1,4 +1,4 @@
-import { t as ButtonGroup } from "./button-BIf69CSV.js";
+import { t as ButtonGroup } from "./button-Dic5ZH4w.js";
 import { t as Select } from "./select-DVHmgih8.js";
 import { ComponentProps } from "react";
 //#region src/components/pagination/cursor-pagination.d.ts

package/dist/popover-B1ZzHCym.js

@@ -0,0 +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-popover";const i=r.Root,a=r.Trigger,o={Root:i,Anchor:r.Anchor,Arrow:({className:i,height:a=7,width:o=14,...s})=>t(r.Arrow,{"aria-hidden":`true`,asChild:!0,"data-slot":`popover-arrow`,height:a,width:o,...s,children:n(`svg`,{className:e(`fill-[var(--background-color-popover)]`,`[clip-path:inset(0_-200%_-200%_-200%)]`,`[filter:drop-shadow(0_0_4px_color-mix(in_oklab,var(--shadow-color)_var(--shadow-first-opacity),transparent))]`,i),children:[t(`polygon`,{points:`0,0 30,0 15,10`}),t(`polyline`,{className:`stroke-[color:var(--border-color-popover)]`,fill:`none`,points:`0,0 15,10 30,0`,strokeWidth:1.5,vectorEffect:`non-scaling-stroke`})]})}),Close:r.Close,Content:({align:n=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,ref:s,sideOffset:c=4,...l})=>t(r.Portal,{children:t(r.Content,{align:n,"data-slot":`popover-content`,className:e(`relative`,`text-popover-foreground border-popover bg-popover 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 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:s,sideOffset:c,...l})}),Trigger:a};export{o as t};

package/dist/{popover-CE4OlWkd.d.ts → popover-C9fEVWL1.d.ts}

@@ -19,6 +19,10 @@ type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
  * z-index. When multiple shared layers are open, the most recently mounted
  * layer renders on top.
  *
+ * It sets `position: relative`, so `Popover.Arrow`'s absolutely-positioned
+ * wrapper keeps one containing block through the open animation. An
+ * absolutely-positioned child of the content therefore anchors to the content.
+ *
  * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
  *
  * @example
@@ -36,6 +40,33 @@ type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
  * ```
  */
 declare const Content: ({ align, className, onClick, preferredWidth, ref, sideOffset, ...props }: PopoverContentProps) => import("react").JSX.Element;
+type PopoverArrowProps = Omit<ComponentProps<typeof PopoverPrimitive.Arrow>, "asChild" | "children">;
+/**
+ * An optional tip that points from `Popover.Content` at its anchor. Render it as
+ * a child of `Popover.Content`. Radix positions it with floating-ui's arrow
+ * middleware, so it stays centered on the anchor when collision detection shifts
+ * or flips the content. It also repaints `Popover.Content`'s fill and border
+ * across its base, so the two edges read as one line, and carries its own shadow,
+ * clipped at that base so it never darkens the content's interior.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/popover#popoverarrow
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Open Popover
+ *     </Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content side="right">
+ *     <Popover.Arrow />
+ *     <p>This is the popover content.</p>
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+declare const Arrow: ({ className, height, width, ...props }: PopoverArrowProps) => import("react").JSX.Element;
 /**
  * A floating overlay that displays rich content in a portal, triggered by a button.
  *
@@ -66,6 +97,7 @@ declare const Content: ({ align, className, onClick, preferredWidth, ref, sideOf
  * ├── Popover.Trigger
  * ├── Popover.Anchor
  * └── Popover.Content
+ *     ├── Popover.Arrow
  *     └── Popover.Close
  * ```
  *
@@ -130,6 +162,33 @@ declare const Popover: {
    * ```
    */
   readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * An optional tip that points from `Popover.Content` at its anchor. It stays
+   * centered on the anchor when collision detection shifts or flips the content,
+   * and its border continues `Popover.Content`'s own edge.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoverarrow
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Anchor asChild>
+   *     <button type="button">Anchor</button>
+   *   </Popover.Anchor>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Open Popover</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content side="right">
+   *     <Popover.Arrow />
+   *     <Text>Products moved up here</Text>
+   *     <Popover.Close asChild>
+   *       <Button type="button" appearance="outlined" intent="neutral">Got it</Button>
+   *     </Popover.Close>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Arrow: typeof Arrow;
   /**
    * A button that closes an open popover. Can be placed anywhere within the popover content.
    *

package/dist/popover.d.ts

@@ -1,2 +1,2 @@
-import { t as Popover } from "./popover-CE4OlWkd.js";
+import { t as Popover } from "./popover-C9fEVWL1.js";
 export { Popover };

package/dist/popover.js

@@ -1 +1 @@
-import{t as e}from"./popover-CQ9s7jG5.js";export{e as Popover};
+import{t as e}from"./popover-B1ZzHCym.js";export{e as Popover};

package/dist/sandbar.d.ts

@@ -1,6 +1,6 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { r as ButtonProps } from "./button-PoIujPMX.js";
+import { r as ButtonProps } from "./button-BH79w6HV.js";
 import { ComponentProps, ReactNode, Ref } from "react";
 //#region src/components/sandbar/sandbar.d.ts
 /**

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-Cnja9Bsr.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-hEoKi6ZG.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};