@tamagui/slider 1.0.1-beta.26

package/dist/esm/SliderImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderImpl.tsx"],
+  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, styled } from '@tamagui/core'\nimport { YStack, getCircleSize } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { SLIDER_NAME, useSliderContext } from './context'\nimport { ScopedProps, SliderImplElement, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  name: 'Slider',\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const circleSize = getCircleSize(val, extras)\n      const size = circleSize / 4\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          width: 100,\n        }\n      }\n      return {\n        width: size,\n        height: 100,\n      }\n    },\n  },\n})\n\nexport const SliderImpl = React.forwardRef<SliderImplElement, 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\n    return (\n      <SliderFrame\n        size=\"$4\"\n        {...sliderProps}\n        data-orientation={sliderProps.orientation}\n        ref={forwardedRef}\n        // onKeyDown={composeEventHandlers(props.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        onStartShouldSetResponder={() => true}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          // const target = event.target as HTMLElement\n          // console.log('wut', target)\n          // target.setPointerCapture(event.pointerId)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          event.preventDefault()\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 (context.thumbs.has(target)) {\n          //   target.focus()\n          // } else {\n          onSlideStart(event)\n          // }\n        })}\n        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\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": "AAIA;AACA;AACA;AAEA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,aAAa,cAAc,KAAK,MAAM;AAC5C,YAAM,OAAO,aAAa;AAC1B,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,iBAAiB,aAAa,aAAa;AAE3D,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,OACD;AAAA,IACJ,oBAAkB,YAAY;AAAA,IAC9B,KAAK;AAAA,IAgBL,2BAA2B,MAAM;AAAA,IACjC,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AAKxE,YAAM,eAAe;AAMrB,mBAAa,KAAK;AAAA,IAEpB,CAAC;AAAA,IACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AAEtE,kBAAY,KAAK;AAAA,IACnB,CAAC;AAAA,IACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,iBAAW,KAAK;AAAA,IAClB,CAAC;AAAA,GACH;AAEJ,CACF;",
+  "names": []
+}

package/dist/esm/context.js

@@ -0,0 +1,21 @@
+import { createContextScope } from "@tamagui/create-context";
+const SLIDER_NAME = "Slider";
+const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME);
+const [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
+const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
+  startEdge: "left",
+  endEdge: "right",
+  sizeProp: "width",
+  size: 0,
+  direction: 1
+});
+export {
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  createSliderContext,
+  createSliderScope,
+  useSliderContext,
+  useSliderOrientationContext
+};
+//# sourceMappingURL=context.js.map

package/dist/esm/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/context.tsx"],
+  "sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { SliderContextValue } from './types'\n\nexport const SLIDER_NAME = 'Slider'\n\nexport const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n  createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n  startEdge: 'bottom' | 'left' | 'right'\n  endEdge: 'top' | 'right' | 'left'\n  sizeProp: 'width' | 'height'\n  size: number | SizeTokens\n  direction: number\n}>(SLIDER_NAME, {\n  startEdge: 'left',\n  endEdge: 'right',\n  sizeProp: 'width',\n  size: 0,\n  direction: 1,\n})\n"],
+  "mappings": "AACA;AAIO,MAAM,cAAc;AAEpB,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,oBAC5B,oBAAwC,WAAW;AAE9C,MAAM,CAAC,2BAA2B,+BAA+B,oBAMrE,aAAa;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,CAAC;",
+  "names": []
+}

package/dist/esm/helpers.js

@@ -0,0 +1,89 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens, getVariableValue } from "@tamagui/core";
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+__name(getNextSortedValues, "getNextSortedValues");
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  return percentPerStep * (value - min);
+}
+__name(convertValueToPercentage, "convertValueToPercentage");
+function getLabel(index, totalValues) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`;
+  } else if (totalValues === 2) {
+    return ["Minimum", "Maximum"][index];
+  } else {
+    return void 0;
+  }
+}
+__name(getLabel, "getLabel");
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1)
+    return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue));
+  const closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+__name(getClosestValueIndex, "getClosestValueIndex");
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+__name(getThumbInBoundsOffset, "getThumbInBoundsOffset");
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+__name(getStepsBetweenValues, "getStepsBetweenValues");
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+__name(hasMinStepsBetweenValues, "hasMinStepsBetweenValues");
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+__name(linearScale, "linearScale");
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+__name(getDecimalCount, "getDecimalCount");
+function roundValue(value, decimalCount) {
+  const rounder = Math.pow(10, decimalCount);
+  return Math.round(value * rounder) / rounder;
+}
+__name(roundValue, "roundValue");
+function getSize(size) {
+  const tokens = getTokens();
+  return typeof size === "number" ? size : size ? getVariableValue(tokens.size[size]) : null;
+}
+__name(getSize, "getSize");
+export {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getSize,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue
+};
+//# sourceMappingURL=helpers.js.map

package/dist/esm/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/helpers.tsx"],
+  "sourcesContent": ["import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\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(width: number, left: number, direction: number) {\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(values: number[], minStepsBetweenValues: number) {\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(input: readonly [number, number], output: readonly [number, number]) {\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\nexport function getSize(size?: SizeTokens) {\n  const tokens = getTokens()\n  return typeof size === 'number'\n    ? size\n    : size\n    ? (getVariableValue(tokens.size[size]) as number)\n    : null\n}\n"],
+  "mappings": ";;AAAA;AAEO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAJgB;AAMT,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAJgB;AAST,kBAAkB,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;AARgB;AAkBT,8BAA8B,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;AALgB;AAWT,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AALgB;AAchB,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAFS;AAgBF,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAPgB;AAUT,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AANgB;AAQT,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAFgB;AAIT,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;AAHgB;AAKT,iBAAiB,MAAmB;AACzC,QAAM,SAAS,UAAU;AACzB,SAAO,OAAO,SAAS,WACnB,OACA,OACC,iBAAiB,OAAO,KAAK,KAAK,IACnC;AACN;AAPgB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from "./Slider";
+export * from "./types";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Slider'\nexport * from './types'\n"],
+  "mappings": "AAAA;AACA;",
+  "names": []
+}

package/dist/esm/types.js

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

package/dist/esm/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/jsx/Slider.js

@@ -0,0 +1,248 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { usePrevious } from "@radix-ui/react-use-previous";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { styled, withStaticProperties } from "@tamagui/core";
+import { clamp, composeEventHandlers } from "@tamagui/helpers";
+import { SizableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useDirection } from "@tamagui/use-direction";
+import * as React from "react";
+import {
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  useSliderContext,
+  useSliderOrientationContext
+} from "./context";
+import {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue
+} from "./helpers";
+import { SliderFrame, SliderImpl } from "./SliderImpl";
+const PAGE_KEYS = ["PageUp", "PageDown"];
+const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+const BACK_KEYS = {
+  ltr: ["ArrowDown", "Home", "ArrowLeft", "PageDown"],
+  rtl: ["ArrowDown", "Home", "ArrowRight", "PageDown"]
+};
+const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
+  const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+  const layoutRef = React.useRef(null);
+  const direction = useDirection(dir);
+  const isDirectionLTR = direction === "ltr";
+  const [size, setSize] = React.useState(0);
+  function getValueFromPointer(pointerPosition) {
+    const layout = layoutRef.current;
+    if (!layout)
+      return;
+    const input = [0, layout.width];
+    const output = isDirectionLTR ? [min, max] : [max, min];
+    const value = linearScale(input, output);
+    return value(pointerPosition - layout.x);
+  }
+  __name(getValueFromPointer, "getValueFromPointer");
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={size}><SliderImpl dir={direction} orientation="horizontal" {...sliderProps} onLayout={(e) => {
+    const layout = e.nativeEvent.layout;
+    layoutRef.current = layout;
+    setSize(layout.height);
+  }} ref={forwardedRef} onSlideStart={(event) => {
+    const value = getValueFromPointer(event.nativeEvent.pageX);
+    if (value) {
+      onSlideStart == null ? void 0 : onSlideStart(value);
+    }
+  }} onSlideMove={(event) => {
+    const value = getValueFromPointer(event.nativeEvent.pageX);
+    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 });
+  }} /></SliderOrientationProvider>;
+});
+const SliderVertical = React.forwardRef((props, forwardedRef) => {
+  const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+  const sliderRef = React.useRef(null);
+  const ref = useComposedRefs(forwardedRef, sliderRef);
+  const rectRef = React.useRef();
+  function getValueFromPointer(pointerPosition) {
+    const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
+    const input = [0, rect.height];
+    const output = [max, min];
+    const value = linearScale(input, output);
+    rectRef.current = rect;
+    return value(pointerPosition - rect.top);
+  }
+  __name(getValueFromPointer, "getValueFromPointer");
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={0} direction={1}><SliderImpl {...sliderProps} orientation="vertical" ref={ref} onSlideStart={(event) => {
+    const value = getValueFromPointer(event.nativeEvent.locationY);
+    onSlideStart == null ? void 0 : onSlideStart(value);
+  }} onSlideMove={(event) => {
+    const value = getValueFromPointer(event.nativeEvent.locationY);
+    onSlideMove == null ? void 0 : onSlideMove(value);
+  }} onSlideEnd={() => rectRef.current = void 0} onStepKeyDown={(event) => {
+    const isBackKey = BACK_KEYS.ltr.includes(event.key);
+    onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+  }} /></SliderOrientationProvider>;
+});
+const TRACK_NAME = "SliderTrack";
+const SliderTrackFrame = styled(SliderFrame, {
+  name: "SliderTrackFrame"
+});
+const SliderTrack = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSlider, ...trackProps } = props;
+  const context = useSliderContext(TRACK_NAME, __scopeSlider);
+  return <SliderTrackFrame data-disabled={context.disabled ? "" : void 0} data-orientation={context.orientation} orientation={context.orientation} {...trackProps} ref={forwardedRef} />;
+});
+SliderTrack.displayName = TRACK_NAME;
+const RANGE_NAME = "SliderTrackActive";
+const SliderTrackActiveFrame = styled(SliderFrame, {
+  name: "SliderTrackActive"
+});
+const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSlider, ...rangeProps } = props;
+  const context = useSliderContext(RANGE_NAME, __scopeSlider);
+  const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
+  const ref = React.useRef(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 <SliderTrackActiveFrame orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} {...rangeProps} ref={composedRefs} {...{
+    [orientation.startEdge]: offsetStart + "%",
+    [orientation.endEdge]: offsetEnd + "%"
+  }} />;
+});
+SliderTrackActive.displayName = RANGE_NAME;
+const THUMB_NAME = "SliderThumb";
+const SliderThumbFrame = styled(SizableStack, {
+  name: "SliderThumb",
+  position: "absolute"
+});
+const SliderThumb = React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
+  const context = useSliderContext(THUMB_NAME, __scopeSlider);
+  const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
+  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 [size, setSize] = React.useState(0);
+  const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
+  console.log("thumbInBoundsOffset", thumbInBoundsOffset, size, percent);
+  return <SliderThumbFrame ref={forwardedRef} 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} {...thumbProps} x={thumbInBoundsOffset} y={-size / 2} size={(_a = sizeProp != null ? sizeProp : context.size) != null ? _a : 30} onLayout={(e) => {
+    setSize(e.nativeEvent.layout[orientation.sizeProp]);
+  }} {...{
+    [orientation.startEdge]: `${percent}%`
+  }} style={value === void 0 ? { display: "none" } : props.style} onFocus={composeEventHandlers(props.onFocus, () => {
+    context.valueIndexToChangeRef.current = index;
+  })} />;
+});
+SliderThumb.displayName = THUMB_NAME;
+const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
+  const {
+    name,
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = "horizontal",
+    disabled = false,
+    minStepsBetweenThumbs = 0,
+    defaultValue = [min],
+    value,
+    onValueChange = /* @__PURE__ */ __name(() => {
+    }, "onValueChange"),
+    size: sizeProp,
+    ...sliderProps
+  } = props;
+  const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
+  const valueIndexToChangeRef = React.useRef(0);
+  const isHorizontal = orientation === "horizontal";
+  const [values = [], setValues] = useControllableState({
+    prop: value,
+    defaultProp: defaultValue,
+    onChange: (value2) => {
+      onValueChange(value2);
+    }
+  });
+  function handleSlideStart(value2) {
+    const closestIndex = getClosestValueIndex(values, value2);
+    updateValues(value2, closestIndex);
+  }
+  __name(handleSlideStart, "handleSlideStart");
+  function handleSlideMove(value2) {
+    updateValues(value2, valueIndexToChangeRef.current);
+  }
+  __name(handleSlideMove, "handleSlideMove");
+  function updateValues(value2, atIndex) {
+    const decimalCount = getDecimalCount(step);
+    const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
+    const nextValue = clamp(snapToStep, [min, max]);
+    setValues((prevValues = []) => {
+      const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+      if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+        valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+        return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+      } else {
+        return prevValues;
+      }
+    });
+  }
+  __name(updateValues, "updateValues");
+  const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+  return <SliderProvider scope={props.__scopeSlider} disabled={disabled} min={min} max={max} valueIndexToChangeRef={valueIndexToChangeRef} thumbs={thumbRefs.current} values={values} orientation={orientation} size={sizeProp || 20}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={forwardedRef} min={min} max={max} onSlideStart={disabled ? void 0 : handleSlideStart} 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);
+    }
+  }} /></SliderProvider>;
+}), {
+  Track: SliderTrack,
+  TrackActive: SliderTrackActive,
+  Thumb: SliderThumb
+});
+Slider.displayName = SLIDER_NAME;
+const BubbleInput = /* @__PURE__ */ __name((props) => {
+  const { value, ...inputProps } = props;
+  const ref = React.useRef(null);
+  const prevValue = usePrevious(value);
+  React.useEffect(() => {
+    const input = ref.current;
+    const inputProto = window.HTMLInputElement.prototype;
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
+    const setValue = descriptor.set;
+    if (prevValue !== value && setValue) {
+      const event = new Event("input", { bubbles: true });
+      setValue.call(input, value);
+      input.dispatchEvent(event);
+    }
+  }, [prevValue, value]);
+  return <input style={{ display: "none" }} {...inputProps} ref={ref} defaultValue={value} />;
+}, "BubbleInput");
+const Track = SliderTrack;
+const Range = SliderTrackActive;
+const Thumb = SliderThumb;
+export {
+  Range,
+  Slider,
+  SliderThumb,
+  SliderTrack,
+  SliderTrackActive,
+  Thumb,
+  Track
+};

package/dist/jsx/SliderImpl.js

@@ -0,0 +1,59 @@
+import { composeEventHandlers, styled } from "@tamagui/core";
+import { YStack, getCircleSize } from "@tamagui/stacks";
+import * as React from "react";
+import { SLIDER_NAME, useSliderContext } from "./context";
+const DirectionalYStack = styled(YStack, {
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {}
+    }
+  }
+});
+const SliderFrame = styled(DirectionalYStack, {
+  name: "Slider",
+  position: "relative",
+  variants: {
+    size: (val, extras) => {
+      const orientation = extras.props.orientation;
+      const circleSize = getCircleSize(val, extras);
+      const size = circleSize / 4;
+      if (orientation === "horizontal") {
+        return {
+          height: size,
+          width: 100
+        };
+      }
+      return {
+        width: size,
+        height: 100
+      };
+    }
+  }
+});
+const SliderImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeSlider,
+    onSlideStart,
+    onSlideMove,
+    onSlideEnd,
+    onHomeKeyDown,
+    onEndKeyDown,
+    onStepKeyDown,
+    ...sliderProps
+  } = props;
+  const context = useSliderContext(SLIDER_NAME, __scopeSlider);
+  return <SliderFrame size="$4" {...sliderProps} data-orientation={sliderProps.orientation} ref={forwardedRef} onStartShouldSetResponder={() => true} onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
+    event.preventDefault();
+    onSlideStart(event);
+  })} onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
+    onSlideMove(event);
+  })} onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {
+    onSlideEnd(event);
+  })} />;
+});
+export {
+  DirectionalYStack,
+  SliderFrame,
+  SliderImpl
+};

package/dist/jsx/context.js

@@ -0,0 +1,20 @@
+import { createContextScope } from "@tamagui/create-context";
+const SLIDER_NAME = "Slider";
+const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME);
+const [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
+const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
+  startEdge: "left",
+  endEdge: "right",
+  sizeProp: "width",
+  size: 0,
+  direction: 1
+});
+export {
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  createSliderContext,
+  createSliderScope,
+  useSliderContext,
+  useSliderOrientationContext
+};

package/dist/jsx/helpers.js

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens, getVariableValue } from "@tamagui/core";
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+__name(getNextSortedValues, "getNextSortedValues");
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  return percentPerStep * (value - min);
+}
+__name(convertValueToPercentage, "convertValueToPercentage");
+function getLabel(index, totalValues) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`;
+  } else if (totalValues === 2) {
+    return ["Minimum", "Maximum"][index];
+  } else {
+    return void 0;
+  }
+}
+__name(getLabel, "getLabel");
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1)
+    return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue));
+  const closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+__name(getClosestValueIndex, "getClosestValueIndex");
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+__name(getThumbInBoundsOffset, "getThumbInBoundsOffset");
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+__name(getStepsBetweenValues, "getStepsBetweenValues");
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+__name(hasMinStepsBetweenValues, "hasMinStepsBetweenValues");
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+__name(linearScale, "linearScale");
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+__name(getDecimalCount, "getDecimalCount");
+function roundValue(value, decimalCount) {
+  const rounder = Math.pow(10, decimalCount);
+  return Math.round(value * rounder) / rounder;
+}
+__name(roundValue, "roundValue");
+function getSize(size) {
+  const tokens = getTokens();
+  return typeof size === "number" ? size : size ? getVariableValue(tokens.size[size]) : null;
+}
+__name(getSize, "getSize");
+export {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getSize,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue
+};

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Slider";
+export * from "./types";

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tamagui/slider",
+  "version": "1.0.1-beta.26",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@radix-ui/react-use-previous": "^0.1.1",
+    "@tamagui/compose-refs": "^1.0.1-beta.26",
+    "@tamagui/core": "^1.0.1-beta.26",
+    "@tamagui/create-context": "^1.0.1-beta.26",
+    "@tamagui/stacks": "^1.0.1-beta.26",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.26",
+    "@tamagui/use-direction": "^1.0.1-beta.26"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.26",
+    "@types/react-native": "^0.67.3",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}