@xaui/native 0.0.14 → 0.0.16

package/dist/index.cjs

@@ -38,8 +38,14 @@ __export(src_exports, {
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BottomSheet: () => BottomSheet,
+  Chip: () => Chip,
+  ChipGroup: () => ChipGroup,
+  ChipItem: () => ChipItem,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
+  Fab: () => Fab,
+  FabMenu: () => FabMenu,
+  FabMenuItem: () => FabMenuItem,
   Typography: () => Typography
 });
 module.exports = __toCommonJS(src_exports);
@@ -1442,7 +1448,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles13 = {
+    const styles16 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1467,7 +1473,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles13[variant];
+    return styles16[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
@@ -4134,7 +4140,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles13 = {
+    const styles16 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -4186,7 +4192,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles13[variant];
+    return styles16[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -4226,17 +4232,517 @@ var Typography = ({
   );
 };
 
-// src/components/bottom-sheet/bottom-sheet.tsx
+// src/components/chip/chip.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_native41 = require("react-native");
+var import_react_native39 = require("react-native");
 
-// src/components/bottom-sheet/bottom-sheet.hook.ts
+// src/components/chip/chip.style.ts
+var import_react_native38 = require("react-native");
+var styles12 = import_react_native38.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_react43 = require("react");
-var import_react_native39 = require("react-native");
-var import_core32 = require("@xaui/core");
+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]);
+}
+function useChipDotSize(size) {
+  return (0, import_react43.useMemo)(() => dotSizeMap[size], [size]);
+}
+function useChipCloseSize(size) {
+  return (0, import_react43.useMemo)(() => closeSizeMap[size], [size]);
+}
+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 useChipVariantStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeColor = (0, import_core31.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeColor];
+  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]);
+}
+
+// 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_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;
+    }
+    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
+      };
+    });
+  }, [
+    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,
+    {
+      style: [
+        styles12.chip,
+        {
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: animatedBackgroundColor,
+          borderWidth: variantStyles.borderWidth,
+          borderColor: animatedBorderColor
+        },
+        radiusStyles,
+        variantStyles.shadow,
+        isDisabled && styles12.disabled,
+        customAppearance?.container
+      ],
+      accessible: true,
+      accessibilityRole: "text"
+    },
+    isDotVariant && /* @__PURE__ */ import_react44.default.createElement(
+      import_react_native39.Animated.View,
+      {
+        style: [
+          styles12.dot,
+          {
+            width: dotSize,
+            height: dotSize,
+            backgroundColor: animatedDotColor
+          },
+          customAppearance?.dot
+        ]
+      }
+    ),
+    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,
+      {
+        style: [
+          styles12.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,
+      {
+        style: [
+          styles12.closeButton,
+          { width: closeSize, height: closeSize },
+          customAppearance?.closeButton
+        ]
+      },
+      /* @__PURE__ */ import_react44.default.createElement(
+        import_react_native39.Animated.Text,
+        {
+          style: {
+            fontSize: closeSize - 2,
+            color: animatedTextColor,
+            lineHeight: closeSize
+          }
+        },
+        "\u2715"
+      )
+    )
+  ));
+  if (isInteractive) {
+    return /* @__PURE__ */ import_react44.default.createElement(
+      import_react_native39.Pressable,
+      {
+        onPress: isDisabled || isClosing ? void 0 : handleChipPress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        disabled: isDisabled || isClosing
+      },
+      chipContent
+    );
+  }
+  return chipContent;
+};
+
+// src/components/chip/chip-group.tsx
+var import_react47 = __toESM(require("react"), 1);
+var import_react_native40 = require("react-native");
+
+// src/components/chip/chip-context.ts
+var import_react45 = require("react");
+var ChipGroupContext = (0, import_react45.createContext)(null);
+
+// src/components/chip/chip-group.hook.ts
+var import_react46 = require("react");
+function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
+  const [internalValues, setInternalValues] = (0, import_react46.useState)(
+    defaultSelectedValues ?? []
+  );
+  const isControlled = selectedValues !== void 0;
+  const currentValues = isControlled ? selectedValues : internalValues;
+  const onToggle = (0, import_react46.useCallback)(
+    (value) => {
+      const isSelected = currentValues.includes(value);
+      let nextValues;
+      if (selectMode === "single") {
+        nextValues = isSelected ? [] : [value];
+      } else {
+        nextValues = isSelected ? currentValues.filter((v) => v !== value) : [...currentValues, value];
+      }
+      if (!isControlled) {
+        setInternalValues(nextValues);
+      }
+      onSelectionChange?.(nextValues);
+    },
+    [currentValues, isControlled, onSelectionChange, selectMode]
+  );
+  return (0, import_react46.useMemo)(
+    () => ({ currentValues, onToggle }),
+    [currentValues, onToggle]
+  );
+}
+
+// src/components/chip/chip-group.tsx
+var ChipGroup = ({
+  children,
+  isSelectable = false,
+  selectMode = "single",
+  variant = "solid",
+  themeColor = "default",
+  size = "md",
+  radius = "full",
+  isDisabled = false,
+  selectedValues,
+  defaultSelectedValues,
+  onSelectionChange,
+  spacing = 8,
+  customAppearance
+}) => {
+  const { currentValues, onToggle } = useChipGroupSelection(
+    selectMode,
+    selectedValues,
+    defaultSelectedValues,
+    onSelectionChange
+  );
+  const contextValue = import_react47.default.useMemo(
+    () => ({
+      variant,
+      themeColor,
+      size,
+      radius,
+      isDisabled,
+      isSelectable,
+      selectMode,
+      selectedValues: currentValues,
+      onToggle
+    }),
+    [
+      variant,
+      themeColor,
+      size,
+      radius,
+      isDisabled,
+      isSelectable,
+      selectMode,
+      currentValues,
+      onToggle
+    ]
+  );
+  return /* @__PURE__ */ import_react47.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react47.default.createElement(
+    import_react_native40.View,
+    {
+      style: [
+        styles12.groupContainer,
+        { gap: spacing },
+        customAppearance?.container
+      ],
+      accessible: true
+    },
+    children
+  ));
+};
+
+// src/components/chip/chip-item.tsx
+var import_react48 = __toESM(require("react"), 1);
+function getSelectableVariant(baseVariant, isSelected) {
+  if (isSelected) {
+    return baseVariant;
+  }
+  if (baseVariant === "solid" || baseVariant === "shadow") {
+    return "bordered";
+  }
+  return "light";
+}
+var ChipItem = ({
+  value,
+  children,
+  variant,
+  themeColor,
+  avatar,
+  startContent,
+  endContent,
+  isDisabled,
+  customAppearance
+}) => {
+  const groupContext = (0, import_react48.useContext)(ChipGroupContext);
+  if (!groupContext) {
+    return null;
+  }
+  const resolvedVariant = variant ?? groupContext.variant;
+  const resolvedColor = themeColor ?? groupContext.themeColor;
+  const resolvedDisabled = isDisabled ?? groupContext.isDisabled;
+  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(
+    Chip,
+    {
+      variant: chipVariant,
+      themeColor: resolvedColor,
+      size: groupContext.size,
+      radius: groupContext.radius,
+      isDisabled: resolvedDisabled,
+      avatar,
+      startContent,
+      endContent,
+      customAppearance,
+      onPress: handlePress
+    },
+    children
+  );
+};
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var import_react50 = __toESM(require("react"), 1);
+var import_react_native44 = 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");
 
 // src/components/bottom-sheet/bottom-sheet.animation.ts
-var import_react_native38 = require("react-native");
+var import_react_native41 = require("react-native");
 var SPRING_CONFIG = {
   useNativeDriver: true,
   speed: 14,
@@ -4244,16 +4750,16 @@ var SPRING_CONFIG = {
 };
 var TIMING_CONFIG = {
   duration: 280,
-  easing: import_react_native38.Easing.bezier(0.2, 0, 0, 1),
+  easing: import_react_native41.Easing.bezier(0.2, 0, 0, 1),
   useNativeDriver: true
 };
 var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
-  const animation = import_react_native38.Animated.parallel([
-    import_react_native38.Animated.spring(translateY, {
+  const animation = import_react_native41.Animated.parallel([
+    import_react_native41.Animated.spring(translateY, {
       ...SPRING_CONFIG,
       toValue: targetTranslateY
     }),
-    import_react_native38.Animated.timing(backdropOpacity, {
+    import_react_native41.Animated.timing(backdropOpacity, {
       ...TIMING_CONFIG,
       toValue: 1
     })
@@ -4262,12 +4768,12 @@ var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
   return animation;
 };
 var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
-  const animation = import_react_native38.Animated.parallel([
-    import_react_native38.Animated.timing(translateY, {
+  const animation = import_react_native41.Animated.parallel([
+    import_react_native41.Animated.timing(translateY, {
       ...TIMING_CONFIG,
       toValue: screenHeight
     }),
-    import_react_native38.Animated.timing(backdropOpacity, {
+    import_react_native41.Animated.timing(backdropOpacity, {
       ...TIMING_CONFIG,
       toValue: 0
     })
@@ -4280,7 +4786,7 @@ var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete)
   return animation;
 };
 var runSnapAnimation = (translateY, targetTranslateY) => {
-  const animation = import_react_native38.Animated.spring(translateY, {
+  const animation = import_react_native41.Animated.spring(translateY, {
     ...SPRING_CONFIG,
     toValue: targetTranslateY
   });
@@ -4291,7 +4797,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_native39.Dimensions.get("window").height;
+var SCREEN_HEIGHT = import_react_native42.Dimensions.get("window").height;
 var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
 var useBottomSheetAnimation = ({
   isOpen,
@@ -4302,20 +4808,20 @@ var useBottomSheetAnimation = ({
   onClose,
   onSnapChange
 }) => {
-  const [shouldRender, setShouldRender] = (0, import_react43.useState)(false);
-  const currentSnapIndex = (0, import_react43.useRef)(initialSnapIndex);
-  const animationRef = (0, import_react43.useRef)(null);
-  const translateY = (0, import_react43.useRef)(new import_react_native39.Animated.Value(SCREEN_HEIGHT)).current;
-  const backdropOpacity = (0, import_react43.useRef)(new import_react_native39.Animated.Value(0)).current;
-  const sortedSnapPoints = (0, import_react43.useMemo)(
+  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)(
     () => [...snapPoints].sort((a, b) => a - b),
     [snapPoints]
   );
-  const snapTranslateValues = (0, import_react43.useMemo)(
+  const snapTranslateValues = (0, import_react49.useMemo)(
     () => sortedSnapPoints.map(getTranslateYForSnap),
     [sortedSnapPoints]
   );
-  const open = (0, import_react43.useCallback)(() => {
+  const open = (0, import_react49.useCallback)(() => {
     setShouldRender(true);
     const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
     currentSnapIndex.current = targetIndex;
@@ -4340,7 +4846,7 @@ var useBottomSheetAnimation = ({
     translateY,
     backdropOpacity
   ]);
-  const close = (0, import_react43.useCallback)(() => {
+  const close = (0, import_react49.useCallback)(() => {
     if (disableAnimation) {
       translateY.setValue(SCREEN_HEIGHT);
       backdropOpacity.setValue(0);
@@ -4359,7 +4865,7 @@ var useBottomSheetAnimation = ({
       }
     );
   }, [disableAnimation, translateY, backdropOpacity, onClose]);
-  const snapTo = (0, import_react43.useCallback)(
+  const snapTo = (0, import_react49.useCallback)(
     (index) => {
       const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
       currentSnapIndex.current = clampedIndex;
@@ -4376,15 +4882,15 @@ var useBottomSheetAnimation = ({
     },
     [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (isOpen) {
       open();
     } else if (shouldRender) {
       close();
     }
   }, [isOpen]);
-  const panResponder = (0, import_react43.useMemo)(
-    () => import_react_native39.PanResponder.create({
+  const panResponder = (0, import_react49.useMemo)(
+    () => import_react_native42.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
       onPanResponderMove: (_, gestureState) => {
@@ -4451,9 +4957,9 @@ var useBottomSheetAnimation = ({
 };
 var useBottomSheetStyles = (themeColor, radius) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core32.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core34.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  const sheetStyles = (0, import_react43.useMemo)(
+  const sheetStyles = (0, import_react49.useMemo)(
     () => ({
       backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
       borderTopLeftRadius: theme.borderRadius[radius],
@@ -4461,7 +4967,7 @@ var useBottomSheetStyles = (themeColor, radius) => {
     }),
     [theme, colorScheme, radius]
   );
-  const handleIndicatorColor = (0, import_react43.useMemo)(
+  const handleIndicatorColor = (0, import_react49.useMemo)(
     () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
     [theme, colorScheme]
   );
@@ -4469,8 +4975,8 @@ var useBottomSheetStyles = (themeColor, radius) => {
 };
 
 // src/components/bottom-sheet/bottom-sheet.style.ts
-var import_react_native40 = require("react-native");
-var styles12 = import_react_native40.StyleSheet.create({
+var import_react_native43 = require("react-native");
+var styles13 = import_react_native43.StyleSheet.create({
   backdrop: {
     position: "absolute",
     top: 0,
@@ -4549,53 +5055,656 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ import_react44.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react44.default.createElement(
-    import_react_native41.Animated.View,
+  return /* @__PURE__ */ import_react50.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react50.default.createElement(
+    import_react_native44.Animated.View,
     {
-      style: [styles12.backdrop, { opacity: backdropOpacity }]
+      style: [styles13.backdrop, { opacity: backdropOpacity }]
     },
-    /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native41.Pressable,
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_react_native44.Pressable,
       {
-        style: styles12.backdrop,
+        style: styles13.backdrop,
         onPress: handleBackdropPress
       }
     )
-  ), /* @__PURE__ */ import_react44.default.createElement(
-    import_react_native41.Animated.View,
+  ), /* @__PURE__ */ import_react50.default.createElement(
+    import_react_native44.Animated.View,
     {
       style: [
-        styles12.container,
+        styles13.container,
         {
           height: screenHeight,
           transform: [{ translateY }]
         }
       ]
     },
-    /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native41.View,
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_react_native44.View,
       {
         style: [
-          styles12.sheet,
+          styles13.sheet,
           { height: screenHeight },
           sheetStyles,
           style
         ],
         ...panResponder.panHandlers
       },
-      showHandle && /* @__PURE__ */ import_react44.default.createElement(import_react_native41.View, { style: styles12.handle }, handleContent ?? /* @__PURE__ */ import_react44.default.createElement(
-        import_react_native41.View,
+      showHandle && /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.handle }, handleContent ?? /* @__PURE__ */ import_react50.default.createElement(
+        import_react_native44.View,
         {
           style: [
-            styles12.handleIndicator,
+            styles13.handleIndicator,
             { backgroundColor: handleIndicatorColor }
           ]
         }
       )),
-      /* @__PURE__ */ import_react44.default.createElement(import_react_native41.View, { style: styles12.content }, children)
+      /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.content }, children)
+    )
+  ));
+};
+
+// src/components/fab/fab.tsx
+var import_react52 = __toESM(require("react"), 1);
+var import_react_native47 = require("react-native");
+
+// src/components/fab/fab.style.ts
+var import_react_native45 = require("react-native");
+var styles14 = import_react_native45.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_react51 = require("react");
+var import_core36 = require("@xaui/core");
+function useFabSizeStyles(size) {
+  const theme = useXUITheme();
+  const sizeStyles = (0, import_react51.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_react51.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_core36.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = (0, import_react51.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_core36.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const iconColor = (0, import_react51.useMemo)(() => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return { iconColor };
+}
+function useFabRadiusValue(radius, fallback) {
+  const theme = useXUITheme();
+  return (0, import_react51.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_native46 = require("react-native");
+var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native46.Animated.parallel([
+    import_react_native46.Animated.spring(animatedScale, {
+      toValue: 0.92,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native46.Animated.timing(animatedOpacity, {
+      toValue: 0.85,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native46.Animated.parallel([
+    import_react_native46.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native46.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_react52.default.useRef(new import_react_native47.Animated.Value(1)).current;
+  const animatedOpacity = import_react52.default.useRef(new import_react_native47.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_react52.default.createElement(import_react_native47.View, { style: [styles14.container, customAppearance?.container] }, /* @__PURE__ */ import_react52.default.createElement(
+    import_react_native47.Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ import_react52.default.createElement(
+      import_react_native47.Animated.View,
+      {
+        style: [
+          styles14.fab,
+          fabDimensionStyles,
+          variantStyles,
+          isDisabled && styles14.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.fab
+        ]
+      },
+      isLoading ? /* @__PURE__ */ import_react52.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_react52.default.createElement(import_react_native47.View, { style: styles14.contentContainer }, icon, isExtended && /* @__PURE__ */ import_react52.default.createElement(
+        import_react_native47.Text,
+        {
+          style: [
+            styles14.label,
+            {
+              fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
+              color: iconColor
+            }
+          ]
+        },
+        label
+      ))
     )
   ));
 };
+
+// src/components/fab-menu/fab-menu.tsx
+var import_react54 = __toESM(require("react"), 1);
+var import_react_native50 = require("react-native");
+
+// src/components/fab-menu/fab-menu.style.ts
+var import_react_native48 = require("react-native");
+var styles15 = import_react_native48.StyleSheet.create({
+  container: {
+    position: "relative",
+    alignItems: "flex-end"
+  },
+  portalRoot: {
+    ...import_react_native48.StyleSheet.absoluteFillObject
+  },
+  overlay: {
+    ...import_react_native48.StyleSheet.absoluteFillObject
+  },
+  overlayPressable: {
+    flex: 1
+  },
+  portalContent: {
+    ...import_react_native48.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_react53 = require("react");
+var import_core38 = require("@xaui/core");
+function useFabMenuState(controlledExpanded, onToggle) {
+  const [internalExpanded, setInternalExpanded] = (0, import_react53.useState)(false);
+  const isControlled = controlledExpanded !== void 0;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const toggle = (0, import_react53.useCallback)(() => {
+    const next = !expanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onToggle?.(next);
+  }, [expanded, isControlled, onToggle]);
+  const close = (0, import_react53.useCallback)(() => {
+    if (!isControlled) {
+      setInternalExpanded(false);
+    }
+    onToggle?.(false);
+  }, [isControlled, onToggle]);
+  return { expanded, toggle, close };
+}
+function useFabMenuItemStyles(themeColor) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core38.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const itemStyles = (0, import_react53.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_react53.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_native49 = require("react-native");
+var runMenuExpandAnimation = (overlayOpacity, itemAnimations) => {
+  const itemSequence = itemAnimations.map(
+    (anim, index) => import_react_native49.Animated.timing(anim, {
+      toValue: 1,
+      duration: 150,
+      delay: index * 50,
+      useNativeDriver: true
+    })
+  );
+  import_react_native49.Animated.parallel([
+    import_react_native49.Animated.timing(overlayOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native49.Animated.stagger(50, itemSequence)
+  ]).start();
+};
+var runMenuCollapseAnimation = (overlayOpacity, itemAnimations, onComplete) => {
+  const reversed = [...itemAnimations].reverse();
+  const itemSequence = reversed.map(
+    (anim, index) => import_react_native49.Animated.timing(anim, {
+      toValue: 0,
+      duration: 120,
+      delay: index * 30,
+      useNativeDriver: true
+    })
+  );
+  import_react_native49.Animated.parallel([
+    import_react_native49.Animated.timing(overlayOpacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native49.Animated.stagger(30, itemSequence)
+  ]).start(onComplete);
+};
+var runFabRotateAnimation = (rotateValue, toExpanded) => {
+  import_react_native49.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_react54.default.useState(expanded);
+  const childArray = import_react54.default.Children.toArray(children);
+  const overlayOpacity = import_react54.default.useRef(
+    new import_react_native50.Animated.Value(expanded ? 1 : 0)
+  ).current;
+  const rotateValue = import_react54.default.useRef(
+    new import_react_native50.Animated.Value(expanded ? 1 : 0)
+  ).current;
+  const itemAnimationsRef = import_react54.default.useRef(
+    childArray.map(() => new import_react_native50.Animated.Value(0))
+  );
+  const itemAnimations = itemAnimationsRef.current;
+  const prevExpanded = import_react54.default.useRef(expanded);
+  import_react54.default.useEffect(() => {
+    if (itemAnimations.length === childArray.length) return;
+    itemAnimationsRef.current = childArray.map(
+      (_, index) => itemAnimations[index] ?? new import_react_native50.Animated.Value(expanded ? 1 : 0)
+    );
+  }, [expanded, itemAnimations, childArray]);
+  import_react54.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_react54.default.createElement(
+    import_react_native50.Animated.View,
+    {
+      style: {
+        alignSelf: "flex-end",
+        transform: [{ rotate: expandedIcon ? "0deg" : rotation }]
+      }
+    },
+    /* @__PURE__ */ import_react54.default.createElement(
+      Fab,
+      {
+        icon: currentIcon,
+        label,
+        themeColor,
+        variant,
+        size,
+        radius,
+        elevation,
+        onPress: toggle,
+        customAppearance: { fab: customAppearance?.fab }
+      }
+    )
+  );
+  const renderMenuItems = () => /* @__PURE__ */ import_react54.default.createElement(import_react_native50.View, { style: [styles15.menuContainer, customAppearance?.menuContainer] }, childArray.map((child, index) => {
+    const childElement = child;
+    const isDisabled = childElement.props?.isDisabled;
+    return /* @__PURE__ */ import_react54.default.createElement(
+      import_react_native50.Animated.View,
+      {
+        key: childElement.key ?? index,
+        style: [
+          styles15.menuItem,
+          isDisabled && styles15.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_react54.default.cloneElement(childElement, {
+        _onClose: close,
+        themeColor: childElement.props?.themeColor ?? themeColor
+      })
+    );
+  }));
+  return /* @__PURE__ */ import_react54.default.createElement(import_react_native50.View, { style: [styles15.container, customAppearance?.container] }, isPortalVisible && /* @__PURE__ */ import_react54.default.createElement(Portal, null, /* @__PURE__ */ import_react54.default.createElement(import_react_native50.View, { style: styles15.portalRoot }, showOverlay && /* @__PURE__ */ import_react54.default.createElement(
+    import_react_native50.Animated.View,
+    {
+      style: [
+        styles15.overlay,
+        { backgroundColor: overlayColor, opacity: overlayOpacity },
+        customAppearance?.overlay
+      ]
+    },
+    /* @__PURE__ */ import_react54.default.createElement(import_react_native50.Pressable, { style: styles15.overlayPressable, onPress: close })
+  ), /* @__PURE__ */ import_react54.default.createElement(import_react_native50.View, { style: styles15.portalContent }, renderMenuItems(), renderFabToggle()))), !isPortalVisible && renderFabToggle());
+};
+
+// src/components/fab-menu/fab-menu-item.tsx
+var import_react55 = __toESM(require("react"), 1);
+var import_react_native51 = require("react-native");
+var FabMenuItem = ({
+  icon,
+  label,
+  themeColor = "primary",
+  onPress,
+  isDisabled,
+  _onClose
+}) => {
+  const itemStyles = useFabMenuItemStyles(themeColor);
+  const renderIcon = (menuIcon) => {
+    if (!import_react55.default.isValidElement(menuIcon)) return menuIcon;
+    return import_react55.default.cloneElement(
+      menuIcon,
+      { color: itemStyles.iconColor }
+    );
+  };
+  return /* @__PURE__ */ import_react55.default.createElement(
+    import_react_native51.Pressable,
+    {
+      style: [
+        styles15.menuItemChip,
+        {
+          backgroundColor: itemStyles.chipStyles.backgroundColor,
+          borderRadius: itemStyles.chipStyles.borderRadius
+        }
+      ],
+      onPress: (event) => {
+        if (isDisabled) return;
+        onPress?.(event);
+        _onClose?.();
+      },
+      disabled: isDisabled
+    },
+    renderIcon(icon),
+    /* @__PURE__ */ import_react55.default.createElement(
+      import_react_native51.Text,
+      {
+        style: [
+          styles15.menuItemLabel,
+          {
+            color: itemStyles.chipStyles.color,
+            fontSize: itemStyles.chipStyles.fontSize
+          }
+        ]
+      },
+      label
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
@@ -4606,7 +5715,13 @@ var BottomSheet = ({
   AvatarGroup,
   Badge,
   BottomSheet,
+  Chip,
+  ChipGroup,
+  ChipItem,
   DatePicker,
   Divider,
+  Fab,
+  FabMenu,
+  FabMenuItem,
   Typography
 });