@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/chunk-NVODH2PR.js

@@ -0,0 +1,724 @@
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { createRecipe, radiusAxis } from "./chunk-DKVXTMIJ.js";
+import { createSlotContext } from "./chunk-TTZOIXKE.js";
+import { alpha, useXAUITheme } from "./chunk-Z6JBWRPL.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/slider/slider-fill.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/slider/slider.context.ts
+var [SliderProvider, useSlider] = createSlotContext("Slider");
+
+// src/components/slider/slider-fill.tsx
+import { jsx } from "react/jsx-runtime";
+var SliderFill = forwardRef(function SliderFill2({
+  style,
+  ...props
+}, ref) {
+  const {
+    fillStyle,
+    fractions,
+    trackLength,
+    thumbSize,
+    orientation
+  } = useSlider();
+  const [styleProps, rest] = useStyleProps(props);
+  const travel = Math.max(trackLength - thumbSize, 0);
+  const half = thumbSize / 2;
+  const from = fractions.length > 1 ? fractions[0] * travel + half : 0;
+  const to = fractions[fractions.length - 1] * travel + half;
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */jsx(View, {
+    ref,
+    ...rest,
+    style: [fillStyle, vertical ? {
+      bottom: from,
+      height: to - from,
+      top: void 0
+    } : {
+      start: from,
+      width: to - from,
+      end: void 0
+    }, styleProps, style]
+  });
+});
+SliderFill.displayName = "XAUI.Slider.Fill";
+
+// src/components/slider/slider-output.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SliderOutput = forwardRef2(function SliderOutput2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    outputStyle,
+    values
+  } = useSlider();
+  const [styleProps, rest] = useStyleProps(props);
+  const value = values.length > 1 ? [values[0], values[1]] : values[0];
+  const text = values.length > 1 ? `${values[0]} \u2013 ${values[1]}` : String(values[0]);
+  return /* @__PURE__ */jsx2(Text, {
+    ref,
+    ...rest,
+    style: [outputStyle, styleProps, style],
+    children: typeof children === "function" ? children(value) : children ?? text
+  });
+});
+SliderOutput.displayName = "XAUI.Slider.Output";
+
+// src/components/slider/slider-thumb.tsx
+import { useCallback } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+
+// src/components/slider/slider.animation.ts
+var THUMB_PRESSED_SCALE = 1.15;
+var THUMB_SPRING = {
+  damping: 18,
+  stiffness: 320,
+  mass: 0.5
+};
+
+// src/components/slider/slider-thumb.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+const _worklet_8322699771254_init_data = {
+  code: "function chunkNVODH2PRJs1(){const{pressed,withSpring,THUMB_SPRING,runOnJS,commit}=this.__closure;pressed.set(withSpring(0,THUMB_SPRING));runOnJS(commit)();}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkNVODH2PRJs1\",\"pressed\",\"withSpring\",\"THUMB_SPRING\",\"runOnJS\",\"commit\",\"__closure\",\"set\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js\"],\"mappings\":\"AAwHgB,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,CAAAC,UAAA,CAAAC,YAAA,CAAAC,OAAA,CAAAC,MAAA,OAAAC,SAAA,CAClBL,OAAO,CAACM,GAAG,CAACL,UAAU,CAAC,CAAC,CAAEC,YAAY,CAAC,CAAC,CACxCC,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC,CACnB\",\"ignoreList\":[]}"
+};
+const _worklet_10666780228068_init_data = {
+  code: "function chunkNVODH2PRJs2(event){const{runOnJS,move,start,vertical}=this.__closure;runOnJS(move)(start.get()+(vertical?-event.translationY:event.translationX));}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkNVODH2PRJs2\",\"event\",\"runOnJS\",\"move\",\"start\",\"vertical\",\"__closure\",\"get\",\"translationY\",\"translationX\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js\"],\"mappings\":\"AAoHe,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,OAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,QAAA,OAAAC,SAAA,CACrBJ,OAAO,CAACC,IAAI,CAAC,CACXC,KAAK,CAACG,GAAG,CAAC,CAAC,EAAIF,QAAQ,CAAG,CAACJ,KAAK,CAACO,YAAY,CAAGP,KAAK,CAACQ,YAAY,CACpE,CAAC,CACH\",\"ignoreList\":[]}"
+};
+const _worklet_6395520740542_init_data = {
+  code: "function chunkNVODH2PRJs3(){const{start,fraction,travel,pressed,withSpring,THUMB_SPRING}=this.__closure;start.set(fraction*travel);pressed.set(withSpring(1,THUMB_SPRING));}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkNVODH2PRJs3\",\"start\",\"fraction\",\"travel\",\"pressed\",\"withSpring\",\"THUMB_SPRING\",\"__closure\",\"set\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js\"],\"mappings\":\"AAiHyD,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,CAAAC,QAAA,CAAAC,MAAA,CAAAC,OAAA,CAAAC,UAAA,CAAAC,YAAA,OAAAC,SAAA,CAC3DN,KAAK,CAACO,GAAG,CAACN,QAAQ,CAAGC,MAAM,CAAC,CAC5BC,OAAO,CAACI,GAAG,CAACH,UAAU,CAAC,CAAC,CAAEC,YAAY,CAAC,CAAC,CAC1C\",\"ignoreList\":[]}"
+};
+const _worklet_8374309168728_init_data = {
+  code: "function chunkNVODH2PRJs4(){const{pressed,THUMB_PRESSED_SCALE}=this.__closure;return{transform:[{scale:1+pressed.get()*(THUMB_PRESSED_SCALE-1)}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkNVODH2PRJs4\",\"pressed\",\"THUMB_PRESSED_SCALE\",\"__closure\",\"transform\",\"scale\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NVODH2PR.js\"],\"mappings\":\"AA4HiC,SAAAA,iBAAA,QAAAC,OAAA,CAAAC,mBAAA,OAAAC,SAAA,OAAO,CACpCC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,CAAC,CAAGJ,OAAO,CAACK,GAAG,CAAC,CAAC,EAAIJ,mBAAmB,CAAG,CAAC,CAAE,CAAC,CACtE,CAAC\",\"ignoreList\":[]}"
+};
+function SliderThumb({
+  index = 0,
+  accessibilityValueText,
+  style,
+  ...props
+}) {
+  const {
+    thumbStyle,
+    values,
+    min,
+    max,
+    step,
+    isDisabled,
+    fractions,
+    trackLength,
+    thumbSize,
+    orientation,
+    slideTo,
+    commit
+  } = useSlider();
+  const [styleProps, rest] = useStyleProps(props);
+  const pressed = useSharedValue(0);
+  const vertical = orientation === "vertical";
+  const travel = Math.max(trackLength - thumbSize, 0);
+  const value = values[index] ?? values[0];
+  const fraction = fractions[index] ?? fractions[0];
+  const start = useSharedValue(0);
+  const move = useCallback(along => slideTo(index, travel === 0 ? 0 : along / travel), [index, slideTo, travel]);
+  const pan = Gesture.Pan().enabled(!isDisabled).onBegin(function chunkNVODH2PRJs3Factory({
+    _worklet_6395520740542_init_data,
+    start,
+    fraction,
+    travel,
+    pressed,
+    withSpring,
+    THUMB_SPRING
+  }) {
+    const _e = [new global.Error(), -7, -27];
+    const chunkNVODH2PRJs3 = function () {
+      start.set(fraction * travel);
+      pressed.set(withSpring(1, THUMB_SPRING));
+    };
+    chunkNVODH2PRJs3.__closure = {
+      start,
+      fraction,
+      travel,
+      pressed,
+      withSpring,
+      THUMB_SPRING
+    };
+    chunkNVODH2PRJs3.__workletHash = 6395520740542;
+    chunkNVODH2PRJs3.__pluginVersion = "0.7.4";
+    chunkNVODH2PRJs3.__initData = _worklet_6395520740542_init_data;
+    chunkNVODH2PRJs3.__stackDetails = _e;
+    return chunkNVODH2PRJs3;
+  }({
+    _worklet_6395520740542_init_data,
+    start,
+    fraction,
+    travel,
+    pressed,
+    withSpring,
+    THUMB_SPRING
+  })).onUpdate(function chunkNVODH2PRJs2Factory({
+    _worklet_10666780228068_init_data,
+    runOnJS,
+    move,
+    start,
+    vertical
+  }) {
+    const _e = [new global.Error(), -5, -27];
+    const chunkNVODH2PRJs2 = function (event) {
+      runOnJS(move)(start.get() + (vertical ? -event.translationY : event.translationX));
+    };
+    chunkNVODH2PRJs2.__closure = {
+      runOnJS,
+      move,
+      start,
+      vertical
+    };
+    chunkNVODH2PRJs2.__workletHash = 10666780228068;
+    chunkNVODH2PRJs2.__pluginVersion = "0.7.4";
+    chunkNVODH2PRJs2.__initData = _worklet_10666780228068_init_data;
+    chunkNVODH2PRJs2.__stackDetails = _e;
+    return chunkNVODH2PRJs2;
+  }({
+    _worklet_10666780228068_init_data,
+    runOnJS,
+    move,
+    start,
+    vertical
+  })).onFinalize(function chunkNVODH2PRJs1Factory({
+    _worklet_8322699771254_init_data,
+    pressed,
+    withSpring,
+    THUMB_SPRING,
+    runOnJS,
+    commit
+  }) {
+    const _e = [new global.Error(), -6, -27];
+    const chunkNVODH2PRJs1 = function () {
+      pressed.set(withSpring(0, THUMB_SPRING));
+      runOnJS(commit)();
+    };
+    chunkNVODH2PRJs1.__closure = {
+      pressed,
+      withSpring,
+      THUMB_SPRING,
+      runOnJS,
+      commit
+    };
+    chunkNVODH2PRJs1.__workletHash = 8322699771254;
+    chunkNVODH2PRJs1.__pluginVersion = "0.7.4";
+    chunkNVODH2PRJs1.__initData = _worklet_8322699771254_init_data;
+    chunkNVODH2PRJs1.__stackDetails = _e;
+    return chunkNVODH2PRJs1;
+  }({
+    _worklet_8322699771254_init_data,
+    pressed,
+    withSpring,
+    THUMB_SPRING,
+    runOnJS,
+    commit
+  }));
+  const scale = useAnimatedStyle(function chunkNVODH2PRJs4Factory({
+    _worklet_8374309168728_init_data,
+    pressed,
+    THUMB_PRESSED_SCALE
+  }) {
+    const _e = [new global.Error(), -3, -27];
+    const chunkNVODH2PRJs4 = () => ({
+      transform: [{
+        scale: 1 + pressed.get() * (THUMB_PRESSED_SCALE - 1)
+      }]
+    });
+    chunkNVODH2PRJs4.__closure = {
+      pressed,
+      THUMB_PRESSED_SCALE
+    };
+    chunkNVODH2PRJs4.__workletHash = 8374309168728;
+    chunkNVODH2PRJs4.__pluginVersion = "0.7.4";
+    chunkNVODH2PRJs4.__initData = _worklet_8374309168728_init_data;
+    chunkNVODH2PRJs4.__stackDetails = _e;
+    return chunkNVODH2PRJs4;
+  }({
+    _worklet_8374309168728_init_data,
+    pressed,
+    THUMB_PRESSED_SCALE
+  }));
+  return /* @__PURE__ */jsx3(GestureDetector, {
+    gesture: pan,
+    children: /* @__PURE__ */jsx3(Animated.View, {
+      accessibilityRole: "adjustable",
+      accessibilityValue: {
+        min,
+        max,
+        now: value,
+        text: accessibilityValueText?.(value)
+      },
+      accessibilityActions: [{
+        name: "increment"
+      }, {
+        name: "decrement"
+      }],
+      onAccessibilityAction: event => {
+        const delta = event.nativeEvent.actionName === "increment" ? step : -step;
+        const next = value + (step === 0 ? (max - min) / 10 : delta);
+        slideTo(index, max === min ? 0 : (next - min) / (max - min));
+        commit();
+      },
+      "aria-disabled": isDisabled || void 0,
+      ...rest,
+      style: [thumbStyle, vertical ? {
+        bottom: fraction * travel
+      } : {
+        start: fraction * travel
+      }, scale, styleProps, style]
+    })
+  });
+}
+SliderThumb.displayName = "XAUI.Slider.Thumb";
+
+// src/components/slider/slider-track.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback2 } from "react";
+import { Pressable } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SliderTrack = forwardRef3(function SliderTrack2({
+  children,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const {
+    trackStyle,
+    trackLength,
+    thumbSize,
+    orientation,
+    isDisabled,
+    setTrackLength,
+    slideTo,
+    thumbFor,
+    commit
+  } = useSlider();
+  const [styleProps, rest] = useStyleProps(props);
+  const vertical = orientation === "vertical";
+  const measure = useCallback2(event => {
+    onLayout?.(event);
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setTrackLength(vertical ? height : width);
+  }, [onLayout, setTrackLength, vertical]);
+  const handlePress = useCallback2(event => {
+    const travel = Math.max(trackLength - thumbSize, 1);
+    const along = vertical ?
+    // Counted from the bottom: a press near the floor of a vertical rail is a small
+    // value, not a large one.
+    trackLength - event.nativeEvent.locationY : event.nativeEvent.locationX;
+    const fraction = (along - thumbSize / 2) / travel;
+    slideTo(thumbFor(fraction), fraction);
+    commit();
+  }, [commit, slideTo, thumbFor, thumbSize, trackLength, vertical]);
+  return /* @__PURE__ */jsx4(Pressable, {
+    ref,
+    disabled: isDisabled,
+    onPress: handlePress,
+    ...rest,
+    onLayout: measure,
+    style: [trackStyle, styleProps, style],
+    children
+  });
+});
+SliderTrack.displayName = "XAUI.Slider.Track";
+
+// src/components/slider/slider.tsx
+import { forwardRef as forwardRef4, useCallback as useCallback3, useMemo, useState } from "react";
+import { StyleSheet, View as View2 } from "react-native";
+
+// src/components/slider/slider.recipe.ts
+var SLOTS = ["root", "output", "track", "fill", "thumb"];
+var VARIANT_TOKENS = {
+  default: {
+    bg: "default",
+    bgSelected: "accent"
+  }
+};
+var FILL_ALPHA = 0.35;
+var SIZES = {
+  sm: {
+    track: 6,
+    thumb: 16,
+    output: "xs"
+  },
+  md: {
+    track: 8,
+    thumb: 20,
+    output: "sm"
+  },
+  lg: {
+    track: 10,
+    thumb: 24,
+    output: "md"
+  }
+};
+var VERTICAL_LENGTH = 220;
+function rail(step, orientation) {
+  const {
+    track,
+    thumb,
+    output
+  } = step;
+  const vertical = orientation === "vertical";
+  const overhang = (thumb - track) / 2;
+  return theme => ({
+    root: vertical ? {
+      flexDirection: "row",
+      alignItems: "center"
+    } : {
+      flexDirection: "column",
+      width: "100%"
+    },
+    track: vertical ? {
+      width: track,
+      height: VERTICAL_LENGTH,
+      alignItems: "center",
+      // The room the knob needs, reserved by the rail rather than by a box around it.
+      // Without it the knob overhangs into whatever is beside the slider, and the
+      // layout has no idea the control is wider than its rail.
+      marginHorizontal: overhang
+    } : {
+      height: track,
+      width: "100%",
+      justifyContent: "center",
+      marginVertical: overhang
+    },
+    // Pulled back by the overhang so its centre sits on the rail's centre line.
+    thumb: vertical ? {
+      width: thumb,
+      height: thumb,
+      borderRadius: thumb / 2,
+      start: -overhang
+    } : {
+      width: thumb,
+      height: thumb,
+      borderRadius: thumb / 2,
+      top: -overhang
+    },
+    fill: vertical ? {
+      start: 0,
+      end: 0,
+      bottom: 0
+    } : {
+      top: 0,
+      bottom: 0,
+      start: 0
+    },
+    output: {
+      fontSize: theme.fontSizes[output],
+      lineHeight: theme.lineHeights[output]
+    }
+  });
+}
+var sliderRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      gap: theme.spacing(2)
+    },
+    output: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    // `full` rather than a step of the radius scale: a rail's ends are semicircles at every
+    // thickness, and any fixed number is wrong for two of the three sizes.
+    track: {
+      borderRadius: theme.radius.full
+    },
+    fill: {
+      position: "absolute",
+      borderRadius: theme.radius.full
+    },
+    /**
+     * The knob: a solid disc of the fill's own colour, lifted off the rail by a shadow.
+     *
+     * That is Material's slider thumb rather than the legacy component's, which drew a
+     * ring — the page's colour inside a two-point border. A ring reads as weak at sixteen
+     * points and disappears against a busy background, and its border is the same two
+     * points whether the knob is 16 or 24, so the smallest size is proportionally the
+     * thinnest. The disc is the same shape at every size, and it never has to fight the
+     * fill for contrast because the fill is a softened version of it.
+     */
+    thumb: {
+      position: "absolute",
+      ...theme.shadows.surface
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Three steps of one colour, not two.
+   *
+   * The rail is the theme's neutral; the reach is the colour at `FILL_ALPHA`; the knob is
+   * the colour at full. Read left to right that is grey, then a wash of the colour, then
+   * the colour — so the eye lands on the knob, which is the value, rather than on the bar
+   * behind it, which is only how far the value has come.
+   *
+   * Material's slider is the same relationship with the steps assigned differently: their
+   * inactive track is the soft one and their active track is full. Moving the soft step
+   * onto the *reach* rather than the remainder is where this stops being theirs — a filled
+   * bar at full strength competes with the handle for the eye, and the handle is the part
+   * you can move.
+   *
+   * Both the reach and the knob come off the same role, so a raw `color` moves all three
+   * steps at once and none of them can drift from the others.
+   */
+  paint: (_theme, colors) => ({
+    track: {
+      backgroundColor: colors.bg
+    },
+    fill: {
+      backgroundColor: colors.bgSelected ? alpha(colors.bgSelected, FILL_ALPHA) : void 0
+    },
+    thumb: {
+      backgroundColor: colors.bgSelected
+    }
+  }),
+  variants: {
+    // The axes select; the compound below is what paints. Both are declared so `size` and
+    // `orientation` are part of the cache key and a press still allocates nothing.
+    size: {
+      sm: () => ({}),
+      md: () => ({}),
+      lg: () => ({})
+    },
+    orientation: {
+      horizontal: () => ({}),
+      vertical: () => ({})
+    },
+    radius: radiusAxis("track", "fill")
+  },
+  compoundVariants: ["sm", "md", "lg"].flatMap(size => ["horizontal", "vertical"].map(orientation => ({
+    when: {
+      size,
+      orientation
+    },
+    style: rail(SIZES[size], orientation)
+  }))),
+  states: {
+    /**
+     * Grey, and the colour goes entirely. A disabled slider still reports a value, so the
+     * bar has to stay legible — dimming the accent would leave a pale lavender that reads
+     * as an enabled slider seen through fog, where a neutral one reads as switched off.
+     */
+    disabled: theme => ({
+      root: {
+        opacity: theme.opacity.disabled
+      },
+      fill: {
+        backgroundColor: theme.colors.defaultSoft
+      },
+      thumb: {
+        backgroundColor: theme.colors.muted
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    orientation: "horizontal"
+  }
+});
+
+// src/components/slider/slider.utils.ts
+function toFraction(value, {
+  min,
+  max
+}) {
+  if (max === min) return 0;
+  return clamp((value - min) / (max - min), 0, 1);
+}
+function fromFraction(fraction, range) {
+  const {
+    min,
+    max
+  } = range;
+  return snap(min + clamp(fraction, 0, 1) * (max - min), range);
+}
+function snap(value, {
+  min,
+  max,
+  step
+}) {
+  if (step <= 0) return clamp(value, min, max);
+  const steps = Math.round((clamp(value, min, max) - min) / step);
+  return clamp(round(min + steps * step, min, step), min, max);
+}
+function round(value, min, step) {
+  const factor = 10 ** Math.max(decimalsOf(step), decimalsOf(min));
+  return Math.round(value * factor) / factor;
+}
+function decimalsOf(step) {
+  const text = String(step);
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function toValues(value, range) {
+  return Array.isArray(value) ? [snap(value[0], range), snap(value[1], range)] : [snap(value, range)];
+}
+function fromValues(values) {
+  return values.length > 1 ? [values[0], values[1]] : values[0];
+}
+function withThumbAt(values, index, value, range) {
+  const next = [...values];
+  const lower = index > 0 ? values[index - 1] : range.min;
+  const upper = index < values.length - 1 ? values[index + 1] : range.max;
+  next[index] = snap(Math.min(Math.max(value, lower), upper), range);
+  return next;
+}
+function nearestThumb(values, value) {
+  let best = 0;
+  let distance = Math.abs(values[0] - value);
+  for (let i = 1; i < values.length; i += 1) {
+    const d = Math.abs(values[i] - value);
+    if (d < distance) {
+      best = i;
+      distance = d;
+    }
+  }
+  return best;
+}
+
+// src/components/slider/slider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SliderRoot = forwardRef4(function Slider({
+  children,
+  size,
+  orientation = "horizontal",
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue = 0,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  isDisabled = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [trackLength, setTrackLength] = useState(0);
+  const range = {
+    min,
+    max,
+    step
+  };
+  const [raw, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const values = toValues(raw, range);
+  const selection = {
+    size,
+    orientation,
+    radius
+  };
+  const styles = sliderRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      disabled: isDisabled
+    }
+  });
+  const tint = color ? sliderRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const slideTo = useCallback3((index, fraction) => {
+    const at = fromFraction(fraction, {
+      min,
+      max,
+      step
+    });
+    setValue(current => fromValues(withThumbAt(toValues(current, {
+      min,
+      max,
+      step
+    }), index, at, {
+      min,
+      max,
+      step
+    })));
+  }, [max, min, setValue, step]);
+  const thumbFor = useCallback3(fraction => nearestThumb(values, fromFraction(fraction, {
+    min,
+    max,
+    step
+  })), [max, min, step, values]);
+  const commit = useCallback3(() => onValueCommit?.(fromValues(values)), [onValueCommit, values]);
+  const context = useMemo(() => {
+    const thumb = StyleSheet.flatten([styles.thumb]);
+    return {
+      outputStyle: styles.output,
+      trackStyle: tint ? [styles.track, tint.track] : styles.track,
+      fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
+      thumbStyle: tint ? [styles.thumb, tint.thumb] : styles.thumb,
+      orientation,
+      values,
+      min,
+      max,
+      step,
+      isDisabled,
+      fractions: values.map(v => toFraction(v, {
+        min,
+        max,
+        step
+      })),
+      trackLength,
+      setTrackLength,
+      // Read off the resolved style rather than recomputed: the knob's diameter is what
+      // the rail insets its travel by, and both have to be the same number or the knob
+      // overhangs the end.
+      thumbSize: typeof thumb.width === "number" ? thumb.width : 0,
+      slideTo,
+      thumbFor,
+      commit
+    };
+  }, [styles, tint, values, min, max, step, isDisabled, orientation, trackLength, slideTo, thumbFor, commit]);
+  return /* @__PURE__ */jsx5(SliderProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx5(View2, {
+      ref,
+      ...rest,
+      style: [styles.root, styleProps, style],
+      children
+    })
+  });
+});
+SliderRoot.displayName = "XAUI.Slider.Root";
+
+// src/components/slider/index.ts
+var Slider2 = Object.assign(SliderRoot, {
+  Output: SliderOutput,
+  Track: SliderTrack,
+  Fill: SliderFill,
+  Thumb: SliderThumb
+});
+export { useSlider, SliderFill, SliderOutput, SliderThumb, SliderTrack, sliderRecipe, toFraction, fromFraction, snap, SliderRoot, Slider2 as Slider };