react-native-mantine 0.6.0 → 0.8.0

package/lib/typescript/module/src/hooks/use-form/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../../../src/hooks/use-form/useForm.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAQV,YAAY,EACZ,iBAAiB,EAClB,MAAM,SAAS,CAAC;AA4DjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,OAAO,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAChF,aAA4B,EAC5B,aAAkB,EAClB,cAAmB,EACnB,YAAiB,EACjB,QAAQ,EAAE,eAAe,EACzB,uBAA8B,EAC9B,qBAA6B,EAC7B,mBAA2B,EAC3B,eAA4C,GAC7C,GAAE,YAAY,CAAC,MAAM,CAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAuUvD"}

package/lib/typescript/module/src/hooks/use-form/validators.d.ts

@@ -0,0 +1,41 @@
+import type { FormValidator } from './types';
+/**
+ * Built-in validators
+ */
+/**
+ * Validates that a value is not empty
+ */
+export declare const isNotEmpty: (message?: string) => FormValidator<any>;
+/**
+ * Validates minimum length
+ */
+export declare const minLength: (min: number, message?: string) => FormValidator<string>;
+/**
+ * Validates maximum length
+ */
+export declare const maxLength: (max: number, message?: string) => FormValidator<string>;
+/**
+ * Validates that value matches a pattern
+ */
+export declare const matches: (pattern: RegExp, message?: string) => FormValidator<string>;
+/**
+ * Validates email format
+ */
+export declare const isEmail: (message?: string) => FormValidator<string>;
+/**
+ * Validates minimum value
+ */
+export declare const min: (minValue: number, message?: string) => FormValidator<number>;
+/**
+ * Validates maximum value
+ */
+export declare const max: (maxValue: number, message?: string) => FormValidator<number>;
+/**
+ * Validates that value is in a range
+ */
+export declare const inRange: (minValue: number, maxValue: number, message?: string) => FormValidator<number>;
+/**
+ * Validates that value is in a list
+ */
+export declare const isInArray: <T>(array: T[], message?: string) => FormValidator<T>;
+//# sourceMappingURL=validators.d.ts.map

package/lib/typescript/module/src/hooks/use-form/validators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../../../src/hooks/use-form/validators.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,gBAAkC,KAAG,aAAa,CAAC,GAAG,CAahF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GACpB,KAAK,MAAM,EACX,UAAU,MAAM,KACf,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GACpB,KAAK,MAAM,EACX,UAAU,MAAM,KACf,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAClB,SAAS,MAAM,EACf,gBAA0B,KACzB,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,gBAAyB,KAAG,aAAa,CAAC,MAAM,CAGvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,GAAG,GACd,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,GAAG,GACd,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAClB,UAAU,MAAM,EAChB,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,aAAa,CAAC,MAAM,CAQtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EACzB,OAAO,CAAC,EAAE,EACV,gBAAyB,KACxB,aAAa,CAAC,CAAC,CAOjB,CAAC"}

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

@@ -1,5 +1,6 @@
 export * from './theme';
 export * from './components';
+export * from './hooks';
 export type * from './theme/theme';
 export type * from './theme/types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,mBAAmB,eAAe,CAAC;AACnC,mBAAmB,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,mBAAmB,eAAe,CAAC;AACnC,mBAAmB,eAAe,CAAC"}

package/lib/typescript/module/src/theme/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { rem, em } from './rem';
+export { withTextWrapper, type WithTextWrapperProps } from './withTextWrapper';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/theme/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/typescript/module/src/theme/utils/withTextWrapper.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+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 declare function withTextWrapper(children: ReactNode, shouldWrap?: boolean, textStyle?: any, textProps?: Omit<TextProps, 'children' | 'style'>): ReactNode;
+/**
+ * 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;
+}
+//# sourceMappingURL=withTextWrapper.d.ts.map

package/lib/typescript/module/src/theme/utils/withTextWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTextWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/withTextWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,UAAU,GAAE,OAAc,EAC1B,SAAS,CAAC,EAAE,GAAG,EACf,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,GAChD,SAAS,CAUX;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/Anchor/index.tsx

@@ -10,8 +10,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface AnchorProps extends DefaultProps {
+export interface AnchorProps extends DefaultProps, WithTextWrapperProps {
   /** Anchor text color from theme */
   color?: MantineColor;
 
@@ -103,10 +104,11 @@ const defaultProps: Partial<AnchorProps> = {
   weight: '400',
   underline: true,
   variant: 'link',
+  withTextWrapper: true,
 };
 
 export const Anchor = forwardRef<RNText, AnchorProps>((props, ref) => {
-  const { color, size, weight, underline, variant, href, onPress, children, style, ...others} =
+  const { color, size, weight, underline, variant, href, onPress, children, style, withTextWrapper: shouldWrapInText, ...others} =
     useComponentDefaultProps('Anchor', defaultProps, props);
 
   const { styles, sx} = useStyles(
@@ -124,6 +126,10 @@ export const Anchor = forwardRef<RNText, AnchorProps>((props, ref) => {
     }
   };
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Badge/index.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import { Text } from '../Text';
 import { BoxView } from '../BoxView';
 import type {
   DefaultProps,
@@ -11,8 +10,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface BadgeProps extends DefaultProps {
+export interface BadgeProps extends DefaultProps, WithTextWrapperProps {
   /** Badge color from theme */
   color?: MantineColor;
 
@@ -157,6 +157,7 @@ const defaultProps: Partial<BadgeProps> = {
   size: 'md',
   radius: 'xl',
   fullWidth: false,
+  withTextWrapper: true,
 };
 
 export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
@@ -170,6 +171,7 @@ export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
     rightSection,
     children,
     style,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Badge', defaultProps, props);
 
@@ -183,7 +185,7 @@ export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
       <BoxView style={styles.inner}>
         {variant === 'dot' && <BoxView style={styles.dot} />}
         {leftSection && <BoxView style={styles.leftSection}>{leftSection}</BoxView>}
-        <Text style={styles.label}>{children}</Text>
+        {withTextWrapper(children, shouldWrapInText, styles.label)}
         {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
       </BoxView>
     </BoxView>

package/src/components/Blockquote/index.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -9,8 +8,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface BlockquoteProps extends DefaultProps {
+export interface BlockquoteProps extends DefaultProps, WithTextWrapperProps {
   /** Blockquote color from theme */
   color?: MantineColor;
 
@@ -80,10 +80,11 @@ const useStyles = createStyles(
 const defaultProps: Partial<BlockquoteProps> = {
   color: 'blue',
   radius: 'sm',
+  withTextWrapper: true,
 };
 
 export const Blockquote = forwardRef<any, BlockquoteProps>((props, ref) => {
-  const { color, icon, cite, radius, children, style} =
+  const { color, icon, cite, radius, children, style, withTextWrapper: shouldWrapInText} =
     useComponentDefaultProps('Blockquote', defaultProps, props);
 
   const { styles, sx, ...others} = useStyles({ color, radius}, { name: 'Blockquote' }) as any;
@@ -93,8 +94,8 @@ export const Blockquote = forwardRef<any, BlockquoteProps>((props, ref) => {
       <BoxView style={styles.inner}>
         {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
         <BoxView style={styles.body}>
-          <Text style={styles.content}>{children}</Text>
-          {cite && <Text style={styles.cite}>{cite}</Text>}
+          {withTextWrapper(children, shouldWrapInText, styles.content)}
+          {cite && withTextWrapper(cite, shouldWrapInText, styles.cite)}
         </BoxView>
       </BoxView>
     </BoxView>

package/src/components/Button/index.tsx

@@ -13,11 +13,11 @@ import { ActivityIndicator, View } from 'react-native';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import useStyles from './Button.styles';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 export type ButtonStylesNames = any;
 
-export interface ButtonProps extends DefaultProps {
+export interface ButtonProps extends DefaultProps, WithTextWrapperProps {
   /** Predefined button size */
   size?: MantineSize;
 
@@ -69,8 +69,6 @@ export interface ButtonProps extends DefaultProps {
   disabled?: boolean;
 
   style?: any;
-
-  withTextWrapper?: boolean;
 }
 
 const defaultProps: Partial<ButtonProps> = {
@@ -78,6 +76,7 @@ const defaultProps: Partial<ButtonProps> = {
   type: 'button',
   variant: 'filled',
   loaderPosition: 'left',
+  withTextWrapper: true,
 };
 
 export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
@@ -99,7 +98,7 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
     loaderProps,
     gradient,
     style,
-    withTextWrapper = true,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Button', defaultProps, props);
 
@@ -142,7 +141,7 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
           {loading && loaderPosition === 'center' && (
             <BoxView style={styles.centerLoader}>{loader}</BoxView>
           )}
-          {withTextWrapper ? <Text>{children}</Text> : children}
+          {withTextWrapper(children, shouldWrapInText)}
           {(rightIcon || (loading && loaderPosition === 'right')) && (
             <BoxView style={sx(styles.icon, styles.rightIcon)}>
               {loading && loaderPosition === 'right' ? loader : rightIcon}

package/src/components/Chip/index.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -12,8 +11,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface ChipProps extends DefaultProps {
+export interface ChipProps extends DefaultProps, WithTextWrapperProps {
   /** Chip label */
   children: React.ReactNode;
 
@@ -174,6 +174,7 @@ const defaultProps: Partial<ChipProps> = {
   variant: 'filled',
   disabled: false,
   type: 'checkbox',
+  withTextWrapper: true,
 };
 
 export const Chip = forwardRef<any, ChipProps>((props, ref) => {
@@ -192,6 +193,7 @@ export const Chip = forwardRef<any, ChipProps>((props, ref) => {
     textStyle,
     value,
     type,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Chip', defaultProps, props);
 
@@ -226,7 +228,7 @@ export const Chip = forwardRef<any, ChipProps>((props, ref) => {
       {...others}
     >
       {showIcon && <BoxView style={styles.icon}>{icon}</BoxView>}
-      <Text style={sx(styles.text, textStyle)}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, sx(styles.text, textStyle))}
     </TouchableOpacity>
   );
 });

package/src/components/Code/index.tsx

@@ -3,8 +3,9 @@ import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
 import { BoxView } from '../BoxView';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface CodeProps extends Omit<TextProps, 'children'> {
+export interface CodeProps extends Omit<TextProps, 'children'>, WithTextWrapperProps {
   /** Code content */
   children?: React.ReactNode;
 
@@ -19,7 +20,7 @@ export interface CodeProps extends Omit<TextProps, 'children'> {
  * Code component renders inline code or code blocks with monospace font
  */
 export const Code = forwardRef<any, CodeProps>((props, ref) => {
-  const { children, color, block = false, style, ...others} = props;
+  const { children, color, block = false, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
 
   const theme = useTheme();
 
@@ -52,23 +53,27 @@ export const Code = forwardRef<any, CodeProps>((props, ref) => {
           },
           style,
         ]}
+        {...others}
       >
-        <Text
-          style={[
-            {
-              fontFamily: 'Courier',
-              fontSize: theme.fontSizes.sm as number || 14,
-              color: textColor,
-            },
-          ]}
-          {...others}
-        >
-          {children}
-        </Text>
+        {withTextWrapper(
+          children,
+          shouldWrapInText,
+          {
+            fontFamily: 'Courier',
+            fontSize: theme.fontSizes.sm as number || 14,
+            color: textColor,
+          }
+        )}
       </BoxView>
     );
   }
 
+  // For inline code, we need to return a component that can accept the ref
+  // So we wrap in a View-like Text component
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Group/index.tsx

@@ -1,4 +1,5 @@
 import type { ViewStyle } from 'react-native';
+import type React from 'react';
 
 import { BoxView } from '../BoxView';
 import type { ViewProps } from '../BoxView';

package/src/components/Kbd/index.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type { DefaultProps, MantineSize } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface KbdProps extends DefaultProps {
+export interface KbdProps extends DefaultProps, WithTextWrapperProps {
   /** Kbd size */
   size?: MantineSize;
 
@@ -63,10 +63,11 @@ const useStyles = createStyles(
 
 const defaultProps: Partial<KbdProps> = {
   size: 'md',
+  withTextWrapper: true,
 };
 
 export const Kbd = forwardRef<any, KbdProps>((props, ref) => {
-  const { size, children, style, ...otherProps} = useComponentDefaultProps(
+  const { size, children, style, withTextWrapper: shouldWrapInText, ...otherProps} = useComponentDefaultProps(
     'Kbd',
     defaultProps,
     props
@@ -76,7 +77,7 @@ export const Kbd = forwardRef<any, KbdProps>((props, ref) => {
 
   return (
     <BoxView ref={ref} style={sx(styles.root, style)} {...otherProps}>
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
     </BoxView>
   );
 });

package/src/components/List/index.tsx

@@ -5,6 +5,7 @@ import type { DefaultProps, SpacingValue } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 interface ListContextValue {
   type: 'ordered' | 'unordered';
@@ -59,7 +60,7 @@ export interface ListProps extends DefaultProps {
   style?: any;
 }
 
-export interface ListItemProps extends DefaultProps {
+export interface ListItemProps extends DefaultProps, WithTextWrapperProps {
   /** Item children */
   children?: React.ReactNode;
 
@@ -156,7 +157,9 @@ const defaultProps: Partial<ListProps> = {
   startIndex: 1,
 };
 
-const defaultItemProps: Partial<ListItemProps> = {};
+const defaultItemProps: Partial<ListItemProps> = {
+  withTextWrapper: true,
+};
 
 const getListMarker = (
   type: 'ordered' | 'unordered',
@@ -239,7 +242,7 @@ const ListRoot = forwardRef<any, ListProps>((props, ref) => {
 });
 
 export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
-  const { children, icon: itemIcon, style, __index, ...others} = {
+  const { children, icon: itemIcon, style, __index, withTextWrapper: shouldWrapInText, ...others} = {
     ...defaultItemProps,
     ...props,
   };
@@ -271,11 +274,7 @@ export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
     <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
       <BoxView style={styles.icon}>{renderIcon()}</BoxView>
       <BoxView style={styles.content}>
-        {typeof children === 'string' ? (
-          <Text style={styles.contentText}>{children}</Text>
-        ) : (
-          children
-        )}
+        {withTextWrapper(children, shouldWrapInText, styles.contentText)}
       </BoxView>
     </BoxView>
   );

package/src/components/Mark/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 MarkProps extends TextProps {
+export interface MarkProps extends TextProps, WithTextWrapperProps {
   /** Background color key from theme.colors or CSS color value */
   color?: string;
 
@@ -16,7 +17,7 @@ export interface MarkProps extends TextProps {
  * Default background is yellow
  */
 export const Mark = forwardRef<any, MarkProps>((props, ref) => {
-  const { children, color = 'yellow', style, ...others} = props;
+  const { children, color = 'yellow', style, withTextWrapper: shouldWrapInText = true, ...others} = props;
 
   const theme = useTheme();
 
@@ -30,6 +31,10 @@ export const Mark = forwardRef<any, MarkProps>((props, ref) => {
     return color;
   };
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Menu/index.tsx

@@ -6,7 +6,6 @@ import {
   Modal,
 } from 'react-native';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import { Divider } from '../Divider';
 import type {
   DefaultProps,
@@ -15,6 +14,7 @@ import type {
 } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 export interface MenuProps extends DefaultProps {
   /** Controlled opened state */
@@ -68,7 +68,7 @@ export interface MenuDropdownProps extends DefaultProps {
   style?: any;
 }
 
-export interface MenuItemProps extends DefaultProps {
+export interface MenuItemProps extends DefaultProps, WithTextWrapperProps {
   /** Item icon */
   icon?: React.ReactNode;
 
@@ -91,7 +91,7 @@ export interface MenuItemProps extends DefaultProps {
   style?: any;
 }
 
-export interface MenuLabelProps extends DefaultProps {
+export interface MenuLabelProps extends DefaultProps, WithTextWrapperProps {
   children: React.ReactNode;
   style?: any;
 }
@@ -198,6 +198,7 @@ const defaultMenuProps: Partial<MenuProps> = {
 
 const defaultItemProps: Partial<MenuItemProps> = {
   disabled: false,
+  withTextWrapper: true,
 };
 
 const MenuTarget: React.FC<MenuTargetProps> = ({ children }) => {
@@ -276,7 +277,7 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({ children, style, ...others
 };
 
 const MenuItem = forwardRef<any, MenuItemProps>((props, ref) => {
-  const { icon, color, children, onPress, disabled, rightSection, style, ...others } =
+  const { icon, color, children, onPress, disabled, rightSection, style, withTextWrapper: shouldWrapInText, ...others } =
     useComponentDefaultProps('MenuItem', defaultItemProps, props);
 
   const { setOpened, closeOnItemClick } = useMenuContext();
@@ -307,19 +308,19 @@ const MenuItem = forwardRef<any, MenuItemProps>((props, ref) => {
       {...others}
     >
       {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
       {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
     </TouchableOpacity>
   );
 });
 
 const MenuLabel = forwardRef<any, MenuLabelProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, ...others } = props;
   const { styles, sx } = useLabelStyles({}, { name: 'MenuLabel' }) as any;
 
   return (
     <BoxView ref={ref} style={sx(styles.label, style)} {...others}>
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
     </BoxView>
   );
 });

package/src/components/NavLink/index.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { UnstyledButton } from '../UnstyledButton';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -10,8 +9,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface NavLinkProps extends DefaultProps {
+export interface NavLinkProps extends DefaultProps, WithTextWrapperProps {
   /** Link label */
   label?: React.ReactNode;
 
@@ -156,6 +156,7 @@ const defaultProps: Partial<NavLinkProps> = {
   active: false,
   disabled: false,
   disableIfNoPress: true,
+  withTextWrapper: true,
 };
 
 export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
@@ -172,6 +173,7 @@ export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
     onPress,
     style,
     disableIfNoPress,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('NavLink', defaultProps, props);
 
@@ -192,8 +194,8 @@ export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
       >
         {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
         <BoxView style={styles.body}>
-          {label && <Text style={styles.label}>{label}</Text>}
-          {description && <Text style={styles.description}>{description}</Text>}
+          {label && withTextWrapper(label, shouldWrapInText, styles.label)}
+          {description && withTextWrapper(description, shouldWrapInText, styles.description)}
         </BoxView>
         {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
       </UnstyledButton>