@xaui/native 0.0.41 → 0.1.0

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/package.json

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