@newtonedev/components 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx

@@ -38,6 +38,7 @@ export function ColorScaleSlider({
   const trackPageX = React.useRef(0);
   const isDragging = React.useRef(false);
   const thumbAnim = React.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -104,7 +105,7 @@ export function ColorScaleSlider({
     ? Math.min(maxNV, Math.max(minNV, value))
     : (maxNV + minNV) / 2;
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
 
   // Sync animated thumb position: animate on prop-driven changes, instant during drag
@@ -131,10 +132,9 @@ export function ColorScaleSlider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
-          // Set thumb position immediately on layout (no animation)
-          const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE);
-          thumbAnim.setValue(ratio * newUsableWidth);
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });

package/src/composites/range-inputs/HueSlider/HueSlider.tsx

@@ -44,6 +44,7 @@ export function HueSlider({
   const trackRef = React.useRef<View>(null);
   const trackWidth = React.useRef(0);
   const trackPageX = React.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -80,7 +81,7 @@ export function HueSlider({
   // For wrapping ranges (max > 359), convert stored value to slider range
   const sliderValue = max > 359 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
 
   const handleValueTextSubmit = React.useCallback(
@@ -123,7 +124,9 @@ export function HueSlider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });

package/src/composites/range-inputs/Slider/Slider.tsx

@@ -26,6 +26,7 @@ export function Slider({
   const trackRef = React.useRef<View>(null);
   const trackWidth = React.useRef(0);
   const trackPageX = React.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -62,7 +63,7 @@ export function Slider({
   ).current;
 
   const ratio = max > min ? (value - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE / 2;
 
@@ -106,7 +107,9 @@ export function Slider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });