@gaozh1024/rn-kit 0.2.0-beta.0 → 0.3.0

package/dist/index.js

@@ -55,6 +55,7 @@ __export(index_exports, {
   ErrorCode: () => ErrorCode,
   FileIcons: () => FileIcons,
   FormItem: () => FormItem,
+  GradientView: () => GradientView,
   Icon: () => Icon,
   Loading: () => Loading,
   MemoryStorage: () => MemoryStorage,
@@ -63,6 +64,7 @@ __export(index_exports, {
   NavigationProvider: () => NavigationProvider,
   OverlayProvider: () => OverlayProvider,
   Page: () => Page,
+  PageDrawer: () => PageDrawer,
   Progress: () => Progress,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -128,6 +130,7 @@ __export(index_exports, {
   useNavigation: () => useNavigation,
   useNavigationState: () => useNavigationState,
   useOrientation: () => useOrientation,
+  usePageDrawer: () => usePageDrawer,
   usePagination: () => usePagination,
   usePrevious: () => usePrevious,
   useQuery: () => import_react_query.useQuery,
@@ -1111,6 +1114,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
 var import_jsx_runtime2 = require("nativewind/jsx-runtime");
@@ -1216,6 +1242,9 @@ function AppText({
   ...props
 }) {
   const { theme, isDark } = useOptionalTheme();
+  const flattenedStyle = import_react_native3.StyleSheet.flatten(style);
+  const hasExplicitStyleColor = flattenedStyle?.color !== void 0;
+  const hasExplicitClassColor = hasExplicitTextColorClass(className);
   const sizeMap3 = {
     xs: "text-xs",
     sm: "text-sm",
@@ -1231,12 +1260,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__ */ (0, import_jsx_runtime4.jsx)(
     import_react_native3.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
@@ -1601,13 +1636,7 @@ var styles2 = import_react_native7.StyleSheet.create({
 // src/ui/feedback/Loading.tsx
 var import_react_native8 = require("react-native");
 var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsxs)(AppView, { center: true, gap: 3, testID, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native8.ActivityIndicator, { size: "large", color }),
@@ -2122,30 +2151,200 @@ var styles3 = import_react_native11.StyleSheet.create({
   }
 });
 
-// src/ui/form/AppInput.tsx
-var import_react16 = require("react");
+// src/ui/display/PageDrawer.tsx
+var import_react16 = __toESM(require("react"));
 var import_react_native12 = require("react-native");
 var import_jsx_runtime19 = require("nativewind/jsx-runtime");
-var AppInput = (0, import_react16.forwardRef)(
+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] = import_react16.default.useState(0);
+  if (!visible) return null;
+  const handleClose = import_react16.default.useCallback(() => {
+    setTranslateX(0);
+    onClose?.();
+  }, [onClose]);
+  import_react16.default.useEffect(() => {
+    if (!visible) return;
+    const subscription = import_react_native12.BackHandler.addEventListener("hardwareBackPress", () => {
+      handleClose();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [handleClose, visible]);
+  const panResponder = import_react16.default.useMemo(
+    () => import_react_native12.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__ */ (0, import_jsx_runtime19.jsxs)(
+    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__ */ (0, import_jsx_runtime19.jsxs)(
+          AppView,
+          {
+            row: true,
+            items: "center",
+            between: true,
+            className: "px-4 py-4",
+            style: [styles4.header, { borderBottomColor: colors.divider }],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppView, { flex: true, children: header || (title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppText, { size: "lg", weight: "semibold", children: title }) : null) }),
+              showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                AppPressable,
+                {
+                  testID: "page-drawer-close",
+                  className: "p-1",
+                  pressedClassName: "opacity-70",
+                  onPress: handleClose,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close", size: "md", color: colors.textSecondary })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppScrollView, { flex: true, className: "px-4 py-4", children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          AppView,
+          {
+            className: "px-4 py-4",
+            style: [styles4.footer, { borderTopColor: colors.divider }],
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native12.Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    AppView,
+    {
+      testID,
+      flex: true,
+      row: true,
+      style: { backgroundColor: "rgba(0,0,0,0.5)" },
+      justify: placement === "right" ? "end" : "start",
+      children: [
+        placement === "left" && drawerContent,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          AppPressable,
+          {
+            testID: backdropTestID,
+            className: "flex-1",
+            onPress: closeOnBackdropPress ? handleClose : void 0
+          }
+        ),
+        placement === "right" && drawerContent
+      ]
+    }
+  ) });
+}
+var styles4 = import_react_native12.StyleSheet.create({
+  drawer: {
+    height: "100%"
+  },
+  header: {
+    borderBottomWidth: 0.5
+  },
+  footer: {
+    borderTopWidth: 0.5
+  }
+});
+
+// src/ui/display/GradientView.tsx
+var import_expo_linear_gradient = require("expo-linear-gradient");
+var import_jsx_runtime20 = require("nativewind/jsx-runtime");
+function GradientView({
+  colors,
+  start = { x: 0, y: 0 },
+  end = { x: 1, y: 1 },
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_expo_linear_gradient.LinearGradient, { colors: [...colors], start, end, style, ...props, children });
+}
+
+// src/ui/form/AppInput.tsx
+var import_react17 = require("react");
+var import_react_native13 = require("react-native");
+var import_jsx_runtime21 = require("nativewind/jsx-runtime");
+var AppInput = (0, import_react17.forwardRef)(
   ({ label, error, disabled = false, leftIcon, rightIcon, className, style, ...props }, ref) => {
     const colors = useThemeColors();
-    const [isFocused, setIsFocused] = (0, import_react16.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
     const errorColor = "#ef4444";
     const getBorderColor = () => {
       if (error) return errorColor;
       if (isFocused) return colors.primary;
       return colors.border;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AppView, { className: cn("flex-col gap-1", className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AppView, { className: cn("flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         AppView,
         {
           row: true,
           items: "center",
           className: "rounded-lg px-3",
           style: [
-            styles4.inputContainer,
+            styles5.inputContainer,
             {
               backgroundColor: colors.card,
               borderColor: getBorderColor(),
@@ -2153,13 +2352,13 @@ var AppInput = (0, import_react16.forwardRef)(
             }
           ],
           children: [
-            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native12.View, { style: styles4.icon, children: leftIcon }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react_native12.TextInput,
+            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native13.View, { style: styles5.icon, children: leftIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react_native13.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) => {
@@ -2173,16 +2372,16 @@ var AppInput = (0, import_react16.forwardRef)(
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native12.View, { style: styles4.icon, children: rightIcon })
+            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native13.View, { style: styles5.icon, children: rightIcon })
           ]
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppText, { size: "xs", style: { color: errorColor }, children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppText, { size: "xs", style: { color: errorColor }, children: error })
     ] });
   }
 );
 AppInput.displayName = "AppInput";
-var styles4 = import_react_native12.StyleSheet.create({
+var styles5 = import_react_native13.StyleSheet.create({
   inputContainer: {
     borderWidth: 0.5,
     minHeight: 48
@@ -2197,9 +2396,9 @@ var styles4 = import_react_native12.StyleSheet.create({
 });
 
 // src/ui/form/Checkbox.tsx
-var import_react17 = require("react");
-var import_react_native13 = require("react-native");
-var import_jsx_runtime20 = require("nativewind/jsx-runtime");
+var import_react18 = require("react");
+var import_react_native14 = require("react-native");
+var import_jsx_runtime22 = require("nativewind/jsx-runtime");
 function Checkbox({
   checked,
   defaultChecked,
@@ -2210,7 +2409,7 @@ function Checkbox({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react17.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react18.useState)(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2221,8 +2420,8 @@ function Checkbox({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_react_native13.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_react_native14.TouchableOpacity,
     {
       onPress: toggle,
       disabled,
@@ -2231,7 +2430,7 @@ function Checkbox({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           AppView,
           {
             className: cn(
@@ -2239,28 +2438,39 @@ 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__ */ (0, import_jsx_runtime20.jsx)(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "check", size: "sm", color: "white" }) })
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "check", size: "sm", color: "white" }) })
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles5 = import_react_native13.StyleSheet.create({
+var styles6 = import_react_native14.StyleSheet.create({
   checkbox: {
     borderWidth: 0.5
   }
 });
 
+// src/ui/form/group.ts
+var toggleGroupValue = (values, optionValue, checked) => {
+  if (checked) {
+    return values.includes(optionValue) ? values : [...values, optionValue];
+  }
+  return values.filter((value) => value !== optionValue);
+};
+var isGroupOptionDisabled = (groupDisabled, optionDisabled) => {
+  return groupDisabled || Boolean(optionDisabled);
+};
+
 // src/ui/form/CheckboxGroup.tsx
-var import_jsx_runtime21 = require("nativewind/jsx-runtime");
+var import_jsx_runtime23 = require("nativewind/jsx-runtime");
 function CheckboxGroup({
   value = [],
   onChange,
@@ -2270,18 +2480,15 @@ function CheckboxGroup({
 }) {
   const handleChange = (optionValue, checked) => {
     if (!onChange) return;
-    if (checked) {
-      onChange([...value, optionValue]);
-    } else {
-      onChange(value.filter((v) => v !== optionValue));
-    }
+    onChange(toggleGroupValue(value, optionValue, checked));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppView, { row: direction === "row", flex: direction === "row", gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const isRow = direction === "row";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Checkbox,
     {
       checked: value.includes(option.value),
       onChange: (checked) => handleChange(option.value, checked),
-      disabled: disabled || option.disabled,
+      disabled: isGroupOptionDisabled(disabled, option.disabled),
       children: option.label
     },
     option.value
@@ -2289,9 +2496,9 @@ function CheckboxGroup({
 }
 
 // src/ui/form/Radio.tsx
-var import_react18 = require("react");
-var import_react_native14 = require("react-native");
-var import_jsx_runtime22 = require("nativewind/jsx-runtime");
+var import_react19 = require("react");
+var import_react_native15 = require("react-native");
+var import_jsx_runtime24 = require("nativewind/jsx-runtime");
 function Radio({
   checked,
   defaultChecked,
@@ -2302,7 +2509,7 @@ function Radio({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react18.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react19.useState)(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2313,8 +2520,8 @@ function Radio({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    import_react_native14.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    import_react_native15.TouchableOpacity,
     {
       onPress: toggle,
       disabled,
@@ -2323,33 +2530,33 @@ function Radio({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           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__ */ (0, import_jsx_runtime22.jsx)(
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               AppView,
               {
                 className: "rounded-full",
-                style: [styles6.inner, { backgroundColor: colors.primary }]
+                style: [styles7.inner, { backgroundColor: colors.primary }]
               }
             )
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles6 = import_react_native14.StyleSheet.create({
+var styles7 = import_react_native15.StyleSheet.create({
   radio: {
     borderWidth: 0.5
   },
@@ -2360,7 +2567,7 @@ var styles6 = import_react_native14.StyleSheet.create({
 });
 
 // src/ui/form/RadioGroup.tsx
-var import_jsx_runtime23 = require("nativewind/jsx-runtime");
+var import_jsx_runtime25 = require("nativewind/jsx-runtime");
 function RadioGroup({
   value,
   onChange,
@@ -2368,12 +2575,13 @@ function RadioGroup({
   direction = "column",
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppView, { row: direction === "row", flex: direction === "row", gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const isRow = direction === "row";
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Radio,
     {
       checked: value === option.value,
       onChange: () => onChange?.(option.value),
-      disabled: disabled || option.disabled,
+      disabled: isGroupOptionDisabled(disabled, option.disabled),
       children: option.label
     },
     option.value
@@ -2381,9 +2589,9 @@ function RadioGroup({
 }
 
 // src/ui/form/Switch.tsx
-var import_react19 = require("react");
-var import_react_native15 = require("react-native");
-var import_jsx_runtime24 = require("nativewind/jsx-runtime");
+var import_react20 = require("react");
+var import_react_native16 = require("react-native");
+var import_jsx_runtime26 = require("nativewind/jsx-runtime");
 function Switch({
   checked,
   defaultChecked,
@@ -2395,7 +2603,7 @@ function Switch({
   style
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react19.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react20.useState)(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2415,20 +2623,20 @@ function Switch({
   };
   const config = sizes[size];
   const thumbPosition = isChecked ? config.width - config.thumb - config.padding : config.padding;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_react_native15.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_native16.TouchableOpacity,
     {
       onPress: toggle,
       disabled,
       className: cn(className),
       testID,
       activeOpacity: disabled ? 1 : 0.8,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         AppView,
         {
           className: "rounded-full",
           style: [
-            styles7.track,
+            styles8.track,
             {
               width: config.width,
               height: config.height,
@@ -2437,12 +2645,12 @@ function Switch({
             },
             style
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             AppView,
             {
               className: "rounded-full",
               style: [
-                styles7.thumb,
+                styles8.thumb,
                 {
                   width: config.thumb,
                   height: config.thumb,
@@ -2461,7 +2669,7 @@ function Switch({
     }
   );
 }
-var styles7 = import_react_native15.StyleSheet.create({
+var styles8 = import_react_native16.StyleSheet.create({
   track: {
     justifyContent: "center",
     padding: 2
@@ -2476,15 +2684,15 @@ var styles7 = import_react_native15.StyleSheet.create({
 });
 
 // src/ui/form/Slider.tsx
-var import_react21 = require("react");
-var import_react_native16 = require("react-native");
+var import_react22 = require("react");
+var import_react_native17 = require("react-native");
 
 // src/ui/form/useFormTheme.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useFormThemeColors() {
   const { isDark } = useOptionalTheme();
   const colors = useThemeColors();
-  return (0, import_react20.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({
       primary: colors.primary,
       primarySurface: colors.primarySurface,
@@ -2505,7 +2713,7 @@ function useFormThemeColors() {
 }
 
 // src/ui/form/Slider.tsx
-var import_jsx_runtime25 = require("nativewind/jsx-runtime");
+var import_jsx_runtime27 = require("nativewind/jsx-runtime");
 function Slider({
   value,
   defaultValue = 0,
@@ -2519,13 +2727,13 @@ function Slider({
   className
 }) {
   const colors = useFormThemeColors();
-  const [internalValue, setInternalValue] = (0, import_react21.useState)(defaultValue);
-  const [trackWidth, setTrackWidth] = (0, import_react21.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react22.useState)(defaultValue);
+  const [trackWidth, setTrackWidth] = (0, import_react22.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
   const currentValue = value !== void 0 ? value : internalValue;
   const disabledOpacity = 0.4;
   const progress = (currentValue - min) / (max - min) * 100;
-  const getValueFromPosition = (0, import_react21.useCallback)(
+  const getValueFromPosition = (0, import_react22.useCallback)(
     (position) => {
       const percentage = Math.max(0, Math.min(1, position / trackWidth));
       const rawValue = min + percentage * (max - min);
@@ -2534,7 +2742,7 @@ function Slider({
     },
     [trackWidth, min, max, step]
   );
-  const setValue = (0, import_react21.useCallback)(
+  const setValue = (0, import_react22.useCallback)(
     (newValue) => {
       const clampedValue = Math.min(max, Math.max(min, newValue));
       if (value === void 0) {
@@ -2544,8 +2752,8 @@ function Slider({
     },
     [value, min, max, onChange]
   );
-  const panResponder = (0, import_react21.useRef)(
-    import_react_native16.PanResponder.create({
+  const panResponder = (0, import_react22.useRef)(
+    import_react_native17.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabled,
       onMoveShouldSetPanResponder: () => !disabled,
       onPanResponderGrant: () => {
@@ -2565,7 +2773,7 @@ function Slider({
       }
     })
   ).current;
-  const handleTrackPress = (0, import_react21.useCallback)(
+  const handleTrackPress = (0, import_react22.useCallback)(
     (event) => {
       if (disabled) return;
       const { locationX } = event.nativeEvent;
@@ -2575,16 +2783,16 @@ function Slider({
     },
     [disabled, getValueFromPosition, setValue, onChangeEnd]
   );
-  const onLayout = (0, import_react21.useCallback)((event) => {
+  const onLayout = (0, import_react22.useCallback)((event) => {
     setTrackWidth(event.nativeEvent.layout.width);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(AppView, { className: cn("py-2", className), children: [
-    showTooltip && isDragging && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(AppView, { className: cn("py-2", className), children: [
+    showTooltip && isDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       AppView,
       {
         className: "absolute rounded px-2 py-1 -top-8",
         style: [
-          styles8.tooltip,
+          styles9.tooltip,
           {
             backgroundColor: colors.surfaceMuted,
             left: `${progress}%`,
@@ -2592,12 +2800,12 @@ function Slider({
           }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             AppView,
             {
               style: [
-                styles8.tooltipArrow,
+                styles9.tooltipArrow,
                 {
                   borderTopColor: colors.surfaceMuted
                 }
@@ -2607,23 +2815,23 @@ function Slider({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      import_react_native16.View,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      import_react_native17.View,
       {
         onLayout,
         className: "rounded-full",
         style: [
-          styles8.track,
+          styles9.track,
           { backgroundColor: colors.divider, opacity: disabled ? disabledOpacity : 1 }
         ],
         onTouchEnd: handleTrackPress,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             AppView,
             {
               className: "rounded-full",
               style: [
-                styles8.filledTrack,
+                styles9.filledTrack,
                 {
                   backgroundColor: colors.primary,
                   width: `${progress}%`
@@ -2631,12 +2839,12 @@ function Slider({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             AppView,
             {
               className: "absolute rounded-full items-center justify-center",
               style: [
-                styles8.thumb,
+                styles9.thumb,
                 {
                   backgroundColor: colors.textInverse,
                   left: `${progress}%`,
@@ -2648,12 +2856,12 @@ function Slider({
                 }
               ],
               ...panResponder.panHandlers,
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 AppView,
                 {
                   className: "rounded-full",
                   style: [
-                    styles8.thumbDot,
+                    styles9.thumbDot,
                     {
                       backgroundColor: colors.primary
                     }
@@ -2667,7 +2875,7 @@ function Slider({
     )
   ] });
 }
-var styles8 = import_react_native16.StyleSheet.create({
+var styles9 = import_react_native17.StyleSheet.create({
   track: {
     height: 6,
     width: "100%"
@@ -2708,9 +2916,9 @@ var styles8 = import_react_native16.StyleSheet.create({
 });
 
 // src/ui/form/Select.tsx
-var import_react22 = require("react");
-var import_react_native17 = require("react-native");
-var import_jsx_runtime26 = require("nativewind/jsx-runtime");
+var import_react23 = require("react");
+var import_react_native18 = require("react-native");
+var import_jsx_runtime28 = require("nativewind/jsx-runtime");
 function Select({
   value,
   onChange,
@@ -2724,24 +2932,24 @@ function Select({
   className
 }) {
   const colors = useFormThemeColors();
-  const [visible, setVisible] = (0, import_react22.useState)(false);
-  const [searchKeyword, setSearchKeyword] = (0, import_react22.useState)("");
-  const selectedValues = (0, import_react22.useMemo)(() => {
+  const [visible, setVisible] = (0, import_react23.useState)(false);
+  const [searchKeyword, setSearchKeyword] = (0, import_react23.useState)("");
+  const selectedValues = (0, import_react23.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) ? value : [];
     }
     return value ? [value] : [];
   }, [value, multiple]);
-  const displayText = (0, import_react22.useMemo)(() => {
+  const displayText = (0, import_react23.useMemo)(() => {
     if (selectedValues.length === 0) return placeholder;
     const selectedLabels = options.filter((opt) => selectedValues.includes(opt.value)).map((opt) => opt.label);
     return selectedLabels.join(", ") || placeholder;
   }, [selectedValues, options, placeholder]);
-  const filteredOptions = (0, import_react22.useMemo)(() => {
+  const filteredOptions = (0, import_react23.useMemo)(() => {
     if (!searchable || !searchKeyword) return options;
     return options.filter((opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase()));
   }, [options, searchable, searchKeyword]);
-  const handleSelect = (0, import_react22.useCallback)(
+  const handleSelect = (0, import_react23.useCallback)(
     (optionValue) => {
       if (multiple) {
         const currentValues = Array.isArray(value) ? value : [];
@@ -2754,24 +2962,24 @@ function Select({
     },
     [multiple, value, onChange]
   );
-  const handleClear = (0, import_react22.useCallback)(
+  const handleClear = (0, import_react23.useCallback)(
     (e) => {
       e.stopPropagation();
       onChange?.(multiple ? [] : "");
     },
     [multiple, onChange]
   );
-  const handleSearch = (0, import_react22.useCallback)(
+  const handleSearch = (0, import_react23.useCallback)(
     (text) => {
       setSearchKeyword(text);
       onSearch?.(text);
     },
     [onSearch]
   );
-  const renderOption = (0, import_react22.useCallback)(
+  const renderOption = (0, import_react23.useCallback)(
     ({ item }) => {
       const isSelected = selectedValues.includes(item.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         AppPressable,
         {
           className: cn(
@@ -2779,22 +2987,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__ */ (0, import_jsx_runtime26.jsx)(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "check", size: "sm", color: "primary-500" })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "check", size: "sm", color: "primary-500" })
           ]
         }
       );
     },
     [selectedValues, handleSelect, colors]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       AppPressable,
       {
         className: cn(
@@ -2802,11 +3010,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__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             AppText,
             {
               className: "flex-1",
@@ -2815,46 +3023,46 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native17.View, { className: "flex-row items-center", children: [
-            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native17.TouchableOpacity, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native18.View, { className: "flex-row items-center", children: [
+            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native18.TouchableOpacity, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_react_native17.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_react_native18.Modal,
       {
         visible,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           AppView,
           {
             className: "rounded-t-2xl max-h-[70%]",
             style: { backgroundColor: colors.surface },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                 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__ */ (0, import_jsx_runtime26.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? "\u9009\u62E9\u9009\u9879" : "\u8BF7\u9009\u62E9" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native17.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "close", size: "md", color: colors.icon }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? "\u9009\u62E9\u9009\u9879" : "\u8BF7\u9009\u62E9" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native18.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "md", color: colors.icon }) })
                   ]
                 }
               ),
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 AppView,
                 {
                   className: "px-4 py-3",
-                  style: [styles9.searchBox, { borderBottomColor: colors.divider }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  style: [styles10.searchBox, { borderBottomColor: colors.divider }],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                     AppView,
                     {
                       row: true,
@@ -2862,9 +3070,9 @@ function Select({
                       className: "px-3 py-2 rounded-lg",
                       style: { backgroundColor: colors.surfaceMuted },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native17.View, { style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "search", size: "sm", color: colors.icon }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                          import_react_native17.TextInput,
+                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native18.View, { style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "search", size: "sm", color: colors.icon }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                          import_react_native18.TextInput,
                           {
                             className: "flex-1 text-base",
                             style: { color: colors.text },
@@ -2875,42 +3083,42 @@ function Select({
                             autoFocus: true
                           }
                         ),
-                        searchKeyword.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native17.TouchableOpacity, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) })
+                        searchKeyword.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native18.TouchableOpacity, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_react_native17.FlatList,
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_react_native18.FlatList,
                 {
                   data: filteredOptions,
                   keyExtractor: (item) => item.value,
                   renderItem: renderOption,
-                  ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppText, { style: { color: colors.textMuted }, children: "\u6682\u65E0\u9009\u9879" }) })
+                  ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { style: { color: colors.textMuted }, children: "\u6682\u65E0\u9009\u9879" }) })
                 }
               ),
-              multiple && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              multiple && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                 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__ */ (0, import_jsx_runtime26.jsxs)(AppText, { style: { color: colors.textMuted }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(AppText, { style: { color: colors.textMuted }, children: [
                       "\u5DF2\u9009\u62E9 ",
                       selectedValues.length,
                       " \u9879"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      import_react_native17.TouchableOpacity,
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      import_react_native18.TouchableOpacity,
                       {
                         className: "px-4 py-2 rounded-lg",
                         style: { backgroundColor: colors.primary },
                         onPress: () => setVisible(false),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: "\u786E\u5B9A" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: "\u786E\u5B9A" })
                       }
                     )
                   ]
@@ -2923,7 +3131,7 @@ function Select({
     )
   ] });
 }
-var styles9 = import_react_native17.StyleSheet.create({
+var styles10 = import_react_native18.StyleSheet.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -2942,9 +3150,9 @@ var styles9 = import_react_native17.StyleSheet.create({
 });
 
 // src/ui/form/DatePicker.tsx
-var import_react23 = require("react");
-var import_react_native18 = require("react-native");
-var import_jsx_runtime27 = require("nativewind/jsx-runtime");
+var import_react24 = require("react");
+var import_react_native19 = require("react-native");
+var import_jsx_runtime29 = require("nativewind/jsx-runtime");
 function PickerColumn({
   title,
   values,
@@ -2955,27 +3163,27 @@ function PickerColumn({
   showDivider = false,
   colors
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     AppView,
     {
       flex: true,
       style: [
-        showDivider && styles10.column,
+        showDivider && styles11.column,
         showDivider ? { borderRightColor: colors.divider } : void 0
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppView, { className: "flex-1", children: values.map((value) => {
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { className: "flex-1", children: values.map((value) => {
           const selected = selectedValue === value;
           const disabled = isDisabled(value);
-          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_react_native18.TouchableOpacity,
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react_native19.TouchableOpacity,
             {
               className: cn("py-2 items-center", selected && "bg-primary-50"),
               style: selected ? { backgroundColor: colors.primarySurface } : void 0,
               disabled,
               onPress: () => onSelect(value),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 AppText,
                 {
                   className: cn(selected ? "font-semibold" : void 0, disabled && "opacity-30"),
@@ -3004,16 +3212,16 @@ function DatePicker({
   className
 }) {
   const colors = useFormThemeColors();
-  const [visible, setVisible] = (0, import_react23.useState)(false);
-  const [tempDate, setTempDate] = (0, import_react23.useState)(value || /* @__PURE__ */ new Date());
-  const displayText = (0, import_react23.useMemo)(() => {
+  const [visible, setVisible] = (0, import_react24.useState)(false);
+  const [tempDate, setTempDate] = (0, import_react24.useState)(value || /* @__PURE__ */ new Date());
+  const displayText = (0, import_react24.useMemo)(() => {
     return value ? formatDate(value, format) : placeholder;
   }, [value, format, placeholder]);
-  const handleConfirm = (0, import_react23.useCallback)(() => {
+  const handleConfirm = (0, import_react24.useCallback)(() => {
     onChange?.(tempDate);
     setVisible(false);
   }, [tempDate, onChange]);
-  const years = (0, import_react23.useMemo)(() => {
+  const years = (0, import_react24.useMemo)(() => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const arr = [];
     for (let i = currentYear - 50; i <= currentYear + 50; i++) {
@@ -3021,16 +3229,16 @@ function DatePicker({
     }
     return arr;
   }, []);
-  const months = (0, import_react23.useMemo)(() => {
+  const months = (0, import_react24.useMemo)(() => {
     return Array.from({ length: 12 }, (_, i) => i + 1);
   }, []);
-  const days = (0, import_react23.useMemo)(() => {
+  const days = (0, import_react24.useMemo)(() => {
     const year = tempDate.getFullYear();
     const month = tempDate.getMonth();
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     return Array.from({ length: daysInMonth }, (_, i) => i + 1);
   }, [tempDate]);
-  const isDateDisabled = (0, import_react23.useCallback)(
+  const isDateDisabled = (0, import_react24.useCallback)(
     (year, month, day) => {
       const date = new Date(year, month - 1, day);
       if (minDate && date < minDate) return true;
@@ -3039,7 +3247,7 @@ function DatePicker({
     },
     [minDate, maxDate]
   );
-  const updateTempDate = (0, import_react23.useCallback)(
+  const updateTempDate = (0, import_react24.useCallback)(
     (year, month, day) => {
       const newDate = new Date(tempDate);
       if (year !== void 0) newDate.setFullYear(year);
@@ -3049,8 +3257,8 @@ function DatePicker({
     },
     [tempDate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       AppPressable,
       {
         className: cn(
@@ -3058,14 +3266,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__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             AppText,
             {
               className: "flex-1",
@@ -3074,36 +3282,36 @@ function DatePicker({
               children: displayText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar-today", size: "md", color: colors.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "calendar-today", size: "md", color: colors.icon })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_react_native18.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_react_native19.Modal,
       {
         visible,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             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__ */ (0, import_jsx_runtime27.jsx)(import_react_native18.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { style: { color: colors.textMuted }, children: "\u53D6\u6D88" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: "\u9009\u62E9\u65E5\u671F" }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native18.TouchableOpacity, { onPress: handleConfirm, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { style: { color: colors.primary }, className: "font-medium", children: "\u786E\u5B9A" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native19.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.textMuted }, children: "\u53D6\u6D88" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: "\u9009\u62E9\u65E5\u671F" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native19.TouchableOpacity, { onPress: handleConfirm, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.primary }, className: "font-medium", children: "\u786E\u5B9A" }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, "yyyy\u5E74MM\u6708dd\u65E5") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(AppView, { row: true, className: "h-48", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, "yyyy\u5E74MM\u6708dd\u65E5") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(AppView, { row: true, className: "h-48", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               PickerColumn,
               {
                 title: "\u5E74",
@@ -3115,7 +3323,7 @@ function DatePicker({
                 showDivider: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               PickerColumn,
               {
                 title: "\u6708",
@@ -3128,7 +3336,7 @@ function DatePicker({
                 showDivider: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               PickerColumn,
               {
                 title: "\u65E5",
@@ -3140,38 +3348,38 @@ function DatePicker({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             AppView,
             {
               row: true,
               className: "px-4 py-3 gap-2",
-              style: [styles10.footer, { borderTopColor: colors.divider }],
+              style: [styles11.footer, { borderTopColor: colors.divider }],
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_react_native18.TouchableOpacity,
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_react_native19.TouchableOpacity,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(/* @__PURE__ */ new Date()),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { style: { color: colors.text }, children: "\u4ECA\u5929" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.text }, children: "\u4ECA\u5929" })
                   }
                 ),
-                minDate && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_react_native18.TouchableOpacity,
+                minDate && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_react_native19.TouchableOpacity,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(minDate),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { style: { color: colors.text }, children: "\u6700\u65E9" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.text }, children: "\u6700\u65E9" })
                   }
                 ),
-                maxDate && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_react_native18.TouchableOpacity,
+                maxDate && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_react_native19.TouchableOpacity,
                   {
                     className: "flex-1 py-2 items-center rounded-lg",
                     style: { backgroundColor: colors.surfaceMuted },
                     onPress: () => setTempDate(maxDate),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { style: { color: colors.text }, children: "\u6700\u665A" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.text }, children: "\u6700\u665A" })
                   }
                 )
               ]
@@ -3182,7 +3390,7 @@ function DatePicker({
     )
   ] });
 }
-var styles10 = import_react_native18.StyleSheet.create({
+var styles11 = import_react_native19.StyleSheet.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -3198,7 +3406,7 @@ var styles10 = import_react_native18.StyleSheet.create({
 });
 
 // src/ui/form/FormItem.tsx
-var import_jsx_runtime28 = require("nativewind/jsx-runtime");
+var import_jsx_runtime30 = require("nativewind/jsx-runtime");
 function FormItem({
   name: _name,
   label,
@@ -3210,91 +3418,100 @@ function FormItem({
   labelClassName
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(AppView, { className: cn("mb-4", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { color: "error-500", children: "*" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AppView, { className: cn("mb-4", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { color: "error-500", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
-    help && !error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
+    error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
+    help && !error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
   ] });
 }
 
 // src/ui/form/useForm.ts
-var import_react24 = require("react");
-function useForm({
-  schema,
-  defaultValues
-}) {
-  const [values, setValues] = (0, import_react24.useState)(defaultValues);
-  const [errors, setErrors] = (0, import_react24.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react24.useState)(false);
-  const isDirty = (0, import_react24.useMemo)(() => {
+var import_react25 = require("react");
+var getIssuePath = (issue) => issue.path.map(String).join(".");
+var getFieldError = (issues, name) => {
+  const exactIssue = issues.find((issue) => getIssuePath(issue) === name);
+  if (exactIssue) return exactIssue.message;
+  const nestedIssue = issues.find((issue) => issue.path[0] === name);
+  return nestedIssue?.message;
+};
+var buildFormErrors = (issues) => {
+  return issues.reduce((acc, issue) => {
+    const path = getIssuePath(issue);
+    acc[path || "root"] = issue.message;
+    return acc;
+  }, {});
+};
+function useForm({ schema, defaultValues }) {
+  const [values, setValues] = (0, import_react25.useState)(defaultValues);
+  const [errors, setErrors] = (0, import_react25.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react25.useState)(false);
+  const isDirty = (0, import_react25.useMemo)(() => {
     return JSON.stringify(values) !== JSON.stringify(defaultValues);
   }, [values, defaultValues]);
-  const isValid = (0, import_react24.useMemo)(() => {
+  const isValid = (0, import_react25.useMemo)(() => {
     return Object.keys(errors).length === 0;
   }, [errors]);
-  const setValue = (0, import_react24.useCallback)((name, value) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
+  const clearFieldError = (0, import_react25.useCallback)((name) => {
     setErrors((prev) => {
+      if (!(name in prev)) return prev;
       const next = { ...prev };
       delete next[name];
       return next;
     });
   }, []);
-  const getValue = (0, import_react24.useCallback)(
+  const setValue = (0, import_react25.useCallback)(
+    (name, value) => {
+      setValues((prev) => ({ ...prev, [name]: value }));
+      clearFieldError(name);
+    },
+    [clearFieldError]
+  );
+  const getValue = (0, import_react25.useCallback)(
     (name) => {
       return values[name];
     },
     [values]
   );
-  const validateField = (0, import_react24.useCallback)(
+  const validateField = (0, import_react25.useCallback)(
     async (name) => {
-      try {
-        const shape = schema.shape;
-        if (shape && shape[name]) {
-          await shape[name].parseAsync(values[name]);
-          setErrors((prev) => {
-            const next = { ...prev };
-            delete next[name];
-            return next;
-          });
-          return true;
-        }
+      const fieldName = name;
+      const result = await schema.safeParseAsync(values);
+      if (result.success) {
+        clearFieldError(fieldName);
+        return true;
+      }
+      const errorMessage = getFieldError(result.error.issues, fieldName);
+      if (!errorMessage) {
+        clearFieldError(fieldName);
         return true;
-      } catch (error) {
-        setErrors((prev) => ({
-          ...prev,
-          [name]: error.errors?.[0]?.message || "\u9A8C\u8BC1\u5931\u8D25"
-        }));
-        return false;
       }
+      setErrors((prev) => ({
+        ...prev,
+        [fieldName]: errorMessage
+      }));
+      return false;
     },
-    [schema, values]
+    [schema, values, clearFieldError]
   );
-  const validate = (0, import_react24.useCallback)(async () => {
-    try {
-      await schema.parseAsync(values);
+  const validate = (0, import_react25.useCallback)(async () => {
+    const result = await schema.safeParseAsync(values);
+    if (result.success) {
       setErrors({});
       return true;
-    } catch (error) {
-      const formErrors = {};
-      error.errors?.forEach((err) => {
-        const path = err.path.join(".");
-        formErrors[path] = err.message;
-      });
-      setErrors(formErrors);
-      return false;
     }
+    setErrors(buildFormErrors(result.error.issues));
+    return false;
   }, [schema, values]);
-  const reset = (0, import_react24.useCallback)(() => {
+  const reset = (0, import_react25.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
     setIsSubmitting(false);
   }, [defaultValues]);
-  const handleSubmit = (0, import_react24.useCallback)(
+  const handleSubmit = (0, import_react25.useCallback)(
     async (onSubmit) => {
       const valid = await validate();
       if (!valid) return;
@@ -3323,29 +3540,54 @@ function useForm({
 }
 
 // src/ui/hooks/useToggle.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useToggle(defaultValue = false) {
-  const [value, setValue] = (0, import_react25.useState)(defaultValue);
-  const toggle = (0, import_react25.useCallback)(() => {
+  const [value, setValue] = (0, import_react26.useState)(defaultValue);
+  const toggle = (0, import_react26.useCallback)(() => {
     setValue((v) => !v);
   }, []);
-  const set = (0, import_react25.useCallback)((newValue) => {
+  const set = (0, import_react26.useCallback)((newValue) => {
     setValue(newValue);
   }, []);
-  const setTrue = (0, import_react25.useCallback)(() => {
+  const setTrue = (0, import_react26.useCallback)(() => {
     setValue(true);
   }, []);
-  const setFalse = (0, import_react25.useCallback)(() => {
+  const setFalse = (0, import_react26.useCallback)(() => {
     setValue(false);
   }, []);
   return [value, { toggle, set, setTrue, setFalse }];
 }
 
+// src/ui/hooks/usePageDrawer.ts
+var import_react27 = require("react");
+function usePageDrawer(defaultVisible = false) {
+  const [visible, setVisibleState] = (0, import_react27.useState)(defaultVisible);
+  const open = (0, import_react27.useCallback)(() => {
+    setVisibleState(true);
+  }, []);
+  const close = (0, import_react27.useCallback)(() => {
+    setVisibleState(false);
+  }, []);
+  const toggle = (0, import_react27.useCallback)(() => {
+    setVisibleState((current) => !current);
+  }, []);
+  const setVisible = (0, import_react27.useCallback)((nextVisible) => {
+    setVisibleState(nextVisible);
+  }, []);
+  return {
+    visible,
+    open,
+    close,
+    toggle,
+    setVisible
+  };
+}
+
 // src/ui/hooks/useDebounce.ts
-var import_react26 = require("react");
+var import_react28 = require("react");
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react26.useState)(value);
-  (0, import_react26.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react28.useState)(value);
+  (0, import_react28.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3357,11 +3599,11 @@ function useDebounce(value, delay = 500) {
 }
 
 // src/ui/hooks/useThrottle.ts
-var import_react27 = require("react");
+var import_react29 = require("react");
 function useThrottle(value, delay = 200) {
-  const [throttledValue, setThrottledValue] = (0, import_react27.useState)(value);
-  const lastUpdatedRef = (0, import_react27.useRef)(Date.now());
-  (0, import_react27.useEffect)(() => {
+  const [throttledValue, setThrottledValue] = (0, import_react29.useState)(value);
+  const lastUpdatedRef = (0, import_react29.useRef)(Date.now());
+  (0, import_react29.useEffect)(() => {
     const now = Date.now();
     const timeElapsed = now - lastUpdatedRef.current;
     if (timeElapsed >= delay) {
@@ -3382,12 +3624,12 @@ function useThrottle(value, delay = 200) {
 }
 
 // src/ui/hooks/useKeyboard.ts
-var import_react28 = require("react");
-var import_react_native19 = require("react-native");
+var import_react30 = require("react");
+var import_react_native20 = require("react-native");
 function useKeyboard() {
-  const [visible, setVisible] = (0, import_react28.useState)(false);
-  const [height, setHeight] = (0, import_react28.useState)(0);
-  (0, import_react28.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react30.useState)(false);
+  const [height, setHeight] = (0, import_react30.useState)(0);
+  (0, import_react30.useEffect)(() => {
     const handleKeyboardWillShow = (event) => {
       setVisible(true);
       setHeight(event.endCoordinates.height);
@@ -3404,31 +3646,31 @@ function useKeyboard() {
       setVisible(false);
       setHeight(0);
     };
-    const willShowSub = import_react_native19.Keyboard.addListener(
-      import_react_native19.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
-      import_react_native19.Platform.OS === "ios" ? handleKeyboardWillShow : handleKeyboardDidShow
+    const willShowSub = import_react_native20.Keyboard.addListener(
+      import_react_native20.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      import_react_native20.Platform.OS === "ios" ? handleKeyboardWillShow : handleKeyboardDidShow
     );
-    const willHideSub = import_react_native19.Keyboard.addListener(
-      import_react_native19.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
-      import_react_native19.Platform.OS === "ios" ? handleKeyboardWillHide : handleKeyboardDidHide
+    const willHideSub = import_react_native20.Keyboard.addListener(
+      import_react_native20.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      import_react_native20.Platform.OS === "ios" ? handleKeyboardWillHide : handleKeyboardDidHide
     );
     return () => {
       willShowSub.remove();
       willHideSub.remove();
     };
   }, []);
-  const dismiss = (0, import_react28.useCallback)(() => {
-    import_react_native19.Keyboard.dismiss();
+  const dismiss = (0, import_react30.useCallback)(() => {
+    import_react_native20.Keyboard.dismiss();
   }, []);
   return { visible, height, dismiss };
 }
 
 // src/ui/hooks/useDimensions.ts
-var import_react29 = require("react");
-var import_react_native20 = require("react-native");
+var import_react31 = require("react");
+var import_react_native21 = require("react-native");
 function useDimensions() {
-  const [dimensions, setDimensions] = (0, import_react29.useState)(() => {
-    const window = import_react_native20.Dimensions.get("window");
+  const [dimensions, setDimensions] = (0, import_react31.useState)(() => {
+    const window = import_react_native21.Dimensions.get("window");
     return {
       width: window.width,
       height: window.height,
@@ -3436,7 +3678,7 @@ function useDimensions() {
       fontScale: window.fontScale
     };
   });
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const handleChange = ({ window }) => {
       setDimensions({
         width: window.width,
@@ -3445,7 +3687,7 @@ function useDimensions() {
         fontScale: window.fontScale
       });
     };
-    const subscription = import_react_native20.Dimensions.addEventListener("change", handleChange);
+    const subscription = import_react_native21.Dimensions.addEventListener("change", handleChange);
     return () => {
       subscription.remove();
     };
@@ -3454,20 +3696,20 @@ function useDimensions() {
 }
 
 // src/ui/hooks/useOrientation.ts
-var import_react30 = require("react");
-var import_react_native21 = require("react-native");
+var import_react32 = require("react");
+var import_react_native22 = require("react-native");
 function useOrientation() {
   const getOrientation = () => {
-    const { width, height } = import_react_native21.Dimensions.get("window");
+    const { width, height } = import_react_native22.Dimensions.get("window");
     return width > height ? "landscape" : "portrait";
   };
-  const [orientation, setOrientation] = (0, import_react30.useState)(getOrientation);
-  (0, import_react30.useEffect)(() => {
+  const [orientation, setOrientation] = (0, import_react32.useState)(getOrientation);
+  (0, import_react32.useEffect)(() => {
     const handleChange = ({ window }) => {
       const newOrientation = window.width > window.height ? "landscape" : "portrait";
       setOrientation(newOrientation);
     };
-    const subscription = import_react_native21.Dimensions.addEventListener("change", handleChange);
+    const subscription = import_react_native22.Dimensions.addEventListener("change", handleChange);
     return () => {
       subscription.remove();
     };
@@ -3480,7 +3722,7 @@ function useOrientation() {
 }
 
 // src/navigation/provider.tsx
-var import_react31 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_native = require("@react-navigation/native");
 
 // src/navigation/utils/navigation-theme.ts
@@ -3506,7 +3748,7 @@ function createNavigationTheme(pantherTheme, isDark) {
 }
 
 // src/navigation/provider.tsx
-var import_jsx_runtime29 = require("nativewind/jsx-runtime");
+var import_jsx_runtime31 = require("nativewind/jsx-runtime");
 function NavigationProvider({
   children,
   linking,
@@ -3517,11 +3759,11 @@ function NavigationProvider({
   theme: customTheme
 }) {
   const { theme, isDark } = useTheme();
-  const navigationTheme = import_react31.default.useMemo(
+  const navigationTheme = import_react33.default.useMemo(
     () => customTheme || createNavigationTheme(theme, isDark),
     [customTheme, theme, isDark]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_native.NavigationContainer,
     {
       theme: navigationTheme,
@@ -3539,14 +3781,14 @@ function NavigationProvider({
 var import_stack = require("@react-navigation/stack");
 
 // src/navigation/navigators/StackNavigator.tsx
-var import_jsx_runtime30 = require("nativewind/jsx-runtime");
+var import_jsx_runtime32 = require("nativewind/jsx-runtime");
 var NativeStack = (0, import_stack.createStackNavigator)();
 var defaultScreenOptions = {
   headerShown: false,
   ...import_stack.TransitionPresets.SlideFromRightIOS
 };
 function StackNavigator({ initialRouteName, screenOptions, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     NativeStack.Navigator,
     {
       initialRouteName,
@@ -3558,7 +3800,7 @@ function StackNavigator({ initialRouteName, screenOptions, children }) {
 StackNavigator.Screen = NativeStack.Screen;
 StackNavigator.Group = NativeStack.Group;
 function createStackScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     StackNavigator.Screen,
     {
       name: route.name,
@@ -3571,13 +3813,13 @@ function createStackScreens(routes) {
 }
 
 // src/navigation/navigators/TabNavigator.tsx
-var import_react32 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_bottom_tabs = require("@react-navigation/bottom-tabs");
 
 // src/navigation/components/BottomTabBar.tsx
-var import_react_native22 = require("react-native");
+var import_react_native23 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_jsx_runtime31 = require("nativewind/jsx-runtime");
+var import_jsx_runtime33 = require("nativewind/jsx-runtime");
 var DEFAULT_TAB_BAR_HEIGHT = 65;
 function BottomTabBar({
   state,
@@ -3599,11 +3841,11 @@ function BottomTabBar({
   const inactiveColor = inactiveTintColor || colors.textMuted;
   const backgroundColor = style?.backgroundColor || colors.card;
   const borderTopColor = colors.divider;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_react_native22.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_react_native23.View,
     {
       style: [
-        styles11.container,
+        styles12.container,
         { borderTopColor },
         { backgroundColor, height: height + insets.bottom, paddingBottom: insets.bottom },
         style
@@ -3634,8 +3876,8 @@ function BottomTabBar({
           size: 24
         }) : null;
         const badge = options.tabBarBadge;
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-          import_react_native22.TouchableOpacity,
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          import_react_native23.TouchableOpacity,
           {
             accessibilityRole: "button",
             accessibilityState: isFocused ? { selected: true } : {},
@@ -3644,21 +3886,21 @@ function BottomTabBar({
             onPress,
             onLongPress,
             style: [
-              styles11.tab,
+              styles12.tab,
               {
                 backgroundColor: isFocused ? activeBackgroundColor : inactiveBackgroundColor
               }
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native22.View, { style: [styles11.iconContainer, iconStyle], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native23.View, { style: [styles12.iconContainer, iconStyle], children: [
                 iconName,
-                badge != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native22.View, { style: [styles11.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppText, { style: styles11.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
+                badge != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native23.View, { style: [styles12.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { style: styles12.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
               ] }),
-              showLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              showLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 AppText,
                 {
                   style: [
-                    styles11.label,
+                    styles12.label,
                     { color: isFocused ? activeColor : inactiveColor },
                     labelStyle
                   ],
@@ -3674,7 +3916,7 @@ function BottomTabBar({
     }
   );
 }
-var styles11 = import_react_native22.StyleSheet.create({
+var styles12 = import_react_native23.StyleSheet.create({
   container: {
     flexDirection: "row",
     borderTopWidth: 0.5,
@@ -3717,7 +3959,7 @@ var styles11 = import_react_native22.StyleSheet.create({
 });
 
 // src/navigation/navigators/TabNavigator.tsx
-var import_jsx_runtime32 = require("nativewind/jsx-runtime");
+var import_jsx_runtime34 = require("nativewind/jsx-runtime");
 var NativeTab = (0, import_bottom_tabs.createBottomTabNavigator)();
 var defaultScreenOptions2 = {
   headerShown: false,
@@ -3730,7 +3972,7 @@ function TabNavigator({
   screenOptions,
   children
 }) {
-  const mergedScreenOptions = import_react32.default.useMemo(() => {
+  const mergedScreenOptions = import_react34.default.useMemo(() => {
     const options = { ...defaultScreenOptions2, ...screenOptions };
     if (tabBarOptions) {
       if (tabBarOptions.showLabel !== void 0) {
@@ -3763,9 +4005,9 @@ function TabNavigator({
     }
     return options;
   }, [tabBarOptions, screenOptions]);
-  const resolvedTabBar = import_react32.default.useMemo(() => {
+  const resolvedTabBar = import_react34.default.useMemo(() => {
     if (tabBar) return tabBar;
-    return (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       BottomTabBar,
       {
         ...props,
@@ -3792,7 +4034,7 @@ function TabNavigator({
     tabBarOptions?.style,
     tabBarOptions?.height
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     NativeTab.Navigator,
     {
       initialRouteName,
@@ -3804,7 +4046,7 @@ function TabNavigator({
 }
 TabNavigator.Screen = NativeTab.Screen;
 function createTabScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     TabNavigator.Screen,
     {
       name: route.name,
@@ -3817,9 +4059,9 @@ function createTabScreens(routes) {
 }
 
 // src/navigation/navigators/DrawerNavigator.tsx
-var import_react33 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_drawer = require("@react-navigation/drawer");
-var import_jsx_runtime33 = require("nativewind/jsx-runtime");
+var import_jsx_runtime35 = require("nativewind/jsx-runtime");
 var NativeDrawer = (0, import_drawer.createDrawerNavigator)();
 function DrawerNavigator({
   initialRouteName,
@@ -3830,7 +4072,7 @@ function DrawerNavigator({
 }) {
   const { theme, isDark } = useTheme();
   const navigationTheme = createNavigationTheme(theme, isDark);
-  const mergedScreenOptions = import_react33.default.useMemo(() => {
+  const mergedScreenOptions = import_react35.default.useMemo(() => {
     return {
       headerShown: false,
       drawerStyle: {
@@ -3849,7 +4091,7 @@ function DrawerNavigator({
       ...screenOptions
     };
   }, [screenOptions, drawerOptions, navigationTheme, theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     NativeDrawer.Navigator,
     {
       initialRouteName,
@@ -3861,7 +4103,7 @@ function DrawerNavigator({
 }
 DrawerNavigator.Screen = NativeDrawer.Screen;
 function createDrawerScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     DrawerNavigator.Screen,
     {
       name: route.name,
@@ -3874,9 +4116,9 @@ function createDrawerScreens(routes) {
 }
 
 // src/navigation/components/AppHeader.tsx
-var import_react_native23 = require("react-native");
+var import_react_native24 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var import_jsx_runtime34 = require("nativewind/jsx-runtime");
+var import_jsx_runtime36 = require("nativewind/jsx-runtime");
 function AppHeader({
   title,
   subtitle,
@@ -3890,7 +4132,7 @@ function AppHeader({
   const colors = useThemeColors();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const backgroundColor = transparent ? "transparent" : colors.card;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     AppView,
     {
       style: [
@@ -3900,38 +4142,38 @@ function AppHeader({
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(AppView, { row: true, items: "center", px: 4, style: styles12.container, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppView, { style: [styles12.sideContainer, styles12.leftContainer], children: leftIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppPressable, { onPress: onLeftPress, style: styles12.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(AppView, { style: styles12.centerContainer, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(AppView, { row: true, items: "center", px: 4, style: styles13.container, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppView, { style: [styles13.sideContainer, styles13.leftContainer], children: leftIcon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppPressable, { onPress: onLeftPress, style: styles13.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(AppView, { style: styles13.centerContainer, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             AppText,
             {
               size: "lg",
               weight: "semibold",
-              style: [styles12.title, { color: colors.text }],
+              style: [styles13.title, { color: colors.text }],
               numberOfLines: 1,
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             AppText,
             {
               size: "xs",
-              style: [styles12.subtitle, { color: colors.textMuted }],
+              style: [styles13.subtitle, { color: colors.textMuted }],
               numberOfLines: 1,
               children: subtitle
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppView, { row: true, items: "center", style: [styles12.sideContainer, styles12.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppPressable, { onPress: icon.onPress, style: styles12.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(AppView, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon.icon, size: 24, color: colors.text }),
-          icon.badge ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppView, { style: styles12.badge, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppText, { size: "xs", color: "white", style: styles12.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppView, { row: true, items: "center", style: [styles13.sideContainer, styles13.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppPressable, { onPress: icon.onPress, style: styles13.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(AppView, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: icon.icon, size: 24, color: colors.text }),
+          icon.badge ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppView, { style: styles13.badge, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppText, { size: "xs", color: "white", style: styles13.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
         ] }) }, index)) })
       ] })
     }
   );
 }
-var styles12 = import_react_native23.StyleSheet.create({
+var styles13 = import_react_native24.StyleSheet.create({
   container: {
     height: 44
     // iOS 标准导航栏高度
@@ -3982,9 +4224,9 @@ var styles12 = import_react_native23.StyleSheet.create({
 });
 
 // src/navigation/components/DrawerContent.tsx
-var import_react_native24 = require("react-native");
+var import_react_native25 = require("react-native");
 var import_drawer2 = require("@react-navigation/drawer");
-var import_jsx_runtime35 = require("nativewind/jsx-runtime");
+var import_jsx_runtime37 = require("nativewind/jsx-runtime");
 function DrawerContent({
   state,
   descriptors,
@@ -4013,20 +4255,20 @@ function DrawerContent({
       badge: options.tabBarBadge
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_drawer2.DrawerContentScrollView, { style: [styles13.container, { backgroundColor }], children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native24.View, { style: [styles13.header, { borderBottomColor: dividerColor }], children: header }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AppView, { className: "py-2", children: drawerItems.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_drawer2.DrawerContentScrollView, { style: [styles14.container, { backgroundColor }], children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native25.View, { style: [styles14.header, { borderBottomColor: dividerColor }], children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime35.jsxs)(
-        import_react_native24.TouchableOpacity,
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        import_react_native25.TouchableOpacity,
         {
           onPress,
-          style: [styles13.item, isFocused && { backgroundColor: activeBgColor }],
+          style: [styles14.item, isFocused && { backgroundColor: activeBgColor }],
           children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native24.View, { style: styles13.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            item.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native25.View, { style: styles14.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Icon,
               {
                 name: item.icon,
@@ -4034,28 +4276,28 @@ function DrawerContent({
                 color: isFocused ? activeColor : inactiveColor
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               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__ */ (0, import_jsx_runtime35.jsx)(import_react_native24.View, { style: [styles13.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AppText, { style: styles13.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
+            item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native25.View, { style: [styles14.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppText, { style: styles14.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
           ]
         },
         item.name
       );
     }) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native24.View, { style: [styles13.footer, { borderTopColor: dividerColor }], children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native25.View, { style: [styles14.footer, { borderTopColor: dividerColor }], children: footer })
   ] });
 }
-var styles13 = import_react_native24.StyleSheet.create({
+var styles14 = import_react_native25.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -4105,7 +4347,7 @@ var styles13 = import_react_native24.StyleSheet.create({
 });
 
 // src/navigation/hooks/useNavigation.ts
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_native2 = require("@react-navigation/native");
 function useNavigation() {
   return (0, import_native2.useNavigation)();
@@ -4121,7 +4363,7 @@ function useDrawerNavigation() {
 }
 function useBackHandler(handler) {
   const navigation = (0, import_native2.useNavigation)();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const unsubscribe = navigation.addListener("beforeRemove", (e) => {
       if (!handler()) {
         e.preventDefault();
@@ -4150,8 +4392,8 @@ var import_native5 = require("@react-navigation/native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/overlay/AppStatusBar.tsx
-var import_react_native25 = require("react-native");
-var import_jsx_runtime36 = require("nativewind/jsx-runtime");
+var import_react_native26 = require("react-native");
+var import_jsx_runtime38 = require("nativewind/jsx-runtime");
 function AppStatusBar({
   barStyle = "auto",
   backgroundColor,
@@ -4161,8 +4403,8 @@ 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__ */ (0, import_jsx_runtime36.jsx)(
-    import_react_native25.StatusBar,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react_native26.StatusBar,
     {
       barStyle: resolvedBarStyle,
       backgroundColor: resolvedBackgroundColor,
@@ -4173,27 +4415,27 @@ function AppStatusBar({
 }
 
 // src/overlay/loading/provider.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // src/overlay/loading/context.ts
-var import_react35 = require("react");
-var LoadingContext = (0, import_react35.createContext)(null);
+var import_react37 = require("react");
+var LoadingContext = (0, import_react37.createContext)(null);
 function useLoadingContext() {
-  const ctx = (0, import_react35.useContext)(LoadingContext);
+  const ctx = (0, import_react37.useContext)(LoadingContext);
   if (!ctx) throw new Error("useLoading must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/loading/component.tsx
-var import_react_native26 = require("react-native");
-var import_jsx_runtime37 = require("nativewind/jsx-runtime");
+var import_react_native27 = require("react-native");
+var import_jsx_runtime39 = require("nativewind/jsx-runtime");
 function LoadingModal({ visible, text }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.Modal, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.View, { style: styles14.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native26.View, { style: [styles14.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.ActivityIndicator, { size: "large", color: "#fff" }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppText, { className: "text-white mt-3 text-sm", children: text })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native27.Modal, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native27.View, { style: styles15.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native27.View, { style: [styles15.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native27.ActivityIndicator, { size: "large", color: "#fff" }),
+    text && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppText, { className: "text-white mt-3 text-sm", children: text })
   ] }) }) });
 }
-var styles14 = import_react_native26.StyleSheet.create({
+var styles15 = import_react_native27.StyleSheet.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4209,45 +4451,45 @@ var styles14 = import_react_native26.StyleSheet.create({
 });
 
 // src/overlay/loading/provider.tsx
-var import_jsx_runtime38 = require("nativewind/jsx-runtime");
+var import_jsx_runtime40 = require("nativewind/jsx-runtime");
 function LoadingProvider({ children }) {
-  const [state, setState] = (0, import_react36.useState)({ visible: false });
-  const show = (0, import_react36.useCallback)((text) => {
+  const [state, setState] = (0, import_react38.useState)({ visible: false });
+  const show = (0, import_react38.useCallback)((text) => {
     setState({ visible: true, text });
   }, []);
-  const hide = (0, import_react36.useCallback)(() => {
+  const hide = (0, import_react38.useCallback)(() => {
     setState({ visible: false });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(LoadingContext.Provider, { value: { show, hide }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(LoadingContext.Provider, { value: { show, hide }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingModal, { ...state })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LoadingModal, { ...state })
   ] });
 }
 
 // src/overlay/toast/provider.tsx
-var import_react39 = require("react");
-var import_react_native28 = require("react-native");
+var import_react41 = require("react");
+var import_react_native29 = require("react-native");
 
 // src/overlay/toast/context.ts
-var import_react37 = require("react");
-var ToastContext = (0, import_react37.createContext)(null);
+var import_react39 = require("react");
+var ToastContext = (0, import_react39.createContext)(null);
 function useToastContext() {
-  const ctx = (0, import_react37.useContext)(ToastContext);
+  const ctx = (0, import_react39.useContext)(ToastContext);
   if (!ctx) throw new Error("useToast must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/toast/component.tsx
-var import_react38 = require("react");
-var import_react_native27 = require("react-native");
-var import_jsx_runtime39 = require("nativewind/jsx-runtime");
+var import_react40 = require("react");
+var import_react_native28 = require("react-native");
+var import_jsx_runtime41 = require("nativewind/jsx-runtime");
 function ToastItemView({ message, type, onHide }) {
-  const fadeAnim = (0, import_react38.useRef)(new import_react_native27.Animated.Value(0)).current;
-  (0, import_react38.useEffect)(() => {
-    import_react_native27.Animated.sequence([
-      import_react_native27.Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
-      import_react_native27.Animated.delay(2500),
-      import_react_native27.Animated.timing(fadeAnim, { toValue: 0, duration: 200, useNativeDriver: true })
+  const fadeAnim = (0, import_react40.useRef)(new import_react_native28.Animated.Value(0)).current;
+  (0, import_react40.useEffect)(() => {
+    import_react_native28.Animated.sequence([
+      import_react_native28.Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+      import_react_native28.Animated.delay(2500),
+      import_react_native28.Animated.timing(fadeAnim, { toValue: 0, duration: 200, useNativeDriver: true })
     ]).start(onHide);
   }, []);
   const bgColors = {
@@ -4256,8 +4498,8 @@ function ToastItemView({ message, type, onHide }) {
     warning: "bg-warning-500",
     info: "bg-primary-500"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native27.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react_native28.Animated.View,
     {
       style: {
         opacity: fadeAnim,
@@ -4270,17 +4512,17 @@ function ToastItemView({ message, type, onHide }) {
           }
         ]
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppText, { className: "text-white text-center", children: message }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-white text-center", children: message }) })
     }
   );
 }
 
 // src/overlay/toast/provider.tsx
-var import_jsx_runtime40 = require("nativewind/jsx-runtime");
+var import_jsx_runtime42 = require("nativewind/jsx-runtime");
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = (0, import_react39.useState)([]);
-  const timersRef = (0, import_react39.useRef)(/* @__PURE__ */ new Map());
-  const remove = (0, import_react39.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react41.useState)([]);
+  const timersRef = (0, import_react41.useRef)(/* @__PURE__ */ new Map());
+  const remove = (0, import_react41.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -4288,7 +4530,7 @@ function ToastProvider({ children }) {
       timersRef.current.delete(id);
     }
   }, []);
-  const show = (0, import_react39.useCallback)(
+  const show = (0, import_react41.useCallback)(
     (message, type = "info", duration = 3e3) => {
       const id = Math.random().toString(36).substring(7);
       const toast = { id, message, type, duration };
@@ -4298,28 +4540,28 @@ function ToastProvider({ children }) {
     },
     [remove]
   );
-  const success = (0, import_react39.useCallback)(
+  const success = (0, import_react41.useCallback)(
     (message, duration) => show(message, "success", duration),
     [show]
   );
-  const error = (0, import_react39.useCallback)(
+  const error = (0, import_react41.useCallback)(
     (message, duration) => show(message, "error", duration),
     [show]
   );
-  const info = (0, import_react39.useCallback)(
+  const info = (0, import_react41.useCallback)(
     (message, duration) => show(message, "info", duration),
     [show]
   );
-  const warning = (0, import_react39.useCallback)(
+  const warning = (0, import_react41.useCallback)(
     (message, duration) => show(message, "warning", duration),
     [show]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native28.View, { style: styles15.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native29.View, { style: styles16.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
   ] });
 }
-var styles15 = import_react_native28.StyleSheet.create({
+var styles16 = import_react_native29.StyleSheet.create({
   toastContainer: {
     position: "absolute",
     top: 60,
@@ -4330,20 +4572,20 @@ var styles15 = import_react_native28.StyleSheet.create({
 });
 
 // src/overlay/alert/provider.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 
 // src/overlay/alert/context.ts
-var import_react40 = require("react");
-var AlertContext = (0, import_react40.createContext)(null);
+var import_react42 = require("react");
+var AlertContext = (0, import_react42.createContext)(null);
 function useAlertContext() {
-  const ctx = (0, import_react40.useContext)(AlertContext);
+  const ctx = (0, import_react42.useContext)(AlertContext);
   if (!ctx) throw new Error("useAlert must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/alert/component.tsx
-var import_react_native29 = require("react-native");
-var import_jsx_runtime41 = require("nativewind/jsx-runtime");
+var import_react_native30 = require("react-native");
+var import_jsx_runtime43 = require("nativewind/jsx-runtime");
 function AlertModal({
   visible,
   title,
@@ -4355,16 +4597,16 @@ function AlertModal({
   onCancel
 }) {
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native29.Modal, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native29.View, { style: styles16.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native29.View, { style: styles16.alertBox, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(AppView, { row: true, gap: 3, className: "mt-2", children: [
-      showCancel && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native30.Modal, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native30.View, { style: styles17.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native30.View, { style: styles17.alertBox, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AppView, { row: true, gap: 3, className: "mt-2", children: [
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
     ] })
   ] }) }) });
 }
-var styles16 = import_react_native29.StyleSheet.create({
+var styles17 = import_react_native30.StyleSheet.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4386,32 +4628,32 @@ var styles16 = import_react_native29.StyleSheet.create({
 });
 
 // src/overlay/alert/provider.tsx
-var import_jsx_runtime42 = require("nativewind/jsx-runtime");
+var import_jsx_runtime44 = require("nativewind/jsx-runtime");
 function AlertProvider({ children }) {
-  const [alert, setAlert] = (0, import_react41.useState)(null);
-  const showAlert = (0, import_react41.useCallback)((options) => {
+  const [alert, setAlert] = (0, import_react43.useState)(null);
+  const showAlert = (0, import_react43.useCallback)((options) => {
     setAlert({ ...options, visible: true });
   }, []);
-  const confirm = (0, import_react41.useCallback)(
+  const confirm = (0, import_react43.useCallback)(
     (options) => {
       showAlert({ ...options, showCancel: true });
     },
     [showAlert]
   );
-  const hide = (0, import_react41.useCallback)(() => {
+  const hide = (0, import_react43.useCallback)(() => {
     setAlert(null);
   }, []);
-  const handleConfirm = (0, import_react41.useCallback)(() => {
+  const handleConfirm = (0, import_react43.useCallback)(() => {
     alert?.onConfirm?.();
     hide();
   }, [alert, hide]);
-  const handleCancel = (0, import_react41.useCallback)(() => {
+  const handleCancel = (0, import_react43.useCallback)(() => {
     alert?.onCancel?.();
     hide();
   }, [alert, hide]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       AlertModal,
       {
         visible: alert?.visible ?? false,
@@ -4428,13 +4670,13 @@ function AlertProvider({ children }) {
 }
 
 // src/overlay/provider.tsx
-var import_jsx_runtime43 = require("nativewind/jsx-runtime");
+var import_jsx_runtime45 = require("nativewind/jsx-runtime");
 function OverlayProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LoadingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AlertProvider, { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AlertProvider, { children }) }) });
 }
 
 // src/overlay/AppProvider.tsx
-var import_jsx_runtime44 = require("nativewind/jsx-runtime");
+var import_jsx_runtime46 = require("nativewind/jsx-runtime");
 var defaultLightTheme = {
   colors: {
     primary: "#f38b32",
@@ -4471,21 +4713,21 @@ function AppProvider({
 }) {
   let content = children;
   if (enableOverlay) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(OverlayProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(OverlayProvider, { children: content });
   }
   if (enableNavigation) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(NavigationProvider, { ...navigationProps, children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NavigationProvider, { ...navigationProps, children: content });
   }
   if (enableTheme) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      enableStatusBar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      enableStatusBar && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
       content
     ] }) });
   }
   if (enableSafeArea) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: content });
 }
 
 // src/overlay/loading/hooks.ts
@@ -4532,6 +4774,7 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   ErrorCode,
   FileIcons,
   FormItem,
+  GradientView,
   Icon,
   Loading,
   MemoryStorage,
@@ -4540,6 +4783,7 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   NavigationProvider,
   OverlayProvider,
   Page,
+  PageDrawer,
   Progress,
   Radio,
   RadioGroup,
@@ -4605,6 +4849,7 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   useNavigation,
   useNavigationState,
   useOrientation,
+  usePageDrawer,
   usePagination,
   usePrevious,
   useQuery,