@xaui/native 0.0.26 → 0.0.28

package/dist/timepicker/index.js

@@ -1,7 +1,10 @@
 import {
-  Portal,
+  BottomSheet
+} from "../chunk-HC2SSHNU.js";
+import "../chunk-DXXNBF5P.js";
+import {
   useXUITheme
-} from "../chunk-4KSZLONZ.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/timepicker/timepicker.tsx
 import React, { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
@@ -683,370 +686,8 @@ var TimePicker = ({
 };
 
 // src/components/timepicker/timepicker-dialog.tsx
-import React3, { useState as useState4 } from "react";
-import { View as View3, Text as Text2, Pressable as Pressable3 } from "react-native";
-
-// src/components/bottom-sheet/bottom-sheet.tsx
-import React2 from "react";
-import { Animated as Animated4, Pressable as Pressable2, View as View2 } from "react-native";
-
-// src/components/bottom-sheet/bottom-sheet.hook.ts
-import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
-import { Animated as Animated3, Dimensions, PanResponder } from "react-native";
-import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
-
-// src/components/bottom-sheet/bottom-sheet.animation.ts
-import { Animated as Animated2, Easing as Easing2 } from "react-native";
-var SPRING_CONFIG = {
-  useNativeDriver: true,
-  speed: 14,
-  bounciness: 4
-};
-var TIMING_CONFIG = {
-  duration: 280,
-  easing: Easing2.bezier(0.2, 0, 0, 1),
-  useNativeDriver: true
-};
-var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
-  const animation = Animated2.parallel([
-    Animated2.spring(translateY, {
-      ...SPRING_CONFIG,
-      toValue: targetTranslateY
-    }),
-    Animated2.timing(backdropOpacity, {
-      ...TIMING_CONFIG,
-      toValue: 1
-    })
-  ]);
-  animation.start();
-  return animation;
-};
-var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
-  const animation = Animated2.parallel([
-    Animated2.timing(translateY, {
-      ...TIMING_CONFIG,
-      toValue: screenHeight
-    }),
-    Animated2.timing(backdropOpacity, {
-      ...TIMING_CONFIG,
-      toValue: 0
-    })
-  ]);
-  animation.start(({ finished }) => {
-    if (finished && onComplete) {
-      onComplete();
-    }
-  });
-  return animation;
-};
-var runSnapAnimation = (translateY, targetTranslateY) => {
-  const animation = Animated2.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 = Dimensions.get("window").height;
-var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
-var useBottomSheetAnimation = ({
-  isOpen,
-  snapPoints,
-  initialSnapIndex,
-  enableSwipeToDismiss,
-  disableAnimation,
-  onClose,
-  onSnapChange
-}) => {
-  const [shouldRender, setShouldRender] = useState3(false);
-  const currentSnapIndex = useRef(initialSnapIndex);
-  const animationRef = useRef(null);
-  const translateY = useRef(new Animated3.Value(SCREEN_HEIGHT)).current;
-  const backdropOpacity = useRef(new Animated3.Value(0)).current;
-  const sortedSnapPoints = useMemo3(
-    () => [...snapPoints].sort((a, b) => a - b),
-    [snapPoints]
-  );
-  const snapTranslateValues = useMemo3(
-    () => sortedSnapPoints.map(getTranslateYForSnap),
-    [sortedSnapPoints]
-  );
-  const open = 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 = 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 = 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
-    ]
-  );
-  useEffect2(() => {
-    if (isOpen) {
-      open();
-    } else if (shouldRender) {
-      close();
-    }
-  }, [isOpen]);
-  const panResponder = useMemo3(
-    () => 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 = getSafeThemeColor2(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const sheetStyles = useMemo3(
-    () => ({
-      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
-      borderTopLeftRadius: theme.borderRadius[radius],
-      borderTopRightRadius: theme.borderRadius[radius]
-    }),
-    [theme, colorScheme, radius]
-  );
-  const handleIndicatorColor = useMemo3(
-    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
-    [theme, colorScheme]
-  );
-  return { sheetStyles, handleIndicatorColor };
-};
-
-// src/components/bottom-sheet/bottom-sheet.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var styles2 = StyleSheet2.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__ */ React2.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React2.createElement(Animated4.View, { style: [styles2.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React2.createElement(Pressable2, { style: styles2.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React2.createElement(
-    Animated4.View,
-    {
-      style: [
-        styles2.container,
-        {
-          height: screenHeight,
-          transform: [{ translateY }]
-        }
-      ]
-    },
-    /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [styles2.sheet, { height: screenHeight }, sheetStyles, style],
-        ...panResponder.panHandlers
-      },
-      showHandle && /* @__PURE__ */ React2.createElement(View2, { style: styles2.handle }, handleContent ?? /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          style: [
-            styles2.handleIndicator,
-            { backgroundColor: handleIndicatorColor }
-          ]
-        }
-      )),
-      /* @__PURE__ */ React2.createElement(View2, { style: styles2.content }, children)
-    )
-  ));
-};
-
-// src/components/timepicker/timepicker-dialog.tsx
+import React2, { useState as useState3 } from "react";
+import { View as View2, Text as Text2, Pressable as Pressable2 } from "react-native";
 var TimePickerDialog = ({
   isOpen,
   onClose,
@@ -1059,7 +700,7 @@ var TimePickerDialog = ({
   onConfirm,
   onCancel
 }) => {
-  const [tempValue, setTempValue] = useState4(value);
+  const [tempValue, setTempValue] = useState3(value);
   const colors = useTimePickerColors(themeColor);
   const handleChange = (time) => {
     setTempValue(time);
@@ -1075,7 +716,7 @@ var TimePickerDialog = ({
     onCancel?.();
     onClose();
   };
-  return /* @__PURE__ */ React3.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ React3.createElement(View3, null, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ React2.createElement(View2, null, /* @__PURE__ */ React2.createElement(
     TimePicker,
     {
       value: tempValue,
@@ -1083,26 +724,26 @@ var TimePickerDialog = ({
       is24Hour,
       themeColor
     }
-  ), /* @__PURE__ */ React3.createElement(View3, { style: styles.actions }, /* @__PURE__ */ React3.createElement(
-    Pressable3,
+  ), /* @__PURE__ */ React2.createElement(View2, { style: styles.actions }, /* @__PURE__ */ React2.createElement(
+    Pressable2,
     {
       onPress: handleCancel,
       style: [styles.actionButton, { backgroundColor: "transparent" }]
     },
-    /* @__PURE__ */ React3.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, cancelText)
-  ), /* @__PURE__ */ React3.createElement(
-    Pressable3,
+    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, cancelText)
+  ), /* @__PURE__ */ React2.createElement(
+    Pressable2,
     {
       onPress: handleConfirm,
       style: [styles.actionButton, { backgroundColor: "transparent" }]
     },
-    /* @__PURE__ */ React3.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, confirmText)
+    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, confirmText)
   ))));
 };
 
 // src/components/timepicker/timepicker-trigger.tsx
-import React4, { useMemo as useMemo4 } from "react";
-import { Pressable as Pressable4, Text as Text3, TouchableOpacity, View as View4 } from "react-native";
+import React3, { useMemo as useMemo3 } from "react";
+import { Pressable as Pressable3, Text as Text3, TouchableOpacity, View as View3 } from "react-native";
 import { CloseIcon, TimeIcon } from "@xaui/icons";
 var TimePickerTrigger = ({
   value,
@@ -1121,7 +762,7 @@ var TimePickerTrigger = ({
   const theme = useXUITheme();
   const colors = useTimePickerColors(themeColor);
   const hasValue = Boolean(value);
-  const displayValue = useMemo4(() => {
+  const displayValue = useMemo3(() => {
     if (!value) return placeholder;
     return formatTimeValue(value, is24Hour);
   }, [value, placeholder, is24Hour]);
@@ -1133,8 +774,8 @@ var TimePickerTrigger = ({
     color: hasValue ? theme.colors.foreground : colors.textSecondary
   };
   const isBlocked = isDisabled || isReadOnly;
-  return /* @__PURE__ */ React4.createElement(
-    Pressable4,
+  return /* @__PURE__ */ React3.createElement(
+    Pressable3,
     {
       onPress: isBlocked ? void 0 : onPress,
       disabled: isBlocked,
@@ -1142,7 +783,7 @@ var TimePickerTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isBlocked }
     },
-    /* @__PURE__ */ React4.createElement(View4, { style: styles.triggerContent }, /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(View3, { style: styles.triggerContent }, /* @__PURE__ */ React3.createElement(
       Text3,
       {
         style: [styles.triggerText, triggerTextStyle, textStyle],
@@ -1151,15 +792,15 @@ var TimePickerTrigger = ({
       },
       displayValue
     )),
-    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ React4.createElement(
+    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ React3.createElement(
       TouchableOpacity,
       {
         onPress: onClear,
         style: styles.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      /* @__PURE__ */ React4.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
-    ) : icon ?? /* @__PURE__ */ React4.createElement(TimeIcon, { color: theme.colors.foreground, size: 20 })
+      /* @__PURE__ */ React3.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : icon ?? /* @__PURE__ */ React3.createElement(TimeIcon, { color: theme.colors.foreground, size: 20 })
   );
 };
 export {