@xaui/native 0.0.16 → 0.0.18

package/dist/carousel/index.d.ts

@@ -0,0 +1,147 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.js';
+
+/**
+ * Carousel layout variants
+ * - multi-browse: Shows multiple items with the main item centered
+ * - uncontained: Items can be scrolled freely without constraints
+ * - hero: Single large item display
+ * - full-screen: Items take the full width of the screen
+ */
+type CarouselLayout = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
+/**
+ * Custom appearance styles for carousel components
+ */
+type CarouselCustomAppearance = {
+    /**
+     * Custom style for the carousel container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for each carousel item
+     */
+    item?: ViewStyle;
+    /**
+     * Custom style for the indicator container
+     */
+    indicatorContainer?: ViewStyle;
+    /**
+     * Custom style for inactive indicators
+     */
+    indicator?: ViewStyle;
+    /**
+     * Custom style for the active indicator
+     */
+    activeIndicator?: ViewStyle;
+};
+type CarouselProps<T> = {
+    /**
+     * Array of data items to be displayed in the carousel
+     */
+    data: T[];
+    /**
+     * Function to render each carousel item
+     */
+    renderItem: (info: {
+        item: T;
+        index: number;
+    }) => ReactNode;
+    /**
+     * Function to extract unique keys for each item
+     */
+    keyExtractor?: (item: T, index: number) => string;
+    /**
+     * The layout variant of the carousel
+     * @default 'multi-browse'
+     */
+    layout?: CarouselLayout;
+    /**
+     * Width of each carousel item in pixels
+     */
+    itemWidth?: number;
+    /**
+     * Height of each carousel item in pixels
+     */
+    itemHeight?: number;
+    /**
+     * Spacing between carousel items in pixels
+     * @default 4 for 'multi-browse', 8 for other layouts
+     */
+    itemSpacing?: number;
+    /**
+     * Padding around the carousel content in pixels
+     * @default 16
+     */
+    contentPadding?: number;
+    /**
+     * Border radius of carousel items
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether to show the indicator dots below the carousel
+     * @default true
+     */
+    showIndicator?: boolean;
+    /**
+     * Whether to enable auto-play functionality
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Interval in milliseconds between auto-play transitions
+     * @default 3000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Initial index to display when the carousel mounts
+     * @default 0
+     */
+    initialIndex?: number;
+    /**
+     * Callback fired when the active item changes
+     */
+    onActiveItemChange?: (index: number) => void;
+    /**
+     * Custom appearance styles for carousel components
+     */
+    customAppearance?: CarouselCustomAppearance;
+};
+/**
+ * Props for individual carousel item wrapper
+ */
+type CarouselItemProps = {
+    /**
+     * Content to be displayed inside the carousel item
+     */
+    children: ReactNode;
+    /**
+     * Width of the carousel item in pixels
+     */
+    width: number;
+    /**
+     * Height of the carousel item in pixels
+     */
+    height: number;
+    /**
+     * Border radius of the carousel item in pixels
+     */
+    radius: number;
+    /**
+     * Spacing to apply after the item (margin right)
+     */
+    spacing: number;
+    /**
+     * Whether this is the last item in the carousel
+     */
+    isLast: boolean;
+    /**
+     * Custom style to be applied to the item container
+     */
+    customStyle?: ViewStyle;
+};
+
+declare function Carousel<T>({ data, renderItem, keyExtractor, layout, itemWidth, itemHeight, itemSpacing, contentPadding, radius, showIndicator, autoPlay, autoPlayInterval, initialIndex, onActiveItemChange, customAppearance, }: CarouselProps<T>): React.JSX.Element;
+
+export { Carousel, type CarouselCustomAppearance, type CarouselItemProps, type CarouselLayout, type CarouselProps };

package/dist/carousel/index.js

@@ -0,0 +1,381 @@
+import {
+  useBorderRadiusStyles
+} from "../chunk-LTKYHG5V.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/checkbox/index.js

@@ -1,6 +1,7 @@
+import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/checkbox/checkbox.tsx
 import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";

package/dist/chip/index.cjs

@@ -278,10 +278,7 @@ var Chip = ({
   ]);
   const animatedBackgroundColor = colorProgress.interpolate({
     inputRange: [0, 1],
-    outputRange: [
-      previousColorsRef.current.backgroundColor,
-      targetBackgroundColor
-    ]
+    outputRange: [previousColorsRef.current.backgroundColor, targetBackgroundColor]
   });
   const animatedBorderColor = colorProgress.interpolate({
     inputRange: [0, 1],
@@ -461,10 +458,7 @@ function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues
     },
     [currentValues, isControlled, onSelectionChange, selectMode]
   );
-  return (0, import_react9.useMemo)(
-    () => ({ currentValues, onToggle }),
-    [currentValues, onToggle]
-  );
+  return (0, import_react9.useMemo)(() => ({ currentValues, onToggle }), [currentValues, onToggle]);
 }
 
 // src/components/chip/chip-group.tsx