@multiplatform.one/forms 7.34.3 → 7.35.0

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

@@ -22,13 +22,17 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Slider_exports = {};
 __export(Slider_exports, {
-  Slider: () => Slider
+  SLIDER_TRACK_HEIGHT: () => SLIDER_TRACK_HEIGHT,
+  Slider: () => Slider,
+  sliderThumbToken: () => sliderThumbToken
 });
 module.exports = __toCommonJS(Slider_exports);
+var import_instantMotion = require("../../shared/instantMotion.cjs");
 var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_theme2 = require("@multiplatform.one/theme");
+var import_theme3 = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
@@ -36,11 +40,13 @@ 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;
+var import_react2 = require("react");
+const SLIDER_TRACK_HEIGHT = 4;
+const TRACK_HEIGHT = SLIDER_TRACK_HEIGHT;
 function radiusStopFromToken(token) {
   if (token === 0 || token === "$0") return "none";
-  for (const stop of Object.keys(import_theme2.borderRadiusMap)) {
-    if (import_theme2.borderRadiusMap[stop] === token) return stop;
+  for (const stop of Object.keys(import_theme3.borderRadiusMap)) {
+    if (import_theme3.borderRadiusMap[stop] === token) return stop;
   }
   throw new Error(`Slider: "${String(token)}" is not a radius token in borderRadiusMap`);
 }
@@ -61,7 +67,18 @@ const getTrackProps = (outlined, borderRadius) => ({
   "data-slider-part": "rail"
 });
 const THUMB_SIZE_TOKEN = "$1.5";
-const THUMB_RENDER_SIZE = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, !import_tamagui.isWeb && (0, import_theme.isTouchSurface)());
+const thumbTokenForSize = {
+  $2: "$1",
+  $3: "$1",
+  $4: THUMB_SIZE_TOKEN,
+  $true: THUMB_SIZE_TOKEN,
+  $5: "$2",
+  $6: "$2.5"
+};
+function sliderThumbToken(sizeToken) {
+  return thumbTokenForSize[sizeToken] ?? THUMB_SIZE_TOKEN;
+}
+const THUMB_RENDER_SIZE = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)());
 const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb, {
   size: THUMB_SIZE_TOKEN,
   width: THUMB_RENDER_SIZE,
@@ -73,18 +90,8 @@ const SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb,
   borderWidth: 0,
   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",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 2,
-    elevation: 2
-  })
+    cursor: "grab"
+  } : {})
 });
 function formatSliderOutput(values, step) {
   const decimals = (String(step).split(".")[1] || "").length;
@@ -93,7 +100,6 @@ function formatSliderOutput(values, step) {
   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 = [{
   name: "increment"
 }, {
@@ -130,20 +136,21 @@ function SliderControl({
 }) {
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const {
-    disabledState
-  } = (0, import_theme2.useResolvedKnobs)();
-  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
+    disabledState,
+    knobProps
+  } = (0, import_theme3.useResolvedKnobs)();
+  if (import_tamagui.isWeb) (0, import_theme3.ensureKeyboardModalityTracking)();
   const fieldTheme = (0, import_tamagui.useTheme)();
-  const thumbFocusRing = (0, import_theme2.ensureFocusVisibleRing)({
+  const thumbFocusRing = (0, import_theme3.ensureFocusVisibleRing)({
     outlineColor: fieldTheme.outlineColor?.val ?? "$outlineColor",
     // LC-71 §4 halo: circular thumb. At offset 0 the band is concentric with
     // the thumb's edge and reads as a fatter thumb rather than a focus ring.
-    outlineOffset: import_theme2.FOCUS_RING_HALO_OFFSET
+    outlineOffset: import_theme3.FOCUS_RING_HALO_OFFSET
   });
   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_theme2.useReadableTextOn)(fillLiteral);
+  const thumbColor = (0, import_theme3.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);
@@ -153,24 +160,24 @@ function SliderControl({
   const prevValueRef = (0, import_react.useRef)(sliderValue);
   const ignoreJumpUntilRef = (0, import_react.useRef)(0);
   const radiusStop = radiusStopFromToken(borderRadius);
-  const railRadius = (0, import_theme2.resolveRadiusClass)("BINARY", radiusStop, {
+  const railRadius = (0, import_theme3.resolveRadiusClass)("BINARY", radiusStop, {
     heightPx: TRACK_HEIGHT
   });
   const trackWidthRef = (0, import_react.useRef)(0);
-  const hydrationTouch = (0, import_theme.useTouchSurface)();
-  const thumbSize = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, hydrationTouch);
-  const jumpMotionEnabled = !import_tamagui.isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
+  const hydrationTouch = (0, import_theme2.useTouchSurface)();
+  const thumbSize = (0, import_jumpMotion.getSliderThumbRenderSize)(sliderThumbToken(String(sizeToken)), void 0, hydrationTouch);
+  const jumpMotionEnabled = Boolean(transitionToken) && !import_tamagui.isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
   const jumpMotion = (0, import_jumpMotion.useSliderJumpMotion)({
     enabled: jumpMotionEnabled,
     min,
     max,
     step,
-    transitionToken,
+    transitionToken: transitionToken ?? "0ms",
     initialValues: sliderValue,
     minStepsBetweenThumbs: sliderProps?.minStepsBetweenThumbs ?? 0,
     getTrackWidth: () => trackWidthRef.current,
     thumbSize,
-    resolveAnimationConfig: token => import_theme2.animationConfig[token]
+    resolveAnimationConfig: token => import_theme3.animationConfig[token]
   });
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const [a11yValues, setA11yValues] = (0, import_react.useState)(null);
@@ -198,6 +205,7 @@ function SliderControl({
     }
   };
   const armJump = () => {
+    if (!transitionToken) return;
     sessionRef.current = "jump";
     setAnimateJump(true);
     clearJumpTimer();
@@ -207,7 +215,7 @@ function SliderControl({
         setAnimateJump(false);
       }
       jumpClearRef.current = null;
-    }, JUMP_MOTION_MS);
+    }, (0, import_theme.motionSettleMs)(transitionToken));
   };
   (0, import_react.useEffect)(() => () => clearJumpTimer(), []);
   (0, import_react.useEffect)(() => {
@@ -230,10 +238,10 @@ function SliderControl({
     armJump();
   }, [sliderValue]);
   const motionTransition = animateJump ? transitionToken : void 0;
-  const thumbRadius = (0, import_theme2.resolveRadiusClass)("BINARY", radiusStop, {
+  const thumbRadius = (0, import_theme3.resolveRadiusClass)("BINARY", radiusStop, {
     heightPx: thumbSize
   });
-  const transitionProp = motionTransition ?? "none";
+  const transitionProp = (0, import_instantMotion.transitionOrInstant)(motionTransition);
   const trackActive = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {
     backgroundColor: fillLiteral,
     height: "100%",
@@ -242,7 +250,10 @@ function SliderControl({
       borderRadius: railRadius
     },
     "data-slider-part": "fill",
-    transition: transitionProp
+    ...(0, import_theme.transitionProps)({
+      transition: transitionProp,
+      animateOnly: import_theme.motionRoleProperties.control
+    }, ["left", "right", "top", "bottom"])
   });
   const hitHeight = size || sizeToken;
   const thumbFill = thumbColor ?? import_colorRamps.formControlColors.thumb.base;
@@ -381,9 +392,10 @@ function SliderControl({
               }
             }
           };
-          const thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : {
-            transition: transitionProp
-          };
+          const thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : (0, import_theme.transitionProps)({
+            transition: transitionProp,
+            animateOnly: import_theme.motionRoleProperties.control
+          }, ["left", "right", "top", "bottom"]);
           const thumbRingProps = {
             outlineWidth: 0,
             borderWidth: 0,
@@ -410,7 +422,7 @@ function SliderControl({
             },
             ...(import_tamagui.isWeb ? {
               onFocus: () => {
-                if ((0, import_theme2.wasKeyboardFocus)()) setKbThumb(thumbIndex);else setKbThumb(prev => prev === thumbIndex ? null : prev);
+                if ((0, import_theme3.wasKeyboardFocus)()) setKbThumb(thumbIndex);else setKbThumb(prev => prev === thumbIndex ? null : prev);
               },
               onBlur: () => setKbThumb(prev => prev === thumbIndex ? null : prev)
             } : void 0),
@@ -423,12 +435,14 @@ function SliderControl({
             ...elevationWrapperProps,
             borderRadius: thumbRadius,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+              ...knobProps.thumbShadow,
               width: thumbSize,
               height: thumbSize,
               index: thumbIndex,
               circular: false,
               borderRadius: thumbRadius,
               style: {
+                ...knobProps.thumbShadow.style,
                 borderRadius: thumbRadius
               },
               "data-slider-part": "thumb",
@@ -437,13 +451,16 @@ function SliderControl({
               ...thumbA11y,
               ...nativeThumbA11y
             })
-          }, thumbIndex) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+          }, thumbIndex) : /* @__PURE__ */(0, import_react2.createElement)(SliderThumbFrame, {
+            ...knobProps.thumbShadow,
             width: thumbSize,
             height: thumbSize,
+            key: thumbIndex,
             index: thumbIndex,
             circular: false,
             borderRadius: thumbRadius,
             style: {
+              ...knobProps.thumbShadow.style,
               borderRadius: thumbRadius
             },
             "data-slider-part": "thumb",
@@ -451,7 +468,7 @@ function SliderControl({
             ...thumbMotionProps,
             ...thumbA11y,
             ...nativeThumbA11y
-          }, thumbIndex);
+          });
         })]
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
@@ -487,7 +504,6 @@ function Slider({
   step = 1,
   sliderProps,
   skeleton,
-  compact,
   "aria-label": ariaLabel
 }) {
   const handleValueChange = values => {
@@ -502,12 +518,12 @@ function Slider({
   } = (0, import_utils.useFormField)({
     form: formProp,
     id: idProp,
-    compact
+    size
   });
   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";
+  const transitionToken = knobProps.motion.control.transition;
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,

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

@@ -24,30 +24,36 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Slider_exports = {};
 __export(Slider_exports, {
-  Slider: () => Slider
+  SLIDER_TRACK_HEIGHT: () => SLIDER_TRACK_HEIGHT,
+  Slider: () => Slider,
+  sliderThumbToken: () => sliderThumbToken
 });
 module.exports = __toCommonJS(Slider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var import_tamagui = require("tamagui");
+var import_instantMotion = require("../../shared/instantMotion.native.js");
+var import_theme = require("@multiplatform.one/theme");
 var import_theme2 = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_theme3 = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_jumpMotion = require("./jumpMotion.native.js");
-var TRACK_HEIGHT = 6;
+var SLIDER_TRACK_HEIGHT = 4;
+var TRACK_HEIGHT = SLIDER_TRACK_HEIGHT;
 function radiusStopFromToken(token) {
   if (token === 0 || token === "$0") return "none";
   var _iteratorNormalCompletion = true,
     _didIteratorError = false,
     _iteratorError = void 0;
   try {
-    for (var _iterator = Object.keys(import_theme2.borderRadiusMap)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+    for (var _iterator = Object.keys(import_theme3.borderRadiusMap)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
       var stop = _step.value;
-      if (import_theme2.borderRadiusMap[stop] === token) return stop;
+      if (import_theme3.borderRadiusMap[stop] === token) return stop;
     }
   } catch (err) {
     _didIteratorError = true;
@@ -84,7 +90,19 @@ var getTrackProps = function getTrackProps2(outlined, borderRadius) {
   };
 };
 var THUMB_SIZE_TOKEN = "$1.5";
-var THUMB_RENDER_SIZE = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, !import_tamagui.isWeb && (0, import_theme.isTouchSurface)());
+var thumbTokenForSize = {
+  $2: "$1",
+  $3: "$1",
+  $4: THUMB_SIZE_TOKEN,
+  $true: THUMB_SIZE_TOKEN,
+  $5: "$2",
+  $6: "$2.5"
+};
+function sliderThumbToken(sizeToken) {
+  var _thumbTokenForSize_sizeToken;
+  return (_thumbTokenForSize_sizeToken = thumbTokenForSize[sizeToken]) !== null && _thumbTokenForSize_sizeToken !== void 0 ? _thumbTokenForSize_sizeToken : THUMB_SIZE_TOKEN;
+}
+var THUMB_RENDER_SIZE = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, !import_tamagui.isWeb && (0, import_theme2.isTouchSurface)());
 var SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb, {
   size: THUMB_SIZE_TOKEN,
   width: THUMB_RENDER_SIZE,
@@ -96,18 +114,8 @@ var SliderThumbFrame = (0, import_tamagui.styled)(import_tamagui.Slider.Thumb, {
   borderWidth: 0,
   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",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 2,
-    elevation: 2
-  })
+    cursor: "grab"
+  } : {})
 });
 function formatSliderOutput(values, step) {
   var _values_, _values_1, _values_2;
@@ -119,7 +127,6 @@ function formatSliderOutput(values, step) {
   return `${fmt((_values_1 = values[0]) !== null && _values_1 !== void 0 ? _values_1 : 0)}\u2013${fmt((_values_2 = values[values.length - 1]) !== null && _values_2 !== void 0 ? _values_2 : 0)}`;
 }
 var JUMP_KEYS = /* @__PURE__ */new Set(["Home", "End", "PageUp", "PageDown", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
-var JUMP_MOTION_MS = 180;
 var A11Y_ADJUSTABLE_ACTIONS = [{
   name: "increment"
 }, {
@@ -161,42 +168,43 @@ function SliderControl(param) {
   var _fieldTheme_outlineColor, _fieldTheme_fillKey;
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var {
-    disabledState
-  } = (0, import_theme2.useResolvedKnobs)();
-  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
+    disabledState,
+    knobProps
+  } = (0, import_theme3.useResolvedKnobs)();
+  if (import_tamagui.isWeb) (0, import_theme3.ensureKeyboardModalityTracking)();
   var fieldTheme = (0, import_tamagui.useTheme)();
-  var thumbFocusRing = (0, import_theme2.ensureFocusVisibleRing)({
+  var thumbFocusRing = (0, import_theme3.ensureFocusVisibleRing)({
     outlineColor: (_ref = (_fieldTheme_outlineColor = fieldTheme.outlineColor) === null || _fieldTheme_outlineColor === void 0 ? void 0 : _fieldTheme_outlineColor.val) !== null && _ref !== void 0 ? _ref : "$outlineColor",
     // LC-71 §4 halo: circular thumb. At offset 0 the band is concentric with
     // the thumb's edge and reads as a fatter thumb rather than a focus ring.
-    outlineOffset: import_theme2.FOCUS_RING_HALO_OFFSET
+    outlineOffset: import_theme3.FOCUS_RING_HALO_OFFSET
   });
   var fillToken = hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formSelectedColors.mark;
   var fillKey = fillToken.startsWith("$") ? fillToken.slice(1) : fillToken;
   var fillLiteral = ((_fieldTheme_fillKey = fieldTheme[fillKey]) === null || _fieldTheme_fillKey === void 0 ? void 0 : _fieldTheme_fillKey.val) || fillToken;
-  var thumbColor = (0, import_theme2.useReadableTextOn)(fillLiteral);
-  var [animateJump, setAnimateJump] = (0, import_react.useState)(false);
-  var [kbThumb, setKbThumb] = (0, import_react.useState)(null);
-  var [displayValues, setDisplayValues] = (0, import_react.useState)(sliderValue);
-  var sessionRef = (0, import_react.useRef)("idle");
-  var jumpClearRef = (0, import_react.useRef)(null);
-  var paintedRef = (0, import_react.useRef)(false);
-  var prevValueRef = (0, import_react.useRef)(sliderValue);
-  var ignoreJumpUntilRef = (0, import_react.useRef)(0);
+  var thumbColor = (0, import_theme3.useReadableTextOn)(fillLiteral);
+  var [animateJump, setAnimateJump] = (0, import_react2.useState)(false);
+  var [kbThumb, setKbThumb] = (0, import_react2.useState)(null);
+  var [displayValues, setDisplayValues] = (0, import_react2.useState)(sliderValue);
+  var sessionRef = (0, import_react2.useRef)("idle");
+  var jumpClearRef = (0, import_react2.useRef)(null);
+  var paintedRef = (0, import_react2.useRef)(false);
+  var prevValueRef = (0, import_react2.useRef)(sliderValue);
+  var ignoreJumpUntilRef = (0, import_react2.useRef)(0);
   var radiusStop = radiusStopFromToken(borderRadius);
-  var railRadius = (0, import_theme2.resolveRadiusClass)("BINARY", radiusStop, {
+  var railRadius = (0, import_theme3.resolveRadiusClass)("BINARY", radiusStop, {
     heightPx: TRACK_HEIGHT
   });
-  var trackWidthRef = (0, import_react.useRef)(0);
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
-  var thumbSize = (0, import_jumpMotion.getSliderThumbRenderSize)(THUMB_SIZE_TOKEN, void 0, hydrationTouch);
-  var jumpMotionEnabled = !import_tamagui.isWeb && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.orientation) !== "vertical" && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.dir) !== "rtl";
+  var trackWidthRef = (0, import_react2.useRef)(0);
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
+  var thumbSize = (0, import_jumpMotion.getSliderThumbRenderSize)(sliderThumbToken(String(sizeToken)), void 0, hydrationTouch);
+  var jumpMotionEnabled = Boolean(transitionToken) && !import_tamagui.isWeb && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.orientation) !== "vertical" && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.dir) !== "rtl";
   var jumpMotion = (0, import_jumpMotion.useSliderJumpMotion)({
     enabled: jumpMotionEnabled,
     min,
     max,
     step,
-    transitionToken,
+    transitionToken: transitionToken !== null && transitionToken !== void 0 ? transitionToken : "0ms",
     initialValues: sliderValue,
     minStepsBetweenThumbs: (_ref1 = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.minStepsBetweenThumbs) !== null && _ref1 !== void 0 ? _ref1 : 0,
     getTrackWidth: function getTrackWidth() {
@@ -204,13 +212,13 @@ function SliderControl(param) {
     },
     thumbSize,
     resolveAnimationConfig: function resolveAnimationConfig(token) {
-      return import_theme2.animationConfig[token];
+      return import_theme3.animationConfig[token];
     }
   });
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
-  var [a11yValues, setA11yValues] = (0, import_react.useState)(null);
-  var [nativeValues, setNativeValues] = (0, import_react.useState)(sliderValue);
-  var currentValuesRef = (0, import_react.useRef)(sliderValue);
+  var [a11yValues, setA11yValues] = (0, import_react2.useState)(null);
+  var [nativeValues, setNativeValues] = (0, import_react2.useState)(sliderValue);
+  var currentValuesRef = (0, import_react2.useRef)(sliderValue);
   var handleA11yAdjust = function handleA11yAdjust2(thumbIndex, direction) {
     var _ref2;
     if (disabled || readOnly) return;
@@ -234,6 +242,7 @@ function SliderControl(param) {
     }
   };
   var armJump = function armJump2() {
+    if (!transitionToken) return;
     sessionRef.current = "jump";
     setAnimateJump(true);
     clearJumpTimer();
@@ -243,14 +252,14 @@ function SliderControl(param) {
         setAnimateJump(false);
       }
       jumpClearRef.current = null;
-    }, JUMP_MOTION_MS);
+    }, (0, import_theme.motionSettleMs)(transitionToken));
   };
-  (0, import_react.useEffect)(function () {
+  (0, import_react2.useEffect)(function () {
     return function () {
       return clearJumpTimer();
     };
   }, []);
-  (0, import_react.useEffect)(function () {
+  (0, import_react2.useEffect)(function () {
     var prev = prevValueRef.current;
     prevValueRef.current = sliderValue;
     if (!paintedRef.current) {
@@ -270,10 +279,10 @@ function SliderControl(param) {
     armJump();
   }, [sliderValue]);
   var motionTransition = animateJump ? transitionToken : void 0;
-  var thumbRadius = (0, import_theme2.resolveRadiusClass)("BINARY", radiusStop, {
+  var thumbRadius = (0, import_theme3.resolveRadiusClass)("BINARY", radiusStop, {
     heightPx: thumbSize
   });
-  var transitionProp = motionTransition !== null && motionTransition !== void 0 ? motionTransition : "none";
+  var transitionProp = (0, import_instantMotion.transitionOrInstant)(motionTransition);
   var trackActive = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {
     backgroundColor: fillLiteral,
     height: "100%",
@@ -284,7 +293,10 @@ function SliderControl(param) {
       borderRadius: railRadius
     },
     "data-slider-part": "fill",
-    transition: transitionProp
+    ...(0, import_theme.transitionProps)({
+      transition: transitionProp,
+      animateOnly: import_theme.motionRoleProperties.control
+    }, ["left", "right", "top", "bottom"])
   });
   var hitHeight = size || sizeToken;
   var thumbFill = thumbColor !== null && thumbColor !== void 0 ? thumbColor : import_colorRamps.formControlColors.thumb.base;
@@ -437,9 +449,10 @@ function SliderControl(param) {
               }
             }
           };
-          var thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : {
-            transition: transitionProp
-          };
+          var thumbMotionProps = jumpMotionEnabled ? jumpMotion.getThumbMotionProps(thumbIndex) : (0, import_theme.transitionProps)({
+            transition: transitionProp,
+            animateOnly: import_theme.motionRoleProperties.control
+          }, ["left", "right", "top", "bottom"]);
           var thumbRingProps = {
             outlineWidth: 0,
             borderWidth: 0,
@@ -466,7 +479,7 @@ function SliderControl(param) {
             },
             ...(import_tamagui.isWeb ? {
               onFocus: function onFocus() {
-                if ((0, import_theme2.wasKeyboardFocus)()) setKbThumb(thumbIndex);else setKbThumb(function (prev) {
+                if ((0, import_theme3.wasKeyboardFocus)()) setKbThumb(thumbIndex);else setKbThumb(function (prev) {
                   return prev === thumbIndex ? null : prev;
                 });
               },
@@ -485,12 +498,14 @@ function SliderControl(param) {
             ...elevationWrapperProps,
             borderRadius: thumbRadius,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+              ...knobProps.thumbShadow,
               width: thumbSize,
               height: thumbSize,
               index: thumbIndex,
               circular: false,
               borderRadius: thumbRadius,
               style: {
+                ...knobProps.thumbShadow.style,
                 borderRadius: thumbRadius
               },
               "data-slider-part": "thumb",
@@ -499,13 +514,16 @@ function SliderControl(param) {
               ...thumbA11y,
               ...nativeThumbA11y
             })
-          }, thumbIndex) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+          }, thumbIndex) : /* @__PURE__ */(0, import_react.createElement)(SliderThumbFrame, {
+            ...knobProps.thumbShadow,
             width: thumbSize,
             height: thumbSize,
+            key: thumbIndex,
             index: thumbIndex,
             circular: false,
             borderRadius: thumbRadius,
             style: {
+              ...knobProps.thumbShadow.style,
               borderRadius: thumbRadius
             },
             "data-slider-part": "thumb",
@@ -513,7 +531,7 @@ function SliderControl(param) {
             ...thumbMotionProps,
             ...thumbA11y,
             ...nativeThumbA11y
-          }, thumbIndex);
+          });
         })]
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
@@ -550,7 +568,6 @@ function Slider(param) {
     step = 1,
     sliderProps,
     skeleton,
-    compact,
     "aria-label": ariaLabel
   } = param;
   var handleValueChange = function handleValueChange2(values) {
@@ -565,12 +582,12 @@ function Slider(param) {
   } = (0, import_utils.useFormField)({
     form: formProp,
     id: idProp,
-    compact
+    size
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   var hasLabel = Boolean(label);
   var elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
-  var transitionToken = knobProps.transition || "quick";
+  var transitionToken = knobProps.motion.control.transition;
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,