@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/fab-menu/index.js

@@ -1,330 +0,0 @@
-import {
-  Fab
-} from "../chunk-UU4HHBDN.js";
-import "../chunk-VSZEXOUN.js";
-import "../chunk-SHBDANQN.js";
-import {
-  Portal,
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/fab-menu/fab-menu.tsx
-import React from "react";
-import { Pressable, View, Animated as Animated2 } from "react-native";
-
-// src/components/fab-menu/fab-menu.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    position: "relative",
-    alignItems: "flex-end"
-  },
-  portalRoot: {
-    ...StyleSheet.absoluteFillObject
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject
-  },
-  overlayPressable: {
-    flex: 1
-  },
-  portalContent: {
-    ...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
-import { useMemo, useState, useCallback } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-function useFabMenuState(controlledExpanded, onToggle) {
-  const [internalExpanded, setInternalExpanded] = useState(false);
-  const isControlled = controlledExpanded !== void 0;
-  const expanded = isControlled ? controlledExpanded : internalExpanded;
-  const toggle = useCallback(() => {
-    const next = !expanded;
-    if (!isControlled) {
-      setInternalExpanded(next);
-    }
-    onToggle?.(next);
-  }, [expanded, isControlled, onToggle]);
-  const close = useCallback(() => {
-    if (!isControlled) {
-      setInternalExpanded(false);
-    }
-    onToggle?.(false);
-  }, [isControlled, onToggle]);
-  return { expanded, toggle, close };
-}
-function useFabMenuItemStyles(themeColor) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const itemStyles = useMemo(() => {
-    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 = useXUITheme();
-  return useMemo(() => {
-    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
-import { Animated } from "react-native";
-var runMenuExpandAnimation = (overlayOpacity, itemAnimations) => {
-  const itemSequence = itemAnimations.map(
-    (anim, index) => Animated.timing(anim, {
-      toValue: 1,
-      duration: 150,
-      delay: index * 50,
-      useNativeDriver: true
-    })
-  );
-  Animated.parallel([
-    Animated.timing(overlayOpacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    Animated.stagger(50, itemSequence)
-  ]).start();
-};
-var runMenuCollapseAnimation = (overlayOpacity, itemAnimations, onComplete) => {
-  const reversed = [...itemAnimations].reverse();
-  const itemSequence = reversed.map(
-    (anim, index) => Animated.timing(anim, {
-      toValue: 0,
-      duration: 120,
-      delay: index * 30,
-      useNativeDriver: true
-    })
-  );
-  Animated.parallel([
-    Animated.timing(overlayOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    Animated.stagger(30, itemSequence)
-  ]).start(onComplete);
-};
-var runFabRotateAnimation = (rotateValue, toExpanded) => {
-  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] = React.useState(expanded);
-  const childArray = React.Children.toArray(children);
-  const overlayOpacity = React.useRef(new Animated2.Value(expanded ? 1 : 0)).current;
-  const rotateValue = React.useRef(new Animated2.Value(expanded ? 1 : 0)).current;
-  const itemAnimationsRef = React.useRef(childArray.map(() => new Animated2.Value(0)));
-  const itemAnimations = itemAnimationsRef.current;
-  const prevExpanded = React.useRef(expanded);
-  React.useEffect(() => {
-    if (itemAnimations.length === childArray.length) return;
-    itemAnimationsRef.current = childArray.map(
-      (_, index) => itemAnimations[index] ?? new Animated2.Value(expanded ? 1 : 0)
-    );
-  }, [expanded, itemAnimations, childArray]);
-  React.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__ */ React.createElement(
-    Animated2.View,
-    {
-      style: {
-        alignSelf: "flex-end",
-        transform: [{ rotate: expandedIcon ? "0deg" : rotation }]
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Fab,
-      {
-        icon: currentIcon,
-        label,
-        themeColor,
-        variant,
-        size,
-        radius,
-        elevation,
-        onPress: toggle,
-        customAppearance: { fab: customAppearance?.fab }
-      }
-    )
-  );
-  const renderMenuItems = () => /* @__PURE__ */ React.createElement(View, { style: [styles.menuContainer, customAppearance?.menuContainer] }, childArray.map((child, index) => {
-    const childElement = child;
-    const isDisabled = childElement.props?.isDisabled;
-    return /* @__PURE__ */ React.createElement(
-      Animated2.View,
-      {
-        key: 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]
-                })
-              }
-            ]
-          },
-          customAppearance?.menuItem
-        ]
-      },
-      React.cloneElement(childElement, {
-        _onClose: close,
-        themeColor: childElement.props?.themeColor ?? themeColor
-      })
-    );
-  }));
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, isPortalVisible && /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(View, { style: styles.portalRoot }, showOverlay && /* @__PURE__ */ React.createElement(
-    Animated2.View,
-    {
-      style: [
-        styles.overlay,
-        { backgroundColor: overlayColor, opacity: overlayOpacity },
-        customAppearance?.overlay
-      ]
-    },
-    /* @__PURE__ */ React.createElement(Pressable, { style: styles.overlayPressable, onPress: close })
-  ), /* @__PURE__ */ React.createElement(View, { style: styles.portalContent }, renderMenuItems(), renderFabToggle()))), !isPortalVisible && renderFabToggle());
-};
-
-// src/components/fab-menu/fab-menu-item.tsx
-import React2 from "react";
-import { Pressable as Pressable2, Text } from "react-native";
-var FabMenuItem = ({
-  icon,
-  label,
-  themeColor = "primary",
-  onPress,
-  isDisabled,
-  _onClose
-}) => {
-  const itemStyles = useFabMenuItemStyles(themeColor);
-  const renderIcon = (menuIcon) => {
-    if (!React2.isValidElement(menuIcon)) return menuIcon;
-    return React2.cloneElement(
-      menuIcon,
-      { color: itemStyles.iconColor }
-    );
-  };
-  return /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      style: [
-        styles.menuItemChip,
-        {
-          backgroundColor: itemStyles.chipStyles.backgroundColor,
-          borderRadius: itemStyles.chipStyles.borderRadius
-        }
-      ],
-      onPress: (event) => {
-        if (isDisabled) return;
-        onPress?.(event);
-        _onClose?.();
-      },
-      disabled: isDisabled
-    },
-    renderIcon(icon),
-    /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        style: [
-          styles.menuItemLabel,
-          {
-            color: itemStyles.chipStyles.color,
-            fontSize: itemStyles.chipStyles.fontSize
-          }
-        ]
-      },
-      label
-    )
-  );
-};
-export {
-  FabMenu,
-  FabMenuItem
-};

package/dist/fab.type-CkUHmXU_.d.ts

@@ -1,86 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-import { B as ButtonRadius, E as ElevationLevel } from './button.type-j1ZdkkSl.js';
-
-type FabVariant = 'solid' | 'flat' | 'outlined';
-type FabSize = 'sm' | 'md' | 'lg';
-type FabCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the fab button
-     */
-    fab?: ViewStyle;
-};
-type FabProps = {
-    /**
-     * The icon to display in the FAB.
-     */
-    icon: ReactNode;
-    /**
-     * Optional text label for an extended FAB.
-     * When provided, the FAB renders as an extended FAB with icon + label.
-     */
-    label?: ReactNode;
-    /**
-     * The theme color of the FAB.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The visual variant of the FAB.
-     * @default 'solid'
-     */
-    variant?: FabVariant;
-    /**
-     * The size of the FAB.
-     * @default 'md'
-     */
-    size?: FabSize;
-    /**
-     * Custom border radius for the FAB.
-     * Overrides the default size-based border radius.
-     */
-    radius?: ButtonRadius;
-    /**
-     * Whether the FAB is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the FAB is in a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Custom appearance styles for FAB parts.
-     */
-    customAppearance?: FabCustomAppearance;
-    /**
-     * Callback fired when the FAB is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB is long pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB press starts.
-     */
-    onPressIn?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB press ends.
-     */
-    onPressOut?: (event: GestureResponderEvent) => void;
-};
-
-export type { FabProps as F, FabVariant as a, FabSize as b };

package/dist/fab.type-DN0vtAh6.d.cts

@@ -1,86 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-import { B as ButtonRadius, E as ElevationLevel } from './button.type-j1ZdkkSl.cjs';
-
-type FabVariant = 'solid' | 'flat' | 'outlined';
-type FabSize = 'sm' | 'md' | 'lg';
-type FabCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the fab button
-     */
-    fab?: ViewStyle;
-};
-type FabProps = {
-    /**
-     * The icon to display in the FAB.
-     */
-    icon: ReactNode;
-    /**
-     * Optional text label for an extended FAB.
-     * When provided, the FAB renders as an extended FAB with icon + label.
-     */
-    label?: ReactNode;
-    /**
-     * The theme color of the FAB.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The visual variant of the FAB.
-     * @default 'solid'
-     */
-    variant?: FabVariant;
-    /**
-     * The size of the FAB.
-     * @default 'md'
-     */
-    size?: FabSize;
-    /**
-     * Custom border radius for the FAB.
-     * Overrides the default size-based border radius.
-     */
-    radius?: ButtonRadius;
-    /**
-     * Whether the FAB is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the FAB is in a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Custom appearance styles for FAB parts.
-     */
-    customAppearance?: FabCustomAppearance;
-    /**
-     * Callback fired when the FAB is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB is long pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB press starts.
-     */
-    onPressIn?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the FAB press ends.
-     */
-    onPressOut?: (event: GestureResponderEvent) => void;
-};
-
-export type { FabProps as F, FabVariant as a, FabSize as b };