react-native-mantine 0.5.0 → 0.7.0

package/src/components/Title/index.tsx

@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface TitleProps extends Omit<TextProps, 'size'> {
+export interface TitleProps extends Omit<TextProps, 'size'>, WithTextWrapperProps {
   /** Heading order (h1-h6) */
   order?: 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -16,7 +17,7 @@ export interface TitleProps extends Omit<TextProps, 'size'> {
  * Maps order prop to h1-h6 heading styles from theme
  */
 export const Title = forwardRef<any, TitleProps>((props, ref) => {
-  const { order = 1, children, style, ...others} = props;
+  const { order = 1, children, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
   const theme = useTheme();
 
   // Get heading styles from theme
@@ -29,6 +30,10 @@ export const Title = forwardRef<any, TitleProps>((props, ref) => {
     theme.headings.fontWeight ??
     700;
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Tooltip/index.tsx

@@ -4,9 +4,9 @@ import {
   TouchableWithoutFeedback,
   Animated,
   Platform,
+  Modal,
 } from 'react-native';
 import { Text } from '../Text';
-import { Portal } from '../Portal';
 import type {
   DefaultProps,
   MantineColor,
@@ -210,7 +210,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
       ? { onLongPress: show }
       : { onPress: show, onPressOut: hide };
 
-  const childWithRef = React.cloneElement(children, {
+  const childWithRef = React.cloneElement(children as React.ReactElement<any>, {
     ref: targetRef,
     ...triggerProps,
   });
@@ -219,16 +219,18 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
     <>
       {childWithRef}
       {isVisible && (
-        <Portal>
+        <Modal
+          visible={isVisible}
+          transparent
+          animationType="none"
+          onRequestClose={hide}
+          statusBarTranslucent
+        >
           <TouchableWithoutFeedback onPress={hide}>
             <View
               style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex,
+                flex: 1,
+                backgroundColor: 'transparent',
               }}
             >
               <Animated.View
@@ -238,6 +240,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
                     top: tooltipPosition.top,
                     left: tooltipPosition.left,
                     opacity,
+                    zIndex,
                   },
                 ]}
                 {...others}
@@ -250,7 +253,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
               </Animated.View>
             </View>
           </TouchableWithoutFeedback>
-        </Portal>
+        </Modal>
       )}
     </>
   );

package/src/components/TransferList/index.tsx

@@ -184,14 +184,10 @@ const defaultProps: Partial<TransferListProps> = {
 };
 
 const DefaultItem: React.FC<{ data: TransferListDataItem; selected: boolean }> = ({
-  data,
   selected,
 }) => {
   return (
-    <>
-      <Checkbox checked={selected} onChange={() => {}} />
-      <Text>{data.label}</Text>
-    </>
+    <Checkbox checked={selected} onChange={() => {}} />
   );
 };
 

package/src/components/Transition/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Animated, Easing } from 'react-native';
 import type { DefaultProps } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
@@ -83,6 +83,7 @@ export const Transition = forwardRef<any, TransitionProps>((props, ref) => {
 
   const animation = useRef(new Animated.Value(mounted ? 1 : 0)).current;
   const shouldRender = useRef(mounted);
+  const [_exited, setExited] = useState(true);
 
   useEffect(() => {
     if (mounted) {
@@ -96,6 +97,7 @@ export const Transition = forwardRef<any, TransitionProps>((props, ref) => {
         if (finished && onEntered) {
           onEntered();
         }
+        setExited(false);
       });
     } else {
       Animated.timing(animation, {
@@ -104,15 +106,25 @@ export const Transition = forwardRef<any, TransitionProps>((props, ref) => {
         easing: getEasing(timingFunction || 'ease'),
         useNativeDriver: true,
       }).start(({ finished }) => {
+        console.log('finished', finished);
         if (finished) {
           shouldRender.current = false;
           if (onExited) {
             onExited();
           }
+          setExited(true);
         }
       });
     }
-  }, [mounted, duration, exitDuration, timingFunction, onEntered, onExited, animation]);
+  }, [
+    mounted,
+    duration,
+    exitDuration,
+    timingFunction,
+    onEntered,
+    onExited,
+    animation,
+  ]);
 
   const getTransformStyle = () => {
     switch (transition) {

package/src/components/UnstyledButton/UnstyledButton.tsx

@@ -8,13 +8,15 @@ export interface UnstyledButtonProps {
   variant?: string;
   children?: React.ReactNode;
   onPress?: (payload: any) => void;
+  disabled?: boolean;
+  activeOpacity?: number;
 }
 
 export const UnstyledButton = forwardRef<
   any,
   UnstyledButtonProps & { style?: any }
 >((props, ref) => {
-  const { variant, style, children, onPress, ...others } =
+  const { variant, style, children, onPress, disabled, activeOpacity, ...others } =
     useComponentDefaultProps('UnstyledButton', {}, props);
 
   const { styles } = useStyles({
@@ -24,6 +26,8 @@ export const UnstyledButton = forwardRef<
   return (
     <TouchableOpacity
       onPress={typeof onPress === 'function' ? onPress : () => {}}
+      disabled={disabled}
+      activeOpacity={activeOpacity !== undefined ? activeOpacity : 0.7}
     >
       <BoxView ref={ref} style={[styles.root, style]} {...others}>
         {children}

package/src/components/index.tsx

@@ -6,6 +6,7 @@ export * from './Button';
 export * from './UnstyledButton';
 export * from './ActionIcon';
 export * from './Loader';
+export * from './Icon';
 
 // Phase 1 components
 export * from './Center';
@@ -35,7 +36,6 @@ export * from './Radio';
 
 // Phase 3 components - Foundation & Utilities
 export * from './Overlay';
-export * from './Portal';
 
 // Phase 3 components - Interactive Components
 export * from './Modal';

package/src/theme/functions/attach-functions.ts

@@ -5,10 +5,13 @@ export function attachFunctions(themeBase: any): any {
     ...themeBase,
     fn: {
       radius: fns.radius(themeBase),
+      rgba: fns.rgba(themeBase),
+      size: fns.size(themeBase),
       variant: fns.variant(themeBase),
       themeColor: (color: string, shade?: number) =>
         fns.themeColor({ theme: themeBase, color, shade }),
       fontStyles: fns.fontStyles(themeBase),
+      inputFontStyles: fns.inputFontStyles(themeBase),
       focusStyles: fns.focusStyles(themeBase),
       placeholderStyles: fns.placeholderStyles(themeBase),
       cover: fns.cover(themeBase),

package/src/theme/functions/fns/helpers.ts

@@ -4,6 +4,16 @@ export const fontStyles = (theme: MantineTheme) => () => ({
   fontFamily: theme.fontFamily,
 });
 
+/**
+ * Returns font styles specifically for input components
+ * Uses fontFamilyInput if available, otherwise falls back to fontFamily
+ */
+export const inputFontStyles = (theme: MantineTheme) => () => {
+  return {
+    fontFamily: theme.fontFamilyInput || theme.fontFamily,
+  };
+};
+
 export const focusStyles = (_theme: MantineTheme) => () => ({
   // Focus styles for accessibility
   // In React Native, we typically don't use outline
@@ -15,13 +25,15 @@ export const placeholderStyles = (_theme: MantineTheme) => () => ({
   opacity: 0.6,
 });
 
-export const cover = (_theme: MantineTheme) => (offset: number = 0) => ({
-  position: 'absolute' as const,
-  top: offset,
-  right: offset,
-  bottom: offset,
-  left: offset,
-});
+export const cover =
+  (_theme: MantineTheme) =>
+  (offset: number = 0) => ({
+    position: 'absolute' as const,
+    top: offset,
+    right: offset,
+    bottom: offset,
+    left: offset,
+  });
 
 export const hover = (_theme: MantineTheme) => (styles: any) => ({
   // Hover styles (primarily for web, limited support in React Native)

package/src/theme/functions/fns/index.ts

@@ -1,10 +1,14 @@
 import { radius } from './radius';
+import { rgba } from './rgba';
+import { size } from './size';
 import { themeColor } from './theme-color/theme-color';
 import { variant } from './variant';
 import * as helpers from './helpers';
 
 export const fns = {
   radius,
+  rgba,
+  size,
   variant,
   themeColor,
   ...helpers,

package/src/theme/functions/fns/rgba.ts

@@ -0,0 +1,45 @@
+/**
+ * Converts a hex or rgb color string to rgba with the specified alpha value
+ * @param color - The color string (hex or rgb)
+ * @param alpha - Alpha value between 0 and 1
+ * @returns rgba color string
+ */
+export function rgba(_theme: any) {
+  return (color: string, alpha: number): string => {
+    // If it's already an rgba string, replace the alpha
+    if (color.startsWith('rgba')) {
+      return color.replace(/[\d.]+\)$/g, `${alpha})`);
+    }
+
+    // If it's an rgb string, convert to rgba
+    if (color.startsWith('rgb(')) {
+      return color.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`);
+    }
+
+    // If it's a hex color, convert to rgba
+    if (color.startsWith('#')) {
+      const hex = color.replace('#', '');
+      let r = 0;
+      let g = 0;
+      let b = 0;
+
+      if (hex.length === 3) {
+        r = parseInt(hex[0]! + hex[0]!, 16);
+        g = parseInt(hex[1]! + hex[1]!, 16);
+        b = parseInt(hex[2]! + hex[2]!, 16);
+      } else if (hex.length === 6) {
+        r = parseInt(hex.slice(0, 2), 16);
+        g = parseInt(hex.slice(2, 4), 16);
+        b = parseInt(hex.slice(4, 6), 16);
+      } else {
+        // Invalid hex, return as is with alpha
+        return `rgba(0, 0, 0, ${alpha})`;
+      }
+
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+
+    // If we can't parse it, return as is
+    return color;
+  };
+}

package/src/theme/functions/fns/size.ts

@@ -0,0 +1,14 @@
+import type { MantineNumberSize } from '../../types';
+import { getSize } from '../../get-size';
+
+export function size(_theme: any) {
+  return <Sizes extends Record<any, any>>({
+    size,
+    sizes,
+  }: {
+    size: MantineNumberSize;
+    sizes: Sizes;
+  }): number => {
+    return getSize({ size, sizes }) as number;
+  };
+}

package/src/theme/utils/index.ts

@@ -0,0 +1,2 @@
+export { rem, em } from './rem';
+export { withTextWrapper, type WithTextWrapperProps } from './withTextWrapper';

package/src/theme/utils/withTextWrapper.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { Text } from '../../components/Text';
+import type { TextProps } from '../../components/Text';
+
+/**
+ * Conditionally wraps content in a Text component based on the withTextWrapper prop.
+ *
+ * In React Native, all text must be wrapped in a Text component. However, some
+ * components may need flexibility to render with or without this wrapper depending
+ * on whether their content is text or other components (like icons, views, etc.).
+ *
+ * @param children - The content to potentially wrap
+ * @param shouldWrap - Whether to wrap the content in a Text component
+ * @param textStyle - Optional style to apply to the Text wrapper
+ * @param textProps - Optional additional props to pass to the Text component
+ * @returns The children wrapped in Text if shouldWrap is true, otherwise just the children
+ *
+ * @example
+ * // Wrap text content
+ * withTextWrapper('Hello', true, styles.text)
+ *
+ * @example
+ * // Don't wrap components
+ * withTextWrapper(<Icon />, false)
+ *
+ * @example
+ * // Default behavior (wrap)
+ * withTextWrapper('Text', true, styles.text, { numberOfLines: 1 })
+ */
+export function withTextWrapper(
+  children: ReactNode,
+  shouldWrap: boolean = true,
+  textStyle?: any,
+  textProps?: Omit<TextProps, 'children' | 'style'>
+): ReactNode {
+  if (!shouldWrap) {
+    return children;
+  }
+
+  return (
+    <Text style={textStyle} {...textProps}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * Type helper for components that support the withTextWrapper pattern.
+ * Add this to your component props interface.
+ */
+export interface WithTextWrapperProps {
+  /**
+   * If false, children will not be wrapped in a Text component.
+   * This is useful when the children contain non-text elements like icons or custom components.
+   * @default true
+   */
+  withTextWrapper?: boolean;
+}

package/lib/commonjs/components/Portal/index.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PortalProvider = exports.Portal = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-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 PortalContext = /*#__PURE__*/(0, _react.createContext)(null);
-const PortalProvider = ({
-  children
-}) => {
-  const [portals, setPortals] = (0, _react.useState)(new Map());
-  const nextKey = _react.default.useRef(0);
-  const mount = (0, _react.useCallback)(child => {
-    const key = nextKey.current++;
-    setPortals(prev => {
-      const next = new Map(prev);
-      next.set(key, child);
-      return next;
-    });
-    return key;
-  }, []);
-  const unmount = (0, _react.useCallback)(key => {
-    setPortals(prev => {
-      const next = new Map(prev);
-      next.delete(key);
-      return next;
-    });
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PortalContext.Provider, {
-    value: {
-      mount,
-      unmount
-    },
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: _reactNative.StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
-      children: Array.from(portals.entries()).map(([key, child]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-        children: child
-      }, key))
-    })]
-  });
-};
-exports.PortalProvider = PortalProvider;
-const Portal = ({
-  children
-}) => {
-  const context = (0, _react.useContext)(PortalContext);
-  const [, setKey] = (0, _react.useState)(null);
-  _react.default.useEffect(() => {
-    if (!context) {
-      console.warn('Portal used without PortalProvider');
-      return;
-    }
-    const portalKey = context.mount(children);
-    setKey(portalKey);
-    return () => {
-      context.unmount(portalKey);
-    };
-  }, [children, context]);
-  return null;
-};
-exports.Portal = Portal;
-Portal.displayName = 'Portal';
-PortalProvider.displayName = 'PortalProvider';
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Portal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PortalContext","createContext","PortalProvider","children","portals","setPortals","useState","Map","nextKey","React","useRef","mount","useCallback","child","key","current","prev","next","unmount","delete","jsxs","Provider","value","jsx","View","style","StyleSheet","absoluteFill","pointerEvents","Array","from","entries","map","Fragment","exports","Portal","context","useContext","setKey","useEffect","console","warn","portalKey","displayName"],"sourceRoot":"../../../../src","sources":["components/Portal/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Portal/index.js

@@ -1,62 +0,0 @@
-"use strict";
-
-import React, { createContext, useContext, useState, useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PortalContext = /*#__PURE__*/createContext(null);
-export const PortalProvider = ({
-  children
-}) => {
-  const [portals, setPortals] = useState(new Map());
-  const nextKey = React.useRef(0);
-  const mount = useCallback(child => {
-    const key = nextKey.current++;
-    setPortals(prev => {
-      const next = new Map(prev);
-      next.set(key, child);
-      return next;
-    });
-    return key;
-  }, []);
-  const unmount = useCallback(key => {
-    setPortals(prev => {
-      const next = new Map(prev);
-      next.delete(key);
-      return next;
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(PortalContext.Provider, {
-    value: {
-      mount,
-      unmount
-    },
-    children: [children, /*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
-      children: Array.from(portals.entries()).map(([key, child]) => /*#__PURE__*/_jsx(React.Fragment, {
-        children: child
-      }, key))
-    })]
-  });
-};
-export const Portal = ({
-  children
-}) => {
-  const context = useContext(PortalContext);
-  const [, setKey] = useState(null);
-  React.useEffect(() => {
-    if (!context) {
-      console.warn('Portal used without PortalProvider');
-      return;
-    }
-    const portalKey = context.mount(children);
-    setKey(portalKey);
-    return () => {
-      context.unmount(portalKey);
-    };
-  }, [children, context]);
-  return null;
-};
-Portal.displayName = 'Portal';
-PortalProvider.displayName = 'PortalProvider';
-//# sourceMappingURL=index.js.map

package/lib/module/components/Portal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","createContext","useContext","useState","useCallback","View","StyleSheet","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalProvider","children","portals","setPortals","Map","nextKey","useRef","mount","child","key","current","prev","next","set","unmount","delete","Provider","value","style","absoluteFill","pointerEvents","Array","from","entries","map","Fragment","Portal","context","setKey","useEffect","console","warn","portalKey","displayName"],"sourceRoot":"../../../../src","sources":["components/Portal/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAC/E,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOhD,MAAMC,aAAa,gBAAGV,aAAa,CAA4B,IAAI,CAAC;AAMpE,OAAO,MAAMW,cAA6C,GAAGA,CAAC;EAAEC;AAAS,CAAC,KAAK;EAC7E,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGZ,QAAQ,CAA+B,IAAIa,GAAG,CAAC,CAAC,CAAC;EAC/E,MAAMC,OAAO,GAAGjB,KAAK,CAACkB,MAAM,CAAC,CAAC,CAAC;EAE/B,MAAMC,KAAK,GAAGf,WAAW,CAAEgB,KAAsB,IAAK;IACpD,MAAMC,GAAG,GAAGJ,OAAO,CAACK,OAAO,EAAE;IAC7BP,UAAU,CAAEQ,IAAI,IAAK;MACnB,MAAMC,IAAI,GAAG,IAAIR,GAAG,CAACO,IAAI,CAAC;MAC1BC,IAAI,CAACC,GAAG,CAACJ,GAAG,EAAED,KAAK,CAAC;MACpB,OAAOI,IAAI;IACb,CAAC,CAAC;IACF,OAAOH,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,OAAO,GAAGtB,WAAW,CAAEiB,GAAW,IAAK;IAC3CN,UAAU,CAAEQ,IAAI,IAAK;MACnB,MAAMC,IAAI,GAAG,IAAIR,GAAG,CAACO,IAAI,CAAC;MAC1BC,IAAI,CAACG,MAAM,CAACN,GAAG,CAAC;MAChB,OAAOG,IAAI;IACb,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEd,KAAA,CAACC,aAAa,CAACiB,QAAQ;IAACC,KAAK,EAAE;MAAEV,KAAK;MAAEO;IAAQ,CAAE;IAAAb,QAAA,GAC/CA,QAAQ,eACTL,IAAA,CAACH,IAAI;MAACyB,KAAK,EAAExB,UAAU,CAACyB,YAAa;MAACC,aAAa,EAAC,UAAU;MAAAnB,QAAA,EAC3DoB,KAAK,CAACC,IAAI,CAACpB,OAAO,CAACqB,OAAO,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC,CAACf,GAAG,EAAED,KAAK,CAAC,kBAC9CZ,IAAA,CAACR,KAAK,CAACqC,QAAQ;QAAAxB,QAAA,EAAYO;MAAK,GAAXC,GAA4B,CAClD;IAAC,CACE,CAAC;EAAA,CACe,CAAC;AAE7B,CAAC;AAMD,OAAO,MAAMiB,MAA6B,GAAGA,CAAC;EAAEzB;AAAS,CAAC,KAAK;EAC7D,MAAM0B,OAAO,GAAGrC,UAAU,CAACS,aAAa,CAAC;EACzC,MAAM,GAAG6B,MAAM,CAAC,GAAGrC,QAAQ,CAAgB,IAAI,CAAC;EAEhDH,KAAK,CAACyC,SAAS,CAAC,MAAM;IACpB,IAAI,CAACF,OAAO,EAAE;MACZG,OAAO,CAACC,IAAI,CAAC,oCAAoC,CAAC;MAClD;IACF;IAEA,MAAMC,SAAS,GAAGL,OAAO,CAACpB,KAAK,CAACN,QAAQ,CAAC;IACzC2B,MAAM,CAACI,SAAS,CAAC;IAEjB,OAAO,MAAM;MACXL,OAAO,CAACb,OAAO,CAACkB,SAAS,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAAC/B,QAAQ,EAAE0B,OAAO,CAAC,CAAC;EAEvB,OAAO,IAAI;AACb,CAAC;AAEDD,MAAM,CAACO,WAAW,GAAG,QAAQ;AAC7BjC,cAAc,CAACiC,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/typescript/commonjs/src/components/Portal/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface PortalProviderProps {
-    children: React.ReactNode;
-}
-export declare const PortalProvider: React.FC<PortalProviderProps>;
-export interface PortalProps {
-    children: React.ReactNode;
-}
-export declare const Portal: React.FC<PortalProps>;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/src/components/Portal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCxD,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}

package/lib/typescript/module/src/components/Portal/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface PortalProviderProps {
-    children: React.ReactNode;
-}
-export declare const PortalProvider: React.FC<PortalProviderProps>;
-export interface PortalProps {
-    children: React.ReactNode;
-}
-export declare const Portal: React.FC<PortalProps>;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/Portal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCxD,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}

package/src/components/Portal/index.tsx

@@ -1,75 +0,0 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-
-interface PortalContextValue {
-  mount: (child: React.ReactNode) => number;
-  unmount: (key: number) => void;
-}
-
-const PortalContext = createContext<PortalContextValue | null>(null);
-
-export interface PortalProviderProps {
-  children: React.ReactNode;
-}
-
-export const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
-  const [portals, setPortals] = useState<Map<number, React.ReactNode>>(new Map());
-  const nextKey = React.useRef(0);
-
-  const mount = useCallback((child: React.ReactNode) => {
-    const key = nextKey.current++;
-    setPortals((prev) => {
-      const next = new Map(prev);
-      next.set(key, child);
-      return next;
-    });
-    return key;
-  }, []);
-
-  const unmount = useCallback((key: number) => {
-    setPortals((prev) => {
-      const next = new Map(prev);
-      next.delete(key);
-      return next;
-    });
-  }, []);
-
-  return (
-    <PortalContext.Provider value={{ mount, unmount }}>
-      {children}
-      <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
-        {Array.from(portals.entries()).map(([key, child]) => (
-          <React.Fragment key={key}>{child}</React.Fragment>
-        ))}
-      </View>
-    </PortalContext.Provider>
-  );
-};
-
-export interface PortalProps {
-  children: React.ReactNode;
-}
-
-export const Portal: React.FC<PortalProps> = ({ children }) => {
-  const context = useContext(PortalContext);
-  const [, setKey] = useState<number | null>(null);
-
-  React.useEffect(() => {
-    if (!context) {
-      console.warn('Portal used without PortalProvider');
-      return;
-    }
-
-    const portalKey = context.mount(children);
-    setKey(portalKey);
-
-    return () => {
-      context.unmount(portalKey);
-    };
-  }, [children, context]);
-
-  return null;
-};
-
-Portal.displayName = 'Portal';
-PortalProvider.displayName = 'PortalProvider';