@vxrn/native 1.12.8-1774390675831

package/src/color/index.native.ts

@@ -0,0 +1,75 @@
+// adapted from expo-router (MIT license) - https://github.com/expo/expo
+import { PlatformColor, Platform, type ColorValue } from 'react-native'
+import type { AndroidDynamicMaterialColorType } from './android.dynamic.types'
+import type { AndroidStaticMaterialColorType } from './android.material.types'
+import type { IOSBaseColor } from './ios.types'
+import { Material3Color, Material3DynamicColor } from './materialColor'
+
+export * from './android.dynamic.types'
+export * from './android.material.types'
+export * from './ios.types'
+
+export type AndroidMaterialColor = AndroidStaticMaterialColorType & {
+  [key: string]: ColorValue
+}
+
+export type AndroidDynamicMaterialColor = AndroidDynamicMaterialColorType & {
+  [key: string]: ColorValue
+}
+
+export interface ColorType {
+  ios: IOSBaseColor & { [key: string]: ColorValue }
+  android: {
+    material: AndroidMaterialColor
+    dynamic: AndroidDynamicMaterialColor
+    [key: string]: any
+  }
+}
+
+const iosColor = new Proxy({} as ColorType['ios'], {
+  get(_, prop: string) {
+    if (Platform.OS === 'ios') return PlatformColor(prop)
+    return null
+  },
+})
+
+const androidMaterialColor = new Proxy({} as ColorType['android']['material'], {
+  get(_, prop: string) {
+    if (Platform.OS === 'android') return Material3Color(prop)
+    return null
+  },
+})
+
+const androidDynamicColor = new Proxy({} as ColorType['android']['dynamic'], {
+  get(_, prop: string) {
+    if (Platform.OS === 'android') return Material3DynamicColor(prop)
+    return null
+  },
+})
+
+const androidColor = new Proxy(
+  {
+    get material() {
+      return androidMaterialColor
+    },
+    get dynamic() {
+      return androidDynamicColor
+    },
+  } as ColorType['android'],
+  {
+    get(target, prop: string) {
+      if (prop in target) return (target as any)[prop]
+      if (Platform.OS === 'android') return PlatformColor('@android:color/' + prop)
+      return null
+    },
+  }
+)
+
+export const Color: ColorType = {
+  get ios() {
+    return iosColor
+  },
+  get android() {
+    return androidColor
+  },
+}

package/src/color/index.ts

@@ -0,0 +1,75 @@
+// adapted from expo-router (MIT license) - https://github.com/expo/expo
+import { Platform, type ColorValue } from 'react-native'
+import type { AndroidDynamicMaterialColorType } from './android.dynamic.types'
+import type { AndroidStaticMaterialColorType } from './android.material.types'
+import type { IOSBaseColor } from './ios.types'
+import { Material3Color, Material3DynamicColor } from './materialColor'
+
+export * from './android.dynamic.types'
+export * from './android.material.types'
+export * from './ios.types'
+
+export type AndroidMaterialColor = AndroidStaticMaterialColorType & {
+  [key: string]: ColorValue
+}
+
+export type AndroidDynamicMaterialColor = AndroidDynamicMaterialColorType & {
+  [key: string]: ColorValue
+}
+
+export interface ColorType {
+  ios: IOSBaseColor & { [key: string]: ColorValue }
+  android: {
+    material: AndroidMaterialColor
+    dynamic: AndroidDynamicMaterialColor
+    [key: string]: any
+  }
+}
+
+// on web/ssr, return null for all platform colors
+// on native, these are overridden by the .native.ts version
+const iosColor = new Proxy({} as ColorType['ios'], {
+  get() {
+    return null
+  },
+})
+
+const androidMaterialColor = new Proxy({} as ColorType['android']['material'], {
+  get(_, prop: string) {
+    if (Platform.OS === 'android') return Material3Color(prop)
+    return null
+  },
+})
+
+const androidDynamicColor = new Proxy({} as ColorType['android']['dynamic'], {
+  get(_, prop: string) {
+    if (Platform.OS === 'android') return Material3DynamicColor(prop)
+    return null
+  },
+})
+
+const androidColor = new Proxy(
+  {
+    get material() {
+      return androidMaterialColor
+    },
+    get dynamic() {
+      return androidDynamicColor
+    },
+  } as ColorType['android'],
+  {
+    get(target, prop: string) {
+      if (prop in target) return (target as any)[prop]
+      return null
+    },
+  }
+)
+
+export const Color: ColorType = {
+  get ios() {
+    return iosColor
+  },
+  get android() {
+    return androidColor
+  },
+}

package/src/color/ios.types.ts

@@ -0,0 +1,156 @@
+import type { ColorValue } from 'react-native'
+
+export interface IOSBaseColor {
+  /**
+   * PlatformColor("systemBlue")
+   */
+  systemBlue: ColorValue
+  /**
+   * PlatformColor("systemBrown")
+   */
+  systemBrown: ColorValue
+  /**
+   * PlatformColor("systemCyan")
+   */
+  systemCyan: ColorValue
+  /**
+   * PlatformColor("systemGreen")
+   */
+  systemGreen: ColorValue
+  /**
+   * PlatformColor("systemIndigo")
+   */
+  systemIndigo: ColorValue
+  /**
+   * PlatformColor("systemMint")
+   */
+  systemMint: ColorValue
+  /**
+   * PlatformColor("systemOrange")
+   */
+  systemOrange: ColorValue
+  /**
+   * PlatformColor("systemPink")
+   */
+  systemPink: ColorValue
+  /**
+   * PlatformColor("systemPurple")
+   */
+  systemPurple: ColorValue
+  /**
+   * PlatformColor("systemRed")
+   */
+  systemRed: ColorValue
+  /**
+   * PlatformColor("systemTeal")
+   */
+  systemTeal: ColorValue
+  /**
+   * PlatformColor("systemYellow")
+   */
+  systemYellow: ColorValue
+  /**
+   * PlatformColor("systemGray")
+   */
+  systemGray: ColorValue
+  /**
+   * PlatformColor("systemGray2")
+   */
+  systemGray2: ColorValue
+  /**
+   * PlatformColor("systemGray3")
+   */
+  systemGray3: ColorValue
+  /**
+   * PlatformColor("systemGray4")
+   */
+  systemGray4: ColorValue
+  /**
+   * PlatformColor("systemGray5")
+   */
+  systemGray5: ColorValue
+  /**
+   * PlatformColor("systemGray6")
+   */
+  systemGray6: ColorValue
+  /**
+   * PlatformColor("label")
+   */
+  label: ColorValue
+  /**
+   * PlatformColor("secondaryLabel")
+   */
+  secondaryLabel: ColorValue
+  /**
+   * PlatformColor("tertiaryLabel")
+   */
+  tertiaryLabel: ColorValue
+  /**
+   * PlatformColor("quaternaryLabel")
+   */
+  quaternaryLabel: ColorValue
+  /**
+   * PlatformColor("systemFill")
+   */
+  systemFill: ColorValue
+  /**
+   * PlatformColor("secondarySystemFill")
+   */
+  secondarySystemFill: ColorValue
+  /**
+   * PlatformColor("tertiarySystemFill")
+   */
+  tertiarySystemFill: ColorValue
+  /**
+   * PlatformColor("quaternarySystemFill")
+   */
+  quaternarySystemFill: ColorValue
+  /**
+   * PlatformColor("placeholderText")
+   */
+  placeholderText: ColorValue
+  /**
+   * PlatformColor("systemBackground")
+   */
+  systemBackground: ColorValue
+  /**
+   * PlatformColor("secondarySystemBackground")
+   */
+  secondarySystemBackground: ColorValue
+  /**
+   * PlatformColor("tertiarySystemBackground")
+   */
+  tertiarySystemBackground: ColorValue
+  /**
+   * PlatformColor("systemGroupedBackground")
+   */
+  systemGroupedBackground: ColorValue
+  /**
+   * PlatformColor("secondarySystemGroupedBackground")
+   */
+  secondarySystemGroupedBackground: ColorValue
+  /**
+   * PlatformColor("tertiarySystemGroupedBackground")
+   */
+  tertiarySystemGroupedBackground: ColorValue
+  /**
+   * PlatformColor("separator")
+   */
+  separator: ColorValue
+  /**
+   * PlatformColor("opaqueSeparator")
+   */
+  opaqueSeparator: ColorValue
+  /**
+   * PlatformColor("link")
+   */
+  link: ColorValue
+  /**
+   * PlatformColor("darkText")
+   */
+  darkText: ColorValue
+  /**
+   * PlatformColor("lightText")
+   */
+  lightText: ColorValue
+}

package/src/color/materialColor.native.ts

@@ -0,0 +1,15 @@
+import { NativeModules, Platform, Appearance } from 'react-native'
+
+const { VxrnNative } = NativeModules
+
+export function Material3DynamicColor(name: string): string | null {
+  if (Platform.OS !== 'android' || !VxrnNative) return null
+  const scheme = Appearance.getColorScheme()
+  return VxrnNative.Material3DynamicColor(name, scheme ?? 'unspecified')
+}
+
+export function Material3Color(name: string): string | null {
+  if (Platform.OS !== 'android' || !VxrnNative) return null
+  const scheme = Appearance.getColorScheme()
+  return VxrnNative.Material3Color(name, scheme ?? 'unspecified')
+}

package/src/color/materialColor.ts

@@ -0,0 +1,7 @@
+export function Material3DynamicColor(_name: string): string | null {
+  return null
+}
+
+export function Material3Color(_name: string): string | null {
+  return null
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// @vxrn/native - native navigation features for One
+// adapted from expo-router (MIT license) - https://github.com/expo/expo
+
+export { Color } from './color'
+export type { ColorType } from './color'
+
+export {
+  ZoomTransitionSource,
+  ZoomTransitionEnabler,
+  ZoomTransitionAlignmentRectDetector,
+} from './zoom'
+
+export { ToolbarHost, ToolbarItem } from './toolbar'
+export type { ToolbarHostProps, ToolbarItemProps } from './toolbar'
+
+export { MenuAction } from './menu'
+export type { MenuActionProps } from './menu'
+
+export { SplitView } from './split-view'
+export type { SplitViewProps, SplitViewColumnProps } from './split-view'

package/src/menu/index.native.tsx

@@ -0,0 +1,28 @@
+import { Platform, requireNativeComponent, type ViewProps } from 'react-native'
+import type { MenuActionProps } from './types'
+
+export type { MenuActionProps } from './types'
+
+const isAvailable = Platform.OS === 'ios' && !Platform.isTV
+
+const MenuActionNative = isAvailable
+  ? requireNativeComponent<
+      ViewProps &
+        Omit<MenuActionProps, 'image' | 'onSelected'> & {
+          imageSource?: any
+          onSelected?: (event: any) => void
+        }
+    >('VxrnMenuAction')
+  : null
+
+export function MenuAction(props: MenuActionProps) {
+  if (!MenuActionNative) return null
+  const { image, onSelected, ...rest } = props
+  return (
+    <MenuActionNative
+      {...rest}
+      imageSource={image}
+      onSelected={onSelected ? () => onSelected() : undefined}
+    />
+  )
+}

package/src/menu/index.ts

@@ -0,0 +1,7 @@
+export type { MenuActionProps } from './types'
+
+import type { MenuActionProps } from './types'
+
+export function MenuAction(_props: MenuActionProps) {
+  return null
+}

package/src/menu/types.ts

@@ -0,0 +1,32 @@
+import type { ColorValue, ImageSourcePropType } from 'react-native'
+import type { BasicTextStyle } from '../toolbar/types'
+
+export interface MenuActionProps {
+  identifier: string
+  title: string
+  label?: string
+  icon?: string
+  xcassetName?: string
+  image?: ImageSourcePropType
+  imageRenderingMode?: 'template' | 'original'
+  children?: React.ReactNode
+  disabled?: boolean
+  destructive?: boolean
+  discoverabilityLabel?: string
+  subtitle?: string
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  displayAsPalette?: boolean
+  displayInline?: boolean
+  preferredElementSize?: 'auto' | 'small' | 'medium' | 'large'
+  isOn?: boolean
+  keepPresented?: boolean
+  hidden?: boolean
+  tintColor?: ColorValue
+  barButtonItemStyle?: 'plain' | 'prominent'
+  sharesBackground?: boolean
+  hidesSharedBackground?: boolean
+  onSelected?: () => void
+  singleSelection?: boolean
+  titleStyle?: BasicTextStyle
+}

package/src/split-view/index.ts

@@ -0,0 +1,2 @@
+export { SplitView } from './split-view'
+export type { SplitViewProps, SplitViewColumnProps } from './split-view'

package/src/split-view/split-view.tsx

@@ -0,0 +1,80 @@
+// adapted from expo-router (MIT license) - https://github.com/expo/expo
+import React, { createContext, isValidElement, useContext, type ReactNode } from 'react'
+import { Platform } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { Split, type SplitHostProps } from 'react-native-screens/experimental'
+
+const IsWithinSplitViewContext = createContext(false)
+
+export interface SplitViewColumnProps {
+  children?: React.ReactNode
+}
+
+function SplitViewColumnComponent(props: SplitViewColumnProps) {
+  return (
+    <Split.Column>
+      <SafeAreaProvider>{props.children}</SafeAreaProvider>
+    </Split.Column>
+  )
+}
+
+function SplitViewInspectorComponent(props: SplitViewColumnProps) {
+  return <Split.Inspector>{props.children}</Split.Inspector>
+}
+
+export interface SplitViewProps extends Omit<SplitHostProps, 'children'> {
+  children?: ReactNode
+  /** slot component to render for the main content area */
+  slot?: React.ComponentType
+}
+
+function SplitViewNavigator({
+  children,
+  slot: Slot,
+  ...splitViewHostProps
+}: SplitViewProps) {
+  if (useContext(IsWithinSplitViewContext)) {
+    throw new Error('There can only be one SplitView in the navigation hierarchy.')
+  }
+
+  if (Platform.OS !== 'ios') {
+    console.warn('SplitView is only supported on iOS.')
+    return Slot ? <Slot /> : null
+  }
+
+  const allChildrenArray = React.Children.toArray(children)
+  const columnChildren = allChildrenArray.filter(
+    (child) => isValidElement(child) && child.type === SplitViewColumnComponent
+  )
+  const inspectorChildren = allChildrenArray.filter(
+    (child) => isValidElement(child) && child.type === SplitViewInspectorComponent
+  )
+  const numberOfSidebars = columnChildren.length
+
+  if (numberOfSidebars > 2) {
+    throw new Error('There can only be two SplitView.Column in the SplitView.')
+  }
+
+  if (numberOfSidebars + inspectorChildren.length === 0) {
+    console.warn('No SplitView.Column found in SplitView.')
+    return Slot ? <Slot /> : null
+  }
+
+  return (
+    <IsWithinSplitViewContext value>
+      <Split.Host
+        key={numberOfSidebars + inspectorChildren.length}
+        {...splitViewHostProps}
+      >
+        {columnChildren}
+        <Split.Column>{Slot ? <Slot /> : null}</Split.Column>
+        {inspectorChildren}
+      </Split.Host>
+    </IsWithinSplitViewContext>
+  )
+}
+
+export const SplitView = Object.assign(SplitViewNavigator, {
+  Column: SplitViewColumnComponent,
+  Inspector: SplitViewInspectorComponent,
+})

package/src/toolbar/index.native.tsx

@@ -0,0 +1,39 @@
+import { requireNativeComponent, type ViewProps } from 'react-native'
+
+import type { ToolbarHostProps, ToolbarItemProps } from './types'
+
+export type { ToolbarHostProps, ToolbarItemProps, BasicTextStyle } from './types'
+
+const ToolbarHostNative = requireNativeComponent<
+  ViewProps & { children?: React.ReactNode }
+>('VxrnToolbarHost')
+
+export function ToolbarHost(props: ToolbarHostProps) {
+  return (
+    <ToolbarHostNative
+      {...props}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        backgroundColor: 'transparent',
+      }}
+    />
+  )
+}
+
+const ToolbarItemNative: React.ComponentType<any> =
+  requireNativeComponent('VxrnToolbarItem')
+
+export function ToolbarItem(props: ToolbarItemProps) {
+  const { image, onSelected, ...rest } = props
+  return (
+    <ToolbarItemNative
+      {...rest}
+      imageSource={image}
+      onSelected={onSelected ? () => onSelected() : undefined}
+    />
+  )
+}

package/src/toolbar/index.ts

@@ -0,0 +1,11 @@
+export type { ToolbarHostProps, ToolbarItemProps, BasicTextStyle } from './types'
+
+import type { ToolbarHostProps, ToolbarItemProps } from './types'
+
+export function ToolbarHost(_props: ToolbarHostProps) {
+  return null
+}
+
+export function ToolbarItem(_props: ToolbarItemProps) {
+  return null
+}

package/src/toolbar/types.ts

@@ -0,0 +1,39 @@
+import type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native'
+
+export interface BasicTextStyle {
+  fontFamily?: string
+  fontSize?: number
+  fontWeight?: TextStyle['fontWeight']
+  color?: ColorValue
+}
+
+export interface ToolbarHostProps {
+  children?: React.ReactNode
+}
+
+export interface ToolbarItemProps {
+  children?: React.ReactNode
+  identifier: string
+  title?: string
+  systemImageName?: string
+  xcassetName?: string
+  image?: ImageSourcePropType
+  imageRenderingMode?: 'template' | 'original'
+  type?: 'normal' | 'fixedSpacer' | 'fluidSpacer' | 'searchBar'
+  tintColor?: ColorValue
+  hidesSharedBackground?: boolean
+  sharesBackground?: boolean
+  barButtonItemStyle?: 'plain' | 'prominent'
+  width?: number
+  hidden?: boolean
+  selected?: boolean
+  badgeConfiguration?: {
+    value?: string
+    backgroundColor?: ColorValue
+  } & BasicTextStyle
+  titleStyle?: BasicTextStyle
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  disabled?: boolean
+  onSelected?: () => void
+}

package/src/zoom/index.native.tsx

@@ -0,0 +1,56 @@
+import { Platform, requireNativeComponent, type ViewProps } from 'react-native'
+
+import type {
+  ZoomTransitionSourceProps,
+  ZoomTransitionEnablerProps,
+  ZoomTransitionAlignmentRectDetectorProps,
+} from './types'
+
+export type {
+  ZoomTransitionSourceProps,
+  ZoomTransitionEnablerProps,
+  ZoomTransitionAlignmentRectDetectorProps,
+  DismissalBoundsRect,
+  SourceAlignmentRect,
+} from './types'
+
+const isAvailable = Platform.OS === 'ios' && !Platform.isTV
+
+const ZoomEnablerNative = isAvailable
+  ? requireNativeComponent<
+      ViewProps & { zoomTransitionSourceIdentifier: string; dismissalBoundsRect?: any }
+    >('VxrnZoomEnabler')
+  : null
+
+export function ZoomTransitionEnabler(props: ZoomTransitionEnablerProps) {
+  if (!ZoomEnablerNative) return null
+  return (
+    <ZoomEnablerNative
+      {...props}
+      collapsable={false}
+      style={{ position: 'absolute', width: 1, height: 1, opacity: 0 }}
+    />
+  )
+}
+
+const ZoomSourceNative = isAvailable
+  ? requireNativeComponent<ViewProps & ZoomTransitionSourceProps>('VxrnZoomSource')
+  : null
+
+export function ZoomTransitionSource(props: ZoomTransitionSourceProps) {
+  if (!ZoomSourceNative) return null
+  return <ZoomSourceNative {...props} collapsable={false} style={{ display: 'flex' }} />
+}
+
+const ZoomAlignmentNative = isAvailable
+  ? requireNativeComponent<ViewProps & { identifier: string }>('VxrnZoomAlignment')
+  : null
+
+export function ZoomTransitionAlignmentRectDetector(
+  props: ZoomTransitionAlignmentRectDetectorProps
+) {
+  if (!ZoomAlignmentNative) return null
+  return (
+    <ZoomAlignmentNative {...props} collapsable={false} style={{ display: 'flex' }} />
+  )
+}

package/src/zoom/index.ts

@@ -0,0 +1,28 @@
+// web stubs - native features return null on web
+export type {
+  ZoomTransitionSourceProps,
+  ZoomTransitionEnablerProps,
+  ZoomTransitionAlignmentRectDetectorProps,
+  DismissalBoundsRect,
+  SourceAlignmentRect,
+} from './types'
+
+import type {
+  ZoomTransitionSourceProps,
+  ZoomTransitionEnablerProps,
+  ZoomTransitionAlignmentRectDetectorProps,
+} from './types'
+
+export function ZoomTransitionEnabler(_props: ZoomTransitionEnablerProps) {
+  return null
+}
+
+export function ZoomTransitionSource(_props: ZoomTransitionSourceProps) {
+  return null
+}
+
+export function ZoomTransitionAlignmentRectDetector(
+  _props: ZoomTransitionAlignmentRectDetectorProps
+) {
+  return null
+}