@xaui/native 0.0.21 → 0.0.24

package/dist/menubox/index.cjs

@@ -0,0 +1,369 @@
+"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/menubox/index.ts
+var menubox_exports = {};
+__export(menubox_exports, {
+  MenuBox: () => MenuBox,
+  MenuBoxItem: () => MenuBoxItem
+});
+module.exports = __toCommonJS(menubox_exports);
+
+// src/components/menubox/menubox.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/menubox/menubox-context.ts
+var import_react = require("react");
+var MenuBoxContext = (0, import_react.createContext)(null);
+
+// src/components/menubox/menubox.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  content: {
+    flex: 1,
+    gap: 2
+  },
+  title: {
+    fontWeight: "500"
+  },
+  description: {
+    opacity: 0.6
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  divider: {
+    height: 1,
+    marginLeft: 56
+  }
+});
+
+// src/core/theme-context.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react3 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react2 = require("react");
+var PortalContext = (0, import_react2.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react5.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react6 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react6.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/menubox/menubox.tsx
+var MenuBox = ({
+  children,
+  size = "md",
+  radius = "lg",
+  themeColor = "default",
+  spacing = 0,
+  style,
+  backgroundColor
+}) => {
+  const theme = useXUITheme();
+  const itemCount = import_react7.Children.count(children);
+  const itemKeys = (0, import_react7.useMemo)(() => {
+    const keys = [];
+    import_react7.Children.forEach(children, (child) => {
+      if ((0, import_react7.isValidElement)(child)) {
+        const props = child.props;
+        if (props.itemKey) {
+          keys.push(props.itemKey);
+        }
+      }
+    });
+    return keys;
+  }, [children]);
+  const getItemIndex = (itemKey) => {
+    return itemKeys.indexOf(itemKey);
+  };
+  const bgColor = backgroundColor ?? theme.colors.default.background;
+  const contextValue = (0, import_react7.useMemo)(
+    () => ({
+      size,
+      radius,
+      themeColor,
+      backgroundColor: bgColor,
+      itemCount,
+      spacing,
+      getItemIndex
+    }),
+    [size, radius, themeColor, bgColor, itemCount, spacing, getItemIndex]
+  );
+  return /* @__PURE__ */ import_react7.default.createElement(MenuBoxContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, style] }, children));
+};
+
+// src/components/menubox/menubox-item.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/components/menubox/menubox.hook.ts
+var import_react8 = require("react");
+var useMenuBoxItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react8.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.xs,
+        descriptionSize: theme.fontSizes.xs
+      },
+      sm: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md,
+        titleSize: theme.fontSizes.sm,
+        descriptionSize: theme.fontSizes.xs
+      },
+      md: {
+        paddingVertical: theme.spacing.md,
+        paddingHorizontal: theme.spacing.md,
+        titleSize: theme.fontSizes.md,
+        descriptionSize: theme.fontSizes.sm
+      },
+      lg: {
+        paddingVertical: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+        titleSize: theme.fontSizes.lg,
+        descriptionSize: theme.fontSizes.md
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+};
+var useMenuBoxRadiusStyles = (radius, isFirst, isLast) => {
+  const theme = useXUITheme();
+  return (0, import_react8.useMemo)(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.md,
+      md: theme.borderRadius.lg,
+      lg: theme.borderRadius.xl,
+      full: theme.borderRadius.full
+    };
+    const r = radiusMap[radius];
+    return {
+      borderTopLeftRadius: isFirst ? r : 0,
+      borderTopRightRadius: isFirst ? r : 0,
+      borderBottomLeftRadius: isLast ? r : 0,
+      borderBottomRightRadius: isLast ? r : 0
+    };
+  }, [radius, isFirst, isLast, theme]);
+};
+
+// src/components/menubox/menubox.animation.ts
+var import_react_native6 = require("react-native");
+var runMenuBoxPressInAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native6.Animated.parallel([
+    import_react_native6.Animated.spring(animatedScale, {
+      toValue: 0.99,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native6.Animated.timing(animatedOpacity, {
+      toValue: 0.8,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runMenuBoxPressOutAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native6.Animated.parallel([
+    import_react_native6.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native6.Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/menubox/menubox-item.tsx
+var MenuBoxItem = (props) => {
+  const context = (0, import_react9.useContext)(MenuBoxContext);
+  const theme = useXUITheme();
+  const animatedScale = import_react9.default.useRef(new import_react_native7.Animated.Value(1)).current;
+  const animatedOpacity = import_react9.default.useRef(new import_react_native7.Animated.Value(1)).current;
+  const {
+    itemKey,
+    title,
+    description,
+    startContent,
+    endContent,
+    isDisabled = false,
+    customAppearance,
+    onPress
+  } = props;
+  const size = context?.size ?? "md";
+  const radius = context?.radius ?? "lg";
+  const itemBackgroundColor = context?.backgroundColor ?? (theme.mode === "dark" ? theme.colors.default.background : theme.colors.background);
+  const spacing = context?.spacing ?? 0;
+  const itemCount = context?.itemCount ?? 1;
+  const index = context?.getItemIndex(itemKey) ?? 0;
+  const isFirst = index === 0;
+  const isLast = index === itemCount - 1;
+  const sizeStyles = useMenuBoxItemSizeStyles(size);
+  const radiusStyles = useMenuBoxRadiusStyles(radius, isFirst, isLast);
+  const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
+  const descriptionColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground + "99";
+  const handlePress = () => {
+    if (isDisabled) {
+      return;
+    }
+    onPress?.({});
+  };
+  const handlePressIn = () => {
+    if (!isDisabled) {
+      runMenuBoxPressInAnimation(animatedScale, animatedOpacity);
+    }
+  };
+  const handlePressOut = () => {
+    if (!isDisabled) {
+      runMenuBoxPressOutAnimation(animatedScale, animatedOpacity);
+    }
+  };
+  const renderTitle = () => {
+    if (typeof title === "string" || typeof title === "number") {
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native7.Text,
+        {
+          style: [
+            styles.title,
+            { fontSize: sizeStyles.titleSize, color: titleColor },
+            customAppearance?.title
+          ],
+          numberOfLines: 1
+        },
+        title
+      );
+    }
+    return title;
+  };
+  const renderDescription = () => {
+    if (!description) return null;
+    if (typeof description === "string" || typeof description === "number") {
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native7.Text,
+        {
+          style: [
+            styles.description,
+            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
+            customAppearance?.description
+          ],
+          numberOfLines: 1
+        },
+        description
+      );
+    }
+    return description;
+  };
+  const content = /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.Animated.View,
+    {
+      style: [
+        styles.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor: itemBackgroundColor,
+          transform: [{ scale: animatedScale }],
+          opacity: animatedOpacity
+        },
+        radiusStyles,
+        isDisabled && styles.disabled,
+        customAppearance?.container
+      ]
+    },
+    startContent && /* @__PURE__ */ import_react9.default.createElement(import_react_native7.View, { style: customAppearance?.content }, startContent),
+    /* @__PURE__ */ import_react9.default.createElement(import_react_native7.View, { style: [styles.content, customAppearance?.content] }, renderTitle(), renderDescription()),
+    endContent && /* @__PURE__ */ import_react9.default.createElement(import_react_native7.View, { style: customAppearance?.content }, endContent)
+  );
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.Pressable,
+    {
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled,
+      style: [
+        radiusStyles,
+        { overflow: "hidden" },
+        !isLast && { marginBottom: spacing }
+      ]
+    },
+    content
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuBox,
+  MenuBoxItem
+});

package/dist/menubox/index.d.cts

@@ -0,0 +1,98 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { S as Size, R as Radius, T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type MenuBoxItemCustomAppearance = {
+    /**
+     * Custom styles for the item container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the content container
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for the description text
+     */
+    description?: TextStyle;
+};
+type MenuBoxItemProps = {
+    /**
+     * Unique key for the item
+     */
+    itemKey: string;
+    /**
+     * Title text for the MenuBoxItem
+     */
+    title: ReactNode;
+    /**
+     * Optional description text
+     */
+    description?: ReactNode;
+    /**
+     * Content to display at the start of the item (icon, avatar, etc.)
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the item (chevron, badge, etc.)
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom appearance styles for item parts
+     */
+    customAppearance?: MenuBoxItemCustomAppearance;
+    /**
+     * Callback fired when the item is pressed
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+};
+type MenuBoxProps = {
+    /**
+     * MenuBox items (MenuBoxItem components)
+     */
+    children: ReactNode;
+    /**
+     * Size of the menu items
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Border radius for the container and items
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Theme color for pressed states
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Spacing between menu items in pixels
+     * @default 0
+     */
+    spacing?: number;
+    /**
+     * Custom styles for the container
+     */
+    style?: ViewStyle;
+    /**
+     * Background color for MenuBox items
+     * Uses `theme.colors.default.background` by default
+     */
+    backgroundColor?: string;
+};
+
+declare const MenuBox: React.FC<MenuBoxProps>;
+
+declare const MenuBoxItem: React.FC<MenuBoxItemProps>;
+
+export { MenuBox, MenuBoxItem, type MenuBoxItemCustomAppearance, type MenuBoxItemProps, type MenuBoxProps };

package/dist/menubox/index.d.ts

@@ -0,0 +1,98 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { S as Size, R as Radius, T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type MenuBoxItemCustomAppearance = {
+    /**
+     * Custom styles for the item container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the content container
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for the description text
+     */
+    description?: TextStyle;
+};
+type MenuBoxItemProps = {
+    /**
+     * Unique key for the item
+     */
+    itemKey: string;
+    /**
+     * Title text for the MenuBoxItem
+     */
+    title: ReactNode;
+    /**
+     * Optional description text
+     */
+    description?: ReactNode;
+    /**
+     * Content to display at the start of the item (icon, avatar, etc.)
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the item (chevron, badge, etc.)
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom appearance styles for item parts
+     */
+    customAppearance?: MenuBoxItemCustomAppearance;
+    /**
+     * Callback fired when the item is pressed
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+};
+type MenuBoxProps = {
+    /**
+     * MenuBox items (MenuBoxItem components)
+     */
+    children: ReactNode;
+    /**
+     * Size of the menu items
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Border radius for the container and items
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Theme color for pressed states
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Spacing between menu items in pixels
+     * @default 0
+     */
+    spacing?: number;
+    /**
+     * Custom styles for the container
+     */
+    style?: ViewStyle;
+    /**
+     * Background color for MenuBox items
+     * Uses `theme.colors.default.background` by default
+     */
+    backgroundColor?: string;
+};
+
+declare const MenuBox: React.FC<MenuBoxProps>;
+
+declare const MenuBoxItem: React.FC<MenuBoxItemProps>;
+
+export { MenuBox, MenuBoxItem, type MenuBoxItemCustomAppearance, type MenuBoxItemProps, type MenuBoxProps };