@skdx/react 0.26.0 → 0.28.0

package/dist/accordion/types.d.cts

@@ -1,82 +1,89 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { SelectionChangeDetail } from '../utils/useSelection.cjs';
+/** One entry of {@link AccordionProps.items} — a single expandable section. */
+export interface AccordionItem {
+    /** Unique identifier matched against the accordion's open value(s). */
+    value: string;
+    /** Text rendered inside the derived `AccordionTrigger`. */
+    title: React.ReactNode;
+    /**
+     * Panel revealed when open; ignored if `renderContent` is given.
+     * @default undefined — the panel renders empty.
+     */
+    content?: React.ReactNode;
+    /**
+     * Prevents this section's trigger from opening/closing.
+     * @default false
+     */
+    disabled?: boolean;
+}
 /** @internal Shared state distributed from {@link Accordion} to its items via context. Not part of the public API. */
 export interface AccordionContextValue {
     value: string[];
-    onItemOpen: (value: string) => void;
-    onItemClose: (value: string) => void;
+    /**
+     * Commits one item, opening or closing per the root's `type` and `collapsible`.
+     */
+    onItemToggle: (value: string) => void;
     type: 'single' | 'multiple';
     collapsible: boolean;
     disabled: boolean;
     orientation: 'horizontal' | 'vertical';
 }
-interface AccordionBaseProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link Accordion} root; `type` picks single- or multiple-item expansion. */
+export interface AccordionProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Sections rendered into derived `AccordionItem`/`AccordionHeader`/`AccordionTrigger`/`AccordionIndicator`/`AccordionContent`. Ignored when `children` is given.
+     * @default undefined — an empty accordion.
+     */
+    items?: AccordionItem[];
+    /**
+     * Heading element each derived `Header` renders. Set it to match the surrounding
+     * outline — an accordion under an `<h4>` needs `5` or it skips a level.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Render a derived panel's body from each item in `items`. Ignored when `children` is given.
+     * @default undefined — renders the entry's `content`.
+     */
+    renderContent?: (item: AccordionItem) => React.ReactNode;
     /**
      * Prevents every item's trigger from opening/closing when set.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
-     * vs Arrow Up/Down for keyboard navigation between triggers.
+     * Layout axis for arrow-key navigation between triggers, exposed as `data-orientation`.
      * @default 'vertical'
      */
     orientation?: 'horizontal' | 'vertical';
-}
-/** Props for the {@link Accordion} root when `type="single"` — only one item can be open at a time. */
-export interface AccordionSingleProps extends AccordionBaseProps {
-    /** Restricts the accordion to a single open item. */
-    type: 'single';
     /**
-     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own open item internally.
+     * Allow one item open (`'single'`) or any number (`'multiple'`);
+     * `value` accepts bare `string` or `string[]`, change payload always an array.
      */
-    value?: string;
+    type: 'single' | 'multiple';
     /**
-     * Value of the initially open item, for uncontrolled usage.
-     * @default undefined — starts with every item closed.
+     * Open item's value(s) for controlled usage — bare `string` or `string[]`.
+     * @default undefined — uncontrolled.
      */
-    defaultValue?: string;
+    value?: string | string[];
     /**
-     * Fires with the new open item's value whenever it changes, controlled or not.
+     * Initially open item's value(s) for uncontrolled usage — bare `string` or `string[]`.
+     * @default undefined — all items closed.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Fires when the open set changes, carrying the selection as `string[]` and `selectedValue`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (detail: SelectionChangeDetail) => void;
     /**
-     * Allow closing the open item so all items can be closed.
+     * Allow closing the open item. Ignored when `type` is `'multiple'`.
      * @default false
      */
     collapsible?: boolean;
 }
-/** Props for the {@link Accordion} root when `type="multiple"` — any number of items can be open at once. */
-export interface AccordionMultipleProps extends AccordionBaseProps {
-    /** Allows multiple items to be open simultaneously. */
-    type: 'multiple';
-    /**
-     * Values of the currently open items, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own open items internally.
-     */
-    value?: string[];
-    /**
-     * Values of the initially open items, for uncontrolled usage.
-     * @default undefined — starts with every item closed.
-     */
-    defaultValue?: string[];
-    /**
-     * Fires with the new set of open item values whenever it changes, controlled or not.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string[]) => void;
-}
-/** Props for the {@link Accordion} root — a discriminated union on `type` picking single- or multiple-item expansion. */
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-/** @internal Normalized union of {@link AccordionSingleProps} and {@link AccordionMultipleProps} used inside the `Accordion` implementation. Not part of the public API. */
-export type AccordionImplProps = AccordionBaseProps & {
-    type: 'single' | 'multiple';
-    value?: string | string[];
-    defaultValue?: string | string[];
-    onValueChange?: (value: string & string[]) => void;
-    collapsible?: boolean;
-};
 /** @internal Shared state distributed from {@link AccordionItem} to its header/trigger/content via context. Not part of the public API. */
 export interface AccordionItemContextValue {
     open: boolean;
@@ -84,6 +91,12 @@ export interface AccordionItemContextValue {
     triggerId: string;
     contentId: string;
     value: string;
+    /**
+     * Whether item's panel is in the DOM; trigger publishes `aria-controls` only
+     * when true. Mounting flags live on the panel, not on context.
+     */
+    contentMounted: boolean;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** Props for {@link AccordionItem}, a single expandable section within an {@link Accordion}. */
 export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
@@ -98,6 +111,12 @@ export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
 }
 /** Props for {@link AccordionHeader}, the heading wrapper around an {@link AccordionTrigger}. */
 export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
+    /**
+     * Heading element (`<h1>`–`<h6>`). Default `3` suits an accordion under
+     * `<h2>`; under `<h4>`, use `5` or skip a level for screen readers.
+     * @default 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /** Props for {@link AccordionTrigger}, the button that opens/closes its {@link AccordionItem}. */
 export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -105,27 +124,26 @@ export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
 /** Props for {@link AccordionContent}, the panel revealed when its {@link AccordionItem} is open. */
 export interface AccordionContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * closed, instead of unmounting it. Useful for animation libraries that
-     * need the outgoing panel present in the DOM during an exit transition.
+     * Keep the panel mounted hidden while closed instead of unmounting,
+     * for animation libraries needing it during exit transitions.
      * @default false
      */
     forceMount?: boolean;
     /**
-     * Keep this panel mounted while closed as `hidden="until-found"` instead of
-     * `hidden=""`, so browser find-in-page (and same-page fragment navigation)
-     * can search the closed panel's text and expand the item to reveal a match.
-     * Implies `forceMount`.
-     *
-     * Support caveat: `hidden="until-found"` and its `beforematch` event are
-     * Chromium-first and still uneven across browsers. Where unsupported the
-     * attribute degrades to a plain `hidden`, so the panel stays correctly
-     * hidden — you lose find-in-page, not correctness. It also applies
-     * `content-visibility: hidden` rather than `display: none`, so a brand
-     * layer must not additionally set `display: none` on closed panels or the
-     * text becomes unsearchable again.
+     * Mount as `hidden="until-found"` to enable find-in-page on closed content
+     * (Chromium-first, degrades to `hidden=""` if unsupported). Implies `forceMount`.
+     * Uses `content-visibility: hidden`; styling must not override with `display: none`.
      * @default false
      */
     hiddenUntilFound?: boolean;
+    /**
+     * Panel landmark role: `region` clutters the landmark list when many panels
+     * are open. Use `"group"` for long accordions; trigger's `aria-labelledby`
+     * labels the panel either way.
+     * @default 'region'
+     */
+    role?: 'region' | 'group';
+}
+/** Props for {@link AccordionIndicator}, the chevron inside an {@link AccordionTrigger}. */
+export interface AccordionIndicatorProps extends PrimitivePropsWithRef<'span'> {
 }
-export {};

package/dist/accordion/types.d.ts

@@ -1,82 +1,89 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { SelectionChangeDetail } from '../utils/useSelection.js';
+/** One entry of {@link AccordionProps.items} — a single expandable section. */
+export interface AccordionItem {
+    /** Unique identifier matched against the accordion's open value(s). */
+    value: string;
+    /** Text rendered inside the derived `AccordionTrigger`. */
+    title: React.ReactNode;
+    /**
+     * Panel revealed when open; ignored if `renderContent` is given.
+     * @default undefined — the panel renders empty.
+     */
+    content?: React.ReactNode;
+    /**
+     * Prevents this section's trigger from opening/closing.
+     * @default false
+     */
+    disabled?: boolean;
+}
 /** @internal Shared state distributed from {@link Accordion} to its items via context. Not part of the public API. */
 export interface AccordionContextValue {
     value: string[];
-    onItemOpen: (value: string) => void;
-    onItemClose: (value: string) => void;
+    /**
+     * Commits one item, opening or closing per the root's `type` and `collapsible`.
+     */
+    onItemToggle: (value: string) => void;
     type: 'single' | 'multiple';
     collapsible: boolean;
     disabled: boolean;
     orientation: 'horizontal' | 'vertical';
 }
-interface AccordionBaseProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link Accordion} root; `type` picks single- or multiple-item expansion. */
+export interface AccordionProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Sections rendered into derived `AccordionItem`/`AccordionHeader`/`AccordionTrigger`/`AccordionIndicator`/`AccordionContent`. Ignored when `children` is given.
+     * @default undefined — an empty accordion.
+     */
+    items?: AccordionItem[];
+    /**
+     * Heading element each derived `Header` renders. Set it to match the surrounding
+     * outline — an accordion under an `<h4>` needs `5` or it skips a level.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Render a derived panel's body from each item in `items`. Ignored when `children` is given.
+     * @default undefined — renders the entry's `content`.
+     */
+    renderContent?: (item: AccordionItem) => React.ReactNode;
     /**
      * Prevents every item's trigger from opening/closing when set.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
-     * vs Arrow Up/Down for keyboard navigation between triggers.
+     * Layout axis for arrow-key navigation between triggers, exposed as `data-orientation`.
      * @default 'vertical'
      */
     orientation?: 'horizontal' | 'vertical';
-}
-/** Props for the {@link Accordion} root when `type="single"` — only one item can be open at a time. */
-export interface AccordionSingleProps extends AccordionBaseProps {
-    /** Restricts the accordion to a single open item. */
-    type: 'single';
     /**
-     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own open item internally.
+     * Allow one item open (`'single'`) or any number (`'multiple'`);
+     * `value` accepts bare `string` or `string[]`, change payload always an array.
      */
-    value?: string;
+    type: 'single' | 'multiple';
     /**
-     * Value of the initially open item, for uncontrolled usage.
-     * @default undefined — starts with every item closed.
+     * Open item's value(s) for controlled usage — bare `string` or `string[]`.
+     * @default undefined — uncontrolled.
      */
-    defaultValue?: string;
+    value?: string | string[];
     /**
-     * Fires with the new open item's value whenever it changes, controlled or not.
+     * Initially open item's value(s) for uncontrolled usage — bare `string` or `string[]`.
+     * @default undefined — all items closed.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Fires when the open set changes, carrying the selection as `string[]` and `selectedValue`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (detail: SelectionChangeDetail) => void;
     /**
-     * Allow closing the open item so all items can be closed.
+     * Allow closing the open item. Ignored when `type` is `'multiple'`.
      * @default false
      */
     collapsible?: boolean;
 }
-/** Props for the {@link Accordion} root when `type="multiple"` — any number of items can be open at once. */
-export interface AccordionMultipleProps extends AccordionBaseProps {
-    /** Allows multiple items to be open simultaneously. */
-    type: 'multiple';
-    /**
-     * Values of the currently open items, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own open items internally.
-     */
-    value?: string[];
-    /**
-     * Values of the initially open items, for uncontrolled usage.
-     * @default undefined — starts with every item closed.
-     */
-    defaultValue?: string[];
-    /**
-     * Fires with the new set of open item values whenever it changes, controlled or not.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string[]) => void;
-}
-/** Props for the {@link Accordion} root — a discriminated union on `type` picking single- or multiple-item expansion. */
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-/** @internal Normalized union of {@link AccordionSingleProps} and {@link AccordionMultipleProps} used inside the `Accordion` implementation. Not part of the public API. */
-export type AccordionImplProps = AccordionBaseProps & {
-    type: 'single' | 'multiple';
-    value?: string | string[];
-    defaultValue?: string | string[];
-    onValueChange?: (value: string & string[]) => void;
-    collapsible?: boolean;
-};
 /** @internal Shared state distributed from {@link AccordionItem} to its header/trigger/content via context. Not part of the public API. */
 export interface AccordionItemContextValue {
     open: boolean;
@@ -84,6 +91,12 @@ export interface AccordionItemContextValue {
     triggerId: string;
     contentId: string;
     value: string;
+    /**
+     * Whether item's panel is in the DOM; trigger publishes `aria-controls` only
+     * when true. Mounting flags live on the panel, not on context.
+     */
+    contentMounted: boolean;
+    setContentMounted: (mounted: boolean) => void;
 }
 /** Props for {@link AccordionItem}, a single expandable section within an {@link Accordion}. */
 export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
@@ -98,6 +111,12 @@ export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
 }
 /** Props for {@link AccordionHeader}, the heading wrapper around an {@link AccordionTrigger}. */
 export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
+    /**
+     * Heading element (`<h1>`–`<h6>`). Default `3` suits an accordion under
+     * `<h2>`; under `<h4>`, use `5` or skip a level for screen readers.
+     * @default 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /** Props for {@link AccordionTrigger}, the button that opens/closes its {@link AccordionItem}. */
 export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -105,27 +124,26 @@ export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
 /** Props for {@link AccordionContent}, the panel revealed when its {@link AccordionItem} is open. */
 export interface AccordionContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * closed, instead of unmounting it. Useful for animation libraries that
-     * need the outgoing panel present in the DOM during an exit transition.
+     * Keep the panel mounted hidden while closed instead of unmounting,
+     * for animation libraries needing it during exit transitions.
      * @default false
      */
     forceMount?: boolean;
     /**
-     * Keep this panel mounted while closed as `hidden="until-found"` instead of
-     * `hidden=""`, so browser find-in-page (and same-page fragment navigation)
-     * can search the closed panel's text and expand the item to reveal a match.
-     * Implies `forceMount`.
-     *
-     * Support caveat: `hidden="until-found"` and its `beforematch` event are
-     * Chromium-first and still uneven across browsers. Where unsupported the
-     * attribute degrades to a plain `hidden`, so the panel stays correctly
-     * hidden — you lose find-in-page, not correctness. It also applies
-     * `content-visibility: hidden` rather than `display: none`, so a brand
-     * layer must not additionally set `display: none` on closed panels or the
-     * text becomes unsearchable again.
+     * Mount as `hidden="until-found"` to enable find-in-page on closed content
+     * (Chromium-first, degrades to `hidden=""` if unsupported). Implies `forceMount`.
+     * Uses `content-visibility: hidden`; styling must not override with `display: none`.
      * @default false
      */
     hiddenUntilFound?: boolean;
+    /**
+     * Panel landmark role: `region` clutters the landmark list when many panels
+     * are open. Use `"group"` for long accordions; trigger's `aria-labelledby`
+     * labels the panel either way.
+     * @default 'region'
+     */
+    role?: 'region' | 'group';
+}
+/** Props for {@link AccordionIndicator}, the chevron inside an {@link AccordionTrigger}. */
+export interface AccordionIndicatorProps extends PrimitivePropsWithRef<'span'> {
 }
-export {};

package/dist/affix/Affix.cjs

@@ -1 +1 @@
-"use strict";var V=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},C=(e,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!T.call(e,n)&&n!==s&&a(e,n,{get:()=>t[n],enumerable:!(i=w(t,n))||i.enumerable});return e};var q=(e,t,s)=>(s=e!=null?V(O(e)):{},C(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e)),z=e=>C(a({},"__esModule",{value:!0}),e);var F={};W(F,{Affix:()=>l});module.exports=z(F);var r=q(require("react"),1),b=require("../utils/composeRefs.cjs"),A=require("../utils/part.cjs"),H=require("../utils/primitive.cjs"),k=require("../utils/useCallbackRef.cjs"),f=require("react/jsx-runtime"),l=r.forwardRef(({offsetTop:e,offsetBottom:t,target:s,onChange:i,disabled:n=!1,style:E,...u},M)=>{let[$,D]=r.useState(!1),[I,d]=r.useState(0),p=r.useRef(null),c=r.useRef(null),L=(0,b.useComposedRefs)(M,c),x=(0,k.useCallbackRef)(i),R=r.useRef(!1),m=!n&&(e!=null||t!=null),h=`${-(e??0)}px 0px ${-(t??0)}px 0px`;r.useEffect(()=>{d(c.current?.offsetHeight??0)},[]),r.useEffect(()=>{let g=p.current;if(!m||!g||typeof IntersectionObserver>"u")return;let v=new IntersectionObserver(y=>{let P=y[y.length-1];if(!P)return;let o=!P.isIntersecting;R.current!==o&&(R.current=o,d(c.current?.offsetHeight??0),D(o),x(o))},{root:s?.current??null,rootMargin:h,threshold:0});return v.observe(g),()=>v.disconnect()},[m,h,s,x]);let S={"--skdx-affix-height":`${I}px`};return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:p,style:S}),(0,f.jsx)(H.Primitive.div,{"data-state":$?"affixed":"static","data-disabled":n?"":void 0,...u,...(0,A.skdxPart)("affix","root",u.className),ref:L,style:{...S,...E}})]})});l.displayName="Affix";0&&(module.exports={Affix});
+"use strict";var I=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var s in t)l(e,s,{get:t[s],enumerable:!0})},P=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of W(t))!N.call(e,n)&&n!==s&&l(e,n,{get:()=>t[n],enumerable:!(a=L(t,n))||a.enumerable});return e};var F=(e,t,s)=>(s=e!=null?I(z(e)):{},P(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),G=e=>P(l({},"__esModule",{value:!0}),e);var J={};q(J,{Affix:()=>p});module.exports=G(J);var r=F(require("react"),1),C=require("../utils/composeRefs.cjs"),k=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),H=require("../utils/useCallbackRef.cjs"),f=require("react/jsx-runtime"),p=r.forwardRef(({offsetTop:e,offsetBottom:t,target:s=null,onChange:a,disabled:n=!1,style:$,...x},E)=>{let[V,M]=r.useState(!1),[O,u]=r.useState(0),R=r.useRef(null),d=r.useRef(null),w=(0,C.useComposedRefs)(E,d),m=(0,H.useCallbackRef)(a),h=r.useRef(!1),v=!n&&(e!=null||t!=null),S=`${-(e??0)}px 0px ${-(t??0)}px 0px`;r.useEffect(()=>{let i=d.current;if(!i||(u(i.offsetHeight),typeof ResizeObserver>"u"))return;let o=new ResizeObserver(()=>u(i.offsetHeight));return o.observe(i),()=>o.disconnect()},[]),r.useEffect(()=>{let i=R.current;if(!v||!i||typeof IntersectionObserver>"u")return;let o=new IntersectionObserver(g=>{let y=g[g.length-1];if(!y)return;let c=!y.isIntersecting;h.current!==c&&(h.current=c,u(d.current?.offsetHeight??0),M(c),m(c))},{root:s,rootMargin:S,threshold:0});return o.observe(i),()=>o.disconnect()},[v,S,s,m]);let b={"--skdx-affix-height":`${O}px`},D={"--skdx-affix-offset-top":e==null?"auto":`${e}px`,"--skdx-affix-offset-bottom":t==null?"auto":`${t}px`};return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:R,style:b}),(0,f.jsx)(A.Primitive.div,{"data-state":V?"affixed":"static","data-disabled":n?"":void 0,...x,...(0,k.skdxPart)("affix","root",x.className),ref:w,style:{...b,...D,...$}})]})});p.displayName="Affix";0&&(module.exports={Affix});

package/dist/affix/Affix.d.cts

@@ -1,33 +1,14 @@
 import * as React from 'react';
 import type { AffixProps } from './types.cjs';
 /**
- * Reports when an element has scrolled past a given offset, so it can be
- * pinned. Renders a zero-height sentinel just before the element and watches
- * it with a single `IntersectionObserver` — never a scroll listener, so
- * nothing runs per frame and nothing reads layout on the scroll path.
+ * Reports when an element scrolls past an offset via `IntersectionObserver`.
+ * Headless: flips `data-state="affixed"|"static"`, calls `onChange`, publishes
+ * `--skdx-affix-height`, `--skdx-affix-offset-top` / `-bottom` CSS custom properties.
  *
- * Headless, so it pins nothing by itself: it flips
- * `data-state="affixed" | "static"`, calls `onChange`, and publishes the
- * element's measured in-flow height as the `--skdx-affix-height` CSS custom
- * property (on both the element and the sentinel) so the consumer can reserve
- * the space the element vacates. The positioning is one CSS rule you write:
- *
- * ```css
- * [data-state='affixed'] {
- *   position: fixed;
- *   top: 0;
- * }
- * ```
- *
- * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
- * no component. Affix earns its place when you need to *know* about the
- * transition — a shadow that appears only once a header sticks, an analytics
- * ping, a title that swaps in — which CSS alone cannot tell you.
+ * Use `position: sticky` first; reach for Affix when you need to know about the transition.
  *
  * @example
  * ```tsx
- * const [affixed, setAffixed] = React.useState(false);
- *
  * <Affix offsetTop={0} onChange={setAffixed}>
  *   <Toolbar shadow={affixed} />
  * </Affix>

package/dist/affix/Affix.d.ts

@@ -1,33 +1,14 @@
 import * as React from 'react';
 import type { AffixProps } from './types.js';
 /**
- * Reports when an element has scrolled past a given offset, so it can be
- * pinned. Renders a zero-height sentinel just before the element and watches
- * it with a single `IntersectionObserver` — never a scroll listener, so
- * nothing runs per frame and nothing reads layout on the scroll path.
+ * Reports when an element scrolls past an offset via `IntersectionObserver`.
+ * Headless: flips `data-state="affixed"|"static"`, calls `onChange`, publishes
+ * `--skdx-affix-height`, `--skdx-affix-offset-top` / `-bottom` CSS custom properties.
  *
- * Headless, so it pins nothing by itself: it flips
- * `data-state="affixed" | "static"`, calls `onChange`, and publishes the
- * element's measured in-flow height as the `--skdx-affix-height` CSS custom
- * property (on both the element and the sentinel) so the consumer can reserve
- * the space the element vacates. The positioning is one CSS rule you write:
- *
- * ```css
- * [data-state='affixed'] {
- *   position: fixed;
- *   top: 0;
- * }
- * ```
- *
- * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
- * no component. Affix earns its place when you need to *know* about the
- * transition — a shadow that appears only once a header sticks, an analytics
- * ping, a title that swaps in — which CSS alone cannot tell you.
+ * Use `position: sticky` first; reach for Affix when you need to know about the transition.
  *
  * @example
  * ```tsx
- * const [affixed, setAffixed] = React.useState(false);
- *
  * <Affix offsetTop={0} onChange={setAffixed}>
  *   <Toolbar shadow={affixed} />
  * </Affix>

package/dist/affix/Affix.js

@@ -1 +1 @@
-import*as e from"react";import{useComposedRefs as E}from"../utils/composeRefs.js";import{skdxPart as M}from"../utils/part.js";import{Primitive as $}from"../utils/primitive.js";import{useCallbackRef as D}from"../utils/useCallbackRef.js";import{Fragment as I,jsx as g,jsxs as L}from"react/jsx-runtime";var v=e.forwardRef(({offsetTop:s,offsetBottom:n,target:f,onChange:y,disabled:i=!1,style:P,...o},C)=>{let[b,A]=e.useState(!1),[H,a]=e.useState(0),c=e.useRef(null),r=e.useRef(null),k=E(C,r),l=D(y),u=e.useRef(!1),d=!i&&(s!=null||n!=null),p=`${-(s??0)}px 0px ${-(n??0)}px 0px`;e.useEffect(()=>{a(r.current?.offsetHeight??0)},[]),e.useEffect(()=>{let R=c.current;if(!d||!R||typeof IntersectionObserver>"u")return;let m=new IntersectionObserver(h=>{let S=h[h.length-1];if(!S)return;let t=!S.isIntersecting;u.current!==t&&(u.current=t,a(r.current?.offsetHeight??0),A(t),l(t))},{root:f?.current??null,rootMargin:p,threshold:0});return m.observe(R),()=>m.disconnect()},[d,p,f,l]);let x={"--skdx-affix-height":`${H}px`};return L(I,{children:[g("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:c,style:x}),g($.div,{"data-state":b?"affixed":"static","data-disabled":i?"":void 0,...o,...M("affix","root",o.className),ref:k,style:{...x,...P}})]})});v.displayName="Affix";export{v as Affix};
+import*as e from"react";import{useComposedRefs as E}from"../utils/composeRefs.js";import{skdxPart as V}from"../utils/part.js";import{Primitive as M}from"../utils/primitive.js";import{useCallbackRef as O}from"../utils/useCallbackRef.js";import{Fragment as w,jsx as S,jsxs as D}from"react/jsx-runtime";var b=e.forwardRef(({offsetTop:s,offsetBottom:n,target:a=null,onChange:g,disabled:c=!1,style:y,...l},P)=>{let[C,k]=e.useState(!1),[A,f]=e.useState(0),u=e.useRef(null),o=e.useRef(null),H=E(P,o),d=O(g),p=e.useRef(!1),x=!c&&(s!=null||n!=null),R=`${-(s??0)}px 0px ${-(n??0)}px 0px`;e.useEffect(()=>{let t=o.current;if(!t||(f(t.offsetHeight),typeof ResizeObserver>"u"))return;let r=new ResizeObserver(()=>f(t.offsetHeight));return r.observe(t),()=>r.disconnect()},[]),e.useEffect(()=>{let t=u.current;if(!x||!t||typeof IntersectionObserver>"u")return;let r=new IntersectionObserver(h=>{let v=h[h.length-1];if(!v)return;let i=!v.isIntersecting;p.current!==i&&(p.current=i,f(o.current?.offsetHeight??0),k(i),d(i))},{root:a,rootMargin:R,threshold:0});return r.observe(t),()=>r.disconnect()},[x,R,a,d]);let m={"--skdx-affix-height":`${A}px`},$={"--skdx-affix-offset-top":s==null?"auto":`${s}px`,"--skdx-affix-offset-bottom":n==null?"auto":`${n}px`};return D(w,{children:[S("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:u,style:m}),S(M.div,{"data-state":C?"affixed":"static","data-disabled":c?"":void 0,...l,...V("affix","root",l.className),ref:H,style:{...m,...$,...y}})]})});b.displayName="Affix";export{b as Affix};

package/dist/affix/types.d.cts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** Props for the {@link Affix} root — the only part of this family. */
 export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
@@ -11,18 +10,24 @@ export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange
      */
     offsetTop?: number;
     /**
-     * Distance from the bottom edge of the scroll root at which the element
-     * counts as affixed — the mirror of `offsetTop`, for a bar pinned to the
-     * bottom until its natural position scrolls into view.
-     * @default undefined — the bottom edge is never pinned.
+     * Distance from bottom edge (mirror of `offsetTop`).
+     * @default undefined
      */
     offsetBottom?: number;
     /**
-     * Ref to the scrolling ancestor the offsets are measured against, used as
-     * the `IntersectionObserver` root.
-     * @default undefined — measured against the viewport.
+     * Scrolling ancestor for measurement (IntersectionObserver root). Pass
+     * `Element | null`, not a ref (use state to adapt refs):
+     *
+     * ```tsx
+     * const [scroller, setScroller] = React.useState<HTMLElement | null>(null);
+     * <div ref={setScroller}>
+     *   <Affix offsetTop={0} target={scroller} />
+     * </div>
+     * ```
+     *
+     * @default null — viewport
      */
-    target?: React.RefObject<HTMLElement | null>;
+    target?: Element | null;
     /**
      * Fires with the new value whenever the affixed state flips, and only then —
      * it is deduped, so a scroll that does not cross the threshold emits nothing.

package/dist/affix/types.d.ts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** Props for the {@link Affix} root — the only part of this family. */
 export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
@@ -11,18 +10,24 @@ export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange
      */
     offsetTop?: number;
     /**
-     * Distance from the bottom edge of the scroll root at which the element
-     * counts as affixed — the mirror of `offsetTop`, for a bar pinned to the
-     * bottom until its natural position scrolls into view.
-     * @default undefined — the bottom edge is never pinned.
+     * Distance from bottom edge (mirror of `offsetTop`).
+     * @default undefined
      */
     offsetBottom?: number;
     /**
-     * Ref to the scrolling ancestor the offsets are measured against, used as
-     * the `IntersectionObserver` root.
-     * @default undefined — measured against the viewport.
+     * Scrolling ancestor for measurement (IntersectionObserver root). Pass
+     * `Element | null`, not a ref (use state to adapt refs):
+     *
+     * ```tsx
+     * const [scroller, setScroller] = React.useState<HTMLElement | null>(null);
+     * <div ref={setScroller}>
+     *   <Affix offsetTop={0} target={scroller} />
+     * </div>
+     * ```
+     *
+     * @default null — viewport
      */
-    target?: React.RefObject<HTMLElement | null>;
+    target?: Element | null;
     /**
      * Fires with the new value whenever the affixed state flips, and only then —
      * it is deduped, so a scroll that does not cross the threshold emits nothing.

package/dist/alert/Alert.cjs

@@ -1 +1 @@
-"use strict";var _=Object.create;var p=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},C=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of j(t))!te.call(e,i)&&i!==r&&p(e,i,{get:()=>t[i],enumerable:!(o=$(t,i))||o.enumerable});return e};var a=(e,t,r)=>(r=e!=null?_(ee(e)):{},C(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),oe=e=>C(p({},"__esModule",{value:!0}),e);var ie={};re(ie,{Alert:()=>N,AlertAction:()=>x,AlertClose:()=>u,AlertDescription:()=>d,AlertIcon:()=>P,AlertProvider:()=>I,AlertTitle:()=>A,useAlertContext:()=>l});module.exports=oe(ie);var s=a(require("react"),1),v=require("../utils/createContext.cjs"),T=require("../utils/part.cjs"),D=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),f=require("react/jsx-runtime"),[I,l]=(0,v.createSafeContext)("Alert"),N=s.forwardRef(({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,...i},K)=>{let R=s.useId(),y=s.useId(),[Q,U]=s.useState(!1),[W,X]=s.useState(!1),[Y=!0,Z]=(0,H.useControllableState)({prop:t,defaultProp:r,onChange:o});return(0,f.jsx)(I,{titleId:R,descriptionId:y,setHasTitle:U,setHasDescription:X,onOpenChange:Z,children:Y?(0,f.jsx)(D.Primitive.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":Q?R:void 0,"aria-describedby":W?y:void 0,...i,...(0,T.skdxPart)("alert","root",i.className),ref:K}):null})});N.displayName="Alert";var n=a(require("react"),1),b=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var k=require("react/jsx-runtime"),A=n.forwardRef((e,t)=>{let r=l("AlertTitle"),{setHasTitle:o}=r;return n.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,k.jsx)(E.Primitive.h3,{id:r.titleId,...e,...(0,b.skdxPart)("alert","title",e.className),ref:t})});A.displayName="AlertTitle";var m=a(require("react"),1),h=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var L=require("react/jsx-runtime"),d=m.forwardRef((e,t)=>{let r=l("AlertDescription"),{setHasDescription:o}=r;return m.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,L.jsx)(w.Primitive.div,{id:r.descriptionId,...e,...(0,h.skdxPart)("alert","description",e.className),ref:t})});d.displayName="AlertDescription";var M=a(require("react"),1),S=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),O=require("react/jsx-runtime"),P=M.forwardRef((e,t)=>(0,O.jsx)(g.Primitive.span,{"aria-hidden":"true",...e,...(0,S.skdxPart)("alert","icon",e.className),ref:t}));P.displayName="AlertIcon";var V=a(require("react"),1),B=require("../utils/part.cjs"),c=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),u=V.forwardRef((e,t)=>{let r=l("AlertClose");return(0,q.jsx)(c.Primitive.button,{type:"button","aria-label":"Dismiss",...e,...(0,B.skdxPart)("alert","close",e.className),ref:t,onClick:(0,c.composeEventHandlers)(e.onClick,()=>r.onOpenChange(!1))})});u.displayName="AlertClose";var z=a(require("react"),1),F=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),x=z.forwardRef((e,t)=>(0,J.jsx)(G.Primitive.div,{...e,...(0,F.skdxPart)("alert","action",e.className),ref:t}));x.displayName="AlertAction";0&&(module.exports={Alert,AlertAction,AlertClose,AlertDescription,AlertIcon,AlertProvider,AlertTitle,useAlertContext});
+"use strict";var ae=Object.create;var A=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of me(t))!fe.call(e,i)&&i!==r&&A(e,i,{get:()=>t[i],enumerable:!(o=ce(t,i))||o.enumerable});return e};var m=(e,t,r)=>(r=e!=null?ae(pe(e)):{},g(t||!e||!e.__esModule?A(r,"default",{value:e,enumerable:!0}):r,e)),Ae=e=>g(A({},"__esModule",{value:!0}),e);var ye={};ue(ye,{Alert:()=>M,AlertAction:()=>d,AlertClose:()=>y,AlertDescription:()=>v,AlertIcon:()=>T,AlertProvider:()=>te,AlertRoot:()=>L,AlertTitle:()=>C,useAlertContext:()=>c});module.exports=Ae(ye);var l=m(require("react"),1),$=require("../utils/createContext.cjs"),j=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),b=require("../utils/tabbable.cjs"),ee=require("../utils/useControllableState.cjs");var w=m(require("react"),1),S=require("../utils/part.cjs"),B=require("../utils/primitive.cjs"),O=require("react/jsx-runtime"),d=w.forwardRef((e,t)=>(0,O.jsx)(B.Primitive.div,{...e,...(0,S.skdxPart)("alert","action",e.className),ref:t}));d.displayName="AlertAction";var q=m(require("react"),1),K=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),y=q.forwardRef((e,t)=>{let r=c("AlertClose");return(0,V.jsx)(R.Primitive.button,{type:"button","aria-label":r.closeLabel,...e,...(0,K.skdxPart)("alert","close",e.className),ref:t,onClick:(0,R.composeEventHandlers)(e.onClick,()=>r.onOpenChange(!1))})});y.displayName="AlertClose";var P=m(require("react"),1),F=require("../utils/part.cjs"),W=require("../utils/primitive.cjs");var _=require("react/jsx-runtime"),v=P.forwardRef((e,t)=>{let r=c("AlertDescription"),{setHasDescription:o}=r;return P.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,_.jsx)(W.Primitive.div,{id:r.descriptionId,...e,...(0,F.skdxPart)("alert","description",e.className),ref:t})});v.displayName="AlertDescription";var z=m(require("react"),1),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs"),Q=require("react/jsx-runtime"),T=z.forwardRef((e,t)=>(0,Q.jsx)(J.Primitive.span,{"aria-hidden":"true",...e,...(0,G.skdxPart)("alert","icon",e.className),ref:t}));T.displayName="AlertIcon";var x=m(require("react"),1),U=require("../utils/part.cjs"),X=require("../utils/primitive.cjs");var Y=require("react/jsx-runtime"),C=x.forwardRef((e,t)=>{let r=c("AlertTitle"),{setHasTitle:o}=r;return x.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,Y.jsx)(X.Primitive.h3,{id:r.titleId,...e,...(0,U.skdxPart)("alert","title",e.className),ref:t})});C.displayName="AlertTitle";var s=require("react/jsx-runtime"),de=()=>(0,s.jsx)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:(0,s.jsx)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),Z=({icon:e,title:t,description:r,action:o,dismissible:i,children:p})=>(0,s.jsxs)(s.Fragment,{children:[e?(0,s.jsx)(T,{children:e}):null,t?(0,s.jsx)(C,{children:t}):null,r?(0,s.jsx)(v,{children:r}):null,p,o?(0,s.jsx)(d,{children:o}):null,i?(0,s.jsx)(y,{children:(0,s.jsx)(de,{})}):null]});var u=require("react/jsx-runtime");function Re(e,t){if(e?.ownerDocument)for(let o=e?.previousElementSibling;o;o=o.previousElementSibling){let i=o.matches(b.TABBABLE_SELECTOR)?o:o.querySelector(b.TABBABLE_SELECTOR);if(i){i.focus();return}}t?.isConnected&&t.focus()}var[te,c]=(0,$.createSafeContext)("Alert"),L=l.forwardRef(({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,closeLabel:i="Dismiss",dismissOnEscape:p=!1,...f},a)=>{let N=l.useId(),h=l.useId(),[re,oe]=l.useState(!1),[le,ie]=l.useState(!1),[se=!0,D]=(0,ee.useControllableState)({prop:t,defaultProp:r,onChange:o}),H=l.useRef(null),I=l.useRef(null);l.useEffect(()=>{I.current=H.current?.ownerDocument.activeElement??null},[]);let k=l.useCallback(n=>{if(n){D(!0);return}Re(H.current,I.current),D(!1)},[D]),ne=l.useCallback(n=>{H.current=n,typeof a=="function"?a(n):a&&(a.current=n)},[a]);return(0,u.jsx)(te,{titleId:N,descriptionId:h,setHasTitle:oe,setHasDescription:ie,closeLabel:i,onOpenChange:k,children:se?(0,u.jsx)(E.Primitive.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":re?N:void 0,"aria-describedby":le?h:void 0,...f,...(0,j.skdxPart)("alert","root",f.className),ref:ne,onKeyDown:(0,E.composeEventHandlers)(f.onKeyDown,n=>{!p||n.key!=="Escape"||(n.preventDefault(),k(!1))})}):null})});L.displayName="AlertRoot";var M=l.forwardRef(({title:e,description:t,icon:r,action:o,dismissible:i=!1,children:p,...f},a)=>(0,u.jsx)(L,{...f,ref:a,children:(0,u.jsx)(Z,{icon:r,title:e,description:t,action:o,dismissible:i,children:p})}));M.displayName="Alert";0&&(module.exports={Alert,AlertAction,AlertClose,AlertDescription,AlertIcon,AlertProvider,AlertRoot,AlertTitle,useAlertContext});