@xaui/native 0.9.1-alpha.41 → 0.9.1-alpha.42

package/dist/components/slider/index.d.cts

@@ -0,0 +1,284 @@
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, TextStyle, ViewStyle, TextProps, View, Text } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+
+/**
+ * The two conversions a slider is made of, and the rounding between them.
+ *
+ * Pure, because a slider that lands one step off at the far end is a bug you cannot see in
+ * a screenshot — it needs a table of inputs and outputs, which is what a test is.
+ */
+type Range = {
+    min: number;
+    max: number;
+    step: number;
+};
+/** One value, or the two ends of a range. */
+type SliderValue = number | readonly [number, number];
+/** Where a value sits on its track, from 0 at `min` to 1 at `max`. */
+declare function toFraction(value: number, { min, max }: Range): number;
+/**
+ * The value a position on the track means, snapped to the nearest step.
+ *
+ * The snap is computed in **steps from `min`** rather than by rounding the value itself:
+ * a step of 0.1 from a min of 0.05 gives 0.05, 0.15, 0.25 — rounding the value would give
+ * 0.1, 0.2, 0.3 and quietly move every stop.
+ */
+declare function fromFraction(fraction: number, range: Range): number;
+/** The nearest step to a value, never outside the range. */
+declare function snap(value: number, { min, max, step }: Range): number;
+
+type SliderSlot = 'root' | 'output' | 'track' | 'fill' | 'thumb';
+/**
+ * Which way the rail runs. Vertical counts **from the bottom**: a rail whose fill grew
+ * downwards would report a larger value the lower the knob sat, which is the opposite of
+ * what a vertical control means everywhere it appears.
+ */
+type SliderOrientation = 'horizontal' | 'vertical';
+type SliderSize = Exclude<Size, 'xs'>;
+type SliderOwnProps = {
+    children?: ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    /** The tint (R7) — a raw value, never a token. Paints the fill and the thumb. */
+    color?: string;
+    /**
+     * A number for one thumb, a pair for a range. The shape decides how many thumbs there
+     * are, and it comes back out the same way — a slider given `[20, 60]` reports
+     * `[20, 60]`, never `20`.
+     */
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    /** Fires on every step a thumb crosses, including while it is being dragged. */
+    onValueChange?: (value: SliderValue) => void;
+    /** Fires once, when the finger lifts. What a network call belongs on. */
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    /** Set it to `0` for a continuous slider. */
+    step?: number;
+    isDisabled?: boolean;
+};
+type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps> & Omit<ViewStyleProps, keyof SliderOwnProps | keyof ViewProps>;
+type SliderOutputOwnProps = {
+    /**
+     * Given the current value, so the caller can format it. Defaults to the number, or to
+     * the two ends joined by an en dash when the slider is a range.
+     */
+    children?: ReactNode | ((value: SliderValue) => ReactNode);
+};
+type SliderOutputProps = SliderOutputOwnProps & Omit<TextProps, keyof SliderOutputOwnProps> & Omit<TextStyleProps, keyof SliderOutputOwnProps | keyof TextProps>;
+type SliderTrackOwnProps = {
+    children?: ReactNode;
+};
+type SliderTrackProps = SliderTrackOwnProps & Omit<ViewProps, keyof SliderTrackOwnProps> & Omit<ViewStyleProps, keyof SliderTrackOwnProps | keyof ViewProps>;
+/** Neither takes children — where they sit is the root's arithmetic. */
+type SliderFillProps = Omit<ViewProps, 'children'> & ViewStyleProps;
+type SliderThumbProps = Omit<ViewProps, 'children'> & ViewStyleProps & {
+    /**
+     * Which thumb this is. `0` on a plain slider, `0` and `1` on a range — written out
+     * rather than conjured by the track, so a range is two slots you can see and style
+     * apart rather than one that silently became two.
+     */
+    index?: number;
+    /** What a screen reader reads instead of the raw number. */
+    accessibilityValueText?: (value: number) => string;
+};
+/** R5 — resolved style ids and the state the slots read. */
+type SliderContextValue = {
+    outputStyle: StyleProp<TextStyle>;
+    trackStyle: StyleProp<ViewStyle>;
+    fillStyle: StyleProp<ViewStyle>;
+    thumbStyle: StyleProp<ViewStyle>;
+    orientation: SliderOrientation;
+    /** One entry for a plain slider, two for a range. Always snapped. */
+    values: readonly number[];
+    min: number;
+    max: number;
+    step: number;
+    isDisabled: boolean;
+    /** How far along the rail each value sits, from 0 to 1. */
+    fractions: readonly number[];
+    /** The track's measured length along its own axis. Zero until it has been laid out. */
+    trackLength: number;
+    setTrackLength: (length: number) => void;
+    /** The knob's diameter, so the rail can inset the travel by half of it at each end. */
+    thumbSize: number;
+    /** Moves one thumb to a position along the rail, from 0 to 1. */
+    slideTo: (index: number, fraction: number) => void;
+    /** Which thumb a press at this position should move. */
+    thumbFor: (fraction: number) => number;
+    commit: () => void;
+};
+
+/**
+ * What the finger holds.
+ *
+ * The pan runs on `react-native-gesture-handler`, which this library declares as an
+ * **optional** peer — a slider is the first component to need it, and an app without one
+ * should not be made to install a gesture library. It is imported here and nowhere else,
+ * so only an app that reaches for `@xaui/native/slider` pays for it.
+ *
+ * The gesture computes the new position on the UI thread and hands the value back over
+ * `runOnJS`, which is the one hop that has to happen: the value is React state, and only
+ * the scale can stay on the other thread.
+ *
+ * It is a **disc of the page's own colour inside a ring of the fill's**, which is the
+ * legacy component's shape rather than HeroUI's capsule-with-a-core. A solid accent knob
+ * on an accent fill disappears the moment the value reaches the top; a ring never does.
+ */
+declare function SliderThumb({ index, accessibilityValueText, style, ...props }: SliderThumbProps): react.JSX.Element;
+declare namespace SliderThumb {
+    var displayName: string;
+}
+
+/**
+ * A value chosen along a line.
+ *
+ * ```tsx
+ * <Slider defaultValue={40} onValueCommit={save}>
+ *   <Slider.Output />
+ *   <Slider.Track>
+ *     <Slider.Fill />
+ *     <Slider.Thumb />
+ *   </Slider.Track>
+ * </Slider>
+ * ```
+ *
+ * **Two callbacks, and the difference matters.** `onValueChange` fires on every step a
+ * thumb crosses, including mid-drag, and is what a live preview reads. `onValueCommit`
+ * fires once, when the finger lifts — it is where a network call belongs, because the
+ * first one can fire fifty times in a second.
+ *
+ * **A pair makes it a range.** `value={[20, 60]}` is two thumbs and a fill between them,
+ * and it reports a pair back; the shape the caller wrote is the shape they get. Write one
+ * `<Slider.Thumb index={0} />` per end.
+ *
+ * **`orientation="vertical"` turns the rail on its side**, counting from the bottom — a
+ * rail whose fill grew downwards would report a larger value the lower the knob sat.
+ */
+declare const SliderRoot: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "pointerEvents" | "style" | "children" | "size" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "radius" | "defaultValue" | "onValueChange" | "isDisabled" | "max" | "min" | "orientation" | "step" | "onValueCommit"> & react.RefAttributes<View>>;
+
+/**
+ * The part of the rail behind the knob.
+ *
+ * One thumb and it fills from the rail's start; two and it fills **between** them, which
+ * is the whole visual difference a range makes.
+ *
+ * It is not animated. The knob it follows is under a finger, and a fill lagging behind the
+ * knob by a spring reads as the two coming apart.
+ */
+declare const SliderFill: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "children"> & ViewStyleProps & react.RefAttributes<View>>;
+
+/**
+ * The value, in words.
+ *
+ * `children` may be a function, which is how a raw number becomes "42 %" or "1 h 20" — a
+ * `format` prop would have been the same thing with less room in it.
+ */
+declare const SliderOutput: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode | ((value: SliderValue) => react.ReactNode);
+} & Omit<react_native.TextProps, "children"> & Omit<TextStyleProps, keyof react_native.TextProps> & react.RefAttributes<Text>>;
+
+/**
+ * The rail the knob runs along, and the only node that knows how long it is.
+ *
+ * It takes a press anywhere along itself and moves the knob there, which is the half of a
+ * slider people forget: dragging a sixteen-point disc is a fine gesture on a mouse and a
+ * poor one on a finger.
+ *
+ * The travel is inset by half a knob at each end — otherwise the knob hangs over the rail's
+ * ends at the minimum and the maximum, and the fill runs out from under it.
+ */
+declare const SliderTrack: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<View>>;
+
+declare const useSlider: () => SliderContextValue;
+
+declare const sliderRecipe: Recipe<"fill" | "output" | "track" | "root" | "thumb", "default", {
+    readonly size: {
+        readonly sm: () => {};
+        readonly md: () => {};
+        readonly lg: () => {};
+    };
+    readonly orientation: {
+        readonly horizontal: () => {};
+        readonly vertical: () => {};
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"fill" | "track">>;
+}>;
+
+declare const Slider: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "pointerEvents" | "style" | "children" | "size" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "radius" | "defaultValue" | "onValueChange" | "isDisabled" | "max" | "min" | "orientation" | "step" | "onValueCommit"> & react.RefAttributes<react_native.View>> & {
+    Output: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode | ((value: SliderValue) => react.ReactNode);
+    } & Omit<react_native.TextProps, "children"> & Omit<TextStyleProps, keyof react_native.TextProps> & react.RefAttributes<react_native.Text>>;
+    Track: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode;
+    } & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<react_native.View>>;
+    Fill: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "children"> & ViewStyleProps & react.RefAttributes<react_native.View>>;
+    Thumb: typeof SliderThumb;
+};
+
+export { Slider, type SliderContextValue, SliderFill, type SliderFillProps, SliderOutput, type SliderOutputProps, type SliderProps, SliderRoot, type SliderSize, type SliderSlot, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, fromFraction, sliderRecipe, snap, toFraction, useSlider };

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

@@ -0,0 +1,284 @@
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, TextStyle, ViewStyle, TextProps, View, Text } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+/**
+ * The two conversions a slider is made of, and the rounding between them.
+ *
+ * Pure, because a slider that lands one step off at the far end is a bug you cannot see in
+ * a screenshot — it needs a table of inputs and outputs, which is what a test is.
+ */
+type Range = {
+    min: number;
+    max: number;
+    step: number;
+};
+/** One value, or the two ends of a range. */
+type SliderValue = number | readonly [number, number];
+/** Where a value sits on its track, from 0 at `min` to 1 at `max`. */
+declare function toFraction(value: number, { min, max }: Range): number;
+/**
+ * The value a position on the track means, snapped to the nearest step.
+ *
+ * The snap is computed in **steps from `min`** rather than by rounding the value itself:
+ * a step of 0.1 from a min of 0.05 gives 0.05, 0.15, 0.25 — rounding the value would give
+ * 0.1, 0.2, 0.3 and quietly move every stop.
+ */
+declare function fromFraction(fraction: number, range: Range): number;
+/** The nearest step to a value, never outside the range. */
+declare function snap(value: number, { min, max, step }: Range): number;
+
+type SliderSlot = 'root' | 'output' | 'track' | 'fill' | 'thumb';
+/**
+ * Which way the rail runs. Vertical counts **from the bottom**: a rail whose fill grew
+ * downwards would report a larger value the lower the knob sat, which is the opposite of
+ * what a vertical control means everywhere it appears.
+ */
+type SliderOrientation = 'horizontal' | 'vertical';
+type SliderSize = Exclude<Size, 'xs'>;
+type SliderOwnProps = {
+    children?: ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    /** The tint (R7) — a raw value, never a token. Paints the fill and the thumb. */
+    color?: string;
+    /**
+     * A number for one thumb, a pair for a range. The shape decides how many thumbs there
+     * are, and it comes back out the same way — a slider given `[20, 60]` reports
+     * `[20, 60]`, never `20`.
+     */
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    /** Fires on every step a thumb crosses, including while it is being dragged. */
+    onValueChange?: (value: SliderValue) => void;
+    /** Fires once, when the finger lifts. What a network call belongs on. */
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    /** Set it to `0` for a continuous slider. */
+    step?: number;
+    isDisabled?: boolean;
+};
+type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps> & Omit<ViewStyleProps, keyof SliderOwnProps | keyof ViewProps>;
+type SliderOutputOwnProps = {
+    /**
+     * Given the current value, so the caller can format it. Defaults to the number, or to
+     * the two ends joined by an en dash when the slider is a range.
+     */
+    children?: ReactNode | ((value: SliderValue) => ReactNode);
+};
+type SliderOutputProps = SliderOutputOwnProps & Omit<TextProps, keyof SliderOutputOwnProps> & Omit<TextStyleProps, keyof SliderOutputOwnProps | keyof TextProps>;
+type SliderTrackOwnProps = {
+    children?: ReactNode;
+};
+type SliderTrackProps = SliderTrackOwnProps & Omit<ViewProps, keyof SliderTrackOwnProps> & Omit<ViewStyleProps, keyof SliderTrackOwnProps | keyof ViewProps>;
+/** Neither takes children — where they sit is the root's arithmetic. */
+type SliderFillProps = Omit<ViewProps, 'children'> & ViewStyleProps;
+type SliderThumbProps = Omit<ViewProps, 'children'> & ViewStyleProps & {
+    /**
+     * Which thumb this is. `0` on a plain slider, `0` and `1` on a range — written out
+     * rather than conjured by the track, so a range is two slots you can see and style
+     * apart rather than one that silently became two.
+     */
+    index?: number;
+    /** What a screen reader reads instead of the raw number. */
+    accessibilityValueText?: (value: number) => string;
+};
+/** R5 — resolved style ids and the state the slots read. */
+type SliderContextValue = {
+    outputStyle: StyleProp<TextStyle>;
+    trackStyle: StyleProp<ViewStyle>;
+    fillStyle: StyleProp<ViewStyle>;
+    thumbStyle: StyleProp<ViewStyle>;
+    orientation: SliderOrientation;
+    /** One entry for a plain slider, two for a range. Always snapped. */
+    values: readonly number[];
+    min: number;
+    max: number;
+    step: number;
+    isDisabled: boolean;
+    /** How far along the rail each value sits, from 0 to 1. */
+    fractions: readonly number[];
+    /** The track's measured length along its own axis. Zero until it has been laid out. */
+    trackLength: number;
+    setTrackLength: (length: number) => void;
+    /** The knob's diameter, so the rail can inset the travel by half of it at each end. */
+    thumbSize: number;
+    /** Moves one thumb to a position along the rail, from 0 to 1. */
+    slideTo: (index: number, fraction: number) => void;
+    /** Which thumb a press at this position should move. */
+    thumbFor: (fraction: number) => number;
+    commit: () => void;
+};
+
+/**
+ * What the finger holds.
+ *
+ * The pan runs on `react-native-gesture-handler`, which this library declares as an
+ * **optional** peer — a slider is the first component to need it, and an app without one
+ * should not be made to install a gesture library. It is imported here and nowhere else,
+ * so only an app that reaches for `@xaui/native/slider` pays for it.
+ *
+ * The gesture computes the new position on the UI thread and hands the value back over
+ * `runOnJS`, which is the one hop that has to happen: the value is React state, and only
+ * the scale can stay on the other thread.
+ *
+ * It is a **disc of the page's own colour inside a ring of the fill's**, which is the
+ * legacy component's shape rather than HeroUI's capsule-with-a-core. A solid accent knob
+ * on an accent fill disappears the moment the value reaches the top; a ring never does.
+ */
+declare function SliderThumb({ index, accessibilityValueText, style, ...props }: SliderThumbProps): react.JSX.Element;
+declare namespace SliderThumb {
+    var displayName: string;
+}
+
+/**
+ * A value chosen along a line.
+ *
+ * ```tsx
+ * <Slider defaultValue={40} onValueCommit={save}>
+ *   <Slider.Output />
+ *   <Slider.Track>
+ *     <Slider.Fill />
+ *     <Slider.Thumb />
+ *   </Slider.Track>
+ * </Slider>
+ * ```
+ *
+ * **Two callbacks, and the difference matters.** `onValueChange` fires on every step a
+ * thumb crosses, including mid-drag, and is what a live preview reads. `onValueCommit`
+ * fires once, when the finger lifts — it is where a network call belongs, because the
+ * first one can fire fifty times in a second.
+ *
+ * **A pair makes it a range.** `value={[20, 60]}` is two thumbs and a fill between them,
+ * and it reports a pair back; the shape the caller wrote is the shape they get. Write one
+ * `<Slider.Thumb index={0} />` per end.
+ *
+ * **`orientation="vertical"` turns the rail on its side**, counting from the bottom — a
+ * rail whose fill grew downwards would report a larger value the lower the knob sat.
+ */
+declare const SliderRoot: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "pointerEvents" | "style" | "children" | "size" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "radius" | "defaultValue" | "onValueChange" | "isDisabled" | "max" | "min" | "orientation" | "step" | "onValueCommit"> & react.RefAttributes<View>>;
+
+/**
+ * The part of the rail behind the knob.
+ *
+ * One thumb and it fills from the rail's start; two and it fills **between** them, which
+ * is the whole visual difference a range makes.
+ *
+ * It is not animated. The knob it follows is under a finger, and a fill lagging behind the
+ * knob by a spring reads as the two coming apart.
+ */
+declare const SliderFill: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "children"> & ViewStyleProps & react.RefAttributes<View>>;
+
+/**
+ * The value, in words.
+ *
+ * `children` may be a function, which is how a raw number becomes "42 %" or "1 h 20" — a
+ * `format` prop would have been the same thing with less room in it.
+ */
+declare const SliderOutput: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode | ((value: SliderValue) => react.ReactNode);
+} & Omit<react_native.TextProps, "children"> & Omit<TextStyleProps, keyof react_native.TextProps> & react.RefAttributes<Text>>;
+
+/**
+ * The rail the knob runs along, and the only node that knows how long it is.
+ *
+ * It takes a press anywhere along itself and moves the knob there, which is the half of a
+ * slider people forget: dragging a sixteen-point disc is a fine gesture on a mouse and a
+ * poor one on a finger.
+ *
+ * The travel is inset by half a knob at each end — otherwise the knob hangs over the rail's
+ * ends at the minimum and the maximum, and the fill runs out from under it.
+ */
+declare const SliderTrack: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<View>>;
+
+declare const useSlider: () => SliderContextValue;
+
+declare const sliderRecipe: Recipe<"fill" | "output" | "track" | "root" | "thumb", "default", {
+    readonly size: {
+        readonly sm: () => {};
+        readonly md: () => {};
+        readonly lg: () => {};
+    };
+    readonly orientation: {
+        readonly horizontal: () => {};
+        readonly vertical: () => {};
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"fill" | "track">>;
+}>;
+
+declare const Slider: react.ForwardRefExoticComponent<{
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+} & Omit<react_native.ViewProps, keyof {
+    children?: react.ReactNode;
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: RadiusKey;
+    color?: string;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    onValueCommit?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+}> & Omit<ViewStyleProps, "color" | "value" | "pointerEvents" | "style" | "children" | "size" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "radius" | "defaultValue" | "onValueChange" | "isDisabled" | "max" | "min" | "orientation" | "step" | "onValueCommit"> & react.RefAttributes<react_native.View>> & {
+    Output: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode | ((value: SliderValue) => react.ReactNode);
+    } & Omit<react_native.TextProps, "children"> & Omit<TextStyleProps, keyof react_native.TextProps> & react.RefAttributes<react_native.Text>>;
+    Track: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode;
+    } & Omit<react_native.ViewProps, "children"> & Omit<ViewStyleProps, keyof react_native.ViewProps> & react.RefAttributes<react_native.View>>;
+    Fill: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "children"> & ViewStyleProps & react.RefAttributes<react_native.View>>;
+    Thumb: typeof SliderThumb;
+};
+
+export { Slider, type SliderContextValue, SliderFill, type SliderFillProps, SliderOutput, type SliderOutputProps, type SliderProps, SliderRoot, type SliderSize, type SliderSlot, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, fromFraction, sliderRecipe, snap, toFraction, useSlider };

package/dist/components/slider/index.js

@@ -0,0 +1,33 @@
+import {
+  Slider,
+  SliderFill,
+  SliderOutput,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  fromFraction,
+  sliderRecipe,
+  snap,
+  toFraction,
+  useSlider
+} from "../../chunk-NA262TF2.js";
+import "../../chunk-F6W3JQ7K.js";
+import "../../chunk-EGLLDKN6.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Slider,
+  SliderFill,
+  SliderOutput,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  fromFraction,
+  sliderRecipe,
+  snap,
+  toFraction,
+  useSlider
+};

package/dist/components/spinner/index.cjs

@@ -7,9 +7,9 @@ require('../../chunk-WFEMJCXO.cjs');
 require('../../chunk-7EIHHOHP.cjs');
 require('../../chunk-7DPL3ZDS.cjs');
 require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-H4E4HDEP.cjs');
 require('../../chunk-FNEUOBCV.cjs');
 require('../../chunk-57SJ4LJF.cjs');
-require('../../chunk-H4E4HDEP.cjs');
 require('../../chunk-TK44VBIE.cjs');
 
 

package/dist/components/spinner/index.js

@@ -7,9 +7,9 @@ import "../../chunk-NCTOTTVW.js";
 import "../../chunk-F6W3JQ7K.js";
 import "../../chunk-423RQBOX.js";
 import "../../chunk-EGLLDKN6.js";
+import "../../chunk-36PRYGAM.js";
 import "../../chunk-4GTAZM2C.js";
 import "../../chunk-A3EGFI6T.js";
-import "../../chunk-36PRYGAM.js";
 import "../../chunk-M63GFNKV.js";
 export {
   Spinner,

package/dist/components/switch/index.cjs

@@ -6,15 +6,15 @@
 
 
 
-var _chunkDA3OKXHVcjs = require('../../chunk-DA3OKXHV.cjs');
+var _chunk54CWXA34cjs = require('../../chunk-54CWXA34.cjs');
 require('../../chunk-7EIHHOHP.cjs');
-require('../../chunk-3E7CDKFO.cjs');
+require('../../chunk-TGMVEHV7.cjs');
 require('../../chunk-7DPL3ZDS.cjs');
 require('../../chunk-EJQCQPET.cjs');
-require('../../chunk-FNEUOBCV.cjs');
-require('../../chunk-57SJ4LJF.cjs');
 require('../../chunk-7GHM4GKL.cjs');
 require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
 require('../../chunk-TK44VBIE.cjs');
 
 
@@ -24,4 +24,4 @@ require('../../chunk-TK44VBIE.cjs');
 
 
 
-exports.Switch = _chunkDA3OKXHVcjs.Switch; exports.SwitchLabel = _chunkDA3OKXHVcjs.SwitchLabel; exports.SwitchRoot = _chunkDA3OKXHVcjs.SwitchRoot; exports.SwitchThumb = _chunkDA3OKXHVcjs.SwitchThumb; exports.SwitchTrack = _chunkDA3OKXHVcjs.SwitchTrack; exports.switchRecipe = _chunkDA3OKXHVcjs.switchRecipe; exports.useSwitch = _chunkDA3OKXHVcjs.useSwitch;
+exports.Switch = _chunk54CWXA34cjs.Switch; exports.SwitchLabel = _chunk54CWXA34cjs.SwitchLabel; exports.SwitchRoot = _chunk54CWXA34cjs.SwitchRoot; exports.SwitchThumb = _chunk54CWXA34cjs.SwitchThumb; exports.SwitchTrack = _chunk54CWXA34cjs.SwitchTrack; exports.switchRecipe = _chunk54CWXA34cjs.switchRecipe; exports.useSwitch = _chunk54CWXA34cjs.useSwitch;