@skdx/react 0.27.0 → 0.29.0

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

@@ -1,42 +1,39 @@
 import * as React from 'react';
-import type { LoadingOverlayContextValue, LoadingOverlayProps } from './types.js';
-export declare const LoadingOverlayProvider: {
-    (props: LoadingOverlayContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useLoadingOverlayContext: (consumerName: string) => LoadingOverlayContextValue;
+import type { LoadingOverlayContextValue, LoadingOverlayProps, LoadingOverlayRootProps } from './types.js';
+export declare const LoadingOverlayProvider: React.FC<LoadingOverlayContextValue & {
+    children: React.ReactNode;
+}>, useLoadingOverlayContext: (consumerName: string) => LoadingOverlayContextValue;
 /**
- * Root of a loading overlay: wraps the content being covered, owns the
- * visibility (`visible`/`defaultVisible`/`onVisibleChange`) and hands it to
- * `LoadingOverlayBackdrop` and `LoadingOverlayContent` via context. Renders a
- * plain `<div>` — give it `position: relative` and the backdrop covers exactly
- * this box; set `fullScreen` and it covers the viewport instead.
- *
- * While visible the root is `aria-busy="true"` and carries the `inert`
- * attribute, so the pointer and the tab sequence both stop at the overlay
- * rather than walking into the controls it is hiding. Deliberately **not** a
- * focus trap: this is not a dialog, there is nothing inside to focus and
- * nothing to dismiss, so trapping would strand the keyboard on a spinner.
- * Because `inert` also takes the subtree out of the accessibility tree, the
- * announcement is made through the process-wide live region (see
- * `LiveAnnouncer`) rather than from the `Spinner` inside — a `role="status"`
- * in an inert subtree announces nothing.
+ * Root of a loading overlay: owns visibility, exposes `aria-busy` and an `inert` covered wrapper, and hands state to `LoadingOverlayBackdrop`/`LoadingOverlayContent` via context.
  *
- * `delay` exists for the same reason `Tooltip` has one: a request that
- * resolves in 80ms should never paint a spinner. The timer is cancelled when
- * `visible` flips back to false before it fires, and on unmount.
+ * @example
+ * ```tsx
+ * import { LoadingOverlayBackdrop, LoadingOverlayContent, LoadingOverlayRoot } from '@skdx/react/primitives/loading-overlay';
  *
- * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
- * visibility, i.e. after `delay`.
+ * <LoadingOverlayRoot visible={isFetching} delay={150} loadingLabel="Loading invoices">
+ *   <InvoiceTable />
+ *   <LoadingOverlayBackdrop />
+ *   <LoadingOverlayContent>
+ *     <ProgressBar value={percent} />
+ *   </LoadingOverlayContent>
+ * </LoadingOverlayRoot>
+ * ```
+ */
+export declare const LoadingOverlayRoot: {
+    ({ visible: visibleProp, onVisibleChange, fullScreen, loadingLabel, loadedLabel, delay, children, ref: forwardedRef, ...props }: LoadingOverlayRootProps): React.ReactNode;
+    displayName: string;
+};
+/**
+ * A loading overlay recipe that renders `children` followed by the derived `LoadingOverlayBackdrop`/`LoadingOverlayContent` anatomy over it.
  *
  * @example
  * ```tsx
  * <LoadingOverlay visible={isFetching} delay={150} loadingLabel="Loading invoices">
  *   <InvoiceTable />
- *   <LoadingOverlayBackdrop />
- *   <LoadingOverlayContent />
  * </LoadingOverlay>
  * ```
  */
-export declare const LoadingOverlay: React.ForwardRefExoticComponent<Omit<LoadingOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlay: {
+    ({ children, emphasis, ref: forwardedRef, ...rest }: LoadingOverlayProps): React.ReactNode;
+    displayName: string;
+};

package/dist/loading-overlay/LoadingOverlay.js

@@ -1 +1,2 @@
-import*as r from"react";import{createSafeContext as k}from"../utils/createContext.js";import{LiveAnnouncer as B}from"../utils/liveAnnouncer.js";import{skdxPart as w}from"../utils/part.js";import{Primitive as E}from"../utils/primitive.js";import{useBodyScrollLock as h}from"../utils/useBodyScrollLock.js";import{useCallbackRef as N}from"../utils/useCallbackRef.js";import{useControllableState as S}from"../utils/useControllableState.js";import{jsx as y,jsxs as V}from"react/jsx-runtime";var[T,l]=k("LoadingOverlay"),D=r.forwardRef(({visible:a,defaultVisible:t=!1,onVisibleChange:i,fullScreen:o=!1,loadingLabel:d="Loading",delay:n=0,children:b,...p},C)=>{let[s=!1]=S({prop:a,defaultProp:t}),[R,f]=r.useState(!1);r.useEffect(()=>{if(!s||n<=0)return;let x=window.setTimeout(()=>f(!0),n);return()=>{window.clearTimeout(x),f(!1)}},[s,n]);let e=s&&(n<=0||R),v=N(i),c=r.useRef(e);return r.useEffect(()=>{c.current!==e&&(c.current=e,v(e))},[e,v]),h(e&&o),V(T,{visible:e,fullScreen:o,loadingLabel:d,children:[y(E.div,{"aria-busy":e||void 0,inert:e,"data-state":e?"visible":"hidden","data-full-screen":o?"":void 0,...p,...w("loading-overlay","root",p.className),ref:C,children:b}),y(B,{message:e?d:""})]})});D.displayName="LoadingOverlay";import*as L from"react";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 g}from"react/jsx-runtime";var u=L.forwardRef((a,t)=>{let{visible:i,fullScreen:o}=l("LoadingOverlayBackdrop");return g(M,{present:i,children:g(q.div,{"aria-hidden":!0,"data-state":i?"visible":"hidden","data-full-screen":o?"":void 0,...a,...H("loading-overlay","backdrop",a.className),ref:t})})});u.displayName="LoadingOverlayBackdrop";import*as O from"react";import{Spinner as A}from"../spinner/Spinner.js";import{skdxPart as z}from"../utils/part.js";import{Presence as F}from"../utils/presence.js";import{Primitive as G}from"../utils/primitive.js";import{jsx as m}from"react/jsx-runtime";var P=O.forwardRef(({children:a,...t},i)=>{let{visible:o,fullScreen:d,loadingLabel:n}=l("LoadingOverlayContent");return m(F,{present:o,children:m(G.div,{"data-state":o?"visible":"hidden","data-full-screen":d?"":void 0,...t,...z("loading-overlay","content",t.className),ref:i,children:a??m(A,{label:n})})})});P.displayName="LoadingOverlayContent";export{D as LoadingOverlay,u as LoadingOverlayBackdrop,P as LoadingOverlayContent,T as LoadingOverlayProvider,l 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

@@ -0,0 +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: ({ emphasis, }: {
+    emphasis?: LoadingOverlayBackdropProps["emphasis"] | undefined;
+}) => JSX.Element;

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

@@ -0,0 +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: ({ emphasis, }: {
+    emphasis?: LoadingOverlayBackdropProps["emphasis"] | undefined;
+}) => JSX.Element;

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

@@ -1,24 +1,19 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayBackdropProps } from './types.cjs';
 /**
- * The scrim that covers the work in progress. Mounts through `Presence`, so a
- * CSS exit animation on `[data-state='hidden']` plays before it unmounts (and
- * with no animation declared it unmounts immediately, costing nothing).
- *
- * Renders `aria-hidden` — it is pure decoration, the announcement comes from
- * the root — and carries `data-state="visible" | "hidden"` plus
- * `data-full-screen` so one rule set can style both the inline
- * (`position: absolute; inset: 0`) and the full-screen
- * (`position: fixed; inset: 0`) case.
- *
- * Must be used inside a {@link LoadingOverlay}.
+ * Scrim covering work in progress — mounts through `Presence` for CSS exit animation. `aria-hidden` (pure decoration).
  *
  * @example
  * ```tsx
- * <LoadingOverlay visible={isFetching}>
+ * import { LoadingOverlayRoot, LoadingOverlayBackdrop } from '@skdx/react/primitives/loading-overlay';
+ *
+ * <LoadingOverlayRoot visible={isFetching}>
  *   <InvoiceTable />
  *   <LoadingOverlayBackdrop />
- * </LoadingOverlay>
+ * </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,24 +1,19 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayBackdropProps } from './types.js';
 /**
- * The scrim that covers the work in progress. Mounts through `Presence`, so a
- * CSS exit animation on `[data-state='hidden']` plays before it unmounts (and
- * with no animation declared it unmounts immediately, costing nothing).
- *
- * Renders `aria-hidden` — it is pure decoration, the announcement comes from
- * the root — and carries `data-state="visible" | "hidden"` plus
- * `data-full-screen` so one rule set can style both the inline
- * (`position: absolute; inset: 0`) and the full-screen
- * (`position: fixed; inset: 0`) case.
- *
- * Must be used inside a {@link LoadingOverlay}.
+ * Scrim covering work in progress — mounts through `Presence` for CSS exit animation. `aria-hidden` (pure decoration).
  *
  * @example
  * ```tsx
- * <LoadingOverlay visible={isFetching}>
+ * import { LoadingOverlayRoot, LoadingOverlayBackdrop } from '@skdx/react/primitives/loading-overlay';
+ *
+ * <LoadingOverlayRoot visible={isFetching}>
  *   <InvoiceTable />
  *   <LoadingOverlayBackdrop />
- * </LoadingOverlay>
+ * </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,29 +1,18 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayContentProps } from './types.cjs';
 /**
- * The indicator layer sitting on top of the backdrop — a spinner, a message,
- * a cancel affordance, whatever the overlay needs to say. Mounts through
- * `Presence` alongside the backdrop and carries the same
- * `data-state="visible" | "hidden"` and `data-full-screen` hooks.
- *
- * With no `children` it falls back to the existing `Spinner` family, labelled
- * with the root's `loadingLabel` — composing the indicator the library
- * already ships rather than growing a second one. Pass `children` to replace
- * it entirely.
- *
- * The whole overlay sits inside the root's `inert` subtree, so nothing here
- * is focusable or announced; the "Loading" announcement is made by the root
- * through the live region.
- *
- * Must be used inside a {@link LoadingOverlay}.
+ * Indicator layer on top of the backdrop, mounted through `Presence` and defaulting to a `Spinner` labelled from the root's `loadingLabel`.
  *
  * @example
  * ```tsx
- * <LoadingOverlay visible={isFetching} loadingLabel="Loading invoices">
+ * <LoadingOverlayRoot visible={isFetching} loadingLabel="Loading invoices">
  *   <InvoiceTable />
  *   <LoadingOverlayBackdrop />
  *   <LoadingOverlayContent />
- * </LoadingOverlay>
+ * </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,29 +1,18 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { LoadingOverlayContentProps } from './types.js';
 /**
- * The indicator layer sitting on top of the backdrop — a spinner, a message,
- * a cancel affordance, whatever the overlay needs to say. Mounts through
- * `Presence` alongside the backdrop and carries the same
- * `data-state="visible" | "hidden"` and `data-full-screen` hooks.
- *
- * With no `children` it falls back to the existing `Spinner` family, labelled
- * with the root's `loadingLabel` — composing the indicator the library
- * already ships rather than growing a second one. Pass `children` to replace
- * it entirely.
- *
- * The whole overlay sits inside the root's `inert` subtree, so nothing here
- * is focusable or announced; the "Loading" announcement is made by the root
- * through the live region.
- *
- * Must be used inside a {@link LoadingOverlay}.
+ * Indicator layer on top of the backdrop, mounted through `Presence` and defaulting to a `Spinner` labelled from the root's `loadingLabel`.
  *
  * @example
  * ```tsx
- * <LoadingOverlay visible={isFetching} loadingLabel="Loading invoices">
+ * <LoadingOverlayRoot visible={isFetching} loadingLabel="Loading invoices">
  *   <InvoiceTable />
  *   <LoadingOverlayBackdrop />
  *   <LoadingOverlayContent />
- * </LoadingOverlay>
+ * </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/index.d.cts

@@ -1,4 +1,2 @@
-export * from './LoadingOverlay.cjs';
-export { LoadingOverlayBackdrop } from './LoadingOverlayBackdrop.cjs';
-export { LoadingOverlayContent } from './LoadingOverlayContent.cjs';
-export type { LoadingOverlayProps, LoadingOverlayBackdropProps, LoadingOverlayContentProps } from './types.cjs';
+export { LoadingOverlay } from './LoadingOverlay.cjs';
+export type { LoadingOverlayProps } from './types.cjs';

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

@@ -1,4 +1,2 @@
-export * from './LoadingOverlay.js';
-export { LoadingOverlayBackdrop } from './LoadingOverlayBackdrop.js';
-export { LoadingOverlayContent } from './LoadingOverlayContent.js';
-export type { LoadingOverlayProps, LoadingOverlayBackdropProps, LoadingOverlayContentProps } from './types.js';
+export { LoadingOverlay } from './LoadingOverlay.js';
+export type { LoadingOverlayProps } from './types.js';

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

@@ -0,0 +1,20 @@
+/**
+ * Advanced primitives for `LoadingOverlay` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingOverlayBackdrop, LoadingOverlayContent, LoadingOverlayRoot } from '@skdx/react/primitives/loading-overlay';
+ *
+ * <LoadingOverlayRoot visible={isFetching} loadingLabel="Loading invoices">
+ *   <InvoiceTable />
+ *   <LoadingOverlayBackdrop />
+ *   <LoadingOverlayContent>
+ *     <ProgressBar value={percent} />
+ *   </LoadingOverlayContent>
+ * </LoadingOverlayRoot>
+ * ```
+ */
+export { LoadingOverlayRoot } from './LoadingOverlay.cjs';
+export { LoadingOverlayBackdrop } from './LoadingOverlayBackdrop.cjs';
+export { LoadingOverlayContent } from './LoadingOverlayContent.cjs';
+export type { LoadingOverlayRootProps, LoadingOverlayBackdropProps, LoadingOverlayContentProps, } from './types.cjs';

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

@@ -0,0 +1,20 @@
+/**
+ * Advanced primitives for `LoadingOverlay` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingOverlayBackdrop, LoadingOverlayContent, LoadingOverlayRoot } from '@skdx/react/primitives/loading-overlay';
+ *
+ * <LoadingOverlayRoot visible={isFetching} loadingLabel="Loading invoices">
+ *   <InvoiceTable />
+ *   <LoadingOverlayBackdrop />
+ *   <LoadingOverlayContent>
+ *     <ProgressBar value={percent} />
+ *   </LoadingOverlayContent>
+ * </LoadingOverlayRoot>
+ * ```
+ */
+export { LoadingOverlayRoot } from './LoadingOverlay.js';
+export { LoadingOverlayBackdrop } from './LoadingOverlayBackdrop.js';
+export { LoadingOverlayContent } from './LoadingOverlayContent.js';
+export type { LoadingOverlayRootProps, LoadingOverlayBackdropProps, LoadingOverlayContentProps, } from './types.js';

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

@@ -1,74 +1,61 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * @internal Shared state distributed from {@link LoadingOverlay} to
- * `LoadingOverlayBackdrop` and `LoadingOverlayContent` via context. Not part
- * of the public API.
- */
+/** @internal Shared state distributed from LoadingOverlay to backdrop and content parts via context. */
 export interface LoadingOverlayContextValue {
-    /**
-     * The *effective* visibility — `visible` after `delay` has elapsed, not the
-     * raw prop. This is what the parts mount against, so a request that
-     * resolves inside the delay window never renders an overlay at all.
-     */
+    /** Effective visibility after `delay`, not the raw prop. */
     visible: boolean;
     fullScreen: boolean;
     loadingLabel: string;
 }
-/** Props for the {@link LoadingOverlay} root. */
-export interface LoadingOverlayProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link LoadingOverlayRoot}. */
+export interface LoadingOverlayRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Whether work is in flight, for controlled usage. Pair with `onVisibleChange`.
-     * @default undefined — uncontrolled, tracks its own visibility internally.
+     * Whether work is in flight, for controlled usage paired with `onVisibleChange`.
+     * @default undefined — uncontrolled, tracks internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
-     * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the overlay starts hidden and the wrapped content is interactive.
-     */
-    defaultVisible?: boolean;
-    /**
-     * Fires when the overlay *actually* appears or disappears — i.e. after
-     * `delay` — in both controlled and uncontrolled usage. It reports the
-     * effective transition rather than echoing the prop back, because the
-     * moment a delayed overlay paints is the one thing the caller cannot
-     * derive from the `visible` it passed in. With `delay={0}` the two coincide.
+     * 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 own box. Emits
-     * `data-full-screen` (style it `position: fixed; inset: 0`) and locks body
-     * scroll while visible — an inline overlay never locks the body, because
-     * freezing the whole page for a spinner over one card is a bug, not a
-     * feature.
+     * 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 | undefined;
     /**
-     * Text announced politely when the overlay becomes visible, and the default
-     * `Spinner` label inside `LoadingOverlayContent`.
-     * @default 'Loading' — announced as "Loading"; name the work ("Loading invoices") when the page has more than one.
+     * Text announced when the overlay hides, closing the loop the appearance announcement opened.
+     * @default undefined — hiding announces nothing.
      */
-    loadingLabel?: string;
+    loadedLabel?: string | undefined;
     /**
-     * Milliseconds to wait after `visible` turns true before the overlay
-     * actually appears. A response that arrives inside the window never renders
-     * an overlay at all, which is what stops the flash-of-spinner on fast
-     * requests. The pending timer is cancelled if `visible` flips back to false
-     * first, and on unmount.
-     * @default 0 — shows immediately, so nothing is hidden from a slow connection by accident.
+     * 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 {@link LoadingOverlayBackdrop} — the scrim layer. No props of its
- * own; it 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 centred indicator layer. No
- * props of its own; it reads visibility and the 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,74 +1,61 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * @internal Shared state distributed from {@link LoadingOverlay} to
- * `LoadingOverlayBackdrop` and `LoadingOverlayContent` via context. Not part
- * of the public API.
- */
+/** @internal Shared state distributed from LoadingOverlay to backdrop and content parts via context. */
 export interface LoadingOverlayContextValue {
-    /**
-     * The *effective* visibility — `visible` after `delay` has elapsed, not the
-     * raw prop. This is what the parts mount against, so a request that
-     * resolves inside the delay window never renders an overlay at all.
-     */
+    /** Effective visibility after `delay`, not the raw prop. */
     visible: boolean;
     fullScreen: boolean;
     loadingLabel: string;
 }
-/** Props for the {@link LoadingOverlay} root. */
-export interface LoadingOverlayProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link LoadingOverlayRoot}. */
+export interface LoadingOverlayRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Whether work is in flight, for controlled usage. Pair with `onVisibleChange`.
-     * @default undefined — uncontrolled, tracks its own visibility internally.
+     * Whether work is in flight, for controlled usage paired with `onVisibleChange`.
+     * @default undefined — uncontrolled, tracks internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
-     * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the overlay starts hidden and the wrapped content is interactive.
-     */
-    defaultVisible?: boolean;
-    /**
-     * Fires when the overlay *actually* appears or disappears — i.e. after
-     * `delay` — in both controlled and uncontrolled usage. It reports the
-     * effective transition rather than echoing the prop back, because the
-     * moment a delayed overlay paints is the one thing the caller cannot
-     * derive from the `visible` it passed in. With `delay={0}` the two coincide.
+     * 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 own box. Emits
-     * `data-full-screen` (style it `position: fixed; inset: 0`) and locks body
-     * scroll while visible — an inline overlay never locks the body, because
-     * freezing the whole page for a spinner over one card is a bug, not a
-     * feature.
+     * 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 | undefined;
     /**
-     * Text announced politely when the overlay becomes visible, and the default
-     * `Spinner` label inside `LoadingOverlayContent`.
-     * @default 'Loading' — announced as "Loading"; name the work ("Loading invoices") when the page has more than one.
+     * Text announced when the overlay hides, closing the loop the appearance announcement opened.
+     * @default undefined — hiding announces nothing.
      */
-    loadingLabel?: string;
+    loadedLabel?: string | undefined;
     /**
-     * Milliseconds to wait after `visible` turns true before the overlay
-     * actually appears. A response that arrives inside the window never renders
-     * an overlay at all, which is what stops the flash-of-spinner on fast
-     * requests. The pending timer is cancelled if `visible` flips back to false
-     * first, and on unmount.
-     * @default 0 — shows immediately, so nothing is hidden from a slow connection by accident.
+     * 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 {@link LoadingOverlayBackdrop} — the scrim layer. No props of its
- * own; it 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 centred indicator layer. No
- * props of its own; it reads visibility and the 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});