@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/menubox/index.cjs

@@ -1,297 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/menubox/menubox.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/menubox/menubox-context.ts
-
-var MenuBoxContext = _react.createContext.call(void 0, null);
-
-// src/components/menubox/menubox.style.ts
-
-var styles = _reactnative.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/components/menubox/menubox.tsx
-var MenuBox = ({
-  children,
-  size = "md",
-  radius = "lg",
-  themeColor = "default",
-  spacing = 0,
-  style,
-  backgroundColor
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const itemCount = _react.Children.count(children);
-  const itemKeys = _react.useMemo.call(void 0, () => {
-    const keys = [];
-    _react.Children.forEach(children, (child) => {
-      if (_react.isValidElement.call(void 0, child)) {
-        const props = child.props;
-        if (props.itemKey) {
-          keys.push(props.itemKey);
-        }
-      }
-    });
-    return keys;
-  }, [children]);
-  const getItemIndex = (itemKey) => {
-    return itemKeys.indexOf(itemKey);
-  };
-  const bgColor = _nullishCoalesce(backgroundColor, () => ( theme.colors.default.container));
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      size,
-      radius,
-      themeColor,
-      backgroundColor: bgColor,
-      itemCount,
-      spacing,
-      getItemIndex
-    }),
-    [size, radius, themeColor, bgColor, itemCount, spacing, getItemIndex]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(MenuBoxContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, style] }, children));
-};
-
-// src/components/menubox/menubox-item.tsx
-
-
-
-// src/components/menubox/menubox.hook.ts
-
-var useMenuBoxItemSizeStyles = (size) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    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 runMenuBoxPressInAnimation = (animatedScale, animatedOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(animatedScale, {
-      toValue: 0.99,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    _reactnative.Animated.timing(animatedOpacity, {
-      toValue: 0.8,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runMenuBoxPressOutAnimation = (animatedScale, animatedOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(animatedScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    _reactnative.Animated.timing(animatedOpacity, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-
-// src/components/menubox/menubox-item.tsx
-var MenuBoxItem = (props) => {
-  const context = _react.useContext.call(void 0, MenuBoxContext);
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const {
-    itemKey,
-    title,
-    description,
-    startContent,
-    endContent,
-    isDisabled = false,
-    customAppearance,
-    onPress
-  } = props;
-  const size = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _ => _.size]), () => ( "md"));
-  const radius = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _2 => _2.radius]), () => ( "lg"));
-  const itemBackgroundColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _3 => _3.backgroundColor]), () => ( (theme.mode === "dark" ? theme.colors.default.container : theme.colors.background)));
-  const spacing = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _4 => _4.spacing]), () => ( 0));
-  const itemCount = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.itemCount]), () => ( 1));
-  const index = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.getItemIndex, 'call', _7 => _7(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;
-    }
-    _optionalChain([onPress, 'optionalCall', _8 => _8({})]);
-  };
-  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__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: [
-            styles.title,
-            { fontSize: sizeStyles.titleSize, color: titleColor },
-            _optionalChain([customAppearance, 'optionalAccess', _9 => _9.title])
-          ],
-          numberOfLines: 1
-        },
-        title
-      );
-    }
-    return title;
-  };
-  const renderDescription = () => {
-    if (!description) return null;
-    if (typeof description === "string" || typeof description === "number") {
-      return /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: [
-            styles.description,
-            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
-            _optionalChain([customAppearance, 'optionalAccess', _10 => _10.description])
-          ],
-          numberOfLines: 1
-        },
-        description
-      );
-    }
-    return description;
-  };
-  const content = /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Animated.View,
-    {
-      style: [
-        styles.item,
-        {
-          paddingVertical: sizeStyles.paddingVertical,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: itemBackgroundColor,
-          transform: [{ scale: animatedScale }],
-          opacity: animatedOpacity
-        },
-        radiusStyles,
-        isDisabled && styles.disabled,
-        _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])
-      ]
-    },
-    startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content]) }, startContent),
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, _optionalChain([customAppearance, 'optionalAccess', _13 => _13.content])] }, renderTitle(), renderDescription()),
-    endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _14 => _14.content]) }, endContent)
-  );
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: isDisabled,
-      style: [
-        radiusStyles,
-        { overflow: "hidden" },
-        !isLast && { marginBottom: spacing }
-      ]
-    },
-    content
-  );
-};
-
-
-
-exports.MenuBox = MenuBox; exports.MenuBoxItem = MenuBoxItem;

package/dist/menubox/index.d.cts

@@ -1,98 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { Size, Radius, ThemeColor } from '@xaui/core/types';
-
-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.container` 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

@@ -1,98 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { Size, Radius, ThemeColor } from '@xaui/core/types';
-
-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.container` 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 };