@xaui/native 0.0.15 → 0.0.17

package/dist/index.cjs

@@ -38,11 +38,17 @@ __export(src_exports, {
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BottomSheet: () => BottomSheet,
+  Carousel: () => Carousel,
   Chip: () => Chip,
   ChipGroup: () => ChipGroup,
   ChipItem: () => ChipItem,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
+  Fab: () => Fab,
+  FabMenu: () => FabMenu,
+  FabMenuItem: () => FabMenuItem,
+  SegmentButton: () => SegmentButton,
+  SegmentButtonItem: () => SegmentButtonItem,
   Typography: () => Typography
 });
 module.exports = __toCommonJS(src_exports);
@@ -1445,7 +1451,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles14 = {
+    const styles18 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1470,7 +1476,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles14[variant];
+    return styles18[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
@@ -1769,13 +1775,7 @@ var styles7 = import_react_native18.StyleSheet.create({
 });
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var addOpacityToColor = (color, opacity) => {
-  const hex = color.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
+var import_core17 = require("@xaui/core");
 var AutocompleteDialogHeader = ({
   title,
   inputValue,
@@ -1806,7 +1806,7 @@ var AutocompleteDialogHeader = ({
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
+      placeholderTextColor: (0, import_core17.withOpacity)(theme.colors.foreground, 0.5),
       style: [
         styles7.input,
         {
@@ -2334,7 +2334,7 @@ var styles8 = import_react_native24.StyleSheet.create({
 
 // src/components/autocomplete/autocomplete-item.hook.ts
 var import_react29 = require("react");
-var import_core19 = require("@xaui/core");
+var import_core20 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
   return (0, import_react29.useMemo)(() => {
@@ -2369,7 +2369,7 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core19.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core20.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react29.useMemo)(() => {
     return "transparent";
@@ -2386,7 +2386,7 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core19.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core20.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react29.useMemo)(() => {
     if (themeColor === "default") {
@@ -2483,11 +2483,11 @@ var import_react_native35 = require("react-native");
 
 // src/components/datepicker/datepicker.hook.ts
 var import_react31 = require("react");
-var import_core21 = require("@xaui/core");
+var import_core22 = require("@xaui/core");
 var import_palette3 = require("@xaui/core/palette");
 var useDatePickerColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core21.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core22.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
@@ -4100,7 +4100,7 @@ var styles11 = import_react_native36.StyleSheet.create({
 
 // src/components/typography/typography.hook.ts
 var import_react41 = require("react");
-var import_core30 = require("@xaui/core");
+var import_core31 = require("@xaui/core");
 var knownVariants = {
   caption: true,
   headlineLarge: true,
@@ -4122,7 +4122,7 @@ var useTypographyColor = (themeColor) => {
     if (themeColor === "default") {
       return theme.colors.foreground;
     }
-    const safeThemeColor = (0, import_core30.getSafeThemeColor)(themeColor);
+    const safeThemeColor = (0, import_core31.getSafeThemeColor)(themeColor);
     return theme.colors[safeThemeColor].main;
   }, [theme, themeColor]);
   return color;
@@ -4137,7 +4137,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles14 = {
+    const styles18 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -4189,7 +4189,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles14[variant];
+    return styles18[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -4229,298 +4229,1058 @@ var Typography = ({
   );
 };
 
-// src/components/chip/chip.tsx
-var import_react44 = __toESM(require("react"), 1);
-var import_react_native39 = require("react-native");
+// src/components/carousel/carousel.tsx
+var import_react46 = __toESM(require("react"), 1);
+var import_react_native40 = require("react-native");
+var import_react_native_reanimated5 = __toESM(require("react-native-reanimated"), 1);
 
-// src/components/chip/chip.style.ts
+// src/components/carousel/carousel.style.ts
 var import_react_native38 = require("react-native");
 var styles12 = import_react_native38.StyleSheet.create({
-  chip: {
+  scrollContent: {
     flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  },
-  text: {
-    fontWeight: "500",
-    includeFontPadding: false,
-    textAlignVertical: "center"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  avatar: {
-    marginRight: 4
-  },
-  startContent: {
-    marginRight: 4
+    alignItems: "center"
   },
-  endContent: {
-    marginLeft: 4
+  item: {
+    overflow: "hidden"
   },
-  closeButton: {
-    marginLeft: 4,
+  indicatorContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
     alignItems: "center",
-    justifyContent: "center"
+    paddingVertical: 12,
+    gap: 8
   },
-  dot: {
-    borderRadius: 9999,
-    marginRight: 6
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#CAC4D0"
   },
-  groupContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap"
+  activeIndicator: {
+    width: 24,
+    borderRadius: 4,
+    backgroundColor: "#49454F"
   }
 });
 
-// src/components/chip/chip.hook.ts
+// src/components/carousel/carousel.hook.ts
 var import_react43 = require("react");
-var import_core31 = require("@xaui/core");
-var sizeMap3 = {
-  sm: { height: 32, paddingH: 12, fontSize: 13 },
-  md: { height: 40, paddingH: 16, fontSize: 15 },
-  lg: { height: 44, paddingH: 18, fontSize: 17 }
-};
-var dotSizeMap = {
-  sm: 8,
-  md: 10,
-  lg: 11
-};
-var closeSizeMap = {
-  sm: 14,
-  md: 16,
-  lg: 17
-};
-function useChipSizeStyles(size) {
-  return (0, import_react43.useMemo)(() => {
-    const { height, paddingH, fontSize } = sizeMap3[size];
-    return { height, paddingHorizontal: paddingH, fontSize };
-  }, [size]);
+var HERO_PEEK_WIDTH = 56;
+function computeMultiBrowseLayout(config) {
+  const { preferredItemWidth, itemSpacing } = config;
+  return {
+    computedItemWidth: preferredItemWidth,
+    snapInterval: preferredItemWidth + itemSpacing,
+    pagingEnabled: false
+  };
 }
-function useChipDotSize(size) {
-  return (0, import_react43.useMemo)(() => dotSizeMap[size], [size]);
+function computeUncontainedLayout(config) {
+  const { preferredItemWidth, itemSpacing } = config;
+  return {
+    computedItemWidth: preferredItemWidth,
+    snapInterval: preferredItemWidth + itemSpacing,
+    pagingEnabled: false
+  };
 }
-function useChipCloseSize(size) {
-  return (0, import_react43.useMemo)(() => closeSizeMap[size], [size]);
+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 useChipRadiusStyles(radius, height) {
-  const theme = useXUITheme();
-  return (0, import_react43.useMemo)(() => {
-    if (radius === "full") {
-      return { borderRadius: height / 2 };
-    }
-    return { borderRadius: theme.borderRadius[radius] };
-  }, [height, radius, theme.borderRadius]);
+function computeFullScreenLayout(config) {
+  const { containerWidth } = config;
+  return {
+    computedItemWidth: containerWidth,
+    snapInterval: containerWidth,
+    pagingEnabled: true
+  };
 }
-function useChipVariantStyles(themeColor, variant) {
-  const theme = useXUITheme();
-  const safeColor = (0, import_core31.getSafeThemeColor)(themeColor);
-  const colorScheme = theme.colors[safeColor];
+function useCarouselLayout(config) {
   return (0, import_react43.useMemo)(() => {
-    switch (variant) {
-      case "bordered":
-        return {
-          backgroundColor: "transparent",
-          color: colorScheme.main,
-          borderWidth: 2,
-          borderColor: colorScheme.main
-        };
-      case "light":
-        return {
-          backgroundColor: "transparent",
-          color: colorScheme.main
-        };
-      case "flat":
-        return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main
-        };
-      case "faded":
-        return {
-          backgroundColor: (0, import_core31.withOpacity)(colorScheme.background, 0.7),
-          color: colorScheme.main,
-          borderWidth: 1,
-          borderColor: (0, import_core31.withOpacity)(colorScheme.main, 0.3)
-        };
-      case "shadow":
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.foreground,
-          shadow: theme.shadows.sm
-        };
-      case "dot":
-        return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main,
-          dotColor: colorScheme.main
-        };
-      case "solid":
-      default:
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.foreground
-        };
-    }
-  }, [colorScheme, theme, variant]);
+    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/chip/chip.tsx
-var Chip = ({
+// src/components/carousel/carousel-item.tsx
+var import_react44 = __toESM(require("react"), 1);
+var import_react_native39 = require("react-native");
+var CarouselItem = ({
   children,
-  variant = "solid",
-  themeColor = "default",
-  size = "md",
-  radius = "full",
-  avatar,
-  startContent,
-  endContent,
-  isDisabled = false,
-  customAppearance,
-  onClose,
-  onPress
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle
+}) => /* @__PURE__ */ import_react44.default.createElement(
+  import_react_native39.View,
+  {
+    style: [
+      styles12.item,
+      {
+        width,
+        height,
+        borderRadius: radius,
+        marginRight: isLast ? 0 : spacing
+      },
+      customStyle
+    ]
+  },
+  children
+);
+
+// src/components/carousel/animated-carousel-item.tsx
+var import_react45 = __toESM(require("react"), 1);
+var import_react_native_reanimated4 = __toESM(require("react-native-reanimated"), 1);
+var AnimatedCarouselItem = ({
+  children,
+  index,
+  scrollX,
+  width,
+  height,
+  radius,
+  spacing,
+  isLast,
+  customStyle,
+  layout,
+  snapInterval,
+  containerWidth,
+  contentPadding
 }) => {
-  const [isClosed, setIsClosed] = import_react44.default.useState(false);
-  const [isClosing, setIsClosing] = import_react44.default.useState(false);
-  const sizeStyles = useChipSizeStyles(size);
-  const radiusStyles = useChipRadiusStyles(radius, sizeStyles.height);
-  const variantStyles = useChipVariantStyles(themeColor, variant);
-  const dotSize = useChipDotSize(size);
-  const closeSize = useChipCloseSize(size);
-  const isDotVariant = variant === "dot";
-  const hasClose = onClose !== void 0;
-  const isInteractive = onPress !== void 0 || hasClose;
-  const scale = import_react44.default.useRef(new import_react_native39.Animated.Value(1)).current;
-  const opacity = import_react44.default.useRef(new import_react_native39.Animated.Value(1)).current;
-  const isClosingRef = import_react44.default.useRef(false);
-  const colorProgress = import_react44.default.useRef(new import_react_native39.Animated.Value(1)).current;
-  const targetBackgroundColor = variantStyles.backgroundColor ?? "transparent";
-  const targetBorderColor = variantStyles.borderColor ?? "transparent";
-  const targetTextColor = variantStyles.color ?? "#000000";
-  const targetDotColor = variantStyles.dotColor ?? targetTextColor;
-  const previousColorsRef = import_react44.default.useRef({
-    backgroundColor: targetBackgroundColor,
-    borderColor: targetBorderColor,
-    textColor: targetTextColor,
-    dotColor: targetDotColor
-  });
-  import_react44.default.useEffect(() => {
-    if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
-      return;
+  const animatedStyle = (0, import_react_native_reanimated4.useAnimatedStyle)(() => {
+    const inputRange = [
+      (index - 1) * snapInterval,
+      index * snapInterval,
+      (index + 1) * snapInterval
+    ];
+    if (layout === "multi-browse") {
+      const scale = (0, import_react_native_reanimated4.interpolate)(
+        scrollX.value,
+        inputRange,
+        [0.85, 1, 0.85],
+        import_react_native_reanimated4.Extrapolation.CLAMP
+      );
+      const opacity = (0, import_react_native_reanimated4.interpolate)(
+        scrollX.value,
+        inputRange,
+        [0.6, 1, 0.6],
+        import_react_native_reanimated4.Extrapolation.CLAMP
+      );
+      return {
+        transform: [{ scale }],
+        opacity
+      };
     }
-    colorProgress.setValue(0);
-    import_react_native39.Animated.timing(colorProgress, {
-      toValue: 1,
-      duration: 180,
-      easing: import_react_native39.Easing.out(import_react_native39.Easing.cubic),
-      useNativeDriver: false
-    }).start(() => {
-      previousColorsRef.current = {
-        backgroundColor: targetBackgroundColor,
-        borderColor: targetBorderColor,
-        textColor: targetTextColor,
-        dotColor: targetDotColor
+    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_reanimated4.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [0.9, 1, 0.9],
+        import_react_native_reanimated4.Extrapolation.CLAMP
+      );
+      const opacity = (0, import_react_native_reanimated4.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [0.5, 1, 0.5],
+        import_react_native_reanimated4.Extrapolation.CLAMP
+      );
+      const translateX = (0, import_react_native_reanimated4.interpolate)(
+        scrollX.value,
+        inputRangeHero,
+        [-10, 0, 10],
+        import_react_native_reanimated4.Extrapolation.CLAMP
+      );
+      return {
+        transform: [{ scale }, { translateX }],
+        opacity
       };
-    });
-  }, [
-    colorProgress,
-    targetBackgroundColor,
-    targetBorderColor,
-    targetTextColor,
-    targetDotColor
-  ]);
-  const animatedBackgroundColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [
-      previousColorsRef.current.backgroundColor,
-      targetBackgroundColor
-    ]
-  });
-  const animatedBorderColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.borderColor, targetBorderColor]
-  });
-  const animatedTextColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.textColor, targetTextColor]
-  });
-  const animatedDotColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.dotColor, targetDotColor]
-  });
-  const handlePressIn = import_react44.default.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    import_react_native39.Animated.timing(scale, {
-      toValue: 0.97,
-      duration: 90,
-      easing: import_react_native39.Easing.out(import_react_native39.Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handlePressOut = import_react44.default.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    import_react_native39.Animated.timing(scale, {
-      toValue: 1,
-      duration: 120,
-      easing: import_react_native39.Easing.out(import_react_native39.Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handleChipPress = import_react44.default.useCallback(() => {
-    if (isDisabled || isClosing || isClosingRef.current) return;
-    if (hasClose && onClose) {
-      isClosingRef.current = true;
-      setIsClosing(true);
-      import_react_native39.Animated.parallel([
-        import_react_native39.Animated.timing(opacity, {
-          toValue: 0,
-          duration: 180,
-          easing: import_react_native39.Easing.in(import_react_native39.Easing.quad),
-          useNativeDriver: true
-        }),
-        import_react_native39.Animated.timing(scale, {
-          toValue: 0.88,
-          duration: 180,
-          easing: import_react_native39.Easing.in(import_react_native39.Easing.quad),
-          useNativeDriver: true
-        })
-      ]).start(() => {
-        setIsClosed(true);
-        onClose();
-        setIsClosing(false);
-        isClosingRef.current = false;
-      });
-      return;
     }
-    onPress?.();
-  }, [hasClose, isClosing, isDisabled, onClose, onPress, opacity, scale]);
-  if (isClosed) {
-    return null;
-  }
-  const chipContent = /* @__PURE__ */ import_react44.default.createElement(import_react_native39.Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ import_react44.default.createElement(
-    import_react_native39.Animated.View,
+    return {};
+  }, [index, snapInterval, layout, containerWidth, contentPadding, width]);
+  return /* @__PURE__ */ import_react45.default.createElement(
+    import_react_native_reanimated4.default.View,
     {
       style: [
-        styles12.chip,
+        styles12.item,
         {
-          height: sizeStyles.height,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: animatedBackgroundColor,
-          borderWidth: variantStyles.borderWidth,
-          borderColor: animatedBorderColor
+          width,
+          height,
+          borderRadius: radius,
+          marginRight: isLast ? 0 : spacing
         },
-        radiusStyles,
+        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] = (0, import_react46.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react46.useState)(initialIndex);
+  const scrollRef = (0, import_react_native_reanimated5.useAnimatedRef)();
+  const onActiveItemChangeRef = (0, import_react46.useRef)(onActiveItemChange);
+  onActiveItemChangeRef.current = onActiveItemChange;
+  const scrollX = (0, import_react_native_reanimated5.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_react46.useCallback)((event) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+  const scrollHandler = (0, import_react_native_reanimated5.useAnimatedScrollHandler)({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    }
+  });
+  const handleMomentumScrollEnd = (0, import_react46.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_react46.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_react46.default.createElement(import_react_native40.View, { style: customAppearance?.container, onLayout: handleLayout });
+  }
+  const shouldAnimate = layout === "multi-browse" || layout === "hero";
+  return /* @__PURE__ */ import_react46.default.createElement(import_react_native40.View, { style: customAppearance?.container, onLayout: handleLayout }, /* @__PURE__ */ import_react46.default.createElement(
+    import_react_native_reanimated5.default.ScrollView,
+    {
+      ref: scrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      snapToInterval: pagingEnabled ? void 0 : snapInterval,
+      pagingEnabled,
+      decelerationRate: "fast",
+      contentContainerStyle: [
+        styles12.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_react46.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_react46.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_react46.default.createElement(
+    import_react_native40.View,
+    {
+      style: [styles12.indicatorContainer, customAppearance?.indicatorContainer]
+    },
+    data.map((_, index) => /* @__PURE__ */ import_react46.default.createElement(
+      import_react_native40.View,
+      {
+        key: `indicator-${String(index)}`,
+        style: [
+          styles12.indicator,
+          customAppearance?.indicator,
+          activeIndex === index && styles12.activeIndicator,
+          activeIndex === index && customAppearance?.activeIndicator
+        ]
+      }
+    ))
+  ));
+}
+
+// src/components/segment-button/segment-button.tsx
+var import_react49 = __toESM(require("react"), 1);
+var import_react_native42 = require("react-native");
+
+// src/components/segment-button/segment-button.style.ts
+var import_react_native41 = require("react-native");
+var styles13 = import_react_native41.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    overflow: "hidden",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  segment: {
+    flex: 1
+  },
+  segmentInner: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  segmentContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4
+  },
+  segmentText: {
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  divider: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/segment-button/segment-button.hook.ts
+var import_react47 = require("react");
+var import_core33 = require("@xaui/core");
+function useSegmentSizeStyles(size) {
+  const theme = useXUITheme();
+  return (0, import_react47.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 32,
+        fontSize: theme.fontSizes.xs,
+        iconSize: 14
+      },
+      sm: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 36,
+        fontSize: theme.fontSizes.sm,
+        iconSize: 16
+      },
+      md: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        minHeight: 40,
+        fontSize: theme.fontSizes.md,
+        iconSize: 18
+      },
+      lg: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 48,
+        fontSize: theme.fontSizes.lg,
+        iconSize: 20
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+}
+function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core33.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const selectedBackgroundColor = (0, import_core33.withPaletteNumber)(colorScheme.main, 400);
+  return (0, import_react47.useMemo)(() => {
+    const variants = {
+      outlined: {
+        containerBackground: "transparent",
+        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderColor: colorScheme.main,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      flat: {
+        containerBackground: colorScheme.background,
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      light: {
+        containerBackground: "transparent",
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      faded: {
+        containerBackground: `${colorScheme.background}95`,
+        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderColor: `${colorScheme.main}90`,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      }
+    };
+    const baseStyle = variants[variant] ?? variants.outlined;
+    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      containerShadow: shouldApplyElevation && elevation > 0 ? shadowStyles : baseStyle.containerShadow
+    };
+  }, [variant, colorScheme, theme, elevation]);
+}
+
+// src/components/segment-button/segment-button-context.ts
+var import_react48 = require("react");
+var SegmentButtonContext = (0, import_react48.createContext)(void 0);
+var useSegmentButtonContext = () => {
+  const context = (0, import_react48.useContext)(SegmentButtonContext);
+  if (!context) {
+    throw new Error(
+      "SegmentButtonItem must be used within a SegmentButton component"
+    );
+  }
+  return context;
+};
+
+// src/components/segment-button/segment-button.tsx
+var SegmentButton = ({
+  children,
+  selected: controlledSelected,
+  defaultSelected,
+  onSelectionChange,
+  selectionMode = "single",
+  themeColor = "primary",
+  variant = "outlined",
+  size = "md",
+  radius = "full",
+  fullWidth = false,
+  isDisabled = false,
+  showCheckmark = true,
+  elevation = 0,
+  customAppearance
+}) => {
+  const isControlled = controlledSelected !== void 0;
+  const [internalSelected, setInternalSelected] = (0, import_react49.useState)(
+    () => defaultSelected ?? ""
+  );
+  const selected = isControlled ? controlledSelected : internalSelected;
+  const selectedKeys = (0, import_react49.useMemo)(() => {
+    if (Array.isArray(selected)) return selected;
+    return selected ? [selected] : [];
+  }, [selected]);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const toggleItem = (0, import_react49.useCallback)(
+    (key) => {
+      let nextSelected;
+      if (selectionMode === "single") {
+        nextSelected = key;
+      } else {
+        const isCurrentlySelected = selectedKeys.includes(key);
+        if (isCurrentlySelected && selectedKeys.length > 1) {
+          nextSelected = selectedKeys.filter((k) => k !== key);
+        } else if (!isCurrentlySelected) {
+          nextSelected = [...selectedKeys, key];
+        } else {
+          return;
+        }
+      }
+      if (!isControlled) {
+        setInternalSelected(nextSelected);
+      }
+      onSelectionChange?.(nextSelected);
+    },
+    [selectionMode, selectedKeys, onSelectionChange, isControlled]
+  );
+  const contextValue = (0, import_react49.useMemo)(
+    () => ({
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    }),
+    [
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    ]
+  );
+  const showDivider = variant === "outlined" || variant === "faded";
+  const childrenArray = import_react49.default.Children.toArray(children);
+  const getItemKey = (child) => {
+    if (!import_react49.default.isValidElement(child)) {
+      return void 0;
+    }
+    return child.props.itemKey;
+  };
+  return /* @__PURE__ */ import_react49.default.createElement(SegmentButtonContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react49.default.createElement(
+    import_react_native42.View,
+    {
+      style: [
+        styles13.container,
+        {
+          backgroundColor: variantStyles.containerBackground,
+          borderWidth: variantStyles.containerBorderWidth,
+          borderColor: variantStyles.containerBorderColor,
+          borderRadius: radiusStyles.borderRadius,
+          ...variantStyles.containerShadow
+        },
+        fullWidth && styles13.fullWidth,
+        customAppearance?.container
+      ]
+    },
+    childrenArray.map((child, index) => {
+      const isLast = index === childrenArray.length - 1;
+      const childItemKey = getItemKey(child);
+      const childKey = childItemKey ?? index;
+      const isSelected = selectedKeys.includes(String(childKey));
+      const nextChildKey = !isLast ? getItemKey(childrenArray[index + 1]) : void 0;
+      const nextSelected = nextChildKey ? selectedKeys.includes(String(nextChildKey)) : false;
+      return /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, { key: childKey }, child, showDivider && !isLast && !isSelected && !nextSelected && /* @__PURE__ */ import_react49.default.createElement(
+        import_react_native42.View,
+        {
+          style: [
+            styles13.divider,
+            {
+              backgroundColor: variantStyles.containerBorderColor
+            }
+          ]
+        }
+      ));
+    })
+  ));
+};
+
+// src/components/segment-button/segment-button-item.tsx
+var import_react50 = __toESM(require("react"), 1);
+var import_react_native44 = require("react-native");
+var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
+
+// src/components/segment-button/segment-button.animation.ts
+var import_react_native43 = require("react-native");
+var runCheckmarkEnterAnimation = (animatedValue) => {
+  animatedValue.setValue(0);
+  import_react_native43.Animated.timing(animatedValue, {
+    toValue: 1,
+    duration: 200,
+    useNativeDriver: true
+  }).start();
+};
+var runCheckmarkExitAnimation = (animatedValue) => {
+  import_react_native43.Animated.timing(animatedValue, {
+    toValue: 0,
+    duration: 150,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/segment-button/segment-button-item.tsx
+var CheckIcon = ({ size, color }) => /* @__PURE__ */ import_react50.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react50.default.createElement(
+  import_react_native_svg3.Path,
+  {
+    d: "M20 6L9 17l-5-5",
+    stroke: color,
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var SegmentButtonItem = ({
+  itemKey,
+  label,
+  startContent,
+  icon,
+  endContent,
+  checkIndicator,
+  isDisabled: itemDisabled = false,
+  customAppearance
+}) => {
+  const {
+    selectedKeys,
+    toggleItem,
+    themeColor,
+    variant,
+    size,
+    elevation,
+    isDisabled: groupDisabled,
+    showCheckmark
+  } = useSegmentButtonContext();
+  const isSelected = selectedKeys.includes(itemKey);
+  const disabled = groupDisabled || itemDisabled;
+  const checkmarkAnim = (0, import_react50.useRef)(new import_react_native44.Animated.Value(isSelected ? 1 : 0)).current;
+  const prevSelected = (0, import_react50.useRef)(isSelected);
+  (0, import_react50.useEffect)(() => {
+    if (isSelected && !prevSelected.current) {
+      runCheckmarkEnterAnimation(checkmarkAnim);
+    } else if (!isSelected && prevSelected.current) {
+      runCheckmarkExitAnimation(checkmarkAnim);
+    }
+    prevSelected.current = isSelected;
+  }, [isSelected, checkmarkAnim]);
+  const sizeStyles = useSegmentSizeStyles(size);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const handlePress = () => {
+    if (!disabled) {
+      toggleItem(itemKey);
+    }
+  };
+  const backgroundColor = isSelected ? variantStyles.selectedBackground : variantStyles.unselectedBackground;
+  const textColor = isSelected ? variantStyles.selectedTextColor : variantStyles.unselectedTextColor;
+  const showCheck = isSelected && showCheckmark;
+  const startNode = showCheck ? checkIndicator ?? /* @__PURE__ */ import_react50.default.createElement(CheckIcon, { size: sizeStyles.iconSize, color: textColor }) : startContent ?? icon;
+  return /* @__PURE__ */ import_react50.default.createElement(
+    import_react_native44.Pressable,
+    {
+      style: [styles13.segment, disabled && styles13.disabled],
+      onPress: handlePress,
+      disabled
+    },
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_react_native44.View,
+      {
+        style: [
+          styles13.segmentInner,
+          {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            paddingVertical: sizeStyles.paddingVertical,
+            minHeight: sizeStyles.minHeight,
+            backgroundColor
+          },
+          isSelected ? customAppearance?.selectedSegment : customAppearance?.segment
+        ]
+      },
+      /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.segmentContent }, startNode && /* @__PURE__ */ import_react50.default.createElement(
+        import_react_native44.Animated.View,
+        {
+          style: {
+            opacity: showCheck ? checkmarkAnim : 1,
+            transform: [{ scale: showCheck ? checkmarkAnim : 1 }]
+          }
+        },
+        startNode
+      ), /* @__PURE__ */ import_react50.default.createElement(
+        import_react_native44.Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles13.segmentText,
+            {
+              fontSize: sizeStyles.fontSize,
+              color: textColor
+            },
+            isSelected ? customAppearance?.selectedText : customAppearance?.text
+          ]
+        },
+        label
+      ), endContent)
+    )
+  );
+};
+SegmentButtonItem.displayName = "SegmentButtonItem";
+
+// src/components/chip/chip.tsx
+var import_react52 = __toESM(require("react"), 1);
+var import_react_native46 = require("react-native");
+
+// src/components/chip/chip.style.ts
+var import_react_native45 = require("react-native");
+var styles14 = import_react_native45.StyleSheet.create({
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontWeight: "500",
+    includeFontPadding: false,
+    textAlignVertical: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  avatar: {
+    marginRight: 4
+  },
+  startContent: {
+    marginRight: 4
+  },
+  endContent: {
+    marginLeft: 4
+  },
+  closeButton: {
+    marginLeft: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    borderRadius: 9999,
+    marginRight: 6
+  },
+  groupContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  }
+});
+
+// src/components/chip/chip.hook.ts
+var import_react51 = require("react");
+var import_core34 = require("@xaui/core");
+var sizeMap3 = {
+  sm: { height: 32, paddingH: 12, fontSize: 13 },
+  md: { height: 40, paddingH: 16, fontSize: 15 },
+  lg: { height: 44, paddingH: 18, fontSize: 17 }
+};
+var dotSizeMap = {
+  sm: 8,
+  md: 10,
+  lg: 11
+};
+var closeSizeMap = {
+  sm: 14,
+  md: 16,
+  lg: 17
+};
+function useChipSizeStyles(size) {
+  return (0, import_react51.useMemo)(() => {
+    const { height, paddingH, fontSize } = sizeMap3[size];
+    return { height, paddingHorizontal: paddingH, fontSize };
+  }, [size]);
+}
+function useChipDotSize(size) {
+  return (0, import_react51.useMemo)(() => dotSizeMap[size], [size]);
+}
+function useChipCloseSize(size) {
+  return (0, import_react51.useMemo)(() => closeSizeMap[size], [size]);
+}
+function useChipRadiusStyles(radius, height) {
+  const theme = useXUITheme();
+  return (0, import_react51.useMemo)(() => {
+    if (radius === "full") {
+      return { borderRadius: height / 2 };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [height, radius, theme.borderRadius]);
+}
+function useChipVariantStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeColor = (0, import_core34.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeColor];
+  return (0, import_react51.useMemo)(() => {
+    switch (variant) {
+      case "bordered":
+        return {
+          backgroundColor: "transparent",
+          color: colorScheme.main,
+          borderWidth: 2,
+          borderColor: colorScheme.main
+        };
+      case "light":
+        return {
+          backgroundColor: "transparent",
+          color: colorScheme.main
+        };
+      case "flat":
+        return {
+          backgroundColor: colorScheme.background,
+          color: colorScheme.main
+        };
+      case "faded":
+        return {
+          backgroundColor: (0, import_core34.withOpacity)(colorScheme.background, 0.7),
+          color: colorScheme.main,
+          borderWidth: 1,
+          borderColor: (0, import_core34.withOpacity)(colorScheme.main, 0.3)
+        };
+      case "shadow":
+        return {
+          backgroundColor: colorScheme.main,
+          color: colorScheme.foreground,
+          shadow: theme.shadows.sm
+        };
+      case "dot":
+        return {
+          backgroundColor: colorScheme.background,
+          color: colorScheme.main,
+          dotColor: colorScheme.main
+        };
+      case "solid":
+      default:
+        return {
+          backgroundColor: colorScheme.main,
+          color: colorScheme.foreground
+        };
+    }
+  }, [colorScheme, theme, variant]);
+}
+
+// src/components/chip/chip.tsx
+var Chip = ({
+  children,
+  variant = "solid",
+  themeColor = "default",
+  size = "md",
+  radius = "full",
+  avatar,
+  startContent,
+  endContent,
+  isDisabled = false,
+  customAppearance,
+  onClose,
+  onPress
+}) => {
+  const [isClosed, setIsClosed] = import_react52.default.useState(false);
+  const [isClosing, setIsClosing] = import_react52.default.useState(false);
+  const sizeStyles = useChipSizeStyles(size);
+  const radiusStyles = useChipRadiusStyles(radius, sizeStyles.height);
+  const variantStyles = useChipVariantStyles(themeColor, variant);
+  const dotSize = useChipDotSize(size);
+  const closeSize = useChipCloseSize(size);
+  const isDotVariant = variant === "dot";
+  const hasClose = onClose !== void 0;
+  const isInteractive = onPress !== void 0 || hasClose;
+  const scale = import_react52.default.useRef(new import_react_native46.Animated.Value(1)).current;
+  const opacity = import_react52.default.useRef(new import_react_native46.Animated.Value(1)).current;
+  const isClosingRef = import_react52.default.useRef(false);
+  const colorProgress = import_react52.default.useRef(new import_react_native46.Animated.Value(1)).current;
+  const targetBackgroundColor = variantStyles.backgroundColor ?? "transparent";
+  const targetBorderColor = variantStyles.borderColor ?? "transparent";
+  const targetTextColor = variantStyles.color ?? "#000000";
+  const targetDotColor = variantStyles.dotColor ?? targetTextColor;
+  const previousColorsRef = import_react52.default.useRef({
+    backgroundColor: targetBackgroundColor,
+    borderColor: targetBorderColor,
+    textColor: targetTextColor,
+    dotColor: targetDotColor
+  });
+  import_react52.default.useEffect(() => {
+    if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
+      return;
+    }
+    colorProgress.setValue(0);
+    import_react_native46.Animated.timing(colorProgress, {
+      toValue: 1,
+      duration: 180,
+      easing: import_react_native46.Easing.out(import_react_native46.Easing.cubic),
+      useNativeDriver: false
+    }).start(() => {
+      previousColorsRef.current = {
+        backgroundColor: targetBackgroundColor,
+        borderColor: targetBorderColor,
+        textColor: targetTextColor,
+        dotColor: targetDotColor
+      };
+    });
+  }, [
+    colorProgress,
+    targetBackgroundColor,
+    targetBorderColor,
+    targetTextColor,
+    targetDotColor
+  ]);
+  const animatedBackgroundColor = colorProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [previousColorsRef.current.backgroundColor, targetBackgroundColor]
+  });
+  const animatedBorderColor = colorProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [previousColorsRef.current.borderColor, targetBorderColor]
+  });
+  const animatedTextColor = colorProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [previousColorsRef.current.textColor, targetTextColor]
+  });
+  const animatedDotColor = colorProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [previousColorsRef.current.dotColor, targetDotColor]
+  });
+  const handlePressIn = import_react52.default.useCallback(() => {
+    if (!isInteractive || isDisabled || isClosing || hasClose) return;
+    import_react_native46.Animated.timing(scale, {
+      toValue: 0.97,
+      duration: 90,
+      easing: import_react_native46.Easing.out(import_react_native46.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
+  const handlePressOut = import_react52.default.useCallback(() => {
+    if (!isInteractive || isDisabled || isClosing || hasClose) return;
+    import_react_native46.Animated.timing(scale, {
+      toValue: 1,
+      duration: 120,
+      easing: import_react_native46.Easing.out(import_react_native46.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
+  const handleChipPress = import_react52.default.useCallback(() => {
+    if (isDisabled || isClosing || isClosingRef.current) return;
+    if (hasClose && onClose) {
+      isClosingRef.current = true;
+      setIsClosing(true);
+      import_react_native46.Animated.parallel([
+        import_react_native46.Animated.timing(opacity, {
+          toValue: 0,
+          duration: 180,
+          easing: import_react_native46.Easing.in(import_react_native46.Easing.quad),
+          useNativeDriver: true
+        }),
+        import_react_native46.Animated.timing(scale, {
+          toValue: 0.88,
+          duration: 180,
+          easing: import_react_native46.Easing.in(import_react_native46.Easing.quad),
+          useNativeDriver: true
+        })
+      ]).start(() => {
+        setIsClosed(true);
+        onClose();
+        setIsClosing(false);
+        isClosingRef.current = false;
+      });
+      return;
+    }
+    onPress?.();
+  }, [hasClose, isClosing, isDisabled, onClose, onPress, opacity, scale]);
+  if (isClosed) {
+    return null;
+  }
+  const chipContent = /* @__PURE__ */ import_react52.default.createElement(import_react_native46.Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ import_react52.default.createElement(
+    import_react_native46.Animated.View,
+    {
+      style: [
+        styles14.chip,
+        {
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: animatedBackgroundColor,
+          borderWidth: variantStyles.borderWidth,
+          borderColor: animatedBorderColor
+        },
+        radiusStyles,
         variantStyles.shadow,
-        isDisabled && styles12.disabled,
+        isDisabled && styles14.disabled,
         customAppearance?.container
       ],
       accessible: true,
       accessibilityRole: "text"
     },
-    isDotVariant && /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native39.Animated.View,
+    isDotVariant && /* @__PURE__ */ import_react52.default.createElement(
+      import_react_native46.Animated.View,
       {
         style: [
-          styles12.dot,
+          styles14.dot,
           {
             width: dotSize,
             height: dotSize,
@@ -4530,31 +5290,31 @@ var Chip = ({
         ]
       }
     ),
-    avatar && /* @__PURE__ */ import_react44.default.createElement(import_react_native39.View, { style: styles12.avatar }, avatar),
-    startContent && !avatar && /* @__PURE__ */ import_react44.default.createElement(import_react_native39.View, { style: styles12.startContent }, startContent),
-    /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native39.Animated.Text,
+    avatar && /* @__PURE__ */ import_react52.default.createElement(import_react_native46.View, { style: styles14.avatar }, avatar),
+    startContent && !avatar && /* @__PURE__ */ import_react52.default.createElement(import_react_native46.View, { style: styles14.startContent }, startContent),
+    /* @__PURE__ */ import_react52.default.createElement(
+      import_react_native46.Animated.Text,
       {
         style: [
-          styles12.text,
+          styles14.text,
           { fontSize: sizeStyles.fontSize, color: animatedTextColor },
           customAppearance?.text
         ]
       },
       children
     ),
-    endContent && !hasClose && /* @__PURE__ */ import_react44.default.createElement(import_react_native39.View, { style: styles12.endContent }, endContent),
-    hasClose && /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native39.View,
+    endContent && !hasClose && /* @__PURE__ */ import_react52.default.createElement(import_react_native46.View, { style: styles14.endContent }, endContent),
+    hasClose && /* @__PURE__ */ import_react52.default.createElement(
+      import_react_native46.View,
       {
         style: [
-          styles12.closeButton,
+          styles14.closeButton,
           { width: closeSize, height: closeSize },
           customAppearance?.closeButton
         ]
       },
-      /* @__PURE__ */ import_react44.default.createElement(
-        import_react_native39.Animated.Text,
+      /* @__PURE__ */ import_react52.default.createElement(
+        import_react_native46.Animated.Text,
         {
           style: {
             fontSize: closeSize - 2,
@@ -4567,8 +5327,8 @@ var Chip = ({
     )
   ));
   if (isInteractive) {
-    return /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native39.Pressable,
+    return /* @__PURE__ */ import_react52.default.createElement(
+      import_react_native46.Pressable,
       {
         onPress: isDisabled || isClosing ? void 0 : handleChipPress,
         onPressIn: handlePressIn,
@@ -4582,22 +5342,22 @@ var Chip = ({
 };
 
 // src/components/chip/chip-group.tsx
-var import_react47 = __toESM(require("react"), 1);
-var import_react_native40 = require("react-native");
+var import_react55 = __toESM(require("react"), 1);
+var import_react_native47 = require("react-native");
 
 // src/components/chip/chip-context.ts
-var import_react45 = require("react");
-var ChipGroupContext = (0, import_react45.createContext)(null);
+var import_react53 = require("react");
+var ChipGroupContext = (0, import_react53.createContext)(null);
 
 // src/components/chip/chip-group.hook.ts
-var import_react46 = require("react");
+var import_react54 = require("react");
 function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
-  const [internalValues, setInternalValues] = (0, import_react46.useState)(
+  const [internalValues, setInternalValues] = (0, import_react54.useState)(
     defaultSelectedValues ?? []
   );
   const isControlled = selectedValues !== void 0;
   const currentValues = isControlled ? selectedValues : internalValues;
-  const onToggle = (0, import_react46.useCallback)(
+  const onToggle = (0, import_react54.useCallback)(
     (value) => {
       const isSelected = currentValues.includes(value);
       let nextValues;
@@ -4613,10 +5373,7 @@ function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues
     },
     [currentValues, isControlled, onSelectionChange, selectMode]
   );
-  return (0, import_react46.useMemo)(
-    () => ({ currentValues, onToggle }),
-    [currentValues, onToggle]
-  );
+  return (0, import_react54.useMemo)(() => ({ currentValues, onToggle }), [currentValues, onToggle]);
 }
 
 // src/components/chip/chip-group.tsx
@@ -4641,7 +5398,7 @@ var ChipGroup = ({
     defaultSelectedValues,
     onSelectionChange
   );
-  const contextValue = import_react47.default.useMemo(
+  const contextValue = import_react55.default.useMemo(
     () => ({
       variant,
       themeColor,
@@ -4665,11 +5422,11 @@ var ChipGroup = ({
       onToggle
     ]
   );
-  return /* @__PURE__ */ import_react47.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react47.default.createElement(
-    import_react_native40.View,
+  return /* @__PURE__ */ import_react55.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(
+    import_react_native47.View,
     {
       style: [
-        styles12.groupContainer,
+        styles14.groupContainer,
         { gap: spacing },
         customAppearance?.container
       ],
@@ -4680,7 +5437,7 @@ var ChipGroup = ({
 };
 
 // src/components/chip/chip-item.tsx
-var import_react48 = __toESM(require("react"), 1);
+var import_react56 = __toESM(require("react"), 1);
 function getSelectableVariant(baseVariant, isSelected) {
   if (isSelected) {
     return baseVariant;
@@ -4701,7 +5458,7 @@ var ChipItem = ({
   isDisabled,
   customAppearance
 }) => {
-  const groupContext = (0, import_react48.useContext)(ChipGroupContext);
+  const groupContext = (0, import_react56.useContext)(ChipGroupContext);
   if (!groupContext) {
     return null;
   }
@@ -4711,7 +5468,7 @@ var ChipItem = ({
   const isSelected = groupContext.selectedValues.includes(value);
   const chipVariant = groupContext.isSelectable ? getSelectableVariant(resolvedVariant, isSelected) : resolvedVariant;
   const handlePress = groupContext.isSelectable ? () => groupContext.onToggle(value) : void 0;
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     Chip,
     {
       variant: chipVariant,
@@ -4730,16 +5487,16 @@ var ChipItem = ({
 };
 
 // src/components/bottom-sheet/bottom-sheet.tsx
-var import_react50 = __toESM(require("react"), 1);
-var import_react_native44 = require("react-native");
+var import_react58 = __toESM(require("react"), 1);
+var import_react_native51 = require("react-native");
 
 // src/components/bottom-sheet/bottom-sheet.hook.ts
-var import_react49 = require("react");
-var import_react_native42 = require("react-native");
-var import_core34 = require("@xaui/core");
+var import_react57 = require("react");
+var import_react_native49 = require("react-native");
+var import_core37 = require("@xaui/core");
 
 // src/components/bottom-sheet/bottom-sheet.animation.ts
-var import_react_native41 = require("react-native");
+var import_react_native48 = require("react-native");
 var SPRING_CONFIG = {
   useNativeDriver: true,
   speed: 14,
@@ -4747,16 +5504,16 @@ var SPRING_CONFIG = {
 };
 var TIMING_CONFIG = {
   duration: 280,
-  easing: import_react_native41.Easing.bezier(0.2, 0, 0, 1),
+  easing: import_react_native48.Easing.bezier(0.2, 0, 0, 1),
   useNativeDriver: true
 };
 var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
-  const animation = import_react_native41.Animated.parallel([
-    import_react_native41.Animated.spring(translateY, {
+  const animation = import_react_native48.Animated.parallel([
+    import_react_native48.Animated.spring(translateY, {
       ...SPRING_CONFIG,
       toValue: targetTranslateY
     }),
-    import_react_native41.Animated.timing(backdropOpacity, {
+    import_react_native48.Animated.timing(backdropOpacity, {
       ...TIMING_CONFIG,
       toValue: 1
     })
@@ -4765,12 +5522,12 @@ var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
   return animation;
 };
 var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
-  const animation = import_react_native41.Animated.parallel([
-    import_react_native41.Animated.timing(translateY, {
+  const animation = import_react_native48.Animated.parallel([
+    import_react_native48.Animated.timing(translateY, {
       ...TIMING_CONFIG,
       toValue: screenHeight
     }),
-    import_react_native41.Animated.timing(backdropOpacity, {
+    import_react_native48.Animated.timing(backdropOpacity, {
       ...TIMING_CONFIG,
       toValue: 0
     })
@@ -4783,7 +5540,7 @@ var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete)
   return animation;
 };
 var runSnapAnimation = (translateY, targetTranslateY) => {
-  const animation = import_react_native41.Animated.spring(translateY, {
+  const animation = import_react_native48.Animated.spring(translateY, {
     ...SPRING_CONFIG,
     toValue: targetTranslateY
   });
@@ -4794,7 +5551,7 @@ var runSnapAnimation = (translateY, targetTranslateY) => {
 // src/components/bottom-sheet/bottom-sheet.hook.ts
 var DISMISS_VELOCITY_THRESHOLD = 0.5;
 var DISMISS_DISTANCE_FRACTION = 0.3;
-var SCREEN_HEIGHT = import_react_native42.Dimensions.get("window").height;
+var SCREEN_HEIGHT = import_react_native49.Dimensions.get("window").height;
 var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
 var useBottomSheetAnimation = ({
   isOpen,
@@ -4805,20 +5562,20 @@ var useBottomSheetAnimation = ({
   onClose,
   onSnapChange
 }) => {
-  const [shouldRender, setShouldRender] = (0, import_react49.useState)(false);
-  const currentSnapIndex = (0, import_react49.useRef)(initialSnapIndex);
-  const animationRef = (0, import_react49.useRef)(null);
-  const translateY = (0, import_react49.useRef)(new import_react_native42.Animated.Value(SCREEN_HEIGHT)).current;
-  const backdropOpacity = (0, import_react49.useRef)(new import_react_native42.Animated.Value(0)).current;
-  const sortedSnapPoints = (0, import_react49.useMemo)(
+  const [shouldRender, setShouldRender] = (0, import_react57.useState)(false);
+  const currentSnapIndex = (0, import_react57.useRef)(initialSnapIndex);
+  const animationRef = (0, import_react57.useRef)(null);
+  const translateY = (0, import_react57.useRef)(new import_react_native49.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = (0, import_react57.useRef)(new import_react_native49.Animated.Value(0)).current;
+  const sortedSnapPoints = (0, import_react57.useMemo)(
     () => [...snapPoints].sort((a, b) => a - b),
     [snapPoints]
   );
-  const snapTranslateValues = (0, import_react49.useMemo)(
+  const snapTranslateValues = (0, import_react57.useMemo)(
     () => sortedSnapPoints.map(getTranslateYForSnap),
     [sortedSnapPoints]
   );
-  const open = (0, import_react49.useCallback)(() => {
+  const open = (0, import_react57.useCallback)(() => {
     setShouldRender(true);
     const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
     currentSnapIndex.current = targetIndex;
@@ -4843,7 +5600,7 @@ var useBottomSheetAnimation = ({
     translateY,
     backdropOpacity
   ]);
-  const close = (0, import_react49.useCallback)(() => {
+  const close = (0, import_react57.useCallback)(() => {
     if (disableAnimation) {
       translateY.setValue(SCREEN_HEIGHT);
       backdropOpacity.setValue(0);
@@ -4862,7 +5619,7 @@ var useBottomSheetAnimation = ({
       }
     );
   }, [disableAnimation, translateY, backdropOpacity, onClose]);
-  const snapTo = (0, import_react49.useCallback)(
+  const snapTo = (0, import_react57.useCallback)(
     (index) => {
       const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
       currentSnapIndex.current = clampedIndex;
@@ -4877,17 +5634,23 @@ var useBottomSheetAnimation = ({
         snapTranslateValues[clampedIndex]
       );
     },
-    [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
   );
-  (0, import_react49.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (isOpen) {
       open();
     } else if (shouldRender) {
       close();
     }
   }, [isOpen]);
-  const panResponder = (0, import_react49.useMemo)(
-    () => import_react_native42.PanResponder.create({
+  const panResponder = (0, import_react57.useMemo)(
+    () => import_react_native49.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
       onPanResponderMove: (_, gestureState) => {
@@ -4954,9 +5717,9 @@ var useBottomSheetAnimation = ({
 };
 var useBottomSheetStyles = (themeColor, radius) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core34.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core37.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  const sheetStyles = (0, import_react49.useMemo)(
+  const sheetStyles = (0, import_react57.useMemo)(
     () => ({
       backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
       borderTopLeftRadius: theme.borderRadius[radius],
@@ -4964,7 +5727,7 @@ var useBottomSheetStyles = (themeColor, radius) => {
     }),
     [theme, colorScheme, radius]
   );
-  const handleIndicatorColor = (0, import_react49.useMemo)(
+  const handleIndicatorColor = (0, import_react57.useMemo)(
     () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
     [theme, colorScheme]
   );
@@ -4972,8 +5735,8 @@ var useBottomSheetStyles = (themeColor, radius) => {
 };
 
 // src/components/bottom-sheet/bottom-sheet.style.ts
-var import_react_native43 = require("react-native");
-var styles13 = import_react_native43.StyleSheet.create({
+var import_react_native50 = require("react-native");
+var styles15 = import_react_native50.StyleSheet.create({
   backdrop: {
     position: "absolute",
     top: 0,
@@ -5052,53 +5815,630 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ import_react50.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react50.default.createElement(
-    import_react_native44.Animated.View,
-    {
-      style: [styles13.backdrop, { opacity: backdropOpacity }]
-    },
-    /* @__PURE__ */ import_react50.default.createElement(
-      import_react_native44.Pressable,
-      {
-        style: styles13.backdrop,
-        onPress: handleBackdropPress
-      }
-    )
-  ), /* @__PURE__ */ import_react50.default.createElement(
-    import_react_native44.Animated.View,
+  return /* @__PURE__ */ import_react58.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react58.default.createElement(import_react_native51.Animated.View, { style: [styles15.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react58.default.createElement(import_react_native51.Pressable, { style: styles15.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react58.default.createElement(
+    import_react_native51.Animated.View,
     {
       style: [
-        styles13.container,
+        styles15.container,
         {
           height: screenHeight,
           transform: [{ translateY }]
         }
       ]
     },
-    /* @__PURE__ */ import_react50.default.createElement(
-      import_react_native44.View,
+    /* @__PURE__ */ import_react58.default.createElement(
+      import_react_native51.View,
       {
-        style: [
-          styles13.sheet,
-          { height: screenHeight },
-          sheetStyles,
-          style
-        ],
+        style: [styles15.sheet, { height: screenHeight }, sheetStyles, style],
         ...panResponder.panHandlers
       },
-      showHandle && /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.handle }, handleContent ?? /* @__PURE__ */ import_react50.default.createElement(
-        import_react_native44.View,
+      showHandle && /* @__PURE__ */ import_react58.default.createElement(import_react_native51.View, { style: styles15.handle }, handleContent ?? /* @__PURE__ */ import_react58.default.createElement(
+        import_react_native51.View,
         {
           style: [
-            styles13.handleIndicator,
+            styles15.handleIndicator,
             { backgroundColor: handleIndicatorColor }
           ]
         }
       )),
-      /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.content }, children)
+      /* @__PURE__ */ import_react58.default.createElement(import_react_native51.View, { style: styles15.content }, children)
+    )
+  ));
+};
+
+// src/components/fab/fab.tsx
+var import_react60 = __toESM(require("react"), 1);
+var import_react_native54 = require("react-native");
+
+// src/components/fab/fab.style.ts
+var import_react_native52 = require("react-native");
+var styles16 = import_react_native52.StyleSheet.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  fab: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12
+  },
+  label: {
+    fontWeight: "500"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/fab/fab.hook.ts
+var import_react59 = require("react");
+var import_core39 = require("@xaui/core");
+function useFabSizeStyles(size) {
+  const theme = useXUITheme();
+  const sizeStyles = (0, import_react59.useMemo)(() => {
+    const sizes = {
+      sm: {
+        width: 40,
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        width: 56,
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        width: 96,
+        height: 96,
+        borderRadius: theme.borderRadius["2xl"],
+        iconSize: 36,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const extendedSizeStyles = (0, import_react59.useMemo)(() => {
+    const sizes = {
+      sm: {
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: theme.spacing.md,
+        iconSize: 20,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        paddingHorizontal: theme.spacing.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        height: 80,
+        borderRadius: theme.borderRadius["2xl"],
+        paddingHorizontal: theme.spacing.xl,
+        iconSize: 28,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  return { sizeStyles, extendedSizeStyles };
+}
+function useFabVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core39.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = (0, import_react59.useMemo)(() => {
+    const variantMap = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      }
+    };
+    const baseStyle = variantMap[variant];
+    const shouldApplyElevation = variant !== "outlined";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      ...shouldApplyElevation ? shadowStyles : {},
+      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
+    };
+  }, [variant, colorScheme, theme, elevation]);
+  return variantStyles;
+}
+function useFabIconColor(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core39.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const iconColor = (0, import_react59.useMemo)(() => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return { iconColor };
+}
+function useFabRadiusValue(radius, fallback) {
+  const theme = useXUITheme();
+  return (0, import_react59.useMemo)(() => {
+    if (!radius) return fallback;
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return radiusMap[radius];
+  }, [fallback, radius, theme]);
+}
+
+// src/components/fab/fab.animation.ts
+var import_react_native53 = require("react-native");
+var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native53.Animated.parallel([
+    import_react_native53.Animated.spring(animatedScale, {
+      toValue: 0.92,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native53.Animated.timing(animatedOpacity, {
+      toValue: 0.85,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native53.Animated.parallel([
+    import_react_native53.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native53.Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/fab/fab.tsx
+var Fab = ({
+  icon,
+  label,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius,
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = import_react60.default.useRef(new import_react_native54.Animated.Value(1)).current;
+  const animatedOpacity = import_react60.default.useRef(new import_react_native54.Animated.Value(1)).current;
+  const { sizeStyles, extendedSizeStyles } = useFabSizeStyles(size);
+  const variantStyles = useFabVariantStyles(themeColor, variant, elevation);
+  const { iconColor } = useFabIconColor(themeColor, variant);
+  const isExtended = !!label;
+  const resolvedRadius = useFabRadiusValue(
+    radius,
+    isExtended ? extendedSizeStyles.borderRadius : sizeStyles.borderRadius
+  );
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressInAnimation(animatedScale, animatedOpacity);
+    }
+    onPressIn?.(event);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    onPressOut?.(event);
+  };
+  const fabDimensionStyles = isExtended ? {
+    height: extendedSizeStyles.height,
+    borderRadius: resolvedRadius,
+    paddingHorizontal: extendedSizeStyles.paddingHorizontal
+  } : {
+    width: sizeStyles.width,
+    height: sizeStyles.height,
+    borderRadius: resolvedRadius
+  };
+  return /* @__PURE__ */ import_react60.default.createElement(import_react_native54.View, { style: [styles16.container, customAppearance?.container] }, /* @__PURE__ */ import_react60.default.createElement(
+    import_react_native54.Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ import_react60.default.createElement(
+      import_react_native54.Animated.View,
+      {
+        style: [
+          styles16.fab,
+          fabDimensionStyles,
+          variantStyles,
+          isDisabled && styles16.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.fab
+        ]
+      },
+      isLoading ? /* @__PURE__ */ import_react60.default.createElement(
+        ActivityIndicator,
+        {
+          variant: "circular",
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? iconColor : void 0,
+          size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
+        }
+      ) : /* @__PURE__ */ import_react60.default.createElement(import_react_native54.View, { style: styles16.contentContainer }, icon, isExtended && /* @__PURE__ */ import_react60.default.createElement(
+        import_react_native54.Text,
+        {
+          style: [
+            styles16.label,
+            {
+              fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
+              color: iconColor
+            }
+          ]
+        },
+        label
+      ))
     )
   ));
 };
+
+// src/components/fab-menu/fab-menu.tsx
+var import_react62 = __toESM(require("react"), 1);
+var import_react_native57 = require("react-native");
+
+// src/components/fab-menu/fab-menu.style.ts
+var import_react_native55 = require("react-native");
+var styles17 = import_react_native55.StyleSheet.create({
+  container: {
+    position: "relative",
+    alignItems: "flex-end"
+  },
+  portalRoot: {
+    ...import_react_native55.StyleSheet.absoluteFillObject
+  },
+  overlay: {
+    ...import_react_native55.StyleSheet.absoluteFillObject
+  },
+  overlayPressable: {
+    flex: 1
+  },
+  portalContent: {
+    ...import_react_native55.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
+var import_react61 = require("react");
+var import_core41 = require("@xaui/core");
+function useFabMenuState(controlledExpanded, onToggle) {
+  const [internalExpanded, setInternalExpanded] = (0, import_react61.useState)(false);
+  const isControlled = controlledExpanded !== void 0;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const toggle = (0, import_react61.useCallback)(() => {
+    const next = !expanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onToggle?.(next);
+  }, [expanded, isControlled, onToggle]);
+  const close = (0, import_react61.useCallback)(() => {
+    if (!isControlled) {
+      setInternalExpanded(false);
+    }
+    onToggle?.(false);
+  }, [isControlled, onToggle]);
+  return { expanded, toggle, close };
+}
+function useFabMenuItemStyles(themeColor) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core41.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const itemStyles = (0, import_react61.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 (0, import_react61.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
+var import_react_native56 = require("react-native");
+var runMenuExpandAnimation = (overlayOpacity, itemAnimations) => {
+  const itemSequence = itemAnimations.map(
+    (anim, index) => import_react_native56.Animated.timing(anim, {
+      toValue: 1,
+      duration: 150,
+      delay: index * 50,
+      useNativeDriver: true
+    })
+  );
+  import_react_native56.Animated.parallel([
+    import_react_native56.Animated.timing(overlayOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native56.Animated.stagger(50, itemSequence)
+  ]).start();
+};
+var runMenuCollapseAnimation = (overlayOpacity, itemAnimations, onComplete) => {
+  const reversed = [...itemAnimations].reverse();
+  const itemSequence = reversed.map(
+    (anim, index) => import_react_native56.Animated.timing(anim, {
+      toValue: 0,
+      duration: 120,
+      delay: index * 30,
+      useNativeDriver: true
+    })
+  );
+  import_react_native56.Animated.parallel([
+    import_react_native56.Animated.timing(overlayOpacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native56.Animated.stagger(30, itemSequence)
+  ]).start(onComplete);
+};
+var runFabRotateAnimation = (rotateValue, toExpanded) => {
+  import_react_native56.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] = import_react62.default.useState(expanded);
+  const childArray = import_react62.default.Children.toArray(children);
+  const overlayOpacity = import_react62.default.useRef(new import_react_native57.Animated.Value(expanded ? 1 : 0)).current;
+  const rotateValue = import_react62.default.useRef(new import_react_native57.Animated.Value(expanded ? 1 : 0)).current;
+  const itemAnimationsRef = import_react62.default.useRef(childArray.map(() => new import_react_native57.Animated.Value(0)));
+  const itemAnimations = itemAnimationsRef.current;
+  const prevExpanded = import_react62.default.useRef(expanded);
+  import_react62.default.useEffect(() => {
+    if (itemAnimations.length === childArray.length) return;
+    itemAnimationsRef.current = childArray.map(
+      (_, index) => itemAnimations[index] ?? new import_react_native57.Animated.Value(expanded ? 1 : 0)
+    );
+  }, [expanded, itemAnimations, childArray]);
+  import_react62.default.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__ */ import_react62.default.createElement(
+    import_react_native57.Animated.View,
+    {
+      style: {
+        alignSelf: "flex-end",
+        transform: [{ rotate: expandedIcon ? "0deg" : rotation }]
+      }
+    },
+    /* @__PURE__ */ import_react62.default.createElement(
+      Fab,
+      {
+        icon: currentIcon,
+        label,
+        themeColor,
+        variant,
+        size,
+        radius,
+        elevation,
+        onPress: toggle,
+        customAppearance: { fab: customAppearance?.fab }
+      }
+    )
+  );
+  const renderMenuItems = () => /* @__PURE__ */ import_react62.default.createElement(import_react_native57.View, { style: [styles17.menuContainer, customAppearance?.menuContainer] }, childArray.map((child, index) => {
+    const childElement = child;
+    const isDisabled = childElement.props?.isDisabled;
+    return /* @__PURE__ */ import_react62.default.createElement(
+      import_react_native57.Animated.View,
+      {
+        key: childElement.key ?? index,
+        style: [
+          styles17.menuItem,
+          isDisabled && styles17.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
+        ]
+      },
+      import_react62.default.cloneElement(childElement, {
+        _onClose: close,
+        themeColor: childElement.props?.themeColor ?? themeColor
+      })
+    );
+  }));
+  return /* @__PURE__ */ import_react62.default.createElement(import_react_native57.View, { style: [styles17.container, customAppearance?.container] }, isPortalVisible && /* @__PURE__ */ import_react62.default.createElement(Portal, null, /* @__PURE__ */ import_react62.default.createElement(import_react_native57.View, { style: styles17.portalRoot }, showOverlay && /* @__PURE__ */ import_react62.default.createElement(
+    import_react_native57.Animated.View,
+    {
+      style: [
+        styles17.overlay,
+        { backgroundColor: overlayColor, opacity: overlayOpacity },
+        customAppearance?.overlay
+      ]
+    },
+    /* @__PURE__ */ import_react62.default.createElement(import_react_native57.Pressable, { style: styles17.overlayPressable, onPress: close })
+  ), /* @__PURE__ */ import_react62.default.createElement(import_react_native57.View, { style: styles17.portalContent }, renderMenuItems(), renderFabToggle()))), !isPortalVisible && renderFabToggle());
+};
+
+// src/components/fab-menu/fab-menu-item.tsx
+var import_react63 = __toESM(require("react"), 1);
+var import_react_native58 = require("react-native");
+var FabMenuItem = ({
+  icon,
+  label,
+  themeColor = "primary",
+  onPress,
+  isDisabled,
+  _onClose
+}) => {
+  const itemStyles = useFabMenuItemStyles(themeColor);
+  const renderIcon = (menuIcon) => {
+    if (!import_react63.default.isValidElement(menuIcon)) return menuIcon;
+    return import_react63.default.cloneElement(
+      menuIcon,
+      { color: itemStyles.iconColor }
+    );
+  };
+  return /* @__PURE__ */ import_react63.default.createElement(
+    import_react_native58.Pressable,
+    {
+      style: [
+        styles17.menuItemChip,
+        {
+          backgroundColor: itemStyles.chipStyles.backgroundColor,
+          borderRadius: itemStyles.chipStyles.borderRadius
+        }
+      ],
+      onPress: (event) => {
+        if (isDisabled) return;
+        onPress?.(event);
+        _onClose?.();
+      },
+      disabled: isDisabled
+    },
+    renderIcon(icon),
+    /* @__PURE__ */ import_react63.default.createElement(
+      import_react_native58.Text,
+      {
+        style: [
+          styles17.menuItemLabel,
+          {
+            color: itemStyles.chipStyles.color,
+            fontSize: itemStyles.chipStyles.fontSize
+          }
+        ]
+      },
+      label
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
@@ -5109,10 +6449,16 @@ var BottomSheet = ({
   AvatarGroup,
   Badge,
   BottomSheet,
+  Carousel,
   Chip,
   ChipGroup,
   ChipItem,
   DatePicker,
   Divider,
+  Fab,
+  FabMenu,
+  FabMenuItem,
+  SegmentButton,
+  SegmentButtonItem,
   Typography
 });