react-native-ai-animations 0.0.0-stage → 0.8.0

package/lib/module/chat/effort-bar.js

@@ -0,0 +1,853 @@
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder, Text, View } from "react-native";
+import Animated, { Easing, FadeIn, interpolateColor, useAnimatedStyle, useDerivedValue, useReducedMotion, useSharedValue, withSpring } from "react-native-reanimated";
+import { withAlpha } from "../internal/color.js";
+import { useMotionPalette } from "../theme/provider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LEVEL_SPRING = {
+  damping: 20,
+  stiffness: 190,
+  mass: 0.9
+};
+const GRAB_SPRING = {
+  damping: 22,
+  stiffness: 320,
+  mass: 0.7
+};
+const EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);
+const DEFAULT_SEGMENT_STYLE = {
+  fontSize: 13,
+  lineHeight: 18,
+  fontWeight: "600"
+};
+const DEFAULT_GRADIENT = ["#53C26B", "#9BCB4A", "#F0C64A", "#F19A3E", "#EC6A4F", "#E5486F"];
+const SLIDER_TRACK = 40;
+const SLIDER_RIM = 3;
+const SLIDER_STRETCH = 1.4;
+const SLIDER_TAB = 28;
+const SLIDER_TAB_RADIUS = 10;
+const SLIDER_SHOULDER = 8;
+const COMPACT_SLIDER_KNOB = 10;
+function normalize(level) {
+  return typeof level === "string" ? {
+    label: level
+  } : level;
+}
+function mix(a, b, t) {
+  const parse = hex => {
+    const clean = hex.replace("#", "");
+    return [0, 2, 4].map(offset => parseInt(clean.slice(offset, offset + 2), 16));
+  };
+  const from = parse(a);
+  const to = parse(b);
+  const channel = index => Math.round(from[index] + (to[index] - from[index]) * t).toString(16).padStart(2, "0");
+  return `#${channel(0)}${channel(1)}${channel(2)}`;
+}
+function spread(stops, count) {
+  if (count <= 1) return [stops[stops.length - 1]];
+  if (stops.length === 1) return new Array(count).fill(stops[0]);
+  return Array.from({
+    length: count
+  }, (_, index) => {
+    const position = index / (count - 1) * (stops.length - 1);
+    const low = Math.floor(position);
+    const high = Math.min(stops.length - 1, low + 1);
+    const a = stops[low];
+    const b = stops[high];
+    return a.startsWith("#") && b.startsWith("#") ? mix(a, b, position - low) : position - low < 0.5 ? a : b;
+  });
+}
+function filledFor(index, count, steps) {
+  return Math.max(1, Math.round((index + 1) / count * steps));
+}
+export function EffortBar({
+  levels,
+  value,
+  onChange,
+  variant = "bars",
+  size = "regular",
+  steps: stepsProp,
+  tabLabel,
+  levelIcon,
+  disabled = false,
+  fillColors,
+  barHeight,
+  onHaptic,
+  accessibilityLabel,
+  segmentStyle = DEFAULT_SEGMENT_STYLE,
+  colors,
+  style
+}) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const items = useMemo(() => levels.map(normalize), [levels]);
+  const count = Math.max(1, items.length);
+  const index = Math.min(count - 1, Math.max(0, value));
+  const current = items[index];
+  const compact = size === "compact";
+  const stops = fillColors && fillColors.length > 0 ? fillColors : undefined;
+  const custom = !!stops;
+  const steps = variant === "bars" ? Math.max(count, stepsProp ?? (compact ? count : Math.max(count, 10))) : count;
+  const filled = filledFor(index, count, steps);
+  const ratio = count > 1 ? index / (count - 1) : 0;
+  const fill = useSharedValue(filled);
+  const level = useSharedValue(index);
+  const knob = useSharedValue(ratio);
+  const pressed = useSharedValue(0);
+  const [width, setWidth] = useState(0);
+  const lastIndex = useRef(index);
+  const indexRef = useRef(index);
+  const dragging = useRef(false);
+  const interactive = !!onChange && !disabled;
+  indexRef.current = index;
+  useEffect(() => {
+    fill.value = reduceMotion ? filled : withSpring(filled, LEVEL_SPRING);
+    level.value = reduceMotion ? index : withSpring(index, LEVEL_SPRING);
+  }, [fill, filled, index, level, reduceMotion]);
+  useEffect(() => {
+    if (dragging.current) return;
+    knob.value = reduceMotion ? ratio : withSpring(ratio, LEVEL_SPRING);
+  }, [knob, ratio, reduceMotion]);
+  const barColors = useMemo(() => spread(stops ?? DEFAULT_GRADIENT, steps), [steps, stops]);
+  const trackFills = useMemo(() => stops ? spread(stops, count) : items.map(() => palette.text), [count, items, palette.text, stops]);
+  const sliderTrack = barHeight ?? SLIDER_TRACK;
+  const knobSize = compact ? COMPACT_SLIDER_KNOB : sliderTrack;
+  const knobInset = compact ? 0 : SLIDER_RIM;
+  const select = next => {
+    const item = items[next];
+    onHaptic?.(next);
+    onChange?.(next, {
+      index: next,
+      label: item.label,
+      value: item.value,
+      budget: item.budget
+    });
+  };
+  const pick = (x, grant) => {
+    if (!interactive || width === 0) return;
+    let next;
+    if (variant === "slider") {
+      const position = Math.min(1, Math.max(0, (x - knobInset - knobSize / 2) / Math.max(1, width - knobInset * 2 - knobSize)));
+      dragging.current = true;
+      knob.value = reduceMotion || !grant ? position : withSpring(position, GRAB_SPRING);
+      if (grant && !reduceMotion) pressed.value = withSpring(1, GRAB_SPRING);
+      next = Math.round(position * (count - 1));
+    } else {
+      next = Math.min(count - 1, Math.max(0, Math.floor(x / width * count)));
+    }
+    if (next === lastIndex.current) return;
+    lastIndex.current = next;
+    select(next);
+  };
+  const pickRef = useRef(pick);
+  pickRef.current = pick;
+  const release = () => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    const target = count > 1 ? indexRef.current / (count - 1) : 0;
+    knob.value = reduceMotion ? target : withSpring(target, LEVEL_SPRING);
+    pressed.value = reduceMotion ? 0 : withSpring(0, LEVEL_SPRING);
+  };
+  const releaseRef = useRef(release);
+  releaseRef.current = release;
+  useEffect(() => {
+    lastIndex.current = index;
+  }, [index]);
+  const responder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > 4,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: event => pickRef.current(event.nativeEvent.locationX, true),
+    onPanResponderMove: event => pickRef.current(event.nativeEvent.locationX, false),
+    onPanResponderRelease: () => releaseRef.current(),
+    onPanResponderTerminate: () => releaseRef.current()
+  }), []);
+  const handleLayout = event => setWidth(event.nativeEvent.layout.width);
+  const handleAction = event => {
+    if (!interactive) return;
+    const delta = event.nativeEvent.actionName === "increment" ? 1 : event.nativeEvent.actionName === "decrement" ? -1 : 0;
+    const next = Math.min(count - 1, Math.max(0, index + delta));
+    if (next !== index) select(next);
+  };
+  const height = variant === "slider" ? compact ? knobSize : SLIDER_TAB + sliderTrack : barHeight ?? (compact ? 14 : variant === "track" ? 44 : variant === "segmented" ? 40 : 56);
+  const compactWidth = variant === "segmented" ? count * 12 + 4 : variant === "slider" ? 40 : steps * 5 + (steps - 1) * 2.5;
+  const visual = variant === "track" ? /*#__PURE__*/_jsx(Track, {
+    items: items,
+    level: level,
+    width: width,
+    height: height,
+    fills: trackFills,
+    palette: palette,
+    compact: compact,
+    segmentStyle: segmentStyle,
+    levelIcon: levelIcon
+  }) : variant === "segmented" ? /*#__PURE__*/_jsx(Segmented, {
+    items: items,
+    level: level,
+    width: width,
+    height: height,
+    fills: trackFills,
+    custom: custom,
+    palette: palette,
+    compact: compact,
+    segmentStyle: segmentStyle,
+    levelIcon: levelIcon
+  }) : variant === "slider" ? compact ? /*#__PURE__*/_jsx(CompactSlider, {
+    count: count,
+    knob: knob,
+    width: width,
+    knobSize: knobSize,
+    fills: trackFills,
+    palette: palette
+  }) : /*#__PURE__*/_jsx(Slider, {
+    count: count,
+    label: current?.label ?? "",
+    index: index,
+    tabLabel: tabLabel,
+    levelIcon: levelIcon,
+    knob: knob,
+    pressed: pressed,
+    width: width,
+    track: sliderTrack,
+    fills: trackFills,
+    palette: palette,
+    reduceMotion: reduceMotion,
+    segmentStyle: segmentStyle
+  }) : /*#__PURE__*/_jsx(Bars, {
+    steps: steps,
+    fill: fill,
+    height: height,
+    colors: barColors,
+    palette: palette,
+    compact: compact
+  });
+  const control = /*#__PURE__*/_jsx(View, {
+    onLayout: handleLayout,
+    ...(interactive ? responder.panHandlers : {}),
+    style: {
+      height,
+      justifyContent: "flex-end"
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      children: visual
+    })
+  });
+  return /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel ?? "Effort",
+    accessibilityValue: {
+      text: current?.label
+    },
+    accessibilityState: {
+      disabled
+    },
+    accessibilityActions: interactive ? [{
+      name: "increment"
+    }, {
+      name: "decrement"
+    }] : undefined,
+    onAccessibilityAction: handleAction,
+    style: [{
+      opacity: disabled ? 0.45 : 1
+    }, compact && {
+      width: compactWidth
+    }, style],
+    children: control
+  });
+}
+function Bars({
+  steps,
+  fill,
+  height,
+  colors,
+  palette,
+  compact
+}) {
+  const gap = compact ? 2.5 : 6;
+  const track = compact ? withAlpha(palette.text, 0.14) : withAlpha(palette.text, 0.08);
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "flex-end",
+      gap,
+      height
+    },
+    children: Array.from({
+      length: steps
+    }, (_, position) => /*#__PURE__*/_jsx(Bar, {
+      position: position,
+      steps: steps,
+      fill: fill,
+      height: height,
+      color: colors[position],
+      track: track,
+      compact: compact
+    }, position))
+  });
+}
+function Bar({
+  position,
+  steps,
+  fill,
+  height,
+  color,
+  track,
+  compact
+}) {
+  const minimum = compact ? 0.4 : 0.42;
+  const ratio = steps > 1 ? minimum + (1 - minimum) * position / (steps - 1) : 1;
+  const barHeight = Math.round(height * ratio);
+  const amount = useDerivedValue(() => Math.min(1, Math.max(0, fill.value - position)));
+  const colorStyle = useAnimatedStyle(() => ({
+    opacity: amount.value
+  }));
+  const popStyle = useAnimatedStyle(() => {
+    const near = Math.max(0, 1 - Math.abs(fill.value - (position + 1)));
+    return {
+      transform: [{
+        scale: 1 + near * (compact ? 0 : 0.08)
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      flex: compact ? undefined : 1,
+      width: compact ? 5 : undefined,
+      height: barHeight,
+      borderRadius: 999,
+      backgroundColor: track,
+      overflow: "hidden"
+    }, popStyle],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: color
+      }, colorStyle]
+    })
+  });
+}
+function Track({
+  items,
+  level,
+  width,
+  height,
+  fills,
+  palette,
+  compact,
+  segmentStyle,
+  levelIcon
+}) {
+  const count = items.length;
+  const segment = width / Math.max(1, count);
+  const radius = height / 2;
+  const inputs = items.map((_, position) => position);
+  const fillStyle = useAnimatedStyle(() => ({
+    width: Math.max(height, segment * (level.value + 1)),
+    backgroundColor: count > 1 ? interpolateColor(level.value, inputs, fills) : fills[0]
+  }));
+  const clipStyle = useAnimatedStyle(() => ({
+    width: Math.max(height, segment * (level.value + 1))
+  }));
+  const labels = color => items.map((item, position) => /*#__PURE__*/_jsx(View, {
+    style: {
+      width: segment,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: levelIcon ? levelIcon(position, color) : /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [segmentStyle, {
+        color
+      }],
+      children: item.label
+    })
+  }, `${position}-${item.label}`));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      height,
+      borderRadius: radius,
+      borderCurve: "continuous",
+      backgroundColor: palette.surface,
+      overflow: "hidden"
+    },
+    children: [!compact ? items.slice(1).map((_, position) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        top: height * 0.3,
+        bottom: height * 0.3,
+        left: segment * (position + 1),
+        width: 1,
+        backgroundColor: withAlpha(palette.text, 0.1)
+      }
+    }, position)) : null, !compact && width > 0 ? /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        flexDirection: "row"
+      },
+      children: labels(palette.textSecondary)
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        borderRadius: radius,
+        borderCurve: "continuous"
+      }, fillStyle]
+    }), !compact && width > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        overflow: "hidden"
+      }, clipStyle],
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: "row",
+          height,
+          width
+        },
+        children: labels(palette.background)
+      })
+    }) : null]
+  });
+}
+function LevelLabel({
+  label,
+  position,
+  level,
+  on,
+  off,
+  segmentStyle,
+  align = "center",
+  style
+}) {
+  const colorStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(Math.min(1, Math.abs(level.value - position)), [0, 1], [on, off])
+  }));
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    children: /*#__PURE__*/_jsx(Animated.Text, {
+      numberOfLines: 1,
+      style: [segmentStyle, {
+        textAlign: align
+      }, colorStyle],
+      children: label
+    })
+  });
+}
+function LevelGlyph({
+  position,
+  level,
+  render,
+  on,
+  off
+}) {
+  const onStyle = useAnimatedStyle(() => ({
+    opacity: 1 - Math.min(1, Math.abs(level.value - position))
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [render(position, off), /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute"
+      }, onStyle],
+      children: render(position, on)
+    })]
+  });
+}
+function Segmented({
+  items,
+  level,
+  width,
+  height,
+  fills,
+  custom,
+  palette,
+  compact,
+  segmentStyle,
+  levelIcon
+}) {
+  const count = items.length;
+  const inset = compact ? 2 : 3;
+  const radius = height / 2;
+  const segment = Math.max(0, (width - inset * 2) / Math.max(1, count));
+  const inputs = items.map((_, position) => position);
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: segment * level.value
+    }],
+    backgroundColor: custom ? count > 1 ? interpolateColor(level.value, inputs, fills) : fills[0] : compact ? palette.text : palette.card
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      height,
+      flexDirection: "row",
+      padding: inset,
+      borderRadius: radius,
+      borderCurve: "continuous",
+      backgroundColor: palette.surface
+    },
+    children: [width > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: inset,
+        left: inset,
+        bottom: inset,
+        width: segment,
+        borderRadius: radius - inset,
+        borderCurve: "continuous"
+      }, !custom && !compact ? {
+        shadowColor: "#000000",
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        shadowOffset: {
+          width: 0,
+          height: 2
+        }
+      } : null, thumbStyle]
+    }) : null, !compact && levelIcon ? items.map((item, position) => /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/_jsx(LevelGlyph, {
+        position: position,
+        level: level,
+        render: levelIcon,
+        on: custom ? palette.background : palette.text,
+        off: palette.textSecondary
+      })
+    }, `${position}-${item.label}`)) : null, !compact && !levelIcon ? items.map((item, position) => /*#__PURE__*/_jsx(LevelLabel, {
+      label: item.label,
+      position: position,
+      level: level,
+      on: custom ? palette.background : palette.text,
+      off: palette.textSecondary,
+      segmentStyle: segmentStyle,
+      style: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, `${position}-${item.label}`)) : null]
+  });
+}
+function Slider({
+  count,
+  label,
+  index,
+  tabLabel,
+  levelIcon,
+  knob,
+  pressed,
+  width,
+  track,
+  fills,
+  palette,
+  reduceMotion,
+  segmentStyle
+}) {
+  const span = Math.max(0, width - SLIDER_RIM * 2 - track);
+  const radius = track / 2;
+  const edge = radius;
+  const tabWidth = useSharedValue(0);
+  const inputs = Array.from({
+    length: count
+  }, (_, position) => position);
+  const knobFrame = useDerivedValue(() => {
+    const size = track * (1 + pressed.value * (SLIDER_STRETCH - 1));
+    const center = SLIDER_RIM + track / 2 + knob.value * span;
+    const left = Math.min(Math.max(center - size / 2, SLIDER_RIM), Math.max(SLIDER_RIM, width - SLIDER_RIM - size));
+    return {
+      left,
+      size,
+      center
+    };
+  });
+  const fillStyle = useAnimatedStyle(() => ({
+    width: knobFrame.value.left + knobFrame.value.size + SLIDER_RIM,
+    backgroundColor: count > 1 ? interpolateColor(knob.value * (count - 1), inputs, fills) : fills[0]
+  }));
+  const knobStyle = useAnimatedStyle(() => ({
+    width: knobFrame.value.size,
+    transform: [{
+      translateX: knobFrame.value.left
+    }]
+  }));
+  const tabStyle = useAnimatedStyle(() => {
+    const wanted = knobFrame.value.center - tabWidth.value / 2;
+    const left = Math.min(Math.max(wanted, edge), Math.max(edge, width - edge - tabWidth.value));
+    return {
+      opacity: tabWidth.value > 0 ? 1 : 0,
+      transform: [{
+        translateX: left
+      }]
+    };
+  });
+  if (width === 0) return /*#__PURE__*/_jsx(View, {
+    style: {
+      height: SLIDER_TAB + track
+    }
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      height: SLIDER_TAB + track
+    },
+    children: [/*#__PURE__*/_jsxs(Animated.View, {
+      onLayout: event => {
+        tabWidth.value = event.nativeEvent.layout.width;
+      },
+      style: [{
+        position: "absolute",
+        top: 0,
+        left: 0
+      }, tabStyle],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          height: SLIDER_TAB + 1,
+          paddingHorizontal: 12,
+          paddingBottom: 1,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 5,
+          borderTopLeftRadius: SLIDER_TAB_RADIUS,
+          borderTopRightRadius: SLIDER_TAB_RADIUS,
+          borderCurve: "continuous",
+          backgroundColor: palette.surface
+        },
+        children: [tabLabel ? /*#__PURE__*/_jsx(Text, {
+          style: [segmentStyle, {
+            color: palette.text,
+            fontWeight: "700"
+          }],
+          children: tabLabel
+        }) : null, levelIcon ? /*#__PURE__*/_jsx(Animated.View, {
+          entering: reduceMotion ? undefined : FadeIn.duration(200).easing(EASE_OUT),
+          children: levelIcon(index, palette.textSecondary)
+        }, index) : /*#__PURE__*/_jsx(Animated.Text, {
+          entering: reduceMotion ? undefined : FadeIn.duration(200).easing(EASE_OUT),
+          style: [segmentStyle, {
+            color: palette.textSecondary,
+            fontWeight: "500"
+          }],
+          children: label
+        }, index)]
+      }), /*#__PURE__*/_jsx(Shoulder, {
+        side: "left",
+        color: palette.surface
+      }), /*#__PURE__*/_jsx(Shoulder, {
+        side: "right",
+        color: palette.surface
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "absolute",
+        top: SLIDER_TAB,
+        left: 0,
+        right: 0,
+        height: track,
+        borderRadius: radius,
+        borderCurve: "continuous",
+        backgroundColor: palette.surface,
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          borderRadius: radius,
+          borderCurve: "continuous"
+        }, fillStyle]
+      }), inputs.map(position => /*#__PURE__*/_jsx(Stop, {
+        position: position,
+        count: count,
+        knob: knob,
+        left: SLIDER_RIM + track / 2 + (count > 1 ? span * position / (count - 1) : 0),
+        size: Math.round(track * 0.3),
+        on: withAlpha(palette.card, 0.55),
+        off: withAlpha(palette.text, 0.18)
+      }, position)), /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          position: "absolute",
+          top: SLIDER_RIM,
+          left: 0,
+          height: track - SLIDER_RIM * 2,
+          borderRadius: radius - SLIDER_RIM,
+          borderCurve: "continuous",
+          backgroundColor: palette.card,
+          shadowColor: "#000000",
+          shadowOpacity: 0.12,
+          shadowRadius: 4,
+          shadowOffset: {
+            width: 0,
+            height: 1
+          }
+        }, knobStyle]
+      })]
+    })]
+  });
+}
+function Shoulder({
+  side,
+  color
+}) {
+  const size = SLIDER_SHOULDER;
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      position: "absolute",
+      bottom: 0,
+      width: size,
+      height: size,
+      overflow: "hidden"
+    }, side === "left" ? {
+      left: -size
+    } : {
+      right: -size
+    }],
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        top: -size * 2,
+        left: side === "left" ? -size * 2 : -size,
+        width: size * 4,
+        height: size * 4,
+        borderRadius: size * 2,
+        borderWidth: size,
+        borderColor: color
+      }
+    })
+  });
+}
+function CompactSlider({
+  count,
+  knob,
+  width,
+  knobSize,
+  fills,
+  palette
+}) {
+  const inset = knobSize / 2;
+  const span = Math.max(0, width - knobSize);
+  const inputs = Array.from({
+    length: count
+  }, (_, position) => position);
+  const fillStyle = useAnimatedStyle(() => ({
+    width: inset + span * knob.value,
+    backgroundColor: count > 1 ? interpolateColor(knob.value * (count - 1), inputs, fills) : fills[0]
+  }));
+  const knobStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: span * knob.value
+    }]
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      height: knobSize,
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: palette.surface,
+        overflow: "hidden"
+      },
+      children: width > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          borderRadius: 2
+        }, fillStyle]
+      }) : null
+    }), width > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: knobSize,
+        height: knobSize,
+        borderRadius: knobSize / 2,
+        backgroundColor: palette.card,
+        borderWidth: 1,
+        borderColor: withAlpha(palette.text, 0.08),
+        shadowColor: "#000000",
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        shadowOffset: {
+          width: 0,
+          height: 1
+        }
+      }, knobStyle]
+    }) : null]
+  });
+}
+function Stop({
+  position,
+  count,
+  knob,
+  left,
+  size,
+  on,
+  off
+}) {
+  const colorStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(Math.min(1, Math.max(0, knob.value * (count - 1) - position + 0.5)), [0, 1], [off, on])
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: "absolute",
+      left: left - 1,
+      top: "50%",
+      marginTop: -size / 2,
+      width: 2,
+      height: size,
+      borderRadius: 1
+    }, colorStyle]
+  });
+}
+export function EffortBars(props) {
+  return /*#__PURE__*/_jsx(EffortBar, {
+    ...props,
+    variant: "bars"
+  });
+}
+export function EffortTrack(props) {
+  return /*#__PURE__*/_jsx(EffortBar, {
+    ...props,
+    variant: "track"
+  });
+}
+export function EffortSegmented(props) {
+  return /*#__PURE__*/_jsx(EffortBar, {
+    ...props,
+    variant: "segmented"
+  });
+}
+export function EffortSlider(props) {
+  return /*#__PURE__*/_jsx(EffortBar, {
+    ...props,
+    variant: "slider"
+  });
+}
+//# sourceMappingURL=effort-bar.js.map