@xaui/native 0.0.16 → 0.0.17

package/dist/chunk-EW5YLICE.js

@@ -0,0 +1,382 @@
+import {
+  useBorderRadiusStyles
+} from "./chunk-MZL77KV5.js";
+
+// src/components/carousel/carousel.tsx
+import React3, { useState, useRef, useCallback, useEffect } from "react";
+import { View as View2 } from "react-native";
+import Animated2, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  useAnimatedRef
+} from "react-native-reanimated";
+
+// src/components/carousel/carousel.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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
+import { useMemo } from "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 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
+import React from "react";
+import { View } from "react-native";
+var CarouselItem = ({
+  children,
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle
+}) => /* @__PURE__ */ React.createElement(
+  View,
+  {
+    style: [
+      styles.item,
+      {
+        width,
+        height,
+        borderRadius: radius,
+        marginRight: isLast ? 0 : spacing
+      },
+      customStyle
+    ]
+  },
+  children
+);
+
+// src/components/carousel/animated-carousel-item.tsx
+import React2 from "react";
+import Animated, {
+  useAnimatedStyle,
+  interpolate,
+  Extrapolation
+} from "react-native-reanimated";
+var AnimatedCarouselItem = ({
+  children,
+  index,
+  scrollX,
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle,
+  layout,
+  snapInterval,
+  containerWidth,
+  contentPadding
+}) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    const inputRange = [
+      (index - 1) * snapInterval,
+      index * snapInterval,
+      (index + 1) * snapInterval
+    ];
+    if (layout === "multi-browse") {
+      const scale = interpolate(
+        scrollX.value,
+        inputRange,
+        [0.85, 1, 0.85],
+        Extrapolation.CLAMP
+      );
+      const opacity = interpolate(
+        scrollX.value,
+        inputRange,
+        [0.6, 1, 0.6],
+        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 = interpolate(
+        scrollX.value,
+        inputRangeHero,
+        [0.9, 1, 0.9],
+        Extrapolation.CLAMP
+      );
+      const opacity = interpolate(
+        scrollX.value,
+        inputRangeHero,
+        [0.5, 1, 0.5],
+        Extrapolation.CLAMP
+      );
+      const translateX = interpolate(
+        scrollX.value,
+        inputRangeHero,
+        [-10, 0, 10],
+        Extrapolation.CLAMP
+      );
+      return {
+        transform: [{ scale }, { translateX }],
+        opacity
+      };
+    }
+    return {};
+  }, [index, snapInterval, layout, containerWidth, contentPadding, width]);
+  return /* @__PURE__ */ React2.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.item,
+        {
+          width,
+          height,
+          borderRadius: radius,
+          marginRight: isLast ? 0 : spacing
+        },
+        customStyle,
+        animatedStyle
+      ]
+    },
+    children
+  );
+};
+
+// 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] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(initialIndex);
+  const scrollRef = useAnimatedRef();
+  const onActiveItemChangeRef = useRef(onActiveItemChange);
+  onActiveItemChangeRef.current = onActiveItemChange;
+  const scrollX = 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 = useCallback((event) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    }
+  });
+  const handleMomentumScrollEnd = 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]
+  );
+  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__ */ React3.createElement(View2, { style: customAppearance?.container, onLayout: handleLayout });
+  }
+  const shouldAnimate = layout === "multi-browse" || layout === "hero";
+  return /* @__PURE__ */ React3.createElement(View2, { style: customAppearance?.container, onLayout: handleLayout }, /* @__PURE__ */ React3.createElement(
+    Animated2.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__ */ React3.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__ */ React3.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__ */ React3.createElement(
+    View2,
+    {
+      style: [styles.indicatorContainer, customAppearance?.indicatorContainer]
+    },
+    data.map((_, index) => /* @__PURE__ */ React3.createElement(
+      View2,
+      {
+        key: `indicator-${String(index)}`,
+        style: [
+          styles.indicator,
+          customAppearance?.indicator,
+          activeIndex === index && styles.activeIndicator,
+          activeIndex === index && customAppearance?.activeIndicator
+        ]
+      }
+    ))
+  ));
+}
+
+export {
+  Carousel
+};

package/dist/{chunk-7OFTYKK4.js → chunk-JJOVGRNI.js}

@@ -1,7 +1,7 @@
 import {
   Portal,
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/datepicker/datepicker.tsx
 import React7, { useCallback as useCallback5, useMemo as useMemo6, useRef as useRef6 } from "react";

package/dist/{chunk-4LFRYVSR.js → chunk-K2HSVISE.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/avatar/avatar.tsx
 import React from "react";

package/dist/{chunk-NBRASCX4.js → chunk-MZL77KV5.js}

@@ -1,9 +1,3 @@
-// src/core/theme-context.tsx
-import React3, { createContext as createContext2 } from "react";
-import { useColorScheme } from "react-native";
-import { defaultTheme } from "@xaui/core/theme";
-import { colors } from "@xaui/core/palette";
-
 // src/core/portal/portal.tsx
 import { useContext, useEffect, useLayoutEffect, useRef } from "react";
 
@@ -57,6 +51,10 @@ var PortalHost = ({ children }) => {
 };
 
 // src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext2(null);
 function XUIProvider({
   children,
@@ -128,9 +126,6 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
-// src/core/index.ts
-import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
-
 export {
   Portal,
   PortalHost,
@@ -139,7 +134,5 @@ export {
   useXUITheme,
   useXUIColors,
   useXUIPalette,
-  useBorderRadiusStyles,
-  defaultDarkTheme,
-  defaultTheme2 as defaultTheme
+  useBorderRadiusStyles
 };

package/dist/{chunk-2T6FKPJW.js → chunk-OXVIVNIJ.js}

@@ -1,7 +1,7 @@
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/alert/alert.tsx
 import React2, {

package/dist/{chunk-ZYTBRHLJ.js → chunk-PWCUULAL.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/typography/typography.tsx
 import React, { useMemo as useMemo2 } from "react";

package/dist/{chunk-GNJIET26.js → chunk-RIVFFZRO.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/divider/divider.tsx
 import React from "react";

package/dist/{chunk-GAOI4KIV.js → chunk-S3MGBM3G.js}

@@ -1,7 +1,7 @@
 import {
   Portal,
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-MZL77KV5.js";
 
 // src/components/bottom-sheet/bottom-sheet.tsx
 import React from "react";
@@ -151,7 +151,13 @@ var useBottomSheetAnimation = ({
         snapTranslateValues[clampedIndex]
       );
     },
-    [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
   );
   useEffect(() => {
     if (isOpen) {
@@ -326,19 +332,7 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ React.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React.createElement(
-    Animated3.View,
-    {
-      style: [styles.backdrop, { opacity: backdropOpacity }]
-    },
-    /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        style: styles.backdrop,
-        onPress: handleBackdropPress
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React.createElement(Animated3.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React.createElement(
     Animated3.View,
     {
       style: [
@@ -352,12 +346,7 @@ var BottomSheet = ({
     /* @__PURE__ */ React.createElement(
       View,
       {
-        style: [
-          styles.sheet,
-          { height: screenHeight },
-          sheetStyles,
-          style
-        ],
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
         ...panResponder.panHandlers
       },
       showHandle && /* @__PURE__ */ React.createElement(View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ React.createElement(