@ngrok/mantle 0.84.1 → 0.84.2

package/dist/{list-7w5k3HiN.js → list-Bo1mExIg.js}

@@ -1 +1 @@
-import{n as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-CxM7jdFi.js";import{t as r}from"./interactive-target-BXScNeOr.js";import{Children as i,createContext as a,isValidElement as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";import{useVirtualizer as g}from"@tanstack/react-virtual";const _=a(null);function v(e){let t=c(_);return m(t,`List.${e} must be composed inside List.Root / List.VirtualRoot (or a SelectableList viewport).`),t}const y=a(null),b=a(null);function x(e){return o(e)?e.props.disabled===!0:!1}function S({start:e,step:t,count:n,isItemDisabled:r}){for(let i=e;i>=0&&i<n;i+=t)if(!r(i))return i;return-1}const C=`a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])`;function w(e){let t=e.matches(C)?e:e.querySelector(C);return t instanceof HTMLElement?t:null}function T(e){let t=e instanceof Element?e.closest(`[data-index]`):null;if(t==null)return null;let n=Number(t.getAttribute(`data-index`));return!Number.isInteger(n)||n<0?null:{item:t,index:n}}function E({count:e,isItemDisabled:t,focusItemAt:n}){return{onKeyDown:r=>{if(r.target instanceof HTMLElement&&(r.target.isContentEditable||r.target.tagName===`INPUT`||r.target.tagName===`TEXTAREA`||r.target.tagName===`SELECT`)||r.altKey||r.ctrlKey||r.metaKey)return;let i=T(r.target);if(i==null)return;let a=-1,o=1;switch(r.key){case`ArrowDown`:o=1,a=S({start:i.index+1,step:o,count:e,isItemDisabled:t});break;case`ArrowUp`:o=-1,a=S({start:i.index-1,step:o,count:e,isItemDisabled:t});break;case`Home`:o=1,a=S({start:0,step:o,count:e,isItemDisabled:t});break;case`End`:o=-1,a=S({start:e-1,step:o,count:e,isItemDisabled:t});break;default:return}r.preventDefault(),a>=0&&a!==i.index&&n(a,o)}}}function D({count:e,enabled:t,isItemDisabled:n,onActivate:i,itemId:a,scrollToIndex:o}){let[s,c]=p(-1),u=f(!1),d=s>=e?e-1:s;if(l(()=>{s>=e&&c(e-1)},[s,e]),!t)return{activeIndex:-1,collectionProps:{}};let m=e=>n?.(e)??!1,h=(t,n)=>S({start:t,step:n,count:e,isItemDisabled:m}),g=e=>{e<0||(c(e),o(e))};return{activeIndex:d,collectionProps:{tabIndex:0,"aria-activedescendant":d>=0?a(d):void 0,onMouseDown:e=>{let t=T(e.target);if(t!=null&&!m(t.index)){c(t.index),u.current=!1;return}u.current=!0},onClick:e=>{if(e.defaultPrevented)return;let t=T(e.target);t==null||m(t.index)||r(e.target,t.item)||(c(t.index),i?.(t.index))},onFocus:t=>{if(t.target!==t.currentTarget){let e=T(t.target);e!=null&&!m(e.index)&&c(e.index),t.target instanceof HTMLElement&&t.target.tabIndex>=0||t.currentTarget.focus({preventScroll:!0}),u.current=!1;return}let n=u.current;u.current=!1,e>0&&!n&&c(e=>e<0?h(0,1):e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(c(-1),u.current=!1)},onKeyDown:t=>{if(t.target===t.currentTarget&&!(t.altKey||t.ctrlKey||t.metaKey))switch(u.current=!1,t.key){case`ArrowDown`:t.preventDefault(),g(h(d<0?0:d+1,1));break;case`ArrowUp`:t.preventDefault(),g(d<0?h(0,1):h(d-1,-1));break;case`Home`:t.preventDefault(),g(h(0,1));break;case`End`:t.preventDefault(),g(h(e-1,-1));break;case` `:case`Enter`:!t.repeat&&d>=0&&!m(d)&&(t.preventDefault(),i?.(d))}}}}}function O({count:e,focusItemAt:t,isItemDisabled:n,onActivate:r,itemId:i,scrollToIndex:a,semantics:o}){let s=u(),c=d(()=>({semantics:o}),[o]),l=d(()=>i??(e=>`${s}-item-${e}`),[i,s]),{activeIndex:f,collectionProps:p}=D({count:e,enabled:o===`grid`,isItemDisabled:n,onActivate:r,itemId:l,scrollToIndex:a}),m=d(()=>({activeIndex:f,stampItemId:i==null?l:null}),[f,l,i]);return{collectionProps:o===`list`?E({count:e,isItemDisabled:n,focusItemAt:t}):p,gridNav:m,listContext:c}}function k({"aria-label":e,"aria-labelledby":n,"aria-multiselectable":r,children:i,className:a,collectionProps:o,gridNav:s,listContext:c,viewportProps:l,ref:u}){return h(_.Provider,{value:c,children:h(b.Provider,{value:s,children:h(`div`,{ref:u,"data-slot":`list`,className:t(`border-popover bg-popover scrollbar overscroll-none overflow-x-hidden overflow-y-auto rounded-md border p-1`,a),...l,children:h(`div`,{"data-slot":`list-collection`,role:c.semantics===`grid`?`grid`:`list`,"aria-label":e,"aria-labelledby":n,"aria-multiselectable":r,className:`relative flex w-full flex-col gap-px outline-hidden`,...o,children:i})})})})}const A=({asChild:r,children:i,className:a,disabled:o=!1,ref:s,selected:l=!1,style:u,...d})=>{let{semantics:f}=v(`Item`),p=c(y),m=c(b),g=f===`grid`,_=r?n:`div`,x=p?.placement??null,S=p?.index,C=g&&m!=null&&S!=null&&m.activeIndex===S,w=x?.measureRef??null,T=e(s,w);return h(_,{ref:T,"data-slot":`list-item`,...d,id:g&&S!=null&&m?.stampItemId!=null?m.stampItemId(S):d.id,"data-index":S,"data-state":l?`selected`:`unselected`,"data-disabled":o||void 0,"data-active":C||void 0,role:g?`row`:`listitem`,"aria-selected":g?l:void 0,"aria-disabled":g&&o?!0:d[`aria-disabled`],"aria-rowindex":g?x?.posInSet:void 0,"aria-posinset":g?void 0:x?.posInSet,"aria-setsize":g?void 0:x?.setSize,className:t(`rounded-md data-[state=selected]:bg-selected-menu-item data-[active]:bg-active-menu-item data-[active]:data-[state=selected]:bg-active-selected-menu-item`,!o&&`hover:bg-active-menu-item hover:data-[state=selected]:bg-active-selected-menu-item`,!g&&!o&&`has-[:focus-visible]:bg-active-menu-item has-[:focus-visible]:data-[state=selected]:bg-active-selected-menu-item`,a),style:x?{...u,...x.style}:u,children:i})};function j({children:e,index:t}){let n=d(()=>({index:t,placement:null}),[t]);return h(y.Provider,{value:n,children:e})}const M=({"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,children:a,className:c,isItemDisabled:l,onActivate:u,itemId:p,ref:m,semantics:g=`list`,..._})=>{let v=f(null),y=e(v,m),b=d(()=>i.toArray(a).filter(o),[a]),S=s(e=>{v.current?.querySelector(`[data-index="${e}"]`)?.scrollIntoView({block:`nearest`})},[]),C=s((e,t)=>{let n=v.current;if(n!=null)for(let r=e;r>=0&&r<b.length;r+=t){let e=n.querySelector(`[data-index="${r}"]`);if(e==null)continue;let t=w(e);if(t!=null){t.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`});return}}},[b.length]),{collectionProps:T,gridNav:E,listContext:D}=O({count:b.length,focusItemAt:C,isItemDisabled:l??(e=>x(b[e])),onActivate:u,itemId:p,scrollToIndex:S,semantics:g});return h(k,{"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,className:c,collectionProps:T,gridNav:E,listContext:D,viewportProps:_,ref:y,children:b.map((e,t)=>h(j,{index:t,children:e},e.key??t))})};function N({virtualItem:e,count:t,measureRef:n}){return{posInSet:e.index+1,setSize:t,measureRef:n,style:{position:`absolute`,left:0,top:0,width:`100%`,transform:`translateY(${e.start}px)`}}}function P({children:e,count:t,measureRef:n,virtualItem:r}){let i=d(()=>({index:r.index,placement:N({virtualItem:r,count:t,measureRef:n})}),[r,t,n]);return h(y.Provider,{value:i,children:e})}const F=({"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,children:a,className:c,estimateItemHeight:u=44,isItemDisabled:p,onActivate:m,overscan:_=8,itemId:v,ref:y,semantics:b=`list`,...S})=>{let C=f(null),T=e(C,y),E=d(()=>i.toArray(a).filter(o),[a]),D=E.length,A=g({count:D,getScrollElement:()=>C.current,estimateSize:()=>u,getItemKey:e=>E[e]?.key??e,overscan:_,gap:1}),j=s(e=>A.scrollToIndex(e,{align:`auto`}),[A]),M=f(null);l(()=>()=>{M.current!=null&&cancelAnimationFrame(M.current)},[]);let{collectionProps:N,gridNav:F,listContext:I}=O({count:D,focusItemAt:s((e,t)=>{M.current!=null&&(cancelAnimationFrame(M.current),M.current=null);let n=e,r=0,i=()=>{M.current=null;let e=C.current;if(e==null||n<0||n>=D)return;A.scrollToIndex(n,{align:`auto`});let a=e.querySelector(`[data-index="${n}"]`);if(a!=null){let e=w(a);if(e!=null){e.focus({preventScroll:!0});return}n+=t,r=0}r+=1,r<10&&(M.current=requestAnimationFrame(i))};i()},[D,A]),isItemDisabled:p??(e=>x(E[e])),onActivate:m,itemId:v,scrollToIndex:j,semantics:b}),L=A.getVirtualItems(),R=L.some(e=>e.index===F.activeIndex);return h(k,{"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,className:c,collectionProps:{...N,"aria-activedescendant":R?N[`aria-activedescendant`]:void 0,"aria-rowcount":b===`grid`?D:void 0,style:{height:`${A.getTotalSize()}px`}},gridNav:F,listContext:I,viewportProps:S,ref:T,children:L.map(e=>{let t=E[e.index];return t==null?null:h(P,{virtualItem:e,count:D,measureRef:A.measureElement,children:t},e.key)})})};export{A as n,M as r,F as t};
+import{n as e}from"./compose-refs-DdUwopIY.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./slot-C3gII_9c.js";import{t as r}from"./interactive-target-BXScNeOr.js";import{Children as i,createContext as a,isValidElement as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";import{useVirtualizer as g}from"@tanstack/react-virtual";const _=a(null);function v(e){let t=c(_);return m(t,`List.${e} must be composed inside List.Root / List.VirtualRoot (or a SelectableList viewport).`),t}const y=a(null),b=a(null);function x(e){return o(e)?e.props.disabled===!0:!1}function S({start:e,step:t,count:n,isItemDisabled:r}){for(let i=e;i>=0&&i<n;i+=t)if(!r(i))return i;return-1}const C=`a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])`;function w(e){let t=e.matches(C)?e:e.querySelector(C);return t instanceof HTMLElement?t:null}function T(e){let t=e instanceof Element?e.closest(`[data-index]`):null;if(t==null)return null;let n=Number(t.getAttribute(`data-index`));return!Number.isInteger(n)||n<0?null:{item:t,index:n}}function E({count:e,isItemDisabled:t,focusItemAt:n}){return{onKeyDown:r=>{if(r.target instanceof HTMLElement&&(r.target.isContentEditable||r.target.tagName===`INPUT`||r.target.tagName===`TEXTAREA`||r.target.tagName===`SELECT`)||r.altKey||r.ctrlKey||r.metaKey)return;let i=T(r.target);if(i==null)return;let a=-1,o=1;switch(r.key){case`ArrowDown`:o=1,a=S({start:i.index+1,step:o,count:e,isItemDisabled:t});break;case`ArrowUp`:o=-1,a=S({start:i.index-1,step:o,count:e,isItemDisabled:t});break;case`Home`:o=1,a=S({start:0,step:o,count:e,isItemDisabled:t});break;case`End`:o=-1,a=S({start:e-1,step:o,count:e,isItemDisabled:t});break;default:return}r.preventDefault(),a>=0&&a!==i.index&&n(a,o)}}}function D({count:e,enabled:t,isItemDisabled:n,onActivate:i,itemId:a,scrollToIndex:o}){let[s,c]=p(-1),u=f(!1),d=s>=e?e-1:s;if(l(()=>{s>=e&&c(e-1)},[s,e]),!t)return{activeIndex:-1,collectionProps:{}};let m=e=>n?.(e)??!1,h=(t,n)=>S({start:t,step:n,count:e,isItemDisabled:m}),g=e=>{e<0||(c(e),o(e))};return{activeIndex:d,collectionProps:{tabIndex:0,"aria-activedescendant":d>=0?a(d):void 0,onMouseDown:e=>{let t=T(e.target);if(t!=null&&!m(t.index)){c(t.index),u.current=!1;return}u.current=!0},onClick:e=>{if(e.defaultPrevented)return;let t=T(e.target);t==null||m(t.index)||r(e.target,t.item)||(c(t.index),i?.(t.index))},onFocus:t=>{if(t.target!==t.currentTarget){let e=T(t.target);e!=null&&!m(e.index)&&c(e.index),t.target instanceof HTMLElement&&t.target.tabIndex>=0||t.currentTarget.focus({preventScroll:!0}),u.current=!1;return}let n=u.current;u.current=!1,e>0&&!n&&c(e=>e<0?h(0,1):e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(c(-1),u.current=!1)},onKeyDown:t=>{if(t.target===t.currentTarget&&!(t.altKey||t.ctrlKey||t.metaKey))switch(u.current=!1,t.key){case`ArrowDown`:t.preventDefault(),g(h(d<0?0:d+1,1));break;case`ArrowUp`:t.preventDefault(),g(d<0?h(0,1):h(d-1,-1));break;case`Home`:t.preventDefault(),g(h(0,1));break;case`End`:t.preventDefault(),g(h(e-1,-1));break;case` `:case`Enter`:!t.repeat&&d>=0&&!m(d)&&(t.preventDefault(),i?.(d))}}}}}function O({count:e,focusItemAt:t,isItemDisabled:n,onActivate:r,itemId:i,scrollToIndex:a,semantics:o}){let s=u(),c=d(()=>({semantics:o}),[o]),l=d(()=>i??(e=>`${s}-item-${e}`),[i,s]),{activeIndex:f,collectionProps:p}=D({count:e,enabled:o===`grid`,isItemDisabled:n,onActivate:r,itemId:l,scrollToIndex:a}),m=d(()=>({activeIndex:f,stampItemId:i==null?l:null}),[f,l,i]);return{collectionProps:o===`list`?E({count:e,isItemDisabled:n,focusItemAt:t}):p,gridNav:m,listContext:c}}function k({"aria-label":e,"aria-labelledby":n,"aria-multiselectable":r,children:i,className:a,collectionProps:o,gridNav:s,listContext:c,viewportProps:l,ref:u}){return h(_.Provider,{value:c,children:h(b.Provider,{value:s,children:h(`div`,{ref:u,"data-slot":`list`,className:t(`border-popover bg-popover scrollbar overscroll-none overflow-x-hidden overflow-y-auto rounded-md border p-1`,a),...l,children:h(`div`,{"data-slot":`list-collection`,role:c.semantics===`grid`?`grid`:`list`,"aria-label":e,"aria-labelledby":n,"aria-multiselectable":r,className:`relative flex w-full flex-col gap-px outline-hidden`,...o,children:i})})})})}const A=({asChild:r,children:i,className:a,disabled:o=!1,ref:s,selected:l=!1,style:u,...d})=>{let{semantics:f}=v(`Item`),p=c(y),m=c(b),g=f===`grid`,_=r?n:`div`,x=p?.placement??null,S=p?.index,C=g&&m!=null&&S!=null&&m.activeIndex===S,w=x?.measureRef??null,T=e(s,w);return h(_,{ref:T,"data-slot":`list-item`,...d,id:g&&S!=null&&m?.stampItemId!=null?m.stampItemId(S):d.id,"data-index":S,"data-state":l?`selected`:`unselected`,"data-disabled":o||void 0,"data-active":C||void 0,role:g?`row`:`listitem`,"aria-selected":g?l:void 0,"aria-disabled":g&&o?!0:d[`aria-disabled`],"aria-rowindex":g?x?.posInSet:void 0,"aria-posinset":g?void 0:x?.posInSet,"aria-setsize":g?void 0:x?.setSize,className:t(`rounded-md data-[state=selected]:bg-selected-menu-item data-[active]:bg-active-menu-item data-[active]:data-[state=selected]:bg-active-selected-menu-item`,!o&&`hover:bg-active-menu-item hover:data-[state=selected]:bg-active-selected-menu-item`,!g&&!o&&`has-[:focus-visible]:bg-active-menu-item has-[:focus-visible]:data-[state=selected]:bg-active-selected-menu-item`,a),style:x?{...u,...x.style}:u,children:i})};function j({children:e,index:t}){let n=d(()=>({index:t,placement:null}),[t]);return h(y.Provider,{value:n,children:e})}const M=({"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,children:a,className:c,isItemDisabled:l,onActivate:u,itemId:p,ref:m,semantics:g=`list`,..._})=>{let v=f(null),y=e(v,m),b=d(()=>i.toArray(a).filter(o),[a]),S=s(e=>{v.current?.querySelector(`[data-index="${e}"]`)?.scrollIntoView({block:`nearest`})},[]),C=s((e,t)=>{let n=v.current;if(n!=null)for(let r=e;r>=0&&r<b.length;r+=t){let e=n.querySelector(`[data-index="${r}"]`);if(e==null)continue;let t=w(e);if(t!=null){t.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`});return}}},[b.length]),{collectionProps:T,gridNav:E,listContext:D}=O({count:b.length,focusItemAt:C,isItemDisabled:l??(e=>x(b[e])),onActivate:u,itemId:p,scrollToIndex:S,semantics:g});return h(k,{"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,className:c,collectionProps:T,gridNav:E,listContext:D,viewportProps:_,ref:y,children:b.map((e,t)=>h(j,{index:t,children:e},e.key??t))})};function N({virtualItem:e,count:t,measureRef:n}){return{posInSet:e.index+1,setSize:t,measureRef:n,style:{position:`absolute`,left:0,top:0,width:`100%`,transform:`translateY(${e.start}px)`}}}function P({children:e,count:t,measureRef:n,virtualItem:r}){let i=d(()=>({index:r.index,placement:N({virtualItem:r,count:t,measureRef:n})}),[r,t,n]);return h(y.Provider,{value:i,children:e})}const F=({"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,children:a,className:c,estimateItemHeight:u=44,isItemDisabled:p,onActivate:m,overscan:_=8,itemId:v,ref:y,semantics:b=`list`,...S})=>{"use no memo";let C=f(null),T=e(C,y),E=d(()=>i.toArray(a).filter(o),[a]),D=E.length,A=s(e=>E[e]?.key??e,[E]),j=g({count:D,getScrollElement:()=>C.current,estimateSize:()=>u,getItemKey:A,overscan:_,gap:1,initialRect:{width:0,height:u*(_+1)}}),M=s(e=>j.scrollToIndex(e,{align:`auto`}),[j]),N=f(null);l(()=>()=>{N.current!=null&&cancelAnimationFrame(N.current)},[]);let{collectionProps:F,gridNav:I,listContext:L}=O({count:D,focusItemAt:s((e,t)=>{N.current!=null&&(cancelAnimationFrame(N.current),N.current=null);let n=e,r=0,i=()=>{N.current=null;let e=C.current;if(e==null||n<0||n>=D)return;j.scrollToIndex(n,{align:`auto`});let a=e.querySelector(`[data-index="${n}"]`);if(a!=null){let e=w(a);if(e!=null){e.focus({preventScroll:!0});return}n+=t,r=0}r+=1,r<10&&(N.current=requestAnimationFrame(i))};i()},[D,j]),isItemDisabled:p??(e=>x(E[e])),onActivate:m,itemId:v,scrollToIndex:M,semantics:b}),R=j.getVirtualItems(),z=R.some(e=>e.index===I.activeIndex);return h(k,{"aria-label":t,"aria-labelledby":n,"aria-multiselectable":r,className:c,collectionProps:{...F,"aria-activedescendant":z?F[`aria-activedescendant`]:void 0,"aria-rowcount":b===`grid`?D:void 0,style:{height:`${j.getTotalSize()}px`}},gridNav:I,listContext:L,viewportProps:S,ref:T,children:R.map(e=>{let t=E[e.index];return t==null?null:h(P,{virtualItem:e,count:D,measureRef:j.measureElement,children:t},e.key)})})};export{A as n,M as r,F as t};

package/dist/list.d.ts

@@ -88,7 +88,7 @@ type ListRootProps$1 = ComponentProps<"div"> & {
  * ```
  */
 type VirtualRootProps = ListRootProps$1 & {
-  /** Estimated item height in px, used to seed the virtualizer before items are measured. */
+  /** Estimated item height in px, used to seed the virtualizer before items are measured. With `overscan`, it also sizes the server-rendered first slice. */
   estimateItemHeight?: number;
   /** Rows rendered beyond the visible window on each side. The buffer keeps the active row mounted for `aria-activedescendant`. */
   overscan?: number;
@@ -98,7 +98,7 @@ type VirtualRootProps = ListRootProps$1 & {
 /**
  * Props for `List.Root` — the internal list primitive's `Root` props, minus
  * `semantics` (a `List` is always a `role="list"`) and the grid-only
- * `onActivate` / `itemId` knobs (inert under list semantics).
+ * `onActivate` / `itemId` / `isItemDisabled` knobs (inert under list semantics).
  *
  * @see https://mantle.ngrok.com/components/data-display/list
  *
@@ -116,7 +116,7 @@ type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId"
 /**
  * The scrollable container for a `List`: a `role="list"` of clickable items
  * inside the bordered, rounded `bg-popover` viewport (styled after the
- * `MultiSelect` popover). Renders **every** item — the non-virtualized default.
+ * `MultiSelect` popover). Renders **every** item, the non-virtualized default.
  * Compose `List.Item` children directly. **Bound its height**
  * (`max-h-*`, `h-*`, or `min-h-0 flex-1`) so long lists scroll.
  *
@@ -125,7 +125,7 @@ type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId"
  * focused item lights up with the hover tint rather than a focus ring.
  *
  * For very long lists, swap in `List.VirtualRoot`, which windows the same
- * `Item` children — the call site is otherwise identical.
+ * `Item` children; the call site is otherwise identical.
  *
  * @see https://mantle.ngrok.com/components/data-display/list
  *
@@ -145,7 +145,8 @@ declare const Root: (props: ListRootProps) => import("react").JSX.Element;
 /**
  * Props for `List.VirtualRoot` — the internal list primitive's
  * `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
- * minus `semantics` and the grid-only `onActivate` / `itemId` knobs.
+ * minus `semantics` and the grid-only `onActivate` / `itemId` / `isItemDisabled`
+ * knobs.
  *
  * @see https://mantle.ngrok.com/components/data-display/list
  *
@@ -163,10 +164,12 @@ type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" |
 /**
  * The windowed counterpart to `List.Root`: renders only the visible slice
  * of its `List.Item` children via `@tanstack/react-virtual`. Authored
- * identically to `Root` — same `Item` children — so opting into
+ * identically to `Root` (same `Item` children), so opting into
  * virtualization never changes the call site. Reach for it only when a list is
  * long enough to need it; **bound its height** so the virtualizer has a
- * viewport to measure.
+ * viewport to measure. The server renders the first slice of rows, sized by
+ * `estimateItemHeight` and `overscan`. The rest mount after hydration
+ * measures the viewport.
  *
  * @see https://mantle.ngrok.com/components/data-display/list
  *
@@ -210,7 +213,7 @@ type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
 /**
  * A single clickable item in a `List`. Sits inside a `role="listitem"` pill
  * from the internal list primitive; renders a `<button>` by default (with
- * `onClick`), or your own element via `asChild` — e.g. an `<a>` for navigation
+ * `onClick`), or your own element via `asChild`, for example an `<a>` for navigation
  * (account switching, SSO selection). The button/link fills its pill, so
  * clicking anywhere on the item triggers it, and the enclosing listitem carries
  * the pill's hover / `current` accent.
@@ -327,8 +330,18 @@ declare const ItemDescription: ({ className, ref, ...props }: ComponentProps<"sp
  */
 declare const List: {
   /**
-   * The scrollable container (non-virtualized). Give it an `aria-label` and
-   * bound its height. Compose `Item` children.
+   * The scrollable container for a `List`: a `role="list"` of clickable items
+   * inside the bordered, rounded `bg-popover` viewport (styled after the
+   * `MultiSelect` popover). Renders **every** item, the non-virtualized default.
+   * Compose `List.Item` children directly. **Bound its height**
+   * (`max-h-*`, `h-*`, or `min-h-0 flex-1`) so long lists scroll.
+   *
+   * Keyboard: items keep their native tab order, and `ArrowUp` / `ArrowDown` /
+   * `Home` / `End` also move focus between items (skipping disabled ones); the
+   * focused item lights up with the hover tint rather than a focus ring.
+   *
+   * For very long lists, swap in `List.VirtualRoot`, which windows the same
+   * `Item` children; the call site is otherwise identical.
    *
    * @see https://mantle.ngrok.com/components/data-display/list
    *
@@ -346,8 +359,14 @@ declare const List: {
    */
   readonly Root: typeof Root;
   /**
-   * The virtualized container — windows the same `Item` children. Opt in for
-   * long lists; authored identically to `Root`.
+   * The windowed counterpart to `List.Root`: renders only the visible slice
+   * of its `List.Item` children via `@tanstack/react-virtual`. Authored
+   * identically to `Root` (same `Item` children), so opting into
+   * virtualization never changes the call site. Reach for it only when a list is
+   * long enough to need it; **bound its height** so the virtualizer has a
+   * viewport to measure. The server renders the first slice of rows, sized by
+   * `estimateItemHeight` and `overscan`. The rest mount after hydration
+   * measures the viewport.
    *
    * @see https://mantle.ngrok.com/components/data-display/list
    *
@@ -365,8 +384,12 @@ declare const List: {
    */
   readonly VirtualRoot: typeof VirtualRoot;
   /**
-   * A clickable item — a `<button>` by default, or your own element via
-   * `asChild` (e.g. an `<a>`). Optional `current` gives the accent treatment.
+   * A single clickable item in a `List`. Sits inside a `role="listitem"` pill
+   * from the internal list primitive; renders a `<button>` by default (with
+   * `onClick`), or your own element via `asChild`, for example an `<a>` for navigation
+   * (account switching, SSO selection). The button/link fills its pill, so
+   * clicking anywhere on the item triggers it, and the enclosing listitem carries
+   * the pill's hover / `current` accent.
    *
    * @see https://mantle.ngrok.com/components/data-display/list
    *

package/dist/list.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CxM7jdFi.js";import{n,r,t as i}from"./list-7w5k3HiN.js";import{jsx as a}from"react/jsx-runtime";const o={Root:e=>a(r,{semantics:`list`,...e}),VirtualRoot:e=>a(i,{semantics:`list`,...e}),Item:({asChild:r,className:i,current:o,disabled:s,onClick:c,ref:l,...u})=>a(n,{selected:o,disabled:s,children:a(r?t:`button`,{ref:l,"data-slot":`list-item-control`,"aria-current":o||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...u,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:u.onClickCapture})}),ItemTitle:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...r}),ItemDescription:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...r})};export{o as List};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./slot-C3gII_9c.js";import{n,r,t as i}from"./list-Bo1mExIg.js";import{jsx as a}from"react/jsx-runtime";const o={Root:e=>a(r,{semantics:`list`,...e}),VirtualRoot:e=>a(i,{semantics:`list`,...e}),Item:({asChild:r,className:i,current:o,disabled:s,onClick:c,ref:l,...u})=>a(n,{selected:o,disabled:s,children:a(r?t:`button`,{ref:l,"data-slot":`list-item-control`,"aria-current":o||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...u,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:u.onClickCapture})}),ItemTitle:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...r}),ItemDescription:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...r})};export{o as List};

package/dist/live-region-CV7kykeo.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./slot-C3gII_9c.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 t};

package/dist/live-region.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CxM7jdFi.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};
+import{t as e}from"./live-region-CV7kykeo.js";export{e as LiveRegion};

package/dist/llms.txt

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

package/dist/main.d.ts

@@ -8,7 +8,9 @@ import { ComponentProps } from "react";
  * a visible focus ring on the region itself (`focus:outline-hidden`).
  *
  * Pair with the `<SkipToMainLink>` component at the top of the document.
- * `ref` lands on the rendered `<main>`, so it also composes as an `asChild`
+ * `id` and `tabIndex` are not props: the skip link's default target is
+ * `#main`, and a focusable landmark needs `tabIndex={-1}`, so `Main` stamps
+ * both. `ref` lands on the rendered `<main>`, so it also composes as an `asChild`
  * child of layout parts — in an app shell, compose it onto `AppLayout.Body`
  * (`<AppLayout.Body asChild>`), never onto the `AppLayout.Content` card around
  * it. `AppLayout.Body` is the shell's only scroll container, and the skip link
@@ -53,6 +55,6 @@ import { ComponentProps } from "react";
  * </Sidebar.Root>
  * ```
  */
-declare const Main: ({ className, "data-slot": dataSlot, ...props }: ComponentProps<"main"> & WithDataSlot) => import("react").JSX.Element;
+declare const Main: ({ className, "data-slot": dataSlot, ...props }: Omit<ComponentProps<"main">, "id" | "tabIndex"> & WithDataSlot) => import("react").JSX.Element;
 //#endregion
 export { Main };

package/dist/main.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{jsx as n}from"react/jsx-runtime";const r=({className:r,"data-slot":i,...a})=>n(`main`,{...a,"data-slot":t(i,`main`),id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,r)});export{r as Main};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{jsx as n}from"react/jsx-runtime";const r=({className:r,"data-slot":i,...a})=>n(`main`,{...a,"data-slot":t(i,`main`),id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,r)});export{r as Main};

package/dist/media-object.d.ts

@@ -1,7 +1,8 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 import { ComponentProps } from "react";
 //#region src/components/media-object/media-object.d.ts
-type Props = ComponentProps<"div"> & WithAsChild;
+type Props = ComponentProps<"div"> & WithAsChild & WithDataSlot;
 /**
  * The media object is an image/icon (media) to the left, with descriptive
  * content (title and subtitle/description) to the right. This is the root
@@ -21,7 +22,7 @@ type Props = ComponentProps<"div"> & WithAsChild;
  * </MediaObject.Root>
  * ```
  */
-declare const Root: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
+declare const Root: ({ asChild, className, children, "data-slot": dataSlot, ref, ...props }: Props) => import("react").JSX.Element;
 /**
  * The container for an image or icon to display in the media slot of the media object.
  *
@@ -39,7 +40,7 @@ declare const Root: ({ asChild, className, children, style, ref }: Props) => imp
  * </MediaObject.Root>
  * ```
  */
-declare const Media: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
+declare const Media: ({ asChild, className, children, "data-slot": dataSlot, ref, ...props }: Props) => import("react").JSX.Element;
 /**
  * The container for the content slot of a media object.
  *
@@ -57,7 +58,7 @@ declare const Media: ({ asChild, className, children, style, ref }: Props) => im
  * </MediaObject.Root>
  * ```
  */
-declare const Content: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
+declare const Content: ({ asChild, className, children, "data-slot": dataSlot, ref, ...props }: Props) => import("react").JSX.Element;
 /**
  * A small, reusable layout primitive for "image/icon on one side,
  * descriptive content on the other" — the foundational
@@ -119,14 +120,6 @@ declare const MediaObject: {
    * content (title and subtitle/description) to the right. This is the root
    * component of the media object.
    *
-   * Change the spacing between the media and content by passing a `gap-*` class.
-   * The default gap is `gap-4`.
-   *
-   * Use flexbox utilities to change the alignment of the media and content.
-   *
-   * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`
-   * components as direct children.
-   *
    * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectroot
    *
    * @example

package/dist/media-object.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CxM7jdFi.js";import{jsx as n}from"react/jsx-runtime";const r={Root:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a}),Media:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a}),Content:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a})};export{r as MediaObject};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-C3gII_9c.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i=!1,className:a,children:o,"data-slot":s,ref:c,...l})=>r(i?n:`div`,{ref:c,"data-slot":t(s,`media-object`),className:e(`flex gap-4`,a),...l,children:o}),Media:({asChild:i=!1,className:a,children:o,"data-slot":s,ref:c,...l})=>r(i?n:`div`,{ref:c,"data-slot":t(s,`media-object-media`),className:e(`shrink-0 leading-none`,a),...l,children:o}),Content:({asChild:i=!1,className:a,children:o,"data-slot":s,ref:c,...l})=>r(i?n:`div`,{ref:c,"data-slot":t(s,`media-object-content`),className:e(`min-w-0 flex-1`,a),...l,children:o})};export{i as MediaObject};

package/dist/multi-select.d.ts

@@ -1,6 +1,6 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { o as WithValidation } from "./field-7QeiTFwl.js";
-import { n as Separator } from "./separator-CNDs98Dv.js";
+import { n as Separator } from "./separator-Bo4nY_3M.js";
 import { ComponentProps, ReactNode } from "react";
 import * as Primitive from "@ariakit/react";
 //#region src/components/multi-select/multi-select.d.ts
@@ -47,7 +47,10 @@ declare const Root: ({ children, defaultSelectedValue, ...props }: MultiSelectPr
 type MultiSelectTriggerProps = ComponentProps<"div"> & WithValidation;
 /**
  * The trigger container for the multi-select. Wraps the input and selected
- * value tags in a styled container that looks like a form input.
+ * value tags in a styled container that looks like a form input. It is
+ * `role="presentation"`: the `MultiSelect.Input` combobox and the
+ * `MultiSelect.TagValues` list carry the semantics, and the input's label
+ * (`Field.Label` or `aria-label`) names the whole control.
  *
  * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttrigger
  *
@@ -71,7 +74,8 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
    */
   value: string;
   /**
-   * Called when the remove button is clicked.
+   * Called when the remove button is clicked. `MultiSelect.TagValues` passes
+   * one through its render props that removes the value from the selection.
    */
   onRemove?: () => void;
   /**
@@ -82,11 +86,22 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
 };
 /**
  * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
- * Displays the value label with a remove button and full keyboard navigation support.
+ * Displays the value label with a remove button. Renders a `role="listitem"`
+ * inside the `role="list"` that `MultiSelect.TagValues` renders, and marks
+ * itself `data-active` while it has focus.
+ *
+ * Arrow-key navigation and Backspace/Delete removal come from the
+ * `MultiSelect.TagValues` render props; spread them onto the tag to get them.
+ * On its own, `Tag` only blocks Backspace and Delete on a locked tag.
  *
  * Use this when building a custom `TagValues`-like component and you want the
  * default tag chrome with consistent styling.
  *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-active` | present while focused | The tag that keyboard navigation is on. |
+ * | `data-locked` | present when `locked` | The tag cannot be removed. |
+ *
  * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttag
  *
  * @example
@@ -104,7 +119,7 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
  * </MultiSelect.Root>
  * ```
  */
-declare const Tag: ({ className, value, onRemove, locked, onKeyDown, ref, ...props }: TagProps) => import("react").JSX.Element;
+declare const Tag: ({ className, value, onRemove, locked, onBlur, onFocus, onKeyDown, ref, ...props }: TagProps) => import("react").JSX.Element;
 /**
  * Props passed to the children render function of `MultiSelect.TagValues`.
  * Spread these onto `MultiSelect.Tag` (or your own tag component) to
@@ -120,6 +135,12 @@ type TagRenderProps = TagProps & {
   ref: (node: HTMLSpanElement | null) => void;
 };
 type MultiSelectTagValuesProps = {
+  /**
+   * The accessible name of the tag list.
+   *
+   * @default "Selected values"
+   */
+  "aria-label"?: string;
   /**
    * Values that cannot be removed. Locked tags have their remove button disabled,
    * respond to Backspace/Delete key presses with a shake animation, and shake when
@@ -130,9 +151,10 @@ type MultiSelectTagValuesProps = {
    */
   lockedValues?: string[];
   /**
-   * Optional render function for each tag. Receives `{ value, onRemove, locked, ref }` —
-   * spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.
+   * Optional render function for each tag. Receives `{ value, onRemove, locked, ref, onKeyDown, onClick }`.
+   * Spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.
    * When omitted, the default `MultiSelect.Tag` is rendered for each selected value.
+   * A custom tag must be a `role="listitem"`: the tags render inside a `role="list"`.
    *
    * @example
    * ```tsx
@@ -149,6 +171,10 @@ type MultiSelectTagValuesProps = {
  * Renders the selected values as removable tags. Place this inside
  * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
  *
+ * The tags render inside a `role="list"` named "Selected values" (override it
+ * with `aria-label`), and each default tag is a `role="listitem"`. The list
+ * uses `display: contents`, so the tags keep the trigger's flex layout.
+ *
  * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttagvalues
  *
  * @example
@@ -164,7 +190,7 @@ type MultiSelectTagValuesProps = {
  * </MultiSelect.Root>
  * ```
  */
-declare const TagValues: ({ children, lockedValues }: MultiSelectTagValuesProps) => import("react").JSX.Element;
+declare const TagValues: ({ "aria-label": ariaLabel, children, lockedValues }: MultiSelectTagValuesProps) => import("react").JSX.Element | null;
 type MultiSelectInputProps = Omit<Primitive.ComboboxProps, "render"> & {
   /**
    * Called with the raw string value whenever the input text changes.
@@ -489,8 +515,11 @@ declare const MultiSelect: {
    */
   readonly Root: typeof Root;
   /**
-   * The trigger container for the multi-select. Wraps the tags and input
-   * in a styled container.
+   * The trigger container for the multi-select. Wraps the input and selected
+   * value tags in a styled container that looks like a form input. It is
+   * `role="presentation"`: the `MultiSelect.Input` combobox and the
+   * `MultiSelect.TagValues` list carry the semantics, and the input's label
+   * (`Field.Label` or `aria-label`) names the whole control.
    *
    * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttrigger
    *
@@ -512,8 +541,9 @@ declare const MultiSelect: {
    * Renders the selected values as removable tags. Place this inside
    * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
    *
-   * Use `lockedValues` to prevent specific tags from being removed. Locked tags
-   * have their remove button disabled and shake when Backspace is pressed.
+   * The tags render inside a `role="list"` named "Selected values" (override it
+   * with `aria-label`), and each default tag is a `role="listitem"`. The list
+   * uses `display: contents`, so the tags keep the trigger's flex layout.
    *
    * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttagvalues
    *
@@ -569,7 +599,9 @@ declare const MultiSelect: {
   readonly Input: typeof Input;
   /**
    * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
-   * Displays the value label with a remove button and keyboard navigation support.
+   * Displays the value label with a remove button. Renders a `role="listitem"`
+   * inside the `role="list"` that `MultiSelect.TagValues` renders, and marks
+   * itself `data-active` while it has focus.
    *
    * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttag
    *

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-CxM7jdFi.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-D1K7DSTv.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"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./cx-0HCjnNv1.js";import{t as r}from"./icon-CGKaq_tV.js";import{t as i}from"./slot-C3gII_9c.js";import{r as a}from"./layer-container-BTcQpd4K.js";import{a as o,r as s}from"./field-Bpptk_9t.js";import{t as c}from"./field-B1wqeZr4.js";import{n as l}from"./separator-Da8lDnio.js";import{t as u}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{createContext as d,useCallback as f,useContext as p,useEffect as m,useMemo as h,useRef as g,useState as _}from"react";import{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=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),D=d({current:null}),O=d(T),k=d({onInputKeyDownRef:{current:void 0},inputRef:{current:null},setLockedValues:()=>{}}),A=({children:e,defaultSelectedValue:t=T,...n})=>{let r=g(null),i=g(void 0),a=g(null),[o,s]=_(T),c=h(()=>({onInputKeyDownRef:i,inputRef:a,setLockedValues:s}),[]);return v(D.Provider,{value:r,children:v(k.Provider,{value:c,children:v(O.Provider,{value:o,children:v(S.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})},j=({"aria-invalid":e,className:r,children:i,onKeyDown:a,onMouseDown:c,ref:l,validation:u,...d})=>{let f=p(D),{inputRef:m}=p(k),h=S.useComboboxContext(),g=o(),{validation:_}=s({"aria-invalid":e,validation:u??g});return v(`div`,{role:`presentation`,"data-slot":`multi-select-trigger`,className:n(`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()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [data-slot='multi-select-tag']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:t(f,l),...d,children:i})},M=({className:e,value:i,onRemove:a,locked:o=!1,onBlur:s,onFocus:c,onKeyDown:l,ref:u,...d})=>{let f=g(null),[p,m]=_(!1);return y(`span`,{ref:t(f,u),role:`listitem`,tabIndex:-1,"data-slot":`multi-select-tag`,"data-active":p||void 0,"data-locked":o||void 0,className:n(`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`,e),onBlur:e=>{m(!1),s?.(e)},onFocus:e=>{m(!0),c?.(e)},onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),F(e.currentTarget);return}l?.(e)},...d,children:[i,v(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:n(`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=f.current;e&&F(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:v(r,{svg:o?v(C,{}):v(b,{weight:`bold`}),className:`size-4`})})]})},N=({render:e,...t})=>e(t),P={Root:A,Trigger:j,TagValues:({"aria-label":t=`Selected values`,children:n,lockedValues:r=T})=>{let i=S.useComboboxContext(),a=S.useStoreState(i,`selectedValue`),o=(w(a)?a:void 0)??T,s=g(o);e(()=>{s.current=o},[o]);let c=h(()=>new Set(r),[r]),l=g(new Map),{onInputKeyDownRef:u,inputRef:d,setLockedValues:f}=p(k);e(()=>{f(e=>E(e,r)?e:r)},[r,f]),e(()=>()=>{f(T)},[f]);let _=g(new Set);m(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t=requestAnimationFrame(()=>{_.current.delete(t),e()});_.current.add(t)},b=e=>{if(i){let t=i.getState().selectedValue;if(!w(t))return;i.setSelectedValue(t.filter(t=>t!==e))}},x=e=>{let t=s.current[e];if(t==null)return;let n=l.current.get(t);n&&(n.focus(),i?.show())},C=()=>{d.current?.focus()},D=(e,t)=>{let n=o[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&x(t-1);break;case`ArrowRight`:e.preventDefault(),t<o.length-1?x(t+1):C();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(c.has(n)){let e=l.current.get(n);e&&F(e);break}if(b(n),e.key===`Backspace`){if(t>0){let e=t-1;y(()=>x(e))}else y(()=>{s.current.length>0?x(0):C()})}else y(()=>{t<s.current.length?x(t):C()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),C(),d.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&&C()}},O=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&o.length>0){e.preventDefault(),x(o.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&o.length>0){let e=o[o.length-1];if(e!=null){if(c.has(e)){let t=l.current.get(e);t&&F(t)}else b(e)}}};return e(()=>(u.current=O,()=>{u.current=void 0})),o.length===0?null:v(`span`,{role:`list`,"aria-label":t,"data-slot":`multi-select-tag-list`,className:`contents`,children:o.map((e,t)=>{let r={value:e,locked:c.has(e),onRemove:()=>{if(c.has(e)){let t=l.current.get(e);t&&F(t);return}b(e)},ref:t=>{t?l.current.set(e,t):l.current.delete(e)},onKeyDown:e=>D(e,t),onClick:()=>x(t)};return n?v(N,{render:n,...r},e):v(M,{...r},e)})})},Input:({className:e,onBlur:r,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:l,ref:u,...d})=>{let f=S.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=p(k),g=p(c),_=S.useStoreState(f,`selectedValue`),y=((w(_)?_:void 0)?.length??0)>0;return v(S.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:n(`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`,e),onChange:e=>{s?.(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"]`)&&f?.show(),r?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:y?void 0:l,ref:t(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:M,Content:({asChild:e=!1,backdrop:t=!1,children:r,className:o,modal:s=!0,portalElement:c,preventBodyScroll:l,ref:u,sameWidth:d=!0,unmountOnHide:m=!0,...h})=>{let g=p(D),_=a(),y=_!=null,b=f(()=>g.current?.getBoundingClientRect()??null,[g]),x=f(e=>typeof c==`function`?c(e):c??g.current?.closest(`[data-mantle-modal-content]`)??(_ instanceof HTMLElement?_:null)??e.ownerDocument.body,[_,c,g]),C=f(e=>!(e.target instanceof Node&&g.current?.contains(e.target)),[g]);return v(S.ComboboxPopover,{"data-slot":`multi-select-content`,className:n(`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:t,getAnchorRect:b,gutter:4,hideOnInteractOutside:C,modal:s,portalElement:x,preventBodyScroll:l??!y,ref:u,render:e?({ref:e,...t})=>v(i,{ref:e,...t}):void 0,sameWidth:d,unmountOnHide:m,...h,children:r})},ContentFooter:({className:e,children:t,ref:r,...i})=>v(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:n(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:t}),Item:({asChild:e=!1,children:t,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let d=p(O),f=s!=null&&d.includes(s);return y(S.ComboboxItem,{"data-slot":`multi-select-item`,className:n(`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(f){e.preventDefault();return}c?.(e)},ref:l,render:e?({ref:e,...t})=>v(i,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[t,v(S.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:v(r,{svg:v(x,{weight:`bold`}),className:`size-4 text-accent-600`})})]})},Group:({asChild:e=!1,children:t,ref:n,...r})=>v(S.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>v(i,{ref:e,...t}):void 0,...r,children:t}),GroupLabel:({asChild:e=!1,children:t,className:r,ref:a,...o})=>v(S.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:n(`text-muted px-2 py-1 text-xs font-medium`,r),ref:a,render:e?({ref:e,...t})=>v(i,{ref:e,...t}):void 0,...o,children:t}),GroupDescription:({className:e,children:t,ref:r,...i})=>v(`p`,{"data-slot":`multi-select-group-description`,className:n(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:t}),Separator:({className:e,ref:t,...r})=>v(l,{"data-slot":`multi-select-separator`,ref:t,className:n(`my-1 w-auto`,e),...r}),Empty:({className:e,children:t,ref:r,...i})=>v(`div`,{"data-slot":`multi-select-empty`,className:n(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:t})};function F(e){u()||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{P as MultiSelect};

package/dist/otp-input.d.ts

@@ -23,6 +23,9 @@ type OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, "render" | "child
  * and `aria-errormessage` through to the underlying focusable input via
  * `FieldControlContext`.
  *
+ * **Accessibility.** The hidden input needs an accessible name. Inside a
+ * `Field.Item`, `Field.Label` supplies it. On its own, pass `aria-label`.
+ *
  * @see https://mantle.ngrok.com/components/forms/otp-input
  *
  * @example
@@ -184,9 +187,12 @@ declare const Separator: ({ asChild, children, className, ref, semantic, ...prop
  */
 declare const OtpInput: {
   /**
-   * The root of the OTP input. Wraps the hidden input that captures
-   * keystrokes, paste, and autofill, and exposes per-slot state to
-   * descendant `OtpInput.Slot` parts.
+   * The root of the OTP input. Renders an accessible single hidden input that
+   * captures keystrokes, paste events, and autofill, and exposes per-slot state
+   * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.
+   *
+   * The hidden input needs an accessible name. Inside a `Field.Item`,
+   * `Field.Label` supplies it. On its own, pass `aria-label`.
    *
    * @see https://mantle.ngrok.com/components/forms/otp-input
    *

package/dist/otp-input.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CxM7jdFi.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b={Root:({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})},Group:({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}),Slot:({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1,f=a?.isActive??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":f?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,translate:`no`,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})},Separator:({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})}};export{b as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./slot-C3gII_9c.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b={Root:({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})},Group:({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}),Slot:({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1,f=a?.isActive??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":f?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,translate:`no`,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})},Separator:({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})}};export{b as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};