@xaui/native 0.0.40 → 0.1.0

package/dist/badge/index.cjs

@@ -21,7 +21,7 @@ var styles = _reactnative.StyleSheet.create({
   },
   text: {
     textAlign: "center",
-    fontWeight: "600",
+    fontWeight: "700",
     includeFontPadding: false,
     textAlignVertical: "center"
   }
@@ -75,28 +75,29 @@ function useBadgeVariantStyles(themeColor, variant) {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     if (variant === "flat") {
       return {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         color: colorScheme.main
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.35) : _core.withOpacity.call(void 0, colorScheme.background, 0.7),
         color: colorScheme.main
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.foreground,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        color: isDark ? colorScheme.main : colorScheme.foreground,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.foreground
+      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+      color: isDark ? colorScheme.main : colorScheme.foreground
     };
   }, [colorScheme, theme, variant]);
 }

package/dist/badge/index.js

@@ -21,7 +21,7 @@ var styles = StyleSheet.create({
   },
   text: {
     textAlign: "center",
-    fontWeight: "600",
+    fontWeight: "700",
     includeFontPadding: false,
     textAlignVertical: "center"
   }
@@ -75,28 +75,29 @@ function useBadgeVariantStyles(themeColor, variant) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return useMemo(() => {
+    const isDark = theme.mode === "dark";
     if (variant === "flat") {
       return {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         color: colorScheme.main
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: withOpacity(colorScheme.background, 0.7),
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.35) : withOpacity(colorScheme.background, 0.7),
         color: colorScheme.main
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.foreground,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        color: isDark ? colorScheme.main : colorScheme.foreground,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.foreground
+      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+      color: isDark ? colorScheme.main : colorScheme.foreground
     };
   }, [colorScheme, theme, variant]);
 }

package/dist/button/index.cjs

@@ -60,11 +60,12 @@ var useTextStyles = (themeColor, variant) => {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return {
     textColor
   };
@@ -116,9 +117,10 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     const styles2 = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       light: {

package/dist/button/index.js

@@ -54,17 +54,18 @@ var styles = StyleSheet.create({
 
 // src/components/button/button.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 var useTextStyles = (themeColor, variant) => {
   const theme = useXUITheme();
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = useMemo(() => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return {
     textColor
   };
@@ -116,9 +117,10 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = useMemo(() => {
+    const isDark = theme.mode === "dark";
     const styles2 = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       light: {

package/dist/{chunk-XQED3KRW.cjs → chunk-HYL4EU3Y.cjs}

@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     const variantMap = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const iconColor = _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return { iconColor };
 }
 function useFabRadiusValue(radius, fallback) {

package/dist/{chunk-UVI56OO5.js → chunk-WGWXGIZ3.js}

@@ -37,7 +37,7 @@ var styles = StyleSheet.create({
 
 // src/components/fab/fab.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 function useFabSizeStyles(size) {
   const theme = useXUITheme();
   const sizeStyles = useMemo(() => {
@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = useMemo(() => {
+    const isDark = theme.mode === "dark";
     const variantMap = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const iconColor = useMemo(() => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return { iconColor };
 }
 function useFabRadiusValue(radius, fallback) {

package/dist/fab/index.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
+var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
 require('../chunk-FBTBWI3P.cjs');
 require('../chunk-56RPWZD2.cjs');
 require('../chunk-RZJFCDFS.cjs');
 
 
-exports.Fab = _chunkXQED3KRWcjs.Fab;
+exports.Fab = _chunkHYL4EU3Ycjs.Fab;

package/dist/fab/index.js

@@ -1,6 +1,6 @@
 import {
   Fab
-} from "../chunk-UVI56OO5.js";
+} from "../chunk-WGWXGIZ3.js";
 import "../chunk-J3BOFXIH.js";
 import "../chunk-SHBDANQN.js";
 import "../chunk-LVNBYERF.js";

package/dist/fab-menu/index.cjs

@@ -1,6 +1,6 @@
 "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(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
+var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
 require('../chunk-FBTBWI3P.cjs');
 require('../chunk-56RPWZD2.cjs');
 
@@ -209,7 +209,7 @@ var FabMenu = ({
       }
     },
     /* @__PURE__ */ _react2.default.createElement(
-      _chunkXQED3KRWcjs.Fab,
+      _chunkHYL4EU3Ycjs.Fab,
       {
         icon: currentIcon,
         label,

package/dist/fab-menu/index.js

@@ -1,6 +1,6 @@
 import {
   Fab
-} from "../chunk-UVI56OO5.js";
+} from "../chunk-WGWXGIZ3.js";
 import "../chunk-J3BOFXIH.js";
 import "../chunk-SHBDANQN.js";
 import {

package/dist/input/index.cjs

@@ -589,6 +589,94 @@ var getTimeMaxLength = (granularity, hourCycle) => {
 var getDateTimeMaxLength = (separator, granularity, hourCycle) => {
   return getDateMaxLength(separator) + 1 + getTimeMaxLength(granularity, hourCycle);
 };
+var pad = (n) => String(n).padStart(2, "0");
+var dateInputValueToDate = (value, dateOrder, separator) => {
+  const parts = value.split(separator);
+  if (parts.length !== 3) return null;
+  let year, month, day;
+  if (dateOrder === "YMD") {
+    year = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    day = parseInt(parts[2], 10);
+  } else if (dateOrder === "MDY") {
+    month = parseInt(parts[0], 10);
+    day = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  } else {
+    day = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  }
+  if (isNaN(year) || isNaN(month) || isNaN(day)) return null;
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+    return null;
+  return date;
+};
+var dateToDateInputValue = (date, dateOrder, separator) => {
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  const year = String(d.getFullYear());
+  const month = pad(d.getMonth() + 1);
+  const day = pad(d.getDate());
+  if (dateOrder === "YMD") return [year, month, day].join(separator);
+  if (dateOrder === "MDY") return [month, day, year].join(separator);
+  return [day, month, year].join(separator);
+};
+var timeInputValueToDate = (value, options = {}) => {
+  const { hourCycle = 24 } = options;
+  const isPM = /pm$/i.test(value);
+  const isAM = /am$/i.test(value);
+  const cleaned = value.replace(/\s*(am|pm)$/i, "").trim();
+  const segments = cleaned.split(":");
+  let hours = parseInt(segments[0], 10);
+  const minutes = parseInt(_nullishCoalesce(segments[1], () => ( "0")), 10);
+  const seconds = parseInt(_nullishCoalesce(segments[2], () => ( "0")), 10);
+  if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
+  if (hourCycle === 12) {
+    if (isPM && hours !== 12) hours += 12;
+    if (isAM && hours === 12) hours = 0;
+  }
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(hours, minutes, seconds, 0);
+  return date;
+};
+var dateToTimeInputValue = (date, options = {}) => {
+  const { granularity = "minute", hourCycle = 24 } = options;
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  let hours = d.getHours();
+  const minutes = pad(d.getMinutes());
+  const seconds = pad(d.getSeconds());
+  if (hourCycle === 12) {
+    const period = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12 || 12;
+    const base2 = `${pad(hours)}:${minutes}`;
+    return granularity === "second" ? `${base2}:${seconds} ${period}` : `${base2} ${period}`;
+  }
+  const base = `${pad(hours)}:${minutes}`;
+  return granularity === "second" ? `${base}:${seconds}` : base;
+};
+var dateTimeInputValueToDate = (value, dateOrder, options = {}) => {
+  const { separator = "-", hourCycle = 24 } = options;
+  const spaceIndex = value.indexOf(" ");
+  if (spaceIndex === -1) return null;
+  const date = dateInputValueToDate(value.slice(0, spaceIndex), dateOrder, separator);
+  if (!date) return null;
+  const timePart = value.slice(spaceIndex + 1);
+  const timed = timeInputValueToDate(timePart, { hourCycle });
+  if (!timed) return null;
+  date.setHours(timed.getHours(), timed.getMinutes(), timed.getSeconds(), 0);
+  return date;
+};
+var dateToDateTimeInputValue = (date, dateOrder, options = {}) => {
+  const { separator = "-", granularity = "minute", hourCycle = 24 } = options;
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  const datePart = dateToDateInputValue(d, dateOrder, separator);
+  const timePart = dateToTimeInputValue(d, { granularity, hourCycle });
+  return `${datePart} ${timePart}`;
+};
 
 // src/components/input/date-time-input.tsx
 var DateInput = _react.forwardRef.call(void 0, 
@@ -1347,4 +1435,10 @@ NumberInput.displayName = "NumberInput";
 
 
 
-exports.DateInput = DateInput; exports.DateTimeInput = DateTimeInput; exports.NumberInput = NumberInput; exports.OTPInput = OTPInput; exports.TextArea = TextArea; exports.TextInput = TextInput; exports.TimeInput = TimeInput; exports.getDateOrder = getDateOrder;
+
+
+
+
+
+
+exports.DateInput = DateInput; exports.DateTimeInput = DateTimeInput; exports.NumberInput = NumberInput; exports.OTPInput = OTPInput; exports.TextArea = TextArea; exports.TextInput = TextInput; exports.TimeInput = TimeInput; exports.dateInputValueToDate = dateInputValueToDate; exports.dateTimeInputValueToDate = dateTimeInputValueToDate; exports.dateToDateInputValue = dateToDateInputValue; exports.dateToDateTimeInputValue = dateToDateTimeInputValue; exports.dateToTimeInputValue = dateToTimeInputValue; exports.getDateOrder = getDateOrder; exports.timeInputValueToDate = timeInputValueToDate;

package/dist/input/index.d.cts

@@ -148,6 +148,15 @@ declare const TextArea: React.FC<TextAreaProps>;
 type DateSeparator = '-' | '/' | '.';
 type DateOrder = 'YMD' | 'DMY' | 'MDY';
 type TimeInputGranularity = 'minute' | 'second';
+type TimeInputConvertOptions = {
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+};
+type DateTimeInputConvertOptions = {
+    separator?: DateSeparator;
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+};
 type DateInputProps = TextInputProps & {
     /**
      * Separator character between date segments.
@@ -502,5 +511,11 @@ type NumberInputProps = {
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<TextInput$1>>;
 
 declare const getDateOrder: (locale: string) => DateOrder;
+declare const dateInputValueToDate: (value: string, dateOrder: DateOrder, separator: DateSeparator) => Date | null;
+declare const dateToDateInputValue: (date: Date | string, dateOrder: DateOrder, separator: DateSeparator) => string;
+declare const timeInputValueToDate: (value: string, options?: TimeInputConvertOptions) => Date | null;
+declare const dateToTimeInputValue: (date: Date | string, options?: TimeInputConvertOptions) => string;
+declare const dateTimeInputValueToDate: (value: string, dateOrder: DateOrder, options?: DateTimeInputConvertOptions) => Date | null;
+declare const dateToDateTimeInputValue: (date: Date | string, dateOrder: DateOrder, options?: DateTimeInputConvertOptions) => string;
 
-export { DateInput, type DateInputProps, type DateOrder, type DateSeparator, DateTimeInput, type DateTimeInputProps, NumberInput, type NumberInputCustomAppearance, type NumberInputProps, OTPInput, type OTPInputCustomAppearance, type OTPInputProps, TextArea, type TextAreaProps, TextInput, type TextInputCustomAppearance, type TextInputLabelPlacement, type TextInputProps, type TextInputSize, type TextInputVariant, TimeInput, type TimeInputGranularity, type TimeInputProps, getDateOrder };
+export { DateInput, type DateInputProps, type DateOrder, type DateSeparator, DateTimeInput, type DateTimeInputConvertOptions, type DateTimeInputProps, NumberInput, type NumberInputCustomAppearance, type NumberInputProps, OTPInput, type OTPInputCustomAppearance, type OTPInputProps, TextArea, type TextAreaProps, TextInput, type TextInputCustomAppearance, type TextInputLabelPlacement, type TextInputProps, type TextInputSize, type TextInputVariant, TimeInput, type TimeInputConvertOptions, type TimeInputGranularity, type TimeInputProps, dateInputValueToDate, dateTimeInputValueToDate, dateToDateInputValue, dateToDateTimeInputValue, dateToTimeInputValue, getDateOrder, timeInputValueToDate };

package/dist/input/index.d.ts

@@ -148,6 +148,15 @@ declare const TextArea: React.FC<TextAreaProps>;
 type DateSeparator = '-' | '/' | '.';
 type DateOrder = 'YMD' | 'DMY' | 'MDY';
 type TimeInputGranularity = 'minute' | 'second';
+type TimeInputConvertOptions = {
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+};
+type DateTimeInputConvertOptions = {
+    separator?: DateSeparator;
+    granularity?: TimeInputGranularity;
+    hourCycle?: 12 | 24;
+};
 type DateInputProps = TextInputProps & {
     /**
      * Separator character between date segments.
@@ -502,5 +511,11 @@ type NumberInputProps = {
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<TextInput$1>>;
 
 declare const getDateOrder: (locale: string) => DateOrder;
+declare const dateInputValueToDate: (value: string, dateOrder: DateOrder, separator: DateSeparator) => Date | null;
+declare const dateToDateInputValue: (date: Date | string, dateOrder: DateOrder, separator: DateSeparator) => string;
+declare const timeInputValueToDate: (value: string, options?: TimeInputConvertOptions) => Date | null;
+declare const dateToTimeInputValue: (date: Date | string, options?: TimeInputConvertOptions) => string;
+declare const dateTimeInputValueToDate: (value: string, dateOrder: DateOrder, options?: DateTimeInputConvertOptions) => Date | null;
+declare const dateToDateTimeInputValue: (date: Date | string, dateOrder: DateOrder, options?: DateTimeInputConvertOptions) => string;
 
-export { DateInput, type DateInputProps, type DateOrder, type DateSeparator, DateTimeInput, type DateTimeInputProps, NumberInput, type NumberInputCustomAppearance, type NumberInputProps, OTPInput, type OTPInputCustomAppearance, type OTPInputProps, TextArea, type TextAreaProps, TextInput, type TextInputCustomAppearance, type TextInputLabelPlacement, type TextInputProps, type TextInputSize, type TextInputVariant, TimeInput, type TimeInputGranularity, type TimeInputProps, getDateOrder };
+export { DateInput, type DateInputProps, type DateOrder, type DateSeparator, DateTimeInput, type DateTimeInputConvertOptions, type DateTimeInputProps, NumberInput, type NumberInputCustomAppearance, type NumberInputProps, OTPInput, type OTPInputCustomAppearance, type OTPInputProps, TextArea, type TextAreaProps, TextInput, type TextInputCustomAppearance, type TextInputLabelPlacement, type TextInputProps, type TextInputSize, type TextInputVariant, TimeInput, type TimeInputConvertOptions, type TimeInputGranularity, type TimeInputProps, dateInputValueToDate, dateTimeInputValueToDate, dateToDateInputValue, dateToDateTimeInputValue, dateToTimeInputValue, getDateOrder, timeInputValueToDate };

package/dist/input/index.js

@@ -589,6 +589,94 @@ var getTimeMaxLength = (granularity, hourCycle) => {
 var getDateTimeMaxLength = (separator, granularity, hourCycle) => {
   return getDateMaxLength(separator) + 1 + getTimeMaxLength(granularity, hourCycle);
 };
+var pad = (n) => String(n).padStart(2, "0");
+var dateInputValueToDate = (value, dateOrder, separator) => {
+  const parts = value.split(separator);
+  if (parts.length !== 3) return null;
+  let year, month, day;
+  if (dateOrder === "YMD") {
+    year = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    day = parseInt(parts[2], 10);
+  } else if (dateOrder === "MDY") {
+    month = parseInt(parts[0], 10);
+    day = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  } else {
+    day = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  }
+  if (isNaN(year) || isNaN(month) || isNaN(day)) return null;
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+    return null;
+  return date;
+};
+var dateToDateInputValue = (date, dateOrder, separator) => {
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  const year = String(d.getFullYear());
+  const month = pad(d.getMonth() + 1);
+  const day = pad(d.getDate());
+  if (dateOrder === "YMD") return [year, month, day].join(separator);
+  if (dateOrder === "MDY") return [month, day, year].join(separator);
+  return [day, month, year].join(separator);
+};
+var timeInputValueToDate = (value, options = {}) => {
+  const { hourCycle = 24 } = options;
+  const isPM = /pm$/i.test(value);
+  const isAM = /am$/i.test(value);
+  const cleaned = value.replace(/\s*(am|pm)$/i, "").trim();
+  const segments = cleaned.split(":");
+  let hours = parseInt(segments[0], 10);
+  const minutes = parseInt(segments[1] ?? "0", 10);
+  const seconds = parseInt(segments[2] ?? "0", 10);
+  if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
+  if (hourCycle === 12) {
+    if (isPM && hours !== 12) hours += 12;
+    if (isAM && hours === 12) hours = 0;
+  }
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(hours, minutes, seconds, 0);
+  return date;
+};
+var dateToTimeInputValue = (date, options = {}) => {
+  const { granularity = "minute", hourCycle = 24 } = options;
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  let hours = d.getHours();
+  const minutes = pad(d.getMinutes());
+  const seconds = pad(d.getSeconds());
+  if (hourCycle === 12) {
+    const period = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12 || 12;
+    const base2 = `${pad(hours)}:${minutes}`;
+    return granularity === "second" ? `${base2}:${seconds} ${period}` : `${base2} ${period}`;
+  }
+  const base = `${pad(hours)}:${minutes}`;
+  return granularity === "second" ? `${base}:${seconds}` : base;
+};
+var dateTimeInputValueToDate = (value, dateOrder, options = {}) => {
+  const { separator = "-", hourCycle = 24 } = options;
+  const spaceIndex = value.indexOf(" ");
+  if (spaceIndex === -1) return null;
+  const date = dateInputValueToDate(value.slice(0, spaceIndex), dateOrder, separator);
+  if (!date) return null;
+  const timePart = value.slice(spaceIndex + 1);
+  const timed = timeInputValueToDate(timePart, { hourCycle });
+  if (!timed) return null;
+  date.setHours(timed.getHours(), timed.getMinutes(), timed.getSeconds(), 0);
+  return date;
+};
+var dateToDateTimeInputValue = (date, dateOrder, options = {}) => {
+  const { separator = "-", granularity = "minute", hourCycle = 24 } = options;
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  const datePart = dateToDateInputValue(d, dateOrder, separator);
+  const timePart = dateToTimeInputValue(d, { granularity, hourCycle });
+  return `${datePart} ${timePart}`;
+};
 
 // src/components/input/date-time-input.tsx
 var DateInput = forwardRef2(
@@ -1346,5 +1434,11 @@ export {
   TextArea,
   TextInput,
   TimeInput,
-  getDateOrder
+  dateInputValueToDate,
+  dateTimeInputValueToDate,
+  dateToDateInputValue,
+  dateToDateTimeInputValue,
+  dateToTimeInputValue,
+  getDateOrder,
+  timeInputValueToDate
 };

package/dist/segment-button/index.cjs

@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: colorScheme.background,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       },
       light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: `${colorScheme.background}95`,
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       }
     };

package/dist/segment-button/index.js

@@ -51,7 +51,7 @@ var styles = StyleSheet.create({
 
 // src/components/segment-button/segment-button.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
+import { getSafeThemeColor, withOpacity, withPaletteNumber } from "@xaui/core";
 function useSegmentSizeStyles(size) {
   const theme = useXUITheme();
   return useMemo(() => {
@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: colorScheme.background,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: withOpacity(colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       },
       light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: `${colorScheme.background}95`,
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: withOpacity(colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       }
     };

package/dist/snippet/index.cjs

@@ -70,6 +70,26 @@ var styles = _reactnative.StyleSheet.create({
     fontWeight: "600",
     includeFontPadding: false
   },
+  inlineSnippet: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 10
+  },
+  inlineCopyButton: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  inlineContent: {
+    flex: 1,
+    justifyContent: "center"
+  },
   disabled: {
     opacity: 0.55
   }
@@ -119,7 +139,8 @@ var useCopyButtonPositionStyles = (position) => {
   return _react.useMemo.call(void 0, 
     () => ({
       isTop: position.startsWith("top"),
-      isLeft: position.endsWith("left")
+      isLeft: position.endsWith("left"),
+      isInline: position.startsWith("inline")
     }),
     [position]
   );
@@ -149,6 +170,7 @@ var Snippet = ({
   copyButtonPosition = "top-right",
   copyLabel = "Copy",
   copiedLabel = "Copied",
+  hideCopyLabel = false,
   copyResetDelay = 1500,
   fullWidth = true,
   isDisabled = false,
@@ -162,7 +184,7 @@ var Snippet = ({
   const resetTimerRef = _react2.default.useRef(null);
   const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
   const colors = useSnippetColors(themeColor, variant, isDisabled);
-  const { isTop, isLeft } = useCopyButtonPositionStyles(copyButtonPosition);
+  const { isTop, isLeft, isInline } = useCopyButtonPositionStyles(copyButtonPosition);
   _react2.default.useEffect(() => {
     return () => {
       if (resetTimerRef.current) {
@@ -192,6 +214,39 @@ var Snippet = ({
       setIsCopied(false);
     }, copyResetDelay);
   }, [copyResetDelay, isDisabled, onCopy, value]);
+  const copyButtonColors = {
+    backgroundColor: colors.copyButtonBackground,
+    borderColor: colors.copyButtonBorder
+  };
+  const copyButton = /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Pressable,
+    {
+      onPress: handleCopy,
+      accessibilityRole: "button",
+      accessibilityLabel: isCopied ? copiedLabel : copyLabel,
+      disabled: isDisabled,
+      style: isInline ? [styles.inlineCopyButton, radiusStyles, copyButtonColors, _optionalChain([customAppearance, 'optionalAccess', _9 => _9.copyButton])] : [
+        styles.copyButton,
+        radiusStyles,
+        isTop ? styles.top : styles.bottom,
+        isLeft ? styles.left : styles.right,
+        copyButtonColors,
+        _optionalChain([customAppearance, 'optionalAccess', _10 => _10.copyButton])
+      ]
+    },
+    /* @__PURE__ */ _react2.default.createElement(_icons.CopyIcon, { size: 14, color: colors.copyButtonText }),
+    !hideCopyLabel && /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Text,
+      {
+        style: [
+          styles.copyButtonText,
+          { color: colors.copyButtonText },
+          _optionalChain([customAppearance, 'optionalAccess', _11 => _11.copyButtonText])
+        ]
+      },
+      isCopied ? copiedLabel : copyLabel
+    )
+  );
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -199,7 +254,7 @@ var Snippet = ({
         styles.container,
         !fullWidth && styles.noFullWidth,
         isDisabled && styles.disabled,
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
+        _optionalChain([customAppearance, 'optionalAccess', _12 => _12.container])
       ]
     },
     /* @__PURE__ */ _react2.default.createElement(
@@ -207,6 +262,7 @@ var Snippet = ({
       {
         style: [
           styles.snippet,
+          isInline && styles.inlineSnippet,
           radiusStyles,
           {
             backgroundColor: colors.containerBackground,
@@ -214,45 +270,15 @@ var Snippet = ({
           }
         ]
       },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Pressable,
-        {
-          onPress: handleCopy,
-          accessibilityRole: "button",
-          accessibilityLabel: isCopied ? copiedLabel : copyLabel,
-          disabled: isDisabled,
-          style: [
-            styles.copyButton,
-            radiusStyles,
-            isTop ? styles.top : styles.bottom,
-            isLeft ? styles.left : styles.right,
-            {
-              backgroundColor: colors.copyButtonBackground,
-              borderColor: colors.copyButtonBorder
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _10 => _10.copyButton])
-          ]
-        },
-        /* @__PURE__ */ _react2.default.createElement(_icons.CopyIcon, { size: 14, color: colors.copyButtonText }),
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Text,
-          {
-            style: [
-              styles.copyButtonText,
-              { color: colors.copyButtonText },
-              _optionalChain([customAppearance, 'optionalAccess', _11 => _11.copyButtonText])
-            ]
-          },
-          isCopied ? copiedLabel : copyLabel
-        )
-      ),
+      isInline && isLeft && copyButton,
+      !isInline && copyButton,
       /* @__PURE__ */ _react2.default.createElement(
         _reactnative.View,
         {
           style: [
-            styles.content,
-            isTop ? styles.topInset : styles.bottomInset,
-            _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content])
+            isInline ? styles.inlineContent : styles.content,
+            !isInline && (isTop ? styles.topInset : styles.bottomInset),
+            _optionalChain([customAppearance, 'optionalAccess', _13 => _13.content])
           ]
         },
         /* @__PURE__ */ _react2.default.createElement(
@@ -268,12 +294,13 @@ var Snippet = ({
                 lineHeight: Math.round(fontSize * 1.45),
                 fontWeight
               },
-              _optionalChain([customAppearance, 'optionalAccess', _13 => _13.text])
+              _optionalChain([customAppearance, 'optionalAccess', _14 => _14.text])
             ]
           },
           value
         )
-      )
+      ),
+      isInline && !isLeft && copyButton
     )
   );
 };

package/dist/snippet/index.d.cts

@@ -3,7 +3,7 @@ import { TextStyle, StyleProp, ViewStyle } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.cjs';
 
 type SnippetVariant = 'outlined' | 'flat' | 'light';
-type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline-left' | 'inline-right';
 type SnippetCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     content?: StyleProp<ViewStyle>;
@@ -41,6 +41,11 @@ type SnippetProps = {
      * @default 'Copy'
      */
     copyLabel?: string;
+    /**
+     * Hide the copy/copied text label, showing only the icon.
+     * @default false
+     */
+    hideCopyLabel?: boolean;
     /**
      * Label shown after a successful copy action.
      * @default 'Copied'

package/dist/snippet/index.d.ts

@@ -3,7 +3,7 @@ import { TextStyle, StyleProp, ViewStyle } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.js';
 
 type SnippetVariant = 'outlined' | 'flat' | 'light';
-type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline-left' | 'inline-right';
 type SnippetCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     content?: StyleProp<ViewStyle>;
@@ -41,6 +41,11 @@ type SnippetProps = {
      * @default 'Copy'
      */
     copyLabel?: string;
+    /**
+     * Hide the copy/copied text label, showing only the icon.
+     * @default false
+     */
+    hideCopyLabel?: boolean;
     /**
      * Label shown after a successful copy action.
      * @default 'Copied'

package/dist/snippet/index.js

@@ -70,6 +70,26 @@ var styles = StyleSheet.create({
     fontWeight: "600",
     includeFontPadding: false
   },
+  inlineSnippet: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 10
+  },
+  inlineCopyButton: {
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  inlineContent: {
+    flex: 1,
+    justifyContent: "center"
+  },
   disabled: {
     opacity: 0.55
   }
@@ -119,7 +139,8 @@ var useCopyButtonPositionStyles = (position) => {
   return useMemo(
     () => ({
       isTop: position.startsWith("top"),
-      isLeft: position.endsWith("left")
+      isLeft: position.endsWith("left"),
+      isInline: position.startsWith("inline")
     }),
     [position]
   );
@@ -149,6 +170,7 @@ var Snippet = ({
   copyButtonPosition = "top-right",
   copyLabel = "Copy",
   copiedLabel = "Copied",
+  hideCopyLabel = false,
   copyResetDelay = 1500,
   fullWidth = true,
   isDisabled = false,
@@ -162,7 +184,7 @@ var Snippet = ({
   const resetTimerRef = React.useRef(null);
   const radiusStyles = useBorderRadiusStyles(radius);
   const colors = useSnippetColors(themeColor, variant, isDisabled);
-  const { isTop, isLeft } = useCopyButtonPositionStyles(copyButtonPosition);
+  const { isTop, isLeft, isInline } = useCopyButtonPositionStyles(copyButtonPosition);
   React.useEffect(() => {
     return () => {
       if (resetTimerRef.current) {
@@ -192,6 +214,39 @@ var Snippet = ({
       setIsCopied(false);
     }, copyResetDelay);
   }, [copyResetDelay, isDisabled, onCopy, value]);
+  const copyButtonColors = {
+    backgroundColor: colors.copyButtonBackground,
+    borderColor: colors.copyButtonBorder
+  };
+  const copyButton = /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handleCopy,
+      accessibilityRole: "button",
+      accessibilityLabel: isCopied ? copiedLabel : copyLabel,
+      disabled: isDisabled,
+      style: isInline ? [styles.inlineCopyButton, radiusStyles, copyButtonColors, customAppearance?.copyButton] : [
+        styles.copyButton,
+        radiusStyles,
+        isTop ? styles.top : styles.bottom,
+        isLeft ? styles.left : styles.right,
+        copyButtonColors,
+        customAppearance?.copyButton
+      ]
+    },
+    /* @__PURE__ */ React.createElement(CopyIcon, { size: 14, color: colors.copyButtonText }),
+    !hideCopyLabel && /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.copyButtonText,
+          { color: colors.copyButtonText },
+          customAppearance?.copyButtonText
+        ]
+      },
+      isCopied ? copiedLabel : copyLabel
+    )
+  );
   return /* @__PURE__ */ React.createElement(
     View,
     {
@@ -207,6 +262,7 @@ var Snippet = ({
       {
         style: [
           styles.snippet,
+          isInline && styles.inlineSnippet,
           radiusStyles,
           {
             backgroundColor: colors.containerBackground,
@@ -214,44 +270,14 @@ var Snippet = ({
           }
         ]
       },
-      /* @__PURE__ */ React.createElement(
-        Pressable,
-        {
-          onPress: handleCopy,
-          accessibilityRole: "button",
-          accessibilityLabel: isCopied ? copiedLabel : copyLabel,
-          disabled: isDisabled,
-          style: [
-            styles.copyButton,
-            radiusStyles,
-            isTop ? styles.top : styles.bottom,
-            isLeft ? styles.left : styles.right,
-            {
-              backgroundColor: colors.copyButtonBackground,
-              borderColor: colors.copyButtonBorder
-            },
-            customAppearance?.copyButton
-          ]
-        },
-        /* @__PURE__ */ React.createElement(CopyIcon, { size: 14, color: colors.copyButtonText }),
-        /* @__PURE__ */ React.createElement(
-          Text,
-          {
-            style: [
-              styles.copyButtonText,
-              { color: colors.copyButtonText },
-              customAppearance?.copyButtonText
-            ]
-          },
-          isCopied ? copiedLabel : copyLabel
-        )
-      ),
+      isInline && isLeft && copyButton,
+      !isInline && copyButton,
       /* @__PURE__ */ React.createElement(
         View,
         {
           style: [
-            styles.content,
-            isTop ? styles.topInset : styles.bottomInset,
+            isInline ? styles.inlineContent : styles.content,
+            !isInline && (isTop ? styles.topInset : styles.bottomInset),
             customAppearance?.content
           ]
         },
@@ -273,7 +299,8 @@ var Snippet = ({
           },
           value
         )
-      )
+      ),
+      isInline && !isLeft && copyButton
     )
   );
 };

package/dist/typography/index.cjs

@@ -179,6 +179,7 @@ var Typography = ({
         variantStyles,
         resolvedAlign && { textAlign: resolvedAlign },
         textStyleOverrides,
+        inheritedStyle.spacing != null ? { marginRight: inheritedStyle.spacing } : void 0,
         style
       ]
     },
@@ -189,11 +190,11 @@ var Typography = ({
 // src/components/typography/text-span.tsx
 
 
-var alignToJustifyContent = {
-  left: "flex-start",
+var alignToTextAlign = {
+  left: "left",
   center: "center",
-  right: "flex-end",
-  justify: "space-between"
+  right: "right",
+  justify: "justify"
 };
 var TextSpan = ({
   children,
@@ -211,18 +212,15 @@ var TextSpan = ({
     fontWeight,
     fontStyle,
     textTransform,
-    align
+    align,
+    spacing
   };
   return /* @__PURE__ */ _react2.default.createElement(TextSpanContext.Provider, { value: inheritedTextStyle }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
+    _reactnative.Text,
     {
       style: [
         {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          alignItems: "center",
-          ...align ? { justifyContent: alignToJustifyContent[align] } : {},
-          ...typeof spacing === "number" ? { gap: spacing } : {},
+          ...align ? { textAlign: alignToTextAlign[align] } : {},
           ...backgroundColor ? { backgroundColor } : {}
         },
         style

package/dist/typography/index.d.cts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
@@ -97,11 +97,11 @@ type TextSpanProps = {
     /**
      * Background color for the text span container.
      */
-    backgroundColor?: ViewStyle['backgroundColor'];
+    backgroundColor?: TextStyle['backgroundColor'];
     /**
      * Custom styles for the text span container.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
 };
 
 declare const TextSpan: React.FC<TextSpanProps>;

package/dist/typography/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
@@ -97,11 +97,11 @@ type TextSpanProps = {
     /**
      * Background color for the text span container.
      */
-    backgroundColor?: ViewStyle['backgroundColor'];
+    backgroundColor?: TextStyle['backgroundColor'];
     /**
      * Custom styles for the text span container.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
 };
 
 declare const TextSpan: React.FC<TextSpanProps>;

package/dist/typography/index.js

@@ -179,6 +179,7 @@ var Typography = ({
         variantStyles,
         resolvedAlign && { textAlign: resolvedAlign },
         textStyleOverrides,
+        inheritedStyle.spacing != null ? { marginRight: inheritedStyle.spacing } : void 0,
         style
       ]
     },
@@ -188,12 +189,12 @@ var Typography = ({
 
 // src/components/typography/text-span.tsx
 import React2 from "react";
-import { View } from "react-native";
-var alignToJustifyContent = {
-  left: "flex-start",
+import { Text as Text2 } from "react-native";
+var alignToTextAlign = {
+  left: "left",
   center: "center",
-  right: "flex-end",
-  justify: "space-between"
+  right: "right",
+  justify: "justify"
 };
 var TextSpan = ({
   children,
@@ -211,18 +212,15 @@ var TextSpan = ({
     fontWeight,
     fontStyle,
     textTransform,
-    align
+    align,
+    spacing
   };
   return /* @__PURE__ */ React2.createElement(TextSpanContext.Provider, { value: inheritedTextStyle }, /* @__PURE__ */ React2.createElement(
-    View,
+    Text2,
     {
       style: [
         {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          alignItems: "center",
-          ...align ? { justifyContent: alignToJustifyContent[align] } : {},
-          ...typeof spacing === "number" ? { gap: spacing } : {},
+          ...align ? { textAlign: alignToTextAlign[align] } : {},
           ...backgroundColor ? { backgroundColor } : {}
         },
         style

package/package.json

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