@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/cjs/fields/Slider/index.cjs

@@ -35,29 +35,31 @@ var import_t = require("../../shared/t.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jumpMotion = require("./jumpMotion.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const TRACK_HEIGHT = 6;
 const getTrackProps = (outlined, borderRadius) => ({
   unstyled: false,
-  // Ensure track gets default Tamagui dimensions (height/width 100%)
+  height: TRACK_HEIGHT,
+  width: "100%",
+  alignSelf: "center",
   backgroundColor: outlined ? "transparent" : import_colorRamps.formControlColors.background,
   borderWidth: outlined ? 1 : 0,
   borderColor: outlined ? import_colorRamps.formControlColors.border : void 0,
   borderRadius
 });
 const THUMB_SIZE_TOKEN = "$1.5";
+const THUMB_RENDER_SIZE = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN);
 const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb, {
   size: THUMB_SIZE_TOKEN,
+  width: THUMB_RENDER_SIZE,
+  height: THUMB_RENDER_SIZE,
   // LC-04 SOLID-THUMB: the thumb is a solid physical handle lifted off the
   // track by a subtle drop shadow (same values as the Switch thumb) — never a
-  // border. Single overhead light source (y:blur 0.5 per the OPTICS audit).
+  // border. Tamagui's Thumb defaults `borderWidth: 2`; pin 0 here AND on the
+  // instance so the inverse SliderThumb sub-theme cannot restore a ring.
   borderWidth: 0,
-  backgroundColor: import_colorRamps.formControlColors.thumb.base,
-  hoverStyle: {
-    backgroundColor: import_colorRamps.formControlColors.thumb.hover
-  },
-  pressStyle: {
-    backgroundColor: import_colorRamps.formControlColors.thumb.press
-  },
+  borderColor: "transparent",
   ...(import_tamagui.isWeb ? {
+    cursor: "grab",
     boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)"
   } : {
     shadowColor: "#000",
@@ -70,6 +72,12 @@ const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb,
     elevation: 2
   })
 });
+function formatSliderOutput(values, step) {
+  const decimals = (String(step).split(".")[1] || "").length;
+  const fmt = n => decimals ? n.toFixed(decimals) : String(n);
+  if (values.length <= 1) return fmt(values[0] ?? 0);
+  return `${fmt(values[0] ?? 0)}\u2013${fmt(values[values.length - 1] ?? 0)}`;
+}
 const JUMP_KEYS = /* @__PURE__ */new Set(["Home", "End", "PageUp", "PageDown", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
 const JUMP_MOTION_MS = 180;
 const A11Y_ADJUSTABLE_ACTIONS = [{
@@ -111,14 +119,19 @@ function SliderControl({
   const {
     disabledState
   } = (0, import_theme.useResolvedKnobs)();
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const fieldTheme = (0, import_tamagui.useTheme)();
-  const thumbFocusRing = {
-    outlineWidth: 2,
-    outlineStyle: "solid",
+  const thumbFocusRing = (0, import_theme.ensureFocusVisibleRing)({
     outlineColor: fieldTheme.outlineColor?.val ?? "$outlineColor",
     outlineOffset: 2
-  };
+  });
+  const fillToken = hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formSelectedColors.mark;
+  const fillKey = fillToken.startsWith("$") ? fillToken.slice(1) : fillToken;
+  const fillLiteral = fieldTheme[fillKey]?.val || fillToken;
+  const thumbColor = (0, import_theme.useReadableTextOn)(fillLiteral);
   const [animateJump, setAnimateJump] = (0, import_react.useState)(false);
+  const [kbThumb, setKbThumb] = (0, import_react.useState)(null);
+  const [displayValues, setDisplayValues] = (0, import_react.useState)(sliderValue);
   const sessionRef = (0, import_react.useRef)("idle");
   const jumpClearRef = (0, import_react.useRef)(null);
   const paintedRef = (0, import_react.useRef)(false);
@@ -126,7 +139,7 @@ function SliderControl({
   const ignoreJumpUntilRef = (0, import_react.useRef)(0);
   const isSquare = pointy || borderRadius === "$0" || borderRadius === 0;
   const trackWidthRef = (0, import_react.useRef)(0);
-  const thumbSize = (0, import_react.useMemo)(() => (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, !isSquare), [isSquare]);
+  const thumbSize = (0, import_react.useMemo)(() => (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN), []);
   const jumpMotionEnabled = !import_tamagui.isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
   const jumpMotion = (0, import_jumpMotion.useSliderJumpMotion)({
     enabled: jumpMotionEnabled,
@@ -187,6 +200,7 @@ function SliderControl({
     }
     if (valuesEqual(prev, sliderValue)) return;
     currentValuesRef.current = sliderValue;
+    setDisplayValues(sliderValue);
     if (!import_tamagui.isWeb) {
       setNativeValues(sliderValue);
       setA11yValues(null);
@@ -200,160 +214,217 @@ function SliderControl({
   const thumbRadius = isSquare ? 0 : 1e3;
   const transitionProp = motionTransition ?? "none";
   const trackActive = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {
-    backgroundColor: import_colorRamps.formControlColors.border,
+    backgroundColor: fillLiteral,
+    height: "100%",
     borderRadius,
     transition: transitionProp
   });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-    height: size || sizeToken,
+  const hitHeight = size || sizeToken;
+  const thumbFill = thumbColor ?? import_colorRamps.formControlColors.thumb.base;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height: hitHeight,
     alignItems: "center",
     width: "100%",
-    onLayout: event => {
-      trackWidthRef.current = event.nativeEvent.layout.width;
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
-      size: sizeToken,
-      width: "100%",
-      ...sliderProps,
-      disabled,
-      ...(disabled ? disabledState.chromeKnobProps : void 0),
-      ...(readOnly ? {
-        pointerEvents: "none"
-      } : void 0),
-      id,
-      ...(controlled ? {
-        value: sliderValue
-      } : {
-        defaultValue: sliderValue
-      }),
-      ...(!import_tamagui.isWeb && a11yValues ? {
-        value: a11yValues
-      } : void 0),
-      min,
-      max,
-      step,
-      onSlideStart: (_event, value, target) => {
-        if (disabled || readOnly) return;
-        if (!import_tamagui.isWeb && a11yValues) setA11yValues(null);
-        if (target === "track") {
-          jumpMotion.onTrackPress(value);
-          armJump();
-        } else {
-          jumpMotion.onDragStart();
-          sessionRef.current = "drag";
-          clearJumpTimer();
-          setAnimateJump(false);
-        }
+    gap: "$3",
+    ...(disabled ? disabledState.chromeKnobProps : void 0),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      minWidth: 0,
+      height: "100%",
+      justifyContent: "center",
+      onLayout: event => {
+        trackWidthRef.current = event.nativeEvent.layout.width;
       },
-      onSlideEnd: () => {
-        if (!import_tamagui.isWeb) setNativeValues(currentValuesRef.current);
-        if (sessionRef.current === "drag") {
-          sessionRef.current = "idle";
-          ignoreJumpUntilRef.current = Date.now() + 50;
-        }
-      },
-      onKeyDown: event => {
-        if (disabled || readOnly) return;
-        if (JUMP_KEYS.has(event.key)) {
-          armJump();
-        }
-      },
-      onValueChange: values => {
-        jumpMotion.onInternalValueChange(values);
-        currentValuesRef.current = values;
-        if (!import_tamagui.isWeb && sessionRef.current !== "drag") {
-          setNativeValues(values);
-        }
-        if (disabled) return;
-        onChangeValues?.(values);
-      },
-      ...(onBlur ? {
-        onBlur
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      "aria-readonly": readOnly || void 0,
-      "aria-label": ariaLabel,
-      "aria-labelledby": !ariaLabel && hasLabel ? `${id}-label` : void 0,
-      "aria-describedby": describedBy,
-      children: [elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...elevationWrapperProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
+        size: sizeToken,
         width: "100%",
-        height: "100%",
-        borderRadius,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
+        ...sliderProps,
+        disabled,
+        ...(readOnly ? {
+          pointerEvents: "none"
+        } : void 0),
+        id,
+        ...(controlled ? {
+          value: sliderValue
+        } : {
+          defaultValue: sliderValue
+        }),
+        ...(!import_tamagui.isWeb && a11yValues ? {
+          value: a11yValues
+        } : void 0),
+        min,
+        max,
+        step,
+        onPointerDown: event => {
+          if (import_tamagui.isWeb) setKbThumb(null);
+          sliderProps?.onPointerDown?.(event);
+        },
+        onSlideStart: (_event, value, target) => {
+          if (disabled || readOnly) return;
+          if (import_tamagui.isWeb) setKbThumb(null);
+          if (!import_tamagui.isWeb && a11yValues) setA11yValues(null);
+          if (target === "track") {
+            jumpMotion.onTrackPress(value);
+            armJump();
+          } else {
+            jumpMotion.onDragStart();
+            sessionRef.current = "drag";
+            clearJumpTimer();
+            setAnimateJump(false);
+          }
+        },
+        onSlideEnd: () => {
+          if (!import_tamagui.isWeb) setNativeValues(currentValuesRef.current);
+          if (sessionRef.current === "drag") {
+            sessionRef.current = "idle";
+            ignoreJumpUntilRef.current = Date.now() + 50;
+          }
+        },
+        onKeyDown: event => {
+          if (disabled || readOnly) return;
+          if (JUMP_KEYS.has(event.key)) {
+            armJump();
+          }
+        },
+        onValueChange: values => {
+          jumpMotion.onInternalValueChange(values);
+          currentValuesRef.current = values;
+          setDisplayValues(values);
+          if (!import_tamagui.isWeb && sessionRef.current !== "drag") {
+            setNativeValues(values);
+          }
+          if (disabled) return;
+          onChangeValues?.(values);
+        },
+        ...(onBlur ? {
+          onBlur
+        } : void 0),
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-label": ariaLabel,
+        "aria-describedby": describedBy,
+        children: [elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...elevationWrapperProps,
+          width: "100%",
+          height: "100%",
+          borderRadius,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
+            ...getTrackProps(outlined, borderRadius),
+            children: trackActive
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
           ...getTrackProps(outlined, borderRadius),
           children: trackActive
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
-        ...getTrackProps(outlined, borderRadius),
-        children: trackActive
-      }), sliderValue.map((_thumbValue, thumbIndex) => {
-        const isRange = sliderValue.length > 1;
-        const labelContext = ariaLabel ?? labelText;
-        const positionLabel = thumbIndex === 0 ? (0, import_t.t)("Minimum") : thumbIndex === sliderValue.length - 1 ? (0, import_t.t)("Maximum") : (0, import_t.t)("Value {{number}}", {
-          number: thumbIndex + 1
-        });
-        const thumbLabel = isRange ? labelContext ? `${labelContext} ${positionLabel}` : positionLabel : ariaLabel ?? labelText ?? (hasLabel ? void 0 : (0, import_t.t)("Slider"));
-        const thumbA11y = {
-          "aria-label": thumbLabel,
-          "aria-labelledby": !thumbLabel && hasLabel ? `${id}-label` : void 0,
-          "aria-describedby": describedBy
-        };
-        const thumbValueNow = (a11yValues ?? nativeValues)[thumbIndex] ?? sliderValue[thumbIndex] ?? min;
-        const nativeThumbA11y = import_tamagui.isWeb ? void 0 : {
-          accessible: true,
-          // Tamagui's Thumb sets role="slider" (web semantics); on this
-          // RN version it shadows accessibilityRole without mapping to
-          // the iOS adjustable trait — clear it so the trait applies.
-          role: void 0,
-          accessibilityRole: "adjustable",
-          accessibilityLabel: thumbLabel ?? fieldA11y?.label ?? (0, import_t.t)("Slider"),
-          accessibilityHint: fieldA11y?.description,
-          accessibilityValue: {
-            min,
-            max,
-            now: thumbValueNow,
-            text: String(thumbValueNow)
-          },
-          accessibilityState: {
-            disabled: !!disabled
-          },
-          accessibilityActions: A11Y_ADJUSTABLE_ACTIONS,
-          onAccessibilityAction: event => {
-            if (event.nativeEvent.actionName === "increment") {
-              handleA11yAdjust(thumbIndex, 1);
-            } else if (event.nativeEvent.actionName === "decrement") {
-              handleA11yAdjust(thumbIndex, -1);
+        }), sliderValue.map((_thumbValue, thumbIndex) => {
+          const isRange = sliderValue.length > 1;
+          const labelContext = ariaLabel ?? labelText;
+          const positionLabel = thumbIndex === 0 ? (0, import_t.t)("Minimum") : thumbIndex === sliderValue.length - 1 ? (0, import_t.t)("Maximum") : (0, import_t.t)("Value {{number}}", {
+            number: thumbIndex + 1
+          });
+          const thumbLabel = isRange ? labelContext ? `${labelContext} ${positionLabel}` : positionLabel : ariaLabel ?? labelText ?? (hasLabel ? void 0 : (0, import_t.t)("Slider"));
+          const thumbA11y = {
+            "aria-label": thumbLabel,
+            "aria-labelledby": !thumbLabel && hasLabel ? `${id}-label` : void 0,
+            "aria-describedby": describedBy
+          };
+          const thumbValueNow = (a11yValues ?? nativeValues)[thumbIndex] ?? sliderValue[thumbIndex] ?? min;
+          const nativeThumbA11y = import_tamagui.isWeb ? void 0 : {
+            accessible: true,
+            // Tamagui's Thumb sets role="slider" (web semantics); on this
+            // RN version it shadows accessibilityRole without mapping to
+            // the iOS adjustable trait — clear it so the trait applies.
+            role: void 0,
+            accessibilityRole: "adjustable",
+            accessibilityLabel: thumbLabel ?? fieldA11y?.label ?? (0, import_t.t)("Slider"),
+            accessibilityHint: fieldA11y?.description,
+            accessibilityValue: {
+              min,
+              max,
+              now: thumbValueNow,
+              text: String(thumbValueNow)
+            },
+            accessibilityState: {
+              disabled: !!disabled
+            },
+            accessibilityActions: A11Y_ADJUSTABLE_ACTIONS,
+            onAccessibilityAction: event => {
+              if (event.nativeEvent.actionName === "increment") {
+                handleA11yAdjust(thumbIndex, 1);
+              } else if (event.nativeEvent.actionName === "decrement") {
+                handleA11yAdjust(thumbIndex, -1);
+              }
             }
-          }
-        };
-        const thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : {
-          transition: transitionProp
-        };
-        return elevationWrapperProps.elevation && import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          ...elevationWrapperProps,
-          borderRadius: thumbRadius,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+          };
+          const thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : {
+            transition: transitionProp
+          };
+          const thumbRingProps = {
+            outlineWidth: 0,
+            borderWidth: 0,
+            borderColor: "transparent",
+            backgroundColor: thumbFill,
+            hoverStyle: {
+              backgroundColor: thumbFill,
+              ...(import_tamagui.isWeb ? {
+                cursor: "grab"
+              } : void 0)
+            },
+            pressStyle: {
+              backgroundColor: thumbFill,
+              opacity: 0.92,
+              ...(import_tamagui.isWeb ? {
+                cursor: "grabbing"
+              } : void 0)
+            },
+            focusStyle: {
+              outlineWidth: 0
+            },
+            focusVisibleStyle: {
+              outlineWidth: 0
+            },
+            ...(import_tamagui.isWeb ? {
+              onFocus: () => {
+                if ((0, import_theme.wasKeyboardFocus)()) setKbThumb(thumbIndex);else setKbThumb(prev => prev === thumbIndex ? null : prev);
+              },
+              onBlur: () => setKbThumb(prev => prev === thumbIndex ? null : prev)
+            } : void 0),
+            ...(kbThumb === thumbIndex ? {
+              ...thumbFocusRing,
+              "data-kb-focus": "true"
+            } : void 0)
+          };
+          return elevationWrapperProps.elevation && import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...elevationWrapperProps,
+            borderRadius: thumbRadius,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+              index: thumbIndex,
+              circular: !isSquare,
+              borderRadius: thumbRadius,
+              ...thumbRingProps,
+              ...thumbMotionProps,
+              ...thumbA11y,
+              ...nativeThumbA11y
+            })
+          }, thumbIndex) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
             index: thumbIndex,
             circular: !isSquare,
             borderRadius: thumbRadius,
-            focusVisibleStyle: thumbFocusRing,
+            ...thumbRingProps,
             ...thumbMotionProps,
             ...thumbA11y,
             ...nativeThumbA11y
-          })
-        }, thumbIndex) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
-          index: thumbIndex,
-          circular: !isSquare,
-          borderRadius: thumbRadius,
-          focusVisibleStyle: thumbFocusRing,
-          ...thumbMotionProps,
-          ...thumbA11y,
-          ...nativeThumbA11y
-        }, thumbIndex);
-      })]
-    })
+          }, thumbIndex);
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      size: "$2",
+      color: import_colorRamps.formCommonColors.text,
+      minWidth: sliderValue.length > 1 ? 56 : 32,
+      textAlign: "right",
+      "aria-hidden": true,
+      children: formatSliderOutput(displayValues, step)
+    })]
   });
 }
 function Slider({
@@ -413,7 +484,7 @@ function Slider({
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
           variant: "rounded",
           width: "100%",
-          height: 6
+          height: TRACK_HEIGHT
         })
       })
     });