@commercetools/nimbus 3.0.0 → 3.2.0

package/dist/components/splitter/splitter.types.d.ts

@@ -0,0 +1,340 @@
+import { ReactNode, Ref } from 'react';
+import { OmitInternalProps } from '../../type-utils/omit-props.js';
+import { SplitterRootSlotProps, SplitterPaneSlotProps, SplitterHandleSlotProps } from './splitter.slots.js';
+import { SplitterSizeToken } from './utils/size-tokens.js';
+/**
+ * The role of a pane within a `Splitter`. A splitter is always one configurable
+ * `Splitter.Aside` (the pane you size) and one `Splitter.Main` (the pane that
+ * takes the remaining space). The role — not an id — designates which pane is
+ * which, so the single `size` number always refers to the aside.
+ */
+export type SplitterPaneRole = "aside" | "main";
+/**
+ * Aside configuration with defaults applied, as consumed internally by the
+ * handle (clamping, ARIA bounds) and the state machine (collapse). Built from
+ * the flat `minSize` / `maxSize` / `collapsible` / `collapsedSize` props on
+ * `Splitter.Root`.
+ *
+ * The aside is the only configurable pane: there is one boundary, so the aside's
+ * `[minSize, maxSize]` window fully describes it — the main pane's floor is the
+ * complement (`100 − maxSize`) and needs no separate knob.
+ *
+ * @internal
+ */
+export type ResolvedAsideConfig = {
+    /** Aside lower bound (%). */
+    minSize: number;
+    /** Aside upper bound (%). Caps aside growth; main's floor is `100 − maxSize`. */
+    maxSize: number;
+    /** Whether the aside can collapse to `collapsedSize`. */
+    collapsible: boolean;
+    /** Aside size when collapsed (%). */
+    collapsedSize: number;
+};
+/**
+ * Internal context shared between `Splitter.Root`, the pane components
+ * (`Splitter.Aside` / `Splitter.Main`), and `Splitter.Handle`. Carries the
+ * single aside `size`, role-based pane registration, the collapse setter, and
+ * the configuration the handle needs to compute its keyboard behavior and ARIA
+ * attributes. Produced by `useSplitterState`.
+ *
+ * @internal
+ */
+export type SplitterContextValue = {
+    /** Aside pane size as a percentage (0–100); main is `100 − size`. Full-precision float. */
+    size: number;
+    /** Replace the size live (drag ticks). Fires `onSizeChange` only. */
+    setSize: (size: number) => void;
+    /**
+     * Commit a settled size change. With a number (keyboard, collapse, restore)
+     * it writes + fires `onSizeChange` and `onSizeChangeEnd`. With no argument
+     * (drag end) it fires `onSizeChangeEnd` with the current size only.
+     */
+    commitSize: (size?: number) => void;
+    /** Splitter orientation. Determines layout axis and active arrow keys. */
+    orientation: "horizontal" | "vertical";
+    /** Keyboard step in percentage points per arrow-key press. Accepts floats. */
+    keyboardStep: number;
+    /** When true, the handle ignores double-clicks. */
+    isDoubleClickDisabled: boolean;
+    /** When true, the whole splitter is non-interactive (drag, keyboard, collapse). */
+    isDisabled: boolean;
+    /** Resolved aside constraints (clamping + ARIA bounds + collapse). */
+    asideConfig: ResolvedAsideConfig;
+    /** Registered pane roles, in DOM order. */
+    paneOrder: SplitterPaneRole[];
+    /** Map from pane role to the DOM id rendered on that pane element. */
+    paneDomIds: Partial<Record<SplitterPaneRole, string>>;
+    /** Register a pane with the splitter under its role. */
+    registerPane: (role: SplitterPaneRole, domId: string) => void;
+    /** Unregister a pane on unmount. */
+    unregisterPane: (role: SplitterPaneRole) => void;
+    /** Whether the aside is currently collapsed (resolved controlled/uncontrolled). */
+    collapsed: boolean;
+    /** Collapse (`true`) or expand (`false`) the aside. Drives size reconciliation. */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Restore the size derived on mount (double-click). */
+    restoreDefaults: () => void;
+};
+/**
+ * Props for `<Splitter.Root>` — the compound root that owns the single size
+ * dimension for its `Splitter.Aside` + `Splitter.Main` children. The aside is
+ * the pane you configure; the main pane always takes the remainder.
+ */
+export type SplitterRootProps = OmitInternalProps<SplitterRootSlotProps> & {
+    /**
+     * The orientation of the splitter — drives layout direction and which
+     * arrow keys are active on the handle. The handle's `aria-orientation`
+     * reflects this prop (W3C separator semantics).
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Initial size of the **aside** pane as a percentage (0–100). The *dynamic*
+     * seed of the splitter's size: read once on mount, and exactly the shape
+     * `onSizeChange` / `onSizeChangeEnd` emit — so a persisted value round-trips
+     * straight back in here. Subsequent prop changes are ignored; an out-of-range
+     * or omitted value falls back to a 50/50 split. The main pane is `100 − size`.
+     *
+     * For the controlled counterpart, see `size`. Provide one or the other, not both.
+     */
+    defaultSize?: number;
+    /**
+     * Controlled size of the **aside** pane as a percentage (0–100). When
+     * provided, the splitter is controlled for size: it renders this value and
+     * reflects external changes in place (no remount). Control is **settled, not
+     * live** — drag and keyboard update the layout smoothly from internal state
+     * and notify once per interaction via `onSizeChangeEnd`. Wire `onSizeChangeEnd`
+     * and feed the value back to stay controlled — if you don't, the splitter
+     * keeps the last interactive value and behaves as uncontrolled from then on
+     * (no snap-back). Mutually exclusive with `defaultSize`.
+     */
+    size?: number;
+    /**
+     * Aside lower bound as a percentage. Drag/keyboard clamp at this boundary.
+     * @default 0
+     */
+    minSize?: number;
+    /**
+     * Aside upper bound as a percentage — caps how far the aside can grow. The
+     * main pane's floor is the complement (`100 − maxSize`), so this single value
+     * bounds both sides of the one boundary.
+     * @default 100
+     */
+    maxSize?: number;
+    /**
+     * When true, the aside can collapse to `collapsedSize` via Enter on the
+     * focused handle or the controlled `collapsed` prop. Only the aside collapses.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Aside size as a percentage when collapsed.
+     * @default 0
+     */
+    collapsedSize?: number;
+    /**
+     * Notification callback fired on every **resize** update, including each drag
+     * tick (~60Hz). Receives the aside size (0–100). For persistence, prefer
+     * `onSizeChangeEnd`. Collapse and expand do **not** fire this — they only
+     * change the aside's layout and are signalled by `onCollapsedChange`.
+     */
+    onSizeChange?: (size: number) => void;
+    /**
+     * Notification callback fired once when a **resize** interaction settles (drag
+     * end, each keypress, double-click restore). Receives the aside size (0–100).
+     * This is the seam to wire persistence to — no debouncing. Collapse and expand
+     * do **not** fire this (they are signalled by `onCollapsedChange`); only a
+     * genuine resize does, so feeding the value back into a controlled `size`
+     * never restores the collapsed size.
+     */
+    onSizeChangeEnd?: (size: number) => void;
+    /**
+     * Controlled collapsed state of the aside. When provided, the splitter is
+     * controlled for collapse.
+     */
+    collapsed?: boolean;
+    /**
+     * Uncontrolled initial collapsed state of the aside. Used when `collapsed` is
+     * not provided.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Fired whenever the aside collapses (`true`) or expands (`false`). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Percentage delta applied per arrow-key press on the focused handle.
+     * Home/End jump the boundary to the relevant bounds. Accepts floats.
+     * @default 5
+     */
+    keyboardStep?: number;
+    /**
+     * When true, double-click on the handle does not restore the default size.
+     * Drag and keyboard remain active.
+     * @default false
+     */
+    isDoubleClickDisabled?: boolean;
+    /**
+     * When true, the splitter is non-interactive: the handle is removed from the
+     * tab order (`tabIndex={-1}`), gets `aria-disabled`, and ignores drag,
+     * keyboard, and collapse input.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Exactly one `Splitter.Aside` and one `Splitter.Main` with one
+     * `Splitter.Handle` between them. The aside may be placed before or after the
+     * main pane (leading or trailing) — `size` always refers to the aside.
+     */
+    children: ReactNode;
+    /** Ref to the root element. */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for `<Splitter.Aside>` — the configurable pane whose size is driven by
+ * `Splitter.Root`'s `size` / `defaultSize`. Carries only its content and an
+ * optional `id` (analytics/testing); all sizing and collapse configuration
+ * lives on `Splitter.Root`.
+ */
+export type SplitterAsideProps = OmitInternalProps<SplitterPaneSlotProps> & {
+    /** Optional id for the pane element (analytics/testing). Not required. */
+    id?: string;
+    /** Pane content. */
+    children?: ReactNode;
+    /** Ref to the pane element. */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for `<Splitter.Main>` — the primary content pane. It always takes the
+ * space the aside does not (`100 − size`) and is never configured directly.
+ * Carries only its content and an optional `id` (analytics/testing).
+ */
+export type SplitterMainProps = OmitInternalProps<SplitterPaneSlotProps> & {
+    /** Optional id for the pane element (analytics/testing). Not required. */
+    id?: string;
+    /** Pane content. */
+    children?: ReactNode;
+    /** Ref to the pane element. */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for `<Splitter.Handle>` — the interactive separator between the aside
+ * and main panes. The handle takes no per-handle *behaviour* configuration:
+ * resize and collapse behaviour is configured on `<Splitter.Root>`
+ * (`keyboardStep`, `isDoubleClickDisabled`, `isDisabled`). It accepts standard
+ * DOM attributes (`id`, `className`, `data-*`) via the slot, and `aria-label` /
+ * `aria-labelledby` to override the localized default ("Resize panes").
+ */
+export type SplitterHandleProps = OmitInternalProps<SplitterHandleSlotProps> & {
+    /** Accessible label override; defaults to a localized "Resize panes". */
+    "aria-label"?: string;
+    /** Accessible label via reference; takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
+    /** Ref to the handle element. */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * A single size value for the `useResponsiveSplitterSizes` hook. **A bare
+ * `number` is always pixels** — the hook exists to let consumers think in
+ * pixels and translates to the percentage `Splitter.Root` consumes. The three
+ * forms:
+ *
+ * - `number` — pixels (e.g. `320` → `320px`), converted against the measured
+ *   container.
+ * - {@link SplitterSizeToken} — a size token (`3xs`–`8xl`, `breakpoint-*`)
+ *   resolving to pixels, then converted.
+ * - `` `${number}%` `` — a percentage, passed through to the component
+ *   untranslated (no measurement needed).
+ *
+ * Contrast with `Splitter.Root`'s own `size`/`minSize`/… props, which are
+ * percentages: through the hook a bare number is pixels.
+ */
+export type ResponsiveSplitterSizeValue = number | SplitterSizeToken | `${number}%`;
+/**
+ * A container **min-width threshold** key for a responsive size map. A threshold
+ * is a pixel `number` or a size token (resolving to pixels) — never a
+ * percentage (a percentage threshold of the container against itself is
+ * meaningless).
+ */
+export type ResponsiveSplitterSizeThreshold = number | SplitterSizeToken;
+/**
+ * A size configuration for one dimension. Either a single value (applies at
+ * every width) or a map keyed by container min-width thresholds — a min-width
+ * cascade resolved against the splitter's **own** measured width (not the
+ * viewport). The largest threshold `≤` the measured width wins; the smallest
+ * entry also applies below it.
+ *
+ * @example
+ * 320                                  // 320px at every width
+ * "30%"                                // 30% at every width
+ * { 0: 320, 768: "30%", "breakpoint-lg": 400 } // px → %, by container width
+ */
+export type ResponsiveSplitterSizeConfig = ResponsiveSplitterSizeValue | Partial<Record<ResponsiveSplitterSizeThreshold, ResponsiveSplitterSizeValue>>;
+/**
+ * Minimal `localStorage`-like interface the hook persists through. Injectable so
+ * persistence can be redirected (tests, app-scoped stores) or disabled.
+ */
+export type SplitterSizesStorage = {
+    /** Read a previously stored payload string, or `null`. May be wrapped to never throw. */
+    getItem: (key: string) => string | null;
+    /** Write a payload string. May be wrapped to never throw. */
+    setItem: (key: string, value: string) => void;
+};
+/**
+ * Options for {@link useResponsiveSplitterSizes}.
+ */
+export type UseResponsiveSplitterSizesOptions = {
+    /**
+     * Splitter orientation — selects the measured axis (width for `"horizontal"`,
+     * height for `"vertical"`) and is forwarded to `Splitter.Root`.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /** Aside size config (pixels/token/percent, single value or per-threshold map). */
+    size: ResponsiveSplitterSizeConfig;
+    /** Aside lower bound (pixels/token/percent). Translated to a percentage and forwarded. */
+    minSize?: ResponsiveSplitterSizeConfig;
+    /** Aside upper bound (pixels/token/percent). Translated to a percentage and forwarded. */
+    maxSize?: ResponsiveSplitterSizeConfig;
+    /** Aside collapsed size (pixels/token/percent). Static config — never persisted. */
+    collapsedSize?: ResponsiveSplitterSizeConfig;
+    /** Storage key for persistence. When omitted, sizes are not persisted. */
+    persistKey?: string;
+    /** Storage adapter. Defaults to a `localStorage` wrapper that never throws. */
+    storage?: SplitterSizesStorage;
+    /**
+     * Optional passthrough for collapse changes. The hook always wires its own
+     * `onCollapsedChange` (to suppress persistence while collapsed); this is
+     * invoked in addition so consumers can observe collapse too.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+/**
+ * Props produced by {@link useResponsiveSplitterSizes} to spread onto
+ * `Splitter.Root`. All sizes are percentages (the component's native unit);
+ * `size` may be absent for one frame before the container is first measured
+ * with a pixel/token config.
+ */
+export type ResponsiveSplitterRootProps = {
+    /** Controlled aside size (percentage). Absent until resolvable for px/token configs. */
+    size?: number;
+    /** Aside lower bound (percentage). Present only when `minSize` was configured + resolved. */
+    minSize?: number;
+    /** Aside upper bound (percentage). Present only when `maxSize` was configured + resolved. */
+    maxSize?: number;
+    /** Aside collapsed size (percentage). Present only when `collapsedSize` was configured + resolved. */
+    collapsedSize?: number;
+    /** Settle handler — persists and feeds the value back to keep the loop closed. */
+    onSizeChangeEnd: (size: number) => void;
+    /** Collapse tracker (also calls the optional `onCollapsedChange` option). */
+    onCollapsedChange: (collapsed: boolean) => void;
+    /** Ref that attaches the container `ResizeObserver`. Required for px/token/responsive resolution. */
+    ref: Ref<HTMLDivElement>;
+    /** Forwarded orientation. */
+    orientation: "horizontal" | "vertical";
+};
+/** Return value of {@link useResponsiveSplitterSizes}. */
+export type UseResponsiveSplitterSizesResult = {
+    /** Spread onto `Splitter.Root`. */
+    rootProps: ResponsiveSplitterRootProps;
+};

package/dist/components/splitter/utils/clamped-resize.d.ts

@@ -0,0 +1,23 @@
+export type ClampedResizeArgs = {
+    /** Current aside size (%), `0–100`. */
+    size: number;
+    /**
+     * Δ in percentage points applied to the aside size. Accepts floats. The
+     * handle translates its "grow the leading pane" gesture into an aside Δ before
+     * calling (aside leading → `+Δ`; aside trailing → `−Δ`).
+     */
+    delta: number;
+    /** Aside lower bound (%). */
+    minSize: number;
+    /** Aside upper bound (%) — caps aside growth; main's floor is `100 − maxSize`. */
+    maxSize: number;
+};
+/**
+ * Apply Δ to the aside size, clamped into the aside's `[minSize, maxSize]`
+ * window. With one boundary, that window fully describes the constraint: the
+ * main pane's floor is the complement (`100 − maxSize`), enforced here by the
+ * `maxSize` ceiling. The result preserves full float precision (no rounding).
+ *
+ * @see specs/nimbus-splitter/spec.md "Aside size constraints with clamping"
+ */
+export declare const clampedResize: ({ size, delta, minSize, maxSize, }: ClampedResizeArgs) => number;

package/dist/components/splitter/utils/compute-aria-bounds.d.ts

@@ -0,0 +1,25 @@
+import { ResolvedAsideConfig } from '../splitter.types.js';
+/**
+ * Compute the W3C window-splitter ARIA bounds for the boundary, expressed for
+ * the **leading** pane (the handle's `aria-valuenow` tracks the leading pane's
+ * size). The aside's allowed window is `[asideFloor, maxSize]`; the bounds are
+ * mapped onto whichever pane leads:
+ *
+ *   - aside leads → `{ min: asideFloor, max: maxSize }`
+ *   - main leads  → `{ min: 100 − maxSize, max: 100 − asideFloor }`
+ *
+ * Bounds are collapse-aware so `aria-valuenow` stays in range even when the
+ * aside is collapsed below its `minSize`.
+ *
+ * @param asideConfig - Resolved aside constraints.
+ * @param asideLeads - True when the aside is the leading (prev) sibling.
+ * @returns `{ min, max }` for `aria-valuemin` / `aria-valuemax`.
+ *
+ * @example
+ * computeAriaBounds({ minSize: 10, maxSize: 80, collapsible: false, collapsedSize: 0 }, true);
+ * // → { min: 10, max: 80 }
+ */
+export declare const computeAriaBounds: (asideConfig: ResolvedAsideConfig, asideLeads: boolean) => {
+    min: number;
+    max: number;
+};

package/dist/components/splitter/utils/derive-initial-sizes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Derive the initial aside size (%) for a splitter from `defaultSize`. There is
+ * a single initialization path:
+ *   1. Explicit `defaultSize` (clamped into `0–100`, full float precision).
+ *   2. Otherwise an equal 50/50 split.
+ *
+ * @param defaultSize - Optional explicit aside size from `Splitter.Root`.
+ * @returns The aside size as a percentage (`0–100`).
+ *
+ * @example
+ * deriveInitialSize(31.25); // → 31.25
+ * deriveInitialSize(undefined); // → 50
+ */
+export declare const deriveInitialSize: (defaultSize: number | undefined) => number;

package/dist/components/splitter/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { clampedResize } from './clamped-resize.js';
+export type { ClampedResizeArgs } from './clamped-resize.js';
+export { computeAriaBounds } from './compute-aria-bounds.js';
+export { deriveInitialSize } from './derive-initial-sizes.js';
+export { normalizeSize } from './normalize-sizes.js';
+export { sizeEqual } from './sizes-equal.js';

package/dist/components/splitter/utils/normalize-sizes.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Normalize an aside size (a single percentage) into the valid `0–100` range,
+ * with full float precision preserved (no rounding, no `minSize` clamp). Used
+ * both to seed the initial size from `defaultSize` and to reconcile an inbound
+ * controlled `size` prop.
+ *
+ * Returns `null` when the value is not a finite number — letting callers
+ * distinguish "valid size" from "nothing usable" rather than silently inventing
+ * a layout. A finite but out-of-range value is clamped into `[0, 100]`.
+ *
+ * @param size - The aside size as a percentage (e.g. `defaultSize` or `size`).
+ * @returns A percentage in `[0, 100]`, or `null` when the input is unusable.
+ *
+ * @example
+ * normalizeSize(25);   // → 25
+ * normalizeSize(150);  // → 100
+ * normalizeSize(NaN);  // → null
+ */
+export declare const normalizeSize: (size: number | null | undefined) => number | null;

package/dist/components/splitter/utils/responsive-size-storage.d.ts

@@ -0,0 +1,19 @@
+import { SplitterSizesStorage } from '../splitter.types.js';
+import { StoredBand } from './responsive-size.js';
+/** Current persisted-payload schema version. Bump + migrate on shape changes. */
+export declare const STORAGE_VERSION = 1;
+/**
+ * Parse a raw stored payload string into a threshold-keyed band map. Tolerates
+ * absent, corrupt, or older/unknown-version data by returning `null` (the caller
+ * then resolves from config defaults). Versioned so future shape changes can
+ * migrate rather than silently misread.
+ */
+export declare const parseStoredBands: (raw: string | null) => Record<number, StoredBand> | null;
+/** Serialize a band map into the versioned payload string. */
+export declare const serializeStoredBands: (bands: Record<number, StoredBand>) => string;
+/**
+ * A `localStorage`-backed {@link SplitterSizesStorage} that never throws and
+ * no-ops when `localStorage` is unavailable (SSR, privacy mode, quota). Used as
+ * the default adapter.
+ */
+export declare const createLocalStorageAdapter: () => SplitterSizesStorage;

package/dist/components/splitter/utils/responsive-size.d.ts

@@ -0,0 +1,62 @@
+import { ResponsiveSplitterSizeConfig, ResponsiveSplitterSizeValue } from '../splitter.types.js';
+/** Type guard: a `` `${number}%` `` string. */
+export declare const isPercentValue: (value: unknown) => value is `${number}%`;
+/**
+ * Resolve a single size value to a percentage of `containerPx`. A bare `number`
+ * is pixels, a token resolves to pixels, a `"N%"` string passes through. Returns
+ * `null` when unresolvable — a pixel/token value without a usable measurement,
+ * or an unknown token.
+ */
+export declare const valueToPercent: (value: ResponsiveSplitterSizeValue, containerPx: number | null) => number | null;
+/** Clamp a percentage into `[min, max]` (defaults `[0, 100]`). */
+export declare const clampPercent: (percent: number, min?: number, max?: number) => number;
+/** Convert a percentage back to pixels for persistence. */
+export declare const percentToPx: (percent: number, containerPx: number) => number;
+/** A resolved band: the container min-width threshold (px) and its size value. */
+export type SizeBand = {
+    thresholdPx: number;
+    value: ResponsiveSplitterSizeValue;
+};
+/** True when the config is a threshold map rather than a single value. */
+export declare const isThresholdMap: (config: ResponsiveSplitterSizeConfig) => config is Partial<Record<string, ResponsiveSplitterSizeValue>>;
+/**
+ * Resolve a config into bands sorted ascending by threshold. A single value
+ * becomes one band at threshold `0`; map keys resolve to pixels (numeric or
+ * token), and unresolvable keys/values are dropped.
+ */
+export declare const toBands: (config: ResponsiveSplitterSizeConfig) => SizeBand[];
+/** The configured value at a given threshold (for persistence unit lookup). */
+export declare const bandValueAt: (config: ResponsiveSplitterSizeConfig, thresholdPx: number) => ResponsiveSplitterSizeValue | undefined;
+/**
+ * Select the active band for a measured size: the largest threshold `≤`
+ * measured, with the smallest band applying below it. When an `activeThresholdPx`
+ * is supplied, a hysteresis `deadbandPx` keeps the active band until the measured
+ * size crosses the band's boundaries by more than the deadband, preventing
+ * per-frame flapping at a threshold.
+ */
+export declare const selectBand: (bands: SizeBand[], measuredPx: number, opts?: {
+    activeThresholdPx?: number | null;
+    deadbandPx?: number;
+}) => SizeBand | null;
+/** A persisted band value: a pixel width or a percentage. */
+export type StoredBand = {
+    unit: "px" | "pct";
+    value: number;
+};
+/**
+ * Resolve one size dimension to a percentage given the current measurement,
+ * optional hysteresis state, and (for the size dimension) an optional stored
+ * override that takes precedence over the config default for the active band.
+ *
+ * Returns the resolved `percent` (or `null` when not yet resolvable — a
+ * pixel/token value awaiting measurement) and the active band's `thresholdPx`
+ * (the persistence key).
+ */
+export declare const resolveDimension: (config: ResponsiveSplitterSizeConfig, measuredPx: number | null, opts?: {
+    activeThresholdPx?: number | null;
+    deadbandPx?: number;
+    stored?: Record<number, StoredBand> | null;
+}) => {
+    percent: number | null;
+    thresholdPx: number | null;
+};

package/dist/components/splitter/utils/size-tokens.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The curated set of `sizes` design tokens accepted by
+ * `useResponsiveSplitterSizes` as size values and threshold keys: the named
+ * t-shirt scale (`3xs`–`8xl`) and the `breakpoint-*` sizes.
+ *
+ * Hand-authored on purpose — deriving from `keyof typeof themeTokens.size` would
+ * also pull in the numeric scale (`"25"`…`"9600"`), which both pollutes
+ * autocomplete and makes a string like `"400"` ambiguous against the pixel
+ * `number` `400`. A unit test asserts every member still exists in
+ * `themeTokens.size`, so a token rename/removal becomes a build failure rather
+ * than a silent runtime miss.
+ */
+export declare const SPLITTER_SIZE_TOKENS: readonly ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "breakpoint-sm", "breakpoint-md", "breakpoint-lg", "breakpoint-xl", "breakpoint-2xl"];
+/** A size token name accepted by `useResponsiveSplitterSizes`. */
+export type SplitterSizeToken = (typeof SPLITTER_SIZE_TOKENS)[number];
+/** Type guard: is `value` one of the curated splitter size tokens? */
+export declare const isSplitterSizeToken: (value: unknown) => value is SplitterSizeToken;
+/**
+ * Resolve a size token to its pixel value via `themeTokens.size`. Returns `null`
+ * when the token is missing or its value is not a finite pixel number.
+ *
+ * @example
+ * resolveTokenToPx("breakpoint-sm"); // → 480
+ * resolveTokenToPx("md");            // → 448
+ */
+export declare const resolveTokenToPx: (token: SplitterSizeToken) => number | null;

package/dist/components/splitter/utils/sizes-equal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Value equality for two aside sizes, within `SIZE_EPSILON`. Used to
+ * short-circuit the controlled-`size` reconcile effect when the incoming value
+ * already matches internal state (no write, no loop).
+ *
+ * @example
+ * sizeEqual(30, 30);        // → true
+ * sizeEqual(30, 30.0000001); // → true
+ * sizeEqual(30, 31);         // → false
+ */
+export declare const sizeEqual: (a: number | null | undefined, b: number | null | undefined) => boolean;

package/dist/components/splitter.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/use-responsive-splitter-sizes-ljEz_rSy.cjs.js");exports.SPLITTER_SIZE_TOKENS=e.n,exports.Splitter=e.r,exports._SplitterAside=e.o,exports._SplitterHandle=e.i,exports._SplitterMain=e.a,exports._SplitterRoot=e.s,exports.useResponsiveSplitterSizes=e.t;

package/dist/components/splitter.es.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../chunks/use-responsive-splitter-sizes-HQ-JjaLl.esm.js";
+export { n as SPLITTER_SIZE_TOKENS, i as Splitter, r as _SplitterAside, t as _SplitterHandle, e as _SplitterMain, a as _SplitterRoot, o as useResponsiveSplitterSizes };

package/dist/components/stack/index.d.ts

@@ -1,2 +1,2 @@
-export * from './stack';
-export * from './stack.types';
+export * from './stack.js';
+export * from './stack.types.js';

package/dist/components/stack/stack.d.ts

@@ -1,4 +1,4 @@
-import { StackProps } from './stack.types';
+import { StackProps } from './stack.types.js';
 /**
  * # Stack
  *
@@ -9,6 +9,6 @@ import { StackProps } from './stack.types';
  * @see {@link https://nimbus-documentation.vercel.app/components/layout/stack}
  */
 export declare const Stack: {
-    (props: StackProps): import("react/jsx-runtime").JSX.Element;
+    (props: StackProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/components/stack.cjs

@@ -1,2 +1 @@
-"use strict";const t=require("../chunks/stack-CIN13EDn.cjs.js");exports.Stack=t.Stack;
-//# sourceMappingURL=stack.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/stack-MlK9aGs9.cjs.js");exports.Stack=e.t;

package/dist/components/stack.es.js

@@ -1,5 +1,2 @@
-import { S as r } from "../chunks/stack-CoNreM7B.es.js";
-export {
-  r as Stack
-};
-//# sourceMappingURL=stack.es.js.map
+import { t as e } from "../chunks/stack-D0obj5JC.esm.js";
+export { e as Stack };

package/dist/components/steps/components/index.d.ts

@@ -1,14 +1,14 @@
-export { StepsRoot } from './steps.root';
-export { StepsList } from './steps.list';
-export { StepsItem } from './steps.item';
-export { StepsTrigger } from './steps.trigger';
-export { StepsIndicator } from './steps.indicator';
-export { StepsNumber } from './steps.number';
-export { StepsTitle } from './steps.title';
-export { StepsDescription } from './steps.description';
-export { StepsSeparator } from './steps.separator';
-export { StepsContent } from './steps.content';
-export { StepsCompletedContent } from './steps.completed-content';
-export { StepsPrevTrigger } from './steps.prev-trigger';
-export { StepsNextTrigger } from './steps.next-trigger';
-export { StepsStatus } from './steps.status';
+export { StepsRoot } from './steps.root.js';
+export { StepsList } from './steps.list.js';
+export { StepsItem } from './steps.item.js';
+export { StepsTrigger } from './steps.trigger.js';
+export { StepsIndicator } from './steps.indicator.js';
+export { StepsNumber } from './steps.number.js';
+export { StepsTitle } from './steps.title.js';
+export { StepsDescription } from './steps.description.js';
+export { StepsSeparator } from './steps.separator.js';
+export { StepsContent } from './steps.content.js';
+export { StepsCompletedContent } from './steps.completed-content.js';
+export { StepsPrevTrigger } from './steps.prev-trigger.js';
+export { StepsNextTrigger } from './steps.next-trigger.js';
+export { StepsStatus } from './steps.status.js';

package/dist/components/steps/components/steps.completed-content.d.ts

@@ -1,4 +1,4 @@
-import { StepsCompletedContentProps } from '../steps.types';
+import { StepsCompletedContentProps } from '../steps.types.js';
 /**
  * # Steps.CompletedContent
  *
@@ -21,6 +21,6 @@ import { StepsCompletedContentProps } from '../steps.types';
  * @supportsStyleProps
  */
 export declare const StepsCompletedContent: {
-    (props: StepsCompletedContentProps): import("react/jsx-runtime").JSX.Element;
+    (props: StepsCompletedContentProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/components/steps/components/steps.content.d.ts

@@ -1,4 +1,4 @@
-import { StepsContentProps } from '../steps.types';
+import { StepsContentProps } from '../steps.types.js';
 /**
  * # Steps.Content
  *
@@ -18,6 +18,6 @@ import { StepsContentProps } from '../steps.types';
  * @supportsStyleProps
  */
 export declare const StepsContent: {
-    (props: StepsContentProps): import("react/jsx-runtime").JSX.Element;
+    (props: StepsContentProps): import("react").JSX.Element;
     displayName: string;
 };