@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -25,11 +25,15 @@ __export(Slider_exports, {
   Slider: () => Slider
 });
 module.exports = __toCommonJS(Slider_exports);
+var import_react = require("react");
 var import_tamagui = require("tamagui");
+var import_theme = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+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 getTrackProps = (outlined, borderRadius) => ({
   unstyled: false,
@@ -39,9 +43,12 @@ const getTrackProps = (outlined, borderRadius) => ({
   borderColor: outlined ? import_colorRamps.formControlColors.border : void 0,
   borderRadius
 });
+const THUMB_SIZE_TOKEN = "$1.5";
 const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb, {
-  size: "$1.5",
-  circular: true,
+  size: THUMB_SIZE_TOKEN,
+  // 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).
   borderWidth: 0,
   backgroundColor: import_colorRamps.formControlColors.thumb.base,
   hoverStyle: {
@@ -49,8 +56,299 @@ const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb,
   },
   pressStyle: {
     backgroundColor: import_colorRamps.formControlColors.thumb.press
-  }
+  },
+  ...(import_tamagui.isWeb ? {
+    boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)"
+  } : {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 2
+  })
 });
+const JUMP_KEYS = /* @__PURE__ */new Set(["Home", "End", "PageUp", "PageDown", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
+const JUMP_MOTION_MS = 180;
+const A11Y_ADJUSTABLE_ACTIONS = [{
+  name: "increment"
+}, {
+  name: "decrement"
+}];
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((v, i) => v === b[i]);
+}
+function SliderControl({
+  id,
+  sliderValue,
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  required,
+  hasError,
+  hasLabel,
+  labelText,
+  "aria-label": ariaLabel,
+  size,
+  sizeToken,
+  outlined,
+  borderRadius,
+  pointy,
+  transitionToken,
+  elevationWrapperProps,
+  sliderProps,
+  onChangeValues,
+  onBlur
+}) {
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const {
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)();
+  const fieldTheme = (0, import_tamagui.useTheme)();
+  const thumbFocusRing = {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: fieldTheme.outlineColor?.val ?? "$outlineColor",
+    outlineOffset: 2
+  };
+  const [animateJump, setAnimateJump] = (0, import_react.useState)(false);
+  const sessionRef = (0, import_react.useRef)("idle");
+  const jumpClearRef = (0, import_react.useRef)(null);
+  const paintedRef = (0, import_react.useRef)(false);
+  const prevValueRef = (0, import_react.useRef)(sliderValue);
+  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 jumpMotionEnabled = !import_tamagui.isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
+  const jumpMotion = (0, import_jumpMotion.useSliderJumpMotion)({
+    enabled: jumpMotionEnabled,
+    min,
+    max,
+    step,
+    transitionToken,
+    initialValues: sliderValue,
+    minStepsBetweenThumbs: sliderProps?.minStepsBetweenThumbs ?? 0,
+    getTrackWidth: () => trackWidthRef.current,
+    thumbSize,
+    resolveAnimationConfig: token => import_theme.animationConfig[token]
+  });
+  const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
+  const [a11yValues, setA11yValues] = (0, import_react.useState)(null);
+  const [nativeValues, setNativeValues] = (0, import_react.useState)(sliderValue);
+  const currentValuesRef = (0, import_react.useRef)(sliderValue);
+  const handleA11yAdjust = (thumbIndex, direction) => {
+    if (disabled || readOnly) return;
+    const current = a11yValues ?? currentValuesRef.current;
+    const currentValue = current[thumbIndex];
+    if (currentValue === void 0) return;
+    const next = (0, import_jumpMotion.snapSliderValue)(currentValue + direction * step, min, max, step);
+    const nextValues = (0, import_jumpMotion.getNextSortedValues)(current, next, thumbIndex);
+    if (!(0, import_jumpMotion.hasMinStepsBetween)(nextValues, (sliderProps?.minStepsBetweenThumbs ?? 0) * step)) return;
+    if (valuesEqual(current, nextValues)) return;
+    currentValuesRef.current = nextValues;
+    jumpMotion.onInternalValueChange(nextValues);
+    setA11yValues(nextValues);
+    setNativeValues(nextValues);
+    onChangeValues?.(nextValues);
+  };
+  const clearJumpTimer = () => {
+    if (jumpClearRef.current !== null) {
+      clearTimeout(jumpClearRef.current);
+      jumpClearRef.current = null;
+    }
+  };
+  const armJump = () => {
+    sessionRef.current = "jump";
+    setAnimateJump(true);
+    clearJumpTimer();
+    jumpClearRef.current = setTimeout(() => {
+      if (sessionRef.current === "jump") {
+        sessionRef.current = "idle";
+        setAnimateJump(false);
+      }
+      jumpClearRef.current = null;
+    }, JUMP_MOTION_MS);
+  };
+  (0, import_react.useEffect)(() => () => clearJumpTimer(), []);
+  (0, import_react.useEffect)(() => {
+    const prev = prevValueRef.current;
+    prevValueRef.current = sliderValue;
+    if (!paintedRef.current) {
+      paintedRef.current = true;
+      return;
+    }
+    if (valuesEqual(prev, sliderValue)) return;
+    currentValuesRef.current = sliderValue;
+    if (!import_tamagui.isWeb) {
+      setNativeValues(sliderValue);
+      setA11yValues(null);
+    }
+    if (sessionRef.current === "drag") return;
+    if (Date.now() < ignoreJumpUntilRef.current) return;
+    armJump();
+  }, [sliderValue]);
+  const motionTransition = animateJump ? transitionToken : void 0;
+  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,
+    transition: transitionProp
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    height: size || sizeToken,
+    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,
+      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);
+        }
+      },
+      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,
+        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
+      }), 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, {
+            index: thumbIndex,
+            circular: !isSquare,
+            borderRadius: thumbRadius,
+            focusVisibleStyle: thumbFocusRing,
+            ...thumbMotionProps,
+            ...thumbA11y,
+            ...nativeThumbA11y
+          })
+        }, thumbIndex) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+          index: thumbIndex,
+          circular: !isSquare,
+          borderRadius: thumbRadius,
+          focusVisibleStyle: thumbFocusRing,
+          ...thumbMotionProps,
+          ...thumbA11y,
+          ...nativeThumbA11y
+        }, thumbIndex);
+      })]
+    })
+  });
+}
 function Slider({
   name,
   form: formProp,
@@ -66,6 +364,7 @@ function Slider({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   min = 0,
@@ -73,8 +372,13 @@ function Slider({
   step = 1,
   sliderProps,
   skeleton,
-  compact
+  compact,
+  "aria-label": ariaLabel
 }) {
+  const handleValueChange = values => {
+    onChange?.(values);
+    onValueChange?.(values);
+  };
   const {
     resolvedForm,
     knobProps,
@@ -86,7 +390,9 @@ function Slider({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const hasLabel = Boolean(label);
   const elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
+  const transitionToken = knobProps.transition || "quick";
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -105,58 +411,32 @@ function Slider({
       })
     });
   }
-  const renderSlider = (sliderValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-    height: size || knobProps.sizeToken,
-    alignItems: "center",
-    width: "100%",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
-      size: knobProps.sizeToken,
-      width: "100%",
-      ...sliderProps,
-      disabled,
-      ...(readOnly ? {
-        pointerEvents: "none"
-      } : void 0),
-      id,
-      defaultValue: sliderValue,
-      min,
-      max,
-      step,
-      onValueChange: values => {
-        if (disabled) return;
-        handleChange?.(values);
-        onValueChange?.(values);
-      },
-      ...(handleBlur ? {
-        onBlur: handleBlur
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      "aria-readonly": readOnly || void 0,
-      children: [elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...elevationWrapperProps,
-        borderRadius: knobProps.borderRadius.borderRadius,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
-          ...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {
-            backgroundColor: import_colorRamps.formControlColors.border
-          })
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
-        ...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {
-          backgroundColor: import_colorRamps.formControlColors.border
-        })
-      }), elevationWrapperProps.elevation ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...elevationWrapperProps,
-        borderRadius: 1e3,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
-          index: 0
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
-        index: 0
-      })]
-    })
+  const control = (sliderValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderControl, {
+    id,
+    sliderValue,
+    min,
+    max,
+    step,
+    disabled,
+    readOnly,
+    required,
+    hasError,
+    hasLabel,
+    labelText: typeof label === "string" ? label : void 0,
+    "aria-label": ariaLabel,
+    size,
+    sizeToken: knobProps.sizeToken,
+    outlined: knobProps.outlined,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    pointy: knobProps.pointy,
+    transitionToken,
+    elevationWrapperProps,
+    sliderProps,
+    onChangeValues: values => {
+      handleChange?.(values);
+      handleValueChange(values);
+    },
+    onBlur: handleBlur
   });
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -168,7 +448,8 @@ function Slider({
       helperText,
       size,
       knobProps,
-      children: renderSlider(value ?? defaultValue ?? [min], void 0, onBlur, !!error)
+      disabled,
+      children: control(value ?? defaultValue ?? [min], void 0, onBlur, !!error)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -189,8 +470,9 @@ function Slider({
         helperText,
         size,
         knobProps,
-        children: renderSlider(value !== void 0 ? value : normalizedValue, values => {
-          field.handleChange(values[0]);
+        disabled,
+        children: control(value !== void 0 ? value : normalizedValue, values => {
+          field.handleChange(values.length > 1 ? values : values[0]);
         }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
       });
     }