@xaui/native 0.0.28 → 0.0.30

package/README.md

@@ -87,6 +87,7 @@ This table lists all public components exported by `@xaui/native` and their impo
 | `AutocompleteItem` | Suggestion item for `Autocomplete`. | `import { AutocompleteItem } from '@xaui/native/autocomplete'` |
 | `DatePicker` | Date selection input/picker. | `import { DatePicker } from '@xaui/native/datepicker'` |
 | `Typography` | Themed text component with variants. | `import { Typography } from '@xaui/native/typography'` |
+| `TextSpan` | Text group primitive that shares inherited styles across nested typography. | `import { TextSpan } from '@xaui/native/typography'` |
 | `Column` | Vertical flex layout helper. | `import { Column } from '@xaui/native/view'` |
 | `Row` | Horizontal flex layout helper. | `import { Row } from '@xaui/native/view'` |
 | `Spacer` | Flexible space element in layouts. | `import { Spacer } from '@xaui/native/view'` |

package/dist/menu/index.cjs

@@ -155,6 +155,7 @@ var Menu = ({
   trigger,
   position = "bottom",
   onDismiss,
+  onItemPress,
   children,
   customAppearance,
   maxHeight = 280
@@ -164,6 +165,17 @@ var Menu = ({
   const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
   const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
   const { opacity, scale } = useMenuAnimation(visible);
+  const handledChildren = _react2.default.Children.map(children, (child) => {
+    if (!_react2.default.isValidElement(child)) return child;
+    const { onPress, itemKey } = child.props;
+    if (!onPress && !itemKey) return child;
+    return _react2.default.cloneElement(child, {
+      onPress: (e) => {
+        _optionalChain([onPress, 'optionalCall', _5 => _5(e)]);
+        if (itemKey) _optionalChain([onItemPress, 'optionalCall', _6 => _6(itemKey)]);
+      }
+    });
+  });
   return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Modal,
     {
@@ -175,7 +187,7 @@ var Menu = ({
     /* @__PURE__ */ _react2.default.createElement(
       _reactnative.Pressable,
       {
-        style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.overlay])],
+        style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.overlay])],
         onPress: onDismiss,
         accessibilityRole: "button",
         accessibilityLabel: "Close menu"
@@ -195,10 +207,10 @@ var Menu = ({
               transform: [{ scale }],
               ...theme.shadows.md
             },
-            _optionalChain([customAppearance, 'optionalAccess', _6 => _6.container])
+            _optionalChain([customAppearance, 'optionalAccess', _8 => _8.container])
           ]
         },
-        /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _7 => _7.content]) }, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight } }, children)))
+        /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _9 => _9.content]) }, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight } }, handledChildren)))
       )
     )
   ));
@@ -269,7 +281,7 @@ var MenuItem = ({
       return /* @__PURE__ */ _react2.default.createElement(
         _reactnative.Text,
         {
-          style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.title])],
+          style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.title])],
           numberOfLines: 1
         },
         title
@@ -292,10 +304,10 @@ var MenuItem = ({
         pressed && !isDisabled && {
           backgroundColor: theme.colors.foreground + "10"
         },
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
+        _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])
       ]
     },
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.row, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.content])] }, startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.endContent }, endContent))
+    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.row, _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content])] }, startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.endContent }, endContent))
   );
 };
 

package/dist/menu/index.d.cts

@@ -34,6 +34,10 @@ type MenuProps = {
      * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
      */
     onDismiss?: () => void;
+    /**
+     * Callback fired when a MenuItem with an `itemKey` is pressed.
+     */
+    onItemPress?: (itemKey: string) => void;
     /**
      * Content of the Menu.
      */
@@ -66,6 +70,10 @@ type MenuItemCustomAppearance = {
     title?: TextStyle;
 };
 type MenuItemProps = {
+    /**
+     * Optional key emitted via Menu `onItemPress`.
+     */
+    itemKey?: string;
     /**
      * Title text for the MenuItem.
      */

package/dist/menu/index.d.ts

@@ -34,6 +34,10 @@ type MenuProps = {
      * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
      */
     onDismiss?: () => void;
+    /**
+     * Callback fired when a MenuItem with an `itemKey` is pressed.
+     */
+    onItemPress?: (itemKey: string) => void;
     /**
      * Content of the Menu.
      */
@@ -66,6 +70,10 @@ type MenuItemCustomAppearance = {
     title?: TextStyle;
 };
 type MenuItemProps = {
+    /**
+     * Optional key emitted via Menu `onItemPress`.
+     */
+    itemKey?: string;
     /**
      * Title text for the MenuItem.
      */

package/dist/menu/index.js

@@ -155,6 +155,7 @@ var Menu = ({
   trigger,
   position = "bottom",
   onDismiss,
+  onItemPress,
   children,
   customAppearance,
   maxHeight = 280
@@ -164,6 +165,17 @@ var Menu = ({
   const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
   const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
   const { opacity, scale } = useMenuAnimation(visible);
+  const handledChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const { onPress, itemKey } = child.props;
+    if (!onPress && !itemKey) return child;
+    return React.cloneElement(child, {
+      onPress: (e) => {
+        onPress?.(e);
+        if (itemKey) onItemPress?.(itemKey);
+      }
+    });
+  });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -198,7 +210,7 @@ var Menu = ({
             customAppearance?.container
           ]
         },
-        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, children)))
+        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, handledChildren)))
       )
     )
   ));

package/dist/typography/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }require('../chunk-HSPTLUFA.cjs');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }require('../chunk-HSPTLUFA.cjs');
 
 
 var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
@@ -15,6 +15,13 @@ var styles = _reactnative.StyleSheet.create({
   }
 });
 
+// src/components/typography/text-span.context.ts
+
+var TextSpanContext = _react.createContext.call(void 0, {});
+var useTextSpanInheritedStyle = () => {
+  return _react.useContext.call(void 0, TextSpanContext);
+};
+
 // src/components/typography/typography.hook.ts
 
 var _core = require('@xaui/core');
@@ -137,11 +144,26 @@ var Typography = ({
   variant = "bodyMedium",
   maxLines,
   overflow = "clip",
+  color,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  textDecorationLine,
+  textTransform,
   style
 }) => {
-  const color = useTypographyColor(themeColor);
+  const inheritedStyle = useTextSpanInheritedStyle();
+  const themeColorValue = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
-  const colorStyle = { color };
+  const resolvedAlign = _nullishCoalesce(align, () => ( inheritedStyle.align));
+  const textStyleOverrides = {
+    color: _nullishCoalesce(_nullishCoalesce(color, () => ( inheritedStyle.color)), () => ( themeColorValue)),
+    letterSpacing,
+    fontWeight: _nullishCoalesce(fontWeight, () => ( inheritedStyle.fontWeight)),
+    fontStyle: _nullishCoalesce(fontStyle, () => ( inheritedStyle.fontStyle)),
+    textDecorationLine,
+    textTransform: _nullishCoalesce(textTransform, () => ( inheritedStyle.textTransform))
+  };
   const ellipsizeMode = _react.useMemo.call(void 0, () => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
@@ -155,8 +177,8 @@ var Typography = ({
       style: [
         styles.text,
         variantStyles,
-        align && { textAlign: align },
-        colorStyle,
+        resolvedAlign && { textAlign: resolvedAlign },
+        textStyleOverrides,
         style
       ]
     },
@@ -164,5 +186,53 @@ var Typography = ({
   );
 };
 
+// src/components/typography/text-span.tsx
+
+
+var alignToJustifyContent = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  justify: "space-between"
+};
+var TextSpan = ({
+  children,
+  color,
+  fontWeight,
+  fontStyle,
+  textTransform,
+  spacing,
+  align,
+  backgroundColor,
+  style
+}) => {
+  const inheritedTextStyle = {
+    color,
+    fontWeight,
+    fontStyle,
+    textTransform,
+    align
+  };
+  return /* @__PURE__ */ _react2.default.createElement(TextSpanContext.Provider, { value: inheritedTextStyle }, /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "center",
+          ...align ? { justifyContent: alignToJustifyContent[align] } : {},
+          ...typeof spacing === "number" ? { gap: spacing } : {},
+          ...backgroundColor ? { backgroundColor } : {}
+        },
+        style
+      ]
+    },
+    children
+  ));
+};
+TextSpan.displayName = "TextSpan";
+
+
 
-exports.Typography = Typography;
+exports.TextSpan = TextSpan; exports.Typography = Typography;

package/dist/typography/index.d.cts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
@@ -36,8 +36,74 @@ type TypographyProps = {
      * Custom styles for the text.
      */
     style?: StyleProp<TextStyle>;
+    /**
+     * Custom text color override.
+     */
+    color?: TextStyle['color'];
+    /**
+     * The spacing between characters.
+     */
+    letterSpacing?: number;
+    /**
+     * The text weight.
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * The text style.
+     */
+    fontStyle?: TextStyle['fontStyle'];
+    /**
+     * Text decoration line.
+     */
+    textDecorationLine?: TextStyle['textDecorationLine'];
+    /**
+     * Text transform mode.
+     */
+    textTransform?: TextStyle['textTransform'];
 };
 
 declare const Typography: React.FC<TypographyProps>;
 
-export { Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };
+type TextSpanAlign = TypographyAlign;
+type TextSpanProps = {
+    /**
+     * The content to display inside the text span.
+     */
+    children: ReactNode;
+    /**
+     * Inherited text color for nested Typography.
+     */
+    color?: TextStyle['color'];
+    /**
+     * Inherited text weight for nested Typography.
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * Inherited text style for nested Typography.
+     */
+    fontStyle?: TextStyle['fontStyle'];
+    /**
+     * Inherited text transform for nested Typography.
+     */
+    textTransform?: TextStyle['textTransform'];
+    /**
+     * Spacing between children.
+     */
+    spacing?: number;
+    /**
+     * Text alignment for all nested typography unless overridden.
+     */
+    align?: TextSpanAlign;
+    /**
+     * Background color for the text span container.
+     */
+    backgroundColor?: ViewStyle['backgroundColor'];
+    /**
+     * Custom styles for the text span container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const TextSpan: React.FC<TextSpanProps>;
+
+export { TextSpan, type TextSpanAlign, type TextSpanProps, Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };

package/dist/typography/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
@@ -36,8 +36,74 @@ type TypographyProps = {
      * Custom styles for the text.
      */
     style?: StyleProp<TextStyle>;
+    /**
+     * Custom text color override.
+     */
+    color?: TextStyle['color'];
+    /**
+     * The spacing between characters.
+     */
+    letterSpacing?: number;
+    /**
+     * The text weight.
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * The text style.
+     */
+    fontStyle?: TextStyle['fontStyle'];
+    /**
+     * Text decoration line.
+     */
+    textDecorationLine?: TextStyle['textDecorationLine'];
+    /**
+     * Text transform mode.
+     */
+    textTransform?: TextStyle['textTransform'];
 };
 
 declare const Typography: React.FC<TypographyProps>;
 
-export { Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };
+type TextSpanAlign = TypographyAlign;
+type TextSpanProps = {
+    /**
+     * The content to display inside the text span.
+     */
+    children: ReactNode;
+    /**
+     * Inherited text color for nested Typography.
+     */
+    color?: TextStyle['color'];
+    /**
+     * Inherited text weight for nested Typography.
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * Inherited text style for nested Typography.
+     */
+    fontStyle?: TextStyle['fontStyle'];
+    /**
+     * Inherited text transform for nested Typography.
+     */
+    textTransform?: TextStyle['textTransform'];
+    /**
+     * Spacing between children.
+     */
+    spacing?: number;
+    /**
+     * Text alignment for all nested typography unless overridden.
+     */
+    align?: TextSpanAlign;
+    /**
+     * Background color for the text span container.
+     */
+    backgroundColor?: ViewStyle['backgroundColor'];
+    /**
+     * Custom styles for the text span container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const TextSpan: React.FC<TextSpanProps>;
+
+export { TextSpan, type TextSpanAlign, type TextSpanProps, Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };

package/dist/typography/index.js

@@ -15,6 +15,13 @@ var styles = StyleSheet.create({
   }
 });
 
+// src/components/typography/text-span.context.ts
+import { createContext, useContext } from "react";
+var TextSpanContext = createContext({});
+var useTextSpanInheritedStyle = () => {
+  return useContext(TextSpanContext);
+};
+
 // src/components/typography/typography.hook.ts
 import { useMemo } from "react";
 import { getSafeThemeColor } from "@xaui/core";
@@ -137,11 +144,26 @@ var Typography = ({
   variant = "bodyMedium",
   maxLines,
   overflow = "clip",
+  color,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  textDecorationLine,
+  textTransform,
   style
 }) => {
-  const color = useTypographyColor(themeColor);
+  const inheritedStyle = useTextSpanInheritedStyle();
+  const themeColorValue = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
-  const colorStyle = { color };
+  const resolvedAlign = align ?? inheritedStyle.align;
+  const textStyleOverrides = {
+    color: color ?? inheritedStyle.color ?? themeColorValue,
+    letterSpacing,
+    fontWeight: fontWeight ?? inheritedStyle.fontWeight,
+    fontStyle: fontStyle ?? inheritedStyle.fontStyle,
+    textDecorationLine,
+    textTransform: textTransform ?? inheritedStyle.textTransform
+  };
   const ellipsizeMode = useMemo2(() => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
@@ -155,14 +177,62 @@ var Typography = ({
       style: [
         styles.text,
         variantStyles,
-        align && { textAlign: align },
-        colorStyle,
+        resolvedAlign && { textAlign: resolvedAlign },
+        textStyleOverrides,
         style
       ]
     },
     children
   );
 };
+
+// src/components/typography/text-span.tsx
+import React2 from "react";
+import { View } from "react-native";
+var alignToJustifyContent = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  justify: "space-between"
+};
+var TextSpan = ({
+  children,
+  color,
+  fontWeight,
+  fontStyle,
+  textTransform,
+  spacing,
+  align,
+  backgroundColor,
+  style
+}) => {
+  const inheritedTextStyle = {
+    color,
+    fontWeight,
+    fontStyle,
+    textTransform,
+    align
+  };
+  return /* @__PURE__ */ React2.createElement(TextSpanContext.Provider, { value: inheritedTextStyle }, /* @__PURE__ */ React2.createElement(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "center",
+          ...align ? { justifyContent: alignToJustifyContent[align] } : {},
+          ...typeof spacing === "number" ? { gap: spacing } : {},
+          ...backgroundColor ? { backgroundColor } : {}
+        },
+        style
+      ]
+    },
+    children
+  ));
+};
+TextSpan.displayName = "TextSpan";
 export {
+  TextSpan,
   Typography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",