@xaui/native 0.0.41 → 0.1.1

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/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/dist/view/index.cjs

@@ -42,7 +42,7 @@ var Column = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%", flexGrow: 1 } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -74,7 +74,7 @@ var Row = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -128,7 +128,7 @@ var Padding = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -166,7 +166,7 @@ var Margin = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
     {
@@ -369,6 +369,9 @@ var RoundedView = ({
 };
 var styles2 = _reactnative.StyleSheet.create({
   fullWidth: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   }
 });
@@ -400,6 +403,7 @@ var Surface = ({
   themeColor = "background",
   padding,
   radius = "none",
+  fullWidth = false,
   style
 }) => {
   const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
@@ -410,8 +414,13 @@ var Surface = ({
     {
       style: [
         radiusStyle,
+        fullWidth && {
+          flexShrink: 1,
+          flexBasis: "auto",
+          width: "100%",
+          flexGrow: 1
+        },
         {
-          flex: 1,
           backgroundColor: background,
           padding
         },
@@ -423,6 +432,32 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/center/center.tsx
+
+
+var Center = ({
+  children,
+  fullWidth = false,
+  style
+}) => {
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        fullWidthStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+Center.displayName = "Center";
+
 // src/components/view/grid/grid.tsx
 
 
@@ -1058,4 +1093,5 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;
+
+exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;

package/dist/view/index.d.cts

@@ -312,6 +312,11 @@ type SurfaceProps = {
      * @default 'none'
      */
     radius?: Radius;
+    /**
+     * Force the surface to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional container styles.
      */
@@ -320,6 +325,24 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type CenterProps = {
+    /**
+     * Content to render inside the centered container.
+     */
+    children: ReactNode;
+    /**
+     * Force the container to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional style for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Center: React.FC<CenterProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -631,4 +654,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.d.ts

@@ -312,6 +312,11 @@ type SurfaceProps = {
      * @default 'none'
      */
     radius?: Radius;
+    /**
+     * Force the surface to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Additional container styles.
      */
@@ -320,6 +325,24 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type CenterProps = {
+    /**
+     * Content to render inside the centered container.
+     */
+    children: ReactNode;
+    /**
+     * Force the container to take the full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional style for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Center: React.FC<CenterProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -631,4 +654,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.js

@@ -42,7 +42,7 @@ var Column = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%", flexGrow: 1 } : { flexGrow: 1 };
   return /* @__PURE__ */ React.createElement(
     View,
     {
@@ -74,7 +74,7 @@ var Row = ({
   style
 }) => {
   const gapStyle = spacing === void 0 ? void 0 : { gap: spacing };
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
   return /* @__PURE__ */ React2.createElement(
     View2,
     {
@@ -128,7 +128,7 @@ var Padding = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ React4.createElement(
     View4,
     {
@@ -166,7 +166,7 @@ var Margin = ({
   fullWidth,
   style
 }) => {
-  const fullWidthStyle = fullWidth ? { flexShrink: 1, flexBasis: "auto", width: "100%" } : void 0;
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
   return /* @__PURE__ */ React5.createElement(
     View5,
     {
@@ -369,6 +369,9 @@ var RoundedView = ({
 };
 var styles2 = StyleSheet2.create({
   fullWidth: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   }
 });
@@ -400,6 +403,7 @@ var Surface = ({
   themeColor = "background",
   padding,
   radius = "none",
+  fullWidth = false,
   style
 }) => {
   const theme = useXUITheme();
@@ -410,8 +414,13 @@ var Surface = ({
     {
       style: [
         radiusStyle,
+        fullWidth && {
+          flexShrink: 1,
+          flexBasis: "auto",
+          width: "100%",
+          flexGrow: 1
+        },
         {
-          flex: 1,
           backgroundColor: background,
           padding
         },
@@ -423,17 +432,43 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/center/center.tsx
+import React12 from "react";
+import { View as View12 } from "react-native";
+var Center = ({
+  children,
+  fullWidth = false,
+  style
+}) => {
+  const fullWidthStyle = fullWidth ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto", width: "100%" } : { flexGrow: 1 };
+  return /* @__PURE__ */ React12.createElement(
+    View12,
+    {
+      style: [
+        {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        fullWidthStyle,
+        style
+      ]
+    },
+    children
+  );
+};
+Center.displayName = "Center";
+
 // src/components/view/grid/grid.tsx
-import React13, { useMemo as useMemo2, useState } from "react";
+import React14, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View13
+  View as View14
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React12 from "react";
-import { View as View12 } from "react-native";
+import React13 from "react";
+import { View as View13 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React12.createElement(View12, { style }, children);
+  return /* @__PURE__ */ React13.createElement(View13, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -447,7 +482,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React13.isValidElement(child)) return false;
+  if (!React14.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -466,15 +501,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React13.Children.toArray(children);
+  const items = React14.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
   const baseItemWidth = useMemo2(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   let currentColumn = 0;
-  return /* @__PURE__ */ React13.createElement(
-    View13,
+  return /* @__PURE__ */ React14.createElement(
+    View14,
     {
       style: [
         {
@@ -491,7 +526,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React13.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React14.isValidElement(child) && child.key ? child.key : `grid-${index}`;
       const span = isGridItemElement(child) ? getSafeSpan(child.props.span, safeColumns) : 1;
       const spanWidth = baseItemWidth === void 0 ? `${100 / safeColumns * span}%` : baseItemWidth * span + resolvedColumnSpacing * (span - 1);
       if (currentColumn + span > safeColumns) {
@@ -511,7 +546,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React13.cloneElement(child, {
+        const element2 = React14.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -519,8 +554,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React13.createElement(
-        View13,
+      const element = /* @__PURE__ */ React14.createElement(
+        View14,
         {
           key,
           style: [
@@ -543,11 +578,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React14, { useMemo as useMemo3 } from "react";
+import React15, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet3,
-  View as View14
+  View as View15
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -634,7 +669,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React14.createElement(View14, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React15.createElement(View15, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -650,7 +685,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React14.createElement(View14, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React15.createElement(View15, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet3.flatten(style) ?? {};
   const {
@@ -671,7 +706,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     FlatList,
     {
       data: paddedData,
@@ -691,7 +726,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React15, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React16, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { Animated as Animated3 } from "react-native";
 
 // src/components/view/conditional/conditional-view.utils.ts
@@ -843,18 +878,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React15.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React16.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React16, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View15 } from "react-native";
+import React17, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View16 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React16.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React17.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -877,7 +912,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React16.Children.toArray(children).map((child, index) => ({
+    () => React17.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -894,8 +929,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React16.createElement(
-    View15,
+  return /* @__PURE__ */ React17.createElement(
+    View16,
     {
       style: [
         {
@@ -918,10 +953,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React16.createElement(View15, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React17.createElement(View16, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React16.createElement(
-          View15,
+        return /* @__PURE__ */ React17.createElement(
+          View16,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -940,18 +975,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React17 from "react";
-import { View as View16 } from "react-native";
+import React18 from "react";
+import { View as View17 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React17.createElement(View16, { style }, children);
+  return /* @__PURE__ */ React18.createElement(View17, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React18, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React19, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1011,7 +1046,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1023,7 +1058,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       MasonryGrid,
       {
         columns,
@@ -1033,7 +1068,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React18.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React19.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1042,6 +1077,7 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 export {
   AspectRatio,
   BlurView,
+  Center,
   Column,
   ConditionalView,
   Grid,

package/package.json

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