@tamagui/slider 1.0.1-beta.100

package/dist/esm/constants.js

@@ -0,0 +1,30 @@
+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
+});
+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"]
+};
+export {
+  ARROW_KEYS,
+  BACK_KEYS,
+  PAGE_KEYS,
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  createSliderContext,
+  createSliderScope,
+  useSliderContext,
+  useSliderOrientationContext
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants.tsx"],
+  "sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { Direction, 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\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nexport const BACK_KEYS: Record<Direction, string[]> = {\n  ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n  rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\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;AAEM,MAAM,YAAY,CAAC,UAAU,UAAU;AACvC,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AACrE,MAAM,YAAyC;AAAA,EACpD,KAAK,CAAC,aAAa,QAAQ,aAAa,UAAU;AAAA,EAClD,KAAK,CAAC,aAAa,QAAQ,cAAc,UAAU;AACrD;",
+  "names": []
+}

package/dist/esm/helpers.js

@@ -0,0 +1,70 @@
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  return percentPerStep * (value - min);
+}
+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;
+  }
+}
+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);
+}
+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;
+}
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+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]);
+  };
+}
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+  const rounder = Math.pow(10, decimalCount);
+  return Math.round(value * rounder) / rounder;
+}
+export {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  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": ["export 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"],
+  "mappings": "AAAO,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;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,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;AAUO,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;AAMO,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;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,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;AAGO,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;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export * from "./Slider";
+import { SliderFrame, DirectionalYStack } from "./SliderImpl";
+export {
+  DirectionalYStack,
+  SliderFrame
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Slider'\n// for static extract to find, must export\nexport { SliderFrame, DirectionalYStack } from './SliderImpl'\nexport type {\n  SliderProps,\n  SliderHorizontalProps,\n  SliderVerticalProps,\n  SliderTrackProps,\n} from './types'\n"],
+  "mappings": "AAAA;AAEA;",
+  "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,324 @@
+import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getSize,
+  getVariableValue,
+  isWeb,
+  styled,
+  withStaticProperties
+} from "@tamagui/core";
+import { clamp, composeEventHandlers } from "@tamagui/helpers";
+import { ThemeableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useDirection } from "@tamagui/use-direction";
+import * as React from "react";
+import {
+  ARROW_KEYS,
+  BACK_KEYS,
+  PAGE_KEYS,
+  SLIDER_NAME,
+  SliderOrientationProvider,
+  SliderProvider,
+  useSliderContext,
+  useSliderOrientationContext
+} from "./constants";
+import {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue
+} from "./helpers";
+import { SliderFrame, SliderImpl } from "./SliderImpl";
+const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
+  const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+  const direction = useDirection(dir);
+  const isDirectionLTR = direction === "ltr";
+  const sliderRef = React.useRef(null);
+  const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
+  function getValueFromPointer(pointerPosition) {
+    const input = [0, state.size];
+    const output = isDirectionLTR ? [min, max] : [max, min];
+    const value = linearScale(input, output);
+    return value(pointerPosition);
+  }
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={state.size}><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 });
+  }} /></SliderOrientationProvider>;
+});
+const SliderVertical = React.forwardRef((props, forwardedRef) => {
+  const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+  const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
+  const sliderRef = React.useRef(null);
+  function getValueFromPointer(pointerPosition) {
+    const input = [0, state.size];
+    const output = [max, min];
+    const value = linearScale(input, output);
+    return value(pointerPosition);
+  }
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={state.size} direction={1}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} {...sliderProps} orientation="vertical" onLayout={() => {
+    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 });
+  }} /></SliderOrientationProvider>;
+});
+const TRACK_NAME = "SliderTrack";
+const SliderTrackFrame = styled(SliderFrame, {
+  name: "SliderTrack",
+  height: "100%",
+  width: "100%",
+  backgroundColor: "$background",
+  position: "relative",
+  borderRadius: 1e5,
+  overflow: "hidden"
+});
+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} size={context.size} {...trackProps} ref={forwardedRef} />;
+});
+SliderTrack.displayName = TRACK_NAME;
+const RANGE_NAME = "SliderTrackActive";
+const SliderTrackActiveFrame = styled(SliderFrame, {
+  name: "SliderTrackActive",
+  backgroundColor: "$background",
+  position: "absolute"
+});
+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} 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;
+const THUMB_NAME = "SliderThumb";
+const getThumbSize = (val) => {
+  const size = typeof val === "number" ? val : getSize(val, -1);
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+};
+const SliderThumbFrame = styled(ThemeableStack, {
+  name: "SliderThumb",
+  position: "absolute",
+  bordered: 2,
+  borderWidth: 2,
+  backgrounded: true,
+  pressTheme: isWeb,
+  focusTheme: isWeb,
+  hoverTheme: isWeb,
+  variants: {
+    size: {
+      "...size": getThumbSize
+    }
+  }
+});
+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 [thumb, setThumb] = React.useState(null);
+  const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
+  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(() => {
+    const estimatedSize = getVariableValue(getThumbSize(sizeProp).width);
+    return estimatedSize;
+  });
+  const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
+  React.useEffect(() => {
+    if (thumb) {
+      context.thumbs.add(thumb);
+      return () => {
+        context.thumbs.delete(thumb);
+      };
+    }
+  }, [thumb, context.thumbs]);
+  return <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} {...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"
+    }
+  }} size={(_a = sizeProp != null ? sizeProp : context.size) != null ? _a : "$4"} onLayout={(e) => {
+    setSize(e.nativeEvent.layout[orientation.sizeProp]);
+  }} {...{
+    [orientation.startEdge]: `${percent}%`
+  }} 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 = () => {
+    },
+    size: sizeProp,
+    ...sliderProps
+  } = props;
+  const sliderRef = React.useRef(null);
+  const composedRefs = useComposedRefs(sliderRef, forwardedRef);
+  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) => {
+      var _a;
+      if (isWeb) {
+        const thumbs = [...thumbRefs.current];
+        (_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
+      }
+      onValueChange(value2);
+    }
+  });
+  if (isWeb) {
+    React.useEffect(() => {
+      const node = sliderRef.current;
+      if (!node)
+        return;
+      const preventDefault = (e) => {
+        e.preventDefault();
+      };
+      node.addEventListener("touchstart", preventDefault);
+      return () => {
+        node.removeEventListener("touchstart", preventDefault);
+      };
+    }, []);
+  }
+  function handleSlideMove(value2) {
+    updateValues(value2, valueIndexToChangeRef.current);
+  }
+  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;
+      }
+    });
+  }
+  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}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={composedRefs} min={min} max={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);
+    }
+  }} /></SliderProvider>;
+}), {
+  Track: SliderTrack,
+  TrackActive: SliderTrackActive,
+  Thumb: SliderThumb
+});
+Slider.displayName = SLIDER_NAME;
+const Track = SliderTrack;
+const Range = SliderTrackActive;
+const Thumb = SliderThumb;
+export {
+  Range,
+  Slider,
+  SliderThumb,
+  SliderThumbFrame,
+  SliderTrack,
+  SliderTrackActive,
+  SliderTrackActiveFrame,
+  SliderTrackFrame,
+  Thumb,
+  Track
+};
+//# sourceMappingURL=Slider.js.map

package/dist/jsx/Slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Slider.tsx"],
+  "sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getSize,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n  ARROW_KEYS,\n  BACK_KEYS,\n  PAGE_KEYS,\n  SLIDER_NAME,\n  SliderOrientationProvider,\n  SliderProvider,\n  useSliderContext,\n  useSliderOrientationContext,\n} from './constants'\nimport {\n  convertValueToPercentage,\n  getClosestValueIndex,\n  getDecimalCount,\n  getLabel,\n  getNextSortedValues,\n  getThumbInBoundsOffset,\n  hasMinStepsBetweenValues,\n  linearScale,\n  roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n  ScopedProps,\n  SliderContextValue,\n  SliderHorizontalProps,\n  SliderProps,\n  SliderTrackProps,\n  SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n  (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n    const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n    const direction = useDirection(dir)\n    const isDirectionLTR = direction === 'ltr'\n    const sliderRef = React.useRef<View>(null)\n    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n    function getValueFromPointer(pointerPosition: number) {\n      const input: [number, number] = [0, state.size]\n      const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n      const value = linearScale(input, output)\n      return value(pointerPosition)\n    }\n\n    return (\n      <SliderOrientationProvider\n        scope={props.__scopeSlider}\n        startEdge={isDirectionLTR ? 'left' : 'right'}\n        endEdge={isDirectionLTR ? 'right' : 'left'}\n        direction={isDirectionLTR ? 1 : -1}\n        sizeProp=\"width\"\n        size={state.size}\n      >\n        <SliderImpl\n          ref={composeRefs(forwardedRef, sliderRef)}\n          dir={direction}\n          {...sliderProps}\n          orientation=\"horizontal\"\n          onLayout={() => {\n            sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n              setState({\n                size: width,\n                offset: pageX,\n              })\n            })\n          }}\n          onSlideStart={(event, target) => {\n            const value = getValueFromPointer(event.nativeEvent.locationX)\n            if (value) {\n              onSlideStart?.(value, target)\n            }\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n            if (value) {\n              onSlideMove?.(value)\n            }\n          }}\n          onSlideEnd={() => {}}\n          onStepKeyDown={(event) => {\n            const isBackKey = BACK_KEYS[direction].includes(event.key)\n            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n          }}\n        />\n      </SliderOrientationProvider>\n    )\n  }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n  (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n    const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n    const sliderRef = React.useRef<View>(null)\n\n    function getValueFromPointer(pointerPosition: number) {\n      const input: [number, number] = [0, state.size]\n      const output: [number, number] = [max, min]\n      const value = linearScale(input, output)\n      return value(pointerPosition)\n    }\n\n    return (\n      <SliderOrientationProvider\n        scope={props.__scopeSlider}\n        startEdge=\"bottom\"\n        endEdge=\"top\"\n        sizeProp=\"height\"\n        size={state.size}\n        direction={1}\n      >\n        <SliderImpl\n          ref={composeRefs(forwardedRef, sliderRef)}\n          {...sliderProps}\n          orientation=\"vertical\"\n          onLayout={() => {\n            sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n              setState({\n                size: height,\n                offset: pageY,\n              })\n            })\n          }}\n          onSlideStart={(event, target) => {\n            const value = getValueFromPointer(event.nativeEvent.locationY)\n            if (value) {\n              onSlideStart?.(value, target)\n            }\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n            if (value) {\n              onSlideMove?.(value)\n            }\n          }}\n          onSlideEnd={() => {}}\n          onStepKeyDown={(event) => {\n            const isBackKey = BACK_KEYS.ltr.includes(event.key)\n            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n          }}\n        />\n      </SliderOrientationProvider>\n    )\n  }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n  name: 'SliderTrack',\n  height: '100%',\n  width: '100%',\n  backgroundColor: '$background',\n  position: 'relative',\n  borderRadius: 100_000,\n  overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n  (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n    const { __scopeSlider, ...trackProps } = props\n    const context = useSliderContext(TRACK_NAME, __scopeSlider)\n    return (\n      <SliderTrackFrame\n        data-disabled={context.disabled ? '' : undefined}\n        data-orientation={context.orientation}\n        orientation={context.orientation}\n        size={context.size}\n        {...trackProps}\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n  name: 'SliderTrackActive',\n  backgroundColor: '$background',\n  position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n  (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n    const { __scopeSlider, ...rangeProps } = props\n    const context = useSliderContext(RANGE_NAME, __scopeSlider)\n    const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n    const ref = React.useRef<View>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const valuesCount = context.values.length\n    const percentages = context.values.map((value) =>\n      convertValueToPercentage(value, context.min, context.max)\n    )\n    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n    const offsetEnd = 100 - Math.max(...percentages)\n\n    return (\n      <SliderTrackActiveFrame\n        orientation={context.orientation}\n        data-orientation={context.orientation}\n        data-disabled={context.disabled ? '' : undefined}\n        size={context.size}\n        {...rangeProps}\n        ref={composedRefs}\n        {...{\n          [orientation.startEdge]: offsetStart + '%',\n          [orientation.endEdge]: offsetEnd + '%',\n        }}\n        {...(orientation.sizeProp === 'width'\n          ? {\n              height: '100%',\n            }\n          : {\n              left: 0,\n              right: 0,\n            })}\n      />\n    )\n  }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n  const size = typeof val === 'number' ? val : getSize(val, -1)\n  return {\n    width: size,\n    height: size,\n    minWidth: size,\n    minHeight: size,\n  }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n  name: 'SliderThumb',\n  position: 'absolute',\n  // TODO not taking up 2\n  bordered: 2,\n  // OR THIS\n  borderWidth: 2,\n  backgrounded: true,\n  pressTheme: isWeb,\n  focusTheme: isWeb,\n  hoverTheme: isWeb,\n\n  variants: {\n    size: {\n      '...size': getThumbSize,\n    },\n  },\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n  index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n  (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n    const context = useSliderContext(THUMB_NAME, __scopeSlider)\n    const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n    const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n    // We cast because index could be `-1` which would return undefined\n    const value = context.values[index] as number | undefined\n    const percent =\n      value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n    const label = getLabel(index, context.values.length)\n    const [size, setSize] = React.useState(() => {\n      // for SSR\n      const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n      return estimatedSize\n    })\n\n    const thumbInBoundsOffset = size\n      ? getThumbInBoundsOffset(size, percent, orientation.direction)\n      : 0\n\n    React.useEffect(() => {\n      if (thumb) {\n        context.thumbs.add(thumb)\n        return () => {\n          context.thumbs.delete(thumb)\n        }\n      }\n    }, [thumb, context.thumbs])\n\n    return (\n      <SliderThumbFrame\n        ref={composedRefs}\n        // TODO\n        // @ts-ignore\n        role=\"slider\"\n        aria-label={props['aria-label'] || label}\n        aria-valuemin={context.min}\n        aria-valuenow={value}\n        aria-valuemax={context.max}\n        aria-orientation={context.orientation}\n        data-orientation={context.orientation}\n        data-disabled={context.disabled ? '' : undefined}\n        tabIndex={context.disabled ? undefined : 0}\n        {...thumbProps}\n        {...(context.orientation === 'horizontal'\n          ? {\n              x: thumbInBoundsOffset - size / 2,\n              y: -size / 2,\n              top: '50%',\n              ...(size === 0 && {\n                top: 'auto',\n                bottom: 'auto',\n              }),\n            }\n          : {\n              x: -size / 2,\n              y: size / 2,\n              left: '50%',\n              ...(size === 0 && {\n                left: 'auto',\n                right: 'auto',\n              }),\n            })}\n        size={sizeProp ?? context.size ?? '$4'}\n        onLayout={(e) => {\n          setSize(e.nativeEvent.layout[orientation.sizeProp])\n        }}\n        {...{\n          [orientation.startEdge]: `${percent}%`,\n        }}\n        /**\n         * There will be no value on initial render while we work out the index so we hide thumbs\n         * without a value, otherwise SSR will render them in the wrong position before they\n         * snap into the correct position during hydration which would be visually jarring for\n         * slower connections.\n         */\n        // style={value === undefined ? { display: 'none' } : props.style}\n        onFocus={composeEventHandlers(props.onFocus, () => {\n          context.valueIndexToChangeRef.current = index\n        })}\n      />\n    )\n  }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n  React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n    const {\n      name,\n      min = 0,\n      max = 100,\n      step = 1,\n      orientation = 'horizontal',\n      disabled = false,\n      minStepsBetweenThumbs = 0,\n      defaultValue = [min],\n      value,\n      onValueChange = () => {},\n      size: sizeProp,\n      ...sliderProps\n    } = props\n    const sliderRef = React.useRef<View>(null)\n    const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n    const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n    const valueIndexToChangeRef = React.useRef<number>(0)\n    const isHorizontal = orientation === 'horizontal'\n    // We set this to true by default so that events bubble to forms without JS (SSR)\n    // const isFormControl =\n    //   sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n    const [values = [], setValues] = useControllableState({\n      prop: value,\n      defaultProp: defaultValue,\n      onChange: (value) => {\n        if (isWeb) {\n          const thumbs = [...thumbRefs.current]\n          thumbs[valueIndexToChangeRef.current]?.focus()\n        }\n        onValueChange(value)\n      },\n    })\n\n    if (isWeb) {\n      React.useEffect(() => {\n        // @ts-ignore\n        const node = sliderRef.current as HTMLElement\n        if (!node) return\n        const preventDefault = (e) => {\n          e.preventDefault()\n        }\n        node.addEventListener('touchstart', preventDefault)\n        return () => {\n          node.removeEventListener('touchstart', preventDefault)\n        }\n      }, [])\n    }\n\n    function handleSlideMove(value: number) {\n      updateValues(value, valueIndexToChangeRef.current)\n    }\n\n    function updateValues(value: number, atIndex: number) {\n      const decimalCount = getDecimalCount(step)\n      const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n      const nextValue = clamp(snapToStep, [min, max])\n      setValues((prevValues = []) => {\n        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n        if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n          valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n          return String(nextValues) === String(prevValues) ? prevValues : nextValues\n        } else {\n          return prevValues\n        }\n      })\n    }\n\n    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n    return (\n      <SliderProvider\n        scope={props.__scopeSlider}\n        disabled={disabled}\n        min={min}\n        max={max}\n        valueIndexToChangeRef={valueIndexToChangeRef}\n        thumbs={thumbRefs.current}\n        values={values}\n        orientation={orientation}\n        size={sizeProp}\n      >\n        <SliderOriented\n          aria-disabled={disabled}\n          data-disabled={disabled ? '' : undefined}\n          {...sliderProps}\n          ref={composedRefs}\n          min={min}\n          max={max}\n          onSlideStart={\n            disabled\n              ? undefined\n              : (value: number, target) => {\n                  // when starting on the track, move it right away\n                  // when starting on thumb, dont jump until movemenet as it feels weird\n                  if (target !== 'thumb') {\n                    const closestIndex = getClosestValueIndex(values, value)\n                    updateValues(value, closestIndex)\n                  }\n                }\n          }\n          onSlideMove={disabled ? undefined : handleSlideMove}\n          onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n          onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n          onStepKeyDown={({ event, direction: stepDirection }) => {\n            if (!disabled) {\n              const isPageKey = PAGE_KEYS.includes(event.key)\n              const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n              const multiplier = isSkipKey ? 10 : 1\n              const atIndex = valueIndexToChangeRef.current\n              const value = values[atIndex]\n              const stepInDirection = step * multiplier * stepDirection\n              updateValues(value + stepInDirection, atIndex)\n            }\n          }}\n        />\n        {/* {isFormControl &&\n          values.map((value, index) => (\n            <BubbleInput\n              key={index}\n              name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n              value={value}\n            />\n          ))} */}\n      </SliderProvider>\n    )\n  }),\n  {\n    Track: SliderTrack,\n    TrackActive: SliderTrackActive,\n    Thumb: SliderThumb,\n  }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n//   const { value, ...inputProps } = props\n//   const ref = React.useRef<HTMLInputElement>(null)\n//   const prevValue = usePrevious(value)\n\n//   // Bubble value change to parents (e.g form change event)\n//   React.useEffect(() => {\n//     const input = ref.current!\n//     const inputProto = window.HTMLInputElement.prototype\n//     const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n//     const setValue = descriptor.set\n//     if (prevValue !== value && setValue) {\n//       const event = new Event('input', { bubbles: true })\n//       setValue.call(input, value)\n//       input.dispatchEvent(event)\n//     }\n//   }, [prevValue, value])\n\n//   /**\n//    * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n//    * wrap it will not be able to access its value via the FormData API.\n//    *\n//    * We purposefully do not add the `value` attribute here to allow the value\n//    * to be set programatically and bubble to any parent form `onChange` event.\n//    * Adding the `value` will cause React to consider the programatic\n//    * dispatch a duplicate and it will get swallowed.\n//    */\n//   return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n  Slider,\n  SliderTrack,\n  SliderTrackActive,\n  SliderThumb,\n  //\n  Track,\n  Range,\n  Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/SliderImpl.js

@@ -0,0 +1,84 @@
+import { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from "@tamagui/core";
+import { YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from "./constants";
+const DirectionalYStack = styled(YStack, {
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {}
+    }
+  }
+});
+const SliderFrame = styled(DirectionalYStack, {
+  position: "relative",
+  variants: {
+    size: (val, extras) => {
+      const orientation = extras.props.orientation;
+      const size = Math.round(getVariableValue(getSize(val)) / 6);
+      if (orientation === "horizontal") {
+        return {
+          height: size,
+          borderRadius: size,
+          justifyContent: "center"
+        };
+      }
+      return {
+        width: size,
+        borderRadius: size,
+        alignItems: "center"
+      };
+    }
+  }
+});
+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} {...isWeb && {
+    onKeyDown: (event) => {
+      if (event.key === "Home") {
+        onHomeKeyDown(event);
+        event.preventDefault();
+      } else if (event.key === "End") {
+        onEndKeyDown(event);
+        event.preventDefault();
+      } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+        onStepKeyDown(event);
+        event.preventDefault();
+      }
+    }
+  }} onMoveShouldSetResponderCapture={() => true} onScrollShouldSetResponder={() => true} onScrollShouldSetResponderCapture={() => true} onMoveShouldSetResponder={() => true} onStartShouldSetResponder={() => true} onResponderTerminationRequest={() => {
+    return false;
+  }} onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
+    const target = event.target;
+    console.log("target", target, context.thumbs.has(target), context.thumbs);
+    const isStartingOnThumb = context.thumbs.has(target);
+    if (isWeb && target instanceof HTMLElement) {
+      if (context.thumbs.has(target)) {
+        target.focus();
+      }
+    }
+    onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
+  })} onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onSlideMove(event);
+  })} onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {
+    onSlideEnd(event);
+  })} />;
+});
+export {
+  DirectionalYStack,
+  SliderFrame,
+  SliderImpl
+};
+//# sourceMappingURL=SliderImpl.js.map

package/dist/jsx/SliderImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderImpl.tsx"],
+  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\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  },\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  },\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 HTMLElement | number\n          console.log('target', target, context.thumbs.has(target), context.thumbs)\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.preventDefault()\n          event.stopPropagation()\n\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;AAGA;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,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,iBAAiB,QAAQ,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,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;AAC3D,SACE,CAAC,YACC,KAAK,SACD,aACJ,kBAAkB,YAAY,aAC9B,KAAK,kBACA,SAAS;AAAA,IACZ,WAAW,CAAC,UAAU;AACpB,UAAI,MAAM,QAAQ,QAAQ;AACxB,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,qBAAa,KAAK;AAElB,cAAM,eAAe;AAAA,MACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GACA,iCAAiC,MAAM,MACvC,4BAA4B,MAAM,MAClC,mCAAmC,MAAM,MACzC,0BAA0B,MAAM,MAChC,2BAA2B,MAAM,MAEjC,+BAA+B,MAAM;AACnC,WAAO;AAAA,EACT,GACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,UAAM,SAAS,MAAM;AACrB,YAAQ,IAAI,UAAU,QAAQ,QAAQ,OAAO,IAAI,MAAM,GAAG,QAAQ,MAAM;AACxE,UAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,QAAI,SAAS,kBAAkB,aAAa;AAC1C,UAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AACA,iBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,EAC3D,CAAC,GACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,UAAM,eAAe;AACrB,UAAM,gBAAgB;AAGtB,gBAAY,KAAK;AAAA,EACnB,CAAC,GACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,eAAW,KAAK;AAAA,EAClB,CAAC,GACH;AAEJ,CACF;",
+  "names": []
+}