@xaui/native 0.0.16 → 0.0.17

package/dist/accordion/index.cjs

@@ -290,7 +290,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = (0, import_core3.addOpacityToColor)(theme.colors.default.background, 0.5);
+      base.backgroundColor = (0, import_core3.withOpacity)(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/accordion/index.js

@@ -1,10 +1,11 @@
 import {
   Divider
-} from "../chunk-GNJIET26.js";
+} from "../chunk-RIVFFZRO.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useXUIPalette,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-MZL77KV5.js";
 
 // src/components/accordion/accordion.tsx
 import React4 from "react";
@@ -139,7 +140,7 @@ import {
   Easing
 } from "react-native";
 import { colors as palette } from "@xaui/core/palette";
-import { addOpacityToColor } from "@xaui/core";
+import { withOpacity } from "@xaui/core";
 var useAccordionItemState = (itemKey) => {
   const context = useAccordionContext();
   const resolvedItemKey = itemKey ?? "";
@@ -219,7 +220,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = addOpacityToColor(theme.colors.default.background, 0.5);
+      base.backgroundColor = withOpacity(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/alert/index.js

@@ -1,7 +1,8 @@
 import {
   Alert
-} from "../chunk-2T6FKPJW.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-OXVIVNIJ.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Alert
 };

package/dist/autocomplete/index.cjs

@@ -508,13 +508,7 @@ var styles2 = import_react_native5.StyleSheet.create({
 });
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var addOpacityToColor = (color, opacity) => {
-  const hex = color.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
+var import_core4 = require("@xaui/core");
 var AutocompleteDialogHeader = ({
   title,
   inputValue,
@@ -545,7 +539,7 @@ var AutocompleteDialogHeader = ({
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
+      placeholderTextColor: (0, import_core4.withOpacity)(theme.colors.foreground, 0.5),
       style: [
         styles2.input,
         {
@@ -1073,7 +1067,7 @@ var styles3 = import_react_native11.StyleSheet.create({
 
 // src/components/autocomplete/autocomplete-item.hook.ts
 var import_react15 = require("react");
-var import_core6 = require("@xaui/core");
+var import_core7 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
   return (0, import_react15.useMemo)(() => {
@@ -1108,7 +1102,7 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     return "transparent";
@@ -1125,7 +1119,7 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     if (themeColor === "default") {

package/dist/autocomplete/index.js

@@ -1,9 +1,10 @@
 import {
   Autocomplete,
   AutocompleteItem
-} from "../chunk-NMZUPH3R.js";
+} from "../chunk-XUYIAA3A.js";
 import "../chunk-GBHQCAKW.js";
-import "../chunk-NBRASCX4.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Autocomplete,
   AutocompleteItem

package/dist/avatar/index.js

@@ -1,8 +1,9 @@
 import {
   Avatar,
   AvatarGroup
-} from "../chunk-4LFRYVSR.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-K2HSVISE.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Avatar,
   AvatarGroup

package/dist/badge/index.js

@@ -1,7 +1,8 @@
 import {
   Badge
-} from "../chunk-XJKA22BK.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-UGDGCMGC.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Badge
 };

package/dist/bottom-sheet/index.cjs

@@ -242,7 +242,13 @@ var useBottomSheetAnimation = ({
         snapTranslateValues[clampedIndex]
       );
     },
-    [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
   );
   (0, import_react6.useEffect)(() => {
     if (isOpen) {
@@ -417,19 +423,7 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native7.Animated.View,
-    {
-      style: [styles.backdrop, { opacity: backdropOpacity }]
-    },
-    /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native7.Pressable,
-      {
-        style: styles.backdrop,
-        onPress: handleBackdropPress
-      }
-    )
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react7.default.createElement(
     import_react_native7.Animated.View,
     {
       style: [
@@ -443,12 +437,7 @@ var BottomSheet = ({
     /* @__PURE__ */ import_react7.default.createElement(
       import_react_native7.View,
       {
-        style: [
-          styles.sheet,
-          { height: screenHeight },
-          sheetStyles,
-          style
-        ],
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
         ...panResponder.panHandlers
       },
       showHandle && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ import_react7.default.createElement(

package/dist/bottom-sheet/index.js

@@ -1,7 +1,8 @@
 import {
   BottomSheet
-} from "../chunk-GAOI4KIV.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-S3MGBM3G.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   BottomSheet
 };

package/dist/button/index.js

@@ -1,10 +1,11 @@
 import {
   ActivityIndicator
-} from "../chunk-MKHBEJLO.js";
+} from "../chunk-VUVE6PK7.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-MZL77KV5.js";
 
 // src/components/button/button.tsx
 import React from "react";

package/dist/carousel/index.cjs

@@ -0,0 +1,458 @@
+"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);
+
+// src/components/carousel/index.ts
+var carousel_exports = {};
+__export(carousel_exports, {
+  Carousel: () => Carousel
+});
+module.exports = __toCommonJS(carousel_exports);
+
+// src/components/carousel/carousel.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"), 1);
+
+// src/components/carousel/carousel.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  item: {
+    overflow: "hidden"
+  },
+  indicatorContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 12,
+    gap: 8
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#CAC4D0"
+  },
+  activeIndicator: {
+    width: 24,
+    borderRadius: 4,
+    backgroundColor: "#49454F"
+  }
+});
+
+// src/components/carousel/carousel.hook.ts
+var import_react = require("react");
+var HERO_PEEK_WIDTH = 56;
+function computeMultiBrowseLayout(config) {
+  const { preferredItemWidth, itemSpacing } = config;
+  return {
+    computedItemWidth: preferredItemWidth,
+    snapInterval: preferredItemWidth + itemSpacing,
+    pagingEnabled: false
+  };
+}
+function computeUncontainedLayout(config) {
+  const { preferredItemWidth, itemSpacing } = config;
+  return {
+    computedItemWidth: preferredItemWidth,
+    snapInterval: preferredItemWidth + itemSpacing,
+    pagingEnabled: false
+  };
+}
+function computeHeroLayout(config) {
+  const { containerWidth, contentPadding, itemSpacing } = config;
+  const availableWidth = containerWidth - 2 * contentPadding;
+  const largeItemWidth = availableWidth - HERO_PEEK_WIDTH - itemSpacing;
+  return {
+    computedItemWidth: Math.max(largeItemWidth, 0),
+    snapInterval: Math.max(largeItemWidth + itemSpacing, 1),
+    pagingEnabled: false
+  };
+}
+function computeFullScreenLayout(config) {
+  const { containerWidth } = config;
+  return {
+    computedItemWidth: containerWidth,
+    snapInterval: containerWidth,
+    pagingEnabled: true
+  };
+}
+function useCarouselLayout(config) {
+  return (0, import_react.useMemo)(() => {
+    const layoutMap = {
+      "multi-browse": computeMultiBrowseLayout,
+      uncontained: computeUncontainedLayout,
+      hero: computeHeroLayout,
+      "full-screen": computeFullScreenLayout
+    };
+    const compute = layoutMap[config.layout] ?? computeMultiBrowseLayout;
+    return compute(config);
+  }, [
+    config.layout,
+    config.containerWidth,
+    config.preferredItemWidth,
+    config.itemSpacing,
+    config.contentPadding
+  ]);
+}
+
+// src/components/carousel/carousel-item.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var CarouselItem = ({
+  children,
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle
+}) => /* @__PURE__ */ import_react2.default.createElement(
+  import_react_native2.View,
+  {
+    style: [
+      styles.item,
+      {
+        width,
+        height,
+        borderRadius: radius,
+        marginRight: isLast ? 0 : spacing
+      },
+      customStyle
+    ]
+  },
+  children
+);
+
+// src/components/carousel/animated-carousel-item.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
+var AnimatedCarouselItem = ({
+  children,
+  index,
+  scrollX,
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle,
+  layout,
+  snapInterval,
+  containerWidth,
+  contentPadding
+}) => {
+  const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+    const inputRange = [
+      (index - 1) * snapInterval,
+      index * snapInterval,
+      (index + 1) * snapInterval
+    ];
+    if (layout === "multi-browse") {
+      const scale = (0, import_react_native_reanimated.interpolate)(
+        scrollX.value,
+        inputRange,
+        [0.85, 1, 0.85],
+        import_react_native_reanimated.Extrapolation.CLAMP
+      );
+      const opacity = (0, import_react_native_reanimated.interpolate)(
+        scrollX.value,
+        inputRange,
+        [0.6, 1, 0.6],
+        import_react_native_reanimated.Extrapolation.CLAMP
+      );
+      return {
+        transform: [{ scale }],
+        opacity
+      };
+    }
+    if (layout === "hero") {
+      const centerOffset = containerWidth / 2 - contentPadding - width / 2;
+      const itemPosition = index * snapInterval + contentPadding;
+      const inputRangeHero = [
+        itemPosition - centerOffset - snapInterval,
+        itemPosition - centerOffset,
+        itemPosition - centerOffset + snapInterval
+      ];
+      const scale = (0, import_react_native_reanimated.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [0.9, 1, 0.9],
+        import_react_native_reanimated.Extrapolation.CLAMP
+      );
+      const opacity = (0, import_react_native_reanimated.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [0.5, 1, 0.5],
+        import_react_native_reanimated.Extrapolation.CLAMP
+      );
+      const translateX = (0, import_react_native_reanimated.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [-10, 0, 10],
+        import_react_native_reanimated.Extrapolation.CLAMP
+      );
+      return {
+        transform: [{ scale }, { translateX }],
+        opacity
+      };
+    }
+    return {};
+  }, [index, snapInterval, layout, containerWidth, contentPadding, width]);
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_react_native_reanimated.default.View,
+    {
+      style: [
+        styles.item,
+        {
+          width,
+          height,
+          borderRadius: radius,
+          marginRight: isLast ? 0 : spacing
+        },
+        customStyle,
+        animatedStyle
+      ]
+    },
+    children
+  );
+};
+
+// src/core/theme-hooks.ts
+var import_react8 = require("react");
+var import_react_native5 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native4 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react5 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react4 = require("react");
+var PortalContext = (0, import_react4.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var hostStyles = import_react_native3.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react7.createContext)(null);
+
+// src/core/theme-hooks.ts
+function useXUITheme() {
+  const theme = (0, import_react8.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = (0, import_react8.useMemo)(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+// src/components/carousel/carousel.tsx
+var DEFAULT_ITEM_WIDTH = 196;
+var DEFAULT_ITEM_HEIGHT = 205;
+var DEFAULT_ITEM_SPACING = 8;
+var DEFAULT_ITEM_SPACING_MULTI_BROWSE = 4;
+var DEFAULT_CONTENT_PADDING = 16;
+var DEFAULT_AUTO_PLAY_INTERVAL = 3e3;
+function Carousel({
+  data,
+  renderItem,
+  keyExtractor,
+  layout = "multi-browse",
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  itemSpacing,
+  contentPadding = DEFAULT_CONTENT_PADDING,
+  radius = "lg",
+  showIndicator = false,
+  autoPlay = false,
+  autoPlayInterval = DEFAULT_AUTO_PLAY_INTERVAL,
+  initialIndex = 0,
+  onActiveItemChange,
+  customAppearance
+}) {
+  const [containerWidth, setContainerWidth] = (0, import_react9.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(initialIndex);
+  const scrollRef = (0, import_react_native_reanimated2.useAnimatedRef)();
+  const onActiveItemChangeRef = (0, import_react9.useRef)(onActiveItemChange);
+  onActiveItemChangeRef.current = onActiveItemChange;
+  const scrollX = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const { borderRadius } = useBorderRadiusStyles(radius);
+  const defaultSpacing = layout === "multi-browse" ? DEFAULT_ITEM_SPACING_MULTI_BROWSE : DEFAULT_ITEM_SPACING;
+  const resolvedSpacing = itemSpacing ?? defaultSpacing;
+  const isFullScreen = layout === "full-screen";
+  const effectivePadding = isFullScreen ? 0 : contentPadding;
+  const effectiveSpacing = isFullScreen ? 0 : resolvedSpacing;
+  const { computedItemWidth, snapInterval, pagingEnabled } = useCarouselLayout({
+    layout,
+    containerWidth,
+    preferredItemWidth: itemWidth,
+    itemSpacing: effectiveSpacing,
+    contentPadding: effectivePadding
+  });
+  const handleLayout = (0, import_react9.useCallback)((event) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+  const scrollHandler = (0, import_react_native_reanimated2.useAnimatedScrollHandler)({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    }
+  });
+  const handleMomentumScrollEnd = (0, import_react9.useCallback)(
+    (event) => {
+      if (snapInterval <= 0) return;
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const newIndex = Math.round(offsetX / snapInterval);
+      const clampedIndex = Math.max(0, Math.min(newIndex, data.length - 1));
+      setActiveIndex(clampedIndex);
+      onActiveItemChangeRef.current?.(clampedIndex);
+    },
+    [snapInterval, data.length]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (!autoPlay || data.length <= 1) return;
+    if (containerWidth <= 0 || snapInterval <= 0) return;
+    const timer = setInterval(() => {
+      setActiveIndex((prev) => {
+        const nextIndex = (prev + 1) % data.length;
+        scrollRef.current?.scrollTo({ x: nextIndex * snapInterval, animated: true });
+        onActiveItemChangeRef.current?.(nextIndex);
+        return nextIndex;
+      });
+    }, autoPlayInterval);
+    return () => clearInterval(timer);
+  }, [autoPlay, autoPlayInterval, data.length, snapInterval, containerWidth]);
+  if (containerWidth <= 0) {
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: customAppearance?.container, onLayout: handleLayout });
+  }
+  const shouldAnimate = layout === "multi-browse" || layout === "hero";
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: customAppearance?.container, onLayout: handleLayout }, /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native_reanimated2.default.ScrollView,
+    {
+      ref: scrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      snapToInterval: pagingEnabled ? void 0 : snapInterval,
+      pagingEnabled,
+      decelerationRate: "fast",
+      contentContainerStyle: [
+        styles.scrollContent,
+        { paddingHorizontal: effectivePadding }
+      ],
+      onScroll: scrollHandler,
+      scrollEventThrottle: 16,
+      onMomentumScrollEnd: handleMomentumScrollEnd,
+      contentOffset: { x: initialIndex * snapInterval, y: 0 }
+    },
+    data.map((item, index) => {
+      const content = renderItem({ item, index });
+      if (shouldAnimate) {
+        return /* @__PURE__ */ import_react9.default.createElement(
+          AnimatedCarouselItem,
+          {
+            key: keyExtractor ? keyExtractor(item, index) : String(index),
+            index,
+            scrollX,
+            width: computedItemWidth,
+            height: itemHeight,
+            radius: borderRadius,
+            spacing: effectiveSpacing,
+            isLast: index === data.length - 1,
+            customStyle: customAppearance?.item,
+            layout,
+            snapInterval,
+            containerWidth,
+            contentPadding: effectivePadding
+          },
+          content
+        );
+      }
+      return /* @__PURE__ */ import_react9.default.createElement(
+        CarouselItem,
+        {
+          key: keyExtractor ? keyExtractor(item, index) : String(index),
+          width: computedItemWidth,
+          height: itemHeight,
+          radius: borderRadius,
+          spacing: effectiveSpacing,
+          isLast: index === data.length - 1,
+          customStyle: customAppearance?.item
+        },
+        content
+      );
+    })
+  ), showIndicator && data.length > 1 && /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.View,
+    {
+      style: [styles.indicatorContainer, customAppearance?.indicatorContainer]
+    },
+    data.map((_, index) => /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        key: `indicator-${String(index)}`,
+        style: [
+          styles.indicator,
+          customAppearance?.indicator,
+          activeIndex === index && styles.activeIndicator,
+          activeIndex === index && customAppearance?.activeIndicator
+        ]
+      }
+    ))
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel
+});