@tamagui/slider 1.0.1-beta.26 → 1.0.1-beta.27

package/dist/esm/SliderImpl.js

@@ -1,7 +1,7 @@
-import { composeEventHandlers, styled } from "@tamagui/core";
+import { composeEventHandlers, isWeb, styled } from "@tamagui/core";
 import { YStack, getCircleSize } from "@tamagui/stacks";
 import * as React from "react";
-import { SLIDER_NAME, useSliderContext } from "./context";
+import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from "./constants";
 const DirectionalYStack = styled(YStack, {
   variants: {
     orientation: {
@@ -11,22 +11,21 @@ const DirectionalYStack = styled(YStack, {
   }
 });
 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;
+      const size = circleSize / 10;
       if (orientation === "horizontal") {
         return {
           height: size,
-          width: 100
+          borderRadius: size
         };
       }
       return {
         width: size,
-        height: 100
+        borderRadius: size
       };
     }
   }
@@ -48,10 +47,31 @@ const SliderImpl = React.forwardRef((props, forwardedRef) => {
     ...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();
+        }
+      }
+    },
     onStartShouldSetResponder: () => true,
     onResponderGrant: composeEventHandlers(props.onResponderGrant, (event) => {
+      const target = event.target;
+      const isStartingOnThumb = context.thumbs.has(event.target);
       event.preventDefault();
-      onSlideStart(event);
+      if (target instanceof HTMLElement) {
+        if (context.thumbs.has(target)) {
+          target.focus();
+        }
+      }
+      onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
     }),
     onResponderMove: composeEventHandlers(props.onResponderMove, (event) => {
       onSlideMove(event);

package/dist/esm/SliderImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderImpl.tsx"],
-  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, styled } from '@tamagui/core'\nimport { YStack, getCircleSize } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { SLIDER_NAME, useSliderContext } from './context'\nimport { ScopedProps, SliderImplElement, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  name: 'Slider',\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const circleSize = getCircleSize(val, extras)\n      const size = circleSize / 4\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          width: 100,\n        }\n      }\n      return {\n        width: size,\n        height: 100,\n      }\n    },\n  },\n})\n\nexport const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n\n    return (\n      <SliderFrame\n        size=\"$4\"\n        {...sliderProps}\n        data-orientation={sliderProps.orientation}\n        ref={forwardedRef}\n        // onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n        //   if (event.key === 'Home') {\n        //     onHomeKeyDown(event)\n        //     // Prevent scrolling to page start\n        //     event.preventDefault()\n        //   } else if (event.key === 'End') {\n        //     onEndKeyDown(event)\n        //     // Prevent scrolling to page end\n        //     event.preventDefault()\n        //   } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n        //     onStepKeyDown(event)\n        //     // Prevent scrolling for directional key presses\n        //     event.preventDefault()\n        //   }\n        // })}\n        onStartShouldSetResponder={() => true}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          // const target = event.target as HTMLElement\n          // console.log('wut', target)\n          // target.setPointerCapture(event.pointerId)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          event.preventDefault()\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          // if (context.thumbs.has(target)) {\n          //   target.focus()\n          // } else {\n          onSlideStart(event)\n          // }\n        })}\n        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideMove(event)\n        })}\n        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideEnd(event)\n        })}\n      />\n    )\n  }\n)\n"],
-  "mappings": "AAIA;AACA;AACA;AAEA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,aAAa,cAAc,KAAK,MAAM;AAC5C,YAAM,OAAO,aAAa;AAC1B,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,iBAAiB,aAAa,aAAa;AAE3D,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,OACD;AAAA,IACJ,oBAAkB,YAAY;AAAA,IAC9B,KAAK;AAAA,IAgBL,2BAA2B,MAAM;AAAA,IACjC,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AAKxE,YAAM,eAAe;AAMrB,mBAAa,KAAK;AAAA,IAEpB,CAAC;AAAA,IACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AAEtE,kBAAY,KAAK;AAAA,IACnB,CAAC;AAAA,IACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,iBAAW,KAAK;AAAA,IAClB,CAAC;AAAA,GACH;AAEJ,CACF;",
+  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, isWeb, styled } from '@tamagui/core'\nimport { YStack, getCircleSize } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplElement, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const circleSize = getCircleSize(val, extras)\n      const size = circleSize / 10\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          borderRadius: size,\n        }\n      }\n      return {\n        width: size,\n        borderRadius: size,\n      }\n    },\n  },\n})\n\nexport const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n    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        onStartShouldSetResponder={() => true}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          const target = event.target as HTMLElement | number\n          const isStartingOnThumb = context.thumbs.has(event.target)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          event.preventDefault()\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          if (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          // const target = event.target as HTMLElement\n          onSlideMove(event)\n        })}\n        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideEnd(event)\n        })}\n      />\n    )\n  }\n)\n"],
+  "mappings": "AAIA;AACA;AACA;AAEA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,aAAa,cAAc,KAAK,MAAM;AAC5C,YAAM,OAAO,aAAa;AAC1B,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,QAChB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,MAChB;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,oCAAC;AAAA,IACC,MAAK;AAAA,OACD;AAAA,IACJ,oBAAkB,YAAY;AAAA,IAC9B,KAAK;AAAA,OACA,SAAS;AAAA,MACZ,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,QAAQ;AACxB,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,uBAAa,KAAK;AAElB,gBAAM,eAAe;AAAA,QACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,wBAAc,KAAK;AAEnB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,IACA,2BAA2B,MAAM;AAAA,IACjC,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,YAAM,SAAS,MAAM;AACrB,YAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM,MAAM;AAEzD,YAAM,eAAe;AAGrB,UAAI,kBAAkB,aAAa;AACjC,YAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,iBAAO,MAAM;AAAA,QACf;AAAA,MACF;AACA,mBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,IAC3D,CAAC;AAAA,IACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AAEtE,kBAAY,KAAK;AAAA,IACnB,CAAC;AAAA,IACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,iBAAW,KAAK;AAAA,IAClB,CAAC;AAAA,GACH;AAEJ,CACF;",
   "names": []
 }

package/dist/esm/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/index.js

@@ -1,3 +1,9 @@
 export * from "./Slider";
-export * from "./types";
+import { SliderProps, SliderHorizontalProps, SliderVerticalProps, SliderTrackProps } from "./types";
+export {
+  SliderHorizontalProps,
+  SliderProps,
+  SliderTrackProps,
+  SliderVerticalProps
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/jsx/Slider.js

@@ -1,20 +1,22 @@
 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 { ThemeableSizableStack } 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 "./context";
+} from "./constants";
 import {
   convertValueToPercentage,
   getClosestValueIndex,
@@ -27,17 +29,11 @@ import {
   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 layoutRef = React.useRef(null);
   const [size, setSize] = React.useState(0);
   function getValueFromPointer(pointerPosition) {
     const layout = layoutRef.current;
@@ -46,20 +42,20 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
     const input = [0, layout.width];
     const output = isDirectionLTR ? [min, max] : [max, min];
     const value = linearScale(input, output);
-    return value(pointerPosition - layout.x);
+    return value(pointerPosition);
   }
   __name(getValueFromPointer, "getValueFromPointer");
-  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={size}><SliderImpl dir={direction} orientation="horizontal" {...sliderProps} onLayout={(e) => {
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={size}><SliderImpl ref={forwardedRef} dir={direction} {...sliderProps} orientation="horizontal" onLayout={(e) => {
     const layout = e.nativeEvent.layout;
     layoutRef.current = layout;
     setSize(layout.height);
-  }} ref={forwardedRef} onSlideStart={(event) => {
-    const value = getValueFromPointer(event.nativeEvent.pageX);
+  }} onSlideStart={(event, target) => {
+    const value = getValueFromPointer(event.nativeEvent.locationX);
     if (value) {
-      onSlideStart == null ? void 0 : onSlideStart(value);
+      onSlideStart == null ? void 0 : onSlideStart(value, target);
     }
   }} onSlideMove={(event) => {
-    const value = getValueFromPointer(event.nativeEvent.pageX);
+    const value = getValueFromPointer(event.nativeEvent.locationX);
     if (value) {
       onSlideMove == null ? void 0 : onSlideMove(value);
     }
@@ -71,42 +67,58 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
 });
 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();
+  const layoutRef = React.useRef(null);
+  const [size, setSize] = React.useState(0);
   function getValueFromPointer(pointerPosition) {
-    const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
-    const input = [0, rect.height];
+    const layout = layoutRef.current;
+    if (!layout)
+      return;
+    const input = [0, layout.height];
     const output = [max, min];
     const value = linearScale(input, output);
-    rectRef.current = rect;
-    return value(pointerPosition - rect.top);
+    return value(pointerPosition);
   }
   __name(getValueFromPointer, "getValueFromPointer");
-  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={0} direction={1}><SliderImpl {...sliderProps} orientation="vertical" ref={ref} onSlideStart={(event) => {
+  return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={size} direction={1}><SliderImpl ref={forwardedRef} {...sliderProps} orientation="vertical" onLayout={(e) => {
+    const layout = e.nativeEvent.layout;
+    layoutRef.current = layout;
+    setSize(layout.height);
+  }} onSlideStart={(event, target) => {
     const value = getValueFromPointer(event.nativeEvent.locationY);
-    onSlideStart == null ? void 0 : onSlideStart(value);
+    if (value) {
+      onSlideStart == null ? void 0 : onSlideStart(value, target);
+    }
   }} onSlideMove={(event) => {
     const value = getValueFromPointer(event.nativeEvent.locationY);
-    onSlideMove == null ? void 0 : onSlideMove(value);
-  }} onSlideEnd={() => rectRef.current = void 0} onStepKeyDown={(event) => {
+    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: "SliderTrackFrame"
+  name: "SliderTrack",
+  height: "100%",
+  width: "100%",
+  backgroundColor: "$background",
+  position: "relative",
+  borderRadius: 1e5
 });
 const SliderTrack = React.forwardRef((props, forwardedRef) => {
   const { __scopeSlider, ...trackProps } = props;
   const context = useSliderContext(TRACK_NAME, __scopeSlider);
-  return <SliderTrackFrame data-disabled={context.disabled ? "" : void 0} data-orientation={context.orientation} orientation={context.orientation} {...trackProps} ref={forwardedRef} />;
+  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"
+  name: "SliderTrackActive",
+  backgroundColor: "$background",
+  position: "absolute"
 });
 const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
   const { __scopeSlider, ...rangeProps } = props;
@@ -118,29 +130,56 @@ const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
   const percentages = context.values.map((value) => convertValueToPercentage(value, context.min, context.max));
   const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
   const offsetEnd = 100 - Math.max(...percentages);
-  return <SliderTrackActiveFrame orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} {...rangeProps} ref={composedRefs} {...{
+  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 SliderThumbFrame = styled(SizableStack, {
+const SliderThumbFrame = styled(ThemeableSizableStack, {
   name: "SliderThumb",
-  position: "absolute"
+  position: "absolute",
+  bordered: 2,
+  borderWidth: 2,
+  pressable: true,
+  focusable: true,
+  hoverable: true
 });
 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(0);
   const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
-  console.log("thumbInBoundsOffset", thumbInBoundsOffset, size, percent);
-  return <SliderThumbFrame ref={forwardedRef} aria-label={props["aria-label"] || label} aria-valuemin={context.min} aria-valuenow={value} aria-valuemax={context.max} aria-orientation={context.orientation} data-orientation={context.orientation} data-disabled={context.disabled ? "" : void 0} {...thumbProps} x={thumbInBoundsOffset} y={-size / 2} size={(_a = sizeProp != null ? sizeProp : context.size) != null ? _a : 30} onLayout={(e) => {
+  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%"
+  } : {
+    x: -size / 2,
+    y: size / 2,
+    left: "50%"
+  }} size={(_a = sizeProp != null ? sizeProp : context.size) != null ? _a : 30} onLayout={(e) => {
     setSize(e.nativeEvent.layout[orientation.sizeProp]);
   }} {...{
     [orientation.startEdge]: `${percent}%`
@@ -172,14 +211,12 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
     prop: value,
     defaultProp: defaultValue,
     onChange: (value2) => {
+      var _a;
+      const thumbs = [...thumbRefs.current];
+      (_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
       onValueChange(value2);
     }
   });
-  function handleSlideStart(value2) {
-    const closestIndex = getClosestValueIndex(values, value2);
-    updateValues(value2, closestIndex);
-  }
-  __name(handleSlideStart, "handleSlideStart");
   function handleSlideMove(value2) {
     updateValues(value2, valueIndexToChangeRef.current);
   }
@@ -200,7 +237,13 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
   }
   __name(updateValues, "updateValues");
   const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-  return <SliderProvider scope={props.__scopeSlider} disabled={disabled} min={min} max={max} valueIndexToChangeRef={valueIndexToChangeRef} thumbs={thumbRefs.current} values={values} orientation={orientation} size={sizeProp || 20}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={forwardedRef} min={min} max={max} onSlideStart={disabled ? void 0 : handleSlideStart} onSlideMove={disabled ? void 0 : handleSlideMove} onHomeKeyDown={() => !disabled && updateValues(min, 0)} onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)} onStepKeyDown={({ event, direction: stepDirection }) => {
+  return <SliderProvider scope={props.__scopeSlider} disabled={disabled} min={min} max={max} valueIndexToChangeRef={valueIndexToChangeRef} thumbs={thumbRefs.current} values={values} orientation={orientation} size={sizeProp || 20}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={forwardedRef} min={min} max={max} onSlideStart={disabled ? void 0 : (value2, target) => {
+    console.log("target", 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);
@@ -217,23 +260,6 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
   Thumb: SliderThumb
 });
 Slider.displayName = SLIDER_NAME;
-const BubbleInput = /* @__PURE__ */ __name((props) => {
-  const { value, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevValue = usePrevious(value);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
-    const setValue = descriptor.set;
-    if (prevValue !== value && setValue) {
-      const event = new Event("input", { bubbles: true });
-      setValue.call(input, value);
-      input.dispatchEvent(event);
-    }
-  }, [prevValue, value]);
-  return <input style={{ display: "none" }} {...inputProps} ref={ref} defaultValue={value} />;
-}, "BubbleInput");
 const Track = SliderTrack;
 const Range = SliderTrackActive;
 const Thumb = SliderThumb;

package/dist/jsx/SliderImpl.js

@@ -1,7 +1,7 @@
-import { composeEventHandlers, styled } from "@tamagui/core";
+import { composeEventHandlers, isWeb, styled } from "@tamagui/core";
 import { YStack, getCircleSize } from "@tamagui/stacks";
 import * as React from "react";
-import { SLIDER_NAME, useSliderContext } from "./context";
+import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from "./constants";
 const DirectionalYStack = styled(YStack, {
   variants: {
     orientation: {
@@ -11,22 +11,21 @@ const DirectionalYStack = styled(YStack, {
   }
 });
 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;
+      const size = circleSize / 10;
       if (orientation === "horizontal") {
         return {
           height: size,
-          width: 100
+          borderRadius: size
         };
       }
       return {
         width: size,
-        height: 100
+        borderRadius: size
       };
     }
   }
@@ -43,9 +42,29 @@ const SliderImpl = React.forwardRef((props, forwardedRef) => {
     ...sliderProps
   } = props;
   const context = useSliderContext(SLIDER_NAME, __scopeSlider);
-  return <SliderFrame size="$4" {...sliderProps} data-orientation={sliderProps.orientation} ref={forwardedRef} onStartShouldSetResponder={() => true} onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
+  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();
+      }
+    }
+  }} onStartShouldSetResponder={() => true} onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
+    const target = event.target;
+    const isStartingOnThumb = context.thumbs.has(event.target);
     event.preventDefault();
-    onSlideStart(event);
+    if (target instanceof HTMLElement) {
+      if (context.thumbs.has(target)) {
+        target.focus();
+      }
+    }
+    onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
   })} onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
     onSlideMove(event);
   })} onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {

package/dist/jsx/constants.js

@@ -0,0 +1,29 @@
+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
+};

package/dist/jsx/index.js

@@ -1,2 +1,8 @@
 export * from "./Slider";
-export * from "./types";
+import { SliderProps, SliderHorizontalProps, SliderVerticalProps, SliderTrackProps } from "./types";
+export {
+  SliderHorizontalProps,
+  SliderProps,
+  SliderTrackProps,
+  SliderVerticalProps
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "1.0.1-beta.26",
+  "version": "1.0.1-beta.27",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/compose-refs": "^1.0.1-beta.26",
-    "@tamagui/core": "^1.0.1-beta.26",
-    "@tamagui/create-context": "^1.0.1-beta.26",
-    "@tamagui/stacks": "^1.0.1-beta.26",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.26",
-    "@tamagui/use-direction": "^1.0.1-beta.26"
+    "@tamagui/compose-refs": "^1.0.1-beta.27",
+    "@tamagui/core": "^1.0.1-beta.27",
+    "@tamagui/create-context": "^1.0.1-beta.27",
+    "@tamagui/stacks": "^1.0.1-beta.27",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.27",
+    "@tamagui/use-direction": "^1.0.1-beta.27"
   },
   "peerDependencies": {
     "react": "*",
@@ -32,7 +32,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.26",
+    "@tamagui/build": "^1.0.1-beta.27",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/types/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAgB,iBAAiB,EAAE,WAAW,EAAiB,MAAM,iBAAiB,CAAA;AAG7F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AAsBpD,OAAO,EAKL,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAEjB,MAAM,SAAS,CAAA;AAahB,aAAK,uBAAuB,GAAG,iBAAiB,CAAA;AAiEhD,aAAK,qBAAqB,GAAG,iBAAiB,CAAA;AAyD9C,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAM5C,QAAA,MAAM,WAAW,6FAchB,CAAA;AAUD,aAAK,wBAAwB,GAAG,WAAW,GAAG,IAAI,CAAA;AAClD,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AAMvD,QAAA,MAAM,iBAAiB,yGA4BtB,CAAA;AAeD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC5C,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,6FAiEhB,CAAA;AAQD,aAAK,aAAa,GAAG,uBAAuB,GAAG,qBAAqB,CAAA;AAEpE,QAAA,MAAM,MAAM;;;;CAiHX,CAAA;AAuCD,QAAA,MAAM,KAAK,6FAAc,CAAA;AACzB,QAAA,MAAM,KAAK,yGAAoB,CAAA;AAC/B,QAAA,MAAM,KAAK,6FAAc,CAAA;AAEzB,OAAO,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,WAAW,EAEX,KAAK,EACL,KAAK,EACL,KAAK,GACN,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAyB,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGvF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AAwBpD,OAAO,EAKL,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAEjB,MAAM,SAAS,CAAA;AAMhB,aAAK,uBAAuB,GAAG,iBAAiB,CAAA;AAiEhD,aAAK,qBAAqB,GAAG,iBAAiB,CAAA;AAgE9C,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAW5C,QAAA,MAAM,WAAW,6FAehB,CAAA;AAUD,aAAK,wBAAwB,GAAG,WAAW,GAAG,IAAI,CAAA;AAClD,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AAQvD,QAAA,MAAM,iBAAiB,yGAqCtB,CAAA;AAsBD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC5C,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,6FA4EhB,CAAA;AAQD,aAAK,aAAa,GAAG,uBAAuB,GAAG,qBAAqB,CAAA;AAEpE,QAAA,MAAM,MAAM;;;;CAuHX,CAAA;AAuCD,QAAA,MAAM,KAAK,6FAAc,CAAA;AACzB,QAAA,MAAM,KAAK,yGAAoB,CAAA;AAC/B,QAAA,MAAM,KAAK,6FAAc,CAAA;AAEzB,OAAO,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,WAAW,EAEX,KAAK,EACL,KAAK,EACL,KAAK,GACN,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAA"}

package/types/SliderImpl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderImpl.d.ts","sourceRoot":"","sources":["../src/SliderImpl.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAe,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;EAO5B,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBtB,CAAA;AAEF,eAAO,MAAM,UAAU,2FA6DtB,CAAA"}
+{"version":3,"file":"SliderImpl.d.ts","sourceRoot":"","sources":["../src/SliderImpl.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAe,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;EAO5B,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBtB,CAAA;AAEF,eAAO,MAAM,UAAU,2FA8DtB,CAAA"}

package/types/constants.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { SizeTokens } from '@tamagui/core';
+import { Direction, SliderContextValue } from './types';
+export declare const SLIDER_NAME = "Slider";
+export declare const createSliderContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [{
+    (props: ContextValueType & {
+        scope: import("@tamagui/create-context").Scope<ContextValueType>;
+        children: import("react").ReactNode;
+    }): JSX.Element;
+    displayName: string;
+}, (consumerName: string, scope: import("@tamagui/create-context").Scope<ContextValueType | undefined>) => ContextValueType], createSliderScope: import("@tamagui/create-context").CreateScope;
+export declare const SliderProvider: {
+    (props: SliderContextValue & {
+        scope: import("@tamagui/create-context").Scope<SliderContextValue>;
+        children: import("react").ReactNode;
+    }): JSX.Element;
+    displayName: string;
+}, useSliderContext: (consumerName: string, scope: import("@tamagui/create-context").Scope<SliderContextValue | undefined>) => SliderContextValue;
+export declare const SliderOrientationProvider: {
+    (props: {
+        startEdge: 'bottom' | 'left' | 'right';
+        endEdge: 'top' | 'right' | 'left';
+        sizeProp: 'width' | 'height';
+        size: number | SizeTokens;
+        direction: number;
+    } & {
+        scope: import("@tamagui/create-context").Scope<{
+            startEdge: 'bottom' | 'left' | 'right';
+            endEdge: 'top' | 'right' | 'left';
+            sizeProp: 'width' | 'height';
+            size: number | SizeTokens;
+            direction: number;
+        }>;
+        children: import("react").ReactNode;
+    }): JSX.Element;
+    displayName: string;
+}, useSliderOrientationContext: (consumerName: string, scope: import("@tamagui/create-context").Scope<{
+    startEdge: 'bottom' | 'left' | 'right';
+    endEdge: 'top' | 'right' | 'left';
+    sizeProp: 'width' | 'height';
+    size: number | SizeTokens;
+    direction: number;
+} | undefined>) => {
+    startEdge: 'bottom' | 'left' | 'right';
+    endEdge: 'top' | 'right' | 'left';
+    sizeProp: 'width' | 'height';
+    size: number | SizeTokens;
+    direction: number;
+};
+export declare const PAGE_KEYS: string[];
+export declare const ARROW_KEYS: string[];
+export declare const BACK_KEYS: Record<Direction, string[]>;
+//# sourceMappingURL=constants.d.ts.map

package/types/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvD,eAAO,MAAM,WAAW,WAAW,CAAA;AAEnC,eAAO,MAAO,mBAAmB;;;;;;8HAAE,iBAAiB,+CAAmC,CAAA;AAEvF,eAAO,MAAO,cAAc;;;;;;GAAE,gBAAgB,8HACQ,CAAA;AAEtD,eAAO,MAAO,yBAAyB;;mBAC1B,QAAQ,GAAG,MAAM,GAAG,OAAO;iBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;kBACvB,OAAO,GAAG,QAAQ;cACtB,MAAM,GAAG,UAAU;mBACd,MAAM;;;uBAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;qBAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;sBACvB,OAAO,GAAG,QAAQ;kBACtB,MAAM,GAAG,UAAU;uBACd,MAAM;;;;;GALsB,2BAA2B;eACvD,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;;eAJN,QAAQ,GAAG,MAAM,GAAG,OAAO;aAC7B,KAAK,GAAG,OAAO,GAAG,MAAM;cACvB,OAAO,GAAG,QAAQ;UACtB,MAAM,GAAG,UAAU;eACd,MAAM;CAOjB,CAAA;AAEF,eAAO,MAAM,SAAS,UAAyB,CAAA;AAC/C,eAAO,MAAM,UAAU,UAAsD,CAAA;AAC7E,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,CAGjD,CAAA"}