@skdx/react 0.28.0 → 0.30.0

package/dist/tree-select/types.d.ts

@@ -17,35 +17,42 @@ export interface TreeSelectNode {
      * Human-readable text rendered as node content, matched by filter, shown by TreeSelectValue.
      * @default undefined — falls back to `value`.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Excludes node from checking, cascade, navigation, and parent calculations;
      * inherited by the whole subtree.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Child nodes. Empty or absent children makes this a leaf (not expandable).
      * @default undefined — a leaf.
      */
-    children?: TreeSelectNode[];
+    children?: TreeSelectNode[] | undefined;
     /**
      * Marks an unloaded branch as expandable before children arrive, giving
      * loadChildren something to run on; ignored once the node has children.
      * @default undefined — branch-ness decided by children alone.
      */
-    hasChildren?: boolean;
+    hasChildren?: boolean | undefined;
 }
-/**
- * Propagation direction when checking a node: both ways, down only, up only, or none. Meaningful only when multiple is set.
- */
+/** Propagation direction when checking a node — both ways, down only, up only, or none — meaningful only when multiple is set. */
 export type TreeSelectCheckStrategy = 'cascade' | 'descendants' | 'ancestors' | 'independent';
-/**
- * Which checked nodes appear in value: all, leaves only, or the shallowest node of each fully-checked subtree. Ignored where projection cannot be undone.
- */
+/** Which checked nodes appear in value — all, leaves only, or the shallowest node of each fully-checked subtree — ignored where projection cannot be undone. */
 export type TreeSelectValueStrategy = 'all' | 'leaf' | 'shallowest';
 /** Predicate deciding whether a node matches the current filter text. */
 export type TreeSelectFilter = (node: TreeSelectNode, inputValue: string) => boolean;
+/** How the popup draws the hierarchy — one indented tree, or one tree per open level side by side. */
+export type TreeSelectLayout = 'tree' | 'columns';
+/** @internal One showing column: the branch it belongs to plus the rows TreeSelectTree renders for it. */
+export interface TreeSelectColumnView {
+    /** The branch whose children this column lists, or `null` for the root column. */
+    parent: string | null;
+    rows: readonly {
+        value: string;
+        depth: number;
+    }[];
+}
 /** @internal Shared state distributed from TreeSelect to its parts via context. */
 export interface TreeSelectContextValue {
     collection: readonly TreeSelectNode[];
@@ -77,6 +84,14 @@ export interface TreeSelectContextValue {
     expandOnClick: boolean;
     /** Whether a node survives the current filter (always true when not filtering). */
     isVisible: (value: string) => boolean;
+    /** The layout actually drawn: `'tree'` while a filter narrows a `'columns'` popup. */
+    layout: TreeSelectLayout;
+    /** The showing columns left to right; empty unless the effective layout is `'columns'`. */
+    columns: readonly TreeSelectColumnView[];
+    /** DOM id of a column's tree; column 0 keeps `treeId` so the tree layout is unaffected. */
+    columnTreeId: (columnIndex: number) => string;
+    /** DOM id of the tree holding the active node, which `aria-controls` must name. */
+    activeTreeId: string;
     /** Visible, expanded nodes in navigation order. */
     flat: readonly TreeSelectFlatNode[];
     flatMap: ReadonlyMap<string, TreeSelectFlatNode>;
@@ -100,12 +115,7 @@ export interface TreeSelectContextValue {
         typeahead: boolean;
         selectOnSpace: boolean;
     }) => void;
-    /**
-     * Node values `TreeSelectTree` actually renders when its `rows` prop windows
-     * the collection below what `flat` considers visible; `null` when unrestricted.
-     * Keyboard navigation and the initial active node are drawn from this set so
-     * `aria-activedescendant` never names a node with no rendered treeitem.
-     */
+    /** Node values `TreeSelectTree` actually renders when `rows` windows the collection, or `null` when unrestricted; navigation draws from this set. */
     visibleRowValues: ReadonlySet<string> | null;
     /** Reported by TreeSelectTree whenever its `rows` prop changes. */
     setVisibleRowValues: (values: ReadonlySet<string> | null) => void;
@@ -120,16 +130,13 @@ export interface TreeSelectItemContextValue {
     /** Whether this node is the virtually-focused one named by aria-activedescendant. */
     active: boolean;
 }
-/**
- * Props for the TreeSelect root. Standard attributes land on the derived
- * TreeSelectTrigger. TreeSelect itself renders no DOM.
- */
+/** Props for the TreeSelect root; standard attributes land on the derived TreeSelectTrigger, since TreeSelect itself renders no DOM. */
 export interface TreeSelectProps extends PassThroughProps {
     /**
      * The TreeSelectTrigger/TreeSelectPortal parts, rendered as children.
      * @default undefined — renders nothing without children.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Hierarchical data the tree is built from; node values must be unique across the whole collection.
      */
@@ -138,152 +145,162 @@ export interface TreeSelectProps extends PassThroughProps {
      * Controlled checked node values, always in the shape valueStrategy describes. Pair with onValueChange.
      * @default undefined — uncontrolled.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initially checked node values for uncontrolled usage.
      * @default [] — nothing checked.
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new value whenever the checked set changes, projected through valueStrategy.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: ((value: string[]) => void) | undefined;
     /**
      * Allows more than one node to be checked; tree gets aria-multiselectable and checkStrategy becomes meaningful.
      * @default false
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /**
      * Whether and in which direction checking propagates; see TreeSelectCheckStrategy. Ignored unless multiple.
      * @default 'cascade'
      */
-    checkStrategy?: TreeSelectCheckStrategy;
+    checkStrategy?: TreeSelectCheckStrategy | undefined;
     /**
      * Which checked nodes appear in the emitted value; see TreeSelectValueStrategy. Ignored where checkStrategy lacks the direction to rebuild.
      * @default 'all'
      */
-    valueStrategy?: TreeSelectValueStrategy;
+    valueStrategy?: TreeSelectValueStrategy | undefined;
     /**
      * Controlled expanded node ids, paired with onExpandedChange; while filtering, ancestors of every match are expanded on top of this value.
      * @default undefined — uncontrolled.
      */
-    expandedIds?: string[];
+    expanded?: string[] | undefined;
     /**
      * Initially expanded node values for uncontrolled usage.
      * @default [] — every branch collapsed.
      */
-    defaultExpandedIds?: string[];
+    defaultExpanded?: string[] | undefined;
     /**
      * Fires with the new expanded set whenever a branch expands or collapses, never for filter-driven expansion.
      * @default undefined — no-op if omitted.
      */
-    onExpandedChange?: (expandedIds: string[]) => void;
+    onExpandedChange?: ((expanded: string[]) => void) | undefined;
     /**
      * Whether the popup is open for controlled usage. Pair with onOpenChange.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Initial open state for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * Fires once the open state change finishes on screen, after animation ends or immediately if none.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
      * The TreeSelectInput's filter text for controlled usage. Pair with onInputValueChange.
      * @default undefined — uncontrolled, tracks its own filter text internally.
      */
-    inputValue?: string;
+    inputValue?: string | undefined;
     /**
      * Initial filter text for uncontrolled usage.
      * @default '' — unfiltered.
      */
-    defaultInputValue?: string;
+    defaultInputValue?: string | undefined;
     /**
      * Fires with the new filter text as the user types, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onInputValueChange?: (inputValue: string) => void;
+    onInputValueChange?: ((inputValue: string) => void) | undefined;
     /**
      * Decides whether a node matches the filter; matches keep their ancestor chain and subtree visible.
      * @default defaultTreeSelectFilter
      */
-    filter?: TreeSelectFilter;
+    filter?: TreeSelectFilter | undefined;
     /**
      * Blocks the whole control; trigger is disabled and no key changes anything.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Form field name; each selected node value submits separately under this name.
      * @default undefined — submits nothing.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Id of the form the submitted entries belong to, for a TreeSelect not a DOM descendant of it.
      * @default undefined — entries belong to the nearest ancestor form.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Lets the user open and navigate the tree without changing the value, unlike disabled which also removes from the tab order.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Closes the popup as soon as a node is checked, returning focus to trigger.
      * @default !multiple
      */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
     /**
      * Loads a node's children the first time it expands, for non-materialized collection. Mark branches with hasChildren; does not run while filtering.
      * @default undefined — collection is complete as given.
      */
-    loadChildren?: (nodeValue: string) => void | Promise<void>;
+    loadChildren?: ((nodeValue: string) => void | Promise<void>) | undefined;
     /**
      * Formats the announced message each time filter matches change while the popup is open.
      * @default defaultGetMatchCountLabel
      */
-    getMatchCountLabel?: (count: number) => string;
+    getMatchCountLabel?: ((count: number) => string) | undefined;
     /**
      * Supplies the label for a value whose node is not in collection, consulted by TreeSelectValue before the raw-value fallback.
      * @default undefined — unknown value renders as itself.
      */
-    getValueLabel?: (value: string) => string;
+    getValueLabel?: ((value: string) => string) | undefined;
     /**
-     * Whether clicking a branch row toggles its expansion as well as checking it; ArrowRight/ArrowLeft are unaffected either way.
+     * Whether clicking a branch row toggles its expansion as well as checking it; ArrowRight/ArrowLeft are unaffected either way. Ignored (treated as true) under `layout="columns"`, where the row is the only thing that opens a column.
      * @default false
      */
-    expandOnClick?: boolean;
+    expandOnClick?: boolean | undefined;
+    /**
+     * How the popup presents the hierarchy: one indented tree, or one tree per open level side by side. A non-empty filter draws `'columns'` as a tree.
+     * @default 'tree'
+     */
+    layout?: TreeSelectLayout | undefined;
     /**
      * Renders a node's content when deriving anatomy, forwarded to TreeSelectTree; ignored under full manual composition.
      * @default undefined — renders each node's label ?? value as plain text.
      */
-    renderNode?: (node: TreeSelectNode) => React.ReactNode;
+    renderNode?: ((node: TreeSelectNode) => React.ReactNode) | undefined;
     /**
      * Placeholder for the derived trigger while nothing is checked, read only while deriving anatomy.
      * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Empty-state message shown when no node matches the filter; only read while deriving anatomy.
      * @default 'No matches'
      */
-    emptyMessage?: string;
+    emptyMessage?: string | undefined;
     /**
      * Accessible name for derived components; only read while deriving anatomy. Falls back to placeholder.
      * @default undefined — if neither is set, no attribute is emitted.
      */
-    'aria-label'?: string;
+    'aria-label'?: string | undefined;
+    /**
+     * Size rung the skin scales the panel by, fed to the derived Content.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link TreeSelectTrigger}, the `role="combobox"` button that opens the popup. */
 export interface TreeSelectTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -294,7 +311,7 @@ export interface TreeSelectValueProps extends PrimitivePropsWithRef<'span'> {
      * Stand-in content rendered while nothing is checked.
      * @default undefined
      */
-    placeholder?: React.ReactNode;
+    placeholder?: React.ReactNode | undefined;
 }
 /** Props for TreeSelectPortal, which teleports the popup to document.body while open. */
 export interface TreeSelectPortalProps extends PortalProps {
@@ -302,51 +319,56 @@ export interface TreeSelectPortalProps extends PortalProps {
      * Renders and mounts TreeSelectContent even while closed, for animation libraries needing the outgoing content during exit.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
-/**
- * Props for TreeSelectContent, the popup panel; extends PopperContentProps (side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding).
- */
+/** Props for TreeSelectContent, the popup panel; extends PopperContentProps (side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding). */
 export interface TreeSelectContentProps extends PopperContentProps {
     /**
      * Mounts this popup even while closed, instead of unmounting it.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Fires on Escape while the popup is open, before it closes; call preventDefault() to keep it open.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
      * Fires on a pointer-down outside the popup and trigger; call preventDefault() to keep it open.
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus moves outside the popup and trigger; call preventDefault() to keep open.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: CustomEvent<FocusEvent>) => void;
+    onFocusOutside?: ((event: CustomEvent<FocusEvent>) => void) | undefined;
     /**
      * Fires for either kind of outside interaction, before the specific handler with the same event.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+    /**
+     * Size rung the skin scales the panel by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** Props for TreeSelectTree, the role="tree" inside the popup. */
-export interface TreeSelectTreeProps extends Omit<PrimitivePropsWithRef<'div'>, 'children' | 'defaultValue'> {
+export interface TreeSelectTreeProps extends Omit<PrimitivePropsWithRef<'div'>, 'children' | 'defaultValue' | 'ref'> {
     /**
      * Renders a node's content (label, indicators); returned nodes render inside the node's treeitem.
      * @default undefined — renders the node's label ?? value as plain text.
      */
-    renderLabel?: (node: TreeSelectNode) => React.ReactNode;
+    renderLabel?: ((node: TreeSelectNode) => React.ReactNode) | undefined;
     /**
      * Renders exactly this row set instead of the whole collection; rows render flat as { value, depth } pairs with row.depth supplying aria-level.
      * @default undefined — renders every visible node from collection, nested.
      */
-    rows?: readonly Pick<TreeSelectFlatNode, 'value' | 'depth'>[];
+    rows?: readonly Pick<TreeSelectFlatNode, 'value' | 'depth'>[] | undefined;
 }
+/** Props for TreeSelectColumns, the `role="presentation"` track holding one tree per open level. */
+export type TreeSelectColumnsProps = Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'>;
 /** Props for a single TreeSelectItem node. Normally rendered by TreeSelectTree. */
 export interface TreeSelectItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'children'> {
     /** The collection node this row stands for. */
@@ -355,7 +377,7 @@ export interface TreeSelectItemProps extends Omit<PrimitivePropsWithRef<'div'>,
      * The row's content — the label, plus any indicators.
      * @default undefined
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 /** Props for TreeSelectItemIndicator, the checkmark shown on checked or partially-checked nodes. */
 export interface TreeSelectItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -363,7 +385,7 @@ export interface TreeSelectItemIndicatorProps extends PrimitivePropsWithRef<'spa
      * Renders even while the node is unchecked, for animating the check or reserving its space.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for TreeSelectEmpty, shown in place of the tree when the filter matches nothing. */
 export interface TreeSelectEmptyProps extends PrimitivePropsWithRef<'div'> {

package/dist/utils/Glyph.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},f=(o,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!d.call(o,t)&&t!==r&&i(o,t,{get:()=>e[t],enumerable:!(n=a(e,t))||n.enumerable});return o};var y=o=>f(i({},"__esModule",{value:!0}),o);var u={};m(u,{Glyph:()=>s});module.exports=y(u);var p=require("./glyph-data.cjs"),l=require("react/jsx-runtime");function s({name:o}){let e=p.GLYPHS[o];return(0,l.jsx)("svg",{viewBox:e.viewBox,width:"1em",height:"1em",fill:e.fill?"currentColor":"none","aria-hidden":"true",focusable:"false",children:e.fill?(0,l.jsx)("path",{d:e.d}):(0,l.jsx)("path",{d:e.d,stroke:"currentColor",strokeWidth:p.GLYPH_STROKE_WIDTH,strokeLinecap:"round",strokeLinejoin:"round"})})}0&&(module.exports={Glyph});

package/dist/utils/Glyph.d.cts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import { type GlyphName } from './glyph-data.cjs';
+export type { GlyphName } from './glyph-data.cjs';
+/** @internal A built-in decorative glyph: 1em, aria-hidden, painted with currentColor. */
+export declare function Glyph({ name }: {
+    name: GlyphName;
+}): JSX.Element;

package/dist/utils/Glyph.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import { type GlyphName } from './glyph-data.js';
+export type { GlyphName } from './glyph-data.js';
+/** @internal A built-in decorative glyph: 1em, aria-hidden, painted with currentColor. */
+export declare function Glyph({ name }: {
+    name: GlyphName;
+}): JSX.Element;

package/dist/utils/Glyph.js

@@ -0,0 +1,2 @@
+'use client';
+import{GLYPH_STROKE_WIDTH as r,GLYPHS as l}from"./glyph-data.js";import{jsx as o}from"react/jsx-runtime";function i({name:t}){let e=l[t];return o("svg",{viewBox:e.viewBox,width:"1em",height:"1em",fill:e.fill?"currentColor":"none","aria-hidden":"true",focusable:"false",children:e.fill?o("path",{d:e.d}):o("path",{d:e.d,stroke:"currentColor",strokeWidth:r,strokeLinecap:"round",strokeLinejoin:"round"})})}export{i as Glyph};

package/dist/utils/announcer.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},g=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of c(e))!a.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(n=d(e,t))||n.enumerable});return o};var p=o=>g(r({},"__esModule",{value:!0}),o);var f={};u(f,{ANNOUNCE_DEBOUNCE_MS:()=>l,Announcer:()=>s});module.exports=p(f);var l=150,m="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",s=class{constructor(){this.regions=new Map}announce(e,i="polite"){if(typeof document>"u")return;let n=e.trim();if(!n)return;let t=this.regionFor(i);t.pending=n,t.node.textContent="",clearTimeout(t.timer),t.timer=setTimeout(()=>{t.timer=void 0,t.node.textContent=t.pending},150)}clear(e){for(let[i,n]of this.regions)e!==void 0&&i!==e||(clearTimeout(n.timer),n.timer=void 0,n.node.textContent="")}destroy(){this.clear();for(let e of this.regions.values())e.node.remove();this.regions.clear()}regionFor(e){let i=this.regions.get(e);if(i?.node.isConnected)return i;let n=document.createElement("div");n.setAttribute("aria-live",e),n.setAttribute("aria-atomic","true"),n.setAttribute("data-skdx-live-announcer",e),n.style.cssText=m,document.body.appendChild(n);let t={node:n,pending:"",timer:void 0};return this.regions.set(e,t),t}};0&&(module.exports={ANNOUNCE_DEBOUNCE_MS,Announcer});

package/dist/utils/announcer.d.cts

@@ -0,0 +1,17 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/** How long successive announcements keep merging into one write before the region updates. */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/** Owns the `aria-live` regions and their debounced writes; one instance per process (or per Angular injector). */
+export declare class Announcer {
+    private readonly regions;
+    /**
+     * Schedules `message` for the region; a burst inside one debounce window collapses to its last message, and a repeat of the text already shown is re-announced.
+     */
+    announce(message: string, politeness?: AnnouncePoliteness): void;
+    /** Empties the region(s) and drops anything still pending; pass a politeness to clear just one. */
+    clear(politeness?: AnnouncePoliteness): void;
+    /** Clears and removes the regions from the document. */
+    destroy(): void;
+    private regionFor;
+}

package/dist/utils/announcer.d.ts

@@ -0,0 +1,17 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/** How long successive announcements keep merging into one write before the region updates. */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/** Owns the `aria-live` regions and their debounced writes; one instance per process (or per Angular injector). */
+export declare class Announcer {
+    private readonly regions;
+    /**
+     * Schedules `message` for the region; a burst inside one debounce window collapses to its last message, and a repeat of the text already shown is re-announced.
+     */
+    announce(message: string, politeness?: AnnouncePoliteness): void;
+    /** Empties the region(s) and drops anything still pending; pass a politeness to clear just one. */
+    clear(politeness?: AnnouncePoliteness): void;
+    /** Clears and removes the regions from the document. */
+    destroy(): void;
+    private regionFor;
+}

package/dist/utils/announcer.js

@@ -0,0 +1,2 @@
+'use client';
+var d=150,r="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",o=class{constructor(){this.regions=new Map}announce(n,i="polite"){if(typeof document>"u")return;let e=n.trim();if(!e)return;let t=this.regionFor(i);t.pending=e,t.node.textContent="",clearTimeout(t.timer),t.timer=setTimeout(()=>{t.timer=void 0,t.node.textContent=t.pending},150)}clear(n){for(let[i,e]of this.regions)n!==void 0&&i!==n||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}destroy(){this.clear();for(let n of this.regions.values())n.node.remove();this.regions.clear()}regionFor(n){let i=this.regions.get(n);if(i?.node.isConnected)return i;let e=document.createElement("div");e.setAttribute("aria-live",n),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",n),e.style.cssText=r,document.body.appendChild(e);let t={node:e,pending:"",timer:void 0};return this.regions.set(n,t),t}};export{d as ANNOUNCE_DEBOUNCE_MS,o as Announcer};

package/dist/utils/appearance.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},l=(n,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!d.call(n,t)&&t!==r&&s(n,t,{get:()=>e[t],enumerable:!(a=c(e,t))||a.enumerable});return n};var f=n=>l(s({},"__esModule",{value:!0}),n);var A={};p(A,{appearanceAttrs:()=>g});module.exports=f(A);function g(n,e={}){let r={};for(let a of Object.keys(n)){let t=`data-${a.replace(/[A-Z]/g,i=>`-${i.toLowerCase()}`)}`,o=n[a]??e[t];o==null||o===!1?r[t]=void 0:r[t]=o===!0?"":String(o)}return r}0&&(module.exports={appearanceAttrs});

package/dist/utils/appearance.d.cts

@@ -0,0 +1,14 @@
+/** One appearance axis value as a consumer may pass it: a rung name, a presence flag, or nothing. */
+export type AppearanceValue = string | boolean | null | undefined;
+/**
+ * Resolves appearance axes to the `data-*` attributes the skin reads, so a
+ * consumer may set either the prop (`size="lg"`) or the attribute
+ * (`data-size="lg"`) and both render the same. The prop wins when both are
+ * given; `false`, `null` and `undefined` leave the attribute off; `true`
+ * writes a bare presence attribute.
+ *
+ * @param values - Axis name to prop value, e.g. `{ size, iconOnly }`; camelCase keys map to kebab-case attributes.
+ * @param attrs - The pass-through attributes the consumer supplied, read for `data-<axis>` fallbacks.
+ * @returns A `data-<axis>` record to spread after the pass-through attributes.
+ */
+export declare function appearanceAttrs(values: Record<string, AppearanceValue>, attrs?: Record<string, unknown>): Record<string, string | undefined>;

package/dist/utils/appearance.d.ts

@@ -0,0 +1,14 @@
+/** One appearance axis value as a consumer may pass it: a rung name, a presence flag, or nothing. */
+export type AppearanceValue = string | boolean | null | undefined;
+/**
+ * Resolves appearance axes to the `data-*` attributes the skin reads, so a
+ * consumer may set either the prop (`size="lg"`) or the attribute
+ * (`data-size="lg"`) and both render the same. The prop wins when both are
+ * given; `false`, `null` and `undefined` leave the attribute off; `true`
+ * writes a bare presence attribute.
+ *
+ * @param values - Axis name to prop value, e.g. `{ size, iconOnly }`; camelCase keys map to kebab-case attributes.
+ * @param attrs - The pass-through attributes the consumer supplied, read for `data-<axis>` fallbacks.
+ * @returns A `data-<axis>` record to spread after the pass-through attributes.
+ */
+export declare function appearanceAttrs(values: Record<string, AppearanceValue>, attrs?: Record<string, unknown>): Record<string, string | undefined>;

package/dist/utils/appearance.js

@@ -0,0 +1,2 @@
+'use client';
+function i(r,o={}){let n={};for(let a of Object.keys(r)){let t=`data-${a.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`)}`,e=r[a]??o[t];e==null||e===!1?n[t]=void 0:n[t]=e===!0?"":String(e)}return n}export{i as appearanceAttrs};

package/dist/utils/arrow-keys.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var i=(e,t)=>{for(var n in t)o(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of s(t))!a.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(l=u(t,r))||l.enumerable});return e};var b=e=>E(o({},"__esModule",{value:!0}),e);var T={};i(T,{arrowKeyBelongsToDescendant:()=>A});module.exports=b(T);var c=new Set(["textbox","searchbox","listbox","slider","spinbutton","menu","menubar","tablist","grid","treegrid","tree","combobox","radiogroup"]),f=new Set(["INPUT","SELECT","TEXTAREA","AUDIO","VIDEO"]);function m(e){if(f.has(e.tagName)||e.isContentEditable)return!0;let t=e.getAttribute("role");return t!==null&&c.has(t)}function A(e,t){if(!(e instanceof Element))return!1;let n=e;for(;n!==null&&n!==t;){if(m(n))return!0;n=n.parentElement}return!1}0&&(module.exports={arrowKeyBelongsToDescendant});

package/dist/{carousel/arrowKeys.d.cts → utils/arrow-keys.d.cts}

@@ -1,6 +1,5 @@
 /**
- * Whether the carousel root should ignore this Arrow keypress — leaving the key
- * to whatever inside the carousel owns it, with no `preventDefault`.
+ * Whether the carousel root should ignore this Arrow keypress, leaving it to whatever inside the carousel owns it.
  *
  * @param target the event's target
  * @param root the carousel root the handler is attached to

package/dist/{carousel/arrowKeys.d.ts → utils/arrow-keys.d.ts}

@@ -1,6 +1,5 @@
 /**
- * Whether the carousel root should ignore this Arrow keypress — leaving the key
- * to whatever inside the carousel owns it, with no `preventDefault`.
+ * Whether the carousel root should ignore this Arrow keypress, leaving it to whatever inside the carousel owns it.
  *
  * @param target the event's target
  * @param root the carousel root the handler is attached to

package/dist/utils/arrow-keys.js

@@ -0,0 +1,2 @@
+'use client';
+var r=new Set(["textbox","searchbox","listbox","slider","spinbutton","menu","menubar","tablist","grid","treegrid","tree","combobox","radiogroup"]),o=new Set(["INPUT","SELECT","TEXTAREA","AUDIO","VIDEO"]);function l(e){if(o.has(e.tagName)||e.isContentEditable)return!0;let n=e.getAttribute("role");return n!==null&&r.has(n)}function u(e,n){if(!(e instanceof Element))return!1;let t=e;for(;t!==null&&t!==n;){if(l(t))return!0;t=t.parentElement}return!1}export{u as arrowKeyBelongsToDescendant};

package/dist/utils/calendar-locale.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var s=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},d=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of h(t))!p.call(e,o)&&o!==n&&s(e,o,{get:()=>t[o],enumerable:!(r=D(t,o))||r.enumerable});return e};var w=e=>d(s({},"__esModule",{value:!0}),e);var F={};y(F,{clearLocaleNameCache:()=>k,formatDateLabel:()=>W,formatMonthLabel:()=>L,formatYear:()=>m,formatYearRange:()=>N,getLocaleWeekStartsOn:()=>I,getMonthNames:()=>b,getWeekDayNames:()=>x,resolveLocale:()=>a});module.exports=w(F);var c=new Date(2024,0,7),g=new Map;function u(e,t){let n=g.get(e);if(n)return n;let r=t();return g.set(e,r),r}function a(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function b(e,t="long"){let n=a(e);return u(`m|${n}|${t}`,()=>{let r=new Intl.DateTimeFormat(n,{month:t,timeZone:"UTC"});return Array.from({length:12},(o,i)=>r.format(Date.UTC(2024,i,15)))})}function x(e,t=0,n="short"){let r=a(e),o=u(`w|${r}|${n}`,()=>{let l=new Intl.DateTimeFormat(r,{weekday:n});return Array.from({length:7},($,f)=>l.format(new Date(c.getFullYear(),c.getMonth(),c.getDate()+f)))}),i=(t%7+7)%7;return o.slice(i).concat(o.slice(0,i))}function I(e){try{let t=new Intl.Locale(a(e)),n=(t.getWeekInfo?.()??t.weekInfo)?.firstDay;if(typeof n=="number")return n%7}catch{}return 0}function L(e,t){return e.toLocaleDateString(a(t),{month:"long",year:"numeric"})}function m(e,t){return new Intl.NumberFormat(a(t),{useGrouping:!1}).format(e)}function N(e,t,n){return`${m(e,n)} \u2013 ${m(t,n)}`}function W(e,t){return e.toLocaleDateString(a(t),{weekday:"long",year:"numeric",month:"long",day:"numeric"})}function k(){g.clear()}0&&(module.exports={clearLocaleNameCache,formatDateLabel,formatMonthLabel,formatYear,formatYearRange,getLocaleWeekStartsOn,getMonthNames,getWeekDayNames,resolveLocale});

package/dist/{calendar/locale.d.cts → utils/calendar-locale.d.cts}

@@ -1,8 +1,3 @@
-/**
- * Locale-derived month and weekday names for {@link Calendar}, built on `Intl`
- * with no bundled tables or new dependencies. Duplicated per framework to avoid
- * a shared runtime package.
- */
 /** How much of a name to render — the `Intl.DateTimeFormat` `month`/`weekday` widths. */
 export type NameWidth = 'narrow' | 'short' | 'long';
 /** The runtime's own locale, used whenever `locale` is omitted — matches what `toLocaleDateString()` would pick. */
@@ -26,24 +21,15 @@ export declare function getMonthNames(locale?: string, width?: NameWidth): strin
  * ```
  */
 export declare function getWeekDayNames(locale?: string, weekStartsOn?: number, width?: NameWidth): string[];
-/**
- * The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday),
- * read from `Intl.Locale`'s week info where the engine exposes it.
- *
- * Falls back to `0` (Sunday) on engines without `getWeekInfo`/`weekInfo`.
- */
+/** The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday), read from `Intl.Locale`'s week info, falling back to `0` on engines without it. */
 export declare function getLocaleWeekStartsOn(locale?: string): 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /** The month heading label for `month` (e.g. `'janvier 2026'`), formatted for `locale`. */
 export declare function formatMonthLabel(month: Date, locale?: string): string;
-/**
- * A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) —
- * the month view's heading and grid name. Uses `Intl.NumberFormat` with
- * grouping off rather than `String(year)`, since a grouped `2,026` is not a year.
- */
+/** A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) using `Intl.NumberFormat` with grouping off, since a grouped `2,026` is not a year. */
 export declare function formatYear(year: number, locale?: string): string;
 /** A year page label (e.g. `'2020 – 2039'`), the year view's heading and grid name. */
 export declare function formatYearRange(start: number, end: number, locale?: string): string;
 /** A full, spoken-friendly date label (e.g. `'Monday, January 5, 2026'`) for live-region announcements. */
 export declare function formatDateLabel(date: Date, locale?: string): string;
-/** @internal Drops every memoized name list. Only needed by tests that switch locales in one process. */
+/** @internal Drops every memoized name list. */
 export declare function clearLocaleNameCache(): void;

package/dist/{calendar/locale.d.ts → utils/calendar-locale.d.ts}

@@ -1,8 +1,3 @@
-/**
- * Locale-derived month and weekday names for {@link Calendar}, built on `Intl`
- * with no bundled tables or new dependencies. Duplicated per framework to avoid
- * a shared runtime package.
- */
 /** How much of a name to render — the `Intl.DateTimeFormat` `month`/`weekday` widths. */
 export type NameWidth = 'narrow' | 'short' | 'long';
 /** The runtime's own locale, used whenever `locale` is omitted — matches what `toLocaleDateString()` would pick. */
@@ -26,24 +21,15 @@ export declare function getMonthNames(locale?: string, width?: NameWidth): strin
  * ```
  */
 export declare function getWeekDayNames(locale?: string, weekStartsOn?: number, width?: NameWidth): string[];
-/**
- * The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday),
- * read from `Intl.Locale`'s week info where the engine exposes it.
- *
- * Falls back to `0` (Sunday) on engines without `getWeekInfo`/`weekInfo`.
- */
+/** The first day of the week `locale` uses (`0` = Sunday … `6` = Saturday), read from `Intl.Locale`'s week info, falling back to `0` on engines without it. */
 export declare function getLocaleWeekStartsOn(locale?: string): 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /** The month heading label for `month` (e.g. `'janvier 2026'`), formatted for `locale`. */
 export declare function formatMonthLabel(month: Date, locale?: string): string;
-/**
- * A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) —
- * the month view's heading and grid name. Uses `Intl.NumberFormat` with
- * grouping off rather than `String(year)`, since a grouped `2,026` is not a year.
- */
+/** A bare year formatted for `locale` (e.g. `'2026'`, `'٢٠٢٦'` in `ar-EG`) using `Intl.NumberFormat` with grouping off, since a grouped `2,026` is not a year. */
 export declare function formatYear(year: number, locale?: string): string;
 /** A year page label (e.g. `'2020 – 2039'`), the year view's heading and grid name. */
 export declare function formatYearRange(start: number, end: number, locale?: string): string;
 /** A full, spoken-friendly date label (e.g. `'Monday, January 5, 2026'`) for live-region announcements. */
 export declare function formatDateLabel(date: Date, locale?: string): string;
-/** @internal Drops every memoized name list. Only needed by tests that switch locales in one process. */
+/** @internal Drops every memoized name list. */
 export declare function clearLocaleNameCache(): void;

package/dist/utils/calendar-locale.js

@@ -0,0 +1,2 @@
+'use client';
+var s=new Date(2024,0,7),c=new Map;function m(t,e){let n=c.get(t);if(n)return n;let r=e();return c.set(t,r),r}function o(t){return t??new Intl.DateTimeFormat().resolvedOptions().locale}function D(t,e="long"){let n=o(t);return m(`m|${n}|${e}`,()=>{let r=new Intl.DateTimeFormat(n,{month:e,timeZone:"UTC"});return Array.from({length:12},(i,a)=>r.format(Date.UTC(2024,a,15)))})}function h(t,e=0,n="short"){let r=o(t),i=m(`w|${r}|${n}`,()=>{let u=new Intl.DateTimeFormat(r,{weekday:n});return Array.from({length:7},(f,l)=>u.format(new Date(s.getFullYear(),s.getMonth(),s.getDate()+l)))}),a=(e%7+7)%7;return i.slice(a).concat(i.slice(0,a))}function p(t){try{let e=new Intl.Locale(o(t)),n=(e.getWeekInfo?.()??e.weekInfo)?.firstDay;if(typeof n=="number")return n%7}catch{}return 0}function y(t,e){return t.toLocaleDateString(o(e),{month:"long",year:"numeric"})}function g(t,e){return new Intl.NumberFormat(o(e),{useGrouping:!1}).format(t)}function d(t,e,n){return`${g(t,n)} \u2013 ${g(e,n)}`}function w(t,e){return t.toLocaleDateString(o(e),{weekday:"long",year:"numeric",month:"long",day:"numeric"})}function b(){c.clear()}export{b as clearLocaleNameCache,w as formatDateLabel,y as formatMonthLabel,g as formatYear,d as formatYearRange,p as getLocaleWeekStartsOn,D as getMonthNames,h as getWeekDayNames,o as resolveLocale};