@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/carousel/index.d.cts

@@ -1,147 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { Radius } from '@xaui/core/types';
-
-/**
- * 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.d.ts

@@ -1,147 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { Radius } from '@xaui/core/types';
-
-/**
- * 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

@@ -1,381 +0,0 @@
-import {
-  useBorderRadiusStyles
-} from "../chunk-RBSA4NH4.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
-};