@xaui/native 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -37,6 +37,10 @@ __export(src_exports, {
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
+  Chip: () => Chip,
+  ChipGroup: () => ChipGroup,
+  ChipItem: () => ChipItem,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
   Typography: () => Typography
@@ -1441,7 +1445,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles12 = {
+    const styles14 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1466,7 +1470,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles12[variant];
+    return styles14[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
@@ -4133,7 +4137,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles12 = {
+    const styles14 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -4185,7 +4189,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles12[variant];
+    return styles14[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -4224,6 +4228,877 @@ var Typography = ({
     children
   );
 };
+
+// src/components/chip/chip.tsx
+var import_react44 = __toESM(require("react"), 1);
+var import_react_native39 = require("react-native");
+
+// 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_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_native41 = require("react-native");
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: import_react_native41.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, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    import_react_native41.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = import_react_native41.Animated.parallel([
+    import_react_native41.Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    import_react_native41.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = import_react_native41.Animated.spring(translateY, {
+    ...SPRING_CONFIG,
+    toValue: targetTranslateY
+  });
+  animation.start();
+  return animation;
+};
+
+// 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 getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  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)(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = (0, import_react49.useMemo)(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = (0, import_react49.useCallback)(() => {
+    setShouldRender(true);
+    const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
+    currentSnapIndex.current = targetIndex;
+    if (disableAnimation) {
+      translateY.setValue(snapTranslateValues[targetIndex]);
+      backdropOpacity.setValue(1);
+      return;
+    }
+    translateY.setValue(SCREEN_HEIGHT);
+    backdropOpacity.setValue(0);
+    animationRef.current?.stop();
+    animationRef.current = runOpenAnimation(
+      translateY,
+      backdropOpacity,
+      snapTranslateValues[targetIndex]
+    );
+  }, [
+    initialSnapIndex,
+    sortedSnapPoints,
+    snapTranslateValues,
+    disableAnimation,
+    translateY,
+    backdropOpacity
+  ]);
+  const close = (0, import_react49.useCallback)(() => {
+    if (disableAnimation) {
+      translateY.setValue(SCREEN_HEIGHT);
+      backdropOpacity.setValue(0);
+      setShouldRender(false);
+      onClose?.();
+      return;
+    }
+    animationRef.current?.stop();
+    animationRef.current = runCloseAnimation(
+      translateY,
+      backdropOpacity,
+      SCREEN_HEIGHT,
+      () => {
+        setShouldRender(false);
+        onClose?.();
+      }
+    );
+  }, [disableAnimation, translateY, backdropOpacity, onClose]);
+  const snapTo = (0, import_react49.useCallback)(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
+      currentSnapIndex.current = clampedIndex;
+      onSnapChange?.(clampedIndex);
+      if (disableAnimation) {
+        translateY.setValue(snapTranslateValues[clampedIndex]);
+        return;
+      }
+      animationRef.current?.stop();
+      animationRef.current = runSnapAnimation(
+        translateY,
+        snapTranslateValues[clampedIndex]
+      );
+    },
+    [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
+  );
+  (0, import_react49.useEffect)(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = (0, import_react49.useMemo)(
+    () => import_react_native42.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
+      onPanResponderMove: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const newTranslateY = currentTranslate + gestureState.dy;
+        const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
+        const clamped = Math.max(maxExpanded, newTranslateY);
+        translateY.setValue(clamped);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const finalPosition = currentTranslate + gestureState.dy;
+        if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
+          close();
+          return;
+        }
+        if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
+          const nextIndex = Math.min(
+            currentSnapIndex.current + 1,
+            sortedSnapPoints.length - 1
+          );
+          snapTo(nextIndex);
+          return;
+        }
+        if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
+          const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
+          if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
+            close();
+            return;
+          }
+          snapTo(prevIndex);
+          return;
+        }
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        snapTranslateValues.forEach((snapVal, index) => {
+          const distance = Math.abs(finalPosition - snapVal);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = index;
+          }
+        });
+        snapTo(closestIndex);
+      }
+    }),
+    [
+      snapTranslateValues,
+      sortedSnapPoints,
+      enableSwipeToDismiss,
+      translateY,
+      close,
+      snapTo
+    ]
+  );
+  return {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    snapTo,
+    screenHeight: SCREEN_HEIGHT
+  };
+};
+var useBottomSheetStyles = (themeColor, radius) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core34.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = (0, import_react49.useMemo)(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = (0, import_react49.useMemo)(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+var import_react_native43 = require("react-native");
+var styles13 = import_react_native43.StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10
+  },
+  handleIndicator: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var BottomSheet = ({
+  children,
+  isOpen,
+  snapPoints = [0.4, 0.9],
+  initialSnapIndex = 0,
+  themeColor = "default",
+  radius = "lg",
+  showBackdrop = true,
+  closeOnBackdropPress = true,
+  enableSwipeToDismiss = true,
+  showHandle = true,
+  disableAnimation = false,
+  style,
+  handleContent,
+  onClose,
+  onSnapChange
+}) => {
+  const {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    screenHeight
+  } = useBottomSheetAnimation({
+    isOpen,
+    snapPoints,
+    initialSnapIndex,
+    enableSwipeToDismiss,
+    disableAnimation,
+    onClose,
+    onSnapChange
+  });
+  const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
+    themeColor,
+    radius
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      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,
+    {
+      style: [
+        styles13.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_react_native44.View,
+      {
+        style: [
+          styles13.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,
+        {
+          style: [
+            styles13.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ import_react50.default.createElement(import_react_native44.View, { style: styles13.content }, children)
+    )
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
@@ -4233,6 +5108,10 @@ var Typography = ({
   Avatar,
   AvatarGroup,
   Badge,
+  BottomSheet,
+  Chip,
+  ChipGroup,
+  ChipItem,
   DatePicker,
   Divider,
   Typography