@xaui/native 0.0.14 → 0.0.15

package/dist/index.cjs

@@ -38,6 +38,9 @@ __export(src_exports, {
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   BottomSheet: () => BottomSheet,
+  Chip: () => Chip,
+  ChipGroup: () => ChipGroup,
+  ChipItem: () => ChipItem,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
   Typography: () => Typography
@@ -1442,7 +1445,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles13 = {
+    const styles14 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1467,7 +1470,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles13[variant];
+    return styles14[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
@@ -4134,7 +4137,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles13 = {
+    const styles14 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -4186,7 +4189,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles13[variant];
+    return styles14[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -4226,17 +4229,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 +4747,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 +4765,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 +4783,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 +4794,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 +4805,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 +4843,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 +4862,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 +4879,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 +4954,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 +4964,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 +4972,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,50 +5052,50 @@ 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)
     )
   ));
 };
@@ -4606,6 +5109,9 @@ var BottomSheet = ({
   AvatarGroup,
   Badge,
   BottomSheet,
+  Chip,
+  ChipGroup,
+  ChipItem,
   DatePicker,
   Divider,
   Typography