@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/motion/DragTracker.js

@@ -0,0 +1,43 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/DragTracker.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet:
+// - DOM-agnostic split for `@rivetjs/cdk/motion`: upstream reads `clientX` / `clientY` + `timeStamp` from mouse /
+//   touch events; here the caller passes the point (px along its axis) and the time (ms) — `pointerDown(point,
+//   time)`, `pointerMove(point, time)`, `pointerUp(time)`. Same math: a 170 ms log interval restarts the velocity
+//   window on long moves; `pointerUp` returns the flick force in px/ms (0 when the last move is older than the
+//   interval or |force| <= 0.1). The carousel engine's `DragTracker.ts` adapts events onto it.
+import { mathAbs } from "./utils.js";
+/** Drag velocity tracker (embla DragTracker): numbers in (pointer position, time stamp), diff / flick force out. */
+export function VelocityTracker() {
+    const logInterval = 170;
+    let startEvent;
+    let lastEvent;
+    function pointerDown(point, time) {
+        startEvent = { point, time };
+        lastEvent = startEvent;
+        return point;
+    }
+    function pointerMove(point, time) {
+        const diff = point - lastEvent.point;
+        const expired = time - startEvent.time > logInterval;
+        lastEvent = { point, time };
+        if (expired)
+            startEvent = lastEvent;
+        return diff;
+    }
+    function pointerUp(time) {
+        if (!startEvent || !lastEvent)
+            return 0;
+        const diffDrag = lastEvent.point - startEvent.point;
+        const diffTime = time - startEvent.time;
+        const expired = time - lastEvent.time > logInterval;
+        const force = diffDrag / diffTime;
+        const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
+        return isFlick ? force : 0;
+    }
+    const self = {
+        pointerDown,
+        pointerMove,
+        pointerUp,
+    };
+    return self;
+}

package/motion/Limit.d.ts

@@ -0,0 +1,12 @@
+export type LimitType = {
+    min: number;
+    max: number;
+    length: number;
+    constrain: (n: number) => number;
+    reachedAny: (n: number) => boolean;
+    reachedMax: (n: number) => boolean;
+    reachedMin: (n: number) => boolean;
+    removeOffset: (n: number) => number;
+};
+/** A closed range `[min, max]`: clamp (`constrain`), bound checks, and `removeOffset` (wrap into the range, for loops). */
+export declare function Limit(min?: number, max?: number): LimitType;

package/motion/Limit.js

@@ -0,0 +1,37 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/Limit.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: verbatim (TypeScript module specifiers, formatting); part of the DOM-agnostic `@rivetjs/cdk/motion` core.
+import { mathAbs } from "./utils.js";
+/** A closed range `[min, max]`: clamp (`constrain`), bound checks, and `removeOffset` (wrap into the range, for loops). */
+export function Limit(min = 0, max = 0) {
+    const length = mathAbs(min - max);
+    function reachedMin(n) {
+        return n < min;
+    }
+    function reachedMax(n) {
+        return n > max;
+    }
+    function reachedAny(n) {
+        return reachedMin(n) || reachedMax(n);
+    }
+    function constrain(n) {
+        if (!reachedAny(n))
+            return n;
+        return reachedMin(n) ? min : max;
+    }
+    function removeOffset(n) {
+        if (!length)
+            return n;
+        return n - length * Math.ceil((n - max) / length);
+    }
+    const self = {
+        length,
+        max,
+        min,
+        constrain,
+        reachedAny,
+        reachedMax,
+        reachedMin,
+        removeOffset,
+    };
+    return self;
+}

package/motion/Motion1D.d.ts

@@ -0,0 +1,38 @@
+import { type AnimationLoopType, type FrameSchedulerType } from "./Animations.js";
+import { type ScrollBodyType } from "./ScrollBody.js";
+import { type Vector1DType } from "./Vector1d.js";
+export type Motion1DOptionsType = {
+    /** Start value (location = target = rendered value). */
+    value: number;
+    /** Base duration (embla `duration`, fixed steps; 0 = instant). @default 25 */
+    duration?: number;
+    /** Base friction (embla engine constant). @default 0.68 */
+    friction?: number;
+    /** Called every frame with the interpolated value. */
+    render: (value: number) => void;
+    /** Called on the frame the value settles (embla `settle` event). */
+    onSettle?: () => void;
+    /** Frame scheduler (default: `globalThis.requestAnimationFrame` / `cancelAnimationFrame`). */
+    scheduler?: FrameSchedulerType;
+};
+export type Motion1DType = {
+    location: Vector1DType;
+    previousLocation: Vector1DType;
+    offsetLocation: Vector1DType;
+    target: Vector1DType;
+    scrollBody: ScrollBodyType;
+    animation: AnimationLoopType;
+    /** Animate to `value` with the base duration / friction (embla `scrollTo`), or `jump` there (duration 0). */
+    to: (value: number, jump?: boolean) => void;
+    /** Move the target by `delta` while held (embla drag: `useFriction(0.3).useDuration(0.75)`, `target.add`). */
+    drag: (delta: number) => void;
+    /** Hold the value (pointer down): the loop keeps running while held, even when settled. */
+    hold: (held: boolean) => void;
+    /** Whether the rendered value reached the target. */
+    settled: () => boolean;
+    /** Current rendered value. */
+    get: () => number;
+    /** Stop the loop. */
+    stop: () => void;
+};
+export declare function Motion1D(options: Motion1DOptionsType): Motion1DType;

package/motion/Motion1D.js

@@ -0,0 +1,72 @@
+// Composition of embla-carousel's motion parts (packages/embla-carousel/src/components/Engine.ts `update` / `render`
+// + Animations.ts + ScrollBody.ts + Vector1d.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: one animated 1-D value wired exactly like embla's engine loop, without a carousel: per fixed step
+// `scrollBody.seek()`; per frame `offset = location * alpha + previous * (1 - alpha)` → `render(offset)`; the loop
+// stops (and `onSettle` runs) once `settled()` and not `held` (embla: `!dragHandler.pointerDown()`). Numbers in,
+// numbers out — the caller applies the transform.
+import { AnimationLoop } from "./Animations.js";
+import { ScrollBody } from "./ScrollBody.js";
+import { Vector1D } from "./Vector1d.js";
+export function Motion1D(options) {
+    const { value, duration = 25, friction = 0.68, render, onSettle, scheduler } = options;
+    const location = Vector1D(value);
+    const previousLocation = Vector1D(value);
+    const offsetLocation = Vector1D(value);
+    const target = Vector1D(value);
+    const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+    let held = false;
+    const animation = AnimationLoop(() => {
+        scrollBody.seek();
+    }, (alpha) => {
+        const hasSettled = scrollBody.settled();
+        const hasSettledAndIdle = hasSettled && !held;
+        if (hasSettledAndIdle)
+            animation.stop();
+        offsetLocation.set(location.get() * alpha + previousLocation.get() * (1 - alpha));
+        render(offsetLocation.get());
+        if (hasSettledAndIdle)
+            onSettle?.();
+    }, scheduler);
+    function to(next, jump) {
+        scrollBody.useBaseFriction().useDuration(jump === true ? 0 : duration);
+        const distance = next - target.get();
+        target.add(distance);
+        if (!distance)
+            return;
+        if (scrollBody.duration()) {
+            animation.start();
+        }
+        else {
+            animation.update();
+            animation.render(1);
+            animation.update();
+        }
+    }
+    function drag(delta) {
+        scrollBody.useFriction(0.3).useDuration(0.75);
+        animation.start();
+        target.add(delta);
+    }
+    function hold(next) {
+        held = next;
+        if (next) {
+            scrollBody.useFriction(0).useDuration(0);
+            target.set(location);
+        }
+    }
+    const self = {
+        location,
+        previousLocation,
+        offsetLocation,
+        target,
+        scrollBody,
+        animation,
+        to,
+        drag,
+        hold,
+        settled: () => scrollBody.settled(),
+        get: () => offsetLocation.get(),
+        stop: () => animation.stop(),
+    };
+    return self;
+}

package/motion/ScrollBody.d.ts

@@ -0,0 +1,13 @@
+import type { Vector1DType } from "./Vector1d.js";
+export type ScrollBodyType = {
+    direction: () => number;
+    duration: () => number;
+    velocity: () => number;
+    seek: () => ScrollBodyType;
+    settled: () => boolean;
+    useBaseFriction: () => ScrollBodyType;
+    useBaseDuration: () => ScrollBodyType;
+    useFriction: (n: number) => ScrollBodyType;
+    useDuration: (n: number) => ScrollBodyType;
+};
+export declare function ScrollBody(location: Vector1DType, offsetLocation: Vector1DType, previousLocation: Vector1DType, target: Vector1DType, baseDuration: number, baseFriction: number): ScrollBodyType;

package/motion/ScrollBody.js

@@ -0,0 +1,75 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/ScrollBody.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: verbatim (TypeScript module specifiers, formatting); part of the DOM-agnostic `@rivetjs/cdk/motion` core.
+// The integrator: each `seek()` (one fixed time step) moves `location` toward `target` —
+// `velocity += (target - location) / duration; velocity *= friction; location += velocity` — or jumps there when
+// `duration` is 0. `settled()` compares the rendered (`offsetLocation`) value with `target` (< 0.001).
+import { mathSign, mathAbs } from "./utils.js";
+export function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
+    let scrollVelocity = 0;
+    let scrollDirection = 0;
+    let scrollDuration = baseDuration;
+    let scrollFriction = baseFriction;
+    let rawLocation = location.get();
+    let rawLocationPrevious = 0;
+    function seek() {
+        const displacement = target.get() - location.get();
+        const isInstant = !scrollDuration;
+        let scrollDistance = 0;
+        if (isInstant) {
+            scrollVelocity = 0;
+            previousLocation.set(target);
+            location.set(target);
+            scrollDistance = displacement;
+        }
+        else {
+            previousLocation.set(location);
+            scrollVelocity += displacement / scrollDuration;
+            scrollVelocity *= scrollFriction;
+            rawLocation += scrollVelocity;
+            location.add(scrollVelocity);
+            scrollDistance = rawLocation - rawLocationPrevious;
+        }
+        scrollDirection = mathSign(scrollDistance);
+        rawLocationPrevious = rawLocation;
+        return self;
+    }
+    function settled() {
+        const diff = target.get() - offsetLocation.get();
+        return mathAbs(diff) < 0.001;
+    }
+    function duration() {
+        return scrollDuration;
+    }
+    function direction() {
+        return scrollDirection;
+    }
+    function velocity() {
+        return scrollVelocity;
+    }
+    function useBaseDuration() {
+        return useDuration(baseDuration);
+    }
+    function useBaseFriction() {
+        return useFriction(baseFriction);
+    }
+    function useDuration(n) {
+        scrollDuration = n;
+        return self;
+    }
+    function useFriction(n) {
+        scrollFriction = n;
+        return self;
+    }
+    const self = {
+        direction,
+        duration,
+        velocity,
+        seek,
+        settled,
+        useBaseFriction,
+        useBaseDuration,
+        useFriction,
+        useDuration,
+    };
+    return self;
+}

package/motion/Vector1d.d.ts

@@ -0,0 +1,8 @@
+export type Vector1DType = {
+    get: () => number;
+    set: (n: Vector1DType | number) => void;
+    add: (n: Vector1DType | number) => void;
+    subtract: (n: Vector1DType | number) => void;
+};
+/** A mutable 1-D value (location, target, …) shared by reference between the motion parts. */
+export declare function Vector1D(initialValue: number): Vector1DType;

package/motion/Vector1d.js

@@ -0,0 +1,29 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/Vector1d.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: verbatim (TypeScript module specifiers, formatting); part of the DOM-agnostic `@rivetjs/cdk/motion` core.
+import { isNumber } from "./utils.js";
+/** A mutable 1-D value (location, target, …) shared by reference between the motion parts. */
+export function Vector1D(initialValue) {
+    let value = initialValue;
+    function get() {
+        return value;
+    }
+    function set(n) {
+        value = normalizeInput(n);
+    }
+    function add(n) {
+        value += normalizeInput(n);
+    }
+    function subtract(n) {
+        value -= normalizeInput(n);
+    }
+    function normalizeInput(n) {
+        return isNumber(n) ? n : n.get();
+    }
+    const self = {
+        get,
+        set,
+        add,
+        subtract,
+    };
+    return self;
+}

package/motion/index.d.ts

@@ -0,0 +1,8 @@
+export { AnimationLoop, type AnimationLoopType, type FrameSchedulerType } from "./Animations.js";
+export { ScrollBody, type ScrollBodyType } from "./ScrollBody.js";
+export { Vector1D, type Vector1DType } from "./Vector1d.js";
+export { Limit, type LimitType } from "./Limit.js";
+export { VelocityTracker, type VelocityTrackerType } from "./DragTracker.js";
+export { DragRelease, snapForceBoost, freeForceBoost, type DragReleaseType } from "./DragRelease.js";
+export { Motion1D, type Motion1DOptionsType, type Motion1DType } from "./Motion1D.js";
+export { deltaAbs, factorAbs, mathAbs, mathSign } from "./utils.js";

package/motion/index.js

@@ -0,0 +1,12 @@
+// `@rivetjs/cdk/motion`: embla-carousel's motion core (v8.6.0, MIT, © David Jerleke), DOM-agnostic and reusable —
+// fixed-timestep loop with render interpolation (`AnimationLoop`), duration / friction integrator (`ScrollBody`),
+// 1-D vectors (`Vector1D`), range helper (`Limit`), drag velocity tracker (`VelocityTracker`), release physics
+// (`DragRelease`) and their composition as one animated value (`Motion1D`). Used by `@rivetjs/cdk/carousel`.
+export { AnimationLoop } from "./Animations.js";
+export { ScrollBody } from "./ScrollBody.js";
+export { Vector1D } from "./Vector1d.js";
+export { Limit } from "./Limit.js";
+export { VelocityTracker } from "./DragTracker.js";
+export { DragRelease, snapForceBoost, freeForceBoost } from "./DragRelease.js";
+export { Motion1D } from "./Motion1D.js";
+export { deltaAbs, factorAbs, mathAbs, mathSign } from "./utils.js";

package/motion/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function isNumber(subject: unknown): subject is number;
+export declare function mathAbs(n: number): number;
+export declare function mathSign(n: number): number;
+export declare function deltaAbs(valueB: number, valueA: number): number;
+export declare function factorAbs(valueB: number, valueA: number): number;

package/motion/utils.js

@@ -0,0 +1,23 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/utils.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: the DOM-free math helpers the motion core needs (`isNumber`, `mathAbs`, `mathSign`, `deltaAbs`,
+// `factorAbs`); the carousel engine's `utils.ts` re-exports them next to its DOM / array helpers.
+export function isNumber(subject) {
+    return typeof subject === "number";
+}
+export function mathAbs(n) {
+    return Math.abs(n);
+}
+export function mathSign(n) {
+    return Math.sign(n);
+}
+export function deltaAbs(valueB, valueA) {
+    return mathAbs(valueB - valueA);
+}
+export function factorAbs(valueB, valueA) {
+    if (valueB === 0 || valueA === 0)
+        return 0;
+    if (mathAbs(valueB) <= mathAbs(valueA))
+        return 0;
+    const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
+    return mathAbs(diff / valueB);
+}

package/native-select/index.d.ts

@@ -0,0 +1,46 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import type { InputRenderProps } from "../input/index.jsx";
+import { type ClassNameOrFunction, type ContextValue, type AccessorProps, type HTMLProps, type RefValue, type SlotProps, type StyleOrFunction } from "../slots/index.jsx";
+import type { HoverEvents } from "../utils/types.js";
+export type { InputRenderProps } from "../input/index.jsx";
+export interface NativeSelectProps extends Omit<AccessorProps<HTMLProps<"select">, "autoFocus">, "children" | "value">, HoverEvents, SlotProps, DOMRenderProps<"select", InputRenderProps> {
+    /** The `<option>` / `<optgroup>` children. */
+    children?: Content;
+    /** The current value (standalone; inside a TextField the field's value wins). A plain value or an accessor. */
+    value?: string | (() => string);
+    /**
+     * The CSS class of the element. A function may be provided to compute the class based on component state.
+     *
+     * @default "rv-NativeSelect"
+     */
+    class?: ClassNameOrFunction<InputRenderProps>;
+    /** The inline style of the element. A function may be provided to compute the style based on component state. */
+    style?: StyleOrFunction<InputRenderProps>;
+    ref?: RefValue<HTMLSelectElement>;
+}
+/** Props for the selects inside a component, optionally per `slot` (none provide it in the cdk: fields use `TextAreaContext`). */
+export declare const NativeSelectContext: import("@rivetjs/reactivity").Context<ContextValue<NativeSelectProps, HTMLSelectElement>>;
+/** The select's current value for its options (`selected`). */
+export declare const NativeSelectValueContext: import("@rivetjs/reactivity").Context<{
+    value?: () => string | undefined;
+}>;
+/** A native `<select>` field part with hover / focus / validation state. */
+export declare function NativeSelect(props: NativeSelectProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+export interface NativeSelectOptionProps extends Omit<HTMLProps<"option">, "children" | "selected"> {
+    /** The submitted value (and the key the select's value is compared with). */
+    value: string;
+    children?: Content;
+    class?: string;
+    ref?: RefValue<HTMLOptionElement>;
+}
+/** An `<option>`; `selected` follows the enclosing select's value. */
+export declare function NativeSelectOption(props: NativeSelectOptionProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface NativeSelectOptGroupProps extends Omit<HTMLProps<"optgroup">, "children"> {
+    label: string;
+    children?: Content;
+    class?: string;
+    ref?: RefValue<HTMLOptGroupElement>;
+}
+/** An `<optgroup>`. */
+export declare function NativeSelectOptGroup(props: NativeSelectOptGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/native-select/index.jsx

@@ -0,0 +1,99 @@
+// Rivet addition (no React Aria / Angular CDK counterpart): a styled native `<select>` as a field part, built like RAC
+// `TextArea` (`../text-area/index.tsx`): hover / focus / focus-visible state (`data-hovered`, `data-focused`,
+// `data-focus-visible`, `data-disabled`, `data-invalid`), props merged with the field context, accessor render props.
+// - Field: inside a cdk `TextField` the select takes the field's `TextAreaContext` bag (id, `name`, `required` /
+//   `aria-required`, `disabled`, `aria-invalid`, `aria-describedby` slot ids, `value` accessor, `input` / `change` / `invalid` /
+//   focus handlers: the same attributes RAC gives a textarea, no `type` / `pattern`), so Label `for`, Description / FieldError
+//   ids, native + aria validation, Form `validationErrors` and form reset work as for a text field. Standalone it is a plain
+//   `<select>` with the state attributes.
+// - `NativeSelectOption` marks `selected` from the select's current value (`NativeSelectValueContext`): the server markup shows
+//   the value (a `<select>` has no `value` attribute in HTML), and the client keeps the property in sync through the `value`
+//   binding. `NativeSelectOptGroup` = `<optgroup>`.
+// - Used by `@rivetjs/ui/native-select` (feature set inspired by HeroUI Pro's public docs).
+import { createContext, untrack, useContext } from "@rivetjs/reactivity";
+import { hasLive, liveAt, liveOmit, readOnce } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { Provider } from "@rivetjs/runtime/dom";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { read } from "../interactions/utils.js";
+import {} from "../utils/render.js";
+import { TextAreaContext } from "../text-area/index.jsx";
+import { resumableContext, contextProps, renderProps, } from "../slots/index.jsx";
+import { isHiddenPart } from "../collections/hidden.js";
+import { slotProbing } from "#server";
+/** Props for the selects inside a component, optionally per `slot` (none provide it in the cdk: fields use `TextAreaContext`). */
+export const NativeSelectContext = resumableContext(createContext({}, { id: "rv-native-select" }));
+/** The select's current value for its options (`selected`). */
+export const NativeSelectValueContext = resumableContext(createContext({}, { id: "rv-native-select-value" }));
+/** A native `<select>` field part with hover / focus / validation state. */
+export function NativeSelect(props) {
+    // RAC createHideableComponent: nothing in the collection build pass (its context providers are absent).
+    if (slotProbing || isHiddenPart())
+        return null;
+    const [own, ownRef] = contextProps(props, props.ref, NativeSelectContext);
+    // Inside a TextField: the field's select bag (= its textarea bag).
+    const [merged, ref] = contextProps(own, ownRef, TextAreaContext);
+    // Live props (P5): read-once keys untracked, the rest forwarded unread (`liveOmit`); class / style from a live view.
+    const live = hasLive(merged);
+    const { onHoverStart, onHoverEnd, onHoverChange, class: className, style, slot, render, children, } = readOnce(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "class", "style", "slot", "render", "children"]);
+    const rest = liveOmit(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "class", "style", "slot", "render", "children"]);
+    // Context values may be accessors (fields provide reactive `aria-invalid`, `value`, …): read in bindings.
+    const disabledValue = liveAt(rest, "disabled");
+    const invalidValue = liveAt(rest, "aria-invalid");
+    const valueValue = liveAt(rest, "value");
+    const disabled = () => !!read(disabledValue);
+    const isInvalid = () => {
+        const v = read(invalidValue);
+        return !!v && v !== "false";
+    };
+    const hover = hoverProps({ onHoverStart, onHoverEnd, onHoverChange }, rest);
+    const isHovered = hover.isHovered;
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing({ autoFocus: untrack(() => read(rest.autoFocus)) });
+    const values = { isHovered, isFocused, isFocusVisible, isDisabled: disabled, isInvalid };
+    const rp = renderProps({ class: className, style: style, values, defaultClassName: "rv-NativeSelect" }, live ? liveRenderProps(merged, ["class", "style"]) : undefined);
+    // Field bags written for a textarea: drop the text-only attributes a select does not take.
+    for (const key of ["placeholder", "maxLength", "minLength", "readOnly", "autoCapitalize", "autoCorrect", "spellCheck", "inputMode", "enterKeyHint"])
+        delete rest[key];
+    const domProps = mergeProps(rest, focusProps, hover.hoverProps);
+    const valueContext = { value: () => read(valueValue) };
+    const s = slot ?? undefined;
+    if (render)
+        return render({
+            ...domProps,
+            slot: s,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-focused": () => isFocused() || undefined,
+            "data-disabled": () => disabled() || undefined,
+            "data-hovered": () => isHovered() || undefined,
+            "data-focus-visible": () => isFocusVisible() || undefined,
+            "data-invalid": () => isInvalid() || undefined,
+            children: () => (<Provider token={NativeSelectValueContext} value={valueContext}>
+            {children}
+          </Provider>),
+        }, values);
+    return (<select {...domProps} slot={s} ref={ref} class={rp.class()} style={rp.style()} data-focused={isFocused() || undefined} data-disabled={disabled() || undefined} data-hovered={isHovered() || undefined} data-focus-visible={isFocusVisible() || undefined} data-invalid={isInvalid() || undefined}>
+      <Provider token={NativeSelectValueContext} value={valueContext}>
+        {children}
+      </Provider>
+    </select>);
+}
+/** An `<option>`; `selected` follows the enclosing select's value. */
+export function NativeSelectOption(props) {
+    const ctx = useContext(NativeSelectValueContext);
+    const current = ctx.value;
+    const { value, children, ref, ...rest } = props;
+    return (<option {...rest} ref={ref} value={value} selected={current ? current() === value : undefined}>
+      {children}
+    </option>);
+}
+/** An `<optgroup>`. */
+export function NativeSelectOptGroup(props) {
+    const { children, ref, ...rest } = props;
+    return (<optgroup {...rest} ref={ref}>
+      {children}
+    </optgroup>);
+}

package/navigation-tree/index.d.ts

@@ -0,0 +1,43 @@
+import { type ContextValue, type RenderProps, type StyleRenderProps } from "../slots/index.jsx";
+import { type TreeHeaderProps, type TreeItemProps, type TreeItemRenderProps, type TreeProps, type TreeRenderProps, type TreeSectionProps } from "../tree/index.jsx";
+import { NavigationTreeItemStateContext } from "../tree/navigation-context.jsx";
+export { NavigationTreeItemStateContext };
+type MaybeAccessor<T> = T | (() => T);
+/** RAC `NavigationTreeContext`: props for the NavigationTrees inside a component. */
+export declare const NavigationTreeContext: import("@rivetjs/reactivity").Context<ContextValue<NavigationTreeProps<any>, HTMLDivElement>>;
+export interface NavigationTreeRenderProps extends Pick<TreeRenderProps, "isEmpty" | "isFocused" | "isFocusVisible" | "state"> {
+}
+export interface NavigationTreeProps<T> extends Omit<TreeProps<T>, "selectionMode" | "selectionBehavior" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "disallowEmptySelection" | "disabledBehavior" | "keyboardNavigationBehavior" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "renderEmptyState" | "onAction" | "class" | "style">, StyleRenderProps<NavigationTreeRenderProps> {
+    /** The route that is currently selected, matched against each item's `href` (a value or an accessor / Signal). */
+    selectedRoute?: MaybeAccessor<string | null | undefined>;
+}
+/** A NavigationTree provides users with a way to navigate a nested, hierarchical set of links. */
+export declare function NavigationTree<T>(inProps: NavigationTreeProps<T>): unknown;
+export interface NavigationTreeItemRenderProps extends TreeItemRenderProps {
+    /** Whether this item is the current route (its `href` matches the NavigationTree's `selectedRoute`). @selector [data-current] */
+    isCurrent: () => boolean;
+    /** Whether this item is an ancestor of the current-route item (at any level, expanded or not). @selector [data-current-ancestor] */
+    isCurrentAncestor: () => boolean;
+}
+export interface NavigationTreeItemProps<T = object> extends Omit<TreeItemProps<T>, "class" | "style" | "onAction" | "allowsArrowNavigation" | "value">, StyleRenderProps<NavigationTreeItemRenderProps> {
+    /** The content of the item along with any nested children (static items or a Collection). */
+    children: unknown;
+}
+/** A NavigationTreeItem represents an individual item in a NavigationTree. */
+export declare function NavigationTreeItem<T extends object>(props: NavigationTreeItemProps<T>): unknown;
+export interface NavigationTreeItemContentRenderProps extends NavigationTreeItemRenderProps {
+}
+export interface NavigationTreeItemContentProps {
+    /** The children of the component. A function may be provided to alter the children based on component state. */
+    children: RenderProps<NavigationTreeItemContentRenderProps>["children"];
+}
+/** The content of a NavigationTreeItem: its `Link` gets the item's href, `aria-current` and focus tracking. */
+export declare function NavigationTreeItemContent(props: NavigationTreeItemContentProps): unknown;
+export interface NavigationTreeSectionProps<T> extends Omit<TreeSectionProps<T>, "value"> {
+}
+/** A NavigationTreeSection represents a section within a NavigationTree. */
+export declare function NavigationTreeSection<T extends object>(props: NavigationTreeSectionProps<T>): unknown;
+export interface NavigationTreeHeaderProps extends TreeHeaderProps {
+}
+/** A NavigationTreeHeader renders the header of a NavigationTreeSection. */
+export declare function NavigationTreeHeader(props: NavigationTreeHeaderProps): unknown;