@skdx/react 0.27.0 → 0.29.0

package/dist/mentions/Mentions.d.cts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { MentionsContextValue, MentionsHandle, MentionsProps } from './types.cjs';
+/** Default `getResultCountLabel`: `"1 result available"` / `"3 results available"`. */
+export declare function defaultGetResultCountLabel(count: number): string;
+export declare const MentionsProvider: React.FC<MentionsContextValue & {
+    children: React.ReactNode;
+}>, useMentionsContext: (consumerName: string) => MentionsContextValue;
+type MentionsRootProps = Omit<MentionsProps, 'ref'> & {
+    ref?: React.Ref<MentionsHandle> | undefined;
+};
+/**
+ * A multi-line text field where a trigger character such as `@` opens a floating
+ * listbox, and choosing an entry replaces only the typed token rather than the
+ * whole value. Real DOM focus stays on the textarea throughout; the highlighted
+ * entry is virtual focus, and the popup is anchored to the caret.
+ *
+ * The component's value is the free text the user wrote — the query is a
+ * substring inside it, derived from the text and the caret together, which is
+ * why there is no `query` prop and `onQueryChange` is the hook an async
+ * collection is loaded from.
+ *
+ * @example
+ * ```tsx
+ * function Composer() {
+ *   const [query, setQuery] = React.useState<string | null>(null);
+ *   const people = PEOPLE.filter((p) => query === null || p.startsWith(query));
+ *
+ *   return (
+ *     <Mentions onQueryChange={(token) => setQuery(token?.query ?? null)}>
+ *       <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ *       <MentionsPortal>
+ *         <MentionsContent aria-label="People">
+ *           {people.map((person) => (
+ *             <MentionsItem value={person} key={person}>{person}</MentionsItem>
+ *           ))}
+ *           <MentionsEmpty>No people</MentionsEmpty>
+ *         </MentionsContent>
+ *       </MentionsPortal>
+ *     </Mentions>
+ *   );
+ * }
+ * ```
+ */
+export declare const Mentions: {
+    (props: MentionsRootProps): React.ReactNode;
+    displayName: string;
+};
+export {};

package/dist/mentions/Mentions.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { MentionsContextValue, MentionsHandle, MentionsProps } from './types.js';
+/** Default `getResultCountLabel`: `"1 result available"` / `"3 results available"`. */
+export declare function defaultGetResultCountLabel(count: number): string;
+export declare const MentionsProvider: React.FC<MentionsContextValue & {
+    children: React.ReactNode;
+}>, useMentionsContext: (consumerName: string) => MentionsContextValue;
+type MentionsRootProps = Omit<MentionsProps, 'ref'> & {
+    ref?: React.Ref<MentionsHandle> | undefined;
+};
+/**
+ * A multi-line text field where a trigger character such as `@` opens a floating
+ * listbox, and choosing an entry replaces only the typed token rather than the
+ * whole value. Real DOM focus stays on the textarea throughout; the highlighted
+ * entry is virtual focus, and the popup is anchored to the caret.
+ *
+ * The component's value is the free text the user wrote — the query is a
+ * substring inside it, derived from the text and the caret together, which is
+ * why there is no `query` prop and `onQueryChange` is the hook an async
+ * collection is loaded from.
+ *
+ * @example
+ * ```tsx
+ * function Composer() {
+ *   const [query, setQuery] = React.useState<string | null>(null);
+ *   const people = PEOPLE.filter((p) => query === null || p.startsWith(query));
+ *
+ *   return (
+ *     <Mentions onQueryChange={(token) => setQuery(token?.query ?? null)}>
+ *       <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ *       <MentionsPortal>
+ *         <MentionsContent aria-label="People">
+ *           {people.map((person) => (
+ *             <MentionsItem value={person} key={person}>{person}</MentionsItem>
+ *           ))}
+ *           <MentionsEmpty>No people</MentionsEmpty>
+ *         </MentionsContent>
+ *       </MentionsPortal>
+ *     </Mentions>
+ *   );
+ * }
+ * ```
+ */
+export declare const Mentions: {
+    (props: MentionsRootProps): React.ReactNode;
+    displayName: string;
+};
+export {};

package/dist/mentions/Mentions.js

@@ -0,0 +1,2 @@
+'use client';
+import*as u from"react";import{createSafeContext as Ye}from"../utils/createContext.js";import{formValidityHandle as Ze,useFormReset as je}from"../utils/formControl.js";import{announce as et}from"../utils/liveAnnouncer.js";import{DEFAULT_MENTION_TRIGGER as ce,findMentionToken as tt,insertMention as nt,isMentionDismissed as ot}from"../utils/mentions.js";import{PopperRoot as rt}from"../utils/popper.js";import{filterKeeps as it,sortByOrder as at}from"../utils/scoredFilter.js";import{useControllableState as ue}from"../utils/useControllableState.js";import{useOpenChangeComplete as st}from"../utils/useOpenChangeComplete.js";import{OPTION_SELECTOR as lt,useOptionCollection as ut}from"../utils/useOptionCollection.js";import{useComposedRefs as Ie}from"../utils/composeRefs.js";import{skdxPart as be}from"../utils/part.js";import{PopperContent as Pe}from"../utils/popper.js";import{composeEventHandlers as xe}from"../utils/primitive.js";import{useDismiss as Ee}from"../utils/useDismiss.js";import{jsx as Te}from"react/jsx-runtime";var J=({forceMount:t,side:o="bottom",align:n="start",sideOffset:e=4,onEscapeKeyDown:d,onPointerDownOutside:i,onFocusOutside:a,onInteractOutside:c,ref:s,...m})=>{let l=h("MentionsContent"),g=Ie(s,l.contentRef);return Ee({enabled:l.open,onEscapeKeyDown:r=>{d?.(r),r.defaultPrevented||l.dismiss()},onInteractOutside:c,onPointerDownOutside:r=>{i?.(r),r.defaultPrevented||l.onOpenChange(!1)},onFocusOutside:r=>{a?.(r),r.defaultPrevented||l.onOpenChange(!1)}},[l.contentRef,l.inputRef]),!t&&!l.open?null:Te(Pe,{component:"mentions",role:"listbox",id:l.contentId,"aria-busy":l.loading?!0:void 0,"data-state":l.open?"open":"closed","data-trigger":l.token?.trigger,"data-loading":l.loading?"":void 0,side:o,align:n,sideOffset:e,...m,...be("mentions","content",m.className),ref:g,onMouseDown:xe(m.onMouseDown,r=>r.preventDefault())})};J.displayName="MentionsContent";import{skdxPart as Oe}from"../utils/part.js";import{Primitive as ke}from"../utils/primitive.js";import{jsx as we}from"react/jsx-runtime";var X=({ref:t,...o})=>h("MentionsEmpty").itemCount===0?we(ke.div,{role:"presentation",...o,...Oe("mentions","empty",o.className),ref:t}):null;X.displayName="MentionsEmpty";import*as M from"react";import{useComposedRefs as Ae}from"../utils/composeRefs.js";import{measureAutoResizeHeight as He}from"../utils/measure-auto-resize.js";import{caretAnchor as De}from"../utils/mentions.js";import{skdxPart as Ve}from"../utils/part.js";import{usePopperContext as Le}from"../utils/popper.js";import{composeEventHandlers as Ne,Primitive as Fe,useComposedEventHandlers as P}from"../utils/primitive.js";var Se=["fontFamily","fontSize","fontStretch","fontStyle","fontVariant","fontWeight","letterSpacing","textTransform","textIndent","wordSpacing","lineHeight","tabSize","paddingTop","paddingRight","paddingBottom","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","boxSizing","width"],ie=(t,o)=>{let n=getComputedStyle(t),e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",e.style.whiteSpace="pre-wrap",e.style.overflowWrap="break-word";for(let m of Se)e.style[m]=n[m];e.style.height="auto",e.textContent=t.value.slice(0,o);let d=document.createElement("span");d.textContent=t.value.slice(o)||".",e.appendChild(d),document.body.appendChild(e);let i=t.getBoundingClientRect(),a=d.getBoundingClientRect(),c=e.getBoundingClientRect(),s={top:i.top+(a.top-c.top)-t.scrollTop,left:i.left+(a.left-c.left)-t.scrollLeft,height:parseFloat(n.lineHeight)||a.height};return e.remove(),s};import{jsx as qe}from"react/jsx-runtime";function ze(t){let o=t.activeId?t.getItem(t.activeId):void 0;return o?(t.insertItem(o.value,o.text||o.value,"keyboard"),!0):!1}function Be(t,o){let{setAnchor:n,updateRef:e}=Le("MentionsInput"),d=M.useRef(0);M.useEffect(()=>{let i=t.current;if(!i)return;n(De(()=>ie(i,d.current),i),!0);let a=()=>e.current?.();return i.addEventListener("scroll",a),()=>{i.removeEventListener("scroll",a),n(null,!0)}},[t,n,e]),M.useEffect(()=>{d.current=o?.end??0,o&&e.current?.()},[o,e])}var Y=({ref:t,style:o,...n})=>{let e=h("MentionsInput"),d=Ae(t,e.inputRef),i=M.useRef(!1),{autoResize:a,maxRows:c,minRows:s,inputRef:m}=e;Be(m,e.token);let l=M.useCallback(()=>{let r=m.current;!r||!a||(r.style.height=`${He(r,c,s)}px`)},[a,c,s,m]);M.useLayoutEffect(()=>{l()},[l,e.value]);let g=r=>{if(!(i.current||r.nativeEvent.isComposing)){if(r.key==="Escape"){e.open&&!e.contentRef.current&&(r.preventDefault(),e.dismiss());return}if(e.open){if(r.key==="ArrowDown"||r.key==="ArrowUp"){r.preventDefault(),e.moveActive(r.key==="ArrowDown"?1:-1);return}(r.key==="Enter"||r.key==="Tab")&&ze(e)&&r.preventDefault()}}};return qe(Fe.textarea,{"aria-haspopup":"listbox","aria-controls":e.open?e.contentId:void 0,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",rows:a?void 0:s,name:e.name,form:e.form,required:e.required,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-busy":e.loading?!0:void 0,"data-state":e.open?"open":"closed","data-trigger":e.token?.trigger,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-loading":e.loading?"":void 0,...n,...Ve("mentions","input",n.className),ref:d,style:a?{overflow:"hidden",resize:"none",...o}:o,value:e.value,onChange:P(n.onChange,r=>{e.onValueChange(r.target.value),i.current||e.detect(r.currentTarget)}),onCompositionStart:P(n.onCompositionStart,()=>{i.current=!0}),onCompositionEnd:P(n.onCompositionEnd,r=>{i.current=!1,e.detect(r.currentTarget)}),onSelect:P(n.onSelect,r=>{i.current||e.detect(r.currentTarget)}),onClick:P(n.onClick,r=>{i.current||e.detect(r.currentTarget)}),onKeyUp:P(n.onKeyUp,r=>{i.current||e.detect(r.currentTarget)}),onBlur:Ne(n.onBlur,r=>{let y=r.relatedTarget;y&&e.contentRef.current?.contains(y)||e.onOpenChange(!1)}),onKeyDown:P(n.onKeyDown,g),onInput:P(n.onInput,l)})};Y.displayName="MentionsInput";import*as K from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{composeEventHandlers as ae,Primitive as $e}from"../utils/primitive.js";import{useOptionEntry as Qe}from"../utils/useOptionCollection.js";import{jsx as _e}from"react/jsx-runtime";var Ue=()=>{},Z=({value:t,trigger:o,textValue:n,disabled:e,ref:d,...i})=>{let a=h("MentionsItem"),c=K.useId(),s=K.useRef(null),m=We(d,s),l=o??a.defaultTrigger,g=a.token?.trigger===l,{text:r,visible:y}=Qe({id:c,value:t,textValue:n,itemRef:s,matchesFilter:a.matchesFilter,registerItem:g?a.registerItem:Ue,unregisterItem:a.unregisterItem});if(!y||!g)return null;let C=e||a.disabled||a.readOnly,x=a.activeId===c,E=a.itemOrder?.get(c);return _e($e.div,{role:"option",id:c,"data-value":t,"data-trigger":l,"aria-disabled":C?!0:void 0,"data-highlighted":x?"":void 0,"data-disabled":C?"":void 0,...i,...Ke("mentions","item",i.className),ref:m,onClick:ae(i.onClick,()=>{C||(a.insertItem(t,r??t,"pointer"),a.inputRef.current?.focus())}),onPointerEnter:ae(i.onPointerEnter,()=>{C||a.setActiveId(c,"pointer")}),style:E!==void 0?{order:E,...i.style}:i.style})};Z.displayName="MentionsItem";import{Portal as Ge}from"../utils/portal.js";import{jsx as Je}from"react/jsx-runtime";var j=({forceMount:t,children:o,...n})=>{let e=h("MentionsPortal");return t||e.open?Je(Ge,{...n,children:o}):null};j.displayName="MentionsPortal";import{defaultOptionsFilter as ee}from"../combobox/Combobox.js";import{Fragment as Xe,jsx as $,jsxs as se}from"react/jsx-runtime";var le=({options:t,renderOption:o,placeholder:n,ariaLabel:e,passThrough:d})=>{let i=h("Mentions"),a=e??n,c=i.activeId?i.getItem(i.activeId)?.value??null:null;return se(Xe,{children:[$(Y,{...d,"aria-label":a,placeholder:n}),$(j,{children:se(J,{"aria-label":a,children:[t.map(s=>$(Z,{value:s.value,trigger:s.trigger,disabled:s.disabled,textValue:s.label,children:o?o(s,{highlighted:c===s.value}):s.label??s.value},`${s.trigger??i.defaultTrigger}:${s.value}`)),$(X,{children:"No results"})]})})]})};import{jsx as te}from"react/jsx-runtime";function ct(t){return`${t} result${t===1?"":"s"} available`}var[dt,h]=Ye("Mentions"),mt=t=>`${t.trigger}${t.textValue}`;function ft(t){let{children:o,value:n,defaultValue:e="",onValueChange:d,triggers:i=ce,options:a,filter:c,serialize:s=mt,appendSpace:m=!0,allowedSpaces:l=0,requireWordBoundary:g=!0,onQueryChange:r,open:y,defaultOpen:C=!1,onOpenChange:x,onOpenChangeComplete:E,autoHighlight:b=!0,loop:T=!0,onHighlightChange:O,getResultCountLabel:Q=ct,renderOption:H,placeholder:D,"aria-label":V,ref:S,...L}=t;return{children:o,valueProp:n,defaultValue:e,onValueChange:d,triggers:i,options:a,filter:c??(a?ee:"manual"),serialize:s,appendSpace:m,allowedSpaces:l,requireWordBoundary:g,onQueryChange:r,openProp:y,defaultOpen:C,onOpenChange:x,onOpenChangeComplete:E,autoHighlight:b,loop:T,onHighlightChange:O,getResultCountLabel:Q,renderOption:H,placeholder:D,ariaLabel:V,forwardedRef:S,rest:L}}function pt(t){let{autoResize:o=!1,minRows:n=2,maxRows:e,disabled:d=!1,readOnly:i=!1,invalid:a=!1,loading:c=!1,required:s=!1,name:m,form:l,...g}=t;return{field:{autoResize:o,minRows:n,maxRows:e,disabled:d,readOnly:i,invalid:a,loading:c,required:s,name:m,form:l},...ft(g)}}function gt(t,o,n,e){u.useEffect(()=>{!t||o||et(e(n))},[t,o,n,e])}function Rt(t,o){let n=u.useRef(null);u.useEffect(()=>{de(n.current,t)||(n.current=t,o?.(t))},[t,o])}function de(t,o){return t===null||o===null?t===o:t.trigger===o.trigger&&t.query===o.query&&t.start===o.start&&t.end===o.end}function ht({activeId:t,getItem:o,setActiveId:n,onHighlightChange:e}){let d=u.useRef("auto"),i=u.useRef(null),a=u.useCallback((s,m="auto")=>{d.current=m,n(s)},[n]),c=t?o(t)?.value??null:null;return u.useEffect(()=>{let s=i.current;c!==s&&(i.current=c,e?.({value:c,previousValue:s,reason:d.current}))},[c,e]),a}var Mt=function(o){let n=pt(o),{field:e,children:d,options:i,renderOption:a,placeholder:c,ariaLabel:s,rest:m}=n,{triggers:l,allowedSpaces:g,requireWordBoundary:r}=n,{serialize:y,appendSpace:C,autoHighlight:x,loop:E}=n,b=n.filter,T=u.useRef(null),O=u.useRef(null),Q=u.useId(),H=u.useRef(null),D=u.useRef("programmatic"),V=u.useRef(null),[S="",L]=ue({prop:n.valueProp,defaultProp:n.defaultValue,onChange:f=>n.onValueChange?.({value:f,previousValue:H.current,reason:D.current,mention:V.current})}),[me=!1,v]=ue({prop:n.openProp,defaultProp:n.defaultOpen,onChange:n.onOpenChange}),[fe,ne]=u.useState(null),k=!e.disabled&&!e.readOnly,R=k?fe:null,w=k&&me,N=u.useRef(null);st(w,O,n.onOpenChangeComplete);let A=u.useCallback((f,p,I)=>{H.current=S,D.current=p,V.current=I,L(f)},[L,S]);je(T,()=>{A(n.defaultValue,"programmatic",null),v(!1)},e.form);let F=R?.query??"",pe=u.useCallback(f=>b==="manual"||it(b(f,F)),[b,F]),ge=u.useCallback(f=>{if(b==="manual")return null;let p=b(f.text,F);return typeof p=="number"?p:null},[b,F]),z=ut({open:w,setOpen:v,contentRef:O,loop:E,scoreItem:ge}),{activeId:B,getItem:oe,itemCount:U,itemOrder:_,setActiveId:G}=z,Re=ht({activeId:B,getItem:oe,setActiveId:G,onHighlightChange:n.onHighlightChange});u.useEffect(()=>{if(!x||!w||B!==null)return;let f=requestAnimationFrame(()=>{let p=Array.from(O.current?.querySelectorAll(lt)??[]),I=at(p,_)[0];I&&G(I.id)});return()=>cancelAnimationFrame(f)},[x,w,B,U,_,G]),gt(w,e.loading,U,n.getResultCountLabel),Rt(R,n.onQueryChange);let he=u.useCallback(f=>{if(!k)return;let p=tt(f.value,f.selectionStart,{triggers:l,allowedSpaces:g,requireWordBoundary:r});p===null&&(N.current=null),ne(I=>de(I,p)?I:p),v(p!==null&&!ot(p,N.current))},[l,g,r,k,v]),Me=u.useCallback(f=>A(f,"keyboard",null),[A]),ye=u.useCallback((f,p,I)=>{let q=T.current;if(!q||!R||!k)return;let re=y({value:f,textValue:p,trigger:R.trigger}),W=nt(q.value,R,re,C);q.value=W.value,q.setSelectionRange(W.caret,W.caret),A(W.value,I,{trigger:R.trigger,value:f,text:re,start:R.start,end:R.end}),N.current=null,ne(null),v(!1)},[R,k,y,C,A,v]),Ce=u.useCallback(()=>{R&&(N.current=R.start),v(!1)},[R,v]),ve=(typeof l=="string"?l.charAt(0):l[0])||ce;return u.useImperativeHandle(n.forwardedRef,()=>Ze(T),[]),te(rt,{children:te(dt,{inputRef:T,contentRef:O,contentId:Q,value:S,onValueChange:Me,token:R,detect:he,insertItem:ye,dismiss:Ce,open:w,onOpenChange:v,activeId:B,itemOrder:_,setActiveId:Re,moveActive:z.moveActive,itemCount:U,registerItem:z.registerItem,unregisterItem:z.unregisterItem,getItem:oe,matchesFilter:pe,defaultTrigger:ve,...e,children:d??te(le,{options:i??[],renderOption:a,placeholder:c,ariaLabel:s,passThrough:m})})})};Mt.displayName="Mentions";export{Mt as Mentions,J as MentionsContent,X as MentionsEmpty,Y as MentionsInput,Z as MentionsItem,j as MentionsPortal,dt as MentionsProvider,ct as defaultGetResultCountLabel,ee as defaultOptionsFilter,h as useMentionsContext};

package/dist/mentions/MentionsAnatomy.d.cts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { MentionsOptionData } from './types.cjs';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.cjs';
+/** @internal Renders Mentions anatomy from `options`: input, portal, and the caret-anchored listbox. */
+export declare const MentionsAnatomy: ({ options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    options: MentionsOptionData[];
+    renderOption?: ((option: MentionsOptionData, state: {
+        highlighted: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/mentions/MentionsAnatomy.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { MentionsOptionData } from './types.js';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.js';
+/** @internal Renders Mentions anatomy from `options`: input, portal, and the caret-anchored listbox. */
+export declare const MentionsAnatomy: ({ options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    options: MentionsOptionData[];
+    renderOption?: ((option: MentionsOptionData, state: {
+        highlighted: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/mentions/MentionsContent.d.cts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+import type { MentionsContentProps } from './types.cjs';
+/**
+ * The floating listbox of mentionable entries, positioned below and
+ * start-aligned. Its anchor is the caret rather than the field, so the popup
+ * follows the mention through wrapped lines; one consequence for skins is that
+ * `--skdx-mentions-trigger-width` measures that zero-width anchor and is always
+ * `0`, so size this from `--skdx-mentions-available-width` instead.
+ *
+ * Escape closes and leaves the text and caret untouched; an outside pointer-down
+ * or focus move closes too, each reported to its handler and, first, to
+ * `onInteractOutside`. Any of them calling `event.preventDefault()` keeps it
+ * open. The field counts as inside.
+ *
+ * @example
+ * ```tsx
+ * <MentionsContent aria-label="People">
+ *   <MentionsItem value="alice">Alice</MentionsItem>
+ * </MentionsContent>
+ * ```
+ */
+export declare const MentionsContent: {
+    ({ forceMount, side, align, sideOffset, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref: forwardedRef, ...props }: MentionsContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsContent.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+import type { MentionsContentProps } from './types.js';
+/**
+ * The floating listbox of mentionable entries, positioned below and
+ * start-aligned. Its anchor is the caret rather than the field, so the popup
+ * follows the mention through wrapped lines; one consequence for skins is that
+ * `--skdx-mentions-trigger-width` measures that zero-width anchor and is always
+ * `0`, so size this from `--skdx-mentions-available-width` instead.
+ *
+ * Escape closes and leaves the text and caret untouched; an outside pointer-down
+ * or focus move closes too, each reported to its handler and, first, to
+ * `onInteractOutside`. Any of them calling `event.preventDefault()` keeps it
+ * open. The field counts as inside.
+ *
+ * @example
+ * ```tsx
+ * <MentionsContent aria-label="People">
+ *   <MentionsItem value="alice">Alice</MentionsItem>
+ * </MentionsContent>
+ * ```
+ */
+export declare const MentionsContent: {
+    ({ forceMount, side, align, sideOffset, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref: forwardedRef, ...props }: MentionsContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsEmpty.d.cts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { MentionsEmptyProps } from './types.cjs';
+/**
+ * Shown in place of the entry list when the active query matches nothing —
+ * because no Items were rendered for it, because `filter` rejected every one, or
+ * because none belongs to the active trigger. Renders nothing while entries exist.
+ *
+ * @example
+ * ```tsx
+ * <MentionsEmpty>No people</MentionsEmpty>
+ * ```
+ */
+export declare const MentionsEmpty: {
+    ({ ref: forwardedRef, ...props }: MentionsEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsEmpty.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { MentionsEmptyProps } from './types.js';
+/**
+ * Shown in place of the entry list when the active query matches nothing —
+ * because no Items were rendered for it, because `filter` rejected every one, or
+ * because none belongs to the active trigger. Renders nothing while entries exist.
+ *
+ * @example
+ * ```tsx
+ * <MentionsEmpty>No people</MentionsEmpty>
+ * ```
+ */
+export declare const MentionsEmpty: {
+    ({ ref: forwardedRef, ...props }: MentionsEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsInput.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { MentionsInputProps } from './types.cjs';
+/**
+ * The multi-line field a {@link Mentions} is built around: a real `<textarea>`,
+ * so wrapping, line breaks and the native form value are the platform's. Keeps
+ * real DOM focus for the whole interaction and carries `aria-haspopup="listbox"`
+ * with `aria-controls`, `aria-autocomplete="list"` and the
+ * `aria-activedescendant` naming the highlighted entry. HTML permits no `role`
+ * on a textarea, so the field keeps its native textbox role.
+ *
+ * Keyboard, in full:
+ *
+ * | Key | Effect |
+ * | --- | --- |
+ * | Arrow Down / Up | **while open only**, moves the highlight — neither key opens the popup |
+ * | Home / End / PageUp / PageDown | never intercepted: they are the caret keys of a multi-line field |
+ * | Enter | inserts the highlighted entry while open with a highlight; otherwise a line break |
+ * | Tab | commits the highlighted entry while open; otherwise moves focus |
+ * | Escape | closes and leaves the text and the caret exactly as they are |
+ *
+ * Detection is suspended between `compositionstart` and `compositionend` and
+ * runs once on the composition-end value, so a half-formed romaji buffer is
+ * never read as a query. Give the field an accessible name — `aria-label`,
+ * `aria-labelledby`, or a `Label`.
+ *
+ * @example
+ * ```tsx
+ * <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ * ```
+ */
+export declare const MentionsInput: {
+    ({ ref: forwardedRef, style, ...props }: MentionsInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsInput.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { MentionsInputProps } from './types.js';
+/**
+ * The multi-line field a {@link Mentions} is built around: a real `<textarea>`,
+ * so wrapping, line breaks and the native form value are the platform's. Keeps
+ * real DOM focus for the whole interaction and carries `aria-haspopup="listbox"`
+ * with `aria-controls`, `aria-autocomplete="list"` and the
+ * `aria-activedescendant` naming the highlighted entry. HTML permits no `role`
+ * on a textarea, so the field keeps its native textbox role.
+ *
+ * Keyboard, in full:
+ *
+ * | Key | Effect |
+ * | --- | --- |
+ * | Arrow Down / Up | **while open only**, moves the highlight — neither key opens the popup |
+ * | Home / End / PageUp / PageDown | never intercepted: they are the caret keys of a multi-line field |
+ * | Enter | inserts the highlighted entry while open with a highlight; otherwise a line break |
+ * | Tab | commits the highlighted entry while open; otherwise moves focus |
+ * | Escape | closes and leaves the text and the caret exactly as they are |
+ *
+ * Detection is suspended between `compositionstart` and `compositionend` and
+ * runs once on the composition-end value, so a half-formed romaji buffer is
+ * never read as a query. Give the field an accessible name — `aria-label`,
+ * `aria-labelledby`, or a `Label`.
+ *
+ * @example
+ * ```tsx
+ * <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ * ```
+ */
+export declare const MentionsInput: {
+    ({ ref: forwardedRef, style, ...props }: MentionsInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsItem.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { MentionsItemProps } from './types.cjs';
+/**
+ * One mentionable entry inside {@link MentionsContent}, rendering a
+ * `<div role="option">` with `data-value`, `data-trigger` and `data-highlighted`.
+ * Highlighted virtually and never focused, so the caret stays exactly where the
+ * user left it.
+ *
+ * An entry whose `trigger` differs from the active token's is not an option at
+ * all — it renders nothing, is unreachable through `aria-activedescendant`, and
+ * is uncounted by the announcement and by `MentionsEmpty`.
+ *
+ * @example
+ * ```tsx
+ * <MentionsItem value="alice">Alice</MentionsItem>
+ * ```
+ */
+export declare const MentionsItem: {
+    ({ value, trigger, textValue, disabled, ref: forwardedRef, ...props }: MentionsItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsItem.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { MentionsItemProps } from './types.js';
+/**
+ * One mentionable entry inside {@link MentionsContent}, rendering a
+ * `<div role="option">` with `data-value`, `data-trigger` and `data-highlighted`.
+ * Highlighted virtually and never focused, so the caret stays exactly where the
+ * user left it.
+ *
+ * An entry whose `trigger` differs from the active token's is not an option at
+ * all — it renders nothing, is unreachable through `aria-activedescendant`, and
+ * is uncounted by the announcement and by `MentionsEmpty`.
+ *
+ * @example
+ * ```tsx
+ * <MentionsItem value="alice">Alice</MentionsItem>
+ * ```
+ */
+export declare const MentionsItem: {
+    ({ value, trigger, textValue, disabled, ref: forwardedRef, ...props }: MentionsItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/mentions/MentionsPortal.d.cts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { MentionsPortalProps } from './types.cjs';
+/**
+ * Teleports its children to `document.body` or `container`, escaping the
+ * clipping and overflow of whatever the field sits in. Renders nothing while
+ * closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <MentionsPortal>
+ *   <MentionsContent>
+ *     <MentionsItem value="alice">Alice</MentionsItem>
+ *   </MentionsContent>
+ * </MentionsPortal>
+ * ```
+ */
+export declare const MentionsPortal: {
+    ({ forceMount, children, ...props }: MentionsPortalProps): JSX.Element | null;
+    displayName: string;
+};

package/dist/mentions/MentionsPortal.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { MentionsPortalProps } from './types.js';
+/**
+ * Teleports its children to `document.body` or `container`, escaping the
+ * clipping and overflow of whatever the field sits in. Renders nothing while
+ * closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <MentionsPortal>
+ *   <MentionsContent>
+ *     <MentionsItem value="alice">Alice</MentionsItem>
+ *   </MentionsContent>
+ * </MentionsPortal>
+ * ```
+ */
+export declare const MentionsPortal: {
+    ({ forceMount, children, ...props }: MentionsPortalProps): JSX.Element | null;
+    displayName: string;
+};

package/dist/mentions/caret-rect.d.cts

@@ -0,0 +1,9 @@
+import type { MeasureCaretRect } from '../utils/mentions.cjs';
+/**
+ * The viewport rectangle of the caret at `offset` inside a text field, measured
+ * through a mirror element the same text is laid out in.
+ *
+ * @param field the textarea or input the caret sits in
+ * @param offset the caret offset the rectangle is wanted for
+ */
+export declare const measureCaretRect: MeasureCaretRect;

package/dist/mentions/caret-rect.d.ts

@@ -0,0 +1,9 @@
+import type { MeasureCaretRect } from '../utils/mentions.js';
+/**
+ * The viewport rectangle of the caret at `offset` inside a text field, measured
+ * through a mirror element the same text is laid out in.
+ *
+ * @param field the textarea or input the caret sits in
+ * @param offset the caret offset the rectangle is wanted for
+ */
+export declare const measureCaretRect: MeasureCaretRect;

package/dist/mentions/index.d.cts

@@ -0,0 +1,3 @@
+export * from './Mentions.cjs';
+export type { MentionsFilter, MentionsOptionData, MentionsSerializeInput, MentionsInsertedMention, MentionsValueChangeDetail, MentionsValueChangeReason, MentionsQueryChangeDetail, MentionsHighlightChangeDetail, MentionsHighlightReason, MentionsProps, MentionsHandle, } from './types.cjs';
+export { defaultOptionsFilter } from './MentionsAnatomy.cjs';

package/dist/mentions/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Mentions.js';
+export type { MentionsFilter, MentionsOptionData, MentionsSerializeInput, MentionsInsertedMention, MentionsValueChangeDetail, MentionsValueChangeReason, MentionsQueryChangeDetail, MentionsHighlightChangeDetail, MentionsHighlightReason, MentionsProps, MentionsHandle, } from './types.js';
+export { defaultOptionsFilter } from './MentionsAnatomy.js';

package/dist/mentions/primitives.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Primitives for `Mentions` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Mentions, MentionsContent, MentionsEmpty, MentionsInput, MentionsItem, MentionsPortal } from '@skdx/react/primitives/mentions';
+ *
+ * <Mentions>
+ *   <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ *   <MentionsPortal>
+ *     <MentionsContent aria-label="People">
+ *       <MentionsItem value="alice">Alice</MentionsItem>
+ *       <MentionsEmpty>No people</MentionsEmpty>
+ *     </MentionsContent>
+ *   </MentionsPortal>
+ * </Mentions>
+ * ```
+ */
+export { Mentions } from './Mentions.cjs';
+export { MentionsInput } from './MentionsInput.cjs';
+export { MentionsPortal } from './MentionsPortal.cjs';
+export { MentionsContent } from './MentionsContent.cjs';
+export { MentionsItem } from './MentionsItem.cjs';
+export { MentionsEmpty } from './MentionsEmpty.cjs';
+export type { MentionsProps, MentionsInputProps, MentionsPortalProps, MentionsContentProps, MentionsItemProps, MentionsEmptyProps, } from './types.cjs';

package/dist/mentions/primitives.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Primitives for `Mentions` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Mentions, MentionsContent, MentionsEmpty, MentionsInput, MentionsItem, MentionsPortal } from '@skdx/react/primitives/mentions';
+ *
+ * <Mentions>
+ *   <MentionsInput aria-label="Message" placeholder="Write a message…" />
+ *   <MentionsPortal>
+ *     <MentionsContent aria-label="People">
+ *       <MentionsItem value="alice">Alice</MentionsItem>
+ *       <MentionsEmpty>No people</MentionsEmpty>
+ *     </MentionsContent>
+ *   </MentionsPortal>
+ * </Mentions>
+ * ```
+ */
+export { Mentions } from './Mentions.js';
+export { MentionsInput } from './MentionsInput.js';
+export { MentionsPortal } from './MentionsPortal.js';
+export { MentionsContent } from './MentionsContent.js';
+export { MentionsItem } from './MentionsItem.js';
+export { MentionsEmpty } from './MentionsEmpty.js';
+export type { MentionsProps, MentionsInputProps, MentionsPortalProps, MentionsContentProps, MentionsItemProps, MentionsEmptyProps, } from './types.js';