@skdx/react 0.28.0 → 0.30.0

package/dist/listbox/types.d.cts

@@ -8,12 +8,12 @@ export interface ListboxOption {
      * Text shown for the option and matched by typeahead.
      * @default undefined — falls back to `value`.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Excludes this option from selection and from keyboard/typeahead navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** A labeled group of {@link ListboxOption}s for {@link ListboxProps.options} — grouping is data, never a wrapper component. */
 export interface ListboxOptionGroup {
@@ -24,21 +24,18 @@ export interface ListboxOptionGroup {
 }
 /** One entry of {@link ListboxProps.options}: a flat option, or a labeled group of them. */
 export type ListboxOptionOrGroup = ListboxOption | ListboxOptionGroup;
-/**
- * Event detail on selection change from arrow key, typeahead, click, etc.
- * `reason` distinguishes the interaction. Includes `previousValue` for controlled components.
- */
+/** Event detail on selection change, naming what drove it and the previous selection. */
 export interface ListboxValueChangeDetail {
     /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
     value: string[];
-    /** The selection held before this change, or `null` when there was none. */
-    previousValue: string[] | null;
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
     /** What drove the change. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
     /** The first selected value, or `null` when nothing is selected. */
     selectedValue: string | null;
 }
-/** @internal Shared state distributed from {@link Listbox} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Listbox} to its parts via context. */
 export interface ListboxContextValue {
     /** Whether more than one option can be selected. */
     multiple: boolean;
@@ -46,10 +43,7 @@ export interface ListboxContextValue {
     selectedValues: string[];
     /** Whether one option value is currently selected. */
     isSelected: (value: string) => boolean;
-    /**
-     * Commits option: replaces selection or toggles in `multiple`.
-     * Records selection anchor for Shift+Space range. `reason` names the interaction.
-     */
+    /** Commits an option, replacing the selection or toggling it when `multiple`. */
     selectItem: (value: string, reason: ListboxValueChangeDetail['reason']) => void;
     /** Whether the whole list is disabled, which disables every option in it. */
     disabled: boolean;
@@ -62,75 +56,82 @@ export interface ListboxContextValue {
 /** Props for the {@link Listbox} root. */
 export interface ListboxProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
     /**
-     * Selected value for controlled usage: `string` or `string[]` (lenient in).
-     * Single-select with multiple values throws in dev. Pair with `onValueChange`.
+     * Selected value for controlled usage — `string` or `string[]` — paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks selected value internally.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Initially selected option's value, for uncontrolled usage — the same bare
      * `string` or `string[]` shapes `value` accepts, under either cardinality.
      * @default undefined — no option selected until the user picks one.
      */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /**
-     * Fires on selection change (controlled or uncontrolled) with whole selection,
-     * `selectedValue`, `previousValue`, and `reason`. Unchanged selection emits nothing.
+     * Fires on selection change with the whole selection, `selectedValue`, `previousValue`, and `reason`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: ListboxValueChangeDetail) => void;
+    onValueChange?: ((detail: ListboxValueChangeDetail) => void) | undefined;
     /**
      * Allow multiple selection: `value` becomes `string[]`, list gets `aria-multiselectable="true"`,
      * choosing toggles instead of replacing.
      * @default false
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /**
      * Disables all options: `aria-disabled`/`data-disabled` on list and items.
      * Individual items can disable themselves too.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Control+A selects/clears all enabled options (multiple only). Defaults to true
-     * (normative shortcut); off to avoid text-selection conflict or expensive fetches.
-     * Inert in single-select.
+     * Control+A selects or clears all enabled options when `multiple`; inert in single-select.
      * @default true
      */
-    allowSelectAll?: boolean;
+    allowSelectAll?: boolean | undefined;
     /**
-     * Layout axis: vertical (ArrowUp/Down) or horizontal (ArrowLeft/Right).
-     * Affects selection-extending keys; position keys (Home/End, Control+A) unaffected.
+     * Layout axis — vertical (ArrowUp/Down) or horizontal (ArrowLeft/Right) — affecting selection-extending keys only.
      * @default 'vertical'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
-     * Moves roving focus on pointer hover (not selection). Off by default
-     * to avoid stealing focus from page. Never focuses disabled items.
+     * Moves roving focus on pointer hover without selecting, never onto a disabled item.
      * @default false
      */
-    focusOnHover?: boolean;
+    focusOnHover?: boolean | undefined;
     /**
-     * Prevent deselecting the last item (multiple only). Also refuses Control+A clear.
-     * Doesn't create initial selection; empty list stays empty.
+     * Prevents deselecting the last item and refuses the Control+A clear, when `multiple`.
      * @default false
      */
-    disallowEmptySelection?: boolean;
+    disallowEmptySelection?: boolean | undefined;
     /**
-     * Auto-render options as ListboxItems. Ignored when children declare their own.
+     * Auto-renders options as `ListboxItem`s, ignored when children declare their own.
      * @default undefined — render items yourself via children.
      */
-    options?: ListboxOptionOrGroup[];
+    options?: ListboxOptionOrGroup[] | undefined;
     /**
-     * Customize derived option rendering. Receives option and selected state.
-     * Only read while deriving anatomy.
+     * Customizes derived option rendering, receiving the option and its selected state.
      * @default undefined — renders `option.label ?? option.value`.
      */
-    renderOption?: (option: ListboxOption, state: {
+    renderOption?: ((option: ListboxOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
+    /**
+     * Spacing rung the skin packs the list by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Corner rung the skin rounds the list by, mirrored to `data-shape`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the list by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
-/** @internal Shared state distributed from {@link ListboxItem} to its indicator via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ListboxItem} to its indicator via context. */
 export interface ListboxItemContextValue {
     value: string;
     selected: boolean;
@@ -144,36 +145,24 @@ export interface ListboxItemProps extends PrimitivePropsWithRef<'div'> {
      * Excludes this option from selection and from keyboard/typeahead navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Text for typeahead matching, published as `data-text-value`.
-     * Needed when option has more than label; fallback is rendered text content.
+     * Text for typeahead matching, published as `data-text-value` when the option is more than its label.
      * @default undefined — falls back to rendered text content.
      */
-    textValue?: string;
-    /**
-     * This option's 1-based position in the *whole* option set, and the size of
-     * that set, published as `aria-posinset` / `aria-setsize`.
-     *
-     * Only needed when the rendered options are a window onto a longer list —
-     * a virtualized listbox, or one that pages in more rows as the user scrolls.
-     * Without them a screen reader counts the DOM and announces "3 of 20" for
-     * row 4,003 of a million, which is both wrong and unrecoverable. This is the
-     * one piece of virtualized-listbox accessibility that belongs inside a
-     * headless package rather than in the consumer's scroll code: the consumer
-     * owns the windowing, but only the option can carry the attribute.
-     *
-     * Set both or neither — `aria-posinset` without `aria-setsize` says "item 4
-     * of an unknown number", which is worse than the DOM count it replaces.
+    textValue?: string | undefined;
+    /**
+     * This option's 1-based position and the full set's size for a virtualized or paginated
+     * list, published as `aria-posinset`/`aria-setsize` — set both or neither.
      * @default undefined — the option set is exactly what is rendered, and the
      * browser's own count is correct.
      */
-    posInSet?: number;
+    posInSet?: number | undefined;
     /**
      * Size of the full option set this option belongs to. See {@link ListboxItemProps.posInSet}.
      * @default undefined — the option set is exactly what is rendered, and the browser's own count is correct.
      */
-    setSize?: number;
+    setSize?: number | undefined;
 }
 /** Props for {@link ListboxItemIndicator}, shown inside a {@link ListboxItem} while that option is selected. */
 export interface ListboxItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -182,7 +171,7 @@ export interface ListboxItemIndicatorProps extends PrimitivePropsWithRef<'span'>
      * of rendering nothing.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link ListboxGroup}, a labelled group of related `ListboxItem`s. */
 export interface ListboxGroupProps extends PrimitivePropsWithRef<'div'> {
@@ -190,8 +179,3 @@ export interface ListboxGroupProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link ListboxLabel}, the heading naming its {@link ListboxGroup}. */
 export interface ListboxLabelProps extends PrimitivePropsWithRef<'div'> {
 }
-/** @internal Wiring passed from a {@link ListboxGroup} to its {@link ListboxLabel}. Not part of the public API. */
-export interface ListboxGroupContextValue {
-    /** The id the group points `aria-labelledby` at, which its Label claims. */
-    labelId: string;
-}

package/dist/listbox/types.d.ts

@@ -8,12 +8,12 @@ export interface ListboxOption {
      * Text shown for the option and matched by typeahead.
      * @default undefined — falls back to `value`.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Excludes this option from selection and from keyboard/typeahead navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** A labeled group of {@link ListboxOption}s for {@link ListboxProps.options} — grouping is data, never a wrapper component. */
 export interface ListboxOptionGroup {
@@ -24,21 +24,18 @@ export interface ListboxOptionGroup {
 }
 /** One entry of {@link ListboxProps.options}: a flat option, or a labeled group of them. */
 export type ListboxOptionOrGroup = ListboxOption | ListboxOptionGroup;
-/**
- * Event detail on selection change from arrow key, typeahead, click, etc.
- * `reason` distinguishes the interaction. Includes `previousValue` for controlled components.
- */
+/** Event detail on selection change, naming what drove it and the previous selection. */
 export interface ListboxValueChangeDetail {
     /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
     value: string[];
-    /** The selection held before this change, or `null` when there was none. */
-    previousValue: string[] | null;
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
     /** What drove the change. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
     /** The first selected value, or `null` when nothing is selected. */
     selectedValue: string | null;
 }
-/** @internal Shared state distributed from {@link Listbox} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Listbox} to its parts via context. */
 export interface ListboxContextValue {
     /** Whether more than one option can be selected. */
     multiple: boolean;
@@ -46,10 +43,7 @@ export interface ListboxContextValue {
     selectedValues: string[];
     /** Whether one option value is currently selected. */
     isSelected: (value: string) => boolean;
-    /**
-     * Commits option: replaces selection or toggles in `multiple`.
-     * Records selection anchor for Shift+Space range. `reason` names the interaction.
-     */
+    /** Commits an option, replacing the selection or toggling it when `multiple`. */
     selectItem: (value: string, reason: ListboxValueChangeDetail['reason']) => void;
     /** Whether the whole list is disabled, which disables every option in it. */
     disabled: boolean;
@@ -62,75 +56,82 @@ export interface ListboxContextValue {
 /** Props for the {@link Listbox} root. */
 export interface ListboxProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
     /**
-     * Selected value for controlled usage: `string` or `string[]` (lenient in).
-     * Single-select with multiple values throws in dev. Pair with `onValueChange`.
+     * Selected value for controlled usage — `string` or `string[]` — paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks selected value internally.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Initially selected option's value, for uncontrolled usage — the same bare
      * `string` or `string[]` shapes `value` accepts, under either cardinality.
      * @default undefined — no option selected until the user picks one.
      */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /**
-     * Fires on selection change (controlled or uncontrolled) with whole selection,
-     * `selectedValue`, `previousValue`, and `reason`. Unchanged selection emits nothing.
+     * Fires on selection change with the whole selection, `selectedValue`, `previousValue`, and `reason`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: ListboxValueChangeDetail) => void;
+    onValueChange?: ((detail: ListboxValueChangeDetail) => void) | undefined;
     /**
      * Allow multiple selection: `value` becomes `string[]`, list gets `aria-multiselectable="true"`,
      * choosing toggles instead of replacing.
      * @default false
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /**
      * Disables all options: `aria-disabled`/`data-disabled` on list and items.
      * Individual items can disable themselves too.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Control+A selects/clears all enabled options (multiple only). Defaults to true
-     * (normative shortcut); off to avoid text-selection conflict or expensive fetches.
-     * Inert in single-select.
+     * Control+A selects or clears all enabled options when `multiple`; inert in single-select.
      * @default true
      */
-    allowSelectAll?: boolean;
+    allowSelectAll?: boolean | undefined;
     /**
-     * Layout axis: vertical (ArrowUp/Down) or horizontal (ArrowLeft/Right).
-     * Affects selection-extending keys; position keys (Home/End, Control+A) unaffected.
+     * Layout axis — vertical (ArrowUp/Down) or horizontal (ArrowLeft/Right) — affecting selection-extending keys only.
      * @default 'vertical'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
-     * Moves roving focus on pointer hover (not selection). Off by default
-     * to avoid stealing focus from page. Never focuses disabled items.
+     * Moves roving focus on pointer hover without selecting, never onto a disabled item.
      * @default false
      */
-    focusOnHover?: boolean;
+    focusOnHover?: boolean | undefined;
     /**
-     * Prevent deselecting the last item (multiple only). Also refuses Control+A clear.
-     * Doesn't create initial selection; empty list stays empty.
+     * Prevents deselecting the last item and refuses the Control+A clear, when `multiple`.
      * @default false
      */
-    disallowEmptySelection?: boolean;
+    disallowEmptySelection?: boolean | undefined;
     /**
-     * Auto-render options as ListboxItems. Ignored when children declare their own.
+     * Auto-renders options as `ListboxItem`s, ignored when children declare their own.
      * @default undefined — render items yourself via children.
      */
-    options?: ListboxOptionOrGroup[];
+    options?: ListboxOptionOrGroup[] | undefined;
     /**
-     * Customize derived option rendering. Receives option and selected state.
-     * Only read while deriving anatomy.
+     * Customizes derived option rendering, receiving the option and its selected state.
      * @default undefined — renders `option.label ?? option.value`.
      */
-    renderOption?: (option: ListboxOption, state: {
+    renderOption?: ((option: ListboxOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
+    /**
+     * Spacing rung the skin packs the list by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Corner rung the skin rounds the list by, mirrored to `data-shape`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the list by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
-/** @internal Shared state distributed from {@link ListboxItem} to its indicator via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ListboxItem} to its indicator via context. */
 export interface ListboxItemContextValue {
     value: string;
     selected: boolean;
@@ -144,36 +145,24 @@ export interface ListboxItemProps extends PrimitivePropsWithRef<'div'> {
      * Excludes this option from selection and from keyboard/typeahead navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Text for typeahead matching, published as `data-text-value`.
-     * Needed when option has more than label; fallback is rendered text content.
+     * Text for typeahead matching, published as `data-text-value` when the option is more than its label.
      * @default undefined — falls back to rendered text content.
      */
-    textValue?: string;
-    /**
-     * This option's 1-based position in the *whole* option set, and the size of
-     * that set, published as `aria-posinset` / `aria-setsize`.
-     *
-     * Only needed when the rendered options are a window onto a longer list —
-     * a virtualized listbox, or one that pages in more rows as the user scrolls.
-     * Without them a screen reader counts the DOM and announces "3 of 20" for
-     * row 4,003 of a million, which is both wrong and unrecoverable. This is the
-     * one piece of virtualized-listbox accessibility that belongs inside a
-     * headless package rather than in the consumer's scroll code: the consumer
-     * owns the windowing, but only the option can carry the attribute.
-     *
-     * Set both or neither — `aria-posinset` without `aria-setsize` says "item 4
-     * of an unknown number", which is worse than the DOM count it replaces.
+    textValue?: string | undefined;
+    /**
+     * This option's 1-based position and the full set's size for a virtualized or paginated
+     * list, published as `aria-posinset`/`aria-setsize` — set both or neither.
      * @default undefined — the option set is exactly what is rendered, and the
      * browser's own count is correct.
      */
-    posInSet?: number;
+    posInSet?: number | undefined;
     /**
      * Size of the full option set this option belongs to. See {@link ListboxItemProps.posInSet}.
      * @default undefined — the option set is exactly what is rendered, and the browser's own count is correct.
      */
-    setSize?: number;
+    setSize?: number | undefined;
 }
 /** Props for {@link ListboxItemIndicator}, shown inside a {@link ListboxItem} while that option is selected. */
 export interface ListboxItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -182,7 +171,7 @@ export interface ListboxItemIndicatorProps extends PrimitivePropsWithRef<'span'>
      * of rendering nothing.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link ListboxGroup}, a labelled group of related `ListboxItem`s. */
 export interface ListboxGroupProps extends PrimitivePropsWithRef<'div'> {
@@ -190,8 +179,3 @@ export interface ListboxGroupProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link ListboxLabel}, the heading naming its {@link ListboxGroup}. */
 export interface ListboxLabelProps extends PrimitivePropsWithRef<'div'> {
 }
-/** @internal Wiring passed from a {@link ListboxGroup} to its {@link ListboxLabel}. Not part of the public API. */
-export interface ListboxGroupContextValue {
-    /** The id the group points `aria-labelledby` at, which its Label claims. */
-    labelId: string;
-}

package/dist/loading-overlay/LoadingOverlay.cjs

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

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

@@ -1,46 +1,10 @@
 import * as React from 'react';
 import type { LoadingOverlayContextValue, LoadingOverlayProps, LoadingOverlayRootProps } from './types.cjs';
-export declare const LoadingOverlayProvider: {
-    (props: LoadingOverlayContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useLoadingOverlayContext: (consumerName: string) => LoadingOverlayContextValue;
+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`/`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 the `covered` wrapper it
- * renders inside itself 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.
- *
- * The two attributes are on two elements on purpose. `inert` takes its subtree
- * out of the accessibility tree, so `aria-busy` beside it would be removed too
- * and the busy state would be published to nobody — the component would be
- * silent about the one thing it is for. It is the same reasoning that puts the
- * announcement through the process-wide live region (see `announce`)
- * rather than in a `Spinner` inside the subtree, where a `role="status"`
- * announces nothing. `loadedLabel` announces the *end* of the work the same
- * way, and where it is omitted the overlay still clears its own message on
- * hide, so the next identical `loadingLabel` is a change the announcer will
- * publish rather than a duplicate it skips.
- *
- * `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.
- *
- * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
- * visibility, i.e. after `delay`.
- *
- * Renders `children` verbatim inside the `covered` wrapper —
- * {@link LoadingOverlay} (the recipe, below) is this root with the `LoadingOverlayBackdrop`
- * and `LoadingOverlayContent` derived after them.
+ * Root of a loading overlay: owns visibility, exposes `aria-busy` and an `inert` covered wrapper, and hands state to `LoadingOverlayBackdrop`/`LoadingOverlayContent` via context.
  *
  * @example
  * ```tsx
@@ -55,20 +19,12 @@ export declare const LoadingOverlayProvider: {
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayRoot: React.ForwardRefExoticComponent<Omit<LoadingOverlayRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayRoot: {
+    ({ visible: visibleProp, onVisibleChange, fullScreen, loadingLabel, loadedLabel, delay, children, ref: forwardedRef, ...props }: LoadingOverlayRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * A loading overlay over the content it covers.
- *
- * Always draws the derived anatomy — the `LoadingOverlayBackdrop` scrim and the `LoadingOverlayContent`
- * layer with the library's `Spinner`, labelled from `loadingLabel` — after
- * `children`, which is the content being covered. Never a switch: this
- * component does not inspect what it was given. Replace the indicator by
- * composing {@link LoadingOverlayRoot} from
- * `@skdx/react/primitives/loading-overlay`.
- *
- * Everything the root owns still applies: `visible`/`onVisibleChange`, the
- * `delay` window, `fullScreen` with its body-scroll lock, the `inert` covered
- * wrapper, and the polite `loadingLabel`/`loadedLabel` announcements.
+ * A loading overlay recipe that renders `children` followed by the derived `LoadingOverlayBackdrop`/`LoadingOverlayContent` anatomy over it.
  *
  * @example
  * ```tsx
@@ -77,4 +33,7 @@ export declare const LoadingOverlayRoot: React.ForwardRefExoticComponent<Omit<Lo
  * </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.d.ts

@@ -1,46 +1,10 @@
 import * as React from 'react';
 import type { LoadingOverlayContextValue, LoadingOverlayProps, LoadingOverlayRootProps } from './types.js';
-export declare const LoadingOverlayProvider: {
-    (props: LoadingOverlayContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useLoadingOverlayContext: (consumerName: string) => LoadingOverlayContextValue;
+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`/`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 the `covered` wrapper it
- * renders inside itself 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.
- *
- * The two attributes are on two elements on purpose. `inert` takes its subtree
- * out of the accessibility tree, so `aria-busy` beside it would be removed too
- * and the busy state would be published to nobody — the component would be
- * silent about the one thing it is for. It is the same reasoning that puts the
- * announcement through the process-wide live region (see `announce`)
- * rather than in a `Spinner` inside the subtree, where a `role="status"`
- * announces nothing. `loadedLabel` announces the *end* of the work the same
- * way, and where it is omitted the overlay still clears its own message on
- * hide, so the next identical `loadingLabel` is a change the announcer will
- * publish rather than a duplicate it skips.
- *
- * `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.
- *
- * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
- * visibility, i.e. after `delay`.
- *
- * Renders `children` verbatim inside the `covered` wrapper —
- * {@link LoadingOverlay} (the recipe, below) is this root with the `LoadingOverlayBackdrop`
- * and `LoadingOverlayContent` derived after them.
+ * Root of a loading overlay: owns visibility, exposes `aria-busy` and an `inert` covered wrapper, and hands state to `LoadingOverlayBackdrop`/`LoadingOverlayContent` via context.
  *
  * @example
  * ```tsx
@@ -55,20 +19,12 @@ export declare const LoadingOverlayProvider: {
  * </LoadingOverlayRoot>
  * ```
  */
-export declare const LoadingOverlayRoot: React.ForwardRefExoticComponent<Omit<LoadingOverlayRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingOverlayRoot: {
+    ({ visible: visibleProp, onVisibleChange, fullScreen, loadingLabel, loadedLabel, delay, children, ref: forwardedRef, ...props }: LoadingOverlayRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * A loading overlay over the content it covers.
- *
- * Always draws the derived anatomy — the `LoadingOverlayBackdrop` scrim and the `LoadingOverlayContent`
- * layer with the library's `Spinner`, labelled from `loadingLabel` — after
- * `children`, which is the content being covered. Never a switch: this
- * component does not inspect what it was given. Replace the indicator by
- * composing {@link LoadingOverlayRoot} from
- * `@skdx/react/primitives/loading-overlay`.
- *
- * Everything the root owns still applies: `visible`/`onVisibleChange`, the
- * `delay` window, `fullScreen` with its body-scroll lock, the `inert` covered
- * wrapper, and the polite `loadingLabel`/`loadedLabel` announcements.
+ * A loading overlay recipe that renders `children` followed by the derived `LoadingOverlayBackdrop`/`LoadingOverlayContent` anatomy over it.
  *
  * @example
  * ```tsx
@@ -77,4 +33,7 @@ export declare const LoadingOverlayRoot: React.ForwardRefExoticComponent<Omit<Lo
  * </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;
+};