@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/fab-menu/index.cjs

@@ -1,330 +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; }
-
-var _chunkUGEINZM7cjs = require('../chunk-UGEINZM7.cjs');
-require('../chunk-YIEUN3G5.cjs');
-require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/fab-menu/fab-menu.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/fab-menu/fab-menu.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    position: "relative",
-    alignItems: "flex-end"
-  },
-  portalRoot: {
-    ..._reactnative.StyleSheet.absoluteFillObject
-  },
-  overlay: {
-    ..._reactnative.StyleSheet.absoluteFillObject
-  },
-  overlayPressable: {
-    flex: 1
-  },
-  portalContent: {
-    ..._reactnative.StyleSheet.absoluteFillObject,
-    justifyContent: "flex-end",
-    alignItems: "flex-end",
-    padding: 16
-  },
-  menuContainer: {
-    alignItems: "flex-end",
-    marginBottom: 16
-  },
-  menuItem: {
-    marginBottom: 12
-  },
-  menuItemChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 12,
-    paddingLeft: 16,
-    paddingRight: 20,
-    gap: 8
-  },
-  menuItemLabel: {
-    fontWeight: "500"
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/fab-menu/fab-menu.hook.ts
-
-var _core = require('@xaui/core');
-function useFabMenuState(controlledExpanded, onToggle) {
-  const [internalExpanded, setInternalExpanded] = _react.useState.call(void 0, false);
-  const isControlled = controlledExpanded !== void 0;
-  const expanded = isControlled ? controlledExpanded : internalExpanded;
-  const toggle = _react.useCallback.call(void 0, () => {
-    const next = !expanded;
-    if (!isControlled) {
-      setInternalExpanded(next);
-    }
-    _optionalChain([onToggle, 'optionalCall', _2 => _2(next)]);
-  }, [expanded, isControlled, onToggle]);
-  const close = _react.useCallback.call(void 0, () => {
-    if (!isControlled) {
-      setInternalExpanded(false);
-    }
-    _optionalChain([onToggle, 'optionalCall', _3 => _3(false)]);
-  }, [isControlled, onToggle]);
-  return { expanded, toggle, close };
-}
-function useFabMenuItemStyles(themeColor) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const itemStyles = _react.useMemo.call(void 0, () => {
-    const chipStyles = {
-      backgroundColor: colorScheme.container,
-      borderRadius: theme.borderRadius.full,
-      color: colorScheme.main,
-      fontSize: theme.fontSizes.md
-    };
-    const iconColor = colorScheme.main;
-    return { chipStyles, iconColor };
-  }, [colorScheme, theme]);
-  return itemStyles;
-}
-function useFabMenuOverlayColor() {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    return theme.mode === "dark" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)";
-  }, [theme.mode]);
-}
-
-// src/components/fab-menu/fab-menu.animation.ts
-
-var runMenuExpandAnimation = (overlayOpacity, itemAnimations) => {
-  const itemSequence = itemAnimations.map(
-    (anim, index) => _reactnative.Animated.timing(anim, {
-      toValue: 1,
-      duration: 150,
-      delay: index * 50,
-      useNativeDriver: true
-    })
-  );
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(overlayOpacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.stagger(50, itemSequence)
-  ]).start();
-};
-var runMenuCollapseAnimation = (overlayOpacity, itemAnimations, onComplete) => {
-  const reversed = [...itemAnimations].reverse();
-  const itemSequence = reversed.map(
-    (anim, index) => _reactnative.Animated.timing(anim, {
-      toValue: 0,
-      duration: 120,
-      delay: index * 30,
-      useNativeDriver: true
-    })
-  );
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(overlayOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.stagger(30, itemSequence)
-  ]).start(onComplete);
-};
-var runFabRotateAnimation = (rotateValue, toExpanded) => {
-  _reactnative.Animated.spring(rotateValue, {
-    toValue: toExpanded ? 1 : 0,
-    useNativeDriver: true,
-    speed: 20,
-    bounciness: 0
-  }).start();
-};
-
-// src/components/fab-menu/fab-menu.tsx
-var FabMenu = ({
-  icon,
-  label,
-  expandedIcon,
-  children,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius,
-  elevation = 0,
-  isExpanded: controlledExpanded,
-  onToggle,
-  showOverlay = true,
-  customAppearance
-}) => {
-  const { expanded, toggle, close } = useFabMenuState(controlledExpanded, onToggle);
-  const overlayColor = useFabMenuOverlayColor();
-  const [isPortalVisible, setIsPortalVisible] = _react2.default.useState(expanded);
-  const childArray = _react2.default.Children.toArray(children);
-  const overlayOpacity = _react2.default.useRef(new _reactnative.Animated.Value(expanded ? 1 : 0)).current;
-  const rotateValue = _react2.default.useRef(new _reactnative.Animated.Value(expanded ? 1 : 0)).current;
-  const itemAnimationsRef = _react2.default.useRef(childArray.map(() => new _reactnative.Animated.Value(0)));
-  const itemAnimations = itemAnimationsRef.current;
-  const prevExpanded = _react2.default.useRef(expanded);
-  _react2.default.useEffect(() => {
-    if (itemAnimations.length === childArray.length) return;
-    itemAnimationsRef.current = childArray.map(
-      (_, index) => _nullishCoalesce(itemAnimations[index], () => ( new _reactnative.Animated.Value(expanded ? 1 : 0)))
-    );
-  }, [expanded, itemAnimations, childArray]);
-  _react2.default.useEffect(() => {
-    if (prevExpanded.current === expanded) return;
-    prevExpanded.current = expanded;
-    if (expanded) {
-      setIsPortalVisible(true);
-      runMenuExpandAnimation(overlayOpacity, itemAnimations);
-      runFabRotateAnimation(rotateValue, true);
-    } else {
-      runMenuCollapseAnimation(overlayOpacity, itemAnimations, () => {
-        setIsPortalVisible(false);
-      });
-      runFabRotateAnimation(rotateValue, false);
-    }
-  }, [expanded, overlayOpacity, itemAnimations, rotateValue]);
-  const rotation = rotateValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "45deg"]
-  });
-  const currentIcon = expanded && expandedIcon ? expandedIcon : icon;
-  const renderFabToggle = () => /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Animated.View,
-    {
-      style: {
-        alignSelf: "flex-end",
-        transform: [{ rotate: expandedIcon ? "0deg" : rotation }]
-      }
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _chunkUGEINZM7cjs.Fab,
-      {
-        icon: currentIcon,
-        label,
-        themeColor,
-        variant,
-        size,
-        radius,
-        elevation,
-        onPress: toggle,
-        customAppearance: { fab: _optionalChain([customAppearance, 'optionalAccess', _4 => _4.fab]) }
-      }
-    )
-  );
-  const renderMenuItems = () => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.menuContainer, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.menuContainer])] }, childArray.map((child, index) => {
-    const childElement = child;
-    const isDisabled = _optionalChain([childElement, 'access', _6 => _6.props, 'optionalAccess', _7 => _7.isDisabled]);
-    return /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        key: _nullishCoalesce(childElement.key, () => ( index)),
-        style: [
-          styles.menuItem,
-          isDisabled && styles.disabled,
-          {
-            opacity: itemAnimations[index],
-            transform: [
-              {
-                translateY: itemAnimations[index].interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [20, 0]
-                })
-              },
-              {
-                scale: itemAnimations[index].interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.8, 1]
-                })
-              }
-            ]
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _8 => _8.menuItem])
-        ]
-      },
-      _react2.default.cloneElement(childElement, {
-        _onClose: close,
-        themeColor: _nullishCoalesce(_optionalChain([childElement, 'access', _9 => _9.props, 'optionalAccess', _10 => _10.themeColor]), () => ( themeColor))
-      })
-    );
-  }));
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])] }, isPortalVisible && /* @__PURE__ */ _react2.default.createElement(_chunk7UFBLUMVcjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.portalRoot }, showOverlay && /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Animated.View,
-    {
-      style: [
-        styles.overlay,
-        { backgroundColor: overlayColor, opacity: overlayOpacity },
-        _optionalChain([customAppearance, 'optionalAccess', _12 => _12.overlay])
-      ]
-    },
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { style: styles.overlayPressable, onPress: close })
-  ), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.portalContent }, renderMenuItems(), renderFabToggle()))), !isPortalVisible && renderFabToggle());
-};
-
-// src/components/fab-menu/fab-menu-item.tsx
-
-
-var FabMenuItem = ({
-  icon,
-  label,
-  themeColor = "primary",
-  onPress,
-  isDisabled,
-  _onClose
-}) => {
-  const itemStyles = useFabMenuItemStyles(themeColor);
-  const renderIcon = (menuIcon) => {
-    if (!_react2.default.isValidElement(menuIcon)) return menuIcon;
-    return _react2.default.cloneElement(
-      menuIcon,
-      { color: itemStyles.iconColor }
-    );
-  };
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      style: [
-        styles.menuItemChip,
-        {
-          backgroundColor: itemStyles.chipStyles.backgroundColor,
-          borderRadius: itemStyles.chipStyles.borderRadius
-        }
-      ],
-      onPress: (event) => {
-        if (isDisabled) return;
-        _optionalChain([onPress, 'optionalCall', _13 => _13(event)]);
-        _optionalChain([_onClose, 'optionalCall', _14 => _14()]);
-      },
-      disabled: isDisabled
-    },
-    renderIcon(icon),
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Text,
-      {
-        style: [
-          styles.menuItemLabel,
-          {
-            color: itemStyles.chipStyles.color,
-            fontSize: itemStyles.chipStyles.fontSize
-          }
-        ]
-      },
-      label
-    )
-  );
-};
-
-
-
-exports.FabMenu = FabMenu; exports.FabMenuItem = FabMenuItem;

package/dist/fab-menu/index.d.cts

@@ -1,125 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-import { a as FabVariant, b as FabSize } from '../fab.type-DN0vtAh6.cjs';
-import { B as ButtonRadius, E as ElevationLevel } from '../button.type-j1ZdkkSl.cjs';
-
-type FabMenuItemProps = {
-    /**
-     * The icon to display in the menu item.
-     */
-    icon: ReactNode;
-    /**
-     * The text label for the menu item.
-     */
-    label: string;
-    /**
-     * The theme color for the menu item chip.
-     * Inherits from parent FabMenu themeColor if not specified.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Callback fired when the menu item is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Whether the menu item is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * @internal Injected by FabMenu to close the menu on item press.
-     */
-    _onClose?: () => void;
-};
-type FabMenuCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the toggle FAB
-     */
-    fab?: ViewStyle;
-    /**
-     * Custom styles for each menu item row
-     */
-    menuItem?: ViewStyle;
-    /**
-     * Custom styles for the menu items container
-     */
-    menuContainer?: ViewStyle;
-    /**
-     * Custom styles for the overlay/backdrop
-     */
-    overlay?: ViewStyle;
-};
-type FabMenuProps = {
-    /**
-     * The icon to display when the FAB menu is collapsed.
-     */
-    icon: ReactNode;
-    /**
-     * Optional text label for the toggle FAB (extended FAB).
-     */
-    label?: ReactNode;
-    /**
-     * The icon to display when the FAB menu is expanded.
-     * Defaults to a close/X appearance if not provided.
-     */
-    expandedIcon?: ReactNode;
-    /**
-     * FabMenuItem children to display when expanded.
-     */
-    children: ReactNode;
-    /**
-     * The theme color of the toggle FAB.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The visual variant of the toggle FAB.
-     * @default 'solid'
-     */
-    variant?: FabVariant;
-    /**
-     * The size of the toggle FAB.
-     * @default 'md'
-     */
-    size?: FabSize;
-    /**
-     * Custom border radius for the toggle FAB.
-     * Overrides the default size-based border radius.
-     */
-    radius?: ButtonRadius;
-    /**
-     * Android elevation level for the toggle FAB from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Whether the menu is expanded.
-     * When provided, the component becomes controlled.
-     */
-    isExpanded?: boolean;
-    /**
-     * Callback fired when the menu toggle state changes.
-     */
-    onToggle?: (expanded: boolean) => void;
-    /**
-     * Whether to show an overlay/backdrop when expanded.
-     * @default true
-     */
-    showOverlay?: boolean;
-    /**
-     * Custom appearance styles for FAB menu parts.
-     */
-    customAppearance?: FabMenuCustomAppearance;
-};
-
-declare const FabMenu: React.FC<FabMenuProps>;
-
-declare const FabMenuItem: React.FC<FabMenuItemProps>;
-
-export { FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps };

package/dist/fab-menu/index.d.ts

@@ -1,125 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-import { a as FabVariant, b as FabSize } from '../fab.type-CkUHmXU_.js';
-import { B as ButtonRadius, E as ElevationLevel } from '../button.type-j1ZdkkSl.js';
-
-type FabMenuItemProps = {
-    /**
-     * The icon to display in the menu item.
-     */
-    icon: ReactNode;
-    /**
-     * The text label for the menu item.
-     */
-    label: string;
-    /**
-     * The theme color for the menu item chip.
-     * Inherits from parent FabMenu themeColor if not specified.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Callback fired when the menu item is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Whether the menu item is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * @internal Injected by FabMenu to close the menu on item press.
-     */
-    _onClose?: () => void;
-};
-type FabMenuCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the toggle FAB
-     */
-    fab?: ViewStyle;
-    /**
-     * Custom styles for each menu item row
-     */
-    menuItem?: ViewStyle;
-    /**
-     * Custom styles for the menu items container
-     */
-    menuContainer?: ViewStyle;
-    /**
-     * Custom styles for the overlay/backdrop
-     */
-    overlay?: ViewStyle;
-};
-type FabMenuProps = {
-    /**
-     * The icon to display when the FAB menu is collapsed.
-     */
-    icon: ReactNode;
-    /**
-     * Optional text label for the toggle FAB (extended FAB).
-     */
-    label?: ReactNode;
-    /**
-     * The icon to display when the FAB menu is expanded.
-     * Defaults to a close/X appearance if not provided.
-     */
-    expandedIcon?: ReactNode;
-    /**
-     * FabMenuItem children to display when expanded.
-     */
-    children: ReactNode;
-    /**
-     * The theme color of the toggle FAB.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The visual variant of the toggle FAB.
-     * @default 'solid'
-     */
-    variant?: FabVariant;
-    /**
-     * The size of the toggle FAB.
-     * @default 'md'
-     */
-    size?: FabSize;
-    /**
-     * Custom border radius for the toggle FAB.
-     * Overrides the default size-based border radius.
-     */
-    radius?: ButtonRadius;
-    /**
-     * Android elevation level for the toggle FAB from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Whether the menu is expanded.
-     * When provided, the component becomes controlled.
-     */
-    isExpanded?: boolean;
-    /**
-     * Callback fired when the menu toggle state changes.
-     */
-    onToggle?: (expanded: boolean) => void;
-    /**
-     * Whether to show an overlay/backdrop when expanded.
-     * @default true
-     */
-    showOverlay?: boolean;
-    /**
-     * Custom appearance styles for FAB menu parts.
-     */
-    customAppearance?: FabMenuCustomAppearance;
-};
-
-declare const FabMenu: React.FC<FabMenuProps>;
-
-declare const FabMenuItem: React.FC<FabMenuItemProps>;
-
-export { FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps };