@xaui/native 0.0.16 → 0.0.18

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
+});

package/dist/carousel/index.d.cts

@@ -0,0 +1,147 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.cjs';
+
+/**
+ * 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 };