@tamagui/slider 1.1.7 → 1.1.9

package/dist/cjs/SliderImpl.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -77,51 +81,54 @@ const SliderImpl = React.forwardRef(
       ...sliderProps
     } = props;
     const context = (0, import_constants.useSliderContext)(import_constants.SLIDER_NAME, __scopeSlider);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderFrame, {
-      size: "$4",
-      ...sliderProps,
-      "data-orientation": sliderProps.orientation,
-      ref: forwardedRef,
-      ...import_core.isWeb && {
-        onKeyDown: (event) => {
-          if (event.key === "Home") {
-            onHomeKeyDown(event);
-            event.preventDefault();
-          } else if (event.key === "End") {
-            onEndKeyDown(event);
-            event.preventDefault();
-          } else if (import_constants.PAGE_KEYS.concat(import_constants.ARROW_KEYS).includes(event.key)) {
-            onStepKeyDown(event);
-            event.preventDefault();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SliderFrame,
+      {
+        size: "$4",
+        ...sliderProps,
+        "data-orientation": sliderProps.orientation,
+        ref: forwardedRef,
+        ...import_core.isWeb && {
+          onKeyDown: (event) => {
+            if (event.key === "Home") {
+              onHomeKeyDown(event);
+              event.preventDefault();
+            } else if (event.key === "End") {
+              onEndKeyDown(event);
+              event.preventDefault();
+            } else if (import_constants.PAGE_KEYS.concat(import_constants.ARROW_KEYS).includes(event.key)) {
+              onStepKeyDown(event);
+              event.preventDefault();
+            }
           }
-        }
-      },
-      onMoveShouldSetResponderCapture: () => true,
-      onScrollShouldSetResponder: () => true,
-      onScrollShouldSetResponderCapture: () => true,
-      onMoveShouldSetResponder: () => true,
-      onStartShouldSetResponder: () => true,
-      onResponderTerminationRequest: () => {
-        return false;
-      },
-      onResponderGrant: (0, import_core.composeEventHandlers)(props.onResponderGrant, (event) => {
-        const target = event.target;
-        const isStartingOnThumb = context.thumbs.has(target);
-        if (import_core.isWeb && target instanceof HTMLElement) {
-          if (context.thumbs.has(target)) {
-            target.focus();
+        },
+        onMoveShouldSetResponderCapture: () => true,
+        onScrollShouldSetResponder: () => true,
+        onScrollShouldSetResponderCapture: () => true,
+        onMoveShouldSetResponder: () => true,
+        onStartShouldSetResponder: () => true,
+        onResponderTerminationRequest: () => {
+          return false;
+        },
+        onResponderGrant: (0, import_core.composeEventHandlers)(props.onResponderGrant, (event) => {
+          const target = event.target;
+          const isStartingOnThumb = context.thumbs.has(target);
+          if (import_core.isWeb && target instanceof HTMLElement) {
+            if (context.thumbs.has(target)) {
+              target.focus();
+            }
           }
-        }
-        onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
-      }),
-      onResponderMove: (0, import_core.composeEventHandlers)(props.onResponderMove, (event) => {
-        event.stopPropagation();
-        onSlideMove(event);
-      }),
-      onResponderRelease: (0, import_core.composeEventHandlers)(props.onResponderRelease, (event) => {
-        onSlideEnd(event);
-      })
-    });
+          onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
+        }),
+        onResponderMove: (0, import_core.composeEventHandlers)(props.onResponderMove, (event) => {
+          event.stopPropagation();
+          onSlideMove(event);
+        }),
+        onResponderRelease: (0, import_core.composeEventHandlers)(props.onResponderRelease, (event) => {
+          onSlideEnd(event);
+        })
+      }
+    );
   }
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/SliderImpl.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SliderImpl.tsx"],
   "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { getSize } from '@tamagui/get-size'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  } as const,\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const size = Math.round(getVariableValue(getSize(val)) / 6)\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          borderRadius: size,\n          justifyContent: 'center',\n        }\n      }\n      return {\n        width: size,\n        borderRadius: size,\n        alignItems: 'center',\n      }\n    },\n  } as const,\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n    return (\n      <SliderFrame\n        size=\"$4\"\n        {...sliderProps}\n        data-orientation={sliderProps.orientation}\n        ref={forwardedRef}\n        {...(isWeb && {\n          onKeyDown: (event) => {\n            if (event.key === 'Home') {\n              onHomeKeyDown(event)\n              // Prevent scrolling to page start\n              event.preventDefault()\n            } else if (event.key === 'End') {\n              onEndKeyDown(event)\n              // Prevent scrolling to page end\n              event.preventDefault()\n            } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n              onStepKeyDown(event)\n              // Prevent scrolling for directional key presses\n              event.preventDefault()\n            }\n          },\n        })}\n        onMoveShouldSetResponderCapture={() => true}\n        onScrollShouldSetResponder={() => true}\n        onScrollShouldSetResponderCapture={() => true}\n        onMoveShouldSetResponder={() => true}\n        onStartShouldSetResponder={() => true}\n        // onStartShouldSetResponderCapture={() => true}\n        onResponderTerminationRequest={() => {\n          return false\n        }}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          const target = event.target as unknown as HTMLElement | number\n          const isStartingOnThumb = context.thumbs.has(target)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          if (isWeb && target instanceof HTMLElement) {\n            if (context.thumbs.has(target)) {\n              target.focus()\n            }\n          }\n          onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n        })}\n        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n          event.stopPropagation()\n          // const target = event.target as HTMLElement\n          onSlideMove(event)\n        })}\n        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideEnd(event)\n        })}\n      />\n    )\n  }\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DM;AAvDN,kBAAsE;AACtE,sBAAwB;AACxB,oBAAuB;AACvB,YAAuB;AAGvB,uBAAqE;AAG9D,MAAM,wBAAoB,oBAAO,sBAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,kBAAc,oBAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,UAAM,kCAAiB,yBAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AACJ,UAAM,cAAU,mCAAiB,8BAAa,aAAa;AAC3D,WACE,4CAAC;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,oBAAkB,YAAY;AAAA,MAC9B,KAAK;AAAA,MACJ,GAAI,qBAAS;AAAA,QACZ,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,QAAQ;AACxB,0BAAc,KAAK;AAEnB,kBAAM,eAAe;AAAA,UACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,yBAAa,KAAK;AAElB,kBAAM,eAAe;AAAA,UACvB,WAAW,2BAAU,OAAO,2BAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,0BAAc,KAAK;AAEnB,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,MACA,iCAAiC,MAAM;AAAA,MACvC,4BAA4B,MAAM;AAAA,MAClC,mCAAmC,MAAM;AAAA,MACzC,0BAA0B,MAAM;AAAA,MAChC,2BAA2B,MAAM;AAAA,MAEjC,+BAA+B,MAAM;AACnC,eAAO;AAAA,MACT;AAAA,MACA,sBAAkB,kCAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,cAAM,SAAS,MAAM;AACrB,cAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,YAAI,qBAAS,kBAAkB,aAAa;AAC1C,cAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,mBAAO,MAAM;AAAA,UACf;AAAA,QACF;AACA,qBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,MAC3D,CAAC;AAAA,MACD,qBAAiB,kCAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,cAAM,gBAAgB;AAEtB,oBAAY,KAAK;AAAA,MACnB,CAAC;AAAA,MACD,wBAAoB,kCAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,mBAAW,KAAK;AAAA,MAClB,CAAC;AAAA,KACH;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DM;AAvDN,kBAAsE;AACtE,sBAAwB;AACxB,oBAAuB;AACvB,YAAuB;AAGvB,uBAAqE;AAG9D,MAAM,wBAAoB,oBAAO,sBAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,kBAAc,oBAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,UAAM,kCAAiB,yBAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,cAAU,mCAAiB,8BAAa,aAAa;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,oBAAkB,YAAY;AAAA,QAC9B,KAAK;AAAA,QACJ,GAAI,qBAAS;AAAA,UACZ,WAAW,CAAC,UAAU;AACpB,gBAAI,MAAM,QAAQ,QAAQ;AACxB,4BAAc,KAAK;AAEnB,oBAAM,eAAe;AAAA,YACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,2BAAa,KAAK;AAElB,oBAAM,eAAe;AAAA,YACvB,WAAW,2BAAU,OAAO,2BAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,4BAAc,KAAK;AAEnB,oBAAM,eAAe;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,QACA,iCAAiC,MAAM;AAAA,QACvC,4BAA4B,MAAM;AAAA,QAClC,mCAAmC,MAAM;AAAA,QACzC,0BAA0B,MAAM;AAAA,QAChC,2BAA2B,MAAM;AAAA,QAEjC,+BAA+B,MAAM;AACnC,iBAAO;AAAA,QACT;AAAA,QACA,sBAAkB,kCAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,gBAAM,SAAS,MAAM;AACrB,gBAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,cAAI,qBAAS,kBAAkB,aAAa;AAC1C,gBAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,qBAAO,MAAM;AAAA,YACf;AAAA,UACF;AACA,uBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,QAC3D,CAAC;AAAA,QACD,qBAAiB,kCAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,gBAAM,gBAAgB;AAEtB,sBAAY,KAAK;AAAA,QACnB,CAAC;AAAA,QACD,wBAAoB,kCAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,qBAAW,KAAK;AAAA,QAClB,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

package/dist/cjs/helpers.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/helpers.tsx"],
   "sourcesContent": ["export function getNextSortedValues(\n  prevValues: number[] = [],\n  nextValue: number,\n  atIndex: number,\n) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index]\n  } else {\n    return undefined\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0\n  const distances = values.map((value) => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(\n  width: number,\n  left: number,\n  direction: number,\n) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(\n  values: number[],\n  minStepsBetweenValues: number,\n) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(\n  input: readonly [number, number],\n  output: readonly [number, number],\n) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount)\n  return Math.round(value * rounder) / rounder\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,oBACd,aAAuB,CAAC,GACxB,WACA,SACA;AACA,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,SAAS,yBAAyB,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,kBAAkB,QAAQ;AACnC;AAKO,SAAS,SAAS,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,SAAS,qBAAqB,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,SAAS,uBACd,OACA,MACA,WACA;AACA,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,UAAQ,YAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,SAAS,sBAAsB,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,SAAS,yBACd,QACA,uBACA;AACA,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAAS,YACd,OACA,QACA;AACA,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,SAAS,OAAO,KAAK,OAAO,OAAO,MAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,SAAS,QAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,SAAS,gBAAgB,OAAe;AAC7C,UAAQ,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,SAAS,WAAW,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,oBACd,aAAuB,CAAC,GACxB,WACA,SACA;AACA,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,OAAO,IAAI;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,SAAS,yBAAyB,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,kBAAkB,QAAQ;AACnC;AAKO,SAAS,SAAS,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE,KAAK;AAAA,EACrC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,SAAS,qBAAqB,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,SAAS,uBACd,OACA,MACA,WACA;AACA,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,UAAQ,YAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,SAAS,sBAAsB,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,CAAC,IAAI,KAAK;AAC5E;AAcO,SAAS,yBACd,QACA,uBACA;AACA,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAAS,YACd,OACA,QACA;AACA,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,CAAC,MAAM,MAAM,CAAC,KAAK,OAAO,CAAC,MAAM,OAAO,CAAC;AAAG,aAAO,OAAO,CAAC;AACrE,UAAM,SAAS,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,MAAM,CAAC,IAAI,MAAM,CAAC;AAC3D,WAAO,OAAO,CAAC,IAAI,SAAS,QAAQ,MAAM,CAAC;AAAA,EAC7C;AACF;AAEO,SAAS,gBAAgB,OAAe;AAC7C,UAAQ,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,KAAK,IAAI;AAC7C;AAEO,SAAS,WAAW,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
   "names": []
 }

package/dist/esm/Slider.js

@@ -47,47 +47,53 @@ const SliderHorizontal = React.forwardRef(
       const value = linearScale(input, output);
       return value(pointerPosition);
     }
-    return /* @__PURE__ */ jsx(SliderOrientationProvider, {
-      scope: props.__scopeSlider,
-      startEdge: isDirectionLTR ? "left" : "right",
-      endEdge: isDirectionLTR ? "right" : "left",
-      direction: isDirectionLTR ? 1 : -1,
-      sizeProp: "width",
-      size: state.size,
-      children: /* @__PURE__ */ jsx(SliderImpl, {
-        ref: composeRefs(forwardedRef, sliderRef),
-        dir: direction,
-        ...sliderProps,
-        orientation: "horizontal",
-        onLayout: () => {
-          var _a;
-          (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
-            setState({
-              size: width,
-              offset: pageX
-            });
-          });
-        },
-        onSlideStart: (event, target) => {
-          const value = getValueFromPointer(event.nativeEvent.locationX);
-          if (value) {
-            onSlideStart == null ? void 0 : onSlideStart(value, target);
-          }
-        },
-        onSlideMove: (event) => {
-          const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-          if (value) {
-            onSlideMove == null ? void 0 : onSlideMove(value);
+    return /* @__PURE__ */ jsx(
+      SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: isDirectionLTR ? "left" : "right",
+        endEdge: isDirectionLTR ? "right" : "left",
+        direction: isDirectionLTR ? 1 : -1,
+        sizeProp: "width",
+        size: state.size,
+        children: /* @__PURE__ */ jsx(
+          SliderImpl,
+          {
+            ref: composeRefs(forwardedRef, sliderRef),
+            dir: direction,
+            ...sliderProps,
+            orientation: "horizontal",
+            onLayout: () => {
+              var _a;
+              (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
+                setState({
+                  size: width,
+                  offset: pageX
+                });
+              });
+            },
+            onSlideStart: (event, target) => {
+              const value = getValueFromPointer(event.nativeEvent.locationX);
+              if (value) {
+                onSlideStart == null ? void 0 : onSlideStart(value, target);
+              }
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+              if (value) {
+                onSlideMove == null ? void 0 : onSlideMove(value);
+              }
+            },
+            onSlideEnd: () => {
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = BACK_KEYS[direction].includes(event.key);
+              onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+            }
           }
-        },
-        onSlideEnd: () => {
-        },
-        onStepKeyDown: (event) => {
-          const isBackKey = BACK_KEYS[direction].includes(event.key);
-          onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-        }
-      })
-    });
+        )
+      }
+    );
   }
 );
 const SliderVertical = React.forwardRef(
@@ -101,46 +107,52 @@ const SliderVertical = React.forwardRef(
       const value = linearScale(input, output);
       return value(pointerPosition);
     }
-    return /* @__PURE__ */ jsx(SliderOrientationProvider, {
-      scope: props.__scopeSlider,
-      startEdge: "bottom",
-      endEdge: "top",
-      sizeProp: "height",
-      size: state.size,
-      direction: 1,
-      children: /* @__PURE__ */ jsx(SliderImpl, {
-        ref: composeRefs(forwardedRef, sliderRef),
-        ...sliderProps,
-        orientation: "vertical",
-        onLayout: ({ nativeEvent: { layout } }) => {
-          var _a;
-          (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
-            setState({
-              size: height,
-              offset: pageY
-            });
-          });
-        },
-        onSlideStart: (event, target) => {
-          const value = getValueFromPointer(event.nativeEvent.locationY);
-          if (value) {
-            onSlideStart == null ? void 0 : onSlideStart(value, target);
+    return /* @__PURE__ */ jsx(
+      SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: "bottom",
+        endEdge: "top",
+        sizeProp: "height",
+        size: state.size,
+        direction: 1,
+        children: /* @__PURE__ */ jsx(
+          SliderImpl,
+          {
+            ref: composeRefs(forwardedRef, sliderRef),
+            ...sliderProps,
+            orientation: "vertical",
+            onLayout: ({ nativeEvent: { layout } }) => {
+              var _a;
+              (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
+                setState({
+                  size: height,
+                  offset: pageY
+                });
+              });
+            },
+            onSlideStart: (event, target) => {
+              const value = getValueFromPointer(event.nativeEvent.locationY);
+              if (value) {
+                onSlideStart == null ? void 0 : onSlideStart(value, target);
+              }
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+              if (value) {
+                onSlideMove == null ? void 0 : onSlideMove(value);
+              }
+            },
+            onSlideEnd: () => {
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = BACK_KEYS.ltr.includes(event.key);
+              onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+            }
           }
-        },
-        onSlideMove: (event) => {
-          const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-          if (value) {
-            onSlideMove == null ? void 0 : onSlideMove(value);
-          }
-        },
-        onSlideEnd: () => {
-        },
-        onStepKeyDown: (event) => {
-          const isBackKey = BACK_KEYS.ltr.includes(event.key);
-          onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-        }
-      })
-    });
+        )
+      }
+    );
   }
 );
 const TRACK_NAME = "SliderTrack";
@@ -157,14 +169,17 @@ const SliderTrack = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...trackProps } = props;
     const context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return /* @__PURE__ */ jsx(SliderTrackFrame, {
-      "data-disabled": context.disabled ? "" : void 0,
-      "data-orientation": context.orientation,
-      orientation: context.orientation,
-      size: context.size,
-      ...trackProps,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsx(
+      SliderTrackFrame,
+      {
+        "data-disabled": context.disabled ? "" : void 0,
+        "data-orientation": context.orientation,
+        orientation: context.orientation,
+        size: context.size,
+        ...trackProps,
+        ref: forwardedRef
+      }
+    );
   }
 );
 SliderTrack.displayName = TRACK_NAME;
@@ -187,24 +202,27 @@ const SliderTrackActive = React.forwardRef(
     );
     const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
     const offsetEnd = 100 - Math.max(...percentages);
-    return /* @__PURE__ */ jsx(SliderTrackActiveFrame, {
-      orientation: context.orientation,
-      "data-orientation": context.orientation,
-      "data-disabled": context.disabled ? "" : void 0,
-      size: context.size,
-      ...rangeProps,
-      ref: composedRefs,
-      ...{
-        [orientation.startEdge]: `${offsetStart}%`,
-        [orientation.endEdge]: `${offsetEnd}%`
-      },
-      ...orientation.sizeProp === "width" ? {
-        height: "100%"
-      } : {
-        left: 0,
-        right: 0
+    return /* @__PURE__ */ jsx(
+      SliderTrackActiveFrame,
+      {
+        orientation: context.orientation,
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        size: context.size,
+        ...rangeProps,
+        ref: composedRefs,
+        ...{
+          [orientation.startEdge]: `${offsetStart}%`,
+          [orientation.endEdge]: `${offsetEnd}%`
+        },
+        ...orientation.sizeProp === "width" ? {
+          height: "100%"
+        } : {
+          left: 0,
+          right: 0
+        }
       }
-    });
+    );
   }
 );
 SliderTrackActive.displayName = RANGE_NAME;
@@ -221,7 +239,9 @@ const getThumbSize = (val) => {
 const SliderThumbFrame = styled(ThemeableStack, {
   name: "SliderThumb",
   position: "absolute",
+  // TODO not taking up 2
   bordered: 2,
+  // OR THIS
   borderWidth: 2,
   backgrounded: true,
   pressTheme: isWeb,
@@ -243,7 +263,7 @@ const SliderThumb = React.forwardRef(
     const value = context.values[index];
     const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
     const label = getLabel(index, context.values.length);
-    const sizeIn = sizeProp ?? context.size ?? "$4";
+    const sizeIn = sizeProp ?? context.size ?? "$true";
     const [size, setSize] = React.useState(() => {
       const estimatedSize = getVariableValue(getThumbSize(sizeIn).width);
       return estimatedSize;
@@ -257,47 +277,50 @@ const SliderThumb = React.forwardRef(
         };
       }
     }, [thumb, context.thumbs]);
-    return /* @__PURE__ */ jsx(SliderThumbFrame, {
-      ref: composedRefs,
-      role: "slider",
-      "aria-label": props["aria-label"] || label,
-      "aria-valuemin": context.min,
-      "aria-valuenow": value,
-      "aria-valuemax": context.max,
-      "aria-orientation": context.orientation,
-      "data-orientation": context.orientation,
-      "data-disabled": context.disabled ? "" : void 0,
-      tabIndex: context.disabled ? void 0 : 0,
-      animateOnly: ["transform", "left", "right", "top", "bottom"],
-      ...thumbProps,
-      ...context.orientation === "horizontal" ? {
-        x: thumbInBoundsOffset - size / 2,
-        y: -size / 2,
-        top: "50%",
-        ...size === 0 && {
-          top: "auto",
-          bottom: "auto"
-        }
-      } : {
-        x: -size / 2,
-        y: size / 2,
-        left: "50%",
-        ...size === 0 && {
-          left: "auto",
-          right: "auto"
-        }
-      },
-      ...{
-        [orientation.startEdge]: `${percent}%`
-      },
-      size: sizeIn,
-      onLayout: (e) => {
-        setSize(e.nativeEvent.layout[orientation.sizeProp]);
-      },
-      onFocus: composeEventHandlers(props.onFocus, () => {
-        context.valueIndexToChangeRef.current = index;
-      })
-    });
+    return /* @__PURE__ */ jsx(
+      SliderThumbFrame,
+      {
+        ref: composedRefs,
+        role: "slider",
+        "aria-label": props["aria-label"] || label,
+        "aria-valuemin": context.min,
+        "aria-valuenow": value,
+        "aria-valuemax": context.max,
+        "aria-orientation": context.orientation,
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        tabIndex: context.disabled ? void 0 : 0,
+        animateOnly: ["transform", "left", "right", "top", "bottom"],
+        ...thumbProps,
+        ...context.orientation === "horizontal" ? {
+          x: thumbInBoundsOffset - size / 2,
+          y: -size / 2,
+          top: "50%",
+          ...size === 0 && {
+            top: "auto",
+            bottom: "auto"
+          }
+        } : {
+          x: -size / 2,
+          y: size / 2,
+          left: "50%",
+          ...size === 0 && {
+            left: "auto",
+            right: "auto"
+          }
+        },
+        ...{
+          [orientation.startEdge]: `${percent}%`
+        },
+        size: sizeIn,
+        onLayout: (e) => {
+          setSize(e.nativeEvent.layout[orientation.sizeProp]);
+        },
+        onFocus: composeEventHandlers(props.onFocus, () => {
+          context.valueIndexToChangeRef.current = index;
+        })
+      }
+    );
   }
 );
 SliderThumb.displayName = THUMB_NAME;
@@ -371,45 +394,51 @@ const Slider = withStaticProperties(
       });
     }
     const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-    return /* @__PURE__ */ jsx(SliderProvider, {
-      scope: props.__scopeSlider,
-      disabled,
-      min,
-      max,
-      valueIndexToChangeRef,
-      thumbs: thumbRefs.current,
-      values,
-      orientation,
-      size: sizeProp,
-      children: /* @__PURE__ */ jsx(SliderOriented, {
-        "aria-disabled": disabled,
-        "data-disabled": disabled ? "" : void 0,
-        ...sliderProps,
-        ref: composedRefs,
+    return /* @__PURE__ */ jsx(
+      SliderProvider,
+      {
+        scope: props.__scopeSlider,
+        disabled,
         min,
         max,
-        onSlideStart: disabled ? void 0 : (value2, target) => {
-          if (target !== "thumb") {
-            const closestIndex = getClosestValueIndex(values, value2);
-            updateValues(value2, closestIndex);
+        valueIndexToChangeRef,
+        thumbs: thumbRefs.current,
+        values,
+        orientation,
+        size: sizeProp,
+        children: /* @__PURE__ */ jsx(
+          SliderOriented,
+          {
+            "aria-disabled": disabled,
+            "data-disabled": disabled ? "" : void 0,
+            ...sliderProps,
+            ref: composedRefs,
+            min,
+            max,
+            onSlideStart: disabled ? void 0 : (value2, target) => {
+              if (target !== "thumb") {
+                const closestIndex = getClosestValueIndex(values, value2);
+                updateValues(value2, closestIndex);
+              }
+            },
+            onSlideMove: disabled ? void 0 : handleSlideMove,
+            onHomeKeyDown: () => !disabled && updateValues(min, 0),
+            onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
+            onStepKeyDown: ({ event, direction: stepDirection }) => {
+              if (!disabled) {
+                const isPageKey = PAGE_KEYS.includes(event.key);
+                const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
+                const multiplier = isSkipKey ? 10 : 1;
+                const atIndex = valueIndexToChangeRef.current;
+                const value2 = values[atIndex];
+                const stepInDirection = step * multiplier * stepDirection;
+                updateValues(value2 + stepInDirection, atIndex);
+              }
+            }
           }
-        },
-        onSlideMove: disabled ? void 0 : handleSlideMove,
-        onHomeKeyDown: () => !disabled && updateValues(min, 0),
-        onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
-        onStepKeyDown: ({ event, direction: stepDirection }) => {
-          if (!disabled) {
-            const isPageKey = PAGE_KEYS.includes(event.key);
-            const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
-            const multiplier = isSkipKey ? 10 : 1;
-            const atIndex = valueIndexToChangeRef.current;
-            const value2 = values[atIndex];
-            const stepInDirection = step * multiplier * stepDirection;
-            updateValues(value2 + stepInDirection, atIndex);
-          }
-        }
-      })
-    });
+        )
+      }
+    );
   }),
   {
     Track: SliderTrack,