@xaui/native 0.0.12 → 0.0.13

package/dist/menu/index.js

@@ -0,0 +1,304 @@
+import {
+  useXUITheme
+} from "../chunk-NBRASCX4.js";
+
+// src/components/menu/menu.tsx
+import React from "react";
+import {
+  Animated as Animated2,
+  Modal,
+  Pressable,
+  ScrollView,
+  View
+} from "react-native";
+
+// src/components/menu/menu.style.ts
+import { StyleSheet } from "react-native";
+var SCREEN_INDENT = 8;
+var MENU_GAP = 4;
+var styles = StyleSheet.create({
+  wrapper: {
+    position: "absolute"
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject
+  },
+  menuContainer: {
+    position: "absolute",
+    paddingVertical: 8,
+    minWidth: 200,
+    maxWidth: 320
+  }
+});
+var MENU_SCREEN_INDENT = SCREEN_INDENT;
+var MENU_TRIGGER_GAP = MENU_GAP;
+
+// src/components/menu/menu.hook.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Dimensions, Easing } from "react-native";
+var useMenuTriggerMeasurements = (visible) => {
+  const triggerRef = useRef(null);
+  const [triggerPosition, setTriggerPosition] = useState(null);
+  useEffect(() => {
+    if (!visible) {
+      setTriggerPosition(null);
+      return;
+    }
+    const measureTrigger = (attempt) => {
+      triggerRef.current?.measure((_, __, width, height, pageX, pageY) => {
+        if ((width <= 0 || height <= 0) && attempt < 5) {
+          globalThis.requestAnimationFrame(() => measureTrigger(attempt + 1));
+          return;
+        }
+        setTriggerPosition({
+          x: pageX,
+          y: pageY,
+          width: Math.max(0, width),
+          height: Math.max(0, height)
+        });
+      });
+    };
+    const frameId = globalThis.setTimeout(() => measureTrigger(0), 0);
+    return () => globalThis.clearTimeout(frameId);
+  }, [visible]);
+  return { triggerRef, triggerPosition };
+};
+var useMenuContentLayout = (visible) => {
+  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
+  const [isMeasured, setIsMeasured] = useState(false);
+  useEffect(() => {
+    if (!visible) {
+      setIsMeasured(false);
+    }
+  }, [visible]);
+  const handleContentLayout = useCallback((event) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setContentSize({ width, height });
+      setIsMeasured(true);
+    }
+  }, []);
+  return { contentSize, handleContentLayout, isMeasured };
+};
+var useMenuPosition = (triggerPosition, contentSize, position) => {
+  return useMemo(() => {
+    if (!triggerPosition) return { top: 0, left: 0 };
+    const screenWidth = Dimensions.get("window").width;
+    const screenHeight = Dimensions.get("window").height;
+    let top;
+    let left = triggerPosition.x;
+    const hasEnoughSpaceBelow = triggerPosition.y + triggerPosition.height + contentSize.height <= screenHeight - MENU_SCREEN_INDENT;
+    const hasEnoughSpaceAbove = triggerPosition.y - contentSize.height >= MENU_SCREEN_INDENT;
+    if (position === "bottom") {
+      if (hasEnoughSpaceBelow) {
+        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
+      } else if (hasEnoughSpaceAbove) {
+        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
+      } else {
+        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
+      }
+    } else {
+      if (hasEnoughSpaceAbove) {
+        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
+      } else if (hasEnoughSpaceBelow) {
+        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
+      } else {
+        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
+      }
+    }
+    if (contentSize.width > 0 && left + contentSize.width > screenWidth - MENU_SCREEN_INDENT) {
+      left = Math.max(
+        MENU_SCREEN_INDENT,
+        triggerPosition.x + triggerPosition.width - contentSize.width
+      );
+    }
+    if (left < MENU_SCREEN_INDENT) {
+      left = MENU_SCREEN_INDENT;
+    }
+    const maxTop = Math.max(MENU_SCREEN_INDENT, screenHeight - MENU_SCREEN_INDENT - contentSize.height);
+    const clampedTop = Math.min(maxTop, Math.max(MENU_SCREEN_INDENT, top));
+    return { top: clampedTop, left };
+  }, [triggerPosition, contentSize, position]);
+};
+var useMenuAnimation = (visible) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!visible) return;
+    opacity.setValue(0);
+    scale.setValue(0);
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      }),
+      Animated.spring(scale, {
+        toValue: 1,
+        friction: 9,
+        tension: 100,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [visible, opacity, scale]);
+  return { opacity, scale };
+};
+
+// src/components/menu/menu.tsx
+var Menu = ({
+  visible,
+  trigger,
+  position = "bottom",
+  onDismiss,
+  children,
+  customAppearance,
+  maxHeight = 280
+}) => {
+  const theme = useXUITheme();
+  const { triggerRef, triggerPosition } = useMenuTriggerMeasurements(visible);
+  const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
+  const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
+  const { opacity, scale } = useMenuAnimation(visible);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onDismiss
+    },
+    /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        style: [styles.overlay, customAppearance?.overlay],
+        onPress: onDismiss,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close menu"
+      },
+      /* @__PURE__ */ React.createElement(
+        Animated2.View,
+        {
+          onLayout: handleContentLayout,
+          style: [
+            styles.menuContainer,
+            {
+              top: isMeasured ? menuPosition.top : -9999,
+              left: isMeasured ? menuPosition.left : -9999,
+              backgroundColor: theme.colors.background,
+              borderRadius: theme.borderRadius.md,
+              opacity: isMeasured ? opacity : 0,
+              transform: [{ scale }],
+              ...theme.shadows.md
+            },
+            customAppearance?.container
+          ]
+        },
+        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, children)))
+      )
+    )
+  ));
+};
+
+// src/components/menu/menu-item.tsx
+import React2 from "react";
+import { Pressable as Pressable2, Text, View as View2 } from "react-native";
+
+// src/components/menu/menu-item.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var MIN_WIDTH = 112;
+var MAX_WIDTH = 280;
+var styles2 = StyleSheet2.create({
+  container: {
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH,
+    height: 48,
+    justifyContent: "center",
+    paddingHorizontal: 12
+  },
+  denseContainer: {
+    height: 32
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 16
+  },
+  startContent: {
+    width: 24,
+    marginRight: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  endContent: {
+    width: 24,
+    marginLeft: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/menu/menu-item.tsx
+var MenuItem = ({
+  title,
+  startContent,
+  endContent,
+  isDisabled = false,
+  dense = false,
+  onPress,
+  customAppearance,
+  accessibilityLabel
+}) => {
+  const theme = useXUITheme();
+  const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
+  const renderTitle = () => {
+    if (typeof title === "string" || typeof title === "number") {
+      return /* @__PURE__ */ React2.createElement(
+        Text,
+        {
+          style: [
+            styles2.titleText,
+            { color: titleColor },
+            customAppearance?.title
+          ],
+          numberOfLines: 1
+        },
+        title
+      );
+    }
+    return title;
+  };
+  return /* @__PURE__ */ React2.createElement(
+    Pressable2,
+    {
+      onPress: isDisabled ? void 0 : onPress,
+      disabled: isDisabled,
+      accessibilityRole: "menuitem",
+      accessibilityLabel,
+      accessibilityState: { disabled: isDisabled },
+      style: ({ pressed }) => [
+        styles2.container,
+        dense && styles2.denseContainer,
+        isDisabled && styles2.disabled,
+        pressed && !isDisabled && {
+          backgroundColor: theme.colors.foreground + "10"
+        },
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(View2, { style: [styles2.row, customAppearance?.content] }, startContent && /* @__PURE__ */ React2.createElement(View2, { style: styles2.startContent }, startContent), /* @__PURE__ */ React2.createElement(View2, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ React2.createElement(View2, { style: styles2.endContent }, endContent))
+  );
+};
+export {
+  Menu,
+  MenuItem
+};

package/dist/select/index.cjs

@@ -326,7 +326,11 @@ var import_react_native6 = require("react-native");
 var import_react8 = __toESM(require("react"), 1);
 var import_react_native5 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
-function ChevronDownIcon({ color, size, isOpen = false }) {
+function ChevronDownIcon({
+  color,
+  size,
+  isOpen = false
+}) {
   const rotation = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isOpen ? 1 : 0)).current;
   (0, import_react8.useEffect)(() => {
     import_react_native5.Animated.timing(rotation, {
@@ -399,17 +403,25 @@ var SelectTrigger = ({
         style
       ]
     },
-    /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: [styles.triggerContent, labelInside && styles.triggerContentColumn] }, startContent, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.valueWrapper }, labelInside && labelNode, /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native6.Text,
+    /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
       {
-        style: [
-          styles.valueText,
-          { fontSize: sizeStyles.fontSize, color: valueColor },
-          textStyle
-        ]
+        style: [styles.triggerContent, labelInside && styles.triggerContentColumn]
       },
-      displayValue
-    )), endContent),
+      startContent,
+      /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.valueWrapper }, labelInside && labelNode, /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Text,
+        {
+          style: [
+            styles.valueText,
+            { fontSize: sizeStyles.fontSize, color: valueColor },
+            textStyle
+          ]
+        },
+        displayValue
+      )),
+      endContent
+    ),
     /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.endSlot }, showClear && onClear && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Pressable, { onPress: onClear, style: styles.clearButton }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Text, { style: [styles.clearText, { color: selectorColor }] }, "x")), renderSelectorIcon)
   ));
 };
@@ -511,7 +523,9 @@ var useSelectSelection = ({
 var useSelectTriggerMeasurements = (isOpen) => {
   const triggerRef = (0, import_react11.useRef)(null);
   const [triggerWidth, setTriggerWidth] = (0, import_react11.useState)(null);
-  const [triggerPosition, setTriggerPosition] = (0, import_react11.useState)(null);
+  const [triggerPosition, setTriggerPosition] = (0, import_react11.useState)(
+    null
+  );
   const handleTriggerLayout = (0, import_react11.useCallback)((event) => {
     setTriggerWidth(event.nativeEvent.layout.width);
   }, []);
@@ -739,13 +753,23 @@ var Select = ({
           }
         ]
       },
-      /* @__PURE__ */ import_react12.default.createElement(import_react_native8.Pressable, { onPress: (event) => event.stopPropagation(), style: { flex: 1 } }, /* @__PURE__ */ import_react12.default.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ import_react12.default.createElement(
-        import_react_native8.Text,
+      /* @__PURE__ */ import_react12.default.createElement(
+        import_react_native8.Pressable,
         {
-          style: [styles.dialogTitle, { color: theme.colors.foreground }]
+          onPress: (event) => event.stopPropagation(),
+          style: { flex: 1 }
         },
-        dialogTitle
-      ) : null, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems))))
+        /* @__PURE__ */ import_react12.default.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ import_react12.default.createElement(
+          import_react_native8.Text,
+          {
+            style: [
+              styles.dialogTitle,
+              { color: theme.colors.foreground }
+            ]
+          },
+          dialogTitle
+        ) : null, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems)))
+      )
     ))
   ));
 };

package/dist/select/index.js

@@ -267,7 +267,11 @@ import {
 import React, { useEffect, useRef } from "react";
 import { Animated } from "react-native";
 import Svg, { Path } from "react-native-svg";
-function ChevronDownIcon({ color, size, isOpen = false }) {
+function ChevronDownIcon({
+  color,
+  size,
+  isOpen = false
+}) {
   const rotation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(rotation, {
@@ -340,17 +344,25 @@ var SelectTrigger = ({
         style
       ]
     },
-    /* @__PURE__ */ React2.createElement(View, { style: [styles.triggerContent, labelInside && styles.triggerContentColumn] }, startContent, /* @__PURE__ */ React2.createElement(View, { style: styles.valueWrapper }, labelInside && labelNode, /* @__PURE__ */ React2.createElement(
-      Text,
+    /* @__PURE__ */ React2.createElement(
+      View,
       {
-        style: [
-          styles.valueText,
-          { fontSize: sizeStyles.fontSize, color: valueColor },
-          textStyle
-        ]
+        style: [styles.triggerContent, labelInside && styles.triggerContentColumn]
       },
-      displayValue
-    )), endContent),
+      startContent,
+      /* @__PURE__ */ React2.createElement(View, { style: styles.valueWrapper }, labelInside && labelNode, /* @__PURE__ */ React2.createElement(
+        Text,
+        {
+          style: [
+            styles.valueText,
+            { fontSize: sizeStyles.fontSize, color: valueColor },
+            textStyle
+          ]
+        },
+        displayValue
+      )),
+      endContent
+    ),
     /* @__PURE__ */ React2.createElement(View, { style: styles.endSlot }, showClear && onClear && /* @__PURE__ */ React2.createElement(Pressable, { onPress: onClear, style: styles.clearButton }, /* @__PURE__ */ React2.createElement(Text, { style: [styles.clearText, { color: selectorColor }] }, "x")), renderSelectorIcon)
   ));
 };
@@ -452,7 +464,9 @@ var useSelectSelection = ({
 var useSelectTriggerMeasurements = (isOpen) => {
   const triggerRef = useRef3(null);
   const [triggerWidth, setTriggerWidth] = useState(null);
-  const [triggerPosition, setTriggerPosition] = useState(null);
+  const [triggerPosition, setTriggerPosition] = useState(
+    null
+  );
   const handleTriggerLayout = useCallback((event) => {
     setTriggerWidth(event.nativeEvent.layout.width);
   }, []);
@@ -680,13 +694,23 @@ var Select = ({
           }
         ]
       },
-      /* @__PURE__ */ React3.createElement(Pressable2, { onPress: (event) => event.stopPropagation(), style: { flex: 1 } }, /* @__PURE__ */ React3.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ React3.createElement(View2, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ React3.createElement(
-        Text2,
+      /* @__PURE__ */ React3.createElement(
+        Pressable2,
         {
-          style: [styles.dialogTitle, { color: theme.colors.foreground }]
+          onPress: (event) => event.stopPropagation(),
+          style: { flex: 1 }
         },
-        dialogTitle
-      ) : null, /* @__PURE__ */ React3.createElement(ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems))))
+        /* @__PURE__ */ React3.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ React3.createElement(View2, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ React3.createElement(
+          Text2,
+          {
+            style: [
+              styles.dialogTitle,
+              { color: theme.colors.foreground }
+            ]
+          },
+          dialogTitle
+        ) : null, /* @__PURE__ */ React3.createElement(ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems)))
+      )
     ))
   ));
 };

package/dist/view/index.cjs

@@ -309,7 +309,9 @@ var BlurView = ({
   style
 }) => {
   const overlayOpacity = Math.min(1, Math.max(0, intensity));
-  const overlayAnim = (0, import_react8.useRef)(new import_react_native8.Animated.Value(unlockable ? 0 : overlayOpacity)).current;
+  const overlayAnim = (0, import_react8.useRef)(
+    new import_react_native8.Animated.Value(unlockable ? 0 : overlayOpacity)
+  ).current;
   const scaleAnim = (0, import_react8.useRef)(new import_react_native8.Animated.Value(unlockable ? 1 : 0.98)).current;
   (0, import_react8.useEffect)(() => {
     if (unlockable) {
@@ -499,11 +501,12 @@ var GridBuilder = ({
   const paddedData = (0, import_react11.useMemo)(() => {
     const remainder = resolvedData.length % safeColumns;
     const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
-    if (placeholders === 0) return resolvedData.map((item, index) => ({
-      type: "data",
-      item,
-      index
-    }));
+    if (placeholders === 0)
+      return resolvedData.map((item, index) => ({
+        type: "data",
+        item,
+        index
+      }));
     return [
       ...resolvedData.map((item, index) => ({
         type: "data",
@@ -688,7 +691,9 @@ var ConditionalView = ({
   const initialValues = (0, import_react12.useMemo)(() => getInitialValues(animation), [animation]);
   const exitValues = (0, import_react12.useMemo)(() => getExitValues(animation), [animation]);
   const opacity = (0, import_react12.useRef)(
-    new import_react_native13.Animated.Value(disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity)
+    new import_react_native13.Animated.Value(
+      disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity
+    )
   ).current;
   const scale = (0, import_react12.useRef)(
     new import_react_native13.Animated.Value(disableAnimation ? FINAL_VALUES.scale : initialValues.scale)

package/dist/view/index.js

@@ -259,7 +259,9 @@ var BlurView = ({
   style
 }) => {
   const overlayOpacity = Math.min(1, Math.max(0, intensity));
-  const overlayAnim = useRef(new Animated.Value(unlockable ? 0 : overlayOpacity)).current;
+  const overlayAnim = useRef(
+    new Animated.Value(unlockable ? 0 : overlayOpacity)
+  ).current;
   const scaleAnim = useRef(new Animated.Value(unlockable ? 1 : 0.98)).current;
   useEffect(() => {
     if (unlockable) {
@@ -455,11 +457,12 @@ var GridBuilder = ({
   const paddedData = useMemo2(() => {
     const remainder = resolvedData.length % safeColumns;
     const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
-    if (placeholders === 0) return resolvedData.map((item, index) => ({
-      type: "data",
-      item,
-      index
-    }));
+    if (placeholders === 0)
+      return resolvedData.map((item, index) => ({
+        type: "data",
+        item,
+        index
+      }));
     return [
       ...resolvedData.map((item, index) => ({
         type: "data",
@@ -644,7 +647,9 @@ var ConditionalView = ({
   const initialValues = useMemo3(() => getInitialValues(animation), [animation]);
   const exitValues = useMemo3(() => getExitValues(animation), [animation]);
   const opacity = useRef2(
-    new Animated3.Value(disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity)
+    new Animated3.Value(
+      disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity
+    )
   ).current;
   const scale = useRef2(
     new Animated3.Value(disableAnimation ? FINAL_VALUES.scale : initialValues.scale)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -102,10 +102,10 @@
       "import": "./dist/view/index.js",
       "require": "./dist/view/index.js"
     },
-    "./icon": {
-      "types": "./dist/icon/index.d.ts",
-      "import": "./dist/icon/index.js",
-      "require": "./dist/icon/index.js"
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "import": "./dist/menu/index.js",
+      "require": "./dist/menu/index.js"
     }
   },
   "files": [
@@ -118,7 +118,8 @@
     "directory": "packages/native"
   },
   "dependencies": {
-    "@xaui/core": "0.1.7"
+    "@xaui/core": "0.1.7",
+    "@xaui/icons": "0.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",