@tamagui/slider 1.0.1-beta.26

package/dist/cjs/helpers.js

@@ -0,0 +1,120 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var helpers_exports = {};
+__export(helpers_exports, {
+  convertValueToPercentage: () => convertValueToPercentage,
+  getClosestValueIndex: () => getClosestValueIndex,
+  getDecimalCount: () => getDecimalCount,
+  getLabel: () => getLabel,
+  getNextSortedValues: () => getNextSortedValues,
+  getSize: () => getSize,
+  getThumbInBoundsOffset: () => getThumbInBoundsOffset,
+  hasMinStepsBetweenValues: () => hasMinStepsBetweenValues,
+  linearScale: () => linearScale,
+  roundValue: () => roundValue
+});
+module.exports = __toCommonJS(helpers_exports);
+var import_core = require("@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 = (0, import_core.getTokens)();
+  return typeof size === "number" ? size : size ? (0, import_core.getVariableValue)(tokens.size[size]) : null;
+}
+__name(getSize, "getSize");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertValueToPercentage,
+  getClosestValueIndex,
+  getDecimalCount,
+  getLabel,
+  getNextSortedValues,
+  getSize,
+  getThumbInBoundsOffset,
+  hasMinStepsBetweenValues,
+  linearScale,
+  roundValue
+});
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwD;AAEjD,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,2BAAU;AACzB,SAAO,OAAO,SAAS,WACnB,OACA,OACC,kCAAiB,OAAO,KAAK,KAAK,IACnC;AACN;AAPgB;",
+  "names": []
+}

package/dist/cjs/index.js

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

package/dist/cjs/index.js.map

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

package/dist/cjs/types.js

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

package/dist/cjs/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/types.ts"],
+  "sourcesContent": ["import type { GestureReponderEvent, SizeTokens } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport type { SizableStackProps, YStackProps } from '@tamagui/stacks'\nimport type { View } from 'react-native'\n\nexport type ScopedProps<P> = P & { __scopeSlider?: Scope }\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport type SliderImplElement = HTMLElement | View\n\ntype SliderImplPrivateProps = {\n  onSlideStart(event: GestureReponderEvent): void\n  onSlideMove(event: GestureReponderEvent): void\n  onSlideEnd(event: GestureReponderEvent): void\n  onHomeKeyDown(event: React.KeyboardEvent): void\n  onEndKeyDown(event: React.KeyboardEvent): void\n  onStepKeyDown(event: React.KeyboardEvent): void\n}\n\nexport interface SliderTrackProps extends SizableStackProps {}\n\nexport interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {\n  dir?: Direction\n  orientation: 'horizontal' | 'vertical'\n}\n\ntype SliderOrientationPrivateProps = {\n  min: number\n  max: number\n  onSlideStart?(value: number): void\n  onSlideMove?(value: number): void\n  onHomeKeyDown(event: React.KeyboardEvent): void\n  onEndKeyDown(event: React.KeyboardEvent): void\n  onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void\n}\n\ninterface SliderOrientationProps\n  extends Omit<SliderImplProps, keyof SliderImplPrivateProps | 'orientation'>,\n    SliderOrientationPrivateProps {}\n\nexport interface SliderHorizontalProps extends SliderOrientationProps {\n  dir?: Direction\n}\n\nexport interface SliderVerticalProps extends SliderOrientationProps {\n  dir?: Direction\n}\n\nexport interface SliderProps\n  extends Omit<\n    SliderHorizontalProps | SliderVerticalProps,\n    keyof SliderOrientationPrivateProps | 'defaultValue'\n  > {\n  size?: SizeTokens\n  name?: string\n  disabled?: boolean\n  orientation?: React.AriaAttributes['aria-orientation']\n  dir?: Direction\n  min?: number\n  max?: number\n  step?: number\n  minStepsBetweenThumbs?: number\n  value?: number[]\n  defaultValue?: number[]\n  onValueChange?(value: number[]): void\n}\n\nexport type SliderContextValue = {\n  size?: number | null\n  disabled?: boolean\n  min: number\n  max: number\n  values: number[]\n  valueIndexToChangeRef: React.MutableRefObject<number>\n  thumbs: Set<any>\n  orientation: SliderProps['orientation']\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/Slider.js

@@ -0,0 +1,338 @@
+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 /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
+    scope: props.__scopeSlider,
+    startEdge: isDirectionLTR ? "left" : "right",
+    endEdge: isDirectionLTR ? "right" : "left",
+    direction: isDirectionLTR ? 1 : -1,
+    sizeProp: "width",
+    size
+  }, /* @__PURE__ */ React.createElement(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 });
+    }
+  }));
+});
+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 /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
+    scope: props.__scopeSlider,
+    startEdge: "bottom",
+    endEdge: "top",
+    sizeProp: "height",
+    size: 0,
+    direction: 1
+  }, /* @__PURE__ */ React.createElement(SliderImpl, {
+    ...sliderProps,
+    orientation: "vertical",
+    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 });
+    }
+  }));
+});
+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 /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(SliderProvider, {
+    scope: props.__scopeSlider,
+    disabled,
+    min,
+    max,
+    valueIndexToChangeRef,
+    thumbs: thumbRefs.current,
+    values,
+    orientation,
+    size: sizeProp || 20
+  }, /* @__PURE__ */ React.createElement(SliderOriented, {
+    "aria-disabled": disabled,
+    "data-disabled": disabled ? "" : void 0,
+    ...sliderProps,
+    ref: forwardedRef,
+    min,
+    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);
+      }
+    }
+  }));
+}), {
+  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 /* @__PURE__ */ React.createElement("input", {
+    style: { display: "none" },
+    ...inputProps,
+    ref,
+    defaultValue: value
+  });
+}, "BubbleInput");
+const Track = SliderTrack;
+const Range = SliderTrackActive;
+const Thumb = SliderThumb;
+export {
+  Range,
+  Slider,
+  SliderThumb,
+  SliderTrack,
+  SliderTrackActive,
+  Thumb,
+  Track
+};
+//# sourceMappingURL=Slider.js.map

package/dist/esm/Slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Slider.tsx"],
+  "sourcesContent": ["// forked from radix-ui\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { getVariantExtras, styled, withStaticProperties } from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\n// import { useSize } from '@tamagui/react-use-size'\nimport { SizableStack, SizableStackProps, YStackProps, getCircleSize } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { LayoutRectangle, View } from 'react-native'\n\nimport {\n  SLIDER_NAME,\n  SliderOrientationProvider,\n  SliderProvider,\n  useSliderContext,\n  useSliderOrientationContext,\n} from './context'\nimport {\n  convertValueToPercentage,\n  getClosestValueIndex,\n  getDecimalCount,\n  getLabel,\n  getNextSortedValues,\n  getSize,\n  getThumbInBoundsOffset,\n  hasMinStepsBetweenValues,\n  linearScale,\n  roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n  Direction,\n  ScopedProps,\n  SliderContextValue,\n  SliderHorizontalProps,\n  SliderImplElement,\n  SliderProps,\n  SliderTrackProps,\n  SliderVerticalProps,\n} from './types'\n\nconst PAGE_KEYS = ['PageUp', 'PageDown']\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nconst BACK_KEYS: Record<Direction, string[]> = {\n  ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n  rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderHorizontalElement = SliderImplElement\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n  (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n    const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n    const layoutRef = React.useRef<LayoutRectangle | null>(null)\n    const direction = useDirection(dir)\n    const isDirectionLTR = direction === 'ltr'\n    const [size, setSize] = React.useState(0)\n\n    function getValueFromPointer(pointerPosition: number) {\n      const layout = layoutRef.current\n      if (!layout) return\n      const input: [number, number] = [0, layout.width]\n      const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n      const value = linearScale(input, output)\n      return value(pointerPosition - layout.x)\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={size}\n      >\n        <SliderImpl\n          dir={direction}\n          orientation=\"horizontal\"\n          {...sliderProps}\n          onLayout={(e) => {\n            const layout = e.nativeEvent.layout\n            layoutRef.current = layout\n            setSize(layout.height)\n          }}\n          ref={forwardedRef}\n          onSlideStart={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.pageX)\n            if (value) {\n              onSlideStart?.(value)\n            }\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.pageX)\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\ntype SliderVerticalElement = SliderImplElement\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n  (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n    const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n    const sliderRef = React.useRef<SliderImplElement>(null)\n    const ref = useComposedRefs(forwardedRef, sliderRef)\n    const rectRef = React.useRef<ClientRect>()\n\n    function getValueFromPointer(pointerPosition: number) {\n      // @ts-ignore\n      const rect = rectRef.current || sliderRef.current!.getBoundingClientRect()\n      const input: [number, number] = [0, rect.height]\n      const output: [number, number] = [max, min]\n      const value = linearScale(input, output)\n      rectRef.current = rect\n      return value(pointerPosition - rect.top)\n    }\n\n    return (\n      <SliderOrientationProvider\n        scope={props.__scopeSlider}\n        startEdge=\"bottom\"\n        endEdge=\"top\"\n        sizeProp=\"height\"\n        size={0}\n        direction={1}\n      >\n        <SliderImpl\n          {...sliderProps}\n          orientation=\"vertical\"\n          ref={ref}\n          onSlideStart={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.locationY)\n            onSlideStart?.(value)\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.nativeEvent.locationY)\n            onSlideMove?.(value)\n          }}\n          onSlideEnd={() => (rectRef.current = undefined)}\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\nconst SliderTrackFrame = styled(SliderFrame, {\n  name: 'SliderTrackFrame',\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        {...trackProps}\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\ntype SliderTrackActiveElement = HTMLElement | View\ninterface SliderTrackActiveProps extends YStackProps {}\n\nconst SliderTrackActiveFrame = styled(SliderFrame, {\n  name: 'SliderTrackActive',\n})\n\nconst SliderTrackActive = React.forwardRef<SliderTrackActiveElement, 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<HTMLSpanElement>(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        {...rangeProps}\n        ref={composedRefs}\n        {...{\n          [orientation.startEdge]: offsetStart + '%',\n          [orientation.endEdge]: offsetEnd + '%',\n        }}\n      />\n    )\n  }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\nconst SliderThumbFrame = styled(SizableStack, {\n  name: 'SliderThumb',\n  position: 'absolute',\n})\n\ntype SliderThumbElement = HTMLElement | View\ninterface SliderThumbProps extends SizableStackProps {\n  index: number\n}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, 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<HTMLSpanElement | 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(0)\n\n    const thumbInBoundsOffset = size\n      ? getThumbInBoundsOffset(size, percent, orientation.direction)\n      : 0\n\n    console.log('thumbInBoundsOffset', thumbInBoundsOffset, size, percent)\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={forwardedRef}\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        x={thumbInBoundsOffset}\n        y={-size / 2}\n        size={sizeProp ?? context.size ?? 30}\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\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement\n\nconst Slider = withStaticProperties(\n  React.forwardRef<SliderElement, 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 [slider, setSlider] = React.useState<HTMLElement | View | null>(null)\n    // const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node))\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    // TODO\n    // const isFormControl = slider ? Boolean(slider.closest('form')) : true\n\n    const [values = [], setValues] = useControllableState({\n      prop: value,\n      defaultProp: defaultValue,\n      onChange: (value) => {\n        // const thumbs = [...thumbRefs.current]\n        // thumbs[valueIndexToChangeRef.current]?.focus()\n        onValueChange(value)\n      },\n    })\n\n    function handleSlideStart(value: number) {\n      const closestIndex = getClosestValueIndex(values, value)\n      updateValues(value, closestIndex)\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        // @ts-ignore\n        size={sizeProp || 20}\n      >\n        <SliderOriented\n          aria-disabled={disabled}\n          data-disabled={disabled ? '' : undefined}\n          {...sliderProps}\n          ref={forwardedRef}\n          min={min}\n          max={max}\n          onSlideStart={disabled ? undefined : handleSlideStart}\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\nconst 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}\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/SliderImpl.js

@@ -0,0 +1,69 @@
+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 /* @__PURE__ */ React.createElement(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
+};
+//# sourceMappingURL=SliderImpl.js.map