@tamagui/slider 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/index.native.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+	SliderContext: () => import_constants.SliderContext,
+	SliderFrame: () => import_SliderImpl.SliderFrame
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Slider.native.js"), module.exports);
+var import_constants = require("./constants.native.js");
+var import_SliderImpl = require("./SliderImpl.native.js");

package/dist/jsx/index.native.js

@@ -1,35 +1,35 @@
 "use strict";
 
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  SliderContext: () => import_constants.SliderContext,
-  SliderFrame: () => import_SliderImpl.SliderFrame
+	SliderContext: () => import_constants.SliderContext,
+	SliderFrame: () => import_SliderImpl.SliderFrame
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./Slider.native.js"), module.exports);
 var import_constants = require("./constants.native.js");
 var import_SliderImpl = require("./SliderImpl.native.js");
+
 //# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAqB;AAE9B,IAAAC,gBAAS,GAAAF,MAAmB,CAAAG,wBAAA","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\n__export(index_exports, {\n  SliderContext: () => import_constants.SliderContext,\n  SliderFrame: () => import_SliderImpl.SliderFrame\n});\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./Slider\"), module.exports);\nvar import_constants = require(\"./constants\");\nvar import_SliderImpl = require(\"./SliderImpl\");\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,SAAS,eAAe;CACtB,qBAAqB,iBAAiB;CACtC,mBAAmB,kBAAkB;AACvC,CAAC;AACD,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,oBAAU,GAAG,OAAO,OAAO;AAC7D,IAAI,mBAAmB,QAAQ,uBAAa;AAC5C,IAAI,oBAAoB,QAAQ,wBAAc"}

package/dist/jsx/types.mjs

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.mjs.map

package/dist/jsx/types.native.cjs

@@ -0,0 +1,19 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/jsx/types.native.js

@@ -1,21 +1,21 @@
 "use strict";
 
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
+
 //# sourceMappingURL=types.native.js.map

package/dist/jsx/types.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.native.js","names":[],"sources":["jsx/types.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar types_exports = {};\nmodule.exports = __toCommonJS(types_exports);\n//# sourceMappingURL=types.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -34,24 +34,25 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/get-token": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7",
-    "@tamagui/use-debounce": "2.7.7",
-    "@tamagui/use-direction": "2.7.7"
+    "@tamagui/compose-refs": "3.0.0-beta.643.1",
+    "@tamagui/constants": "3.0.0-beta.643.1",
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/create-context": "3.0.0-beta.643.1",
+    "@tamagui/get-token": "3.0.0-beta.643.1",
+    "@tamagui/helpers": "3.0.0-beta.643.1",
+    "@tamagui/stacks": "3.0.0-beta.643.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.643.1",
+    "@tamagui/use-debounce": "3.0.0-beta.643.1",
+    "@tamagui/use-direction": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19",
-    "react-native": "0.83.2"
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=19",
+    "react-native-web": "*"
   },
   "module:jsx": "dist/jsx",
   "repository": {

package/src/Slider.tsx

@@ -9,16 +9,17 @@ import type {
   TamaguiElement,
 } from '@tamagui/core'
 import {
+  createStyledHOC,
+  createRefComponent,
   getTokens,
   getVariableValue,
+  resolveSizeToken,
   styled,
   useConfiguration,
   useCreateShallowSetState,
 } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
 import { clamp, composeEventHandlers, withStaticProperties } from '@tamagui/helpers'
-import type { SizableStackProps } from '@tamagui/stacks'
-import { ThemeableStack } from '@tamagui/stacks'
+import { YStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import * as React from 'react'
@@ -56,19 +57,34 @@ import type {
 } from './types'
 
 const activeSliderMeasureListeners = new Set<Function>()
+let activeSliderMeasureInterval: ReturnType<typeof setInterval> | undefined
 
 // run an interval on web as using translate can move things at any moment
 // without triggering layout or intersection observers
+function startSliderMeasureInterval() {
+  if (
+    process.env.TAMAGUI_TARGET !== 'web' ||
+    activeSliderMeasureInterval !== undefined ||
+    process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL
+  ) {
+    return
+  }
 
-if (process.env.TAMAGUI_TARGET === 'web') {
-  if (!process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) {
-    setInterval?.(
-      () => {
-        activeSliderMeasureListeners.forEach((cb) => cb())
-      },
-      // really doesn't need to be super often
-      1000
-    )
+  activeSliderMeasureInterval = setInterval(() => {
+    activeSliderMeasureListeners.forEach((cb) => cb())
+  }, 1000)
+}
+
+function addActiveSliderMeasureListener(listener: Function) {
+  activeSliderMeasureListeners.add(listener)
+  startSliderMeasureInterval()
+}
+
+function removeActiveSliderMeasureListener(listener: Function) {
+  activeSliderMeasureListeners.delete(listener)
+  if (!activeSliderMeasureListeners.size && activeSliderMeasureInterval !== undefined) {
+    clearInterval(activeSliderMeasureInterval)
+    activeSliderMeasureInterval = undefined
   }
 }
 
@@ -76,7 +92,7 @@ if (process.env.TAMAGUI_TARGET === 'web') {
  * SliderHorizontal
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(
+const SliderHorizontal = createRefComponent<View, SliderHorizontalProps>(
   (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {
     const {
       min,
@@ -191,9 +207,9 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
       (entries) => {
         debouncedMeasure()
         if (entries?.[0].isIntersecting) {
-          activeSliderMeasureListeners.add(debouncedMeasure)
+          addActiveSliderMeasureListener(debouncedMeasure)
         } else {
-          activeSliderMeasureListeners.delete(debouncedMeasure)
+          removeActiveSliderMeasureListener(debouncedMeasure)
         }
       },
       {
@@ -206,7 +222,7 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
     io.observe(node)
 
     return () => {
-      activeSliderMeasureListeners.delete(debouncedMeasure)
+      removeActiveSliderMeasureListener(debouncedMeasure)
       io.disconnect()
     }
   }, [])
@@ -216,7 +232,7 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
  * SliderVertical
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
+const SliderVertical = createRefComponent<View, SliderVerticalProps>(
   (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {
     const {
       min,
@@ -301,28 +317,20 @@ const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
 
 type SliderTrackElement = TamaguiElement
 
+// Unstyled track frame: fill + clip only. Track color and radius live in the
+// tamagui skin (code/ui/tamagui/src/components/Slider.tsx).
 export const SliderTrackFrame = styled(SliderFrame, {
-  name: 'Slider',
-
-  variants: {
-    unstyled: {
-      false: {
-        height: '100%',
-        width: '100%',
-        backgroundColor: '$background',
-        position: 'relative',
-        borderRadius: 100_000,
-        overflow: 'hidden',
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+  displayName: 'Slider',
+  height: '100%',
+  width: '100%',
+  position: 'relative',
+  overflow: 'hidden',
 })
 
-const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
+// createStyledHOC (not createRefComponent) so the tamagui skin can layer track
+// color/radius via styled(Slider.Track, { ... }); the render body is unchanged.
+const SliderTrack = createStyledHOC(
+  SliderTrackFrame,
   function SliderTrack(props: ScopedProps<SliderTrackProps>, forwardedRef) {
     const { __scopeSlider, ...trackProps } = props
     const context = useSliderContext(__scopeSlider)
@@ -343,67 +351,58 @@ const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
  * SliderActive
  * -----------------------------------------------------------------------------------------------*/
 
+// Unstyled active-range frame: positioning only. Fill color and radius live in
+// the tamagui skin.
 export const SliderActiveFrame = styled(SliderFrame, {
-  name: 'SliderActive',
+  displayName: 'SliderActive',
   position: 'absolute',
   pointerEvents: 'box-none',
-
-  variants: {
-    unstyled: {
-      false: {
-        backgroundColor: '$background',
-        borderRadius: 100_000,
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
 type SliderActiveProps = GetProps<typeof SliderActiveFrame>
 
-const SliderActive = React.forwardRef<View, SliderActiveProps>(function SliderActive(
-  props: ScopedProps<SliderActiveProps>,
-  forwardedRef
-) {
-  const { __scopeSlider, ...rangeProps } = props
-  const context = useSliderContext(__scopeSlider)
-  const orientation = useSliderOrientationContext(__scopeSlider)
-  const ref = React.useRef<View>(null)
-  const composedRefs = useComposedRefs(forwardedRef, ref)
-  const valuesCount = context.values.length
-  const percentages = context.values.map((value) =>
-    convertValueToPercentage(value, context.min, context.max)
-  )
-  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0
-  const offsetEnd = 100 - Math.max(...percentages)
-
-  return (
-    <SliderActiveFrame
-      orientation={context.orientation}
-      data-orientation={context.orientation}
-      data-disabled={context.disabled ? '' : undefined}
-      size={context.size}
-      animateOnly={['left', 'top', 'right', 'bottom']}
-      {...rangeProps}
-      ref={composedRefs}
-      {...{
-        [orientation.startEdge]: `${offsetStart}%`,
-        [orientation.endEdge]: `${offsetEnd}%`,
-      }}
-      {...(orientation.sizeProp === 'width'
-        ? {
-            height: '100%',
-          }
-        : {
-            left: 0,
-            right: 0,
-          })}
-    />
-  )
-})
+// createStyledHOC so the tamagui skin can layer active-range color/radius via
+// styled(Slider.TrackActive, { ... }); the render body is unchanged.
+const SliderActive = createStyledHOC(
+  SliderActiveFrame,
+  function SliderActive(props: ScopedProps<SliderActiveProps>, forwardedRef) {
+    const { __scopeSlider, ...rangeProps } = props
+    const context = useSliderContext(__scopeSlider)
+    const orientation = useSliderOrientationContext(__scopeSlider)
+    const ref = React.useRef<View>(null)
+    const composedRefs = useComposedRefs(forwardedRef, ref)
+    const valuesCount = context.values.length
+    const percentages = context.values.map((value) =>
+      convertValueToPercentage(value, context.min, context.max)
+    )
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0
+    const offsetEnd = 100 - Math.max(...percentages)
+
+    return (
+      <SliderActiveFrame
+        orientation={context.orientation}
+        data-orientation={context.orientation}
+        data-disabled={context.disabled ? '' : undefined}
+        size={context.size}
+        animateOnly={['left', 'top', 'right', 'bottom']}
+        {...rangeProps}
+        ref={composedRefs}
+        {...{
+          [orientation.startEdge]: `${offsetStart}%`,
+          [orientation.endEdge]: `${offsetEnd}%`,
+        }}
+        {...(orientation.sizeProp === 'width'
+          ? {
+              height: '100%',
+            }
+          : {
+              left: 0,
+              right: 0,
+            })}
+      />
+    )
+  }
+)
 
 /* -------------------------------------------------------------------------------------------------
  * SliderThumb
@@ -411,14 +410,11 @@ const SliderActive = React.forwardRef<View, SliderActiveProps>(function SliderAc
 
 // TODO make this customizable through tamagui
 // so we can accurately use it for estimatedSize below
-const getThumbSize = (val?: SizeTokens | number) => {
+const getThumbSize = (val?: SizeTokens | number | true) => {
   const tokens = getTokens()
-  const size =
-    typeof val === 'number'
-      ? val
-      : getSize(tokens.size[val as any] as any, {
-          shift: -1,
-        })
+  const sizeToken = resolveSizeToken(val ?? true, 'size')
+  const resolved = typeof sizeToken === 'number' ? sizeToken : tokens.size[sizeToken]
+  const size = typeof val === 'number' ? val : getVariableValue(resolved) * 0.86
   return {
     width: size,
     height: size,
@@ -427,50 +423,47 @@ const getThumbSize = (val?: SizeTokens | number) => {
   }
 }
 
-export const SliderThumbFrame = styled(ThemeableStack, {
-  name: 'SliderThumb',
+// Unstyled thumb frame: positioning + the size mechanism (hit-target
+// dimensions) + the circular shape modifier (opt-in, off by default). Border,
+// background, and hover/press/focus color styling live in the tamagui skin.
+export const SliderThumbFrame = styled(YStack, {
+  displayName: 'SliderThumb',
+  position: 'absolute',
 
   variants: {
     size: {
-      '...size': getThumbSize,
-      ':number': getThumbSize,
+      number: getThumbSize,
+      Size: getThumbSize,
     },
 
-    unstyled: {
-      false: {
-        position: 'absolute',
-        borderWidth: 2,
-        borderColor: '$borderColor',
-        backgroundColor: '$background',
-        pressStyle: {
-          backgroundColor: '$backgroundPress',
-          borderColor: '$borderColorPress',
-        },
-        hoverStyle: {
-          backgroundColor: '$backgroundHover',
-          borderColor: '$borderColorHover',
-        },
-        focusVisibleStyle: {
-          outlineStyle: 'solid',
-          outlineWidth: 2,
-          outlineColor: '$outlineColor',
-        },
+    circular: {
+      true: {
+        borderRadius: 100_000,
+        padding: 0,
       },
     },
-  } as const,
 
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+    // opt-in v2-compat elevate (formerly from ThemeableStack), off by default.
+    // On the frame (the animated node), not a skin wrapper — a variant block on a
+    // wrapper breaks the native animation driver's interpolation.
+    elevate: {
+      true: {
+        shadowColor: 'shadow-color',
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+      },
+    },
+  } as const,
 })
 
 export interface SliderThumbExtraProps {
   index?: number
 }
 
-export interface SliderThumbProps extends SizableStackProps, SliderThumbExtraProps {}
+export type SliderThumbProps = GetProps<typeof SliderThumbFrame> & SliderThumbExtraProps
 
-const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
+const SliderThumb = createStyledHOC(
+  SliderThumbFrame,
   function SliderThumb(props: ScopedProps<SliderThumbProps>, forwardedRef) {
     const { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props
     const context = useSliderContext(__scopeSlider)
@@ -483,7 +476,7 @@ const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
     const percent =
       value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)
     const label = getLabel(index, context.values.length)
-    const sizeIn = sizeProp ?? context.size ?? '$true'
+    const sizeIn = (sizeProp ?? context.size ?? true) as SizeTokens | number | true
     const [size, setSize] = React.useState(() => {
       // for SSR
       const estimatedSize = getVariableValue(getThumbSize(sizeIn).width) as number
@@ -571,7 +564,7 @@ const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
  * Slider
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderComponent = React.forwardRef(
+const SliderComponent = createRefComponent(
   (props: ScopedProps<SliderProps>, forwardedRef) => {
     const {
       name,
@@ -709,14 +702,11 @@ const SliderComponent = React.forwardRef(
             }
           }}
         />
-        {/* {isFormControl &&
-        values.map((value, index) => (
-          <BubbleInput
-            key={index}
-            name={name ? name + (values.length > 1 ? '[]' : '') : undefined}
-            value={value}
-          />
-        ))} */}
+        {isWeb &&
+          name &&
+          values.map((value, index) => (
+            <input key={index} type="hidden" name={name} value={value} />
+          ))}
       </SliderProvider>
     )
   }
@@ -730,41 +720,6 @@ const Slider = withStaticProperties(SliderComponent, {
 
 Slider.displayName = SLIDER_NAME
 
-/* -----------------------------------------------------------------------------------------------*/
-
-// // TODO
-// const BubbleInput = (props: any) => {
-//   const { value, ...inputProps } = props
-//   const ref = React.useRef<HTMLInputElement>(null)
-//   const prevValue = usePrevious(value)
-
-//   // Bubble value change to parents (e.g form change event)
-//   React.useEffect(() => {
-//     const input = ref.current!
-//     const inputProto = window.HTMLInputElement.prototype
-//     const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor
-//     const setValue = descriptor.set
-//     if (prevValue !== value && setValue) {
-//       const event = new Event('input', { bubbles: true })
-//       setValue.call(input, value)
-//       input.dispatchEvent(event)
-//     }
-//   }, [prevValue, value])
-
-//   /**
-//    * We purposefully do not use `type="hidden"` here otherwise forms that
-//    * wrap it will not be able to access its value via the FormData API.
-//    *
-//    * We purposefully do not add the `value` attribute here to allow the value
-//    * to be set programatically and bubble to any parent form `onChange` event.
-//    * Adding the `value` will cause React to consider the programatic
-//    * dispatch a duplicate and it will get swallowed.
-//    */
-//   return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />
-// }
-
-/* -----------------------------------------------------------------------------------------------*/
-
 const Track = SliderTrack
 const Range = SliderActive
 const Thumb = SliderThumb

package/src/SliderImpl.tsx

@@ -1,3 +1,4 @@
+import { createRefComponent } from '@tamagui/core'
 /* -------------------------------------------------------------------------------------------------
  * SliderImpl
  * -----------------------------------------------------------------------------------------------*/
@@ -44,7 +45,7 @@ export const SliderFrame = styled(YStack, {
   } as const,
 })
 
-export const SliderImpl = React.forwardRef<View, SliderImplProps>(
+export const SliderImpl = createRefComponent<View, SliderImplProps>(
   (props: ScopedProps<SliderImplProps>, forwardedRef) => {
     const {
       __scopeSlider,
@@ -107,7 +108,7 @@ export const SliderImpl = React.forwardRef<View, SliderImplProps>(
       // wrap with plain RN View for responder events - tamagui views no longer handle responder events on web
 
       <SliderFrame
-        size="$4"
+        size="4"
         ref={forwardedRef as any}
         {...sliderProps}
         data-orientation={sliderProps.orientation}