react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/design-system/tokens.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTokens = exports.defaultFoundations = exports.createTokens = exports.buildFoundations = void 0;
+var _deepMerge = require("../utils/deepMerge");
+const defaultFoundations = exports.defaultFoundations = {
+  palette: {
+    default: {
+      50: '#f7f8fa',
+      100: '#f1f2f5',
+      200: '#ebedf0',
+      300: '#c8ccd6',
+      400: '#a8aebb',
+      500: '#888f9f',
+      600: '#6d7483',
+      700: '#505560',
+      800: '#353840',
+      900: '#191a1f',
+      foreground: '#222222'
+    },
+    primary: {
+      50: '#f5f8ff',
+      100: '#e1e9ff',
+      200: '#c2d4ff',
+      300: '#9bb8ff',
+      400: '#6d94ff',
+      500: '#4770ff',
+      600: '#2f51e0',
+      700: '#243eb1',
+      800: '#1a2d82',
+      900: '#111d55',
+      foreground: '#ffffff'
+    },
+    info: {
+      50: '#f0f8ff',
+      100: '#d9ecff',
+      200: '#b9dcff',
+      300: '#8bc3ff',
+      400: '#5aa7ff',
+      500: '#328dff',
+      600: '#1d6fde',
+      700: '#1753a9',
+      800: '#113a75',
+      900: '#0a2143',
+      foreground: '#ffffff'
+    },
+    success: {
+      50: '#f2fbf6',
+      100: '#dcf5e7',
+      200: '#b8e9cf',
+      300: '#8ddbb1',
+      400: '#5fcf93',
+      500: '#31c174',
+      600: '#1da45e',
+      700: '#128047',
+      800: '#0a5c32',
+      900: '#043719',
+      foreground: '#ffffff'
+    },
+    warning: {
+      50: '#fff8ec',
+      100: '#ffecc7',
+      200: '#ffd595',
+      300: '#ffbc63',
+      400: '#ffa035',
+      500: '#ff8414',
+      600: '#d9650b',
+      700: '#ad4905',
+      800: '#7f3101',
+      900: '#4d1c00',
+      foreground: '#ffffff'
+    },
+    danger: {
+      50: '#fff1f2',
+      100: '#ffd8dd',
+      200: '#ffadb7',
+      300: '#ff8090',
+      400: '#ff556c',
+      500: '#f2324c',
+      600: '#ce1733',
+      700: '#a30f27',
+      800: '#770819',
+      900: '#47040b',
+      foreground: '#ffffff'
+    }
+  },
+  spacing: {
+    none: 0,
+    xxs: 2,
+    xs: 4,
+    ssm: 6,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    xxl: 28
+  },
+  radii: {
+    none: 0,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    pill: 999,
+    full: 9999
+  },
+  fontSize: {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20
+  },
+  typography: {
+    fontFamily: 'System',
+    weight: {
+      regular: '400',
+      medium: '500',
+      semiBold: '600',
+      bold: '700'
+    },
+    lineHeightMultiplier: 1.2
+  },
+  opacity: {
+    disabled: 0.45,
+    loading: 0.65,
+    pressed: 0.85
+  }
+};
+const buildFoundations = overrides => {
+  if (!overrides) {
+    return defaultFoundations;
+  }
+  return (0, _deepMerge.deepMerge)(defaultFoundations, overrides);
+};
+exports.buildFoundations = buildFoundations;
+const createTokens = overrides => {
+  return buildFoundations(overrides);
+};
+exports.createTokens = createTokens;
+const defaultTokens = exports.defaultTokens = defaultFoundations;

package/dist/cjs/design-system/useTheme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _ThemeContext = require("./ThemeContext");
+const useTheme = () => (0, _react().useContext)(_ThemeContext.ThemeContext);
+exports.useTheme = useTheme;

package/dist/cjs/hooks/aria/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useAriaPress = require("./useAriaPress");
+Object.keys(_useAriaPress).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAriaPress[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAriaPress[key];
+    }
+  });
+});
+var _useAriaToggle = require("./useAriaToggle");
+Object.keys(_useAriaToggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAriaToggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAriaToggle[key];
+    }
+  });
+});
+var _useAriaListBox = require("./useAriaListBox");
+Object.keys(_useAriaListBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAriaListBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAriaListBox[key];
+    }
+  });
+});
+var _useAriaOverlay = require("./useAriaOverlay");
+Object.keys(_useAriaOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAriaOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAriaOverlay[key];
+    }
+  });
+});

package/dist/cjs/hooks/aria/useAriaListBox.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAriaListBox = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _listbox() {
+  const data = require("@react-native-aria/listbox");
+  _listbox = function () {
+    return data;
+  };
+  return data;
+}
+function _list() {
+  const data = require("@react-stately/list");
+  _list = function () {
+    return data;
+  };
+  return data;
+}
+const useAriaListBox = props => {
+  const ref = (0, _react().useRef)(null);
+  const {
+    label,
+    ...rest
+  } = props;
+  const resolvedProps = (0, _react().useMemo)(() => {
+    if (label == null) return rest;
+    const ariaLabel = typeof label === 'string' ? label : undefined;
+    return {
+      ...rest,
+      ...(ariaLabel ? {
+        'aria-label': ariaLabel
+      } : null)
+    };
+  }, [label, rest]);
+  const state = (0, _list().useListState)(resolvedProps);
+  const {
+    listBoxProps,
+    labelProps
+  } = (0, _listbox().useListBox)(resolvedProps, state, ref);
+  const resolvedListBoxProps = (0, _react().useMemo)(() => listBoxProps, [listBoxProps]);
+  const resolvedLabelProps = (0, _react().useMemo)(() => labelProps, [labelProps]);
+  return {
+    state,
+    listBoxProps: resolvedListBoxProps,
+    labelProps: resolvedLabelProps,
+    ref
+  };
+};
+exports.useAriaListBox = useAriaListBox;

package/dist/cjs/hooks/aria/useAriaOverlay.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAriaOverlay = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _overlays() {
+  const data = require("@react-native-aria/overlays");
+  _overlays = function () {
+    return data;
+  };
+  return data;
+}
+function _utils() {
+  const data = require("@react-native-aria/utils");
+  _utils = function () {
+    return data;
+  };
+  return data;
+}
+const useAriaOverlay = ({
+  isOpen,
+  onClose,
+  isDismissable = true,
+  shouldCloseOnInteractOutside,
+  overlayProps: overlayPropOverrides
+}) => {
+  const overlayRef = (0, _react().useRef)(null);
+  const {
+    overlayProps
+  } = (0, _overlays().useOverlay)({
+    isOpen,
+    onClose,
+    isDismissable,
+    shouldCloseOnInteractOutside
+  }, overlayRef);
+  const resolvedOverlayProps = (0, _react().useMemo)(() => (0, _utils().mergeProps)(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
+  return {
+    overlayRef,
+    overlayProps: resolvedOverlayProps
+  };
+};
+exports.useAriaOverlay = useAriaOverlay;

package/dist/cjs/hooks/aria/useAriaPress.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAriaPress = 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;
+}
+function _focus() {
+  const data = require("@react-native-aria/focus");
+  _focus = function () {
+    return data;
+  };
+  return data;
+}
+function _interactions() {
+  const data = require("@react-native-aria/interactions");
+  _interactions = function () {
+    return data;
+  };
+  return data;
+}
+function _utils() {
+  const data = require("@react-native-aria/utils");
+  _utils = function () {
+    return data;
+  };
+  return data;
+}
+const mergePropsCompat = (...args) => {
+  if (typeof _utils().mergeProps === 'function') {
+    return (0, _utils().mergeProps)(...args);
+  }
+  return Object.assign({}, ...args);
+};
+const useAriaPress = ({
+  disabled = false,
+  allowHover = _reactNative().Platform.OS === 'web',
+  allowFocus = _reactNative().Platform.OS === 'web',
+  extraProps,
+  ...pressEvents
+} = {}) => {
+  const {
+    pressProps,
+    isPressed
+  } = (0, _interactions().usePress)({
+    ...pressEvents,
+    isDisabled: disabled
+  });
+  const {
+    isHovered,
+    hoverProps
+  } = (0, _interactions().useHover)({
+    isDisabled: disabled || !allowHover
+  });
+  const useFocusCompat = _focus().useFocus;
+  const {
+    isFocused,
+    focusProps
+  } = useFocusCompat({
+    isDisabled: disabled
+  });
+  const useFocusRingCompat = _focus().useFocusRing;
+  const {
+    focusProps: focusRingProps,
+    isFocusVisible
+  } = useFocusRingCompat({
+    isDisabled: disabled
+  });
+  const interactionProps = (0, _react().useMemo)(() => {
+    let merged = pressProps;
+    if (allowHover) {
+      merged = mergePropsCompat(merged, hoverProps);
+    }
+    if (allowFocus && !disabled) {
+      merged = mergePropsCompat(merged, focusProps, focusRingProps);
+    }
+    if (extraProps) {
+      merged = mergePropsCompat(merged, extraProps);
+    }
+    return merged;
+  }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
+  const states = (0, _react().useMemo)(() => ({
+    hovered: !!isHovered,
+    pressed: !!isPressed,
+    focused: !!isFocused,
+    focusVisible: !!isFocusVisible,
+    disabled: !!disabled
+  }), [disabled, isFocusVisible, isFocused, isHovered, isPressed]);
+  return {
+    interactionProps,
+    states
+  };
+};
+exports.useAriaPress = useAriaPress;

package/dist/cjs/hooks/aria/useAriaToggle.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAriaToggle = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _toggle() {
+  const data = require("@react-native-aria/toggle");
+  _toggle = function () {
+    return data;
+  };
+  return data;
+}
+function _toggle2() {
+  const data = require("@react-stately/toggle");
+  _toggle2 = function () {
+    return data;
+  };
+  return data;
+}
+const useAriaToggle = props => {
+  const inputRef = props.inputRef ?? (0, _react().useRef)(null);
+  const state = (0, _toggle2().useToggleState)(props);
+  const {
+    inputProps
+  } = (0, _toggle().useToggle)(props, state, inputRef);
+  const resolvedInputProps = (0, _react().useMemo)(() => inputProps, [inputProps]);
+  return {
+    state,
+    inputProps: resolvedInputProps,
+    inputRef
+  };
+};
+exports.useAriaToggle = useAriaToggle;

package/dist/cjs/hooks/gesture/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useGestureScroll = require("./useGestureScroll");
+Object.keys(_useGestureScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGestureScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGestureScroll[key];
+    }
+  });
+});

package/dist/cjs/hooks/gesture/useGestureScroll.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGestureScroll = exports.default = 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 DEFAULT_THROTTLE = 16;
+const VELOCITY_NORMALIZER = 1000; // convert delta/ms to px per second
+
+const useGestureScroll = (options = {}) => {
+  const {
+    axis = 'y',
+    scrollEventThrottle = DEFAULT_THROTTLE,
+    onScroll,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    onMomentumScrollBegin,
+    onMomentumScrollEnd
+  } = options;
+  const scrollValue = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const lastOffsetRef = (0, _react().useRef)(0);
+  const lastTimestampRef = (0, _react().useRef)(null);
+  const velocityRef = (0, _react().useRef)(0);
+  const directionRef = (0, _react().useRef)(null);
+  const [direction, setDirection] = (0, _react().useState)(null);
+  const [isDragging, setIsDragging] = (0, _react().useState)(false);
+  const [isMomentum, setIsMomentum] = (0, _react().useState)(false);
+  const updateDirection = (0, _react().useCallback)(next => {
+    if (directionRef.current !== next) {
+      directionRef.current = next;
+      setDirection(next);
+    }
+  }, []);
+  const handleScroll = (0, _react().useCallback)(event => {
+    onScroll?.(event);
+    const contentOffset = event.nativeEvent.contentOffset;
+    const current = axis === 'x' ? contentOffset.x ?? 0 : contentOffset.y ?? 0;
+    const delta = current - lastOffsetRef.current;
+    const timestamp = event.timeStamp ?? Date.now();
+    if (delta > 0) {
+      updateDirection('forward');
+    } else if (delta < 0) {
+      updateDirection('backward');
+    }
+    if (lastTimestampRef.current != null) {
+      const elapsed = Math.max(timestamp - lastTimestampRef.current, 1);
+      velocityRef.current = delta / elapsed * VELOCITY_NORMALIZER;
+    }
+    lastTimestampRef.current = timestamp;
+    lastOffsetRef.current = current;
+  }, [axis, onScroll, updateDirection]);
+  const animatedScrollHandler = (0, _react().useMemo)(() => {
+    const mapping = axis === 'x' ? [{
+      nativeEvent: {
+        contentOffset: {
+          x: scrollValue
+        }
+      }
+    }] : [{
+      nativeEvent: {
+        contentOffset: {
+          y: scrollValue
+        }
+      }
+    }];
+    return _reactNative().Animated.event(mapping, {
+      useNativeDriver: false,
+      listener: handleScroll
+    });
+  }, [axis, handleScroll, scrollValue]);
+  const handleScrollBeginDrag = (0, _react().useCallback)(event => {
+    setIsDragging(true);
+    onScrollBeginDrag?.(event);
+  }, [onScrollBeginDrag]);
+  const handleScrollEndDrag = (0, _react().useCallback)(event => {
+    setIsDragging(false);
+    onScrollEndDrag?.(event);
+  }, [onScrollEndDrag]);
+  const handleMomentumBegin = (0, _react().useCallback)(event => {
+    setIsMomentum(true);
+    onMomentumScrollBegin?.(event);
+  }, [onMomentumScrollBegin]);
+  const handleMomentumEnd = (0, _react().useCallback)(event => {
+    setIsMomentum(false);
+    onMomentumScrollEnd?.(event);
+  }, [onMomentumScrollEnd]);
+  const resetOffset = (0, _react().useCallback)((value = 0) => {
+    scrollValue.stopAnimation();
+    scrollValue.setValue(value);
+    lastOffsetRef.current = value;
+    lastTimestampRef.current = null;
+    velocityRef.current = 0;
+    updateDirection(null);
+  }, [scrollValue, updateDirection]);
+  const getVelocity = (0, _react().useCallback)(() => velocityRef.current, []);
+  const getCurrentOffset = (0, _react().useCallback)(() => lastOffsetRef.current, []);
+  const scrollProps = (0, _react().useMemo)(() => ({
+    onScroll: animatedScrollHandler,
+    scrollEventThrottle,
+    onScrollBeginDrag: handleScrollBeginDrag,
+    onScrollEndDrag: handleScrollEndDrag,
+    onMomentumScrollBegin: handleMomentumBegin,
+    onMomentumScrollEnd: handleMomentumEnd
+  }), [animatedScrollHandler, handleMomentumBegin, handleMomentumEnd, handleScrollBeginDrag, handleScrollEndDrag, scrollEventThrottle]);
+  return {
+    scrollValue,
+    scrollProps,
+    direction,
+    isDragging,
+    isMomentum,
+    getVelocity,
+    getCurrentOffset,
+    resetOffset
+  };
+};
+exports.useGestureScroll = useGestureScroll;
+var _default = exports.default = useGestureScroll;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useControllableValue: true,
+  useCountDown: true
+};
+Object.defineProperty(exports, "useControllableValue", {
+  enumerable: true,
+  get: function () {
+    return _useControllableValue.default;
+  }
+});
+Object.defineProperty(exports, "useCountDown", {
+  enumerable: true,
+  get: function () {
+    return _useCountDown.default;
+  }
+});
+var _usePresenceAnimation = require("./usePresenceAnimation");
+Object.keys(_usePresenceAnimation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _usePresenceAnimation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePresenceAnimation[key];
+    }
+  });
+});
+var _useSafeAreaPadding = require("./useSafeAreaPadding");
+Object.keys(_useSafeAreaPadding).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useSafeAreaPadding[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSafeAreaPadding[key];
+    }
+  });
+});
+var _aria = require("./aria");
+Object.keys(_aria).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _aria[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _aria[key];
+    }
+  });
+});
+var _gesture = require("./gesture");
+Object.keys(_gesture).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gesture[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gesture[key];
+    }
+  });
+});
+var _useControllableValue = _interopRequireDefault(require("./useControllableValue"));
+var _useCountDown = _interopRequireDefault(require("./useCountDown"));
+var _useHairline = require("./useHairline");
+Object.keys(_useHairline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useHairline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHairline[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }