react-native-system-ui 0.0.1 → 0.0.3

package/dist/cjs/components/tabs/tokens.js

@@ -9,7 +9,8 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    fontSize
+    fontSize,
+    radii
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -75,7 +76,7 @@ const createTokens = foundations => {
       offset: spacing.md
     },
     card: {
-      radius: 18,
+      radius: radii.xs,
       paddingHorizontal: spacing.sm,
       paddingVertical: spacing.xs,
       height: 30,
@@ -84,7 +85,7 @@ const createTokens = foundations => {
     capsule: {
       radius: 999,
       paddingHorizontal: spacing.sm,
-      paddingVertical: spacing.xs
+      paddingVertical: spacing.ssm
     },
     jumbo: {
       radius: 16,

package/dist/cjs/components/tabs/useTabsAnimation.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabsAnimation = 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;
+}
+const useTabsAnimation = ({
+  type,
+  animated,
+  scrollable,
+  align,
+  panes,
+  nameIndexMap,
+  resolvedLineWidth,
+  resolvedDuration,
+  currentName,
+  layoutMap,
+  navContainerWidthRef
+}) => {
+  const indicatorX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indicatorWidth = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indicatorInitializedRef = (0, _react().useRef)(false);
+  const animateIndicator = (0, _react().useCallback)((name, immediate) => {
+    if (name == null || type !== 'line') return false;
+    const shouldUseEqualWidth = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
+    const index = nameIndexMap.get(name) ?? -1;
+    const equalTabWidth = shouldUseEqualWidth ? navContainerWidthRef.current / panes.length : 0;
+    const layout = shouldUseEqualWidth ? {
+      x: Math.max(index, 0) * equalTabWidth,
+      width: equalTabWidth
+    } : layoutMap.current.get(name);
+    if (!layout || index < 0) {
+      return false;
+    }
+    const timing = (value, toValue) => _reactNative().Animated.timing(value, {
+      toValue,
+      duration: immediate || !animated ? 0 : resolvedDuration,
+      useNativeDriver: false
+    });
+    const targetWidth = resolvedLineWidth ?? layout.width;
+    const targetX = resolvedLineWidth ? layout.x + (layout.width - targetWidth) / 2 : layout.x;
+    _reactNative().Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]).start();
+    return true;
+  }, [align, animated, indicatorWidth, indicatorX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
+  (0, _react().useEffect)(() => {
+    if (currentName == null) return;
+    const shouldAnimate = indicatorInitializedRef.current;
+    const didAnimate = animateIndicator(currentName, !shouldAnimate);
+    if (didAnimate && !indicatorInitializedRef.current) {
+      indicatorInitializedRef.current = true;
+    }
+  }, [animateIndicator, currentName]);
+  return {
+    indicatorX,
+    indicatorWidth,
+    indicatorInitializedRef,
+    animateIndicator
+  };
+};
+exports.useTabsAnimation = useTabsAnimation;

package/dist/cjs/components/tabs/useTabsScroll.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabsScroll = 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");
+const useTabsScroll = ({
+  scrollable,
+  animated,
+  currentName,
+  resolvedDuration,
+  layoutMap,
+  navContainerWidthRef,
+  navContentWidthRef
+}) => {
+  const navScrollRef = (0, _react().useRef)(null);
+  const navScrollX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const navScrollAnimRef = (0, _react().useRef)(null);
+  const navAutoScrollingRef = (0, _react().useRef)(false);
+  const navLastScrollXRef = (0, _react().useRef)(0);
+  const navAutoScrollFrameRef = (0, _react().useRef)(null);
+  const scrollIntoView = (0, _react().useCallback)(immediate => {
+    if (!scrollable || currentName == null) return;
+    const layout = layoutMap.current.get(currentName);
+    const containerWidth = navContainerWidthRef.current;
+    if (!layout || !containerWidth) return;
+    const contentWidth = navContentWidthRef.current;
+    const targetX = layout.x - (containerWidth - layout.width) / 2;
+    const maxScroll = Math.max(contentWidth - containerWidth, 0);
+    const clampedX = Math.max(0, Math.min(targetX, maxScroll));
+    if (maxScroll <= 0) {
+      return;
+    }
+    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) {
+      return;
+    }
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    (0, _utils.cancelFrame)(navAutoScrollFrameRef.current);
+    navAutoScrollFrameRef.current = null;
+    if (immediate || !animated) {
+      navAutoScrollingRef.current = true;
+      navScrollX.setValue(clampedX);
+      navAutoScrollFrameRef.current = (0, _utils.requestFrame)(() => {
+        navAutoScrollFrameRef.current = null;
+        navAutoScrollingRef.current = false;
+      });
+      return;
+    }
+    navScrollX.setValue(navLastScrollXRef.current);
+    navAutoScrollingRef.current = true;
+    navScrollAnimRef.current = _reactNative().Animated.timing(navScrollX, {
+      toValue: clampedX,
+      duration: resolvedDuration,
+      useNativeDriver: false
+    });
+    navScrollAnimRef.current.start(({
+      finished
+    }) => {
+      navScrollAnimRef.current = null;
+      navAutoScrollingRef.current = false;
+      if (!finished) {
+        return;
+      }
+      navLastScrollXRef.current = clampedX;
+    });
+  }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
+  (0, _react().useEffect)(() => {
+    if (!scrollable) return;
+    const listenerId = navScrollX.addListener(({
+      value
+    }) => {
+      navLastScrollXRef.current = value;
+      navScrollRef.current?.scrollTo({
+        x: value,
+        y: 0,
+        animated: false
+      });
+    });
+    return () => {
+      navScrollX.removeListener(listenerId);
+    };
+  }, [navScrollX, scrollable]);
+  (0, _react().useEffect)(() => {
+    return () => {
+      (0, _utils.cancelFrame)(navAutoScrollFrameRef.current);
+      navAutoScrollFrameRef.current = null;
+    };
+  }, []);
+  const handleNavScrollBeginDrag = (0, _react().useCallback)(event => {
+    navAutoScrollingRef.current = false;
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  const handleNavScroll = (0, _react().useCallback)(event => {
+    if (navAutoScrollingRef.current) {
+      return;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  return {
+    navScrollRef,
+    navScrollX,
+    scrollIntoView,
+    handleNavScrollBeginDrag,
+    handleNavScroll
+  };
+};
+exports.useTabsScroll = useTabsScroll;

package/dist/cjs/components/tabs/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.requestFrame = exports.isTabPaneElement = exports.cancelFrame = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _TabPane = _interopRequireDefault(require("./TabPane"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const canUseRaf = typeof requestAnimationFrame !== 'undefined' && (0, _utils.isFunction)(requestAnimationFrame) && typeof cancelAnimationFrame !== 'undefined' && (0, _utils.isFunction)(cancelAnimationFrame);
+const requestFrame = exports.requestFrame = canUseRaf ? cb => requestAnimationFrame(cb) : cb => setTimeout(cb, 16);
+const cancelFrame = id => {
+  if (id == null) return;
+  if (canUseRaf) {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+};
+exports.cancelFrame = cancelFrame;
+const isTabPaneElement = child => {
+  if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
+  if (child.type === _TabPane.default) return true;
+  const type = child.type;
+  return type.displayName === 'Tabs.TabPane';
+};
+exports.isTabPaneElement = isTabPaneElement;

package/dist/cjs/components/tag/Tag.js

@@ -25,7 +25,7 @@ function _reactNativeSystemIcon() {
   };
   return data;
 }
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -79,7 +79,7 @@ const Tag = props => {
     borderTopRightRadius: tokens.radii.round,
     borderBottomRightRadius: tokens.radii.round
   } : null, style];
-  const label = children == null || children === false ? null : (0, _validate.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  const label = children == null || children === false ? null : (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [{
       color: resolvedTextColor,
       fontSize: sizeTokens.fontSize,
@@ -98,7 +98,7 @@ const Tag = props => {
       event.stopPropagation?.();
       onClose?.();
     }
-  }, (0, _validate.isFunction)(closeIcon) ? closeIcon(resolvedTextColor, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
+  }, (0, _utils.isFunction)(closeIcon) ? closeIcon(resolvedTextColor, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
     color: resolvedTextColor,
     size: tokens.sizing.closeIconSize
   }));
@@ -109,9 +109,9 @@ const Tag = props => {
       onPress: onPress,
       style: ({
         pressed
-      }) => [containerStyle, pressed ? {
+      }) => [containerStyle, pressed && {
         opacity: tokens.defaults.pressedOpacity
-      } : null]
+      }]
     }, rest), content);
   }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({

package/dist/cjs/components/tag/tokens.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTagTokens = exports.createTagTokens = void 0;
 var _designSystem = require("../../design-system");
-var _hairline = require("../../utils/hairline");
+var _utils = require("../../utils");
 const buildTone = (palette, key, fallbackText) => ({
   background: palette[key][500],
   text: fallbackText ?? palette[key].foreground ?? '#ffffff'
@@ -92,7 +92,7 @@ const createTagTokens = foundations => {
       markLeading: radii.none
     },
     borders: {
-      width: (0, _hairline.getHairlineWidth)()
+      width: (0, _utils.getHairlineWidth)()
     },
     spacing: {
       closeGap: 2,

package/dist/cjs/components/toast/Toast.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Toast = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -19,6 +19,7 @@ function _reactNative() {
   return data;
 }
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _safeAreaView = require("../safe-area-view");
 var _hooks = require("../../hooks");
 var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
 var _loading = _interopRequireDefault(require("../loading"));
@@ -33,6 +34,7 @@ var _overlay = require("../overlay");
 var _validate = require("../../utils/validate");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 Toast = props => {
   const {
@@ -50,6 +52,8 @@ const Toast = props => {
     closeOnClickOverlay = false,
     closeOnClick = false,
     loadingIndicator,
+    safeAreaInsetTop: safeAreaInsetTopProp,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
     tokensOverride,
     style,
     textStyle,
@@ -78,9 +82,11 @@ const Toast = props => {
     visible: mounted,
     type: 'toast'
   });
-  const prevVisibleRef = _react().default.useRef(visible);
-  const closingRef = _react().default.useRef(false);
+  const prevVisibleRef = (0, _react().useRef)(visible);
+  const closingRef = (0, _react().useRef)(false);
   const positionOffset = windowHeight > 0 ? Math.round(windowHeight * 0.2) : 60;
+  const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
+  const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
   const positionStyle = position === 'top' ? {
     justifyContent: 'flex-start',
     paddingTop: positionOffset
@@ -90,7 +96,7 @@ const Toast = props => {
   } : {
     justifyContent: 'center'
   };
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     let timer = null;
     if (visible) {
       if (durationMs > 0) {
@@ -103,7 +109,7 @@ const Toast = props => {
       if (timer) clearTimeout(timer);
     };
   }, [durationMs, onClose, visible]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     let openedTimer = null;
     if (visible) {
       closingRef.current = false;
@@ -121,7 +127,7 @@ const Toast = props => {
       if (openedTimer) clearTimeout(openedTimer);
     };
   }, [onOpen, onOpened, tokens.animationDuration, visible]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
       onClosed?.();
@@ -189,18 +195,21 @@ const Toast = props => {
   return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.backdrop, positionStyle, stackZIndex ? {
       zIndex: stackZIndex
-    } : null],
+    } : undefined],
     pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
   }, overlay || forbidClick ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     testID: "rv-toast-overlay",
-    style: [styles.overlay, overlay ? {
+    style: [styles.overlay, overlay && {
       backgroundColor: colors.backdrop
-    } : null, overlayStyle],
+    }, overlayStyle],
     pointerEvents: "auto",
     onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
     onStartShouldSetResponder: () => true,
     onMoveShouldSetResponder: () => true
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+  }) : null, needsSafeAreaTop && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "top",
+    pointerEvents: "none"
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     disabled: !closeOnClick
   }, toastPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
     style: [styles.toast, toastStyle, style]
@@ -218,7 +227,10 @@ const Toast = props => {
     style: {
       alignItems: 'center'
     }
-  }, message) : null))));
+  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "bottom",
+    pointerEvents: "none"
+  })));
 };
 exports.Toast = Toast;
 const styles = _reactNative().StyleSheet.create({

package/dist/cjs/components/toast/imperative.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastImperative = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
   return data;
 }
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _Toast = _interopRequireDefault(require("./Toast"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 activeKeys = new Set();
 const toastOptions = new Map();
@@ -31,7 +32,7 @@ let currentOptions = {
 };
 const typeDefaults = new Map();
 const parseOptions = input => {
-  if (/*#__PURE__*/_react().default.isValidElement(input) || (0, _validate.isText)(input)) {
+  if (/*#__PURE__*/_react().default.isValidElement(input) || (0, _utils.isText)(input)) {
     return {
       message: input
     };
@@ -72,8 +73,8 @@ const ToastPortal = ({
   id,
   options
 }) => {
-  const [visible, setVisible] = _react().default.useState(true);
-  _react().default.useEffect(() => {
+  const [visible, setVisible] = (0, _react().useState)(true);
+  (0, _react().useEffect)(() => {
     toastControllers.set(id, {
       close: () => setVisible(false)
     });
@@ -81,11 +82,11 @@ const ToastPortal = ({
       toastControllers.delete(id);
     };
   }, [id]);
-  const handleClose = _react().default.useCallback(() => {
+  const handleClose = (0, _react().useCallback)(() => {
     options.onClose?.();
     setVisible(false);
   }, [options]);
-  const handleClosed = _react().default.useCallback(() => {
+  const handleClosed = (0, _react().useCallback)(() => {
     options.onClosed?.();
     removeToast(id);
   }, [id, options]);
@@ -110,7 +111,7 @@ const showToast = (input, fallbackType = 'info') => {
   const config = next => {
     const prev = toastOptions.get(key);
     if (!prev) return;
-    const nextInput = (0, _validate.isFunction)(next) ? next(prev) : next;
+    const nextInput = (0, _utils.isFunction)(next) ? next(prev) : next;
     const parsed = parseOptions(nextInput);
     const nextType = parsed.type ?? prev.type ?? fallbackType;
     const merged = {
@@ -146,7 +147,7 @@ const ToastImperative = exports.ToastImperative = {
     allowMultiple = value;
   },
   setDefaultOptions: (typeOrOptions, options) => {
-    if ((0, _validate.isString)(typeOrOptions)) {
+    if ((0, _utils.isString)(typeOrOptions)) {
       typeDefaults.set(typeOrOptions, options ?? {});
     } else {
       currentOptions = {

package/dist/cjs/components/types.js

@@ -0,0 +1 @@
+"use strict";