@xaui/native 0.0.10 → 0.0.11

package/dist/index.cjs

@@ -34,6 +34,9 @@ __export(src_exports, {
   Alert: () => Alert,
   Autocomplete: () => Autocomplete,
   AutocompleteItem: () => AutocompleteItem,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
+  Badge: () => Badge,
   Divider: () => Divider,
   Typography: () => Typography
 });
@@ -542,14 +545,477 @@ var Divider = ({
   );
 };
 
-// src/components/alert/alert.tsx
-var import_react15 = __toESM(require("react"), 1);
+// src/components/avatar/avatar.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native11 = require("react-native");
+
+// src/components/avatar/avatar.style.ts
+var import_react_native10 = require("react-native");
+var styles3 = import_react_native10.StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  fallback: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  group: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start"
+  }
+});
+
+// src/components/avatar/avatar.hook.ts
+var import_react12 = require("react");
+var import_core7 = require("@xaui/core");
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+function resolveAvatarSize(size) {
+  if (typeof size === "number") {
+    return size;
+  }
+  return sizeMap[size];
+}
+function useAvatarSizeStyles(size) {
+  const theme = useXUITheme();
+  const resolvedSize = (0, import_react12.useMemo)(() => resolveAvatarSize(size), [size]);
+  const fontSize = (0, import_react12.useMemo)(() => {
+    if (typeof size === "number") {
+      return Math.max(10, Math.round(size * 0.4));
+    }
+    return theme.fontSizes[size];
+  }, [size, theme]);
+  return {
+    size: resolvedSize,
+    fontSize
+  };
+}
+function useAvatarRadiusStyles(radius, size) {
+  const theme = useXUITheme();
+  return (0, import_react12.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: size / 2 };
+    }
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, size, theme]);
+}
+function useAvatarColors(themeColor, isDisabled) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const backgroundColor = (0, import_react12.useMemo)(() => {
+    if (isDisabled) {
+      return theme.colors.background;
+    }
+    return colorScheme.background;
+  }, [colorScheme.background, isDisabled, theme.colors.background]);
+  const textColor = (0, import_react12.useMemo)(() => {
+    if (safeThemeColor === "default") {
+      return theme.colors.foreground;
+    }
+    return colorScheme.main;
+  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
+  return {
+    backgroundColor,
+    textColor,
+    borderColor: colorScheme.main
+  };
+}
+function getDefaultInitials(name) {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+// src/components/avatar/avatar.tsx
+var Avatar = ({
+  src,
+  name,
+  icon,
+  fallback,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  showFallback = false,
+  getInitials,
+  customAppearance
+}) => {
+  const [isError, setIsError] = import_react13.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 shouldShowFallback = showFallback || !src || isError;
+  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native11.View,
+    {
+      style: [
+        styles3.container,
+        {
+          width: resolvedSize,
+          height: resolvedSize,
+          backgroundColor,
+          opacity: isDisabled ? 0.6 : 1,
+          borderWidth: isBordered ? 1 : 0,
+          borderColor: isBordered ? borderColor : "transparent"
+        },
+        radiusStyles,
+        customAppearance?.container
+      ],
+      accessible: true,
+      accessibilityRole: "image",
+      accessibilityLabel
+    },
+    !shouldShowFallback && src ? /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native11.Image,
+      {
+        source: { uri: src },
+        style: [styles3.image, radiusStyles, customAppearance?.image],
+        accessibilityLabel,
+        onError: () => setIsError(true)
+      }
+    ) : /* @__PURE__ */ import_react13.default.createElement(import_react_native11.View, { style: [styles3.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native11.Text,
+      {
+        style: [
+          {
+            color: textColor,
+            fontSize,
+            fontWeight: "600"
+          },
+          customAppearance?.text
+        ]
+      },
+      initials
+    ))
+  );
+};
+
+// src/components/avatar/avatar-group.tsx
+var import_react14 = __toESM(require("react"), 1);
 var import_react_native12 = require("react-native");
+var AvatarGroup = ({
+  children,
+  max,
+  total,
+  size = "md",
+  radius = "full",
+  themeColor = "default",
+  isBordered = false,
+  isDisabled = false,
+  isGrid = false,
+  renderCount,
+  customAppearance
+}) => {
+  const theme = useXUITheme();
+  const resolvedSize = resolveAvatarSize(size);
+  const spacing = theme.spacing.xs;
+  const overlap = Math.round(resolvedSize * 0.28);
+  const allChildren = import_react14.default.Children.toArray(children).filter(
+    (child) => import_react14.default.isValidElement(child)
+  );
+  const totalCount = total ?? allChildren.length;
+  const maxCount = 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_react14.default.createElement(
+      import_react_native12.View,
+      {
+        key: child.key ?? index,
+        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
+      },
+      import_react14.default.cloneElement(child, {
+        size: childProps.size ?? size,
+        radius: childProps.radius ?? radius,
+        themeColor: childProps.themeColor ?? themeColor,
+        isBordered: childProps.isBordered ?? isBordered,
+        isDisabled: childProps.isDisabled ?? isDisabled
+      })
+    );
+  });
+  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ import_react14.default.createElement(
+    Avatar,
+    {
+      name: `+${remaining}`,
+      showFallback: true,
+      size,
+      radius,
+      themeColor,
+      isBordered,
+      isDisabled,
+      fallback: /* @__PURE__ */ import_react14.default.createElement(
+        import_react_native12.Text,
+        {
+          style: {
+            color: theme.colors.foreground,
+            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
+            fontWeight: "600"
+          }
+        },
+        "+",
+        remaining
+      )
+    }
+  ) : null;
+  if (countNode) {
+    enhanced.push(
+      /* @__PURE__ */ import_react14.default.createElement(
+        import_react_native12.View,
+        {
+          key: "avatar-count",
+          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
+            marginLeft: enhanced.length === 0 ? 0 : -overlap,
+            zIndex: enhanced.length
+          }
+        },
+        countNode
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react14.default.createElement(
+    import_react_native12.View,
+    {
+      style: [isGrid ? styles3.grid : styles3.group, customAppearance?.container],
+      accessible: true
+    },
+    enhanced
+  );
+};
+
+// src/components/badge/badge.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_react_native14 = require("react-native");
+
+// src/components/badge/badge.style.ts
+var import_react_native13 = require("react-native");
+var styles4 = import_react_native13.StyleSheet.create({
+  container: {
+    position: "relative",
+    alignSelf: "flex-start"
+  },
+  badge: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "600",
+    includeFontPadding: false,
+    textAlignVertical: "center"
+  }
+});
+
+// src/components/badge/badge.hook.ts
+var import_react15 = require("react");
+var import_core10 = require("@xaui/core");
+var sizeMap2 = {
+  sm: { height: 16, minWidth: 16, dot: 8 },
+  md: { height: 20, minWidth: 20, dot: 10 },
+  lg: { height: 24, minWidth: 24, dot: 12 }
+};
+var fontSizeMap = {
+  sm: 9,
+  md: 10,
+  lg: 12
+};
+function useBadgeSizeStyles(size, isDot, isOneChar) {
+  const theme = useXUITheme();
+  return (0, import_react15.useMemo)(() => {
+    const { height, minWidth, dot } = sizeMap2[size];
+    const fontSize = fontSizeMap[size];
+    if (isDot) {
+      return {
+        height: dot,
+        minWidth: dot,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    if (isOneChar) {
+      return {
+        height,
+        minWidth: height,
+        paddingHorizontal: 0,
+        fontSize
+      };
+    }
+    const paddingHorizontal = size === "sm" ? theme.spacing.xs : theme.spacing.sm;
+    return {
+      height,
+      minWidth,
+      paddingHorizontal,
+      fontSize
+    };
+  }, [isDot, isOneChar, size, theme]);
+}
+function useBadgeVariantStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core10.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react15.useMemo)(() => {
+    if (variant === "flat") {
+      return {
+        backgroundColor: colorScheme.background,
+        color: colorScheme.main
+      };
+    }
+    if (variant === "faded") {
+      return {
+        backgroundColor: (0, import_core10.withOpacity)(colorScheme.background, 0.7),
+        color: colorScheme.main
+      };
+    }
+    if (variant === "shadow") {
+      return {
+        backgroundColor: colorScheme.main,
+        color: colorScheme.foreground,
+        shadow: theme.shadows.sm
+      };
+    }
+    return {
+      backgroundColor: colorScheme.main,
+      color: colorScheme.foreground
+    };
+  }, [colorScheme, theme, variant]);
+}
+function useBadgeRadiusStyles(radius, height) {
+  const theme = useXUITheme();
+  return (0, import_react15.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: height / 2 };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [height, radius, theme.borderRadius]);
+}
+function useBadgePlacementStyles(placement, height) {
+  return (0, import_react15.useMemo)(() => {
+    const offset = Math.round(height * 0.3);
+    switch (placement) {
+      case "top-left":
+        return { top: -offset, left: -offset };
+      case "bottom-right":
+        return { bottom: -offset, right: -offset };
+      case "bottom-left":
+        return { bottom: -offset, left: -offset };
+      case "top-right":
+      default:
+        return { top: -offset, right: -offset };
+    }
+  }, [height, placement]);
+}
+
+// src/components/badge/badge.tsx
+var Badge = ({
+  children,
+  content,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "full",
+  placement = "top-right",
+  showOutline = true,
+  disableOutline = false,
+  isInvisible = false,
+  isDot = false,
+  isOneChar = false,
+  disableAnimation = false,
+  customAppearance
+}) => {
+  const shouldRender = !isInvisible && (isDot || content !== void 0);
+  if (!shouldRender && !children) {
+    return null;
+  }
+  const forceOneChar = isOneChar || radius === "full";
+  const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
+  const variantStyles = useBadgeVariantStyles(themeColor, variant);
+  const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);
+  const placementStyles = useBadgePlacementStyles(placement, sizeStyles.height);
+  const outlineEnabled = disableOutline ? false : showOutline;
+  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
+  const badgeContent = isDot ? null : content;
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_native14.View, { style: [styles4.container, customAppearance?.container] }, children, shouldRender && /* @__PURE__ */ import_react16.default.createElement(
+    import_react_native14.View,
+    {
+      style: [
+        styles4.badge,
+        {
+          minWidth: sizeStyles.minWidth,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: variantStyles.backgroundColor,
+          opacity: disableAnimation ? 1 : 1
+        },
+        radiusStyles,
+        placementStyles,
+        outlineStyles,
+        variantStyles.shadow,
+        customAppearance?.badge
+      ],
+      accessible: true,
+      accessibilityRole: "text"
+    },
+    badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native14.Text,
+      {
+        style: [
+          styles4.text,
+          {
+            fontSize: sizeStyles.fontSize,
+            color: variantStyles.color
+          },
+          customAppearance?.text
+        ]
+      },
+      badgeContent
+    )
+  ));
+};
+
+// src/components/alert/alert.tsx
+var import_react20 = __toESM(require("react"), 1);
+var import_react_native17 = require("react-native");
 var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"), 1);
 
 // src/components/alert/alert.style.ts
-var import_react_native10 = require("react-native");
-var styles3 = import_react_native10.StyleSheet.create({
+var import_react_native15 = require("react-native");
+var styles5 = import_react_native15.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -587,11 +1053,11 @@ var styles3 = import_react_native10.StyleSheet.create({
 });
 
 // src/components/alert/alert.hook.ts
-var import_react12 = require("react");
-var import_core7 = require("@xaui/core");
+var import_react17 = require("react");
+var import_core12 = require("@xaui/core");
 var useAlertColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core12.getSafeThemeColor)(themeColor);
   return {
     theme,
     colorScheme: theme.colors[safeThemeColor],
@@ -600,10 +1066,10 @@ var useAlertColorScheme = (themeColor) => {
 };
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const containerStyles = (0, import_react12.useMemo)(() => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? (0, import_core7.withOpacity)(colorScheme.background, 0.75) : "transparent";
+  const containerStyles = (0, import_react17.useMemo)(() => {
+    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? (0, import_core12.withOpacity)(colorScheme.background, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
-    const borderColor = variant === "bordered" ? (0, import_core7.withOpacity)(colorScheme.main, 0.75) : variant === "faded" ? (0, import_core7.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
+    const borderColor = variant === "bordered" ? (0, import_core12.withOpacity)(colorScheme.main, 0.75) : variant === "faded" ? (0, import_core12.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
       backgroundColor,
       borderColor,
@@ -616,10 +1082,10 @@ var useAlertContainerStyles = (themeColor, variant) => {
 };
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const iconWrapperStyles = (0, import_react12.useMemo)(() => {
-    const backgroundColor = variant === "solid" ? (0, import_core7.withOpacity)(colorScheme.foreground, 0.16) : (0, import_core7.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+  const iconWrapperStyles = (0, import_react17.useMemo)(() => {
+    const backgroundColor = variant === "solid" ? (0, import_core12.withOpacity)(colorScheme.foreground, 0.16) : (0, import_core12.withOpacity)(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
-    const borderColor = (0, import_core7.withOpacity)(
+    const borderColor = (0, import_core12.withOpacity)(
       isDefault ? theme.colors.foreground : colorScheme.main,
       0.2
     );
@@ -633,7 +1099,7 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 };
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const textStyles = (0, import_react12.useMemo)(() => {
+  const textStyles = (0, import_react17.useMemo)(() => {
     const baseTextColor = variant === "solid" ? colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
@@ -642,7 +1108,7 @@ var useAlertTextStyles = (themeColor, variant) => {
         fontWeight: theme.fontWeights.semibold
       },
       descriptionStyles: {
-        color: (0, import_core7.withOpacity)(baseTextColor, 0.75),
+        color: (0, import_core12.withOpacity)(baseTextColor, 0.75),
         fontSize: theme.fontSizes.xs,
         fontWeight: theme.fontWeights.normal
       },
@@ -654,10 +1120,10 @@ var useAlertTextStyles = (themeColor, variant) => {
 };
 
 // src/components/alert/alert-icons.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 function InfoIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 12,
@@ -668,10 +1134,10 @@ function InfoIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 7, r: 1, fill: color }));
+  ), /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 7, r: 1, fill: color }));
 }
 function SuccessIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Path,
     {
       d: "M7 12.5L10.2 15.5L17 9",
@@ -683,7 +1149,7 @@ function SuccessIcon({ color, size }) {
   ));
 }
 function WarningIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Path,
     {
       d: "M12 3L22 20H2L12 3Z",
@@ -691,7 +1157,7 @@ function WarningIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 12,
@@ -702,10 +1168,10 @@ function WarningIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 17, r: 1, fill: color }));
+  ), /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 17, r: 1, fill: color }));
 }
 function DangerIcon({ color, size }) {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react18.default.createElement(import_react_native_svg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 9,
@@ -716,7 +1182,7 @@ function DangerIcon({ color, size }) {
       strokeWidth: 2,
       strokeLinecap: "round"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react18.default.createElement(
     import_react_native_svg.Line,
     {
       x1: 15,
@@ -731,8 +1197,8 @@ function DangerIcon({ color, size }) {
 }
 
 // src/components/icon/icons/close.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_react_native11 = require("react-native");
+var import_react19 = __toESM(require("react"), 1);
+var import_react_native16 = require("react-native");
 var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
 
 // src/components/icon/icon.utils.ts
@@ -750,7 +1216,7 @@ var isThemeColor = (color) => {
 };
 
 // src/components/icon/icons/close.tsx
-var AnimatedPath = import_react_native11.Animated.createAnimatedComponent(import_react_native_svg2.Path);
+var AnimatedPath = import_react_native16.Animated.createAnimatedComponent(import_react_native_svg2.Path);
 var CloseIcon = ({
   variant = "baseline",
   size = 24,
@@ -758,24 +1224,24 @@ var CloseIcon = ({
   isAnimated = false
 }) => {
   const theme = useXUITheme();
-  const scaleAnim = (0, import_react14.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react14.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react14.useMemo)(() => {
+  const scaleAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react19.useMemo)(() => {
     if (typeof color === "string" && isThemeColor(color)) {
       return theme.colors[color].main;
     }
     return color;
   }, [color, theme]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isAnimated) {
-      import_react_native11.Animated.parallel([
-        import_react_native11.Animated.spring(scaleAnim, {
+      import_react_native16.Animated.parallel([
+        import_react_native16.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
           friction: 7
         }),
-        import_react_native11.Animated.timing(opacityAnim, {
+        import_react_native16.Animated.timing(opacityAnim, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true
@@ -787,7 +1253,7 @@ var CloseIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderBaseline = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -795,7 +1261,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -803,14 +1269,14 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderDuotone = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderDuotone = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Path,
     {
       fill: resolvedColor,
       opacity: 0.3,
       d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -818,7 +1284,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Circle,
     {
       cx: "256",
@@ -828,7 +1294,7 @@ var CloseIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -836,7 +1302,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_svg2.Rect,
     {
       x: "64",
@@ -848,7 +1314,7 @@ var CloseIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -856,7 +1322,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderRoundFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -864,7 +1330,7 @@ var CloseIcon = ({
       ...animatedProps
     }
   );
-  const renderSquareFilled = () => /* @__PURE__ */ import_react14.default.createElement(
+  const renderSquareFilled = () => /* @__PURE__ */ import_react19.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
@@ -891,7 +1357,7 @@ var CloseIcon = ({
         return renderBaseline();
     }
   };
-  return /* @__PURE__ */ import_react14.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
 // src/components/alert/alert.tsx
@@ -920,8 +1386,8 @@ var Alert = ({
   onClose,
   onVisibleChange
 }) => {
-  const [internalVisible, setInternalVisible] = (0, import_react15.useState)(isVisible ?? true);
-  const [shouldRender, setShouldRender] = (0, import_react15.useState)(isVisible ?? true);
+  const [internalVisible, setInternalVisible] = (0, import_react20.useState)(isVisible ?? true);
+  const [shouldRender, setShouldRender] = (0, import_react20.useState)(isVisible ?? true);
   const isControlled = typeof isVisible === "boolean";
   const visible = isControlled ? isVisible : internalVisible;
   const opacity = (0, import_react_native_reanimated3.useSharedValue)(1);
@@ -930,7 +1396,7 @@ var Alert = ({
   const containerStyles = useAlertContainerStyles(themeColor, variant);
   const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
   const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
-  const finishClosing = (0, import_react15.useCallback)(() => {
+  const finishClosing = (0, import_react20.useCallback)(() => {
     setShouldRender(false);
     if (!isControlled) {
       setInternalVisible(false);
@@ -938,7 +1404,7 @@ var Alert = ({
     onVisibleChange?.(false);
     onClose?.();
   }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = (0, import_react15.useCallback)(() => {
+  const handleClose = (0, import_react20.useCallback)(() => {
     if (!visible) return;
     opacity.value = (0, import_react_native_reanimated3.withTiming)(0, { duration: 250 });
     scale.value = (0, import_react_native_reanimated3.withTiming)(0.95, { duration: 250 }, (finished) => {
@@ -947,7 +1413,7 @@ var Alert = ({
       }
     });
   }, [finishClosing, opacity, scale, visible]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (visible && !shouldRender) {
       setShouldRender(true);
       opacity.value = 0;
@@ -968,22 +1434,22 @@ var Alert = ({
   const shouldShowClose = Boolean(closeButton || isClosable || onClose);
   const renderIcon = () => {
     if (hideIcon) return null;
-    if (icon && (0, import_react15.isValidElement)(icon)) {
-      return (0, import_react15.cloneElement)(icon, { color: iconColor, size: 22 });
+    if (icon && (0, import_react20.isValidElement)(icon)) {
+      return (0, import_react20.cloneElement)(icon, { color: iconColor, size: 22 });
     }
     if (icon) {
-      return /* @__PURE__ */ import_react15.default.createElement(import_react_native12.Text, { style: [styles3.iconText, { color: iconColor }] }, icon);
+      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.iconText, { color: iconColor }] }, icon);
     }
-    return /* @__PURE__ */ import_react15.default.createElement(IconComponent, { color: iconColor, size: 22 });
+    return /* @__PURE__ */ import_react20.default.createElement(IconComponent, { color: iconColor, size: 22 });
   };
   const renderContentText = (content) => {
     if (content === null || content === void 0) return null;
     if (typeof content === "string" || typeof content === "number") {
-      return /* @__PURE__ */ import_react15.default.createElement(
-        import_react_native12.Text,
+      return /* @__PURE__ */ import_react20.default.createElement(
+        import_react_native17.Text,
         {
           style: [
-            styles3.description,
+            styles5.description,
             descriptionStyles,
             customAppearance?.description
           ]
@@ -993,20 +1459,20 @@ var Alert = ({
     }
     return content;
   };
-  const titleNode = (0, import_react15.useMemo)(() => {
+  const titleNode = (0, import_react20.useMemo)(() => {
     if (title === null || title === void 0) return null;
     if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ import_react15.default.createElement(import_react_native12.Text, { style: [styles3.title, titleStyles, customAppearance?.title] }, title);
+      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.title, titleStyles, customAppearance?.title] }, title);
     }
     return title;
   }, [title, customAppearance?.title, titleStyles]);
   const descriptionNode = renderContentText(description);
   const childrenNode = renderContentText(children);
-  const closeButtonNode = (0, import_react15.useMemo)(() => {
+  const closeButtonNode = (0, import_react20.useMemo)(() => {
     if (!closeButton) return null;
-    if (!(0, import_react15.isValidElement)(closeButton)) return closeButton;
+    if (!(0, import_react20.isValidElement)(closeButton)) return closeButton;
     const existingOnPress = closeButton.props.onPress;
-    return (0, import_react15.cloneElement)(closeButton, {
+    return (0, import_react20.cloneElement)(closeButton, {
       onPress: (event) => {
         existingOnPress?.(event);
         handleClose();
@@ -1014,58 +1480,58 @@ var Alert = ({
     });
   }, [closeButton, handleClose]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     import_react_native_reanimated3.default.View,
     {
       accessibilityRole: "alert",
       style: [
-        styles3.container,
+        styles5.container,
         containerStyles,
         radiusStyles,
         customAppearance?.container,
         animatedStyle
       ]
     },
-    !hideIcon && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: [styles3.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: styles3.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, { style: styles3.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ import_react15.default.createElement(import_react_native12.View, null, closeButtonNode ?? /* @__PURE__ */ import_react15.default.createElement(
-      import_react_native12.Pressable,
+    !hideIcon && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: [styles5.iconWrapper, iconWrapperStyles] }, renderIcon()),
+    /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.extraContent }, childrenNode)),
+    shouldShowClose && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, null, closeButtonNode ?? /* @__PURE__ */ import_react20.default.createElement(
+      import_react_native17.Pressable,
       {
         accessibilityRole: "button",
         accessibilityLabel: "Close",
         onPress: handleClose,
-        style: styles3.closeButton
+        style: styles5.closeButton
       },
-      /* @__PURE__ */ import_react15.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
+      /* @__PURE__ */ import_react20.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
     ))
   );
 };
 
 // src/components/autocomplete/autocomplete.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_react_native22 = require("react-native");
+var import_react32 = __toESM(require("react"), 1);
+var import_react_native27 = require("react-native");
 
 // src/components/autocomplete/autocomplete-context.ts
-var import_react16 = require("react");
-var AutocompleteContext = (0, import_react16.createContext)({
+var import_react21 = require("react");
+var AutocompleteContext = (0, import_react21.createContext)({
   size: "md",
   themeColor: "default",
   isDisabled: false
 });
 
 // src/components/autocomplete/autocomplete.hook.ts
-var import_react17 = require("react");
-var import_core10 = require("@xaui/core");
+var import_react22 = require("react");
+var import_core15 = require("@xaui/core");
 var import_palette2 = require("@xaui/core/palette");
 var useAutocompleteColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core10.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core15.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
 var useAutocompleteSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     const sizes = {
       xs: {
         minHeight: 34,
@@ -1101,7 +1567,7 @@ var useAutocompleteSizeStyles = (size) => {
 };
 var useAutocompleteRadiusStyles = (radius) => {
   const theme = useXUITheme();
-  const radiusStyles = (0, import_react17.useMemo)(() => {
+  const radiusStyles = (0, import_react22.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1111,7 +1577,7 @@ var useAutocompleteRadiusStyles = (radius) => {
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const listboxRadius = (0, import_react17.useMemo)(() => {
+  const listboxRadius = (0, import_react22.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1125,12 +1591,12 @@ var useAutocompleteRadiusStyles = (radius) => {
 };
 var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles8 = {
+    const styles10 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1155,12 +1621,12 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles8[variant];
+    return styles10[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     let baseColor = theme.colors.foreground;
     if (isInvalid) {
       baseColor = theme.colors.danger.main;
@@ -1175,7 +1641,7 @@ var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
 };
 var useAutocompleteHelperColor = (isInvalid) => {
   const theme = useXUITheme();
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     if (isInvalid) {
       return theme.colors.danger.main;
     }
@@ -1184,8 +1650,8 @@ var useAutocompleteHelperColor = (isInvalid) => {
 };
 
 // src/components/autocomplete/autocomplete.style.ts
-var import_react_native13 = require("react-native");
-var styles4 = import_react_native13.StyleSheet.create({
+var import_react_native18 = require("react-native");
+var styles6 = import_react_native18.StyleSheet.create({
   container: {
     gap: 6,
     position: "relative"
@@ -1272,16 +1738,16 @@ var styles4 = import_react_native13.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete.state.hook.ts
-var import_react18 = require("react");
+var import_react23 = require("react");
 var useAutocompleteOpenState = ({
   isOpened,
   isDisabled,
   onOpenChange,
   onClose
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = (0, import_react18.useState)(false);
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react23.useState)(false);
   const isOpen = isOpened !== void 0 ? isOpened : internalIsOpen;
-  const setOpen = (0, import_react18.useCallback)(
+  const setOpen = (0, import_react23.useCallback)(
     (open) => {
       if (isDisabled) {
         return;
@@ -1304,9 +1770,9 @@ var useAutocompleteInputState = ({
   selectedKey,
   onInputChange
 }) => {
-  const [internalInputValue, setInternalInputValue] = (0, import_react18.useState)(defaultInputValue ?? "");
+  const [internalInputValue, setInternalInputValue] = (0, import_react23.useState)(defaultInputValue ?? "");
   const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
-  const updateInputValue = (0, import_react18.useCallback)(
+  const updateInputValue = (0, import_react23.useCallback)(
     (value) => {
       if (inputValue === void 0) {
         setInternalInputValue(value);
@@ -1315,7 +1781,7 @@ var useAutocompleteInputState = ({
     },
     [inputValue, onInputChange]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (selectedKey === null && inputValue === void 0) {
       setInternalInputValue("");
     }
@@ -1325,8 +1791,8 @@ var useAutocompleteInputState = ({
 var useAutocompleteSelection = ({
   onSelectionChange
 }) => {
-  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react18.useState)(null);
-  const updateSelection = (0, import_react18.useCallback)(
+  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react23.useState)(null);
+  const updateSelection = (0, import_react23.useCallback)(
     (key) => {
       setCurrentSelectedKey(key);
       onSelectionChange?.(key);
@@ -1350,14 +1816,14 @@ var defaultFilterFunction = (textValue, inputValue) => {
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_react_native20 = require("react-native");
+var import_react30 = __toESM(require("react"), 1);
+var import_react_native25 = require("react-native");
 
 // src/components/select/checkmark-icon.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
 function CheckmarkIcon({ color, size }) {
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react24.default.createElement(
     import_react_native_svg3.Polyline,
     {
       points: "1 9 7 14 15 4",
@@ -1370,14 +1836,14 @@ function CheckmarkIcon({ color, size }) {
 }
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_react_native18 = require("react-native");
+var import_react28 = __toESM(require("react"), 1);
+var import_react_native23 = require("react-native");
 
 // src/components/icon/icons/arrow-back.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_react_native14 = require("react-native");
+var import_react25 = __toESM(require("react"), 1);
+var import_react_native19 = require("react-native");
 var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath2 = import_react_native14.Animated.createAnimatedComponent(import_react_native_svg4.Path);
+var AnimatedPath2 = import_react_native19.Animated.createAnimatedComponent(import_react_native_svg4.Path);
 var ArrowBackIcon = ({
   variant = "baseline",
   size = 24,
@@ -1385,24 +1851,24 @@ var ArrowBackIcon = ({
   isAnimated = false
 }) => {
   const theme = useXUITheme();
-  const scaleAnim = (0, import_react20.useRef)(new import_react_native14.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react20.useRef)(new import_react_native14.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react20.useMemo)(() => {
+  const scaleAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react25.useMemo)(() => {
     if (typeof color === "string" && isThemeColor(color)) {
       return theme.colors[color].main;
     }
     return color;
   }, [color, theme]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isAnimated) {
-      import_react_native14.Animated.parallel([
-        import_react_native14.Animated.spring(scaleAnim, {
+      import_react_native19.Animated.parallel([
+        import_react_native19.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
           friction: 7
         }),
-        import_react_native14.Animated.timing(opacityAnim, {
+        import_react_native19.Animated.timing(opacityAnim, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true
@@ -1414,7 +1880,7 @@ var ArrowBackIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderArrow = () => /* @__PURE__ */ import_react20.default.createElement(
+  const renderArrow = () => /* @__PURE__ */ import_react25.default.createElement(
     AnimatedPath2,
     {
       fill: "none",
@@ -1426,7 +1892,7 @@ var ArrowBackIcon = ({
       ...animatedProps
     }
   );
-  const renderDuotone = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderDuotone = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Path,
     {
       fill: resolvedColor,
@@ -1434,7 +1900,7 @@ var ArrowBackIcon = ({
       d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
     }
   ), renderArrow());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Circle,
     {
       cx: "256",
@@ -1445,7 +1911,7 @@ var ArrowBackIcon = ({
       strokeWidth: 32
     }
   ), renderArrow());
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     import_react_native_svg4.Rect,
     {
       x: "64",
@@ -1474,26 +1940,26 @@ var ArrowBackIcon = ({
         return renderArrow();
     }
   };
-  return /* @__PURE__ */ import_react20.default.createElement(import_react_native_svg4.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_native_svg4.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
 // src/components/icon/icons/checkmark.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_react_native15 = require("react-native");
+var import_react26 = __toESM(require("react"), 1);
+var import_react_native20 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath3 = import_react_native15.Animated.createAnimatedComponent(import_react_native_svg5.Path);
+var AnimatedPath3 = import_react_native20.Animated.createAnimatedComponent(import_react_native_svg5.Path);
 
 // src/components/icon/icons/chevron-down.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_react_native16 = require("react-native");
+var import_react27 = __toESM(require("react"), 1);
+var import_react_native21 = require("react-native");
 var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath4 = import_react_native16.Animated.createAnimatedComponent(import_react_native_svg6.Path);
+var AnimatedPath4 = import_react_native21.Animated.createAnimatedComponent(import_react_native_svg6.Path);
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
-var import_react_native17 = require("react-native");
-var styles5 = import_react_native17.StyleSheet.create({
+var import_react_native22 = require("react-native");
+var styles7 = import_react_native22.StyleSheet.create({
   backdrop: {
-    ...import_react_native17.StyleSheet.absoluteFillObject,
+    ...import_react_native22.StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   dialogContainer: {
@@ -1588,17 +2054,17 @@ var AutocompleteDialogHeader = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  return /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.header }, title ? /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.titleRow }, /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.Pressable,
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, { style: styles7.header }, title ? /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, { style: styles7.titleRow }, /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native23.Pressable,
     {
-      style: styles5.backButton,
+      style: styles7.backButton,
       onPress: onClose,
       accessibilityLabel: "Back",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react23.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ import_react23.default.createElement(import_react_native18.Text, { style: [styles5.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react23.default.createElement(import_react_native18.View, { style: styles5.inputContainer }, /* @__PURE__ */ import_react23.default.createElement(import_react_native18.Animated.View, { style: [styles5.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.TextInput,
+    /* @__PURE__ */ import_react28.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react28.default.createElement(import_react_native23.Text, { style: [styles7.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, { style: styles7.inputContainer }, /* @__PURE__ */ import_react28.default.createElement(import_react_native23.Animated.View, { style: [styles7.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native23.TextInput,
     {
       ref: inputRef,
       value: inputValue,
@@ -1609,7 +2075,7 @@ var AutocompleteDialogHeader = ({
         0.5
       ),
       style: [
-        styles5.input,
+        styles7.input,
         {
           backgroundColor: theme.colors.default.background,
           color: theme.colors.foreground
@@ -1622,42 +2088,42 @@ var AutocompleteDialogHeader = ({
       onFocus,
       onBlur
     }
-  ), inputValue ? /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native18.Pressable,
+  ), inputValue ? /* @__PURE__ */ import_react28.default.createElement(
+    import_react_native23.Pressable,
     {
-      style: styles5.clearInputButton,
+      style: styles7.clearInputButton,
       onPress: () => onInputChange?.(""),
       accessibilityLabel: "Clear input",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react23.default.createElement(CloseIcon, { color: theme.colors.foreground })
+    /* @__PURE__ */ import_react28.default.createElement(CloseIcon, { color: theme.colors.foreground })
   ) : null)));
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
-var import_react24 = require("react");
-var import_react_native19 = require("react-native");
+var import_react29 = require("react");
+var import_react_native24 = require("react-native");
 var useAutocompleteDialogAnimation = ({
   visible,
   fadeAnim,
   slideAnim,
   scaleAnim
 }) => {
-  (0, import_react24.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (visible) {
-      import_react_native19.Animated.parallel([
-        import_react_native19.Animated.timing(fadeAnim, {
+      import_react_native24.Animated.parallel([
+        import_react_native24.Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 250,
           useNativeDriver: true
         }),
-        import_react_native19.Animated.spring(slideAnim, {
+        import_react_native24.Animated.spring(slideAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 65,
           friction: 10
         }),
-        import_react_native19.Animated.spring(scaleAnim, {
+        import_react_native24.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
@@ -1691,19 +2157,19 @@ var AutocompleteDialog = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native20.useWindowDimensions)();
-  const fadeAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const slideAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const scaleAnim = (0, import_react25.useRef)(new import_react_native20.Animated.Value(0)).current;
-  const inputRef = (0, import_react25.useRef)(null);
-  const [keyboardHeight, setKeyboardHeight] = (0, import_react25.useState)(0);
-  (0, import_react25.useEffect)(() => {
-    const showEvent = import_react_native20.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-    const hideEvent = import_react_native20.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-    const showSub = import_react_native20.Keyboard.addListener(showEvent, (e) => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native25.useWindowDimensions)();
+  const fadeAnim = (0, import_react30.useRef)(new import_react_native25.Animated.Value(0)).current;
+  const slideAnim = (0, import_react30.useRef)(new import_react_native25.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react30.useRef)(new import_react_native25.Animated.Value(0)).current;
+  const inputRef = (0, import_react30.useRef)(null);
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react30.useState)(0);
+  (0, import_react30.useEffect)(() => {
+    const showEvent = import_react_native25.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = import_react_native25.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = import_react_native25.Keyboard.addListener(showEvent, (e) => {
       setKeyboardHeight(e.endCoordinates.height);
     });
-    const hideSub = import_react_native20.Keyboard.addListener(hideEvent, () => {
+    const hideSub = import_react_native25.Keyboard.addListener(hideEvent, () => {
       setKeyboardHeight(0);
     });
     return () => {
@@ -1711,26 +2177,26 @@ var AutocompleteDialog = ({
       hideSub.remove();
     };
   }, []);
-  const items = (0, import_react25.useMemo)(
-    () => import_react25.default.Children.toArray(children).filter(
-      import_react25.default.isValidElement
+  const items = (0, import_react30.useMemo)(
+    () => import_react30.default.Children.toArray(children).filter(
+      import_react30.default.isValidElement
     ),
     [children]
   );
   const checkmarkColor = theme.colors[themeColor].main;
   const checkmarkBackgroundColor = theme.colors[themeColor].background;
   useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!visible) return;
-    const sub = import_react_native20.BackHandler.addEventListener("hardwareBackPress", () => {
+    const sub = import_react_native25.BackHandler.addEventListener("hardwareBackPress", () => {
       onClose?.();
       return true;
     });
     return () => sub.remove();
   }, [visible, onClose]);
-  const focusInput = (0, import_react25.useCallback)(() => {
-    const delay = import_react_native20.Platform.OS === "android" ? 300 : 100;
-    import_react_native20.InteractionManager.runAfterInteractions(() => {
+  const focusInput = (0, import_react30.useCallback)(() => {
+    const delay = import_react_native25.Platform.OS === "android" ? 300 : 100;
+    import_react_native25.InteractionManager.runAfterInteractions(() => {
       setTimeout(() => {
         inputRef.current?.focus();
       }, delay);
@@ -1738,16 +2204,16 @@ var AutocompleteDialog = ({
   }, []);
   const handleCheckmarkPress = () => {
     onCheckmark?.();
-    import_react_native20.Keyboard.dismiss();
+    import_react_native25.Keyboard.dismiss();
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!visible) {
-      import_react_native20.Keyboard.dismiss();
+      import_react_native25.Keyboard.dismiss();
       return;
     }
     focusInput();
   }, [focusInput, visible]);
-  const listBottomPadding = (0, import_react25.useMemo)(() => {
+  const listBottomPadding = (0, import_react30.useMemo)(() => {
     const basePadding = showCheckmark ? 96 : 64;
     return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
   }, [keyboardHeight, showCheckmark]);
@@ -1772,7 +2238,7 @@ var AutocompleteDialog = ({
   const inputAnimatedStyle = {
     transform: [{ scaleX: scaleAnim }]
   };
-  const listHeader = /* @__PURE__ */ import_react25.default.createElement(
+  const listHeader = /* @__PURE__ */ import_react30.default.createElement(
     AutocompleteDialogHeader,
     {
       title,
@@ -1788,19 +2254,19 @@ var AutocompleteDialog = ({
       onBlur
     }
   );
-  return /* @__PURE__ */ import_react25.default.createElement(Portal, null, /* @__PURE__ */ import_react25.default.createElement(import_react_native20.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react25.default.createElement(import_react_native20.Animated.View, { style: [styles5.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react25.default.createElement(import_react_native20.Animated.View, { style: [styles5.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native20.View,
+  return /* @__PURE__ */ import_react30.default.createElement(Portal, null, /* @__PURE__ */ import_react30.default.createElement(import_react_native25.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react30.default.createElement(import_react_native25.Animated.View, { style: [styles7.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react30.default.createElement(import_react_native25.Animated.View, { style: [styles7.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native25.View,
     {
-      style: [styles5.container, { backgroundColor: theme.colors.background }]
+      style: [styles7.container, { backgroundColor: theme.colors.background }]
     },
     listHeader,
-    /* @__PURE__ */ import_react25.default.createElement(
-      import_react_native20.FlatList,
+    /* @__PURE__ */ import_react30.default.createElement(
+      import_react_native25.FlatList,
       {
         data: items,
         renderItem: ({ item }) => item,
         keyExtractor: (_, index) => String(index),
-        style: styles5.listContainer,
+        style: styles7.listContainer,
         contentContainerStyle: {
           paddingBottom: listBottomPadding
         },
@@ -1809,25 +2275,25 @@ var AutocompleteDialog = ({
         showsVerticalScrollIndicator: false
       }
     ),
-    showCheckmark ? /* @__PURE__ */ import_react25.default.createElement(import_react_native20.View, { style: styles5.checkmarkButtonContainer }, /* @__PURE__ */ import_react25.default.createElement(
-      import_react_native20.Pressable,
+    showCheckmark ? /* @__PURE__ */ import_react30.default.createElement(import_react_native25.View, { style: styles7.checkmarkButtonContainer }, /* @__PURE__ */ import_react30.default.createElement(
+      import_react_native25.Pressable,
       {
         style: [
-          styles5.checkmarkButton,
+          styles7.checkmarkButton,
           { backgroundColor: checkmarkBackgroundColor }
         ],
         onPress: handleCheckmarkPress,
         accessibilityLabel: "Confirm",
         accessibilityRole: "button"
       },
-      checkmarkIcon ?? /* @__PURE__ */ import_react25.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+      checkmarkIcon ?? /* @__PURE__ */ import_react30.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
     )) : null
   ))));
 };
 
 // src/components/autocomplete/autocomplete-trigger.tsx
-var import_react26 = __toESM(require("react"), 1);
-var import_react_native21 = require("react-native");
+var import_react31 = __toESM(require("react"), 1);
+var import_react_native26 = require("react-native");
 var AutocompleteTrigger = ({
   triggerRef,
   isDisabled,
@@ -1850,15 +2316,15 @@ var AutocompleteTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ import_react26.default.createElement(
-    import_react_native21.Pressable,
+  return /* @__PURE__ */ import_react31.default.createElement(
+    import_react_native26.Pressable,
     {
       ref: triggerRef,
       onPress: handleTriggerPress,
       onLayout: handleTriggerLayout,
       disabled: isDisabled,
       style: [
-        styles4.trigger,
+        styles6.trigger,
         {
           minHeight: sizeStyles.minHeight,
           paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -1866,18 +2332,18 @@ var AutocompleteTrigger = ({
         },
         radiusStyles,
         variantStyles,
-        isDisabled && styles4.disabled,
+        isDisabled && styles6.disabled,
         style
       ],
       accessibilityLabel: labelText ?? (typeof label === "string" ? label : void 0),
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ import_react26.default.createElement(import_react_native21.View, { style: styles4.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react26.default.createElement(
-      import_react_native21.Text,
+    /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles6.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react31.default.createElement(
+      import_react_native26.Text,
       {
         style: [
-          styles4.triggerText,
+          styles6.triggerText,
           { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
           !currentSelectedKey && !currentInputValue && { opacity: 0.5 },
           textStyle
@@ -1887,14 +2353,14 @@ var AutocompleteTrigger = ({
       },
       displayValue
     )),
-    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react26.default.createElement(
-      import_react_native21.TouchableOpacity,
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react31.default.createElement(
+      import_react_native26.TouchableOpacity,
       {
         onPress: handleClear,
-        style: styles4.clearButton,
+        style: styles6.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      clearIcon ?? /* @__PURE__ */ import_react26.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+      clearIcon ?? /* @__PURE__ */ import_react31.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
     ) : null
   );
 };
@@ -1945,17 +2411,17 @@ var Autocomplete = ({
     onOpenChange,
     onClose
   });
-  const triggerRef = (0, import_react27.useRef)(null);
-  const [triggerLayout, setTriggerLayout] = (0, import_react27.useState)();
-  const handleTriggerLayout = (0, import_react27.useCallback)(() => {
+  const triggerRef = (0, import_react32.useRef)(null);
+  const [triggerLayout, setTriggerLayout] = (0, import_react32.useState)();
+  const handleTriggerLayout = (0, import_react32.useCallback)(() => {
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setTriggerLayout({ x, y, width, height });
     });
   }, []);
-  const items = (0, import_react27.useMemo)(() => {
-    const elements = import_react27.default.Children.toArray(children).filter(Boolean);
+  const items = (0, import_react32.useMemo)(() => {
+    const elements = import_react32.default.Children.toArray(children).filter(Boolean);
     return elements.map((child, index) => {
-      if (!import_react27.default.isValidElement(child)) {
+      if (!import_react32.default.isValidElement(child)) {
         return null;
       }
       const key = child.props.value ?? String(index);
@@ -1967,7 +2433,7 @@ var Autocomplete = ({
       };
     }).filter((item) => item !== null);
   }, [children]);
-  const filteredItems = (0, import_react27.useMemo)(() => {
+  const filteredItems = (0, import_react32.useMemo)(() => {
     if (disableLocalFilter || !currentInputValue.trim()) {
       return items;
     }
@@ -1987,7 +2453,7 @@ var Autocomplete = ({
   const helperColor = useAutocompleteHelperColor(isInvalid);
   const selectedItem = items.find((item) => item.key === currentSelectedKey);
   const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
-  const handleInputChange = (0, import_react27.useCallback)(
+  const handleInputChange = (0, import_react32.useCallback)(
     (text) => {
       updateInputValue(text);
       const selectedLabel = selectedItem?.labelText ?? "";
@@ -2004,7 +2470,7 @@ var Autocomplete = ({
       currentSelectedKey
     ]
   );
-  const handleItemSelection = (0, import_react27.useCallback)(
+  const handleItemSelection = (0, import_react32.useCallback)(
     (key, itemLabel) => {
       if (isDisabled) {
         return;
@@ -2012,16 +2478,16 @@ var Autocomplete = ({
       updateSelection(key);
       updateInputValue(itemLabel);
       setTimeout(() => {
-        import_react_native22.Keyboard.dismiss();
+        import_react_native27.Keyboard.dismiss();
         setOpen(false);
       }, 50);
     },
     [isDisabled, updateSelection, updateInputValue, setOpen]
   );
-  const handleCheckmark = (0, import_react27.useCallback)(() => {
+  const handleCheckmark = (0, import_react32.useCallback)(() => {
     setOpen(false);
   }, [setOpen]);
-  const handleClear = (0, import_react27.useCallback)(() => {
+  const handleClear = (0, import_react32.useCallback)(() => {
     if (isDisabled) {
       return;
     }
@@ -2029,7 +2495,7 @@ var Autocomplete = ({
     updateInputValue("");
     onClear?.();
   }, [isDisabled, updateSelection, updateInputValue, onClear]);
-  const handleTriggerPress = (0, import_react27.useCallback)(() => {
+  const handleTriggerPress = (0, import_react32.useCallback)(() => {
     if (!isDisabled) {
       if (selectedItem && !currentInputValue) {
         updateInputValue(selectedItem.labelText);
@@ -2048,7 +2514,7 @@ var Autocomplete = ({
       handleItemSelection(item.key, item.labelText);
       itemProps.onSelected?.();
     };
-    return import_react27.default.cloneElement(item.element, {
+    return import_react32.default.cloneElement(item.element, {
       key: item.key,
       isDisabled: itemDisabled,
       isSelected: itemSelected,
@@ -2059,10 +2525,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__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.label, labelStyle] }, label) : /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react32.default.createElement(import_react_native27.Text, { style: [styles6.label, labelStyle] }, label) : /* @__PURE__ */ import_react32.default.createElement(import_react_native27.View, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ import_react27.default.createElement(
+  const triggerContent = /* @__PURE__ */ import_react32.default.createElement(
     AutocompleteTrigger,
     {
       triggerRef,
@@ -2087,7 +2553,7 @@ var Autocomplete = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, { style: [styles4.container, fullWidth ? styles4.fullWidth : styles4.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, { style: styles4.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, null, helperContent) : null, /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_native27.View, { style: [styles6.container, fullWidth ? styles6.fullWidth : styles6.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react32.default.createElement(import_react_native27.View, { style: styles6.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react32.default.createElement(import_react_native27.Text, { style: [styles6.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react32.default.createElement(import_react_native27.View, null, helperContent) : null, /* @__PURE__ */ import_react32.default.createElement(
     AutocompleteDialog,
     {
       visible: isOpen,
@@ -2101,17 +2567,17 @@ var Autocomplete = ({
       onClose: () => setOpen(false),
       onCheckmark: handleCheckmark
     },
-    /* @__PURE__ */ import_react27.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react27.default.createElement(import_react_native22.Text, { style: [styles4.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+    /* @__PURE__ */ import_react32.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react32.default.createElement(import_react_native27.Text, { style: [styles6.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
   ));
 };
 
 // src/components/autocomplete/autocomplete-item.tsx
-var import_react29 = __toESM(require("react"), 1);
-var import_react_native24 = require("react-native");
+var import_react34 = __toESM(require("react"), 1);
+var import_react_native29 = require("react-native");
 
 // src/components/autocomplete/autocomplete-item.style.ts
-var import_react_native23 = require("react-native");
-var styles6 = import_react_native23.StyleSheet.create({
+var import_react_native28 = require("react-native");
+var styles8 = import_react_native28.StyleSheet.create({
   item: {
     flexDirection: "row",
     alignItems: "center",
@@ -2133,11 +2599,11 @@ var styles6 = import_react_native23.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete-item.hook.ts
-var import_react28 = require("react");
-var import_core18 = require("@xaui/core");
+var import_react33 = require("react");
+var import_core23 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react28.useMemo)(() => {
+  return (0, import_react33.useMemo)(() => {
     const sizes = {
       xs: {
         paddingVertical: theme.spacing.sm,
@@ -2169,15 +2635,15 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core18.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core23.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react28.useMemo)(() => {
+  return (0, import_react33.useMemo)(() => {
     return "transparent";
   }, [isSelected, colorScheme]);
 };
 var useAutocompleteItemTextColors = () => {
   const theme = useXUITheme();
-  return (0, import_react28.useMemo)(() => {
+  return (0, import_react33.useMemo)(() => {
     return {
       textColor: theme.colors.foreground,
       descriptionColor: theme.colors.foreground
@@ -2186,9 +2652,9 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core18.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core23.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react28.useMemo)(() => {
+  return (0, import_react33.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.primary.main;
     }
@@ -2196,7 +2662,7 @@ var useAutocompleteItemCheckmarkColor = (themeColor) => {
   }, [themeColor, colorScheme, theme]);
 };
 var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
-  const context = (0, import_react28.useContext)(AutocompleteContext);
+  const context = (0, import_react33.useContext)(AutocompleteContext);
   const backgroundColor = useAutocompleteItemBackgroundColor(
     context.themeColor,
     isSelected
@@ -2225,7 +2691,7 @@ var AutocompleteItem = ({
   customAppearance,
   onSelected
 }) => {
-  const context = (0, import_react29.useContext)(AutocompleteContext);
+  const context = (0, import_react34.useContext)(AutocompleteContext);
   const size = context?.size ?? defaultSize;
   const isItemDisabled = context?.isDisabled ? true : isDisabled;
   const sizeStyles = useAutocompleteItemSizeStyles(size);
@@ -2236,38 +2702,38 @@ var AutocompleteItem = ({
     }
     onSelected?.();
   };
-  return /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native24.Pressable,
+  return /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native29.Pressable,
     {
       onPress: handlePress,
       disabled: isItemDisabled,
       style: [
-        styles6.item,
+        styles8.item,
         {
           paddingVertical: sizeStyles.paddingVertical,
           paddingHorizontal: sizeStyles.paddingHorizontal,
           backgroundColor
         },
-        isItemDisabled && styles6.disabled,
+        isItemDisabled && styles8.disabled,
         customAppearance?.container
       ]
     },
     startContent,
-    /* @__PURE__ */ import_react29.default.createElement(import_react_native24.View, { style: styles6.content }, /* @__PURE__ */ import_react29.default.createElement(
-      import_react_native24.Text,
+    /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { style: styles8.content }, /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Text,
       {
         style: [
-          styles6.title,
+          styles8.title,
           { fontSize: sizeStyles.titleSize, color: labelColor },
           customAppearance?.text
         ]
       },
       label
-    ), description && /* @__PURE__ */ import_react29.default.createElement(
-      import_react_native24.Text,
+    ), description && /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Text,
       {
         style: [
-          styles6.description,
+          styles8.description,
           { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
         ]
       },
@@ -2278,20 +2744,20 @@ var AutocompleteItem = ({
 };
 
 // src/components/typography/typography.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_react_native26 = require("react-native");
+var import_react36 = __toESM(require("react"), 1);
+var import_react_native31 = require("react-native");
 
 // src/components/typography/typography.style.ts
-var import_react_native25 = require("react-native");
-var styles7 = import_react_native25.StyleSheet.create({
+var import_react_native30 = require("react-native");
+var styles9 = import_react_native30.StyleSheet.create({
   text: {
     includeFontPadding: false
   }
 });
 
 // src/components/typography/typography.hook.ts
-var import_react30 = require("react");
-var import_core21 = require("@xaui/core");
+var import_react35 = require("react");
+var import_core26 = require("@xaui/core");
 var knownVariants = {
   caption: true,
   headlineLarge: true,
@@ -2309,18 +2775,18 @@ var isKnownVariant = (variant) => {
 };
 var useTypographyColor = (themeColor) => {
   const theme = useXUITheme();
-  const color = (0, import_react30.useMemo)(() => {
+  const color = (0, import_react35.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.foreground;
     }
-    const safeThemeColor = (0, import_core21.getSafeThemeColor)(themeColor);
+    const safeThemeColor = (0, import_core26.getSafeThemeColor)(themeColor);
     return theme.colors[safeThemeColor].main;
   }, [theme, themeColor]);
   return color;
 };
 var useTypographyVariantStyles = (variant) => {
   const theme = useXUITheme();
-  const variantStyles = (0, import_react30.useMemo)(() => {
+  const variantStyles = (0, import_react35.useMemo)(() => {
     if (!isKnownVariant(variant)) {
       return {
         fontFamily: theme.fontFamilies.body,
@@ -2328,7 +2794,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles8 = {
+    const styles10 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -2380,7 +2846,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles8[variant];
+    return styles10[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -2398,18 +2864,18 @@ var Typography = ({
   const color = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
   const colorStyle = { color };
-  const ellipsizeMode = (0, import_react31.useMemo)(() => {
+  const ellipsizeMode = (0, import_react36.useMemo)(() => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
     return "tail";
   }, [maxLines, overflow]);
-  return /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native26.Text,
+  return /* @__PURE__ */ import_react36.default.createElement(
+    import_react_native31.Text,
     {
       numberOfLines: maxLines,
       ellipsizeMode,
       style: [
-        styles7.text,
+        styles9.text,
         variantStyles,
         align && { textAlign: align },
         colorStyle,
@@ -2425,6 +2891,9 @@ var Typography = ({
   Alert,
   Autocomplete,
   AutocompleteItem,
+  Avatar,
+  AvatarGroup,
+  Badge,
   Divider,
   Typography
 });