react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/swiper/SwiperItem.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SwiperItem = /*#__PURE__*/(0, _react().forwardRef)((props, ref) => {
+  const {
+    style,
+    children,
+    testID
+  } = props;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    ref: ref,
+    style: [styles.item, style],
+    testID: testID
+  }, children);
+});
+SwiperItem.displayName = 'SwiperItem';
+const styles = _reactNative().StyleSheet.create({
+  item: {
+    flex: 1
+  }
+});
+var _default = exports.default = SwiperItem;

package/dist/cjs/swiper/SwiperPagIndicator.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSwiperPagIndicatorTokens = exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const createSwiperPagIndicatorTokens = foundations => ({
+  colors: {
+    active: foundations.palette.primary.foreground ?? '#ffffff',
+    inactive: 'rgba(255,255,255,0.5)'
+  },
+  sizing: {
+    dotSizeActive: 8,
+    dotSizeInactive: 6
+  },
+  spacing: {
+    dotMargin: foundations.spacing.xs
+  },
+  offset: {
+    horizontalBottom: foundations.spacing.lg,
+    verticalRight: foundations.spacing.lg
+  },
+  layer: {
+    zIndex: 10,
+    elevation: 10
+  }
+});
+const useSwiperPagIndicatorTokens = exports.useSwiperPagIndicatorTokens = (0, _designSystem.createComponentTokensHook)('swiperPagIndicator', createSwiperPagIndicatorTokens);
+const SwiperPagIndicator = /*#__PURE__*/(0, _react().memo)(({
+  total,
+  current,
+  vertical = false,
+  style,
+  activeColor,
+  inactiveColor,
+  tokensOverride,
+  ...rest
+}) => {
+  const tokens = useSwiperPagIndicatorTokens(tokensOverride);
+  const dots = [];
+  const resolvedActiveColor = activeColor || tokens.colors.active;
+  const resolvedInactiveColor = inactiveColor || tokens.colors.inactive;
+  const dotMargin = tokens.spacing.dotMargin;
+  const containerPositionStyle = vertical ? [styles.containerVertical, {
+    right: tokens.offset.verticalRight
+  }] : [styles.containerHorizontal, {
+    bottom: tokens.offset.horizontalBottom
+  }];
+  for (let i = 0; i < total; i++) {
+    const isActive = current === i;
+    const size = isActive ? tokens.sizing.dotSizeActive : tokens.sizing.dotSizeInactive;
+    dots.push(/*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: i,
+      style: [{
+        marginHorizontal: dotMargin,
+        marginVertical: dotMargin,
+        backgroundColor: isActive ? resolvedActiveColor : resolvedInactiveColor,
+        width: size,
+        height: size,
+        borderRadius: size / 2
+      }]
+    }));
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: [styles.container, {
+      zIndex: tokens.layer.zIndex,
+      elevation: tokens.layer.elevation
+    }, containerPositionStyle, style]
+  }, rest), dots);
+});
+SwiperPagIndicator.displayName = 'SwiperPagIndicator';
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  containerHorizontal: {
+    position: 'absolute',
+    left: 0,
+    right: 0
+  },
+  containerVertical: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    flexDirection: 'column'
+  }
+});
+var _default = exports.default = SwiperPagIndicator;

package/dist/cjs/swiper/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Swiper", {
+  enumerable: true,
+  get: function () {
+    return _Swiper.default;
+  }
+});
+Object.defineProperty(exports, "SwiperItem", {
+  enumerable: true,
+  get: function () {
+    return _SwiperItem.default;
+  }
+});
+Object.defineProperty(exports, "SwiperPagIndicator", {
+  enumerable: true,
+  get: function () {
+    return _SwiperPagIndicator.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useSwiperPagIndicatorTokens", {
+  enumerable: true,
+  get: function () {
+    return _SwiperPagIndicator.useSwiperPagIndicatorTokens;
+  }
+});
+var _Swiper = _interopRequireDefault(require("./Swiper"));
+var _SwiperItem = _interopRequireDefault(require("./SwiperItem"));
+var _SwiperPagIndicator = _interopRequireWildcard(require("./SwiperPagIndicator"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SwiperWithItem = Object.assign(_Swiper.default, {
+  Item: _SwiperItem.default,
+  PagIndicator: _SwiperPagIndicator.default
+});
+var _default = exports.default = SwiperWithItem;

package/dist/cjs/swiper/useSwiperWeb.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSwiperWeb = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+const useSwiperWeb = ({
+  isWeb,
+  enabledState,
+  touchable,
+  vertical,
+  count,
+  shouldLoop,
+  displayCount,
+  slideSizeValue,
+  nonLoopMinOffset,
+  nonLoopMaxOffset,
+  durationMs,
+  preventScroll,
+  trackOffsetPx,
+  swipeToRef,
+  onDragStart,
+  onDragEnd
+}) => {
+  const canUseRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
+  const webOffsetRef = (0, _react().useRef)(0);
+  const startOffsetRef = (0, _react().useRef)(0);
+  const panLockRef = (0, _react().useRef)(false);
+  const webTranslateXAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const webTranslateYAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const currentState = {
+    enabledState,
+    touchable,
+    vertical,
+    count,
+    shouldLoop,
+    displayCount,
+    slideSizeValue,
+    nonLoopMinOffset,
+    nonLoopMaxOffset,
+    maxOffsetLoop: Math.max(0, displayCount - 1) * slideSizeValue,
+    duration: durationMs,
+    preventScroll,
+    onDragStart,
+    onDragEnd
+  };
+  const panLatestRef = (0, _react().useRef)(currentState);
+  panLatestRef.current = currentState;
+  const webRafIdRef = (0, _react().useRef)(null);
+  const webPendingOffsetRef = (0, _react().useRef)(null);
+  const flushWebTranslate = (0, _react().useCallback)(() => {
+    const pending = webPendingOffsetRef.current;
+    if (pending == null) return;
+    webPendingOffsetRef.current = null;
+    const latest = panLatestRef.current;
+    (latest.vertical ? webTranslateYAnim : webTranslateXAnim).setValue(pending);
+  }, []);
+  const scheduleWebTranslate = (0, _react().useCallback)(next => {
+    webPendingOffsetRef.current = next;
+    if (webRafIdRef.current != null) return;
+    if (canUseRaf) {
+      webRafIdRef.current = requestAnimationFrame(() => {
+        webRafIdRef.current = null;
+        flushWebTranslate();
+      });
+      return;
+    }
+    webRafIdRef.current = setTimeout(() => {
+      webRafIdRef.current = null;
+      flushWebTranslate();
+    }, 16);
+  }, [canUseRaf, flushWebTranslate]);
+  const cancelWebRaf = (0, _react().useCallback)(() => {
+    if (webRafIdRef.current != null) {
+      if (canUseRaf) {
+        cancelAnimationFrame(webRafIdRef.current);
+      } else {
+        clearTimeout(webRafIdRef.current);
+      }
+      webRafIdRef.current = null;
+    }
+    webPendingOffsetRef.current = null;
+  }, [canUseRaf]);
+  const webSnapAnimRef = (0, _react().useRef)(null);
+  const stopWebSnapAnim = (0, _react().useCallback)(() => {
+    const anim = webSnapAnimRef.current;
+    if (anim) {
+      anim.stop();
+      webSnapAnimRef.current = null;
+    }
+    const latest = panLatestRef.current;
+    const activeAnim = latest.vertical ? webTranslateYAnim : webTranslateXAnim;
+    let nextOffset = webOffsetRef.current;
+    activeAnim.stopAnimation(value => {
+      if (typeof value === 'number') {
+        nextOffset = value;
+      }
+    });
+    (latest.vertical ? webTranslateXAnim : webTranslateYAnim).stopAnimation();
+    webOffsetRef.current = nextOffset;
+  }, []);
+  const webTrackTransform = (0, _react().useMemo)(() => {
+    if (vertical) return trackOffsetPx ? [{
+      translateY: trackOffsetPx
+    }, {
+      translateY: webTranslateYAnim
+    }] : [{
+      translateY: webTranslateYAnim
+    }];
+    return trackOffsetPx ? [{
+      translateX: trackOffsetPx
+    }, {
+      translateX: webTranslateXAnim
+    }] : [{
+      translateX: webTranslateXAnim
+    }];
+  }, [trackOffsetPx, vertical, webTranslateXAnim, webTranslateYAnim]);
+  const panResponder = (0, _react().useMemo)(() => {
+    if (!isWeb) return null;
+    return _reactNative().PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        const latest = panLatestRef.current;
+        if (!latest.enabledState || !latest.touchable || latest.count <= 1) return false;
+        if (latest.vertical) {
+          return Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
+        }
+        return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+      },
+      onPanResponderGrant: () => {
+        const latest = panLatestRef.current;
+        if (!latest.enabledState || !latest.touchable || latest.count <= 1) return;
+        panLockRef.current = true;
+        cancelWebRaf();
+        stopWebSnapAnim();
+        startOffsetRef.current = webOffsetRef.current;
+        latest.onDragStart?.();
+      },
+      onPanResponderMove: (event, gestureState) => {
+        if (!panLockRef.current) return;
+        const latest = panLatestRef.current;
+        if (latest.preventScroll) {
+          (0, _utils2.stopWebEvent)(event);
+        }
+        const delta = latest.vertical ? gestureState.dy : gestureState.dx;
+        const nextRaw = startOffsetRef.current + delta;
+        const next = latest.shouldLoop ? (0, _utils.clamp)(nextRaw, -latest.maxOffsetLoop, 0) : (0, _utils.clamp)(nextRaw, -latest.nonLoopMaxOffset, -latest.nonLoopMinOffset);
+        webOffsetRef.current = next;
+        scheduleWebTranslate(next);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const latest = panLatestRef.current;
+        panLockRef.current = false;
+        cancelWebRaf();
+        flushWebTranslate();
+        const distance = latest.vertical ? gestureState.dy : gestureState.dx;
+        const velocity = latest.vertical ? gestureState.vy : gestureState.vx;
+        const dir = velocity !== 0 ? velocity > 0 ? 1 : -1 : distance !== 0 ? distance > 0 ? 1 : -1 : 0;
+        const velocityOffset = Math.min(Math.abs(velocity) * 2000, latest.slideSizeValue) * dir;
+        let targetOffset = startOffsetRef.current + distance + velocityOffset;
+        targetOffset = latest.shouldLoop ? (0, _utils.clamp)(targetOffset, -latest.maxOffsetLoop, 0) : (0, _utils.clamp)(targetOffset, -latest.nonLoopMaxOffset, -latest.nonLoopMinOffset);
+        const targetIndex = Math.round(-targetOffset / latest.slideSizeValue);
+        const displayIndex = latest.shouldLoop ? (0, _utils.clamp)(targetIndex, 0, latest.displayCount - 1) : (0, _utils.clamp)(targetIndex, 0, latest.count - 1);
+        const realIndex = latest.shouldLoop ? displayIndex === 0 ? latest.count - 1 : displayIndex === latest.displayCount - 1 ? 0 : displayIndex - 1 : displayIndex;
+        swipeToRef.current(realIndex, true);
+        latest.onDragEnd?.();
+      },
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderTerminate: () => {
+        panLockRef.current = false;
+        cancelWebRaf();
+        stopWebSnapAnim();
+        panLatestRef.current.onDragEnd?.();
+      }
+    });
+  }, [isWeb, cancelWebRaf, stopWebSnapAnim, scheduleWebTranslate, flushWebTranslate, swipeToRef]);
+  (0, _react().useEffect)(() => {
+    return () => {
+      cancelWebRaf();
+      stopWebSnapAnim();
+    };
+  }, [cancelWebRaf, stopWebSnapAnim]);
+  return {
+    webOffsetRef,
+    webTranslateXAnim,
+    webTranslateYAnim,
+    webTrackTransform,
+    panResponder,
+    stopWebSnapAnim,
+    cancelWebRaf,
+    flushWebTranslate,
+    scheduleWebTranslate,
+    webSnapAnimRef
+  };
+};
+exports.useSwiperWeb = useSwiperWeb;

package/dist/cjs/swiper/utils.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stopWebEvent = exports.runAfterFrames = exports.getTrackOffsetPct = exports.getSlideSizePct = exports.getInitialSwipeValue = exports.getDurationMs = exports.FALLBACK_WIDTH = exports.FALLBACK_HEIGHT = void 0;
+var _utils = require("../../utils");
+const FALLBACK_WIDTH = exports.FALLBACK_WIDTH = 375;
+const FALLBACK_HEIGHT = exports.FALLBACK_HEIGHT = 667;
+const runAfterFrames = (frames, fn) => {
+  const raf = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : cb => {
+    setTimeout(() => cb(Date.now()), 16);
+    return 0;
+  };
+  let left = Math.max(1, frames);
+  const step = () => {
+    left -= 1;
+    if (left <= 0) {
+      fn();
+      return;
+    }
+    raf(step);
+  };
+  raf(step);
+};
+exports.runAfterFrames = runAfterFrames;
+const stopWebEvent = event => {
+  event.preventDefault?.();
+  event.stopPropagation?.();
+  event.nativeEvent?.preventDefault?.();
+  event.nativeEvent?.stopPropagation?.();
+};
+exports.stopWebEvent = stopWebEvent;
+const getInitialSwipeValue = initialSwipe => {
+  return (0, _utils.isFiniteNumber)(initialSwipe) ? initialSwipe : 0;
+};
+exports.getInitialSwipeValue = getInitialSwipeValue;
+const getDurationMs = duration => {
+  return (0, _utils.isFiniteNumber)(duration) ? Math.max(0, duration) : 0;
+};
+exports.getDurationMs = getDurationMs;
+const getSlideSizePct = slideSize => {
+  return (0, _utils.isFiniteNumber)(slideSize) ? (0, _utils.clamp)(slideSize, 1, 100) : 100;
+};
+exports.getSlideSizePct = getSlideSizePct;
+const getTrackOffsetPct = trackOffset => {
+  return (0, _utils.isFiniteNumber)(trackOffset) ? (0, _utils.clamp)(trackOffset, 0, 100) : 0;
+};
+exports.getTrackOffsetPct = getTrackOffsetPct;

package/dist/cjs/switch/Switch.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Switch = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../../platform");
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+var _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const AnimatedHandle = _reactNative().Animated.createAnimatedComponent(_reactNative().View);
+const switchEasing = _reactNative().Easing.bezier(0.25, 0.1, 0.25, 1);
+const SwitchImpl = props => {
+  const {
+    disabled: disabledProp,
+    loading: loadingProp,
+    size,
+    activeColor,
+    inactiveColor,
+    activeValue: activeValueProp,
+    inactiveValue: inactiveValueProp,
+    tokensOverride,
+    onClick,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSwitchTokens)(tokensOverride);
+  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const loading = loadingProp ?? tokens.defaults.loading;
+  const activeValue = activeValueProp ?? tokens.defaults.activeValue;
+  const inactiveValue = inactiveValueProp ?? tokens.defaults.inactiveValue;
+  const resolvedSize = Math.max(0, (0, _utils.parseNumber)(size, tokens.defaults.size));
+  const borderWidth = tokens.borders.width;
+  const inset = Math.max(0, tokens.spacing.inset);
+  const trackHeight = resolvedSize;
+  const trackWidth = trackHeight * 2;
+  const trackRadius = trackHeight / 2;
+  const innerHeight = Math.max(0, trackHeight - borderWidth * 2);
+  const innerWidth = Math.max(0, trackWidth - borderWidth * 2);
+  const handleSize = Math.max(0, innerHeight - inset * 2);
+  const handleRadius = handleSize / 2;
+  const translateDistance = Math.max(0, innerWidth - handleSize - inset * 2);
+  const [value, triggerChange] = (0, _hooks.useControllableValue)(props, {
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked',
+    defaultValue: inactiveValue,
+    trigger: 'onChange'
+  });
+  const isChecked = Object.is(value, activeValue);
+  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(isChecked ? 1 : 0)).current;
+  const colorProgress = (0, _react().useRef)(new (_reactNative().Animated.Value)(isChecked ? 1 : 0)).current;
+  (0, _react().useEffect)(() => {
+    const toValue = isChecked ? 1 : 0;
+    progress.stopAnimation();
+    colorProgress.stopAnimation();
+    const animation = _reactNative().Animated.parallel([_reactNative().Animated.timing(progress, {
+      toValue,
+      duration: tokens.animation.duration,
+      easing: switchEasing,
+      useNativeDriver: _platform.nativeDriverEnabled
+    }), _reactNative().Animated.timing(colorProgress, {
+      toValue,
+      duration: tokens.animation.duration,
+      easing: switchEasing,
+      useNativeDriver: false
+    })]);
+    animation.start();
+    return () => animation.stop();
+  }, [colorProgress, isChecked, progress, tokens.animation.duration]);
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, translateDistance]
+  });
+  const resolvedActiveColor = activeColor ?? tokens.colors.activeTrack;
+  const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactiveTrack;
+  const trackColor = isChecked ? resolvedActiveColor : resolvedInactiveColor;
+  const animatedTrackColor = colorProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [resolvedInactiveColor, resolvedActiveColor]
+  });
+  const handlePress = event => {
+    if (disabled) return;
+    onClick?.(event);
+    if (loading) return;
+    const next = isChecked ? inactiveValue : activeValue;
+    if (Object.is(next, value)) return;
+    triggerChange(next);
+  };
+  const {
+    interactionProps
+  } = (0, _hooks.useAriaPress)({
+    disabled,
+    onPress: handlePress,
+    extraProps: rest
+  });
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, interactionProps, {
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    disabled: disabled,
+    style: ({
+      pressed
+    }) => [tokens.layout.container, {
+      opacity: disabled ? tokens.opacity.disabled : pressed ? tokens.opacity.pressed : 1
+    }, style]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [tokens.layout.track, {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: trackRadius,
+      backgroundColor: animatedTrackColor,
+      borderWidth,
+      borderColor: tokens.colors.border
+    }, {
+      pointerEvents: 'none'
+    }]
+  }, /*#__PURE__*/_react().default.createElement(AnimatedHandle, {
+    style: [tokens.layout.handleOuter, tokens.layout.handleInner, {
+      width: handleSize,
+      height: handleSize,
+      borderRadius: handleRadius,
+      top: inset,
+      left: inset,
+      transform: [{
+        translateX
+      }],
+      backgroundColor: tokens.colors.handle,
+      borderWidth,
+      borderColor: tokens.colors.border
+    }]
+  }, loading && /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
+    size: tokens.loader.size,
+    color: trackColor
+  }))));
+};
+const Switch = exports.Switch = /*#__PURE__*/_react().default.memo(SwitchImpl);
+Switch.displayName = 'Switch';
+var _default = exports.default = Switch;

package/dist/cjs/switch/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+exports.default = void 0;
+var _Switch = _interopRequireDefault(require("./Switch"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Switch.default;