@ecohouse/ui 0.1.17 → 0.1.19

package/src/components/Range/Range.tsx

@@ -0,0 +1,755 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from "react";
+import {
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PointerEvent,
+  type TextStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import type { RangeProps, RangeValue } from "./Range.types";
+import {
+  clampAndSnap,
+  clampRangeValue,
+  normalizeRangeValue,
+  parseRangeDraft,
+  snapRangeDelta,
+} from "./Range.utils";
+
+const DEFAULT_WIDTH = 347;
+const TRACK_HEIGHT = 4;
+const TRACK_HORIZONTAL_INSET = 20;
+const THUMB_SIZE = 20;
+const INPUT_WIDTH = 120;
+
+type WebKeyboardEvent = {
+  key?: string;
+  nativeEvent?: { key?: string };
+  preventDefault: () => void;
+  stopPropagation: () => void;
+};
+
+function defaultParseValue(value: string) {
+  const normalized = value.replace(/[\s,]/g, "");
+  if (!normalized) return undefined;
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function valuesEqual(a: RangeValue, b: RangeValue) {
+  return a.from === b.from && a.to === b.to;
+}
+
+export const Range = forwardRef<ComponentRef<typeof View>, RangeProps>(function Range(
+  {
+    min = 0,
+    max = 100,
+    step = 1,
+    value,
+    defaultValue = {},
+    onValueChange,
+    fromPlaceholder = "Սկսած",
+    toPlaceholder = "Մինչև",
+    currency = "֏",
+    fromAccessibilityLabel = fromPlaceholder,
+    toAccessibilityLabel = toPlaceholder,
+    disabled = false,
+    formatValue = String,
+    parseValue = defaultParseValue,
+    style,
+    className,
+    onLayout,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const fromThumbRef = useRef<ComponentRef<typeof View>>(null);
+  const toThumbRef = useRef<ComponentRef<typeof View>>(null);
+  const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+  const lowerBound = Math.min(min, max);
+  const upperBound = Math.max(min, max);
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(() =>
+    normalizeRangeValue(defaultValue, lowerBound, upperBound),
+  );
+  const resolvedValue = normalizeRangeValue(
+    isControlled ? value : uncontrolledValue,
+    lowerBound,
+    upperBound,
+  );
+  const latestValueRef = useRef(resolvedValue);
+  const [trackWidth, setTrackWidth] = useState(DEFAULT_WIDTH);
+  const [fromDraft, setFromDraft] = useState(
+    resolvedValue.from === undefined ? "" : formatValue(resolvedValue.from),
+  );
+  const [toDraft, setToDraft] = useState(
+    resolvedValue.to === undefined ? "" : formatValue(resolvedValue.to),
+  );
+  const [editingField, setEditingField] = useState<"from" | "to" | null>(null);
+  const [focusedThumb, setFocusedThumb] = useState<"from" | "to" | null>(null);
+  const dragStartRef = useRef({ from: lowerBound, to: upperBound });
+  const nativeDragTargetRef = useRef<"from" | "to" | null>(null);
+  const pointerDragRef = useRef<{
+    target: "from" | "to";
+    pointerId: number;
+    startPageX: number;
+    startValue: number;
+    coincident: boolean;
+  } | null>(null);
+
+  useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+  useEffect(() => {
+    if (editingField !== "from") {
+      setFromDraft(resolvedValue.from === undefined ? "" : formatValue(resolvedValue.from));
+    }
+  }, [editingField, formatValue, resolvedValue.from]);
+
+  useEffect(() => {
+    if (editingField !== "to") {
+      setToDraft(resolvedValue.to === undefined ? "" : formatValue(resolvedValue.to));
+    }
+  }, [editingField, formatValue, resolvedValue.to]);
+
+  useEffect(() => {
+    const nextValue = { from: resolvedValue.from, to: resolvedValue.to };
+    const changedOutsideInteraction = !valuesEqual(nextValue, latestValueRef.current);
+    latestValueRef.current = nextValue;
+
+    if (!changedOutsideInteraction) return;
+    if (editingField === "from") {
+      setFromDraft(nextValue.from === undefined ? "" : formatValue(nextValue.from));
+    }
+    if (editingField === "to") {
+      setToDraft(nextValue.to === undefined ? "" : formatValue(nextValue.to));
+    }
+  }, [editingField, formatValue, resolvedValue.from, resolvedValue.to]);
+
+  useEffect(() => {
+    if (isControlled) return;
+    setUncontrolledValue((current) => {
+      const normalized = normalizeRangeValue(current, lowerBound, upperBound);
+      return valuesEqual(current, normalized) ? current : normalized;
+    });
+  }, [isControlled, lowerBound, upperBound]);
+
+  const emitValue = useCallback(
+    (nextValue: RangeValue) => {
+      const normalized = normalizeRangeValue(nextValue, lowerBound, upperBound);
+      if (valuesEqual(normalized, latestValueRef.current)) return;
+      latestValueRef.current = normalized;
+      if (!isControlled) setUncontrolledValue(normalized);
+      onValueChange?.(normalized);
+    },
+    [isControlled, lowerBound, onValueChange, upperBound],
+  );
+
+  const updateFrom = useCallback(
+    (next: number | undefined) => {
+      const current = latestValueRef.current;
+      const maximum = current.to ?? upperBound;
+      const snapped =
+        next === undefined ? undefined : clampAndSnap(next, lowerBound, upperBound, safeStep);
+      emitValue({
+        ...current,
+        from: snapped === undefined ? undefined : clampRangeValue(snapped, lowerBound, maximum),
+      });
+    },
+    [emitValue, lowerBound, safeStep, upperBound],
+  );
+
+  const updateTo = useCallback(
+    (next: number | undefined) => {
+      const current = latestValueRef.current;
+      const minimum = current.from ?? lowerBound;
+      const snapped =
+        next === undefined ? undefined : clampAndSnap(next, lowerBound, upperBound, safeStep);
+      emitValue({
+        ...current,
+        to: snapped === undefined ? undefined : clampRangeValue(snapped, minimum, upperBound),
+      });
+    },
+    [emitValue, lowerBound, safeStep, upperBound],
+  );
+
+  const updateFromInput = useCallback(
+    (next: number | undefined) => {
+      const current = latestValueRef.current;
+      const maximum = current.to ?? upperBound;
+      emitValue({
+        ...current,
+        from: next === undefined ? undefined : clampRangeValue(next, lowerBound, maximum),
+      });
+    },
+    [emitValue, lowerBound, upperBound],
+  );
+
+  const updateToInput = useCallback(
+    (next: number | undefined) => {
+      const current = latestValueRef.current;
+      const minimum = current.from ?? lowerBound;
+      emitValue({
+        ...current,
+        to: next === undefined ? undefined : clampRangeValue(next, minimum, upperBound),
+      });
+    },
+    [emitValue, lowerBound, upperBound],
+  );
+
+  const span = upperBound - lowerBound;
+  const thumbTravel = Math.max(0, trackWidth - TRACK_HORIZONTAL_INSET * 2 - THUMB_SIZE);
+  const effectiveFrom = resolvedValue.from ?? lowerBound;
+  const effectiveTo = resolvedValue.to ?? upperBound;
+  const valueToOffset = useCallback(
+    (next: number) => (span === 0 ? 0 : ((next - lowerBound) / span) * thumbTravel),
+    [lowerBound, span, thumbTravel],
+  );
+  const deltaToValue = useCallback(
+    (delta: number) => (thumbTravel === 0 || span === 0 ? 0 : (delta / thumbTravel) * span),
+    [span, thumbTravel],
+  );
+  const fromOffset = valueToOffset(effectiveFrom);
+  const toOffset = valueToOffset(effectiveTo);
+
+  const fromPanResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: () => {
+          dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
+          nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "from";
+        },
+        onPanResponderMove: (_, gesture) => {
+          if (!nativeDragTargetRef.current && gesture.dx !== 0) {
+            nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
+          }
+          const delta = deltaToValue(gesture.dx);
+          if (nativeDragTargetRef.current === "to") {
+            updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
+          } else if (nativeDragTargetRef.current === "from") {
+            updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
+          }
+        },
+        onPanResponderRelease: () => {
+          nativeDragTargetRef.current = null;
+        },
+        onPanResponderTerminate: () => {
+          nativeDragTargetRef.current = null;
+        },
+      }),
+    [deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput],
+  );
+
+  const toPanResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: () => {
+          dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
+          nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "to";
+        },
+        onPanResponderMove: (_, gesture) => {
+          if (!nativeDragTargetRef.current && gesture.dx !== 0) {
+            nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
+          }
+          const delta = deltaToValue(gesture.dx);
+          if (nativeDragTargetRef.current === "from") {
+            updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
+          } else if (nativeDragTargetRef.current === "to") {
+            updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
+          }
+        },
+        onPanResponderRelease: () => {
+          nativeDragTargetRef.current = null;
+        },
+        onPanResponderTerminate: () => {
+          nativeDragTargetRef.current = null;
+        },
+      }),
+    [deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput],
+  );
+
+  const beginPointerDrag = (target: "from" | "to", currentValue: number, event: PointerEvent) => {
+    if (disabled) return;
+    event.stopPropagation();
+    const pointerId = event.nativeEvent.pointerId;
+    const node = event.currentTarget as unknown as {
+      focus?: () => void;
+      setPointerCapture?: (id: number) => void;
+    };
+    node.focus?.();
+    node.setPointerCapture?.(pointerId);
+    pointerDragRef.current = {
+      target,
+      pointerId,
+      startPageX: event.nativeEvent.pageX,
+      startValue: currentValue,
+      coincident: effectiveFrom === effectiveTo,
+    };
+  };
+
+  const movePointerDrag = (event: PointerEvent) => {
+    const drag = pointerDragRef.current;
+    if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
+    const deltaX = event.nativeEvent.pageX - drag.startPageX;
+    const nextValue = snapRangeDelta(drag.startValue, deltaToValue(deltaX), safeStep);
+    if (drag.coincident && deltaX !== 0) {
+      drag.target = deltaX < 0 ? "from" : "to";
+      drag.coincident = false;
+    }
+    const target = drag.target;
+    if (target === "from") updateFromInput(nextValue);
+    else updateToInput(nextValue);
+  };
+
+  const endPointerDrag = (event: PointerEvent) => {
+    const drag = pointerDragRef.current;
+    if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
+    const node = event.currentTarget as unknown as {
+      hasPointerCapture?: (id: number) => boolean;
+      releasePointerCapture?: (id: number) => void;
+    };
+    if (node.hasPointerCapture?.(drag.pointerId)) node.releasePointerCapture?.(drag.pointerId);
+    pointerDragRef.current = null;
+  };
+
+  const handleAccessibilityAction = (
+    event: AccessibilityActionEvent,
+    current: number,
+    update: (value: number) => void,
+  ) => {
+    if (disabled) return;
+    if (event.nativeEvent.actionName === "increment") update(current + safeStep);
+    if (event.nativeEvent.actionName === "decrement") update(current - safeStep);
+  };
+
+  const handleWebKeyDown = (
+    event: WebKeyboardEvent,
+    current: number,
+    minimum: number,
+    maximum: number,
+    update: (value: number) => void,
+  ) => {
+    if (disabled) return;
+
+    const key = event.nativeEvent?.key ?? event.key;
+    let nextValue: number | undefined;
+
+    if (key === "ArrowRight" || key === "ArrowUp") nextValue = current + safeStep;
+    if (key === "ArrowLeft" || key === "ArrowDown") nextValue = current - safeStep;
+    if (key === "Home") nextValue = minimum;
+    if (key === "End") nextValue = maximum;
+
+    if (nextValue === undefined) return;
+    event.preventDefault();
+    event.stopPropagation();
+    update(nextValue);
+  };
+
+  const commitDraft = (draft: string, update: (value: number | undefined) => void) => {
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") update(undefined);
+    if (result.kind === "value") update(result.value);
+  };
+
+  const changeFromDraft = (draft: string) => {
+    setFromDraft(draft);
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") updateFromInput(undefined);
+    if (result.kind === "value") updateFromInput(result.value);
+  };
+
+  const changeToDraft = (draft: string) => {
+    setToDraft(draft);
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") updateToInput(undefined);
+    if (result.kind === "value") updateToInput(result.value);
+  };
+
+  const focusWebThumb = (target: "from" | "to") => {
+    if (Platform.OS !== "web") return;
+    const node = (target === "from" ? fromThumbRef.current : toThumbRef.current) as unknown as {
+      focus?: () => void;
+    } | null;
+    node?.focus?.();
+  };
+
+  const updateNearestFromTrack = (locationX: number) => {
+    if (disabled || thumbTravel === 0 || span === 0) return;
+
+    const offset = Math.min(
+      thumbTravel,
+      Math.max(0, locationX - TRACK_HORIZONTAL_INSET - THUMB_SIZE / 2),
+    );
+    const nextValue = clampAndSnap(
+      lowerBound + (offset / thumbTravel) * span,
+      lowerBound,
+      upperBound,
+      safeStep,
+    );
+
+    const fromDistance = Math.abs(nextValue - effectiveFrom);
+    const toDistance = Math.abs(nextValue - effectiveTo);
+
+    if (effectiveFrom === effectiveTo && fromDistance === toDistance) {
+      if (nextValue < effectiveFrom) {
+        focusWebThumb("from");
+        updateFrom(nextValue);
+      }
+      if (nextValue > effectiveTo) {
+        focusWebThumb("to");
+        updateTo(nextValue);
+      }
+    } else if (fromDistance <= toDistance) {
+      focusWebThumb("from");
+      updateFrom(nextValue);
+    } else {
+      focusWebThumb("to");
+      updateTo(nextValue);
+    }
+  };
+
+  const handleTrackPress = (event: GestureResponderEvent) => {
+    updateNearestFromTrack(event.nativeEvent.locationX);
+  };
+
+  const handleTrackLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+
+  const fromValueText = `${formatValue(effectiveFrom)}${currency ? ` ${currency}` : ""}`;
+  const toValueText = `${formatValue(effectiveTo)}${currency ? ` ${currency}` : ""}`;
+
+  return (
+    <View
+      {...rest}
+      ref={setRootRef}
+      onLayout={onLayout}
+      style={[styles.root, disabled && styles.disabled, style]}
+    >
+      {/* The 20px plane keeps native hit-testing on the thumbs while the rail stays at y=8. */}
+      <Pressable
+        accessible={false}
+        disabled={disabled}
+        focusable={false}
+        onLayout={handleTrackLayout}
+        onPointerDown={
+          Platform.OS === "web"
+            ? (event) => {
+                event.preventDefault();
+                updateNearestFromTrack(event.nativeEvent.offsetX);
+              }
+            : undefined
+        }
+        onPress={Platform.OS === "web" ? undefined : handleTrackPress}
+        style={styles.sliderPlane}
+        tabIndex={-1}
+      >
+        <View pointerEvents="none" style={styles.track} />
+        <View
+          pointerEvents="none"
+          style={[
+            styles.activeTrack,
+            {
+              left: TRACK_HORIZONTAL_INSET + fromOffset,
+              width: toOffset - fromOffset + THUMB_SIZE,
+            },
+          ]}
+        />
+        {/* Native Pressable owns responder handlers, so the draggable hosts intentionally stay Views. */}
+        <View
+          ref={fromThumbRef}
+          {...(Platform.OS === "web"
+            ? {
+                onPointerCancel: endPointerDrag,
+                onPointerDown: (event: PointerEvent) =>
+                  beginPointerDrag("from", effectiveFrom, event),
+                onLostPointerCapture: endPointerDrag,
+                onPointerMove: movePointerDrag,
+                onPointerUp: endPointerDrag,
+                onBlur: () => setFocusedThumb(null),
+                onFocus: () => setFocusedThumb("from"),
+                onKeyDown: (event: WebKeyboardEvent) =>
+                  handleWebKeyDown(event, effectiveFrom, lowerBound, effectiveTo, updateFromInput),
+              }
+            : fromPanResponder.panHandlers)}
+          aria-disabled={disabled}
+          aria-valuemax={effectiveTo}
+          aria-valuemin={lowerBound}
+          aria-valuenow={effectiveFrom}
+          aria-valuetext={fromValueText}
+          accessible
+          accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+          accessibilityLabel={fromAccessibilityLabel}
+          accessibilityRole="adjustable"
+          accessibilityState={{ disabled }}
+          accessibilityValue={{
+            min: lowerBound,
+            max: effectiveTo,
+            now: effectiveFrom,
+            text: fromValueText,
+          }}
+          focusable={!disabled}
+          onAccessibilityAction={(event) =>
+            handleAccessibilityAction(event, effectiveFrom, updateFromInput)
+          }
+          pointerEvents={disabled ? "none" : "auto"}
+          style={[
+            styles.thumb,
+            Platform.OS === "web" && styles.thumbWeb,
+            focusedThumb === "from" && Platform.OS === "web" && styles.thumbFocusedWeb,
+            { left: TRACK_HORIZONTAL_INSET + fromOffset },
+          ]}
+          tabIndex={disabled ? -1 : 0}
+        />
+        <View
+          ref={toThumbRef}
+          {...(Platform.OS === "web"
+            ? {
+                onPointerCancel: endPointerDrag,
+                onPointerDown: (event: PointerEvent) => beginPointerDrag("to", effectiveTo, event),
+                onLostPointerCapture: endPointerDrag,
+                onPointerMove: movePointerDrag,
+                onPointerUp: endPointerDrag,
+                onBlur: () => setFocusedThumb(null),
+                onFocus: () => setFocusedThumb("to"),
+                onKeyDown: (event: WebKeyboardEvent) =>
+                  handleWebKeyDown(event, effectiveTo, effectiveFrom, upperBound, updateToInput),
+              }
+            : toPanResponder.panHandlers)}
+          aria-disabled={disabled}
+          aria-valuemax={upperBound}
+          aria-valuemin={effectiveFrom}
+          aria-valuenow={effectiveTo}
+          aria-valuetext={toValueText}
+          accessible
+          accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+          accessibilityLabel={toAccessibilityLabel}
+          accessibilityRole="adjustable"
+          accessibilityState={{ disabled }}
+          accessibilityValue={{
+            min: effectiveFrom,
+            max: upperBound,
+            now: effectiveTo,
+            text: toValueText,
+          }}
+          focusable={!disabled}
+          onAccessibilityAction={(event) =>
+            handleAccessibilityAction(event, effectiveTo, updateToInput)
+          }
+          pointerEvents={disabled ? "none" : "auto"}
+          style={[
+            styles.thumb,
+            Platform.OS === "web" && styles.thumbWeb,
+            focusedThumb === "to" && Platform.OS === "web" && styles.thumbFocusedWeb,
+            { left: TRACK_HORIZONTAL_INSET + toOffset },
+          ]}
+          tabIndex={disabled ? -1 : 0}
+        />
+      </Pressable>
+
+      <View style={styles.inputs}>
+        <RangeInput
+          accessibilityLabel={fromAccessibilityLabel}
+          currency={currency}
+          disabled={disabled}
+          focused={editingField === "from"}
+          onChangeText={changeFromDraft}
+          onCommit={() => {
+            setEditingField(null);
+            commitDraft(fromDraft, updateFromInput);
+          }}
+          onFocus={() => setEditingField("from")}
+          placeholder={fromPlaceholder}
+          value={fromDraft}
+        />
+        <RangeInput
+          accessibilityLabel={toAccessibilityLabel}
+          currency={currency}
+          disabled={disabled}
+          focused={editingField === "to"}
+          onChangeText={changeToDraft}
+          onCommit={() => {
+            setEditingField(null);
+            commitDraft(toDraft, updateToInput);
+          }}
+          onFocus={() => setEditingField("to")}
+          placeholder={toPlaceholder}
+          value={toDraft}
+        />
+      </View>
+    </View>
+  );
+});
+
+function RangeInput({
+  accessibilityLabel,
+  currency,
+  disabled,
+  focused,
+  onChangeText,
+  onCommit,
+  onFocus,
+  placeholder,
+  value,
+}: {
+  accessibilityLabel: string;
+  currency: string;
+  disabled: boolean;
+  focused: boolean;
+  onChangeText: (value: string) => void;
+  onCommit: () => void;
+  onFocus: () => void;
+  placeholder: string;
+  value: string;
+}) {
+  return (
+    <View style={[styles.inputField, focused && styles.inputFieldFocused]}>
+      <TextInput
+        aria-disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
+        editable={!disabled}
+        inputMode="decimal"
+        onBlur={onCommit}
+        onChangeText={onChangeText}
+        onFocus={onFocus}
+        onSubmitEditing={onCommit}
+        placeholder={placeholder}
+        placeholderTextColor={colors.grey150}
+        returnKeyType="done"
+        style={[styles.input, Platform.OS === "web" && styles.inputWeb]}
+        tabIndex={disabled ? -1 : undefined}
+        value={value}
+      />
+      <View style={styles.currencySlot}>
+        <Text style={styles.currency}>{currency}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 15,
+    alignSelf: "flex-start",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  sliderPlane: {
+    width: "100%",
+    height: THUMB_SIZE,
+    position: "relative",
+  },
+  track: {
+    position: "absolute",
+    top: 8,
+    left: 0,
+    width: "100%",
+    height: TRACK_HEIGHT,
+    borderRadius: 16,
+    backgroundColor: colors.grey600,
+  },
+  activeTrack: {
+    position: "absolute",
+    top: 8,
+    height: TRACK_HEIGHT,
+    borderRadius: 16,
+    backgroundColor: colors.primary,
+  },
+  thumb: {
+    position: "absolute",
+    top: 0,
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: 32,
+    borderWidth: 2,
+    borderColor: colors.primary,
+    backgroundColor: colors.white,
+  },
+  thumbWeb: {
+    cursor: "grab",
+    touchAction: "none",
+  } as unknown as TextStyle,
+  thumbFocusedWeb: {
+    outlineColor: colors.white,
+    outlineOffset: 2,
+    outlineStyle: "solid",
+    outlineWidth: 2,
+  } as TextStyle,
+  inputs: {
+    width: "100%",
+    height: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  inputField: {
+    width: INPUT_WIDTH,
+    height: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    borderRadius: 60,
+    backgroundColor: colors.grey700,
+  },
+  inputFieldFocused: {
+    borderColor: colors.primary,
+  },
+  input: {
+    minWidth: 0,
+    flex: 1,
+    margin: 0,
+    padding: 0,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0.36,
+    color: colors.white,
+  },
+  inputWeb: {
+    outlineStyle: "none",
+  } as TextStyle,
+  currencySlot: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  currency: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 22,
+    color: colors.white,
+  },
+});