@northstar-js/react 0.1.0 → 0.2.0

package/dist/internal/expand.d.ts

@@ -0,0 +1,17 @@
+export type Expand = boolean | 'always';
+export interface ExpandLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** The label sits after the icon (`start`, default) or before it (`end`): the gap opens on that side. */
+    side?: 'start' | 'end';
+}
+export declare function ExpandLabel({ side, className, children, ...rest }: ExpandLabelProps): import("react/jsx-runtime").JSX.Element;
+/** Props a control spreads to become an expand host. Nothing when `expand` is false. */
+export declare function expandHost(expand: Expand | undefined): {
+    className?: string;
+    'data-expand'?: 'hover' | 'always';
+};
+/** The icon slot of an expand host. */
+export declare function ExpandIcon({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=expand.d.ts.map

package/dist/internal/expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../src/internal/expand.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7E,yGAAyG;IACzG,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAM7F;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,CAGjH;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAMpG"}

package/dist/internal/expand.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The one icon-first expand primitive. A control that carries `ns-expand-host`
+// shows its icon; its ExpandLabel is collapsed to zero width and eases open
+// (grid-template-columns 0fr -> 1fr, so the text is measured by layout, never
+// clipped with an ellipsis) on hover, on keyboard focus (:focus-visible, or a
+// focused child), when selected or expanded, and always on touch screens.
+// The label stays in the accessibility tree the whole time, so it names the
+// control. `data-expand="always"` keeps it open.
+import { cx } from './util.js';
+export function ExpandLabel({ side = 'start', className, children, ...rest }) {
+    return (_jsx("span", { ...rest, className: cx('ns-reveal-label', 'ns-expand', side === 'end' && 'ns-expand--end', className), children: _jsx("span", { className: "ns-reveal-label__inner ns-expand__inner", children: children }) }));
+}
+/** Props a control spreads to become an expand host. Nothing when `expand` is false. */
+export function expandHost(expand) {
+    if (!expand)
+        return {};
+    return { className: 'ns-expand-host', 'data-expand': expand === 'always' ? 'always' : 'hover' };
+}
+/** The icon slot of an expand host. */
+export function ExpandIcon({ children, className }) {
+    return (_jsx("span", { className: cx('ns-expand-icon', className), "aria-hidden": "true", children: children }));
+}
+//# sourceMappingURL=expand.js.map

package/dist/internal/expand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.js","sourceRoot":"","sources":["../../src/internal/expand.tsx"],"names":[],"mappings":";AAAA,+EAA+E;AAC/E,4EAA4E;AAC5E,8EAA8E;AAC9E,8EAA8E;AAC9E,0EAA0E;AAC1E,4EAA4E;AAC5E,iDAAiD;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAS/B,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAoB;IAC5F,OAAO,CACL,kBAAU,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,WAAW,EAAE,IAAI,KAAK,KAAK,IAAI,gBAAgB,EAAE,SAAS,CAAC,YAC1G,eAAM,SAAS,EAAC,yCAAyC,YAAE,QAAQ,GAAQ,GACtE,CACR,CAAC;AACJ,CAAC;AAED,wFAAwF;AACxF,MAAM,UAAU,UAAU,CAAC,MAA0B;IACnD,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IACvB,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAClG,CAAC;AAED,uCAAuC;AACvC,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAqD;IACnG,OAAO,CACL,eAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,iBAAc,MAAM,YACjE,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/internal/interaction.d.ts

@@ -0,0 +1,21 @@
+export interface PointerOptions {
+    /** Pull the element toward the pointer by up to this many px (magnetic). 0 disables. */
+    magnetic?: number;
+}
+/**
+ * Tracks the pointer over an element, rAF-throttled, and writes
+ * `--ns-mx` / `--ns-my` (px from the top-left, for spotlights and specular
+ * highlights), `--ns-pointer-x` / `--ns-pointer-y` (unitless, -1 at the
+ * left/top edge to 1 at the right/bottom, for the spin finish's turning
+ * sweep) and, when magnetic, `--ns-mag-x` / `--ns-mag-y`. Touch is
+ * ignored; the pointer effects are a hover affordance and keyboard focus gets
+ * an equivalent centred highlight from CSS.
+ */
+export declare function usePointerTracking<T extends HTMLElement>(enabled: boolean | ((el: T) => boolean), options?: PointerOptions): React.RefCallback<T>;
+/**
+ * Keeps a layer mounted after `open` turns false until its exit animation
+ * (`[data-state='closed']` in CSS) has played. With no animation — reduced
+ * motion, forced zero durations, or no stylesheet — it unmounts at once.
+ */
+export declare function usePresence(open: boolean, ref: React.RefObject<HTMLElement | null>): boolean;
+//# sourceMappingURL=interaction.d.ts.map

package/dist/internal/interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../src/internal/interaction.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,OAAO,CAAC,EAAE,OAAO,GAAE,cAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CA2DrJ;AAWD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,OAAO,CAuB5F"}

package/dist/internal/interaction.js

@@ -0,0 +1,129 @@
+'use client';
+// The interaction layer's only JavaScript: pointer tracking for spotlights and
+// magnetic controls, and a presence hook that lets overlays play an exit
+// animation. Everything writes CSS custom properties or attributes straight to
+// the element, so pointer movement never re-renders React.
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const raf = typeof window !== 'undefined' && window.requestAnimationFrame
+    ? (cb) => window.requestAnimationFrame(cb)
+    : (cb) => setTimeout(cb, 16);
+const caf = typeof window !== 'undefined' && window.cancelAnimationFrame ? (id) => window.cancelAnimationFrame(id) : (id) => clearTimeout(id);
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Tracks the pointer over an element, rAF-throttled, and writes
+ * `--ns-mx` / `--ns-my` (px from the top-left, for spotlights and specular
+ * highlights), `--ns-pointer-x` / `--ns-pointer-y` (unitless, -1 at the
+ * left/top edge to 1 at the right/bottom, for the spin finish's turning
+ * sweep) and, when magnetic, `--ns-mag-x` / `--ns-mag-y`. Touch is
+ * ignored; the pointer effects are a hover affordance and keyboard focus gets
+ * an equivalent centred highlight from CSS.
+ */
+export function usePointerTracking(enabled, options = {}) {
+    const magnetic = options.magnetic ?? 0;
+    const cleanup = useRef(null);
+    // A predicate is decided once, when the element mounts (e.g. "am I on glass?").
+    const test = useRef(enabled);
+    test.current = enabled;
+    const key = typeof enabled === 'function' ? 'test' : enabled;
+    return useCallback((el) => {
+        cleanup.current?.();
+        cleanup.current = null;
+        const on = typeof test.current === 'function' ? !!el && test.current(el) : test.current;
+        if (!el || !on)
+            return;
+        let frame = 0;
+        let last = null;
+        const flush = () => {
+            frame = 0;
+            if (!last)
+                return;
+            const r = el.getBoundingClientRect();
+            const x = last.clientX - r.left;
+            const y = last.clientY - r.top;
+            el.style.setProperty('--ns-mx', `${x.toFixed(1)}px`);
+            el.style.setProperty('--ns-my', `${y.toFixed(1)}px`);
+            if (r.width <= 0 || r.height <= 0)
+                return;
+            const dx = Math.max(-1, Math.min(1, (x / r.width - 0.5) * 2));
+            const dy = Math.max(-1, Math.min(1, (y / r.height - 0.5) * 2));
+            el.style.setProperty('--ns-pointer-x', dx.toFixed(3));
+            el.style.setProperty('--ns-pointer-y', dy.toFixed(3));
+            if (magnetic > 0 && !prefersReducedMotion()) {
+                el.style.setProperty('--ns-mag-x', `${(dx * magnetic).toFixed(2)}px`);
+                el.style.setProperty('--ns-mag-y', `${(dy * magnetic).toFixed(2)}px`);
+            }
+        };
+        const onMove = (e) => {
+            if (e.pointerType === 'touch')
+                return;
+            last = e;
+            el.setAttribute('data-pointer', '');
+            if (!frame)
+                frame = raf(flush);
+        };
+        const onLeave = () => {
+            last = null;
+            if (frame)
+                caf(frame);
+            frame = 0;
+            el.removeAttribute('data-pointer');
+            el.style.removeProperty('--ns-pointer-x');
+            el.style.removeProperty('--ns-pointer-y');
+            el.style.removeProperty('--ns-mag-x');
+            el.style.removeProperty('--ns-mag-y');
+        };
+        el.addEventListener('pointermove', onMove, { passive: true });
+        el.addEventListener('pointerleave', onLeave);
+        cleanup.current = () => {
+            el.removeEventListener('pointermove', onMove);
+            el.removeEventListener('pointerleave', onLeave);
+            if (frame)
+                caf(frame);
+        };
+    }, [key, magnetic]);
+}
+function longestAnimation(el) {
+    const cs = getComputedStyle(el);
+    if (!cs.animationName || cs.animationName === 'none')
+        return 0;
+    const parse = (s) => (s.trim().endsWith('ms') ? parseFloat(s) : parseFloat(s) * 1000) || 0;
+    const durations = (cs.animationDuration || '0s').split(',').map(parse);
+    const delays = (cs.animationDelay || '0s').split(',').map(parse);
+    return Math.max(0, ...durations.map((d, i) => d + (delays[i] ?? 0)));
+}
+/**
+ * Keeps a layer mounted after `open` turns false until its exit animation
+ * (`[data-state='closed']` in CSS) has played. With no animation — reduced
+ * motion, forced zero durations, or no stylesheet — it unmounts at once.
+ */
+export function usePresence(open, ref) {
+    const [mounted, setMounted] = useState(open);
+    if (open && !mounted)
+        setMounted(true);
+    useIsoLayoutEffect(() => {
+        if (open || !mounted)
+            return;
+        const el = ref.current;
+        const ms = el ? longestAnimation(el) : 0;
+        if (!el || ms <= 0) {
+            setMounted(false);
+            return;
+        }
+        const done = () => setMounted(false);
+        const onEnd = (e) => {
+            if (e.target === el)
+                done();
+        };
+        el.addEventListener('animationend', onEnd);
+        const t = setTimeout(done, ms + 60);
+        return () => {
+            el.removeEventListener('animationend', onEnd);
+            clearTimeout(t);
+        };
+    }, [open, mounted]);
+    return open || mounted;
+}
+//# sourceMappingURL=interaction.js.map

package/dist/internal/interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../../src/internal/interaction.ts"],"names":[],"mappings":"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"}

package/dist/motion.d.ts

@@ -0,0 +1,36 @@
+export declare function prefersReducedMotion(): boolean;
+/** True where the View Transitions API is available and motion is allowed. */
+export declare function canViewTransition(): boolean;
+/**
+ * Runs a React state update inside `document.startViewTransition` where it is
+ * supported (flushing synchronously so the new DOM is captured), and plainly
+ * everywhere else. With `scope`, only that element is named for the
+ * transition (as `name`, default `ns-step`) and only while it runs, so several
+ * instances on one page never clash. Returns true when a view transition ran.
+ */
+export declare function withViewTransition(update: () => void, scope?: HTMLElement | null, name?: string): boolean;
+/** A stable callback version of `withViewTransition`. */
+export declare function useViewTransition(): (update: () => void, scope?: HTMLElement | null, name?: string) => boolean;
+type RevealTag = 'div' | 'section' | 'article' | 'li' | 'ul' | 'ol' | 'span' | 'header' | 'footer';
+export interface RevealProps extends React.HTMLAttributes<HTMLElement> {
+    /** Stagger the direct children in sequence instead of revealing as one block. */
+    stagger?: boolean;
+    /** Extra delay before the reveal, in ms. */
+    delay?: number;
+    /** How the content arrives. Default `rise`. */
+    effect?: 'rise' | 'fade' | 'scale';
+    /** Reveal again each time it re-enters the viewport. Default false. */
+    repeat?: boolean;
+    /** Fraction of the element visible before it reveals. Default 0.15. */
+    threshold?: number;
+    as?: RevealTag;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Fades and rises its content in when it scrolls into view. The server HTML
+ * and no-JS render are fully visible: the element is only held back once the
+ * observer is attached. Under reduced motion it shows at once.
+ */
+export declare function Reveal({ stagger, delay, effect, repeat, threshold, as: Tag, className, style, ref, ...rest }: RevealProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=motion.d.ts.map

package/dist/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.tsx"],"names":[],"mappings":"AAQA,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAID,8EAA8E;AAC9E,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,SAAY,GAAG,OAAO,CAgB5G;AAED,yDAAyD;AACzD,wBAAgB,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAE9G;AAED,KAAK,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEnG,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAe,EAAE,KAAS,EAAE,MAAe,EAAE,MAAc,EAAE,SAAgB,EAAE,EAAE,EAAE,GAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAkCrK"}

package/dist/motion.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Motion utilities without a motion library: a scroll-linked Reveal on
+// IntersectionObserver, and a View Transitions wrapper for step and tab
+// changes. Both do nothing visible under prefers-reduced-motion.
+import { useCallback, useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import { cx, mergeRefs } from './internal/util.js';
+export function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/** True where the View Transitions API is available and motion is allowed. */
+export function canViewTransition() {
+    return typeof document !== 'undefined' && typeof document.startViewTransition === 'function' && !prefersReducedMotion();
+}
+/**
+ * Runs a React state update inside `document.startViewTransition` where it is
+ * supported (flushing synchronously so the new DOM is captured), and plainly
+ * everywhere else. With `scope`, only that element is named for the
+ * transition (as `name`, default `ns-step`) and only while it runs, so several
+ * instances on one page never clash. Returns true when a view transition ran.
+ */
+export function withViewTransition(update, scope, name = 'ns-step') {
+    if (!canViewTransition()) {
+        update();
+        return false;
+    }
+    if (scope)
+        scope.style.setProperty('view-transition-name', name);
+    try {
+        const t = document.startViewTransition(() => flushSync(update));
+        const clear = () => scope?.style.removeProperty('view-transition-name');
+        t.finished.then(clear, clear);
+    }
+    catch {
+        scope?.style.removeProperty('view-transition-name');
+        update();
+        return false;
+    }
+    return true;
+}
+/** A stable callback version of `withViewTransition`. */
+export function useViewTransition() {
+    return useCallback((update, scope, name) => withViewTransition(update, scope, name), []);
+}
+/**
+ * Fades and rises its content in when it scrolls into view. The server HTML
+ * and no-JS render are fully visible: the element is only held back once the
+ * observer is attached. Under reduced motion it shows at once.
+ */
+export function Reveal({ stagger = false, delay = 0, effect = 'rise', repeat = false, threshold = 0.15, as: Tag = 'div', className, style, ref, ...rest }) {
+    const node = useRef(null);
+    useEffect(() => {
+        const el = node.current;
+        if (!el)
+            return;
+        if (typeof IntersectionObserver === 'undefined' || prefersReducedMotion()) {
+            el.setAttribute('data-reveal', 'in');
+            return;
+        }
+        el.setAttribute('data-reveal', 'pending');
+        const io = new IntersectionObserver((entries) => {
+            for (const e of entries) {
+                if (e.isIntersecting) {
+                    el.setAttribute('data-reveal', 'in');
+                    if (!repeat)
+                        io.disconnect();
+                }
+                else if (repeat)
+                    el.setAttribute('data-reveal', 'pending');
+            }
+        }, { threshold, rootMargin: '0px 0px -8% 0px' });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [repeat, threshold]);
+    return (_jsx(Tag, { ...rest, ref: mergeRefs(ref, (el) => {
+            node.current = el;
+        }), className: cx('ns-reveal', `ns-reveal--${effect}`, stagger && 'ns-reveal--stagger', className), style: delay ? { '--ns-reveal-delay': `${delay}ms`, ...style } : style }));
+}
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sourceRoot":"","sources":["../src/motion.tsx"],"names":[],"mappings":"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"}

package/dist/navigation.d.ts

@@ -1,17 +1,35 @@
+import type { Material } from './provider.js';
+import { type Expand } from './internal/expand.js';
+/** `line` (default): a glacier underline that slides between tabs. `glass` / `solid`: a sliding pill behind the label. */
+export type TabsIndicator = 'line' | Material;
 export interface TabsRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: 'horizontal' | 'vertical';
+    /** How the selected tab is marked. Default `line`. */
+    indicator?: TabsIndicator;
+    /** Cross-fade panels with the View Transitions API where supported. Default false. */
+    transition?: boolean;
+    /** Sliding-pill tabs (`glass`, `solid`) are pills by default; `rounded` opts out to tight corners. */
+    shape?: 'pill' | 'rounded';
 }
-declare function TabsRoot({ value, defaultValue, onValueChange, orientation, className, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
-declare function TabsList({ className, onKeyDown, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+declare function TabsRoot({ value, defaultValue, onValueChange, orientation, indicator, transition, shape, className, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, onKeyDown, children, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
     label?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
+    /** Leading icon (decorative). */
+    icon?: React.ReactNode;
+    /**
+     * Icon tabs: with `icon`, `true` shows the icon and eases the label open on
+     * hover, keyboard focus and while selected (always on touch). `always`
+     * keeps it open. Default false.
+     */
+    expand?: Expand;
 }
-declare function TabsTrigger({ value, className, onClick, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ value, icon, expand, className, onClick, children, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
 export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     /** Keep the panel mounted when hidden. */
@@ -28,11 +46,20 @@ export declare const Tabs: {
 export interface BreadcrumbItem {
     label: React.ReactNode;
     href?: string;
+    /** Shown in place of the label while the crumb is collapsed. */
+    icon?: React.ReactNode;
 }
 export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
     items: BreadcrumbItem[];
+    /**
+     * Collapse the crumbs between the first and the current one to their icon
+     * (or an ellipsis); each eases open to its full label on hover and keyboard
+     * focus, and every crumb opens while focus is in the trail. The full labels
+     * stay in the accessibility tree. Default false.
+     */
+    collapse?: boolean;
 }
-export declare function Breadcrumbs({ items, className, ...rest }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumbs({ items, collapse, className, ...rest }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
     pageCount: number;
     page?: number;
@@ -40,14 +67,24 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
     onPageChange?: (page: number) => void;
     /** Pages shown either side of the current one. */
     siblings?: number;
+    /**
+     * Previous and next are icon-first: the arrow shows and "Previous page" /
+     * "Next page" ease open on hover and focus. `always` keeps the words, false
+     * keeps arrows only (named by aria-label). Default true.
+     */
+    expand?: Expand;
+    /** Page and step buttons are pills (single pages are circles); `rounded` opts out. */
+    shape?: 'pill' | 'rounded';
 }
-export declare function Pagination({ pageCount, page, defaultPage, onPageChange, siblings, className, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ pageCount, page, defaultPage, onPageChange, siblings, expand, shape, className, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     label?: string;
+    /** Icon rail: items show their icon and the rail eases open to full labels on hover and focus. */
+    collapsed?: boolean;
     header?: React.ReactNode;
     footer?: React.ReactNode;
 }
-export declare function Sidebar({ label, header, footer, className, children, ...rest }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ label, collapsed, header, footer, className, children, ...rest }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface SidebarSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: React.ReactNode;
 }

package/dist/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.tsx"],"names":[],"mappings":"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"}

package/dist/navigation.js

@@ -1,10 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef } from 'react';
 import { useNorthstar } from './provider.js';
 import { rovingKeyDown } from './internal/layers.js';
+import { withViewTransition } from './motion.js';
 import { cx, useControllable } from './internal/util.js';
 import { ChevronLeft, ChevronRight } from './internal/icons.js';
+import { ExpandIcon, ExpandLabel, expandHost } from './internal/expand.js';
+const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 const TabsContext = createContext(null);
 function useTabs(name) {
     const v = useContext(TabsContext);
@@ -12,29 +15,81 @@ function useTabs(name) {
         throw new Error(`<${name}> must be used inside <Tabs.Root>`);
     return v;
 }
-function TabsRoot({ value, defaultValue, onValueChange, orientation = 'horizontal', className, ...rest }) {
-    const [v, setV] = useControllable(value, defaultValue ?? '', onValueChange);
+function TabsRoot({ value, defaultValue, onValueChange, orientation = 'horizontal', indicator = 'line', transition = false, shape = 'pill', className, ...rest }) {
+    const [v, setRaw] = useControllable(value, defaultValue ?? '', onValueChange);
+    const root = useRef(null);
+    const setV = (next) => {
+        if (next === v)
+            return;
+        if (transition)
+            withViewTransition(() => setRaw(next), root.current?.querySelector(':scope > .ns-tabs__content, :scope .ns-tabs__content'));
+        else
+            setRaw(next);
+    };
     const baseId = `ns-tabs-${useId().replace(/:/g, '')}`;
-    return (_jsx(TabsContext.Provider, { value: { value: v, setValue: setV, baseId, orientation }, children: _jsx("div", { ...rest, className: cx('ns-tabs', `ns-tabs--${orientation}`, className) }) }));
+    return (_jsx(TabsContext.Provider, { value: { value: v, setValue: setV, baseId, orientation, indicator }, children: _jsx("div", { ...rest, ref: root, className: cx('ns-tabs', `ns-tabs--${orientation}`, transition && 'ns-tabs--vt', indicator !== 'line' && 'ns-tabs--pill', indicator === 'glass' && 'ns-tabs--glass', shape === 'rounded' && 'ns-tabs--rounded', className) }) }));
 }
-function TabsList({ className, onKeyDown, ...rest }) {
+/**
+ * Measures the selected tab and moves the indicator with a transform written
+ * straight to the element: no re-render, and a spring transition in CSS. Until
+ * it has measured (server HTML, no layout) each selected tab draws its own mark.
+ */
+function useIndicator(list, mark, value) {
+    useIsoLayoutEffect(() => {
+        const el = list.current;
+        const ind = mark.current;
+        if (!el || !ind)
+            return;
+        let frame = 0;
+        const place = () => {
+            const tab = el.querySelector('[role="tab"][aria-selected="true"]');
+            if (!tab || tab.offsetWidth === 0) {
+                el.removeAttribute('data-indicator');
+                return;
+            }
+            ind.style.width = `${tab.offsetWidth}px`;
+            ind.style.height = `${tab.offsetHeight}px`;
+            ind.style.transform = `translate(${tab.offsetLeft}px, ${tab.offsetTop}px)`;
+            // The first placement jumps into position; later ones slide.
+            if (!el.hasAttribute('data-indicator')) {
+                el.setAttribute('data-indicator', 'placed');
+                frame = requestAnimationFrame(() => el.setAttribute('data-indicator', 'ready'));
+            }
+        };
+        place();
+        const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(place);
+        ro?.observe(el);
+        // Icon-first tabs change width as their labels ease open; follow them.
+        el.querySelectorAll('[role="tab"]').forEach((t) => ro?.observe(t));
+        return () => {
+            ro?.disconnect();
+            cancelAnimationFrame(frame);
+        };
+    }, [value]);
+}
+function TabsList({ className, onKeyDown, children, ...rest }) {
     const ctx = useTabs('Tabs.List');
     const { label, ...props } = rest;
-    return (_jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": ctx.orientation, ...props, className: cx('ns-tabs__list', className), onKeyDown: (e) => {
+    const list = useRef(null);
+    const mark = useRef(null);
+    useIndicator(list, mark, ctx.value);
+    return (_jsxs("div", { role: "tablist", "aria-label": label, "aria-orientation": ctx.orientation, ...props, ref: list, className: cx('ns-tabs__list', className), onKeyDown: (e) => {
             onKeyDown?.(e);
             const t = rovingKeyDown(e, '[role="tab"]', ctx.orientation);
             const v = t?.getAttribute('data-value');
             if (v)
                 ctx.setValue(v);
-        } }));
+        }, children: [_jsx("span", { ref: mark, className: "ns-tabs__indicator", "aria-hidden": "true" }), children] }));
 }
-function TabsTrigger({ value, className, onClick, ...rest }) {
+function TabsTrigger({ value, icon, expand = false, className, onClick, children, ...rest }) {
     const ctx = useTabs('Tabs.Trigger');
     const selected = ctx.value === value;
-    return (_jsx("button", { type: "button", role: "tab", id: `${ctx.baseId}-tab-${value}`, "aria-selected": selected, "aria-controls": `${ctx.baseId}-panel-${value}`, tabIndex: selected ? 0 : -1, "data-value": value, ...rest, className: cx('ns-tabs__trigger', className), onClick: (e) => {
+    const hasIcon = icon !== undefined && icon !== null && icon !== false;
+    const host = hasIcon ? expandHost(expand) : {};
+    return (_jsxs("button", { type: "button", role: "tab", id: `${ctx.baseId}-tab-${value}`, "aria-selected": selected, "aria-controls": `${ctx.baseId}-panel-${value}`, tabIndex: selected ? 0 : -1, "data-value": value, "data-expand": host['data-expand'], ...rest, className: cx('ns-tabs__trigger', hasIcon && 'ns-tabs__trigger--icon', host.className, className), onClick: (e) => {
             onClick?.(e);
             ctx.setValue(value);
-        } }));
+        }, children: [hasIcon && _jsx(ExpandIcon, { className: "ns-tabs__icon", children: icon }), host.className ? _jsx(ExpandLabel, { className: "ns-tabs__label", children: children }) : children] }));
 }
 function TabsContent({ value, forceMount = false, className, ...rest }) {
     const ctx = useTabs('Tabs.Content');
@@ -45,11 +100,14 @@ function TabsContent({ value, forceMount = false, className, ...rest }) {
 }
 /** Tabs with automatic activation: arrow keys move and select, Home/End jump. */
 export const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };
-export function Breadcrumbs({ items, className, ...rest }) {
+export function Breadcrumbs({ items, collapse = false, className, ...rest }) {
     const { messages } = useNorthstar();
-    return (_jsx("nav", { "aria-label": messages.breadcrumbs, ...rest, className: cx('ns-breadcrumbs', className), children: _jsx("ol", { children: items.map((item, i) => {
+    return (_jsx("nav", { "aria-label": messages.breadcrumbs, ...rest, className: cx('ns-breadcrumbs', collapse && 'ns-breadcrumbs--collapse', className), children: _jsx("ol", { children: items.map((item, i) => {
                 const last = i === items.length - 1;
-                return (_jsxs("li", { children: [last || !item.href ? (_jsx("span", { "aria-current": last ? 'page' : undefined, children: item.label })) : (_jsx("a", { href: item.href, children: item.label })), !last && (_jsx("span", { className: "ns-breadcrumbs__sep", "aria-hidden": "true", children: "/" }))] }, i));
+                const folded = collapse && i > 0 && !last;
+                const body = folded ? (_jsxs(_Fragment, { children: [_jsx(ExpandIcon, { className: "ns-breadcrumbs__icon", children: item.icon ?? _jsx("span", { className: "ns-breadcrumbs__more", children: "\u2026" }) }), _jsx(ExpandLabel, { children: item.label })] })) : (item.label);
+                const host = folded ? expandHost(true) : {};
+                return (_jsxs("li", { className: host.className, "data-expand": host['data-expand'], children: [last || !item.href ? (_jsx("span", { "aria-current": last ? 'page' : undefined, children: body })) : (_jsx("a", { href: item.href, children: body })), !last && (_jsx("span", { className: "ns-breadcrumbs__sep", "aria-hidden": "true", children: "/" }))] }, i));
             }) }) }));
 }
 function range(page, count, siblings) {
@@ -67,21 +125,30 @@ function range(page, count, siblings) {
         out.push(count);
     return out;
 }
-export function Pagination({ pageCount, page, defaultPage, onPageChange, siblings = 1, className, ...rest }) {
+export function Pagination({ pageCount, page, defaultPage, onPageChange, siblings = 1, expand = true, shape = 'pill', className, ...rest }) {
     const { messages } = useNorthstar();
     const [p, setP] = useControllable(page, defaultPage ?? 1, onPageChange);
     const go = (n) => setP(Math.min(pageCount, Math.max(1, n)));
-    return (_jsxs("nav", { "aria-label": messages.pagination, ...rest, className: cx('ns-pagination', className), children: [_jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-icon-button", "aria-label": messages.previousPage, disabled: p <= 1, onClick: () => go(p - 1), children: _jsx(ChevronLeft, {}) }), _jsx("ul", { children: range(p, pageCount, siblings).map((n, i) => n === 'gap' ? (_jsx("li", { className: "ns-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`)) : (_jsx("li", { children: _jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-pagination__page", "aria-label": messages.page(n), "aria-current": n === p ? 'page' : undefined, onClick: () => go(n), children: n }) }, n))) }), _jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-icon-button", "aria-label": messages.nextPage, disabled: p >= pageCount, onClick: () => go(p + 1), children: _jsx(ChevronRight, {}) })] }));
+    return (_jsxs("nav", { "aria-label": messages.pagination, ...rest, className: cx('ns-pagination', shape === 'rounded' && 'ns-pagination--rounded', className), children: [_jsx(PageStep, { expand: expand, label: messages.previousPage, disabled: p <= 1, onClick: () => go(p - 1), children: _jsx(ChevronLeft, {}) }), _jsx("ul", { children: range(p, pageCount, siblings).map((n, i) => n === 'gap' ? (_jsx("li", { className: "ns-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`)) : (_jsx("li", { children: _jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-pagination__page", "aria-label": messages.page(n), "aria-current": n === p ? 'page' : undefined, onClick: () => go(n), children: n }) }, n))) }), _jsx(PageStep, { expand: expand, end: true, label: messages.nextPage, disabled: p >= pageCount, onClick: () => go(p + 1), children: _jsx(ChevronRight, {}) })] }));
+}
+function PageStep({ expand, end = false, label, disabled, onClick, children }) {
+    if (!expand) {
+        return (_jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-icon-button", "aria-label": label, disabled: disabled, onClick: onClick, children: children }));
+    }
+    const host = expandHost(expand);
+    const icon = _jsx(ExpandIcon, { children: children });
+    const text = _jsx(ExpandLabel, { side: end ? 'end' : 'start', children: label });
+    return (_jsxs("button", { type: "button", className: cx('ns-button ns-button--ghost ns-size-sm ns-icon-button ns-icon-button--expand ns-button--expand ns-pagination__step', host.className), "data-expand": host['data-expand'], disabled: disabled, onClick: onClick, children: [end ? text : icon, end ? icon : text] }));
 }
-export function Sidebar({ label, header, footer, className, children, ...rest }) {
+export function Sidebar({ label, collapsed = false, header, footer, className, children, ...rest }) {
     const { messages } = useNorthstar();
-    return (_jsxs("nav", { "aria-label": label ?? messages.sidebar, ...rest, className: cx('ns-sidebar', className), children: [header && _jsx("div", { className: "ns-sidebar__header", children: header }), _jsx("div", { className: "ns-sidebar__body", children: children }), footer && _jsx("div", { className: "ns-sidebar__footer", children: footer })] }));
+    return (_jsxs("nav", { "aria-label": label ?? messages.sidebar, ...rest, className: cx('ns-sidebar', collapsed && 'ns-sidebar--collapsed', className), children: [header && _jsx("div", { className: "ns-sidebar__header", children: header }), _jsx("div", { className: "ns-sidebar__body", children: children }), footer && _jsx("div", { className: "ns-sidebar__footer", children: footer })] }));
 }
 export function SidebarSection({ title, className, children, ...rest }) {
     const id = useId();
     return (_jsxs("div", { role: "group", "aria-labelledby": title ? id : undefined, ...rest, className: cx('ns-sidebar__section', className), children: [title && (_jsx("div", { id: id, className: "ns-sidebar__title", children: title })), _jsx("ul", { children: children })] }));
 }
 export function SidebarItem({ icon, active = false, meta, className, children, ...rest }) {
-    return (_jsx("li", { children: _jsxs("a", { "aria-current": active ? 'page' : undefined, ...rest, className: cx('ns-sidebar__item', className), children: [icon && (_jsx("span", { className: "ns-sidebar__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ns-sidebar__text", children: children }), meta !== undefined && _jsx("span", { className: "ns-sidebar__meta", children: meta })] }) }));
+    return (_jsx("li", { children: _jsxs("a", { "aria-current": active ? 'page' : undefined, ...rest, className: cx('ns-sidebar__item', className), children: [icon && (_jsx("span", { className: "ns-sidebar__icon", "aria-hidden": "true", children: icon })), _jsx(ExpandLabel, { className: "ns-sidebar__text", children: children }), meta !== undefined && _jsx("span", { className: "ns-sidebar__meta", children: meta })] }) }));
 }
 //# sourceMappingURL=navigation.js.map