fluent-styles 1.53.0 → 1.55.0

package/src/utiles/fontStyles.js

@@ -0,0 +1,31 @@
+/* eslint-disable prettier/prettier */
+import { Platform } from 'react-native';
+
+export const fontStyles = {
+  crimson_text_bold: Platform.select({
+    ios: 'CrimsonText-Bold', 
+    android: 'crimson_text_bold', 
+  }),
+  crimson_text_italic: Platform.select({
+    ios: 'CrimsonText-Italic', 
+    android: 'crimson_text_italic', 
+  }),
+  crimson_text_regular: Platform.select({
+    ios: 'CrimsonText-Regular', 
+    android: 'crimson_text_regular', 
+  }),
+  Roboto_Regular: Platform.select({
+    ios: 'Roboto-Regular', 
+    android: 'Roboto-Regular', 
+  }),
+  Roboto_Italic: Platform.select({
+    ios: 'Roboto-Italic', 
+    android: 'Roboto-Italic', 
+  }),
+  Roboto_Bold: Platform.select({
+    ios: 'Roboto-Bold', 
+    android: 'Roboto-Bold', 
+  }),
+};
+
+

package/src/utiles/position.ts

@@ -0,0 +1,100 @@
+import type { ViewStyle } from 'react-native'
+import type { Offset, Position } from '../portal/types'
+
+const DEFAULT_OFFSET: Offset = { x: 0, y: 0 }
+
+/**
+ * Returns absolute-position styles that anchor a portal element at the
+ * requested screen position, with an optional pixel offset applied on top.
+ *
+ * ⚠️  The `'center'` variant uses a negative-50 translate trick that works
+ *     well for modals/toasts but assumes the content has a known or bounded
+ *     size.  For content of variable width/height, prefer wrapping in a
+ *     container that measures itself and passes explicit offsets instead.
+ */
+export function getPositionStyles(
+  position: Position = 'center',
+  offset: Offset = DEFAULT_OFFSET,
+): ViewStyle {
+  const base: ViewStyle = {
+    position: 'absolute',
+  }
+ 
+  switch (position) {
+ 
+    case 'center': {
+      const style: ViewStyle = {
+        ...base,
+        top:            0,
+        left:           0,
+        right:          0,
+        bottom:         0,
+        alignItems:     'center',
+        justifyContent: 'center',
+      }
+      // Only add a transform when the caller explicitly wants an offset —
+      // avoids an unnecessary layout pass in the common no-offset case.
+      if (offset.x !== 0 || offset.y !== 0) {
+        style.transform = [
+          { translateX: offset.x },
+          { translateY: offset.y },
+        ]
+      }
+      return style
+    }
+ 
+    case 'top':
+      return {
+        ...base,
+        top:        offset.y,
+        left:       0,
+        right:      0,
+        alignItems: 'center',
+      }
+ 
+    case 'bottom':
+      return {
+        ...base,
+        bottom:     offset.y,
+        left:       0,
+        right:      0,
+        alignItems: 'center',
+      }
+ 
+    case 'top-left':
+      return {
+        ...base,
+        top:  offset.y,
+        left: offset.x,
+      }
+ 
+    case 'top-right':
+      return {
+        ...base,
+        top:   offset.y,
+        right: offset.x,
+      }
+ 
+    case 'bottom-left':
+      return {
+        ...base,
+        bottom: offset.y,
+        left:   offset.x,
+      }
+ 
+    case 'bottom-right':
+      return {
+        ...base,
+        bottom: offset.y,
+        right:  offset.x,
+      }
+
+    default: {
+      // Exhaustive check — TypeScript will error if a new Position variant is
+      // added to the union without a corresponding case above.
+      const _exhaustive: never = position
+      console.warn(`[Portal] Unknown position "${_exhaustive as string}" – falling back to absolute origin.`)
+      return base
+    }
+  }
+}

package/src/utiles/statusBar.ts

@@ -0,0 +1,410 @@
+import { Dimensions, Platform, StatusBar } from 'react-native'
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type DeviceSize = {
+  width: number
+  height: number
+}
+
+type StatusBarHeightOptions = {
+  skipAndroid?: boolean
+  skipIos?: boolean
+}
+
+type ScreenInfo = {
+  width: number
+  height: number
+  shortSide: number
+  longSide: number
+  isLandscape: boolean
+  isPortrait: boolean
+}
+
+// ============================================================================
+// STATUS BAR HEIGHT CONSTANTS
+// ============================================================================
+
+const STATUSBAR_DEFAULT_HEIGHT = 20
+const STATUSBAR_ANDROID_FALLBACK_HEIGHT = 24
+const STATUSBAR_NOTCH_HEIGHT = 44
+const STATUSBAR_DYNAMIC_ISLAND_HEIGHT = 47
+
+// ============================================================================
+// APPLE DEVICE DIMENSIONS
+// Normalized sizes: width is always the smaller side, height is the larger side
+// ============================================================================
+
+// iPhone X / XS / 11 Pro
+const IPHONE_X: DeviceSize = { width: 375, height: 812 }
+
+// iPhone XR / XS Max / 11 / 11 Pro Max
+const IPHONE_XR_XS_MAX: DeviceSize = { width: 414, height: 896 }
+
+// iPhone 12 / 12 Pro / 13 / 13 Pro / 14
+const IPHONE_12_13_14: DeviceSize = { width: 390, height: 844 }
+
+// iPhone 12 Pro Max / 13 Pro Max / 14 Plus
+const IPHONE_12_PRO_MAX_13_PRO_MAX_14_PLUS: DeviceSize = { width: 428, height: 926 }
+
+// iPhone 14 Pro
+const IPHONE_14_PRO: DeviceSize = { width: 393, height: 852 }
+
+// iPhone 14 Pro Max
+const IPHONE_14_PRO_MAX: DeviceSize = { width: 430, height: 932 }
+
+// iPhone 15 / 15 Pro
+const IPHONE_15_15_PRO: DeviceSize = { width: 393, height: 852 }
+
+// iPhone 15 Plus
+const IPHONE_15_PLUS: DeviceSize = { width: 430, height: 932 }
+
+// iPhone 15 Pro Max
+const IPHONE_15_PRO_MAX: DeviceSize = { width: 430, height: 932 }
+
+// iPhone 16 / possible same logical size as 15/14 Pro family in RN layouts
+const IPHONE_16_FAMILY_SMALL: DeviceSize = { width: 393, height: 852 }
+const IPHONE_16_FAMILY_LARGE: DeviceSize = { width: 430, height: 932 }
+
+// ============================================================================
+// DEVICE GROUPS
+// ============================================================================
+
+const NOTCH_DEVICES: DeviceSize[] = [
+  IPHONE_X,
+  IPHONE_XR_XS_MAX,
+  IPHONE_12_13_14,
+  IPHONE_12_PRO_MAX_13_PRO_MAX_14_PLUS,
+  IPHONE_14_PRO,
+  IPHONE_14_PRO_MAX,
+  IPHONE_15_15_PRO,
+  IPHONE_15_PLUS,
+  IPHONE_15_PRO_MAX,
+  IPHONE_16_FAMILY_SMALL,
+  IPHONE_16_FAMILY_LARGE,
+]
+
+const DYNAMIC_ISLAND_DEVICES: DeviceSize[] = [
+  IPHONE_14_PRO,
+  IPHONE_14_PRO_MAX,
+  IPHONE_15_15_PRO,
+  IPHONE_15_PLUS,
+  IPHONE_15_PRO_MAX,
+  IPHONE_16_FAMILY_SMALL,
+  IPHONE_16_FAMILY_LARGE,
+]
+
+const IPHONE_X_FAMILY_DEVICES: DeviceSize[] = [
+  IPHONE_X,
+  IPHONE_XR_XS_MAX,
+]
+
+const IPHONE_12_FAMILY_DEVICES: DeviceSize[] = [
+  IPHONE_12_13_14,
+  IPHONE_12_PRO_MAX_13_PRO_MAX_14_PLUS,
+]
+
+// ============================================================================
+// SCREEN HELPERS
+// ============================================================================
+
+/**
+ * Returns raw screen info from the window dimensions.
+ */
+export function getScreenInfo(): ScreenInfo {
+  const { width, height } = Dimensions.get('window')
+
+  return {
+    width,
+    height,
+    shortSide: Math.min(width, height),
+    longSide: Math.max(width, height),
+    isLandscape: width > height,
+    isPortrait: height >= width,
+  }
+}
+
+/**
+ * Returns normalized device size so comparisons work in both portrait and landscape.
+ */
+function getNormalizedDeviceSize(): DeviceSize {
+  const { shortSide, longSide } = getScreenInfo()
+
+  return {
+    width: shortSide,
+    height: longSide,
+  }
+}
+
+/**
+ * Checks whether current device matches the provided size.
+ */
+function matchesDeviceSize(target: DeviceSize): boolean {
+  const current = getNormalizedDeviceSize()
+  return current.width === target.width && current.height === target.height
+}
+
+/**
+ * Checks whether current device matches one of the sizes in a group.
+ */
+function matchesAnyDeviceSize(group: DeviceSize[]): boolean {
+  return group.some(matchesDeviceSize)
+}
+
+// ============================================================================
+// PLATFORM HELPERS
+// ============================================================================
+
+/**
+ * Returns true when running on iOS.
+ */
+export function isIos(): boolean {
+  return Platform.OS === 'ios'
+}
+
+/**
+ * Returns true when running on Android.
+ */
+export function isAndroid(): boolean {
+  return Platform.OS === 'android'
+}
+
+/**
+ * Returns true when running on tvOS / Apple TV.
+ */
+export function isTv(): boolean {
+  return !!Platform.isTV
+}
+
+/**
+ * Returns true when running on an iPad.
+ */
+export function isPad(): boolean {
+  return Platform.OS === 'ios' && !!Platform.isPad
+}
+
+/**
+ * Returns true when running on a tablet.
+ * For iOS it checks iPad.
+ * For Android it uses shortest side heuristic.
+ */
+export function isTablet(): boolean {
+  if (Platform.OS === 'ios') {
+    return !!Platform.isPad
+  }
+
+  if (Platform.OS === 'android') {
+    const { shortSide } = getScreenInfo()
+    return shortSide >= 600
+  }
+
+  return false
+}
+
+/**
+ * Returns true when running on a phone-sized device.
+ */
+export function isPhone(): boolean {
+  return !isTablet() && !isTv()
+}
+
+/**
+ * Returns true when running on a supported iPhone.
+ */
+function isSupportedIPhone(): boolean {
+  return Platform.OS === 'ios' && !Platform.isPad && !Platform.isTV
+}
+
+// ============================================================================
+// SPECIFIC IPHONE MODEL HELPERS
+// ============================================================================
+
+/**
+ * Check if running on iPhone X / XS / 11 Pro size.
+ */
+export function isIPhoneX(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_X)
+}
+
+/**
+ * Check if running on iPhone XR / XS Max / 11 / 11 Pro Max size.
+ */
+export function isIPhoneXMax(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_XR_XS_MAX)
+}
+
+/**
+ * Check if running on iPhone 12 / 12 Pro / 13 / 13 Pro / 14 size.
+ */
+export function isIPhone12(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_12_13_14)
+}
+
+/**
+ * Check if running on iPhone 12 Pro Max / 13 Pro Max / 14 Plus size.
+ */
+export function isIPhone12Max(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_12_PRO_MAX_13_PRO_MAX_14_PLUS)
+}
+
+/**
+ * Check if running on iPhone 14 Pro / 15 / 15 Pro / 16 small family size.
+ */
+export function isIPhone14ProLike(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_14_PRO)
+}
+
+/**
+ * Check if running on iPhone 14 Pro Max / 15 Plus / 15 Pro Max / 16 large family size.
+ */
+export function isIPhone14ProMaxLike(): boolean {
+  return isSupportedIPhone() && matchesDeviceSize(IPHONE_14_PRO_MAX)
+}
+
+// ============================================================================
+// NOTCH / DYNAMIC ISLAND HELPERS
+// ============================================================================
+
+/**
+ * Returns true if device is a known iPhone with notch or Dynamic Island.
+ */
+export function isIPhoneWithMonobrow(): boolean {
+  return isSupportedIPhone() && matchesAnyDeviceSize(NOTCH_DEVICES)
+}
+
+/**
+ * Returns true if device is part of iPhone X notch family.
+ */
+export function isIPhoneXFamily(): boolean {
+  return isSupportedIPhone() && matchesAnyDeviceSize(IPHONE_X_FAMILY_DEVICES)
+}
+
+/**
+ * Returns true if device is part of iPhone 12/13/14 notch family.
+ */
+export function isIPhone12Family(): boolean {
+  return isSupportedIPhone() && matchesAnyDeviceSize(IPHONE_12_FAMILY_DEVICES)
+}
+
+/**
+ * Returns true if device is a known Dynamic Island iPhone.
+ */
+export function hasDynamicIsland(): boolean {
+  return isSupportedIPhone() && matchesAnyDeviceSize(DYNAMIC_ISLAND_DEVICES)
+}
+
+/**
+ * Alias for notch-style iPhones including Dynamic Island.
+ */
+export function hasNotch(): boolean {
+  return isIPhoneWithMonobrow()
+}
+
+// ============================================================================
+// EXPO DETECTION
+// ============================================================================
+
+/**
+ * Get Expo root object if running inside Expo.
+ */
+function getExpoRoot(): unknown {
+  return (global as any).Expo || (global as any).__expo || (global as any).__exponent
+}
+
+/**
+ * Returns true if running inside Expo.
+ */
+export function isExpo(): boolean {
+  return getExpoRoot() !== undefined
+}
+
+// ============================================================================
+// STATUS BAR HELPERS
+// ============================================================================
+
+/**
+ * Returns the iOS status bar height based on known device families.
+ */
+function getIosStatusBarHeight(): number {
+  if (!isSupportedIPhone()) return 0
+
+  if (hasDynamicIsland()) {
+    return STATUSBAR_DYNAMIC_ISLAND_HEIGHT
+  }
+
+  if (hasNotch()) {
+    return STATUSBAR_NOTCH_HEIGHT
+  }
+
+  return STATUSBAR_DEFAULT_HEIGHT
+}
+
+/**
+ * Returns the Android status bar height.
+ */
+function getAndroidStatusBarHeight(): number {
+  return StatusBar.currentHeight ?? STATUSBAR_ANDROID_FALLBACK_HEIGHT
+}
+
+/**
+ * Get the status bar height for the current platform.
+ *
+ * @param options control whether iOS or Android should return 0
+ *
+ * @example
+ * getStatusBarHeight()
+ * getStatusBarHeight({ skipIos: false })
+ * getStatusBarHeight({ skipAndroid: true, skipIos: false })
+ */
+export function getStatusBarHeight(options: StatusBarHeightOptions = {}): number {
+  const { skipAndroid = false, skipIos = true } = options
+
+  if (Platform.OS === 'ios') {
+    return skipIos ? 0 : getIosStatusBarHeight()
+  }
+
+  if (Platform.OS === 'android') {
+    return skipAndroid ? 0 : getAndroidStatusBarHeight()
+  }
+
+  return 0
+}
+
+/**
+ * Returns a top inset-like value useful for layouts that need extra spacing.
+ */
+export function getTopInset(options: StatusBarHeightOptions = {}): number {
+  return getStatusBarHeight(options)
+}
+
+// ============================================================================
+// DEBUG / INFO HELPERS
+// ============================================================================
+
+/**
+ * Returns a readable summary of the current device environment.
+ */
+export function getDeviceDebugInfo() {
+  const screen = getScreenInfo()
+
+  return {
+    platform: Platform.OS,
+    version: Platform.Version,
+    isPad: isPad(),
+    isTablet: isTablet(),
+    isPhone: isPhone(),
+    isTV: isTv(),
+    isExpo: isExpo(),
+    width: screen.width,
+    height: screen.height,
+    shortSide: screen.shortSide,
+    longSide: screen.longSide,
+    isLandscape: screen.isLandscape,
+    isPortrait: screen.isPortrait,
+    hasNotch: hasNotch(),
+    hasDynamicIsland: hasDynamicIsland(),
+    statusBarHeight: getStatusBarHeight({ skipIos: false, skipAndroid: false }),
+  }
+}

package/src/utiles/styled.tsx

@@ -0,0 +1,48 @@
+
+import React, { forwardRef, ComponentType } from "react";
+import { ViewStyle, TextStyle, ImageStyle } from "react-native";
+
+type Style = ViewStyle | TextStyle | ImageStyle;
+
+interface StyledOptions {
+    base?: Style;
+    variants?: {
+        [key: string]: {
+            [variant: string]: Style | ((selected: string, options: any) => Style);
+        } | ((selected: string, options: any) => Style);
+    };
+}
+
+const styled = <P extends object>(
+    Component: ComponentType<P>,
+    { base, variants }: StyledOptions = {}
+) => {
+    return forwardRef<any, P>((props, ref) => {
+        const styles: Style = { ...(base || {}) };
+        const options = props as Record<string, any>;
+
+        if (variants) {
+            Object.keys(variants).forEach((category) => {
+                const variantSelected = options[category];
+                const variantValue = variants[category];
+
+                if (typeof variantValue === "function") {
+                    const style = variantValue(variantSelected, options);
+                    if (style) {
+                        Object.assign(styles, style);
+                    }
+                } else if (variantValue && variantValue[variantSelected]) {
+                    const value = variantValue[variantSelected];
+                    Object.assign(
+                        styles,
+                        typeof value === "function" ? value(variantSelected, options) : value
+                    );
+                }
+            });
+        }
+
+        return <Component {...(props as any)} style={styles} ref={ref} />;
+    });
+};
+
+export { styled };

package/src/utiles/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native'
+
+/**
+ * Styles shared across portal rendering components.
+ * Kept in a single module so both `PortalManager` and `GlobalPortalProvider`
+ * reference the same cached `StyleSheet` object.
+ */
+export const portalStyles = StyleSheet.create({
+  /** Full-screen semi-transparent overlay rendered behind portal content. */
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+
+  /**
+   * Touch-capture layer that sits on top of the backdrop colour layer.
+   * Using a separate view (rather than making the backdrop itself touchable)
+   * lets us keep `pointerEvents="box-none"` on the backdrop so that touches
+   * outside the inner layer still fall through when no `onBackdropPress` is
+   * needed.
+   */
+  backdropTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+})