react-native-system-ui 0.0.5 → 0.0.6

package/dist/cjs/components/dropdown-menu/DropdownMenu.js

@@ -1,340 +0,0 @@
-"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;
-}
-var _hooks = require("../../hooks");
-var _platform = require("../../platform");
-var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _overlay = require("../overlay");
-var _hairline = require("../../utils/hairline");
-var _number = require("../../utils/number");
-var _DropdownMenuContext = require("./DropdownMenuContext");
-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 AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
-const isSameFrame = (prev, next) => prev != null && Math.abs(prev.x - next.x) < 0.5 && Math.abs(prev.y - next.y) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5;
-const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
-  const {
-    children,
-    activeColor,
-    activeIcon,
-    direction = 'down',
-    disabled = false,
-    zIndex: zIndexProp = 10,
-    duration,
-    overlay = false,
-    closeOnClickOverlay = true,
-    closeOnClickOutside = true,
-    swipeThreshold,
-    onOpen,
-    onClose,
-    onOpened,
-    onClosed,
-    tokensOverride,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useDropdownMenuTokens)(tokensOverride);
-  const [menuValue = {}, onMenuChange] = (0, _hooks.useControllableValue)(props, {
-    defaultValue: {}
-  });
-  const [activeIndex, setActiveIndex] = (0, _react().useState)(null);
-  const activeIndexRef = (0, _react().useRef)(null);
-  const [panel, setPanel] = (0, _react().useState)(null);
-  const [mounted, setMounted] = (0, _react().useState)(false);
-  const [barHeight, setBarHeight] = (0, _react().useState)(0);
-  const barRef = (0, _react().useRef)(null);
-  const [barFrame, setBarFrame] = (0, _react().useState)(null);
-  const [barWidth, setBarWidth] = (0, _react().useState)(0);
-  const {
-    height: windowHeight,
-    width: windowWidth
-  } = (0, _reactNative().useWindowDimensions)();
-  const panelRegistryRef = (0, _react().useRef)(new Map());
-  const zIndex = (0, _number.parseNumber)(zIndexProp, 10);
-  const durationMs = duration === undefined ? 200 : Math.max(0, (0, _number.parseNumber)(duration, 0.2)) * 1000;
-  const thresholdRaw = swipeThreshold === undefined ? undefined : (0, _number.parseNumberLike)(swipeThreshold);
-  const threshold = thresholdRaw !== undefined && thresholdRaw > 0 ? Math.floor(thresholdRaw) : undefined;
-  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const animationRef = (0, _react().useRef)(null);
-  const runAnimation = (0, _react().useCallback)((toValue, onFinished) => {
-    animationRef.current?.stop();
-    if (durationMs === 0) {
-      progress.setValue(toValue);
-      onFinished?.();
-      return;
-    }
-    const animation = _reactNative().Animated.timing(progress, {
-      toValue,
-      duration: durationMs,
-      useNativeDriver: _platform.nativeDriverEnabled
-    });
-    animationRef.current = animation;
-    animation.start(({
-      finished
-    }) => {
-      if (!finished) return;
-      onFinished?.();
-    });
-  }, [durationMs, progress]);
-  const registerPanel = (0, _react().useCallback)((index, content) => {
-    panelRegistryRef.current.set(index, content);
-    if (activeIndexRef.current === index) {
-      setPanel(content);
-    }
-  }, []);
-  const showItem = (0, _react().useCallback)(index => {
-    if (disabled) return;
-    activeIndexRef.current = index;
-    setActiveIndex(index);
-    setPanel(panelRegistryRef.current.get(index) ?? null);
-  }, [disabled]);
-  const closeMenu = (0, _react().useCallback)(() => {
-    activeIndexRef.current = null;
-    setActiveIndex(null);
-  }, []);
-  const toggleItem = (0, _react().useCallback)(index => {
-    if (disabled) return;
-    if (activeIndexRef.current === index) {
-      closeMenu();
-      return;
-    }
-    showItem(index);
-  }, [closeMenu, disabled, showItem]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    toggleItem,
-    showItem,
-    close: closeMenu
-  }), [closeMenu, showItem, toggleItem]);
-  const requestMeasure = (0, _react().useCallback)(fallbackHeight => {
-    const node = barRef.current;
-    if (!node) {
-      const fallback = {
-        x: 0,
-        y: 0,
-        width: barWidth || windowWidth,
-        height: fallbackHeight ?? barHeight
-      };
-      setBarFrame(prev => isSameFrame(prev, fallback) ? prev : fallback);
-      return;
-    }
-    (0, _platform.measureInWindow)(node, rect => {
-      if (rect) {
-        const next = {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height
-        };
-        if (!Number.isFinite(next.x) || !Number.isFinite(next.y) || !Number.isFinite(next.width) || !Number.isFinite(next.height)) return;
-        setBarFrame(prev => isSameFrame(prev, next) ? prev : next);
-        return;
-      }
-      const fallback = {
-        x: 0,
-        y: 0,
-        width: barWidth || windowWidth,
-        height: fallbackHeight ?? barHeight
-      };
-      setBarFrame(prev => isSameFrame(prev, fallback) ? prev : fallback);
-    });
-  }, [barHeight, barWidth, windowWidth]);
-  const prevActiveIndexRef = (0, _react().useRef)(null);
-  (0, _react().useEffect)(() => {
-    const prev = prevActiveIndexRef.current;
-    prevActiveIndexRef.current = activeIndex;
-    if (activeIndex !== null && prev === null) {
-      setMounted(true);
-      requestMeasure();
-      setPanel(panelRegistryRef.current.get(activeIndex) ?? null);
-      onOpen?.();
-      progress.setValue(0);
-      runAnimation(1, () => onOpened?.());
-      return;
-    }
-    if (activeIndex === null && prev !== null) {
-      onClose?.();
-      runAnimation(0, () => {
-        setMounted(false);
-        setPanel(null);
-        onClosed?.();
-      });
-    }
-  }, [activeIndex, onClose, onClosed, onOpen, onOpened, progress, requestMeasure, runAnimation]);
-  (0, _react().useEffect)(() => {
-    if (!mounted) return;
-    requestMeasure();
-  }, [mounted, requestMeasure, windowHeight]);
-  (0, _react().useEffect)(() => () => {
-    animationRef.current?.stop();
-  }, []);
-  const barScrollable = threshold !== undefined && _react().default.Children.count(children) > threshold;
-  const contextValue = {
-    activeIndex,
-    registerPanel,
-    toggleItem,
-    showItem,
-    closeMenu,
-    activeColor,
-    activeIcon,
-    direction,
-    disabled,
-    menuValue,
-    onMenuChange
-  };
-  const shouldRenderMask = mounted && (overlay || closeOnClickOutside);
-  const shouldCloseOnMask = closeOnClickOverlay || closeOnClickOutside;
-  const resolvedBarTop = barFrame?.y ?? 0;
-  const resolvedBarHeight = barFrame?.height ?? barHeight;
-  const resolvedBarLeft = barFrame?.x ?? 0;
-  const resolvedBarWidth = barFrame?.width ?? (barWidth || windowWidth);
-  const resolvedBarBottom = resolvedBarTop + resolvedBarHeight;
-  const bottomInset = Math.max(0, windowHeight - resolvedBarTop);
-  const insetStyle = direction === 'up' ? {
-    bottom: bottomInset
-  } : {
-    top: resolvedBarBottom
-  };
-  const panelPositionStyle = {
-    left: resolvedBarLeft,
-    width: resolvedBarWidth
-  };
-  const panelRadiusStyle = direction === 'up' ? styles.panelUp : styles.panelDown;
-  const panelAnimatedStyle = {
-    opacity: progress,
-    transform: [{
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: direction === 'up' ? [8, 0] : [-8, 0]
-      })
-    }]
-  };
-  const {
-    zIndex: stackZIndex
-  } = (0, _overlay.useOverlayStack)({
-    visible: mounted,
-    lockScroll: shouldRenderMask,
-    zIndex,
-    type: 'dropdown-menu'
-  });
-  const resolvedZIndex = stackZIndex ?? zIndex;
-  const barChildren = _react().default.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
-    const element = child;
-    return /*#__PURE__*/_react().default.cloneElement(element, {
-      index,
-      barScrollable
-    });
-  });
-  const barStyle = [styles.barWrapper, {
-    height: tokens.sizing.barHeight,
-    backgroundColor: tokens.colors.barBackground,
-    paddingHorizontal: tokens.spacing.horizontal,
-    zIndex: mounted ? resolvedZIndex + 1 : undefined,
-    ...tokens.shadow
-  }, (0, _hairline.createHairlineBorderBottom)(tokens.colors.divider)];
-  const handleBarLayout = (0, _react().useCallback)(event => {
-    const {
-      height,
-      width
-    } = event.nativeEvent.layout;
-    setBarHeight(height);
-    setBarWidth(width);
-    requestMeasure(height);
-  }, [requestMeasure]);
-  return /*#__PURE__*/_react().default.createElement(_DropdownMenuContext.DropdownMenuContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    style: [styles.container, style]
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    ref: barRef,
-    collapsable: false,
-    style: barStyle,
-    onLayout: handleBarLayout
-  }, barScrollable ? /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    contentContainerStyle: styles.barScrollContent
-  }, barChildren) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.bar
-  }, barChildren)), mounted ? /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.portal,
-    pointerEvents: "box-none"
-  }, shouldRenderMask ? /*#__PURE__*/_react().default.createElement(AnimatedPressable, {
-    style: [styles.mask, insetStyle, {
-      backgroundColor: overlay ? tokens.colors.mask : 'transparent',
-      opacity: progress,
-      zIndex: resolvedZIndex
-    }],
-    testID: "rv-dropdown-mask",
-    pointerEvents: mounted ? 'auto' : 'none',
-    onPress: () => {
-      if (shouldCloseOnMask) {
-        closeMenu();
-      }
-    }
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [styles.panel, insetStyle, panelPositionStyle, panelRadiusStyle, panelAnimatedStyle, {
-      backgroundColor: tokens.colors.panelBackground,
-      maxHeight: tokens.sizing.panelMaxHeight,
-      zIndex: resolvedZIndex + 1
-    }],
-    pointerEvents: "box-none"
-  }, panel))) : null));
-});
-const styles = _reactNative().StyleSheet.create({
-  container: {
-    position: 'relative',
-    width: '100%'
-  },
-  barWrapper: {
-    flexDirection: 'row',
-    position: 'relative'
-  },
-  bar: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  barScrollContent: {
-    flexDirection: 'row'
-  },
-  portal: {
-    ..._reactNative().StyleSheet.absoluteFillObject
-  },
-  mask: {
-    ..._reactNative().StyleSheet.absoluteFillObject
-  },
-  panel: {
-    position: 'absolute',
-    overflow: 'hidden'
-  },
-  panelUp: {
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12
-  },
-  panelDown: {
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12
-  }
-});
-DropdownMenu.displayName = 'DropdownMenu';
-var _default = exports.default = DropdownMenu;

package/dist/cjs/components/dropdown-menu/DropdownMenuContext.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDropdownMenuContext = exports.DropdownMenuContext = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = 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 DropdownMenuContext = exports.DropdownMenuContext = /*#__PURE__*/_react().default.createContext(null);
-const useDropdownMenuContext = () => {
-  const ctx = (0, _react().useContext)(DropdownMenuContext);
-  if (!ctx) throw new Error('DropdownItem must be used within DropdownMenu');
-  return ctx;
-};
-exports.useDropdownMenuContext = useDropdownMenuContext;

package/dist/cjs/components/dropdown-menu/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DropdownItem", {
-  enumerable: true,
-  get: function () {
-    return _DropdownItem.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useDropdownMenuTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useDropdownMenuTokens;
-  }
-});
-var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
-var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = Object.assign(_DropdownMenu.default, {
-  Item: _DropdownItem.default
-});

package/dist/cjs/components/dropdown-menu/tokens.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDropdownMenuTokens = void 0;
-var _designSystem = require("../../design-system");
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography
-  } = foundations;
-  return {
-    colors: {
-      text: palette.default[900],
-      activeText: palette.danger[500],
-      placeholder: palette.default[500],
-      disabledText: palette.default[400],
-      arrow: palette.default[500],
-      panelBackground: '#ffffff',
-      mask: 'rgba(0,0,0,0.45)',
-      divider: palette.default[200],
-      barBackground: '#ffffff',
-      transparent: 'transparent'
-    },
-    spacing: {
-      horizontal: spacing.md,
-      vertical: spacing.sm,
-      titlePadding: spacing.xs,
-      customPanelPadding: spacing.lg,
-      optionRowPaddingHorizontal: spacing.lg,
-      optionRowPaddingVertical: 10,
-      itemScrollablePaddingHorizontal: spacing.md,
-      arrowMarginLeft: spacing.xs,
-      optionIconMarginRight: spacing.sm,
-      indicatorMarginLeft: spacing.md,
-      panelPaddingHorizontal: spacing.none
-    },
-    sizing: {
-      barHeight: 48,
-      titleFontSize: 15,
-      titleLineHeight: fontSize.lg * typography.lineHeightMultiplier,
-      panelMaxHeight: 320,
-      optionFontSize: fontSize.md,
-      arrowSize: 6,
-      arrowBorderWidth: 3,
-      arrowBorderHeight: 4
-    },
-    opacity: {
-      arrowInactive: 0.8,
-      arrowActive: 1
-    },
-    shadow: {
-      shadowColor: 'rgba(100, 101, 102, 0.12)',
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowOpacity: 1,
-      shadowRadius: 12,
-      elevation: 3
-    }
-  };
-};
-const useDropdownMenuTokens = exports.useDropdownMenuTokens = (0, _designSystem.createComponentTokensHook)('dropdownMenu', createTokens);

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mapKeyboardType = exports.alignMap = void 0;
-const alignMap = exports.alignMap = {
-  left: 'flex-start',
-  center: 'center',
-  right: 'flex-end'
-};
-const mapKeyboardType = type => {
-  switch (type) {
-    case 'number':
-      return 'decimal-pad';
-    case 'digit':
-      return 'number-pad';
-    case 'tel':
-      return 'phone-pad';
-    default:
-      return undefined;
-  }
-};
-exports.mapKeyboardType = mapKeyboardType;

package/dist/cjs/components/index-bar/IndexAnchor.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-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); }
-const IndexAnchor = props => {
-  const {
-    index,
-    title,
-    children,
-    active,
-    highlightColor,
-    onLayoutCapture,
-    style,
-    onLayout,
-    tokensOverride,
-    ...rest
-  } = props;
-  const {
-    colors,
-    layout,
-    typography
-  } = (0, _tokens.useIndexBarTokens)(tokensOverride);
-  const textColor = active && highlightColor ? highlightColor : colors.anchorText;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    onLayout: event => {
-      onLayoutCapture?.(index, event?.nativeEvent?.layout?.y ?? 0);
-      onLayout?.(event);
-    },
-    style: [styles.container, style]
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.header, {
-      height: layout.anchorHeight,
-      backgroundColor: colors.anchorBackground,
-      paddingHorizontal: layout.anchorPaddingHorizontal
-    }]
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.title, {
-      color: textColor,
-      fontSize: typography.anchorTitleSize
-    }]
-  }, title ?? index)), children);
-};
-const styles = _reactNative().StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  header: {
-    justifyContent: 'center'
-  },
-  title: {
-    fontWeight: '600'
-  }
-});
-IndexAnchor.displayName = 'IndexBar.Anchor';
-var _default = exports.default = IndexAnchor;