@xaui/native 0.0.27 → 0.0.28

package/dist/autocomplete/index.js

@@ -1,10 +1,14 @@
+import {
+  CheckmarkIcon
+} from "../chunk-GBHQCAKW.js";
+import "../chunk-DXXNBF5P.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-URBEEDFX.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/autocomplete/autocomplete.tsx
-import React5, { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import React4, { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { Keyboard as Keyboard2, Text as Text3, View as View4 } from "react-native";
 
 // src/components/autocomplete/autocomplete-context.ts
@@ -314,7 +318,7 @@ var defaultFilterFunction = (textValue, inputValue) => {
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-import React3, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import {
   Animated as Animated3,
   BackHandler,
@@ -327,24 +331,8 @@ import {
   useWindowDimensions
 } from "react-native";
 
-// src/components/select/checkmark-icon.tsx
-import React from "react";
-import Svg, { Polyline } from "react-native-svg";
-function CheckmarkIcon({ color, size }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ React.createElement(
-    Polyline,
-    {
-      points: "1 9 7 14 15 4",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-import React2 from "react";
+import React from "react";
 import {
   Animated,
   Pressable,
@@ -447,7 +435,7 @@ var AutocompleteDialogHeader = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  return /* @__PURE__ */ React2.createElement(View, { style: styles2.header }, title ? /* @__PURE__ */ React2.createElement(View, { style: styles2.titleRow }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles2.header }, title ? /* @__PURE__ */ React.createElement(View, { style: styles2.titleRow }, /* @__PURE__ */ React.createElement(
     Pressable,
     {
       style: styles2.backButton,
@@ -455,8 +443,8 @@ var AutocompleteDialogHeader = ({
       accessibilityLabel: "Back",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ React2.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ React2.createElement(Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ React2.createElement(View, { style: styles2.inputContainer }, /* @__PURE__ */ React2.createElement(Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ React.createElement(Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ React.createElement(View, { style: styles2.inputContainer }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ React.createElement(
     TextInput,
     {
       ref: inputRef,
@@ -478,7 +466,7 @@ var AutocompleteDialogHeader = ({
       onFocus,
       onBlur
     }
-  ), inputValue ? /* @__PURE__ */ React2.createElement(
+  ), inputValue ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       style: styles2.clearInputButton,
@@ -486,7 +474,7 @@ var AutocompleteDialogHeader = ({
       accessibilityLabel: "Clear input",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ React2.createElement(CloseIcon, { color: theme.colors.foreground })
+    /* @__PURE__ */ React.createElement(CloseIcon, { color: theme.colors.foreground })
   ) : null)));
 };
 
@@ -568,8 +556,8 @@ var AutocompleteDialog = ({
     };
   }, []);
   const items = useMemo2(
-    () => React3.Children.toArray(children).filter(
-      React3.isValidElement
+    () => React2.Children.toArray(children).filter(
+      React2.isValidElement
     ),
     [children]
   );
@@ -628,7 +616,7 @@ var AutocompleteDialog = ({
   const inputAnimatedStyle = {
     transform: [{ scaleX: scaleAnim }]
   };
-  const listHeader = /* @__PURE__ */ React3.createElement(
+  const listHeader = /* @__PURE__ */ React2.createElement(
     AutocompleteDialogHeader,
     {
       title,
@@ -644,13 +632,13 @@ var AutocompleteDialog = ({
       onBlur
     }
   );
-  return /* @__PURE__ */ React3.createElement(Portal, null, /* @__PURE__ */ React3.createElement(View2, { style: [overlayStyle, style] }, /* @__PURE__ */ React3.createElement(Animated3.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ React3.createElement(Animated3.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(View2, { style: [overlayStyle, style] }, /* @__PURE__ */ React2.createElement(Animated3.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ React2.createElement(Animated3.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ React2.createElement(
     View2,
     {
       style: [styles2.container, { backgroundColor: theme.colors.background }]
     },
     listHeader,
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React2.createElement(
       FlatList,
       {
         data: items,
@@ -665,7 +653,7 @@ var AutocompleteDialog = ({
         showsVerticalScrollIndicator: false
       }
     ),
-    showCheckmark ? /* @__PURE__ */ React3.createElement(View2, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ React3.createElement(
+    showCheckmark ? /* @__PURE__ */ React2.createElement(View2, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ React2.createElement(
       Pressable2,
       {
         style: [
@@ -676,13 +664,13 @@ var AutocompleteDialog = ({
         accessibilityLabel: "Confirm",
         accessibilityRole: "button"
       },
-      checkmarkIcon ?? /* @__PURE__ */ React3.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+      checkmarkIcon ?? /* @__PURE__ */ React2.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
     )) : null
   ))));
 };
 
 // src/components/autocomplete/autocomplete-trigger.tsx
-import React4 from "react";
+import React3 from "react";
 import { Pressable as Pressable3, Text as Text2, TouchableOpacity, View as View3 } from "react-native";
 import { CloseIcon as CloseIcon2 } from "@xaui/icons";
 var AutocompleteTrigger = ({
@@ -707,7 +695,7 @@ var AutocompleteTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement(
     Pressable3,
     {
       ref: triggerRef,
@@ -730,7 +718,7 @@ var AutocompleteTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ React4.createElement(View3, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(View3, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ React3.createElement(
       Text2,
       {
         style: [
@@ -744,14 +732,14 @@ var AutocompleteTrigger = ({
       },
       displayValue
     )),
-    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ React4.createElement(
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ React3.createElement(
       TouchableOpacity,
       {
         onPress: handleClear,
         style: styles.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      clearIcon ?? /* @__PURE__ */ React4.createElement(CloseIcon2, { color: theme.colors.foreground, size: 20 })
+      clearIcon ?? /* @__PURE__ */ React3.createElement(CloseIcon2, { color: theme.colors.foreground, size: 20 })
     ) : null
   );
 };
@@ -810,9 +798,9 @@ var Autocomplete = ({
     });
   }, []);
   const items = useMemo3(() => {
-    const elements = React5.Children.toArray(children).filter(Boolean);
+    const elements = React4.Children.toArray(children).filter(Boolean);
     return elements.map((child, index) => {
-      if (!React5.isValidElement(child)) {
+      if (!React4.isValidElement(child)) {
         return null;
       }
       const key = child.props.value ?? String(index);
@@ -905,7 +893,7 @@ var Autocomplete = ({
       handleItemSelection(item.key, item.labelText);
       itemProps.onSelected?.();
     };
-    return React5.cloneElement(item.element, {
+    return React4.cloneElement(item.element, {
       key: item.key,
       isDisabled: itemDisabled,
       isSelected: itemSelected,
@@ -916,10 +904,10 @@ var Autocomplete = ({
   const isLabelInside = labelPlacement === "inside";
   const isLabelOutsideLeft = labelPlacement === "outside-left";
   const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React5.createElement(Text3, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ React5.createElement(View4, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ React4.createElement(View4, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ React5.createElement(
+  const triggerContent = /* @__PURE__ */ React4.createElement(
     AutocompleteTrigger,
     {
       triggerRef,
@@ -944,7 +932,7 @@ var Autocomplete = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ React5.createElement(View4, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ React5.createElement(View4, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ React5.createElement(Text3, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ React5.createElement(View4, null, helperContent) : null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React4.createElement(View4, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ React4.createElement(View4, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ React4.createElement(View4, null, helperContent) : null, /* @__PURE__ */ React4.createElement(
     AutocompleteDialog,
     {
       visible: isOpen,
@@ -958,12 +946,12 @@ var Autocomplete = ({
       onClose: () => setOpen(false),
       onCheckmark: handleCheckmark
     },
-    /* @__PURE__ */ React5.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ React5.createElement(Text3, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+    /* @__PURE__ */ React4.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
   ));
 };
 
 // src/components/autocomplete/autocomplete-item.tsx
-import React6, { useContext as useContext2 } from "react";
+import React5, { useContext as useContext2 } from "react";
 import { Pressable as Pressable4, Text as Text4, View as View5 } from "react-native";
 
 // src/components/autocomplete/autocomplete-item.style.ts
@@ -1093,7 +1081,7 @@ var AutocompleteItem = ({
     }
     onSelected?.();
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Pressable4,
     {
       onPress: handlePress,
@@ -1110,7 +1098,7 @@ var AutocompleteItem = ({
       ]
     },
     startContent,
-    /* @__PURE__ */ React6.createElement(View5, { style: styles3.content }, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React5.createElement(View5, { style: styles3.content }, /* @__PURE__ */ React5.createElement(
       Text4,
       {
         style: [
@@ -1120,7 +1108,7 @@ var AutocompleteItem = ({
         ]
       },
       label
-    ), description && /* @__PURE__ */ React6.createElement(
+    ), description && /* @__PURE__ */ React5.createElement(
       Text4,
       {
         style: [

package/dist/avatar/index.cjs

@@ -1,47 +1,15 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"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; }require('../chunk-HSPTLUFA.cjs');
 
-// src/components/avatar/index.ts
-var avatar_exports = {};
-__export(avatar_exports, {
-  Avatar: () => Avatar,
-  AvatarGroup: () => AvatarGroup
-});
-module.exports = __toCommonJS(avatar_exports);
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
 
 // src/components/avatar/avatar.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
 
 // src/components/avatar/avatar.style.ts
-var import_react_native = require("react-native");
-var styles = import_react_native.StyleSheet.create({
+
+var styles = _reactnative.StyleSheet.create({
   container: {
     overflow: "hidden",
     alignItems: "center",
@@ -67,49 +35,8 @@ var styles = import_react_native.StyleSheet.create({
 });
 
 // src/components/avatar/avatar.hook.ts
-var import_react6 = require("react");
-var import_core = require("@xaui/core");
-
-// src/core/theme-context.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native3 = require("react-native");
-var import_theme = require("@xaui/core/theme");
-var import_palette = require("@xaui/core/palette");
-
-// src/core/portal/portal.tsx
-var import_react2 = require("react");
-
-// src/core/portal/portal-context.ts
-var import_react = require("react");
-var PortalContext = (0, import_react.createContext)(null);
-
-// src/core/portal/portal-host.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
-var hostStyles = import_react_native2.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
 
-// src/core/theme-context.tsx
-var XUIThemeContext = (0, import_react4.createContext)(null);
-
-// src/core/theme-hooks.ts
-var import_react5 = require("react");
-var import_react_native4 = require("react-native");
-function useXUITheme() {
-  const theme = (0, import_react5.useContext)(XUIThemeContext);
-  if (!theme) {
-    throw new Error("useXUITheme must be used within XUIProvider");
-  }
-  return theme;
-}
-
-// src/core/index.ts
-var import_theme2 = require("@xaui/core/theme");
-
-// src/components/avatar/avatar.hook.ts
+var _core = require('@xaui/core');
 var sizeMap = {
   xs: 24,
   sm: 32,
@@ -123,9 +50,9 @@ function resolveAvatarSize(size) {
   return sizeMap[size];
 }
 function useAvatarSizeStyles(size) {
-  const theme = useXUITheme();
-  const resolvedSize = (0, import_react6.useMemo)(() => resolveAvatarSize(size), [size]);
-  const fontSize = (0, import_react6.useMemo)(() => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const resolvedSize = _react.useMemo.call(void 0, () => resolveAvatarSize(size), [size]);
+  const fontSize = _react.useMemo.call(void 0, () => {
     if (typeof size === "number") {
       return Math.max(10, Math.round(size * 0.4));
     }
@@ -137,8 +64,8 @@ function useAvatarSizeStyles(size) {
   };
 }
 function useAvatarRadiusStyles(radius, size) {
-  const theme = useXUITheme();
-  return (0, import_react6.useMemo)(() => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  return _react.useMemo.call(void 0, () => {
     if (radius === "full") {
       return { borderRadius: size / 2 };
     }
@@ -153,16 +80,16 @@ function useAvatarRadiusStyles(radius, size) {
   }, [radius, size, theme]);
 }
 function useAvatarColors(themeColor, isDisabled) {
-  const theme = useXUITheme();
-  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  const backgroundColor = (0, import_react6.useMemo)(() => {
+  const backgroundColor = _react.useMemo.call(void 0, () => {
     if (isDisabled) {
       return theme.colors.background;
     }
     return colorScheme.background;
   }, [colorScheme.background, isDisabled, theme.colors.background]);
-  const textColor = (0, import_react6.useMemo)(() => {
+  const textColor = _react.useMemo.call(void 0, () => {
     if (safeThemeColor === "default") {
       return theme.colors.foreground;
     }
@@ -201,18 +128,18 @@ var Avatar = ({
   getInitials,
   customAppearance
 }) => {
-  const [isError, setIsError] = import_react7.default.useState(false);
+  const [isError, setIsError] = _react2.default.useState(false);
   const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
   const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
   const { backgroundColor, textColor, borderColor } = useAvatarColors(
     themeColor,
     isDisabled
   );
-  const accessibilityLabel = name ?? "Avatar";
+  const accessibilityLabel = _nullishCoalesce(name, () => ( "Avatar"));
   const shouldShowFallback = showFallback || !src || isError;
-  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
-  return /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native5.View,
+  const initials = name ? (_nullishCoalesce(getInitials, () => ( getDefaultInitials)))(name) : "";
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
     {
       style: [
         styles.container,
@@ -225,22 +152,22 @@ var Avatar = ({
           borderColor: isBordered ? borderColor : "transparent"
         },
         radiusStyles,
-        customAppearance?.container
+        _optionalChain([customAppearance, 'optionalAccess', _ => _.container])
       ],
       accessible: true,
       accessibilityRole: "image",
       accessibilityLabel
     },
-    !shouldShowFallback && src ? /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native5.Image,
+    !shouldShowFallback && src ? /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Image,
       {
         source: { uri: src },
-        style: [styles.image, radiusStyles, customAppearance?.image],
+        style: [styles.image, radiusStyles, _optionalChain([customAppearance, 'optionalAccess', _2 => _2.image])],
         accessibilityLabel,
         onError: () => setIsError(true)
       }
-    ) : /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native5.Text,
+    ) : /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, _nullishCoalesce(_nullishCoalesce(fallback, () => ( icon)), () => ( /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Text,
       {
         style: [
           {
@@ -248,17 +175,17 @@ var Avatar = ({
             fontSize,
             fontWeight: "600"
           },
-          customAppearance?.text
+          _optionalChain([customAppearance, 'optionalAccess', _3 => _3.text])
         ]
       },
       initials
-    ))
+    ))))
   );
 };
 
 // src/components/avatar/avatar-group.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
+
+
 var AvatarGroup = ({
   children,
   max,
@@ -272,35 +199,35 @@ var AvatarGroup = ({
   renderCount,
   customAppearance
 }) => {
-  const theme = useXUITheme();
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
   const resolvedSize = resolveAvatarSize(size);
   const spacing = theme.spacing.xs;
   const overlap = Math.round(resolvedSize * 0.28);
-  const allChildren = import_react8.default.Children.toArray(children).filter(
-    (child) => import_react8.default.isValidElement(child)
+  const allChildren = _react2.default.Children.toArray(children).filter(
+    (child) => _react2.default.isValidElement(child)
   );
-  const totalCount = total ?? allChildren.length;
-  const maxCount = max ?? totalCount;
+  const totalCount = _nullishCoalesce(total, () => ( allChildren.length));
+  const maxCount = _nullishCoalesce(max, () => ( totalCount));
   const visibleChildren = allChildren.slice(0, maxCount);
   const remaining = Math.max(0, totalCount - maxCount);
   const enhanced = visibleChildren.map((child, index) => {
     const childProps = child.props;
-    return /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native6.View,
+    return /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
       {
-        key: child.key ?? index,
+        key: _nullishCoalesce(child.key, () => ( index)),
         style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
       },
-      import_react8.default.cloneElement(child, {
-        size: childProps.size ?? size,
-        radius: childProps.radius ?? radius,
-        themeColor: childProps.themeColor ?? themeColor,
-        isBordered: childProps.isBordered ?? isBordered,
-        isDisabled: childProps.isDisabled ?? isDisabled
+      _react2.default.cloneElement(child, {
+        size: _nullishCoalesce(childProps.size, () => ( size)),
+        radius: _nullishCoalesce(childProps.radius, () => ( radius)),
+        themeColor: _nullishCoalesce(childProps.themeColor, () => ( themeColor)),
+        isBordered: _nullishCoalesce(childProps.isBordered, () => ( isBordered)),
+        isDisabled: _nullishCoalesce(childProps.isDisabled, () => ( isDisabled))
       })
     );
   });
-  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ import_react8.default.createElement(
+  const countNode = remaining > 0 ? _nullishCoalesce(_optionalChain([renderCount, 'optionalCall', _4 => _4(remaining)]), () => ( /* @__PURE__ */ _react2.default.createElement(
     Avatar,
     {
       name: `+${remaining}`,
@@ -310,8 +237,8 @@ var AvatarGroup = ({
       themeColor,
       isBordered,
       isDisabled,
-      fallback: /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native6.Text,
+      fallback: /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Text,
         {
           style: {
             color: theme.colors.foreground,
@@ -323,11 +250,11 @@ var AvatarGroup = ({
         remaining
       )
     }
-  ) : null;
+  ))) : null;
   if (countNode) {
     enhanced.push(
-      /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native6.View,
+      /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.View,
         {
           key: "avatar-count",
           style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
@@ -339,17 +266,16 @@ var AvatarGroup = ({
       )
     );
   }
-  return /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native6.View,
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
     {
-      style: [isGrid ? styles.grid : styles.group, customAppearance?.container],
+      style: [isGrid ? styles.grid : styles.group, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.container])],
       accessible: true
     },
     enhanced
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Avatar,
-  AvatarGroup
-});
+
+
+
+exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup;

package/dist/avatar/index.js

@@ -1,6 +1,7 @@
+import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-URBEEDFX.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/avatar/avatar.tsx
 import React from "react";