@skdx/react 0.28.0 → 0.30.0

package/dist/loading-overlay/LoadingOverlay.js

@@ -1 +1,2 @@
-import*as r from"react";import{createSafeContext as z}from"../utils/createContext.js";import{announce as b,clearAnnouncements as F}from"../utils/liveAnnouncer.js";import{skdxPart as k}from"../utils/part.js";import{Primitive as G}from"../utils/primitive.js";import{useBodyScrollLock as I}from"../utils/useBodyScrollLock.js";import{useCallbackRef as J}from"../utils/useCallbackRef.js";import{useControllableState as K}from"../utils/useControllableState.js";import*as R from"react";import{skdxPart as T}from"../utils/part.js";import{Presence as D}from"../utils/presence.js";import{Primitive as V}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var p=R.forwardRef((t,a)=>{let{visible:o,fullScreen:i}=d("LoadingOverlayBackdrop");return O(D,{present:o,children:O(V.div,{"aria-hidden":!0,"data-state":o?"visible":"hidden","data-full-screen":i?"":void 0,...t,...T("loading-overlay","backdrop",t.className),ref:a})})});p.displayName="LoadingOverlayBackdrop";import*as P from"react";import{Spinner as A}from"../spinner/Spinner.js";import{skdxPart as H}from"../utils/part.js";import{Presence as M}from"../utils/presence.js";import{Primitive as q}from"../utils/primitive.js";import{jsx as v}from"react/jsx-runtime";var c=P.forwardRef(({children:t,...a},o)=>{let{visible:i,fullScreen:s,loadingLabel:n}=d("LoadingOverlayContent");return v(M,{present:i,children:v(q.div,{"data-state":i?"visible":"hidden","data-full-screen":s?"":void 0,...a,...H("loading-overlay","content",a.className),ref:o,children:t??v(A,{label:n})})})});c.displayName="LoadingOverlayContent";import{Fragment as Y,jsx as C,jsxs as _}from"react/jsx-runtime";var x=()=>_(Y,{children:[C(p,{}),C(c,{})]});import{jsx as l,jsxs as W}from"react/jsx-runtime";var[Q,d]=z("LoadingOverlay"),U={display:"contents"},E=r.forwardRef(({visible:t,onVisibleChange:a,fullScreen:o=!1,loadingLabel:i="Loading",loadedLabel:s,delay:n=0,children:w,...y},h)=>{let[m=!1]=K({prop:t}),[B,u]=r.useState(!1);r.useEffect(()=>{if(!m||n<=0)return;let N=window.setTimeout(()=>u(!0),n);return()=>{window.clearTimeout(N),u(!1)}},[m,n]);let e=m&&(n<=0||B),g=J(a),L=r.useRef(e);r.useEffect(()=>{L.current!==e&&(L.current=e,g(e))},[e,g]);let f=r.useRef(!1);return r.useEffect(()=>{if(e){f.current=!0,b(i);return}f.current&&(f.current=!1,s?b(s):F("polite"))},[e,i,s]),I(e&&o),l(Q,{visible:e,fullScreen:o,loadingLabel:i,children:l(G.div,{"aria-busy":e||void 0,"data-state":e?"visible":"hidden","data-full-screen":o?"":void 0,...y,...k("loading-overlay","root",y.className),ref:h,children:l("div",{inert:e,style:U,...k("loading-overlay","covered"),children:w})})})});E.displayName="LoadingOverlayRoot";var S=r.forwardRef(({children:t,...a},o)=>W(E,{...a,ref:o,children:[t,l(x,{})]}));S.displayName="LoadingOverlay";export{S as LoadingOverlay,p as LoadingOverlayBackdrop,c as LoadingOverlayContent,Q as LoadingOverlayProvider,E as LoadingOverlayRoot,d as useLoadingOverlayContext};
+'use client';
+import*as t from"react";import{createSafeContext as _}from"../utils/createContext.js";import{announce as x,clearAnnouncements as z}from"../utils/liveAnnouncer.js";import{skdxPart as C}from"../utils/part.js";import{Primitive as F}from"../utils/primitive.js";import{recipeAxis as G}from"../utils/recipeAxis.js";import{useBodyScrollLock as H}from"../utils/useBodyScrollLock.js";import{useCallbackRef as I}from"../utils/useCallbackRef.js";import{useControllableState as K}from"../utils/useControllableState.js";import{appearanceAttrs as E}from"../utils/appearance.js";import{skdxPart as A}from"../utils/part.js";import{Presence as V}from"../utils/presence.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var c=({ref:a,emphasis:i,...e})=>{let{visible:r,fullScreen:n}=d("LoadingOverlayBackdrop");return O(V,{present:r,children:O(w.div,{"aria-hidden":!0,"data-state":r?"visible":"hidden","data-full-screen":n?"":void 0,...e,...E({emphasis:i},e),...A("loading-overlay","backdrop",e.className),ref:a})})};c.displayName="LoadingOverlayBackdrop";import{Spinner as T}from"../spinner/Spinner.js";import{skdxPart as D}from"../utils/part.js";import{Presence as J}from"../utils/presence.js";import{Primitive as X}from"../utils/primitive.js";import{jsx as f}from"react/jsx-runtime";var v=({children:a,ref:i,...e})=>{let{visible:r,fullScreen:n,loadingLabel:s}=d("LoadingOverlayContent");return f(J,{present:r,children:f(X.div,{"data-state":r?"visible":"hidden","data-full-screen":n?"":void 0,...e,...D("loading-overlay","content",e.className),ref:i,children:a??f(T,{label:s})})})};v.displayName="LoadingOverlayContent";import{Fragment as q,jsx as R,jsxs as Y}from"react/jsx-runtime";var P=({emphasis:a})=>Y(q,{children:[R(c,{emphasis:a}),R(v,{})]});import{jsx as l,jsxs as U}from"react/jsx-runtime";var[M,d]=_("LoadingOverlay"),Q={display:"contents"},k=({visible:a,onVisibleChange:i,fullScreen:e=!1,loadingLabel:r="Loading",loadedLabel:n,delay:s=0,children:h,ref:N,...y})=>{let[p=!1]=K({prop:a}),[S,u]=t.useState(!1);t.useEffect(()=>{if(!p||s<=0)return;let B=window.setTimeout(()=>u(!0),s);return()=>{window.clearTimeout(B),u(!1)}},[p,s]);let o=p&&(s<=0||S),g=I(i),L=t.useRef(o);t.useEffect(()=>{L.current!==o&&(L.current=o,g(o))},[o,g]);let m=t.useRef(!1);return t.useEffect(()=>{if(o){m.current=!0,x(r);return}m.current&&(m.current=!1,n?x(n):z("polite"))},[o,r,n]),H(o&&e),l(M,{visible:o,fullScreen:e,loadingLabel:r,children:l(F.div,{"aria-busy":o||void 0,"data-state":o?"visible":"hidden","data-full-screen":e?"":void 0,...y,...C("loading-overlay","root",y.className),ref:N,children:l("div",{inert:o,style:Q,...C("loading-overlay","covered"),children:h})})})};k.displayName="LoadingOverlayRoot";var b=({children:a,emphasis:i,ref:e,...r})=>U(k,{...r,"data-emphasis":void 0,ref:e,children:[a,l(P,{emphasis:G(i,r,"data-emphasis")})]});b.displayName="LoadingOverlay";export{b as LoadingOverlay,c as LoadingOverlayBackdrop,v as LoadingOverlayContent,M as LoadingOverlayProvider,k as LoadingOverlayRoot,d as useLoadingOverlayContext};

package/dist/loading-overlay/LoadingOverlayAnatomy.d.cts

@@ -1,7 +1,11 @@
+import type { JSX } from 'react';
+import type { LoadingOverlayBackdropProps } from './types.cjs';
 /**
  * The anatomy a {@link LoadingOverlay} draws over the covered content: the
  * `LoadingOverlayBackdrop` scrim, then the `LoadingOverlayContent` layer with its default `Spinner`.
  *
  * @internal
  */
-export declare const LoadingOverlayAnatomy: () => import("react").JSX.Element;
+export declare const LoadingOverlayAnatomy: ({ emphasis, }: {
+    emphasis?: LoadingOverlayBackdropProps["emphasis"] | undefined;
+}) => JSX.Element;

package/dist/loading-overlay/LoadingOverlayAnatomy.d.ts

@@ -1,7 +1,11 @@
+import type { JSX } from 'react';
+import type { LoadingOverlayBackdropProps } from './types.js';
 /**
  * The anatomy a {@link LoadingOverlay} draws over the covered content: the
  * `LoadingOverlayBackdrop` scrim, then the `LoadingOverlayContent` layer with its default `Spinner`.
  *
  * @internal
  */
-export declare const LoadingOverlayAnatomy: () => import("react").JSX.Element;
+export declare const LoadingOverlayAnatomy: ({ emphasis, }: {
+    emphasis?: LoadingOverlayBackdropProps["emphasis"] | undefined;
+}) => JSX.Element;

package/dist/loading-overlay/LoadingOverlayBackdrop.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayBackdropProps } from './types.cjs';
 /**
  * Scrim covering work in progress — mounts through `Presence` for CSS exit animation. `aria-hidden` (pure decoration).
@@ -13,4 +13,7 @@ import type { LoadingOverlayBackdropProps } from './types.cjs';
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayBackdrop: React.ForwardRefExoticComponent<Omit<LoadingOverlayBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayBackdrop: {
+    ({ ref: forwardedRef, emphasis, ...props }: LoadingOverlayBackdropProps): React.ReactNode;
+    displayName: string;
+};

package/dist/loading-overlay/LoadingOverlayBackdrop.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayBackdropProps } from './types.js';
 /**
  * Scrim covering work in progress — mounts through `Presence` for CSS exit animation. `aria-hidden` (pure decoration).
@@ -13,4 +13,7 @@ import type { LoadingOverlayBackdropProps } from './types.js';
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayBackdrop: React.ForwardRefExoticComponent<Omit<LoadingOverlayBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayBackdrop: {
+    ({ ref: forwardedRef, emphasis, ...props }: LoadingOverlayBackdropProps): React.ReactNode;
+    displayName: string;
+};

package/dist/loading-overlay/LoadingOverlayContent.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayContentProps } from './types.cjs';
 /**
- * Indicator layer on top of the backdrop. Mounts through `Presence` with
- * `data-state` hooks. Defaults to `Spinner` with root's `loadingLabel`.
- * Nothing focusable; root announces via live region.
+ * Indicator layer on top of the backdrop, mounted through `Presence` and defaulting to a `Spinner` labelled from the root's `loadingLabel`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { LoadingOverlayContentProps } from './types.cjs';
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayContent: React.ForwardRefExoticComponent<Omit<LoadingOverlayContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayContent: {
+    ({ children, ref: forwardedRef, ...props }: LoadingOverlayContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/loading-overlay/LoadingOverlayContent.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayContentProps } from './types.js';
 /**
- * Indicator layer on top of the backdrop. Mounts through `Presence` with
- * `data-state` hooks. Defaults to `Spinner` with root's `loadingLabel`.
- * Nothing focusable; root announces via live region.
+ * Indicator layer on top of the backdrop, mounted through `Presence` and defaulting to a `Spinner` labelled from the root's `loadingLabel`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { LoadingOverlayContentProps } from './types.js';
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayContent: React.ForwardRefExoticComponent<Omit<LoadingOverlayContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayContent: {
+    ({ children, ref: forwardedRef, ...props }: LoadingOverlayContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/loading-overlay/types.d.cts

@@ -1,13 +1,7 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * @internal Shared state distributed from LoadingOverlay to backdrop and
- * content parts via context.
- */
+/** @internal Shared state distributed from LoadingOverlay to backdrop and content parts via context. */
 export interface LoadingOverlayContextValue {
-    /**
-     * Effective visibility after `delay` (not the raw prop). Determines whether
-     * parts render; requests resolving inside the delay never render the overlay.
-     */
+    /** Effective visibility after `delay`, not the raw prop. */
     visible: boolean;
     fullScreen: boolean;
     loadingLabel: string;
@@ -15,60 +9,53 @@ export interface LoadingOverlayContextValue {
 /** Props for the {@link LoadingOverlayRoot}. */
 export interface LoadingOverlayRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Whether work is in flight for controlled usage. Pair with `onVisibleChange`.
+     * Whether work is in flight, for controlled usage paired with `onVisibleChange`.
      * @default undefined — uncontrolled, tracks internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
-     * Fires when the overlay actually appears or disappears (after `delay`).
-     * Reports the effective transition, not the prop — the render moment of a
-     * delayed overlay cannot be derived from the `visible` prop alone.
+     * Fires when the overlay actually appears or disappears, after `delay`, reporting the effective transition rather than the raw prop.
      * @default undefined — no-op if omitted.
      */
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     /**
-     * Cover the viewport instead of the root's box. Emits `data-full-screen`
-     * and locks body scroll while visible; inline overlays never lock the body.
+     * Covers the viewport instead of the root's box, emitting `data-full-screen` and locking body scroll while visible.
      * @default false — the overlay covers only the root element's box.
      */
-    fullScreen?: boolean;
+    fullScreen?: boolean | undefined;
     /**
      * Accessible name of the busy region, announced when the overlay becomes
      * visible and used as the derived `Spinner`'s label.
      * @default 'Loading' — name the work ("Loading invoices") when multiple overlays exist.
      */
-    loadingLabel?: string;
+    loadingLabel?: string | undefined;
     /**
-     * Text announced when the overlay hides, closing the loop the appearance
-     * announcement opens (the region became operable again — a change screen-reader
-     * users cannot see). Omitted: the overlay clears its message from the live
-     * region, allowing consecutive loads to announce twice.
+     * Text announced when the overlay hides, closing the loop the appearance announcement opened.
      * @default undefined — hiding announces nothing.
      */
-    loadedLabel?: string;
+    loadedLabel?: string | undefined;
     /**
-     * Milliseconds to wait after `visible` turns true before the overlay renders.
-     * Responses arriving inside this window never render the overlay, preventing
-     * spinner flash on fast requests. The timer cancels if `visible` flips back
-     * to false or on unmount.
+     * Milliseconds to wait after `visible` turns true before the overlay renders, preventing spinner flash on fast responses.
      * @default 0 — shows immediately to avoid hiding slow connections.
      */
-    delay?: number;
+    delay?: number | undefined;
 }
-/**
- * Props for the {@link LoadingOverlay} recipe. No `asChild`: the recipe wraps
- * children in the derived anatomy. Use `primitives/loading-overlay`'s `LoadingOverlayRoot` for headless access.
- */
-export type LoadingOverlayProps = Omit<LoadingOverlayRootProps, 'asChild'>;
-/**
- * Props for {@link LoadingOverlayBackdrop}, the scrim layer. Reads visibility
- * from the root's context.
- */
+/** Props for the {@link LoadingOverlay} recipe, which wraps children in the derived anatomy and has no `asChild`. */
+export type LoadingOverlayProps = Omit<LoadingOverlayRootProps, 'asChild'> & {
+    /**
+     * How heavily the skin dims the page, fed to the derived Backdrop.
+     * @default undefined — the skin's own default dimming.
+     */
+    emphasis?: 'low' | 'medium' | 'high' | (string & {}) | undefined;
+};
+/** Props for {@link LoadingOverlayBackdrop}, the scrim layer that reads visibility from the root's context. */
 export interface LoadingOverlayBackdropProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * How heavily the skin dims the page behind, mirrored to `data-emphasis`.
+     * @default undefined — the skin's own default dimming.
+     */
+    emphasis?: 'low' | 'medium' | 'high' | (string & {}) | undefined;
 }
-/**
- * Props for {@link LoadingOverlayContent}, the centered indicator layer. Reads
- * visibility and label from the root's context.
- */
+/** Props for {@link LoadingOverlayContent}, the centered indicator layer that reads visibility and label from the root's context. */
 export interface LoadingOverlayContentProps extends PrimitivePropsWithRef<'div'> {
 }

package/dist/loading-overlay/types.d.ts

@@ -1,13 +1,7 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * @internal Shared state distributed from LoadingOverlay to backdrop and
- * content parts via context.
- */
+/** @internal Shared state distributed from LoadingOverlay to backdrop and content parts via context. */
 export interface LoadingOverlayContextValue {
-    /**
-     * Effective visibility after `delay` (not the raw prop). Determines whether
-     * parts render; requests resolving inside the delay never render the overlay.
-     */
+    /** Effective visibility after `delay`, not the raw prop. */
     visible: boolean;
     fullScreen: boolean;
     loadingLabel: string;
@@ -15,60 +9,53 @@ export interface LoadingOverlayContextValue {
 /** Props for the {@link LoadingOverlayRoot}. */
 export interface LoadingOverlayRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Whether work is in flight for controlled usage. Pair with `onVisibleChange`.
+     * Whether work is in flight, for controlled usage paired with `onVisibleChange`.
      * @default undefined — uncontrolled, tracks internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
-     * Fires when the overlay actually appears or disappears (after `delay`).
-     * Reports the effective transition, not the prop — the render moment of a
-     * delayed overlay cannot be derived from the `visible` prop alone.
+     * Fires when the overlay actually appears or disappears, after `delay`, reporting the effective transition rather than the raw prop.
      * @default undefined — no-op if omitted.
      */
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     /**
-     * Cover the viewport instead of the root's box. Emits `data-full-screen`
-     * and locks body scroll while visible; inline overlays never lock the body.
+     * Covers the viewport instead of the root's box, emitting `data-full-screen` and locking body scroll while visible.
      * @default false — the overlay covers only the root element's box.
      */
-    fullScreen?: boolean;
+    fullScreen?: boolean | undefined;
     /**
      * Accessible name of the busy region, announced when the overlay becomes
      * visible and used as the derived `Spinner`'s label.
      * @default 'Loading' — name the work ("Loading invoices") when multiple overlays exist.
      */
-    loadingLabel?: string;
+    loadingLabel?: string | undefined;
     /**
-     * Text announced when the overlay hides, closing the loop the appearance
-     * announcement opens (the region became operable again — a change screen-reader
-     * users cannot see). Omitted: the overlay clears its message from the live
-     * region, allowing consecutive loads to announce twice.
+     * Text announced when the overlay hides, closing the loop the appearance announcement opened.
      * @default undefined — hiding announces nothing.
      */
-    loadedLabel?: string;
+    loadedLabel?: string | undefined;
     /**
-     * Milliseconds to wait after `visible` turns true before the overlay renders.
-     * Responses arriving inside this window never render the overlay, preventing
-     * spinner flash on fast requests. The timer cancels if `visible` flips back
-     * to false or on unmount.
+     * Milliseconds to wait after `visible` turns true before the overlay renders, preventing spinner flash on fast responses.
      * @default 0 — shows immediately to avoid hiding slow connections.
      */
-    delay?: number;
+    delay?: number | undefined;
 }
-/**
- * Props for the {@link LoadingOverlay} recipe. No `asChild`: the recipe wraps
- * children in the derived anatomy. Use `primitives/loading-overlay`'s `LoadingOverlayRoot` for headless access.
- */
-export type LoadingOverlayProps = Omit<LoadingOverlayRootProps, 'asChild'>;
-/**
- * Props for {@link LoadingOverlayBackdrop}, the scrim layer. Reads visibility
- * from the root's context.
- */
+/** Props for the {@link LoadingOverlay} recipe, which wraps children in the derived anatomy and has no `asChild`. */
+export type LoadingOverlayProps = Omit<LoadingOverlayRootProps, 'asChild'> & {
+    /**
+     * How heavily the skin dims the page, fed to the derived Backdrop.
+     * @default undefined — the skin's own default dimming.
+     */
+    emphasis?: 'low' | 'medium' | 'high' | (string & {}) | undefined;
+};
+/** Props for {@link LoadingOverlayBackdrop}, the scrim layer that reads visibility from the root's context. */
 export interface LoadingOverlayBackdropProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * How heavily the skin dims the page behind, mirrored to `data-emphasis`.
+     * @default undefined — the skin's own default dimming.
+     */
+    emphasis?: 'low' | 'medium' | 'high' | (string & {}) | undefined;
 }
-/**
- * Props for {@link LoadingOverlayContent}, the centered indicator layer. Reads
- * visibility and label from the root's context.
- */
+/** Props for {@link LoadingOverlayContent}, the centered indicator layer that reads visibility and label from the root's context. */
 export interface LoadingOverlayContentProps extends PrimitivePropsWithRef<'div'> {
 }

package/dist/mentions/Mentions.cjs

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

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;
+};