@oxyhq/bloom 0.6.24 → 0.7.1

package/src/slider/Slider.tsx

@@ -0,0 +1,275 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  Platform,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PanResponderGestureState,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
+import type { SliderProps } from './types';
+
+function clamp(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+function quantize(raw: number, min: number, max: number, step: number): number {
+  if (step <= 0) return clamp(raw, min, max);
+  const steps = Math.round((raw - min) / step);
+  const snapped = min + steps * step;
+  // Avoid floating-point drift accumulating in the reported value.
+  const decimals = (String(step).split('.')[1] ?? '').length;
+  const rounded = decimals > 0 ? Number(snapped.toFixed(decimals)) : snapped;
+  return clamp(rounded, min, max);
+}
+
+/**
+ * A draggable value slider. Track + fill + thumb, themed from Bloom tokens.
+ * Controlled via `value` / `onValueChange`, with `min` / `max` / `step`.
+ *
+ * Universal: gestures use RN's `PanResponder` (works on React Native and on
+ * web via react-native-web). On web the thumb is also focusable and responds
+ * to arrow / Home / End keys for accessibility.
+ */
+const SliderComponent = function Slider({
+  value,
+  onValueChange,
+  onSlidingComplete,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  trackHeight = 4,
+  thumbSize = 20,
+  minimumTrackTintColor,
+  maximumTrackTintColor,
+  thumbTintColor,
+  style,
+  accessibilityLabel,
+  testID,
+}: SliderProps) {
+  const theme = useTheme();
+  const [trackWidth, setTrackWidth] = useState(0);
+  const pressScale = useRef(new Animated.Value(0)).current;
+
+  // Latest props captured in refs so the PanResponder (created once) always
+  // reads current values without being re-created mid-gesture.
+  const stateRef = useRef({ value, trackWidth, min, max, step, disabled });
+  stateRef.current = { value, trackWidth, min, max, step, disabled };
+  const callbacksRef = useRef({ onValueChange, onSlidingComplete });
+  callbacksRef.current = { onValueChange, onSlidingComplete };
+  const gestureStartValueRef = useRef(value);
+
+  const range = max - min;
+  const fraction = range > 0 ? clamp((value - min) / range, 0, 1) : 0;
+
+  const fillColor = minimumTrackTintColor ?? theme.colors.primary;
+  const restColor = maximumTrackTintColor ?? theme.colors.border;
+  const thumbColor = thumbTintColor ?? theme.colors.primary;
+
+  const valueFromX = useCallback((x: number): number => {
+    const s = stateRef.current;
+    if (s.trackWidth <= 0) return s.value;
+    const f = clamp(x / s.trackWidth, 0, 1);
+    return quantize(s.min + f * (s.max - s.min), s.min, s.max, s.step);
+  }, []);
+
+  const animatePress = useCallback(
+    (to: number) => {
+      Animated.spring(pressScale, {
+        toValue: to,
+        useNativeDriver: true,
+        ...animation.spring.snappy,
+      }).start();
+    },
+    [pressScale],
+  );
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !stateRef.current.disabled,
+        onMoveShouldSetPanResponder: () => !stateRef.current.disabled,
+        onPanResponderGrant: (e: GestureResponderEvent) => {
+          if (stateRef.current.disabled) return;
+          gestureStartValueRef.current = stateRef.current.value;
+          animatePress(1);
+          const next = valueFromX(e.nativeEvent.locationX);
+          if (next !== stateRef.current.value) {
+            callbacksRef.current.onValueChange(next);
+          }
+        },
+        onPanResponderMove: (
+          _e: GestureResponderEvent,
+          g: PanResponderGestureState,
+        ) => {
+          if (stateRef.current.disabled) return;
+          const s = stateRef.current;
+          const startFraction =
+            s.max - s.min > 0
+              ? (gestureStartValueRef.current - s.min) / (s.max - s.min)
+              : 0;
+          const startX = startFraction * s.trackWidth;
+          const next = valueFromX(startX + g.dx);
+          if (next !== s.value) {
+            callbacksRef.current.onValueChange(next);
+          }
+        },
+        onPanResponderRelease: () => {
+          animatePress(0);
+          callbacksRef.current.onSlidingComplete?.(stateRef.current.value);
+        },
+        onPanResponderTerminate: () => {
+          animatePress(0);
+          callbacksRef.current.onSlidingComplete?.(stateRef.current.value);
+        },
+      }),
+    [animatePress, valueFromX],
+  );
+
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  }, []);
+
+  const onKeyStep = useCallback(
+    (delta: number, toEdge?: 'min' | 'max') => {
+      if (disabled) return;
+      const next =
+        toEdge === 'min'
+          ? min
+          : toEdge === 'max'
+            ? max
+            : quantize(value + delta, min, max, step);
+      if (next !== value) {
+        onValueChange(next);
+        onSlidingComplete?.(next);
+      }
+    },
+    [disabled, min, max, step, value, onValueChange, onSlidingComplete],
+  );
+
+  // Web-only keyboard handling for the focusable thumb.
+  const webKeyHandler: Record<string, unknown> =
+    Platform.OS === 'web'
+      ? {
+          tabIndex: disabled ? -1 : 0,
+          onKeyDown: (e: { key: string; preventDefault: () => void }) => {
+            switch (e.key) {
+              case 'ArrowRight':
+              case 'ArrowUp':
+                e.preventDefault();
+                onKeyStep(step);
+                break;
+              case 'ArrowLeft':
+              case 'ArrowDown':
+                e.preventDefault();
+                onKeyStep(-step);
+                break;
+              case 'Home':
+                e.preventDefault();
+                onKeyStep(0, 'min');
+                break;
+              case 'End':
+                e.preventDefault();
+                onKeyStep(0, 'max');
+                break;
+              default:
+                break;
+            }
+          },
+        }
+      : {};
+
+  const thumbScale = pressScale.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.15],
+  });
+
+  const thumbLeft = fraction * trackWidth - thumbSize / 2;
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="adjustable"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityValue={{ min, max, now: value }}
+      accessibilityState={{ disabled }}
+      style={[
+        styles.root,
+        { height: Math.max(thumbSize, trackHeight) + 8 },
+        disabled && styles.disabled,
+        style,
+      ]}
+      {...panResponder.panHandlers}>
+      <View
+        onLayout={onLayout}
+        style={[
+          styles.track,
+          { height: trackHeight, borderRadius: trackHeight / 2, backgroundColor: restColor },
+        ]}>
+        <View
+          style={[
+            styles.fill,
+            {
+              width: `${fraction * 100}%`,
+              height: trackHeight,
+              borderRadius: trackHeight / 2,
+              backgroundColor: fillColor,
+            },
+          ]}
+        />
+      </View>
+      <Animated.View
+        {...webKeyHandler}
+        style={[
+          styles.thumb,
+          {
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: thumbSize / 2,
+            marginTop: -thumbSize / 2,
+            backgroundColor: thumbColor,
+            left: thumbLeft,
+            transform: [{ scale: thumbScale }],
+            shadowColor: theme.colors.shadow,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    justifyContent: 'center',
+  },
+  track: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+  thumb: {
+    position: 'absolute',
+    top: '50%',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export const Slider = memo(SliderComponent);
+Slider.displayName = 'Slider';

package/src/slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './types';

package/src/slider/types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SliderProps {
+  /** Current value (controlled). */
+  value: number;
+  /** Fired continuously as the user drags / steps the thumb. */
+  onValueChange: (value: number) => void;
+  /** Fired once when the drag gesture ends. */
+  onSlidingComplete?: (value: number) => void;
+  /** Minimum value. Defaults to `0`. */
+  min?: number;
+  /** Maximum value. Defaults to `100`. */
+  max?: number;
+  /** Step granularity. Defaults to `1`. Use a fractional step for fine control. */
+  step?: number;
+  disabled?: boolean;
+  /** Track thickness in px. Defaults to `4`. */
+  trackHeight?: number;
+  /** Thumb diameter in px. Defaults to `20`. */
+  thumbSize?: number;
+  /** Override the filled-track color. Defaults to the theme primary. */
+  minimumTrackTintColor?: string;
+  /** Override the unfilled-track color. Defaults to the theme border. */
+  maximumTrackTintColor?: string;
+  /** Override the thumb color. Defaults to the theme primary. */
+  thumbTintColor?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+}

package/src/theme/BloomThemeProvider.tsx

@@ -27,7 +27,8 @@ import { FontLoader } from '../fonts/FontLoader';
 import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
 import { buildTheme } from './build-theme';
 import { type AppColorName } from './color-presets';
-import { buildNativePresetStyle } from './color-scope/style-builder';
+import { buildScopeVars, getVariableContextProvider } from './color-scope/style-builder';
+import { applyNativeRootVars } from './native-root-vars';
 import {
   readPersistedTheme,
   readPersistedThemeSync,
@@ -295,6 +296,17 @@ export function BloomThemeProvider({
     applyColorPresetVars(colorPreset, resolved);
   }, [effectiveMode, resolved, colorPreset]);
 
+  // Native only: publish the preset vars into react-native-css's GLOBAL root
+  // variable family so they reach the ENTIRE app tree — navigator screens and
+  // every portal/modal/bottom-sheet that paints outside the provider's React
+  // subtree (and therefore never sees the `VariableContextProvider` vars below).
+  // Web writes the same vars to `document.documentElement` above, so this no-ops
+  // there. Runs before paint via `useIsomorphicLayoutEffect`, matching the
+  // sibling `applyColorPresetVars` side effect.
+  useIsomorphicLayoutEffect(() => {
+    applyNativeRootVars(colorPreset, resolved);
+  }, [colorPreset, resolved]);
+
   const contextValue = useMemo<BloomThemeContextValue>(
     () => ({
       theme: buildTheme(colorPreset, resolved, isAdaptive),
@@ -310,10 +322,15 @@ export function BloomThemeProvider({
   const shouldAwait = awaitHydration ?? Boolean(persistKey && storage);
   const isGated = shouldAwait && !hydrated;
 
-  const nativeVarsStyle = useMemo(
-    () => (Platform.OS === 'web' ? undefined : buildNativePresetStyle(colorPreset, resolved)),
+  // The full `--name -> value` record for the active preset. On native this is
+  // handed to `VariableContextProvider` so descendants resolve `var(--primary)`
+  // etc. through react-native-css's real VariableContext. Web writes these to
+  // `document.documentElement` via `applyColorPresetVars`, so it's unused there.
+  const nativeVars = useMemo(
+    () => (Platform.OS === 'web' ? null : buildScopeVars(colorPreset, resolved)),
     [colorPreset, resolved],
   );
+  const VariableProvider = getVariableContextProvider();
 
   const content = (
     <FontLoader enabled={fonts} fallback={onFontsLoading}>
@@ -321,12 +338,21 @@ export function BloomThemeProvider({
     </FontLoader>
   );
 
+  if (Platform.OS === 'web') {
+    return <BloomThemeContext.Provider value={contextValue}>{content}</BloomThemeContext.Provider>;
+  }
+
+  // The flex wrapper is still needed for layout; the preset vars now flow
+  // through `VariableContextProvider` rather than an (inert) inline-vars style.
+  // If NativeWind isn't installed the wrapper still renders so we never crash.
+  const nativeTree = <View style={[{ flex: 1 }, nativeWrapperStyle]}>{content}</View>;
+
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      {Platform.OS === 'web' ? (
-        content
+      {VariableProvider && nativeVars ? (
+        <VariableProvider value={nativeVars}>{nativeTree}</VariableProvider>
       ) : (
-        <View style={[{ flex: 1 }, nativeVarsStyle, nativeWrapperStyle]}>{content}</View>
+        nativeTree
       )}
     </BloomThemeContext.Provider>
   );