@gaozh1024/rn-kit 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -960,6 +960,29 @@ function resolveTextTone(tone, theme, isDark) {
       return void 0;
   }
 }
+var textUtilityTokens = /* @__PURE__ */ new Set([
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  "text-auto",
+  "text-wrap",
+  "text-nowrap",
+  "text-balance",
+  "text-pretty",
+  "text-ellipsis",
+  "text-clip"
+]);
+var textSizePattern = /^text-(xs|sm|base|lg|xl|[2-9]xl)$/;
+function hasExplicitTextColorClass(className) {
+  if (!className) return false;
+  return className.split(/\s+/).some((token) => {
+    if (!token.startsWith("text-")) return false;
+    if (textUtilityTokens.has(token)) return false;
+    if (textSizePattern.test(token)) return false;
+    return true;
+  });
+}
 
 // src/ui/primitives/AppView.tsx
 import { jsx as jsx2 } from "nativewind/jsx-runtime";
@@ -1052,7 +1075,7 @@ function AppScrollView({
 }
 
 // src/ui/primitives/AppText.tsx
-import { Text } from "react-native";
+import { StyleSheet, Text } from "react-native";
 import { jsx as jsx4 } from "nativewind/jsx-runtime";
 function AppText({
   size = "md",
@@ -1065,6 +1088,9 @@ function AppText({
   ...props
 }) {
   const { theme, isDark } = useOptionalTheme();
+  const flattenedStyle = StyleSheet.flatten(style);
+  const hasExplicitStyleColor = flattenedStyle?.color !== void 0;
+  const hasExplicitClassColor = hasExplicitTextColorClass(className);
   const sizeMap3 = {
     xs: "text-xs",
     sm: "text-sm",
@@ -1080,12 +1106,18 @@ function AppText({
     semibold: "font-semibold",
     bold: "font-bold"
   };
-  const resolvedColor = resolveTextTone(tone, theme, isDark) ?? resolveNamedColor(color, theme, isDark);
+  const fallbackTone = tone ?? (color || hasExplicitStyleColor || hasExplicitClassColor ? void 0 : "default");
+  const resolvedColor = resolveTextTone(fallbackTone, theme, isDark) ?? resolveNamedColor(color, theme, isDark);
   const shouldUseClassColor = !!color && !resolvedColor;
   return /* @__PURE__ */ jsx4(
     Text,
     {
-      className: cn(sizeMap3[size], weightMap[weight], shouldUseClassColor && `text-${color}`, className),
+      className: cn(
+        sizeMap3[size],
+        weightMap[weight],
+        shouldUseClassColor && `text-${color}`,
+        className
+      ),
       style: [resolvedColor ? { color: resolvedColor } : void 0, style],
       ...props,
       children
@@ -1167,7 +1199,7 @@ function Center({ flex = true, ...props }) {
 }
 
 // src/ui/layout/SafeScreen.tsx
-import { View as View2, StyleSheet } from "react-native";
+import { View as View2, StyleSheet as StyleSheet2 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as jsx9 } from "nativewind/jsx-runtime";
 function SafeScreen({
@@ -1206,7 +1238,7 @@ function SafeScreen({
     }
   );
 }
-var styles = StyleSheet.create({
+var styles = StyleSheet2.create({
   flex: {
     flex: 1
   }
@@ -1284,7 +1316,7 @@ function Toast({ message, type = "info", visible = true }) {
 
 // src/ui/feedback/Alert.tsx
 import { useCallback as useCallback9 } from "react";
-import { Modal, TouchableOpacity, StyleSheet as StyleSheet2 } from "react-native";
+import { Modal, TouchableOpacity, StyleSheet as StyleSheet3 } from "react-native";
 import { jsx as jsx12, jsxs } from "nativewind/jsx-runtime";
 function Alert({ visible, title, message, buttons, onClose }) {
   const { theme, isDark } = useTheme();
@@ -1433,7 +1465,7 @@ function Alert({ visible, title, message, buttons, onClose }) {
     }
   );
 }
-var styles2 = StyleSheet2.create({
+var styles2 = StyleSheet3.create({
   singleButton: {
     borderBottomLeftRadius: 12,
     borderBottomRightRadius: 12
@@ -1450,13 +1482,7 @@ var styles2 = StyleSheet2.create({
 // src/ui/feedback/Loading.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
 import { jsx as jsx13, jsxs as jsxs2 } from "nativewind/jsx-runtime";
-function Loading({
-  text,
-  color,
-  overlay = false,
-  visible = true,
-  testID
-}) {
+function Loading({ text, color, overlay = false, visible = true, testID }) {
   if (!visible) return null;
   const content = /* @__PURE__ */ jsxs2(AppView, { center: true, gap: 3, testID, children: [
     /* @__PURE__ */ jsx13(ActivityIndicator2, { size: "large", color }),
@@ -1786,7 +1812,7 @@ import {
   FlatList,
   RefreshControl,
   ActivityIndicator as ActivityIndicator4,
-  StyleSheet as StyleSheet3
+  StyleSheet as StyleSheet4
 } from "react-native";
 import { Fragment, jsx as jsx18, jsxs as jsxs4 } from "nativewind/jsx-runtime";
 function SkeletonItem2({ render }) {
@@ -1974,16 +2000,186 @@ function AppList({
     }
   );
 }
-var styles3 = StyleSheet3.create({
+var styles3 = StyleSheet4.create({
   retryButton: {
     borderWidth: 0.5
   }
 });
 
+// src/ui/display/PageDrawer.tsx
+import React5 from "react";
+import { BackHandler, Modal as Modal2, PanResponder, StyleSheet as StyleSheet5 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs5 } from "nativewind/jsx-runtime";
+function PageDrawer({
+  visible,
+  onClose,
+  title,
+  header,
+  footer,
+  placement = "right",
+  width = 320,
+  swipeEnabled = true,
+  swipeThreshold = 80,
+  closeOnBackdropPress = true,
+  showCloseButton = true,
+  children,
+  testID,
+  contentTestID = "page-drawer-content",
+  backdropTestID = "page-drawer-backdrop"
+}) {
+  const colors = useThemeColors();
+  const [translateX, setTranslateX] = React5.useState(0);
+  if (!visible) return null;
+  const handleClose = React5.useCallback(() => {
+    setTranslateX(0);
+    onClose?.();
+  }, [onClose]);
+  React5.useEffect(() => {
+    if (!visible) return;
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      handleClose();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [handleClose, visible]);
+  const panResponder = React5.useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_event, gestureState) => {
+        if (!swipeEnabled) return false;
+        const isHorizontal = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+        const reachesThreshold = Math.abs(gestureState.dx) > 8;
+        return isHorizontal && reachesThreshold;
+      },
+      onPanResponderMove: (_event, gestureState) => {
+        if (!swipeEnabled) return;
+        const nextTranslateX = placement === "right" ? Math.min(0, Math.max(-width, gestureState.dx)) : Math.max(0, Math.min(width, gestureState.dx));
+        setTranslateX(nextTranslateX);
+      },
+      onPanResponderRelease: (_event, gestureState) => {
+        if (!swipeEnabled) {
+          setTranslateX(0);
+          return;
+        }
+        const reachedCloseThreshold = placement === "right" ? gestureState.dx <= -swipeThreshold : gestureState.dx >= swipeThreshold;
+        if (reachedCloseThreshold) {
+          handleClose();
+          return;
+        }
+        setTranslateX(0);
+      },
+      onPanResponderTerminate: () => {
+        setTranslateX(0);
+      }
+    }),
+    [handleClose, placement, swipeEnabled, swipeThreshold, width]
+  );
+  const drawerContent = /* @__PURE__ */ jsxs5(
+    AppView,
+    {
+      testID: contentTestID,
+      className: "h-full",
+      ...panResponder.panHandlers,
+      style: [
+        styles4.drawer,
+        {
+          width,
+          backgroundColor: colors.card,
+          borderLeftWidth: placement === "right" ? 0.5 : 0,
+          borderRightWidth: placement === "left" ? 0.5 : 0,
+          borderLeftColor: colors.border,
+          borderRightColor: colors.border,
+          transform: [{ translateX }]
+        }
+      ],
+      children: [
+        (header || title || showCloseButton) && /* @__PURE__ */ jsxs5(
+          AppView,
+          {
+            row: true,
+            items: "center",
+            between: true,
+            className: "px-4 py-4",
+            style: [styles4.header, { borderBottomColor: colors.divider }],
+            children: [
+              /* @__PURE__ */ jsx19(AppView, { flex: true, children: header || (title ? /* @__PURE__ */ jsx19(AppText, { size: "lg", weight: "semibold", children: title }) : null) }),
+              showCloseButton && /* @__PURE__ */ jsx19(
+                AppPressable,
+                {
+                  testID: "page-drawer-close",
+                  className: "p-1",
+                  pressedClassName: "opacity-70",
+                  onPress: handleClose,
+                  children: /* @__PURE__ */ jsx19(Icon, { name: "close", size: "md", color: colors.textSecondary })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(AppScrollView, { flex: true, className: "px-4 py-4", children }),
+        footer && /* @__PURE__ */ jsx19(
+          AppView,
+          {
+            className: "px-4 py-4",
+            style: [styles4.footer, { borderTopColor: colors.divider }],
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx19(Modal2, { visible: true, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ jsxs5(
+    AppView,
+    {
+      testID,
+      flex: true,
+      row: true,
+      style: { backgroundColor: "rgba(0,0,0,0.5)" },
+      justify: placement === "right" ? "end" : "start",
+      children: [
+        placement === "left" && drawerContent,
+        /* @__PURE__ */ jsx19(
+          AppPressable,
+          {
+            testID: backdropTestID,
+            className: "flex-1",
+            onPress: closeOnBackdropPress ? handleClose : void 0
+          }
+        ),
+        placement === "right" && drawerContent
+      ]
+    }
+  ) });
+}
+var styles4 = StyleSheet5.create({
+  drawer: {
+    height: "100%"
+  },
+  header: {
+    borderBottomWidth: 0.5
+  },
+  footer: {
+    borderTopWidth: 0.5
+  }
+});
+
+// src/ui/display/GradientView.tsx
+import { LinearGradient } from "expo-linear-gradient";
+import { jsx as jsx20 } from "nativewind/jsx-runtime";
+function GradientView({
+  colors,
+  start = { x: 0, y: 0 },
+  end = { x: 1, y: 1 },
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(LinearGradient, { colors: [...colors], start, end, style, ...props, children });
+}
+
 // src/ui/form/AppInput.tsx
 import { forwardRef, useState as useState12 } from "react";
-import { TextInput, View as View5, StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx19, jsxs as jsxs5 } from "nativewind/jsx-runtime";
+import { TextInput, View as View5, StyleSheet as StyleSheet6 } from "react-native";
+import { jsx as jsx21, jsxs as jsxs6 } from "nativewind/jsx-runtime";
 var AppInput = forwardRef(
   ({ label, error, disabled = false, leftIcon, rightIcon, className, style, ...props }, ref) => {
     const colors = useThemeColors();
@@ -1994,16 +2190,16 @@ var AppInput = forwardRef(
       if (isFocused) return colors.primary;
       return colors.border;
     };
-    return /* @__PURE__ */ jsxs5(AppView, { className: cn("flex-col gap-1", className), children: [
-      label && /* @__PURE__ */ jsx19(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(AppView, { className: cn("flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ jsx21(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      /* @__PURE__ */ jsxs6(
         AppView,
         {
           row: true,
           items: "center",
           className: "rounded-lg px-3",
           style: [
-            styles4.inputContainer,
+            styles5.inputContainer,
             {
               backgroundColor: colors.card,
               borderColor: getBorderColor(),
@@ -2011,13 +2207,13 @@ var AppInput = forwardRef(
             }
           ],
           children: [
-            leftIcon && /* @__PURE__ */ jsx19(View5, { style: styles4.icon, children: leftIcon }),
-            /* @__PURE__ */ jsx19(
+            leftIcon && /* @__PURE__ */ jsx21(View5, { style: styles5.icon, children: leftIcon }),
+            /* @__PURE__ */ jsx21(
               TextInput,
               {
                 ref,
                 className: "flex-1 py-3 text-base",
-                style: [styles4.input, { color: colors.text }, style],
+                style: [styles5.input, { color: colors.text }, style],
                 placeholderTextColor: colors.textMuted,
                 editable: !disabled,
                 onFocus: (e) => {
@@ -2031,16 +2227,16 @@ var AppInput = forwardRef(
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ jsx19(View5, { style: styles4.icon, children: rightIcon })
+            rightIcon && /* @__PURE__ */ jsx21(View5, { style: styles5.icon, children: rightIcon })
           ]
         }
       ),
-      error && /* @__PURE__ */ jsx19(AppText, { size: "xs", style: { color: errorColor }, children: error })
+      error && /* @__PURE__ */ jsx21(AppText, { size: "xs", style: { color: errorColor }, children: error })
     ] });
   }
 );
 AppInput.displayName = "AppInput";
-var styles4 = StyleSheet4.create({
+var styles5 = StyleSheet6.create({
   inputContainer: {
     borderWidth: 0.5,
     minHeight: 48
@@ -2056,8 +2252,8 @@ var styles4 = StyleSheet4.create({
 
 // src/ui/form/Checkbox.tsx
 import { useState as useState13 } from "react";
-import { TouchableOpacity as TouchableOpacity2, StyleSheet as StyleSheet5 } from "react-native";
-import { jsx as jsx20, jsxs as jsxs6 } from "nativewind/jsx-runtime";
+import { TouchableOpacity as TouchableOpacity2, StyleSheet as StyleSheet7 } from "react-native";
+import { jsx as jsx22, jsxs as jsxs7 } from "nativewind/jsx-runtime";
 function Checkbox({
   checked,
   defaultChecked,
@@ -2079,7 +2275,7 @@ function Checkbox({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     TouchableOpacity2,
     {
       onPress: toggle,
@@ -2089,7 +2285,7 @@ function Checkbox({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22(
           AppView,
           {
             className: cn(
@@ -2097,21 +2293,21 @@ function Checkbox({
               isChecked ? "bg-primary-500" : "bg-white border"
             ),
             style: [
-              styles5.checkbox,
+              styles6.checkbox,
               {
                 backgroundColor: isChecked ? colors.primary : colors.cardElevated,
                 borderColor: isChecked ? colors.primary : colors.border
               }
             ],
-            children: isChecked && /* @__PURE__ */ jsx20(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ jsx20(Icon, { name: "check", size: "sm", color: "white" }) })
+            children: isChecked && /* @__PURE__ */ jsx22(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ jsx22(Icon, { name: "check", size: "sm", color: "white" }) })
           }
         ),
-        children && /* @__PURE__ */ jsx20(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ jsx22(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles5 = StyleSheet5.create({
+var styles6 = StyleSheet7.create({
   checkbox: {
     borderWidth: 0.5
   }
@@ -2129,7 +2325,7 @@ var isGroupOptionDisabled = (groupDisabled, optionDisabled) => {
 };
 
 // src/ui/form/CheckboxGroup.tsx
-import { jsx as jsx21 } from "nativewind/jsx-runtime";
+import { jsx as jsx23 } from "nativewind/jsx-runtime";
 function CheckboxGroup({
   value = [],
   onChange,
@@ -2142,7 +2338,7 @@ function CheckboxGroup({
     onChange(toggleGroupValue(value, optionValue, checked));
   };
   const isRow = direction === "row";
-  return /* @__PURE__ */ jsx21(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx23(
     Checkbox,
     {
       checked: value.includes(option.value),
@@ -2156,8 +2352,8 @@ function CheckboxGroup({
 
 // src/ui/form/Radio.tsx
 import { useState as useState14 } from "react";
-import { TouchableOpacity as TouchableOpacity3, StyleSheet as StyleSheet6 } from "react-native";
-import { jsx as jsx22, jsxs as jsxs7 } from "nativewind/jsx-runtime";
+import { TouchableOpacity as TouchableOpacity3, StyleSheet as StyleSheet8 } from "react-native";
+import { jsx as jsx24, jsxs as jsxs8 } from "nativewind/jsx-runtime";
 function Radio({
   checked,
   defaultChecked,
@@ -2179,7 +2375,7 @@ function Radio({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     TouchableOpacity3,
     {
       onPress: toggle,
@@ -2189,33 +2385,33 @@ function Radio({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           AppView,
           {
             className: cn("w-5 h-5 rounded-full items-center justify-center", isChecked && "border-2"),
             style: [
-              styles6.radio,
+              styles7.radio,
               {
                 backgroundColor: colors.card,
                 borderColor: isChecked ? colors.primary : colors.border,
                 borderWidth: isChecked ? 0.5 : 0.5
               }
             ],
-            children: isChecked && /* @__PURE__ */ jsx22(
+            children: isChecked && /* @__PURE__ */ jsx24(
               AppView,
               {
                 className: "rounded-full",
-                style: [styles6.inner, { backgroundColor: colors.primary }]
+                style: [styles7.inner, { backgroundColor: colors.primary }]
               }
             )
           }
         ),
-        children && /* @__PURE__ */ jsx22(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ jsx24(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles6 = StyleSheet6.create({
+var styles7 = StyleSheet8.create({
   radio: {
     borderWidth: 0.5
   },
@@ -2226,7 +2422,7 @@ var styles6 = StyleSheet6.create({
 });
 
 // src/ui/form/RadioGroup.tsx
-import { jsx as jsx23 } from "nativewind/jsx-runtime";
+import { jsx as jsx25 } from "nativewind/jsx-runtime";
 function RadioGroup({
   value,
   onChange,
@@ -2235,7 +2431,7 @@ function RadioGroup({
   disabled = false
 }) {
   const isRow = direction === "row";
-  return /* @__PURE__ */ jsx23(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx25(
     Radio,
     {
       checked: value === option.value,
@@ -2249,8 +2445,8 @@ function RadioGroup({
 
 // src/ui/form/Switch.tsx
 import { useState as useState15 } from "react";
-import { TouchableOpacity as TouchableOpacity4, StyleSheet as StyleSheet7 } from "react-native";
-import { jsx as jsx24 } from "nativewind/jsx-runtime";
+import { TouchableOpacity as TouchableOpacity4, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx26 } from "nativewind/jsx-runtime";
 function Switch({
   checked,
   defaultChecked,
@@ -2282,7 +2478,7 @@ function Switch({
   };
   const config = sizes[size];
   const thumbPosition = isChecked ? config.width - config.thumb - config.padding : config.padding;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     TouchableOpacity4,
     {
       onPress: toggle,
@@ -2290,12 +2486,12 @@ function Switch({
       className: cn(className),
       testID,
       activeOpacity: disabled ? 1 : 0.8,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx26(
         AppView,
         {
           className: "rounded-full",
           style: [
-            styles7.track,
+            styles8.track,
             {
               width: config.width,
               height: config.height,
@@ -2304,12 +2500,12 @@ function Switch({
             },
             style
           ],
-          children: /* @__PURE__ */ jsx24(
+          children: /* @__PURE__ */ jsx26(
             AppView,
             {
               className: "rounded-full",
               style: [
-                styles7.thumb,
+                styles8.thumb,
                 {
                   width: config.thumb,
                   height: config.thumb,
@@ -2328,7 +2524,7 @@ function Switch({
     }
   );
 }
-var styles7 = StyleSheet7.create({
+var styles8 = StyleSheet9.create({
   track: {
     justifyContent: "center",
     padding: 2
@@ -2346,8 +2542,8 @@ var styles7 = StyleSheet7.create({
 import { useState as useState16, useCallback as useCallback12, useRef as useRef6 } from "react";
 import {
   View as View6,
-  PanResponder,
-  StyleSheet as StyleSheet8
+  PanResponder as PanResponder2,
+  StyleSheet as StyleSheet10
 } from "react-native";
 
 // src/ui/form/useFormTheme.ts
@@ -2376,7 +2572,7 @@ function useFormThemeColors() {
 }
 
 // src/ui/form/Slider.tsx
-import { jsx as jsx25, jsxs as jsxs8 } from "nativewind/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs9 } from "nativewind/jsx-runtime";
 function Slider({
   value,
   defaultValue = 0,
@@ -2416,7 +2612,7 @@ function Slider({
     [value, min, max, onChange]
   );
   const panResponder = useRef6(
-    PanResponder.create({
+    PanResponder2.create({
       onStartShouldSetPanResponder: () => !disabled,
       onMoveShouldSetPanResponder: () => !disabled,
       onPanResponderGrant: () => {
@@ -2449,13 +2645,13 @@ function Slider({
   const onLayout = useCallback12((event) => {
     setTrackWidth(event.nativeEvent.layout.width);
   }, []);
-  return /* @__PURE__ */ jsxs8(AppView, { className: cn("py-2", className), children: [
-    showTooltip && isDragging && /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(AppView, { className: cn("py-2", className), children: [
+    showTooltip && isDragging && /* @__PURE__ */ jsxs9(
       AppView,
       {
         className: "absolute rounded px-2 py-1 -top-8",
         style: [
-          styles8.tooltip,
+          styles9.tooltip,
           {
             backgroundColor: colors.surfaceMuted,
             left: `${progress}%`,
@@ -2463,12 +2659,12 @@ function Slider({
           }
         ],
         children: [
-          /* @__PURE__ */ jsx25(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
+          /* @__PURE__ */ jsx27(
             AppView,
             {
               style: [
-                styles8.tooltipArrow,
+                styles9.tooltipArrow,
                 {
                   borderTopColor: colors.surfaceMuted
                 }
@@ -2478,23 +2674,23 @@ function Slider({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       View6,
       {
         onLayout,
         className: "rounded-full",
         style: [
-          styles8.track,
+          styles9.track,
           { backgroundColor: colors.divider, opacity: disabled ? disabledOpacity : 1 }
         ],
         onTouchEnd: handleTrackPress,
         children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             AppView,
             {
               className: "rounded-full",
               style: [
-                styles8.filledTrack,
+                styles9.filledTrack,
                 {
                   backgroundColor: colors.primary,
                   width: `${progress}%`
@@ -2502,12 +2698,12 @@ function Slider({
               ]
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             AppView,
             {
               className: "absolute rounded-full items-center justify-center",
               style: [
-                styles8.thumb,
+                styles9.thumb,
                 {
                   backgroundColor: colors.textInverse,
                   left: `${progress}%`,
@@ -2519,12 +2715,12 @@ function Slider({
                 }
               ],
               ...panResponder.panHandlers,
-              children: /* @__PURE__ */ jsx25(
+              children: /* @__PURE__ */ jsx27(
                 AppView,
                 {
                   className: "rounded-full",
                   style: [
-                    styles8.thumbDot,
+                    styles9.thumbDot,
                     {
                       backgroundColor: colors.primary
                     }
@@ -2538,7 +2734,7 @@ function Slider({
     )
   ] });
 }
-var styles8 = StyleSheet8.create({
+var styles9 = StyleSheet10.create({
   track: {
     height: 6,
     width: "100%"
@@ -2581,14 +2777,14 @@ var styles8 = StyleSheet8.create({
 // src/ui/form/Select.tsx
 import { useState as useState17, useCallback as useCallback13, useMemo as useMemo5 } from "react";
 import {
-  Modal as Modal2,
+  Modal as Modal3,
   View as View7,
   TouchableOpacity as TouchableOpacity5,
   FlatList as FlatList2,
   TextInput as TextInput2,
-  StyleSheet as StyleSheet9
+  StyleSheet as StyleSheet11
 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs9 } from "nativewind/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs10 } from "nativewind/jsx-runtime";
 function Select({
   value,
   onChange,
@@ -2649,7 +2845,7 @@ function Select({
   const renderOption = useCallback13(
     ({ item }) => {
       const isSelected = selectedValues.includes(item.value);
-      return /* @__PURE__ */ jsxs9(
+      return /* @__PURE__ */ jsxs10(
         AppPressable,
         {
           className: cn(
@@ -2657,22 +2853,22 @@ function Select({
             isSelected && "bg-primary-50"
           ),
           style: [
-            styles9.optionItem,
+            styles10.optionItem,
             { borderBottomColor: colors.divider },
             isSelected && { backgroundColor: colors.primarySurface }
           ],
           onPress: () => handleSelect(item.value),
           children: [
-            /* @__PURE__ */ jsx26(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
-            isSelected && /* @__PURE__ */ jsx26(Icon, { name: "check", size: "sm", color: "primary-500" })
+            /* @__PURE__ */ jsx28(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
+            isSelected && /* @__PURE__ */ jsx28(Icon, { name: "check", size: "sm", color: "primary-500" })
           ]
         }
       );
     },
     [selectedValues, handleSelect, colors]
   );
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsxs10(
       AppPressable,
       {
         className: cn(
@@ -2680,11 +2876,11 @@ function Select({
           disabled ? "opacity-60" : "",
           className
         ),
-        style: [styles9.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles10.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
         disabled,
         onPress: () => setVisible(true),
         children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28(
             AppText,
             {
               className: "flex-1",
@@ -2693,46 +2889,46 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ jsxs9(View7, { className: "flex-row items-center", children: [
-            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx26(TouchableOpacity5, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ jsx26(Icon, { name: "close", size: "sm", color: colors.icon }) }),
-            /* @__PURE__ */ jsx26(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
+          /* @__PURE__ */ jsxs10(View7, { className: "flex-row items-center", children: [
+            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "sm", color: colors.icon }) }),
+            /* @__PURE__ */ jsx28(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(
-      Modal2,
+    /* @__PURE__ */ jsx28(
+      Modal3,
       {
         visible,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ jsx26(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsx28(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs10(
           AppView,
           {
             className: "rounded-t-2xl max-h-[70%]",
             style: { backgroundColor: colors.surface },
             children: [
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs10(
                 AppView,
                 {
                   row: true,
                   between: true,
                   items: "center",
                   className: "px-4 py-3",
-                  style: [styles9.header, { borderBottomColor: colors.divider }],
+                  style: [styles10.header, { borderBottomColor: colors.divider }],
                   children: [
-                    /* @__PURE__ */ jsx26(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? "\u9009\u62E9\u9009\u9879" : "\u8BF7\u9009\u62E9" }),
-                    /* @__PURE__ */ jsx26(TouchableOpacity5, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx26(Icon, { name: "close", size: "md", color: colors.icon }) })
+                    /* @__PURE__ */ jsx28(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? "\u9009\u62E9\u9009\u9879" : "\u8BF7\u9009\u62E9" }),
+                    /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "md", color: colors.icon }) })
                   ]
                 }
               ),
-              searchable && /* @__PURE__ */ jsx26(
+              searchable && /* @__PURE__ */ jsx28(
                 AppView,
                 {
                   className: "px-4 py-3",
-                  style: [styles9.searchBox, { borderBottomColor: colors.divider }],
-                  children: /* @__PURE__ */ jsxs9(
+                  style: [styles10.searchBox, { borderBottomColor: colors.divider }],
+                  children: /* @__PURE__ */ jsxs10(
                     AppView,
                     {
                       row: true,
@@ -2740,8 +2936,8 @@ function Select({
                       className: "px-3 py-2 rounded-lg",
                       style: { backgroundColor: colors.surfaceMuted },
                       children: [
-                        /* @__PURE__ */ jsx26(View7, { style: { marginRight: 8 }, children: /* @__PURE__ */ jsx26(Icon, { name: "search", size: "sm", color: colors.icon }) }),
-                        /* @__PURE__ */ jsx26(
+                        /* @__PURE__ */ jsx28(View7, { style: { marginRight: 8 }, children: /* @__PURE__ */ jsx28(Icon, { name: "search", size: "sm", color: colors.icon }) }),
+                        /* @__PURE__ */ jsx28(
                           TextInput2,
                           {
                             className: "flex-1 text-base",
@@ -2753,42 +2949,42 @@ function Select({
                             autoFocus: true
                           }
                         ),
-                        searchKeyword.length > 0 && /* @__PURE__ */ jsx26(TouchableOpacity5, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ jsx26(Icon, { name: "close", size: "sm", color: colors.icon }) })
+                        searchKeyword.length > 0 && /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "sm", color: colors.icon }) })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx28(
                 FlatList2,
                 {
                   data: filteredOptions,
                   keyExtractor: (item) => item.value,
                   renderItem: renderOption,
-                  ListEmptyComponent: /* @__PURE__ */ jsx26(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ jsx26(AppText, { style: { color: colors.textMuted }, children: "\u6682\u65E0\u9009\u9879" }) })
+                  ListEmptyComponent: /* @__PURE__ */ jsx28(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ jsx28(AppText, { style: { color: colors.textMuted }, children: "\u6682\u65E0\u9009\u9879" }) })
                 }
               ),
-              multiple && /* @__PURE__ */ jsxs9(
+              multiple && /* @__PURE__ */ jsxs10(
                 AppView,
                 {
                   row: true,
                   between: true,
                   items: "center",
                   className: "px-4 py-3",
-                  style: [styles9.footer, { borderTopColor: colors.divider }],
+                  style: [styles10.footer, { borderTopColor: colors.divider }],
                   children: [
-                    /* @__PURE__ */ jsxs9(AppText, { style: { color: colors.textMuted }, children: [
+                    /* @__PURE__ */ jsxs10(AppText, { style: { color: colors.textMuted }, children: [
                       "\u5DF2\u9009\u62E9 ",
                       selectedValues.length,
                       " \u9879"
                     ] }),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx28(
                       TouchableOpacity5,
                       {
                         className: "px-4 py-2 rounded-lg",
                         style: { backgroundColor: colors.primary },
                         onPress: () => setVisible(false),
-                        children: /* @__PURE__ */ jsx26(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: "\u786E\u5B9A" })
+                        children: /* @__PURE__ */ jsx28(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: "\u786E\u5B9A" })
                       }
                     )
                   ]
@@ -2801,7 +2997,7 @@ function Select({
     )
   ] });
 }
-var styles9 = StyleSheet9.create({
+var styles10 = StyleSheet11.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -2821,8 +3017,8 @@ var styles9 = StyleSheet9.create({
 
 // src/ui/form/DatePicker.tsx
 import { useState as useState18, useCallback as useCallback14, useMemo as useMemo6 } from "react";
-import { Modal as Modal3, TouchableOpacity as TouchableOpacity6, StyleSheet as StyleSheet10 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs10 } from "nativewind/jsx-runtime";
+import { Modal as Modal4, TouchableOpacity as TouchableOpacity6, StyleSheet as StyleSheet12 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs11 } from "nativewind/jsx-runtime";
 function PickerColumn({
   title,
   values,
@@ -2833,27 +3029,27 @@ function PickerColumn({
   showDivider = false,
   colors
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     AppView,
     {
       flex: true,
       style: [
-        showDivider && styles10.column,
+        showDivider && styles11.column,
         showDivider ? { borderRightColor: colors.divider } : void 0
       ],
       children: [
-        /* @__PURE__ */ jsx27(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx27(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
-        /* @__PURE__ */ jsx27(AppView, { className: "flex-1", children: values.map((value) => {
+        /* @__PURE__ */ jsx29(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx29(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
+        /* @__PURE__ */ jsx29(AppView, { className: "flex-1", children: values.map((value) => {
           const selected = selectedValue === value;
           const disabled = isDisabled(value);
-          return /* @__PURE__ */ jsx27(
+          return /* @__PURE__ */ jsx29(
             TouchableOpacity6,
             {
               className: cn("py-2 items-center", selected && "bg-primary-50"),
               style: selected ? { backgroundColor: colors.primarySurface } : void 0,
               disabled,
               onPress: () => onSelect(value),
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx29(
                 AppText,
                 {
                   className: cn(selected ? "font-semibold" : void 0, disabled && "opacity-30"),
@@ -2927,8 +3123,8 @@ function DatePicker({
     },
     [tempDate]
   );
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsxs11(
       AppPressable,
       {
         className: cn(
@@ -2936,14 +3132,14 @@ function DatePicker({
           disabled ? "opacity-60" : "",
           className
         ),
-        style: [styles10.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles11.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
         disabled,
         onPress: () => {
           setTempDate(value || /* @__PURE__ */ new Date());
           setVisible(true);
         },
         children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             AppText,
             {
               className: "flex-1",
@@ -2952,36 +3148,36 @@ function DatePicker({
               children: displayText
             }
           ),
-          /* @__PURE__ */ jsx27(Icon, { name: "calendar-today", size: "md", color: colors.icon })
+          /* @__PURE__ */ jsx29(Icon, { name: "calendar-today", size: "md", color: colors.icon })
         ]
       }
     ),
-    /* @__PURE__ */ jsx27(
-      Modal3,
+    /* @__PURE__ */ jsx29(
+      Modal4,
       {
         visible,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ jsx27(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs10(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
-          /* @__PURE__ */ jsxs10(
+        children: /* @__PURE__ */ jsx29(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs11(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
+          /* @__PURE__ */ jsxs11(
             AppView,
             {
               row: true,
               between: true,
               items: "center",
               className: "px-4 py-3",
-              style: [styles10.header, { borderBottomColor: colors.divider }],
+              style: [styles11.header, { borderBottomColor: colors.divider }],
               children: [
-                /* @__PURE__ */ jsx27(TouchableOpacity6, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx27(AppText, { style: { color: colors.textMuted }, children: "\u53D6\u6D88" }) }),
-                /* @__PURE__ */ jsx27(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: "\u9009\u62E9\u65E5\u671F" }),
-                /* @__PURE__ */ jsx27(TouchableOpacity6, { onPress: handleConfirm, children: /* @__PURE__ */ jsx27(AppText, { style: { color: colors.primary }, className: "font-medium", children: "\u786E\u5B9A" }) })
+                /* @__PURE__ */ jsx29(TouchableOpacity6, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.textMuted }, children: "\u53D6\u6D88" }) }),
+                /* @__PURE__ */ jsx29(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: "\u9009\u62E9\u65E5\u671F" }),
+                /* @__PURE__ */ jsx29(TouchableOpacity6, { onPress: handleConfirm, children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.primary }, className: "font-medium", children: "\u786E\u5B9A" }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx27(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx27(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, "yyyy\u5E74MM\u6708dd\u65E5") }) }),
-          /* @__PURE__ */ jsxs10(AppView, { row: true, className: "h-48", children: [
-            /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx29(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, "yyyy\u5E74MM\u6708dd\u65E5") }) }),
+          /* @__PURE__ */ jsxs11(AppView, { row: true, className: "h-48", children: [
+            /* @__PURE__ */ jsx29(
               PickerColumn,
               {
                 title: "\u5E74",
@@ -2993,7 +3189,7 @@ function DatePicker({
                 showDivider: true
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx29(
               PickerColumn,
               {
                 title: "\u6708",
@@ -3006,7 +3202,7 @@ function DatePicker({
                 showDivider: true
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx29(
               PickerColumn,
               {
                 title: "\u65E5",
@@ -3018,38 +3214,38 @@ function DatePicker({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs10(
+          /* @__PURE__ */ jsxs11(
             AppView,
             {
               row: true,
               className: "px-4 py-3 gap-2",
-              style: [styles10.footer, { borderTopColor: colors.divider }],
+              style: [styles11.footer, { borderTopColor: colors.divider }],
               children: [
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx29(
                   TouchableOpacity6,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(/* @__PURE__ */ new Date()),
-                    children: /* @__PURE__ */ jsx27(AppText, { style: { color: colors.text }, children: "\u4ECA\u5929" })
+                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: "\u4ECA\u5929" })
                   }
                 ),
-                minDate && /* @__PURE__ */ jsx27(
+                minDate && /* @__PURE__ */ jsx29(
                   TouchableOpacity6,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(minDate),
-                    children: /* @__PURE__ */ jsx27(AppText, { style: { color: colors.text }, children: "\u6700\u65E9" })
+                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: "\u6700\u65E9" })
                   }
                 ),
-                maxDate && /* @__PURE__ */ jsx27(
+                maxDate && /* @__PURE__ */ jsx29(
                   TouchableOpacity6,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(maxDate),
-                    children: /* @__PURE__ */ jsx27(AppText, { style: { color: colors.text }, children: "\u6700\u665A" })
+                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: "\u6700\u665A" })
                   }
                 )
               ]
@@ -3060,7 +3256,7 @@ function DatePicker({
     )
   ] });
 }
-var styles10 = StyleSheet10.create({
+var styles11 = StyleSheet12.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -3076,7 +3272,7 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/ui/form/FormItem.tsx
-import { jsx as jsx28, jsxs as jsxs11 } from "nativewind/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs12 } from "nativewind/jsx-runtime";
 function FormItem({
   name: _name,
   label,
@@ -3088,14 +3284,14 @@ function FormItem({
   labelClassName
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ jsxs11(AppView, { className: cn("mb-4", className), children: [
-    label && /* @__PURE__ */ jsxs11(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
-      /* @__PURE__ */ jsx28(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      required && /* @__PURE__ */ jsx28(AppText, { color: "error-500", children: "*" })
+  return /* @__PURE__ */ jsxs12(AppView, { className: cn("mb-4", className), children: [
+    label && /* @__PURE__ */ jsxs12(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
+      /* @__PURE__ */ jsx30(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      required && /* @__PURE__ */ jsx30(AppText, { color: "error-500", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ jsx28(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
-    help && !error && /* @__PURE__ */ jsx28(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
+    error && /* @__PURE__ */ jsx30(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
+    help && !error && /* @__PURE__ */ jsx30(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
   ] });
 }
 
@@ -3228,10 +3424,35 @@ function useToggle(defaultValue = false) {
   return [value, { toggle, set, setTrue, setFalse }];
 }
 
+// src/ui/hooks/usePageDrawer.ts
+import { useCallback as useCallback17, useState as useState21 } from "react";
+function usePageDrawer(defaultVisible = false) {
+  const [visible, setVisibleState] = useState21(defaultVisible);
+  const open = useCallback17(() => {
+    setVisibleState(true);
+  }, []);
+  const close = useCallback17(() => {
+    setVisibleState(false);
+  }, []);
+  const toggle = useCallback17(() => {
+    setVisibleState((current) => !current);
+  }, []);
+  const setVisible = useCallback17((nextVisible) => {
+    setVisibleState(nextVisible);
+  }, []);
+  return {
+    visible,
+    open,
+    close,
+    toggle,
+    setVisible
+  };
+}
+
 // src/ui/hooks/useDebounce.ts
-import { useEffect as useEffect5, useState as useState21 } from "react";
+import { useEffect as useEffect5, useState as useState22 } from "react";
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState21(value);
+  const [debouncedValue, setDebouncedValue] = useState22(value);
   useEffect5(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
@@ -3244,9 +3465,9 @@ function useDebounce(value, delay = 500) {
 }
 
 // src/ui/hooks/useThrottle.ts
-import { useEffect as useEffect6, useRef as useRef7, useState as useState22 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState23 } from "react";
 function useThrottle(value, delay = 200) {
-  const [throttledValue, setThrottledValue] = useState22(value);
+  const [throttledValue, setThrottledValue] = useState23(value);
   const lastUpdatedRef = useRef7(Date.now());
   useEffect6(() => {
     const now = Date.now();
@@ -3269,11 +3490,11 @@ function useThrottle(value, delay = 200) {
 }
 
 // src/ui/hooks/useKeyboard.ts
-import { useEffect as useEffect7, useState as useState23, useCallback as useCallback17 } from "react";
+import { useEffect as useEffect7, useState as useState24, useCallback as useCallback18 } from "react";
 import { Keyboard, Platform } from "react-native";
 function useKeyboard() {
-  const [visible, setVisible] = useState23(false);
-  const [height, setHeight] = useState23(0);
+  const [visible, setVisible] = useState24(false);
+  const [height, setHeight] = useState24(0);
   useEffect7(() => {
     const handleKeyboardWillShow = (event) => {
       setVisible(true);
@@ -3304,17 +3525,17 @@ function useKeyboard() {
       willHideSub.remove();
     };
   }, []);
-  const dismiss = useCallback17(() => {
+  const dismiss = useCallback18(() => {
     Keyboard.dismiss();
   }, []);
   return { visible, height, dismiss };
 }
 
 // src/ui/hooks/useDimensions.ts
-import { useEffect as useEffect8, useState as useState24 } from "react";
+import { useEffect as useEffect8, useState as useState25 } from "react";
 import { Dimensions } from "react-native";
 function useDimensions() {
-  const [dimensions, setDimensions] = useState24(() => {
+  const [dimensions, setDimensions] = useState25(() => {
     const window = Dimensions.get("window");
     return {
       width: window.width,
@@ -3341,14 +3562,14 @@ function useDimensions() {
 }
 
 // src/ui/hooks/useOrientation.ts
-import { useEffect as useEffect9, useState as useState25 } from "react";
+import { useEffect as useEffect9, useState as useState26 } from "react";
 import { Dimensions as Dimensions2 } from "react-native";
 function useOrientation() {
   const getOrientation = () => {
     const { width, height } = Dimensions2.get("window");
     return width > height ? "landscape" : "portrait";
   };
-  const [orientation, setOrientation] = useState25(getOrientation);
+  const [orientation, setOrientation] = useState26(getOrientation);
   useEffect9(() => {
     const handleChange = ({ window }) => {
       const newOrientation = window.width > window.height ? "landscape" : "portrait";
@@ -3367,7 +3588,7 @@ function useOrientation() {
 }
 
 // src/navigation/provider.tsx
-import React5 from "react";
+import React6 from "react";
 import {
   NavigationContainer
 } from "@react-navigation/native";
@@ -3395,7 +3616,7 @@ function createNavigationTheme(pantherTheme, isDark) {
 }
 
 // src/navigation/provider.tsx
-import { jsx as jsx29 } from "nativewind/jsx-runtime";
+import { jsx as jsx31 } from "nativewind/jsx-runtime";
 function NavigationProvider({
   children,
   linking,
@@ -3406,11 +3627,11 @@ function NavigationProvider({
   theme: customTheme
 }) {
   const { theme, isDark } = useTheme();
-  const navigationTheme = React5.useMemo(
+  const navigationTheme = React6.useMemo(
     () => customTheme || createNavigationTheme(theme, isDark),
     [customTheme, theme, isDark]
   );
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     NavigationContainer,
     {
       theme: navigationTheme,
@@ -3428,14 +3649,14 @@ function NavigationProvider({
 import { createStackNavigator, TransitionPresets } from "@react-navigation/stack";
 
 // src/navigation/navigators/StackNavigator.tsx
-import { jsx as jsx30 } from "nativewind/jsx-runtime";
+import { jsx as jsx32 } from "nativewind/jsx-runtime";
 var NativeStack = createStackNavigator();
 var defaultScreenOptions = {
   headerShown: false,
   ...TransitionPresets.SlideFromRightIOS
 };
 function StackNavigator({ initialRouteName, screenOptions, children }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     NativeStack.Navigator,
     {
       initialRouteName,
@@ -3447,7 +3668,7 @@ function StackNavigator({ initialRouteName, screenOptions, children }) {
 StackNavigator.Screen = NativeStack.Screen;
 StackNavigator.Group = NativeStack.Group;
 function createStackScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx30(
+  return routes.map((route) => /* @__PURE__ */ jsx32(
     StackNavigator.Screen,
     {
       name: route.name,
@@ -3460,13 +3681,13 @@ function createStackScreens(routes) {
 }
 
 // src/navigation/navigators/TabNavigator.tsx
-import React6 from "react";
+import React7 from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 
 // src/navigation/components/BottomTabBar.tsx
-import { View as View8, TouchableOpacity as TouchableOpacity7, StyleSheet as StyleSheet11 } from "react-native";
+import { View as View8, TouchableOpacity as TouchableOpacity7, StyleSheet as StyleSheet13 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
-import { jsx as jsx31, jsxs as jsxs12 } from "nativewind/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "nativewind/jsx-runtime";
 var DEFAULT_TAB_BAR_HEIGHT = 65;
 function BottomTabBar({
   state,
@@ -3488,11 +3709,11 @@ function BottomTabBar({
   const inactiveColor = inactiveTintColor || colors.textMuted;
   const backgroundColor = style?.backgroundColor || colors.card;
   const borderTopColor = colors.divider;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     View8,
     {
       style: [
-        styles11.container,
+        styles12.container,
         { borderTopColor },
         { backgroundColor, height: height + insets.bottom, paddingBottom: insets.bottom },
         style
@@ -3523,7 +3744,7 @@ function BottomTabBar({
           size: 24
         }) : null;
         const badge = options.tabBarBadge;
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs13(
           TouchableOpacity7,
           {
             accessibilityRole: "button",
@@ -3533,21 +3754,21 @@ function BottomTabBar({
             onPress,
             onLongPress,
             style: [
-              styles11.tab,
+              styles12.tab,
               {
                 backgroundColor: isFocused ? activeBackgroundColor : inactiveBackgroundColor
               }
             ],
             children: [
-              /* @__PURE__ */ jsxs12(View8, { style: [styles11.iconContainer, iconStyle], children: [
+              /* @__PURE__ */ jsxs13(View8, { style: [styles12.iconContainer, iconStyle], children: [
                 iconName,
-                badge != null && /* @__PURE__ */ jsx31(View8, { style: [styles11.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx31(AppText, { style: styles11.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
+                badge != null && /* @__PURE__ */ jsx33(View8, { style: [styles12.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx33(AppText, { style: styles12.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
               ] }),
-              showLabel && /* @__PURE__ */ jsx31(
+              showLabel && /* @__PURE__ */ jsx33(
                 AppText,
                 {
                   style: [
-                    styles11.label,
+                    styles12.label,
                     { color: isFocused ? activeColor : inactiveColor },
                     labelStyle
                   ],
@@ -3563,7 +3784,7 @@ function BottomTabBar({
     }
   );
 }
-var styles11 = StyleSheet11.create({
+var styles12 = StyleSheet13.create({
   container: {
     flexDirection: "row",
     borderTopWidth: 0.5,
@@ -3606,7 +3827,7 @@ var styles11 = StyleSheet11.create({
 });
 
 // src/navigation/navigators/TabNavigator.tsx
-import { jsx as jsx32 } from "nativewind/jsx-runtime";
+import { jsx as jsx34 } from "nativewind/jsx-runtime";
 var NativeTab = createBottomTabNavigator();
 var defaultScreenOptions2 = {
   headerShown: false,
@@ -3619,7 +3840,7 @@ function TabNavigator({
   screenOptions,
   children
 }) {
-  const mergedScreenOptions = React6.useMemo(() => {
+  const mergedScreenOptions = React7.useMemo(() => {
     const options = { ...defaultScreenOptions2, ...screenOptions };
     if (tabBarOptions) {
       if (tabBarOptions.showLabel !== void 0) {
@@ -3652,9 +3873,9 @@ function TabNavigator({
     }
     return options;
   }, [tabBarOptions, screenOptions]);
-  const resolvedTabBar = React6.useMemo(() => {
+  const resolvedTabBar = React7.useMemo(() => {
     if (tabBar) return tabBar;
-    return (props) => /* @__PURE__ */ jsx32(
+    return (props) => /* @__PURE__ */ jsx34(
       BottomTabBar,
       {
         ...props,
@@ -3681,7 +3902,7 @@ function TabNavigator({
     tabBarOptions?.style,
     tabBarOptions?.height
   ]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     NativeTab.Navigator,
     {
       initialRouteName,
@@ -3693,7 +3914,7 @@ function TabNavigator({
 }
 TabNavigator.Screen = NativeTab.Screen;
 function createTabScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx32(
+  return routes.map((route) => /* @__PURE__ */ jsx34(
     TabNavigator.Screen,
     {
       name: route.name,
@@ -3706,9 +3927,9 @@ function createTabScreens(routes) {
 }
 
 // src/navigation/navigators/DrawerNavigator.tsx
-import React7 from "react";
+import React8 from "react";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import { jsx as jsx33 } from "nativewind/jsx-runtime";
+import { jsx as jsx35 } from "nativewind/jsx-runtime";
 var NativeDrawer = createDrawerNavigator();
 function DrawerNavigator({
   initialRouteName,
@@ -3719,7 +3940,7 @@ function DrawerNavigator({
 }) {
   const { theme, isDark } = useTheme();
   const navigationTheme = createNavigationTheme(theme, isDark);
-  const mergedScreenOptions = React7.useMemo(() => {
+  const mergedScreenOptions = React8.useMemo(() => {
     return {
       headerShown: false,
       drawerStyle: {
@@ -3738,7 +3959,7 @@ function DrawerNavigator({
       ...screenOptions
     };
   }, [screenOptions, drawerOptions, navigationTheme, theme]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     NativeDrawer.Navigator,
     {
       initialRouteName,
@@ -3750,7 +3971,7 @@ function DrawerNavigator({
 }
 DrawerNavigator.Screen = NativeDrawer.Screen;
 function createDrawerScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx33(
+  return routes.map((route) => /* @__PURE__ */ jsx35(
     DrawerNavigator.Screen,
     {
       name: route.name,
@@ -3763,9 +3984,9 @@ function createDrawerScreens(routes) {
 }
 
 // src/navigation/components/AppHeader.tsx
-import { StyleSheet as StyleSheet12 } from "react-native";
+import { StyleSheet as StyleSheet14 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
-import { jsx as jsx34, jsxs as jsxs13 } from "nativewind/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "nativewind/jsx-runtime";
 function AppHeader({
   title,
   subtitle,
@@ -3779,7 +4000,7 @@ function AppHeader({
   const colors = useThemeColors();
   const insets = useSafeAreaInsets3();
   const backgroundColor = transparent ? "transparent" : colors.card;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     AppView,
     {
       style: [
@@ -3789,38 +4010,38 @@ function AppHeader({
         },
         style
       ],
-      children: /* @__PURE__ */ jsxs13(AppView, { row: true, items: "center", px: 4, style: styles12.container, children: [
-        /* @__PURE__ */ jsx34(AppView, { style: [styles12.sideContainer, styles12.leftContainer], children: leftIcon && /* @__PURE__ */ jsx34(AppPressable, { onPress: onLeftPress, style: styles12.iconButton, children: /* @__PURE__ */ jsx34(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
-        /* @__PURE__ */ jsxs13(AppView, { style: styles12.centerContainer, children: [
-          title && /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsxs14(AppView, { row: true, items: "center", px: 4, style: styles13.container, children: [
+        /* @__PURE__ */ jsx36(AppView, { style: [styles13.sideContainer, styles13.leftContainer], children: leftIcon && /* @__PURE__ */ jsx36(AppPressable, { onPress: onLeftPress, style: styles13.iconButton, children: /* @__PURE__ */ jsx36(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
+        /* @__PURE__ */ jsxs14(AppView, { style: styles13.centerContainer, children: [
+          title && /* @__PURE__ */ jsx36(
             AppText,
             {
               size: "lg",
               weight: "semibold",
-              style: [styles12.title, { color: colors.text }],
+              style: [styles13.title, { color: colors.text }],
               numberOfLines: 1,
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsx34(
+          subtitle && /* @__PURE__ */ jsx36(
             AppText,
             {
               size: "xs",
-              style: [styles12.subtitle, { color: colors.textMuted }],
+              style: [styles13.subtitle, { color: colors.textMuted }],
               numberOfLines: 1,
               children: subtitle
             }
           )
         ] }),
-        /* @__PURE__ */ jsx34(AppView, { row: true, items: "center", style: [styles12.sideContainer, styles12.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ jsx34(AppPressable, { onPress: icon.onPress, style: styles12.iconButton, children: /* @__PURE__ */ jsxs13(AppView, { children: [
-          /* @__PURE__ */ jsx34(Icon, { name: icon.icon, size: 24, color: colors.text }),
-          icon.badge ? /* @__PURE__ */ jsx34(AppView, { style: styles12.badge, children: /* @__PURE__ */ jsx34(AppText, { size: "xs", color: "white", style: styles12.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
+        /* @__PURE__ */ jsx36(AppView, { row: true, items: "center", style: [styles13.sideContainer, styles13.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ jsx36(AppPressable, { onPress: icon.onPress, style: styles13.iconButton, children: /* @__PURE__ */ jsxs14(AppView, { children: [
+          /* @__PURE__ */ jsx36(Icon, { name: icon.icon, size: 24, color: colors.text }),
+          icon.badge ? /* @__PURE__ */ jsx36(AppView, { style: styles13.badge, children: /* @__PURE__ */ jsx36(AppText, { size: "xs", color: "white", style: styles13.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
         ] }) }, index)) })
       ] })
     }
   );
 }
-var styles12 = StyleSheet12.create({
+var styles13 = StyleSheet14.create({
   container: {
     height: 44
     // iOS 标准导航栏高度
@@ -3871,9 +4092,9 @@ var styles12 = StyleSheet12.create({
 });
 
 // src/navigation/components/DrawerContent.tsx
-import { View as View9, TouchableOpacity as TouchableOpacity8, StyleSheet as StyleSheet13 } from "react-native";
+import { View as View9, TouchableOpacity as TouchableOpacity8, StyleSheet as StyleSheet15 } from "react-native";
 import { DrawerContentScrollView } from "@react-navigation/drawer";
-import { jsx as jsx35, jsxs as jsxs14 } from "nativewind/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "nativewind/jsx-runtime";
 function DrawerContent({
   state,
   descriptors,
@@ -3902,20 +4123,20 @@ function DrawerContent({
       badge: options.tabBarBadge
     };
   });
-  return /* @__PURE__ */ jsxs14(DrawerContentScrollView, { style: [styles13.container, { backgroundColor }], children: [
-    header && /* @__PURE__ */ jsx35(View9, { style: [styles13.header, { borderBottomColor: dividerColor }], children: header }),
-    /* @__PURE__ */ jsx35(AppView, { className: "py-2", children: drawerItems.map((item) => {
+  return /* @__PURE__ */ jsxs15(DrawerContentScrollView, { style: [styles14.container, { backgroundColor }], children: [
+    header && /* @__PURE__ */ jsx37(View9, { style: [styles14.header, { borderBottomColor: dividerColor }], children: header }),
+    /* @__PURE__ */ jsx37(AppView, { className: "py-2", children: drawerItems.map((item) => {
       const isFocused = state.routes[state.index].name === item.name;
       const onPress = () => {
         navigation.navigate(item.name);
       };
-      return /* @__PURE__ */ jsxs14(
+      return /* @__PURE__ */ jsxs15(
         TouchableOpacity8,
         {
           onPress,
-          style: [styles13.item, isFocused && { backgroundColor: activeBgColor }],
+          style: [styles14.item, isFocused && { backgroundColor: activeBgColor }],
           children: [
-            item.icon && /* @__PURE__ */ jsx35(View9, { style: styles13.iconContainer, children: /* @__PURE__ */ jsx35(
+            item.icon && /* @__PURE__ */ jsx37(View9, { style: styles14.iconContainer, children: /* @__PURE__ */ jsx37(
               Icon,
               {
                 name: item.icon,
@@ -3923,28 +4144,28 @@ function DrawerContent({
                 color: isFocused ? activeColor : inactiveColor
               }
             ) }),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx37(
               AppText,
               {
                 style: [
-                  styles13.label,
+                  styles14.label,
                   { color: isFocused ? activeColor : inactiveColor },
-                  isFocused && styles13.activeLabel
+                  isFocused && styles14.activeLabel
                 ],
                 numberOfLines: 1,
                 children: item.label
               }
             ),
-            item.badge != null && /* @__PURE__ */ jsx35(View9, { style: [styles13.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx35(AppText, { style: styles13.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
+            item.badge != null && /* @__PURE__ */ jsx37(View9, { style: [styles14.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx37(AppText, { style: styles14.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
           ]
         },
         item.name
       );
     }) }),
-    footer && /* @__PURE__ */ jsx35(View9, { style: [styles13.footer, { borderTopColor: dividerColor }], children: footer })
+    footer && /* @__PURE__ */ jsx37(View9, { style: [styles14.footer, { borderTopColor: dividerColor }], children: footer })
   ] });
 }
-var styles13 = StyleSheet13.create({
+var styles14 = StyleSheet15.create({
   container: {
     flex: 1
   },
@@ -4047,7 +4268,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 
 // src/overlay/AppStatusBar.tsx
 import { StatusBar } from "react-native";
-import { jsx as jsx36 } from "nativewind/jsx-runtime";
+import { jsx as jsx38 } from "nativewind/jsx-runtime";
 function AppStatusBar({
   barStyle = "auto",
   backgroundColor,
@@ -4057,7 +4278,7 @@ function AppStatusBar({
   const { theme, isDark } = useTheme();
   const resolvedBarStyle = barStyle === "auto" ? isDark ? "light-content" : "dark-content" : barStyle;
   const resolvedBackgroundColor = backgroundColor ?? (translucent ? "transparent" : theme.colors.background?.[500] || "#ffffff");
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     StatusBar,
     {
       barStyle: resolvedBarStyle,
@@ -4069,7 +4290,7 @@ function AppStatusBar({
 }
 
 // src/overlay/loading/provider.tsx
-import { useState as useState26, useCallback as useCallback18 } from "react";
+import { useState as useState27, useCallback as useCallback19 } from "react";
 
 // src/overlay/loading/context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -4081,15 +4302,15 @@ function useLoadingContext() {
 }
 
 // src/overlay/loading/component.tsx
-import { View as View10, Modal as Modal4, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet14 } from "react-native";
-import { jsx as jsx37, jsxs as jsxs15 } from "nativewind/jsx-runtime";
+import { View as View10, Modal as Modal5, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet16 } from "react-native";
+import { jsx as jsx39, jsxs as jsxs16 } from "nativewind/jsx-runtime";
 function LoadingModal({ visible, text }) {
-  return /* @__PURE__ */ jsx37(Modal4, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ jsx37(View10, { style: styles14.overlay, children: /* @__PURE__ */ jsxs15(View10, { style: [styles14.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
-    /* @__PURE__ */ jsx37(ActivityIndicator5, { size: "large", color: "#fff" }),
-    text && /* @__PURE__ */ jsx37(AppText, { className: "text-white mt-3 text-sm", children: text })
+  return /* @__PURE__ */ jsx39(Modal5, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ jsx39(View10, { style: styles15.overlay, children: /* @__PURE__ */ jsxs16(View10, { style: [styles15.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
+    /* @__PURE__ */ jsx39(ActivityIndicator5, { size: "large", color: "#fff" }),
+    text && /* @__PURE__ */ jsx39(AppText, { className: "text-white mt-3 text-sm", children: text })
   ] }) }) });
 }
-var styles14 = StyleSheet14.create({
+var styles15 = StyleSheet16.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4105,24 +4326,24 @@ var styles14 = StyleSheet14.create({
 });
 
 // src/overlay/loading/provider.tsx
-import { jsx as jsx38, jsxs as jsxs16 } from "nativewind/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs17 } from "nativewind/jsx-runtime";
 function LoadingProvider({ children }) {
-  const [state, setState] = useState26({ visible: false });
-  const show = useCallback18((text) => {
+  const [state, setState] = useState27({ visible: false });
+  const show = useCallback19((text) => {
     setState({ visible: true, text });
   }, []);
-  const hide = useCallback18(() => {
+  const hide = useCallback19(() => {
     setState({ visible: false });
   }, []);
-  return /* @__PURE__ */ jsxs16(LoadingContext.Provider, { value: { show, hide }, children: [
+  return /* @__PURE__ */ jsxs17(LoadingContext.Provider, { value: { show, hide }, children: [
     children,
-    /* @__PURE__ */ jsx38(LoadingModal, { ...state })
+    /* @__PURE__ */ jsx40(LoadingModal, { ...state })
   ] });
 }
 
 // src/overlay/toast/provider.tsx
-import { useState as useState27, useCallback as useCallback19, useRef as useRef9 } from "react";
-import { View as View11, StyleSheet as StyleSheet15 } from "react-native";
+import { useState as useState28, useCallback as useCallback20, useRef as useRef9 } from "react";
+import { View as View11, StyleSheet as StyleSheet17 } from "react-native";
 
 // src/overlay/toast/context.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -4136,7 +4357,7 @@ function useToastContext() {
 // src/overlay/toast/component.tsx
 import { useRef as useRef8, useEffect as useEffect11 } from "react";
 import { Animated } from "react-native";
-import { jsx as jsx39 } from "nativewind/jsx-runtime";
+import { jsx as jsx41 } from "nativewind/jsx-runtime";
 function ToastItemView({ message, type, onHide }) {
   const fadeAnim = useRef8(new Animated.Value(0)).current;
   useEffect11(() => {
@@ -4152,7 +4373,7 @@ function ToastItemView({ message, type, onHide }) {
     warning: "bg-warning-500",
     info: "bg-primary-500"
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     Animated.View,
     {
       style: {
@@ -4166,17 +4387,17 @@ function ToastItemView({ message, type, onHide }) {
           }
         ]
       },
-      children: /* @__PURE__ */ jsx39(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ jsx39(AppText, { className: "text-white text-center", children: message }) })
+      children: /* @__PURE__ */ jsx41(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ jsx41(AppText, { className: "text-white text-center", children: message }) })
     }
   );
 }
 
 // src/overlay/toast/provider.tsx
-import { jsx as jsx40, jsxs as jsxs17 } from "nativewind/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "nativewind/jsx-runtime";
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState27([]);
+  const [toasts, setToasts] = useState28([]);
   const timersRef = useRef9(/* @__PURE__ */ new Map());
-  const remove = useCallback19((id) => {
+  const remove = useCallback20((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -4184,7 +4405,7 @@ function ToastProvider({ children }) {
       timersRef.current.delete(id);
     }
   }, []);
-  const show = useCallback19(
+  const show = useCallback20(
     (message, type = "info", duration = 3e3) => {
       const id = Math.random().toString(36).substring(7);
       const toast = { id, message, type, duration };
@@ -4194,28 +4415,28 @@ function ToastProvider({ children }) {
     },
     [remove]
   );
-  const success = useCallback19(
+  const success = useCallback20(
     (message, duration) => show(message, "success", duration),
     [show]
   );
-  const error = useCallback19(
+  const error = useCallback20(
     (message, duration) => show(message, "error", duration),
     [show]
   );
-  const info = useCallback19(
+  const info = useCallback20(
     (message, duration) => show(message, "info", duration),
     [show]
   );
-  const warning = useCallback19(
+  const warning = useCallback20(
     (message, duration) => show(message, "warning", duration),
     [show]
   );
-  return /* @__PURE__ */ jsxs17(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
+  return /* @__PURE__ */ jsxs18(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
     children,
-    /* @__PURE__ */ jsx40(View11, { style: styles15.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ jsx40(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
+    /* @__PURE__ */ jsx42(View11, { style: styles16.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ jsx42(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
   ] });
 }
-var styles15 = StyleSheet15.create({
+var styles16 = StyleSheet17.create({
   toastContainer: {
     position: "absolute",
     top: 60,
@@ -4226,7 +4447,7 @@ var styles15 = StyleSheet15.create({
 });
 
 // src/overlay/alert/provider.tsx
-import { useState as useState28, useCallback as useCallback20 } from "react";
+import { useState as useState29, useCallback as useCallback21 } from "react";
 
 // src/overlay/alert/context.ts
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -4238,8 +4459,8 @@ function useAlertContext() {
 }
 
 // src/overlay/alert/component.tsx
-import { View as View12, Modal as Modal5, StyleSheet as StyleSheet16 } from "react-native";
-import { jsx as jsx41, jsxs as jsxs18 } from "nativewind/jsx-runtime";
+import { View as View12, Modal as Modal6, StyleSheet as StyleSheet18 } from "react-native";
+import { jsx as jsx43, jsxs as jsxs19 } from "nativewind/jsx-runtime";
 function AlertModal({
   visible,
   title,
@@ -4251,16 +4472,16 @@ function AlertModal({
   onCancel
 }) {
   if (!visible) return null;
-  return /* @__PURE__ */ jsx41(Modal5, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ jsx41(View12, { style: styles16.overlay, children: /* @__PURE__ */ jsxs18(View12, { style: styles16.alertBox, children: [
-    title && /* @__PURE__ */ jsx41(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
-    message && /* @__PURE__ */ jsx41(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
-    /* @__PURE__ */ jsxs18(AppView, { row: true, gap: 3, className: "mt-2", children: [
-      showCancel && /* @__PURE__ */ jsx41(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx41(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
-      /* @__PURE__ */ jsx41(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ jsx41(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
+  return /* @__PURE__ */ jsx43(Modal6, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ jsx43(View12, { style: styles17.overlay, children: /* @__PURE__ */ jsxs19(View12, { style: styles17.alertBox, children: [
+    title && /* @__PURE__ */ jsx43(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
+    message && /* @__PURE__ */ jsx43(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
+    /* @__PURE__ */ jsxs19(AppView, { row: true, gap: 3, className: "mt-2", children: [
+      showCancel && /* @__PURE__ */ jsx43(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx43(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
+      /* @__PURE__ */ jsx43(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ jsx43(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
     ] })
   ] }) }) });
 }
-var styles16 = StyleSheet16.create({
+var styles17 = StyleSheet18.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4282,32 +4503,32 @@ var styles16 = StyleSheet16.create({
 });
 
 // src/overlay/alert/provider.tsx
-import { jsx as jsx42, jsxs as jsxs19 } from "nativewind/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs20 } from "nativewind/jsx-runtime";
 function AlertProvider({ children }) {
-  const [alert, setAlert] = useState28(null);
-  const showAlert = useCallback20((options) => {
+  const [alert, setAlert] = useState29(null);
+  const showAlert = useCallback21((options) => {
     setAlert({ ...options, visible: true });
   }, []);
-  const confirm = useCallback20(
+  const confirm = useCallback21(
     (options) => {
       showAlert({ ...options, showCancel: true });
     },
     [showAlert]
   );
-  const hide = useCallback20(() => {
+  const hide = useCallback21(() => {
     setAlert(null);
   }, []);
-  const handleConfirm = useCallback20(() => {
+  const handleConfirm = useCallback21(() => {
     alert?.onConfirm?.();
     hide();
   }, [alert, hide]);
-  const handleCancel = useCallback20(() => {
+  const handleCancel = useCallback21(() => {
     alert?.onCancel?.();
     hide();
   }, [alert, hide]);
-  return /* @__PURE__ */ jsxs19(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
+  return /* @__PURE__ */ jsxs20(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
     children,
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx44(
       AlertModal,
       {
         visible: alert?.visible ?? false,
@@ -4324,13 +4545,13 @@ function AlertProvider({ children }) {
 }
 
 // src/overlay/provider.tsx
-import { jsx as jsx43 } from "nativewind/jsx-runtime";
+import { jsx as jsx45 } from "nativewind/jsx-runtime";
 function OverlayProvider({ children }) {
-  return /* @__PURE__ */ jsx43(LoadingProvider, { children: /* @__PURE__ */ jsx43(ToastProvider, { children: /* @__PURE__ */ jsx43(AlertProvider, { children }) }) });
+  return /* @__PURE__ */ jsx45(LoadingProvider, { children: /* @__PURE__ */ jsx45(ToastProvider, { children: /* @__PURE__ */ jsx45(AlertProvider, { children }) }) });
 }
 
 // src/overlay/AppProvider.tsx
-import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs20 } from "nativewind/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs21 } from "nativewind/jsx-runtime";
 var defaultLightTheme = {
   colors: {
     primary: "#f38b32",
@@ -4367,21 +4588,21 @@ function AppProvider({
 }) {
   let content = children;
   if (enableOverlay) {
-    content = /* @__PURE__ */ jsx44(OverlayProvider, { children: content });
+    content = /* @__PURE__ */ jsx46(OverlayProvider, { children: content });
   }
   if (enableNavigation) {
-    content = /* @__PURE__ */ jsx44(NavigationProvider, { ...navigationProps, children: content });
+    content = /* @__PURE__ */ jsx46(NavigationProvider, { ...navigationProps, children: content });
   }
   if (enableTheme) {
-    content = /* @__PURE__ */ jsx44(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ jsxs20(Fragment4, { children: [
-      enableStatusBar && /* @__PURE__ */ jsx44(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
+    content = /* @__PURE__ */ jsx46(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ jsxs21(Fragment4, { children: [
+      enableStatusBar && /* @__PURE__ */ jsx46(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
       content
     ] }) });
   }
   if (enableSafeArea) {
-    content = /* @__PURE__ */ jsx44(SafeAreaProvider, { children: content });
+    content = /* @__PURE__ */ jsx46(SafeAreaProvider, { children: content });
   }
-  return /* @__PURE__ */ jsx44(Fragment4, { children: content });
+  return /* @__PURE__ */ jsx46(Fragment4, { children: content });
 }
 
 // src/overlay/loading/hooks.ts
@@ -4427,6 +4648,7 @@ export {
   ErrorCode,
   FileIcons,
   FormItem,
+  GradientView,
   Icon,
   Loading,
   MemoryStorage,
@@ -4435,6 +4657,7 @@ export {
   NavigationProvider,
   OverlayProvider,
   Page,
+  PageDrawer,
   Progress,
   Radio,
   RadioGroup,
@@ -4500,6 +4723,7 @@ export {
   useNavigation,
   useNavigationState,
   useOrientation,
+  usePageDrawer,
   usePagination,
   usePrevious,
   useQuery,