@xaui/native 0.0.17 → 0.0.19

package/dist/chunk-DBKVHMSA.js

@@ -1,329 +0,0 @@
-import {
-  Fab
-} from "./chunk-TJ2FPLLZ.js";
-import {
-  Portal,
-  useXUITheme
-} from "./chunk-MZL77KV5.js";
-
-// src/components/fab-menu/fab-menu.tsx
-import React from "react";
-import { Pressable, View, Animated as Animated2 } from "react-native";
-
-// src/components/fab-menu/fab-menu.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    position: "relative",
-    alignItems: "flex-end"
-  },
-  portalRoot: {
-    ...StyleSheet.absoluteFillObject
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject
-  },
-  overlayPressable: {
-    flex: 1
-  },
-  portalContent: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: "flex-end",
-    alignItems: "flex-end",
-    padding: 16
-  },
-  menuContainer: {
-    alignItems: "flex-end",
-    marginBottom: 16
-  },
-  menuItem: {
-    marginBottom: 12
-  },
-  menuItemChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 12,
-    paddingLeft: 16,
-    paddingRight: 20,
-    gap: 8
-  },
-  menuItemLabel: {
-    fontWeight: "500"
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/fab-menu/fab-menu.hook.ts
-import { useMemo, useState, useCallback } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-function useFabMenuState(controlledExpanded, onToggle) {
-  const [internalExpanded, setInternalExpanded] = useState(false);
-  const isControlled = controlledExpanded !== void 0;
-  const expanded = isControlled ? controlledExpanded : internalExpanded;
-  const toggle = useCallback(() => {
-    const next = !expanded;
-    if (!isControlled) {
-      setInternalExpanded(next);
-    }
-    onToggle?.(next);
-  }, [expanded, isControlled, onToggle]);
-  const close = useCallback(() => {
-    if (!isControlled) {
-      setInternalExpanded(false);
-    }
-    onToggle?.(false);
-  }, [isControlled, onToggle]);
-  return { expanded, toggle, close };
-}
-function useFabMenuItemStyles(themeColor) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const itemStyles = useMemo(() => {
-    const chipStyles = {
-      backgroundColor: colorScheme.background,
-      borderRadius: theme.borderRadius.full,
-      color: colorScheme.main,
-      fontSize: theme.fontSizes.md
-    };
-    const iconColor = colorScheme.main;
-    return { chipStyles, iconColor };
-  }, [colorScheme, theme]);
-  return itemStyles;
-}
-function useFabMenuOverlayColor() {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    return theme.mode === "dark" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)";
-  }, [theme.mode]);
-}
-
-// src/components/fab-menu/fab-menu.animation.ts
-import { Animated } from "react-native";
-var runMenuExpandAnimation = (overlayOpacity, itemAnimations) => {
-  const itemSequence = itemAnimations.map(
-    (anim, index) => Animated.timing(anim, {
-      toValue: 1,
-      duration: 150,
-      delay: index * 50,
-      useNativeDriver: true
-    })
-  );
-  Animated.parallel([
-    Animated.timing(overlayOpacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    Animated.stagger(50, itemSequence)
-  ]).start();
-};
-var runMenuCollapseAnimation = (overlayOpacity, itemAnimations, onComplete) => {
-  const reversed = [...itemAnimations].reverse();
-  const itemSequence = reversed.map(
-    (anim, index) => Animated.timing(anim, {
-      toValue: 0,
-      duration: 120,
-      delay: index * 30,
-      useNativeDriver: true
-    })
-  );
-  Animated.parallel([
-    Animated.timing(overlayOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    Animated.stagger(30, itemSequence)
-  ]).start(onComplete);
-};
-var runFabRotateAnimation = (rotateValue, toExpanded) => {
-  Animated.spring(rotateValue, {
-    toValue: toExpanded ? 1 : 0,
-    useNativeDriver: true,
-    speed: 20,
-    bounciness: 0
-  }).start();
-};
-
-// src/components/fab-menu/fab-menu.tsx
-var FabMenu = ({
-  icon,
-  label,
-  expandedIcon,
-  children,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius,
-  elevation = 0,
-  isExpanded: controlledExpanded,
-  onToggle,
-  showOverlay = true,
-  customAppearance
-}) => {
-  const { expanded, toggle, close } = useFabMenuState(controlledExpanded, onToggle);
-  const overlayColor = useFabMenuOverlayColor();
-  const [isPortalVisible, setIsPortalVisible] = React.useState(expanded);
-  const childArray = React.Children.toArray(children);
-  const overlayOpacity = React.useRef(new Animated2.Value(expanded ? 1 : 0)).current;
-  const rotateValue = React.useRef(new Animated2.Value(expanded ? 1 : 0)).current;
-  const itemAnimationsRef = React.useRef(childArray.map(() => new Animated2.Value(0)));
-  const itemAnimations = itemAnimationsRef.current;
-  const prevExpanded = React.useRef(expanded);
-  React.useEffect(() => {
-    if (itemAnimations.length === childArray.length) return;
-    itemAnimationsRef.current = childArray.map(
-      (_, index) => itemAnimations[index] ?? new Animated2.Value(expanded ? 1 : 0)
-    );
-  }, [expanded, itemAnimations, childArray]);
-  React.useEffect(() => {
-    if (prevExpanded.current === expanded) return;
-    prevExpanded.current = expanded;
-    if (expanded) {
-      setIsPortalVisible(true);
-      runMenuExpandAnimation(overlayOpacity, itemAnimations);
-      runFabRotateAnimation(rotateValue, true);
-    } else {
-      runMenuCollapseAnimation(overlayOpacity, itemAnimations, () => {
-        setIsPortalVisible(false);
-      });
-      runFabRotateAnimation(rotateValue, false);
-    }
-  }, [expanded, overlayOpacity, itemAnimations, rotateValue]);
-  const rotation = rotateValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "45deg"]
-  });
-  const currentIcon = expanded && expandedIcon ? expandedIcon : icon;
-  const renderFabToggle = () => /* @__PURE__ */ React.createElement(
-    Animated2.View,
-    {
-      style: {
-        alignSelf: "flex-end",
-        transform: [{ rotate: expandedIcon ? "0deg" : rotation }]
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Fab,
-      {
-        icon: currentIcon,
-        label,
-        themeColor,
-        variant,
-        size,
-        radius,
-        elevation,
-        onPress: toggle,
-        customAppearance: { fab: customAppearance?.fab }
-      }
-    )
-  );
-  const renderMenuItems = () => /* @__PURE__ */ React.createElement(View, { style: [styles.menuContainer, customAppearance?.menuContainer] }, childArray.map((child, index) => {
-    const childElement = child;
-    const isDisabled = childElement.props?.isDisabled;
-    return /* @__PURE__ */ React.createElement(
-      Animated2.View,
-      {
-        key: childElement.key ?? index,
-        style: [
-          styles.menuItem,
-          isDisabled && styles.disabled,
-          {
-            opacity: itemAnimations[index],
-            transform: [
-              {
-                translateY: itemAnimations[index].interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [20, 0]
-                })
-              },
-              {
-                scale: itemAnimations[index].interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.8, 1]
-                })
-              }
-            ]
-          },
-          customAppearance?.menuItem
-        ]
-      },
-      React.cloneElement(childElement, {
-        _onClose: close,
-        themeColor: childElement.props?.themeColor ?? themeColor
-      })
-    );
-  }));
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, isPortalVisible && /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(View, { style: styles.portalRoot }, showOverlay && /* @__PURE__ */ React.createElement(
-    Animated2.View,
-    {
-      style: [
-        styles.overlay,
-        { backgroundColor: overlayColor, opacity: overlayOpacity },
-        customAppearance?.overlay
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Pressable, { style: styles.overlayPressable, onPress: close })
-  ), /* @__PURE__ */ React.createElement(View, { style: styles.portalContent }, renderMenuItems(), renderFabToggle()))), !isPortalVisible && renderFabToggle());
-};
-
-// src/components/fab-menu/fab-menu-item.tsx
-import React2 from "react";
-import { Pressable as Pressable2, Text } from "react-native";
-var FabMenuItem = ({
-  icon,
-  label,
-  themeColor = "primary",
-  onPress,
-  isDisabled,
-  _onClose
-}) => {
-  const itemStyles = useFabMenuItemStyles(themeColor);
-  const renderIcon = (menuIcon) => {
-    if (!React2.isValidElement(menuIcon)) return menuIcon;
-    return React2.cloneElement(
-      menuIcon,
-      { color: itemStyles.iconColor }
-    );
-  };
-  return /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      style: [
-        styles.menuItemChip,
-        {
-          backgroundColor: itemStyles.chipStyles.backgroundColor,
-          borderRadius: itemStyles.chipStyles.borderRadius
-        }
-      ],
-      onPress: (event) => {
-        if (isDisabled) return;
-        onPress?.(event);
-        _onClose?.();
-      },
-      disabled: isDisabled
-    },
-    renderIcon(icon),
-    /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        style: [
-          styles.menuItemLabel,
-          {
-            color: itemStyles.chipStyles.color,
-            fontSize: itemStyles.chipStyles.fontSize
-          }
-        ]
-      },
-      label
-    )
-  );
-};
-
-export {
-  FabMenu,
-  FabMenuItem
-};

package/dist/chunk-EW5YLICE.js

@@ -1,382 +0,0 @@
-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
-};