@xaui/native 0.0.12 → 0.0.13

package/dist/index.js

@@ -7,17 +7,15 @@ import {
 } from "./chunk-XJKA22BK.js";
 import {
   Alert
-} from "./chunk-OFYJYQ2M.js";
+} from "./chunk-2T6FKPJW.js";
 import {
   Autocomplete,
   AutocompleteItem
-} from "./chunk-RL47NQAU.js";
+} from "./chunk-NMZUPH3R.js";
 import "./chunk-GBHQCAKW.js";
 import {
   DatePicker
-} from "./chunk-LM23DOX3.js";
-import "./chunk-CKGZOJVV.js";
-import "./chunk-SIXET7TJ.js";
+} from "./chunk-7OFTYKK4.js";
 import {
   Typography
 } from "./chunk-ZYTBRHLJ.js";
@@ -26,7 +24,7 @@ import {
 } from "./chunk-GNJIET26.js";
 import {
   ActivityIndicator
-} from "./chunk-63LRW4QD.js";
+} from "./chunk-MKHBEJLO.js";
 import "./chunk-NBRASCX4.js";
 export {
   ActivityIndicator,

package/dist/indicator/index.cjs

@@ -215,7 +215,14 @@ var CircularActivityIndicator = ({
         borderWidth: strokeWidth,
         borderRadius: size / 2
       };
-      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: [containerStyle, offsetStyle], collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle }))))));
+      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [containerStyle, offsetStyle],
+          collapsable: false
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle })))
+      )));
     })
   ));
 };

package/dist/indicator/index.js

@@ -1,6 +1,6 @@
 import {
   ActivityIndicator
-} from "../chunk-63LRW4QD.js";
+} from "../chunk-MKHBEJLO.js";
 import "../chunk-NBRASCX4.js";
 export {
   ActivityIndicator

package/dist/menu/index.cjs

@@ -0,0 +1,371 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/menu/index.ts
+var menu_exports = {};
+__export(menu_exports, {
+  Menu: () => Menu,
+  MenuItem: () => MenuItem
+});
+module.exports = __toCommonJS(menu_exports);
+
+// src/components/menu/menu.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/menu/menu.style.ts
+var import_react_native4 = require("react-native");
+var SCREEN_INDENT = 8;
+var MENU_GAP = 4;
+var styles = import_react_native4.StyleSheet.create({
+  wrapper: {
+    position: "absolute"
+  },
+  overlay: {
+    ...import_react_native4.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
+var import_react6 = require("react");
+var import_react_native5 = require("react-native");
+var useMenuTriggerMeasurements = (visible) => {
+  const triggerRef = (0, import_react6.useRef)(null);
+  const [triggerPosition, setTriggerPosition] = (0, import_react6.useState)(null);
+  (0, import_react6.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] = (0, import_react6.useState)({ width: 0, height: 0 });
+  const [isMeasured, setIsMeasured] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (!visible) {
+      setIsMeasured(false);
+    }
+  }, [visible]);
+  const handleContentLayout = (0, import_react6.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 (0, import_react6.useMemo)(() => {
+    if (!triggerPosition) return { top: 0, left: 0 };
+    const screenWidth = import_react_native5.Dimensions.get("window").width;
+    const screenHeight = import_react_native5.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 = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
+  const scale = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
+  (0, import_react6.useEffect)(() => {
+    if (!visible) return;
+    opacity.setValue(0);
+    scale.setValue(0);
+    import_react_native5.Animated.parallel([
+      import_react_native5.Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        easing: import_react_native5.Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      }),
+      import_react_native5.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__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native6.Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onDismiss
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Pressable,
+      {
+        style: [styles.overlay, customAppearance?.overlay],
+        onPress: onDismiss,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close menu"
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.Animated.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__ */ import_react7.default.createElement(import_react_native6.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: customAppearance?.content }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.ScrollView, { style: { maxHeight } }, children)))
+      )
+    )
+  ));
+};
+
+// src/components/menu/menu-item.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
+
+// src/components/menu/menu-item.style.ts
+var import_react_native7 = require("react-native");
+var MIN_WIDTH = 112;
+var MAX_WIDTH = 280;
+var styles2 = import_react_native7.StyleSheet.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__ */ import_react8.default.createElement(
+        import_react_native8.Text,
+        {
+          style: [
+            styles2.titleText,
+            { color: titleColor },
+            customAppearance?.title
+          ],
+          numberOfLines: 1
+        },
+        title
+      );
+    }
+    return title;
+  };
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native8.Pressable,
+    {
+      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__ */ import_react8.default.createElement(import_react_native8.View, { style: [styles2.row, customAppearance?.content] }, startContent && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.endContent }, endContent))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu,
+  MenuItem
+});

package/dist/menu/index.d.cts

@@ -0,0 +1,107 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, GestureResponderEvent, TextStyle } from 'react-native';
+
+type MenuPosition = 'top' | 'bottom';
+type MenuCustomAppearance = {
+    /**
+     * Custom styles for the overlay container
+     */
+    overlay?: ViewStyle;
+    /**
+     * Custom styles for the menu container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the menu content
+     */
+    content?: ViewStyle;
+};
+type MenuProps = {
+    /**
+     * Whether the Menu is currently visible.
+     */
+    visible: boolean;
+    /**
+     * The trigger element to open the menu from. This is the component that will trigger the menu display.
+     */
+    trigger: ReactNode;
+    /**
+     * Whether the menu should open at the top of the trigger or at its bottom.
+     * @default 'bottom'
+     */
+    position?: MenuPosition;
+    /**
+     * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
+     */
+    onDismiss?: () => void;
+    /**
+     * Content of the Menu.
+     */
+    children: ReactNode;
+    /**
+     * Custom appearance styles for menu parts
+     */
+    customAppearance?: MenuCustomAppearance;
+    /**
+     * Maximum height of the scrollable menu content
+     * @default 280
+     */
+    maxHeight?: number;
+};
+
+declare const Menu: React.FC<MenuProps>;
+
+type MenuItemCustomAppearance = {
+    /**
+     * Custom styles for the item container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the item content
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+};
+type MenuItemProps = {
+    /**
+     * Title text for the MenuItem.
+     */
+    title: ReactNode;
+    /**
+     * Content to display at the start of the item.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the item.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether the item is disabled. A disabled item is greyed out and onPress is not called on touch.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets min height with densed layout.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Custom appearance styles for item parts
+     */
+    customAppearance?: MenuItemCustomAppearance;
+    /**
+     * Accessibility label for the item. This is read by the screen reader when the user taps the component.
+     */
+    accessibilityLabel?: string;
+};
+
+declare const MenuItem: React.FC<MenuItemProps>;
+
+export { Menu, type MenuCustomAppearance, MenuItem, type MenuItemCustomAppearance, type MenuItemProps, type MenuPosition, type MenuProps };

package/dist/menu/index.d.ts

@@ -0,0 +1,107 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, GestureResponderEvent, TextStyle } from 'react-native';
+
+type MenuPosition = 'top' | 'bottom';
+type MenuCustomAppearance = {
+    /**
+     * Custom styles for the overlay container
+     */
+    overlay?: ViewStyle;
+    /**
+     * Custom styles for the menu container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the menu content
+     */
+    content?: ViewStyle;
+};
+type MenuProps = {
+    /**
+     * Whether the Menu is currently visible.
+     */
+    visible: boolean;
+    /**
+     * The trigger element to open the menu from. This is the component that will trigger the menu display.
+     */
+    trigger: ReactNode;
+    /**
+     * Whether the menu should open at the top of the trigger or at its bottom.
+     * @default 'bottom'
+     */
+    position?: MenuPosition;
+    /**
+     * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
+     */
+    onDismiss?: () => void;
+    /**
+     * Content of the Menu.
+     */
+    children: ReactNode;
+    /**
+     * Custom appearance styles for menu parts
+     */
+    customAppearance?: MenuCustomAppearance;
+    /**
+     * Maximum height of the scrollable menu content
+     * @default 280
+     */
+    maxHeight?: number;
+};
+
+declare const Menu: React.FC<MenuProps>;
+
+type MenuItemCustomAppearance = {
+    /**
+     * Custom styles for the item container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the item content
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+};
+type MenuItemProps = {
+    /**
+     * Title text for the MenuItem.
+     */
+    title: ReactNode;
+    /**
+     * Content to display at the start of the item.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the item.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether the item is disabled. A disabled item is greyed out and onPress is not called on touch.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets min height with densed layout.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Custom appearance styles for item parts
+     */
+    customAppearance?: MenuItemCustomAppearance;
+    /**
+     * Accessibility label for the item. This is read by the screen reader when the user taps the component.
+     */
+    accessibilityLabel?: string;
+};
+
+declare const MenuItem: React.FC<MenuItemProps>;
+
+export { Menu, type MenuCustomAppearance, MenuItem, type MenuItemCustomAppearance, type MenuItemProps, type MenuPosition, type MenuProps };