@xaui/native 0.0.29 → 0.0.31

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/app-bar/index.cjs

@@ -42,7 +42,6 @@ var styles = _reactnative.StyleSheet.create({
     width: "100%"
   },
   floatingContainer: {
-    paddingHorizontal: 16,
     paddingVertical: 8
   },
   appBar: {
@@ -56,7 +55,8 @@ var styles = _reactnative.StyleSheet.create({
     borderRadius: 0
   },
   floating: {
-    width: "92%",
+    width: "100%",
+    maxWidth: "97%",
     borderRadius: 9999,
     alignSelf: "center"
   },
@@ -71,7 +71,7 @@ var styles = _reactnative.StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 12
+    paddingHorizontal: 10
   },
   endContent: {
     flexShrink: 0,
@@ -97,7 +97,7 @@ var AppBar = ({
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
   const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
@@ -125,9 +125,11 @@ var AppBarStartContent = ({
 };
 var AppBarContent = ({
   children,
+  alignment = "center",
   style
 }) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, style] }, children);
+  const alignItems = alignment === "start" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, { alignItems }, style] }, children);
 };
 var AppBarEndContent = ({
   children,

package/dist/app-bar/index.d.cts

@@ -40,8 +40,15 @@ type AppBarSlotProps = {
      */
     style?: StyleProp<ViewStyle>;
 };
+type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
 type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps & {
+    /**
+     * Horizontal alignment for content slot content.
+     * @default 'center'
+     */
+    alignment?: AppBarSlotContentAlignment;
+};
 type AppBarEndContentProps = AppBarSlotProps;
 
 declare const AppBar: React.FC<AppBarProps>;

package/dist/app-bar/index.d.ts

@@ -40,8 +40,15 @@ type AppBarSlotProps = {
      */
     style?: StyleProp<ViewStyle>;
 };
+type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
 type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps & {
+    /**
+     * Horizontal alignment for content slot content.
+     * @default 'center'
+     */
+    alignment?: AppBarSlotContentAlignment;
+};
 type AppBarEndContentProps = AppBarSlotProps;
 
 declare const AppBar: React.FC<AppBarProps>;

package/dist/app-bar/index.js

@@ -42,7 +42,6 @@ var styles = StyleSheet.create({
     width: "100%"
   },
   floatingContainer: {
-    paddingHorizontal: 16,
     paddingVertical: 8
   },
   appBar: {
@@ -56,7 +55,8 @@ var styles = StyleSheet.create({
     borderRadius: 0
   },
   floating: {
-    width: "92%",
+    width: "100%",
+    maxWidth: "97%",
     borderRadius: 9999,
     alignSelf: "center"
   },
@@ -71,7 +71,7 @@ var styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 12
+    paddingHorizontal: 10
   },
   endContent: {
     flexShrink: 0,
@@ -97,7 +97,7 @@ var AppBar = ({
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
   const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ React.createElement(
     View,
@@ -125,9 +125,11 @@ var AppBarStartContent = ({
 };
 var AppBarContent = ({
   children,
+  alignment = "center",
   style
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, style] }, children);
+  const alignItems = alignment === "start" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, { alignItems }, style] }, children);
 };
 var AppBarEndContent = ({
   children,

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.29",
+  "version": "0.0.31",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -238,8 +238,8 @@
     "directory": "packages/native"
   },
   "dependencies": {
-    "@xaui/core": "0.1.7",
-    "@xaui/icons": "0.0.4"
+    "@xaui/core": "0.1.8",
+    "@xaui/icons": "0.0.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",