@xaui/native 0.0.26 → 0.0.28

package/dist/snackbar/index.d.ts

@@ -0,0 +1,175 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+type SnackbarPosition = 'top' | 'bottom';
+type SnackbarCustomAppearance = {
+    /**
+     * Custom style for the snackbar surface.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for the message text.
+     */
+    message?: TextStyle;
+    /**
+     * Custom style for the action label text.
+     */
+    action?: TextStyle;
+    /**
+     * Custom style for the close affordance button.
+     */
+    closeButton?: ViewStyle;
+};
+type SnackbarBaseProps = {
+    /**
+     * Message content shown inside the snackbar.
+     */
+    message: ReactNode;
+    /**
+     * Action content displayed at the end of the snackbar.
+     */
+    actionLabel?: ReactNode;
+    /**
+     * Callback fired when the action is pressed.
+     */
+    onActionPress?: () => void;
+    /**
+     * If true, pressing the action also dismisses the snackbar.
+     * @default true
+     */
+    closeOnActionPress?: boolean;
+    /**
+     * If true, shows the close affordance icon button.
+     * @default false
+     */
+    showCloseAffordance?: boolean;
+    /**
+     * Theme color for the snackbar. The default uses Material 3 inverse surface styling.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Number of lines for the message text.
+     * @default 2
+     */
+    numberOfLines?: number;
+    /**
+     * Custom appearance styles for snackbar parts.
+     */
+    customAppearance?: SnackbarCustomAppearance;
+};
+type SnackbarProps = SnackbarBaseProps & {
+    /**
+     * Controls snackbar visibility. If omitted, snackbar is shown by default.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Duration in milliseconds before auto-dismiss. Set to 0 or a negative value to disable.
+     * @default 4000
+     */
+    duration?: number;
+    /**
+     * Callback fired when the snackbar is dismissed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when visibility changes.
+     */
+    onVisibleChange?: (isVisible: boolean) => void;
+    /**
+     * Position of the snackbar on screen.
+     * @default 'bottom'
+     */
+    position?: SnackbarPosition;
+    /**
+     * Horizontal inset from screen edges.
+     * @default 16
+     */
+    insetHorizontal?: number;
+    /**
+     * Vertical inset from screen edge according to position.
+     * @default 16
+     */
+    insetVertical?: number;
+    /**
+     * Maximum width of the snackbar surface.
+     * @default 640
+     */
+    maxWidth?: number;
+    /**
+     * Render snackbar in a portal overlay.
+     * @default true
+     */
+    usePortal?: boolean;
+};
+type SnackbarItem = SnackbarBaseProps & {
+    /**
+     * Unique identifier for the snackbar item in the stack.
+     */
+    id: string;
+    /**
+     * Item-specific auto-dismiss duration in milliseconds.
+     * Set to 0 or a negative value to disable.
+     */
+    duration?: number;
+};
+type SnackbarStackProps = {
+    /**
+     * Snackbar items to render in a vertical stack.
+     */
+    items: SnackbarItem[];
+    /**
+     * Called when an item requests dismissal.
+     */
+    onDismiss?: (id: string) => void;
+    /**
+     * Position of the stacked snackbars on screen.
+     * @default 'bottom'
+     */
+    position?: SnackbarPosition;
+    /**
+     * Space between stacked snackbars.
+     * @default 8
+     */
+    spacing?: number;
+    /**
+     * Horizontal inset from screen edges.
+     * @default 16
+     */
+    insetHorizontal?: number;
+    /**
+     * Vertical inset from screen edge according to position.
+     * @default 16
+     */
+    insetVertical?: number;
+    /**
+     * Maximum width of each snackbar surface.
+     * @default 640
+     */
+    maxWidth?: number;
+    /**
+     * Default auto-dismiss duration for items without `duration`.
+     * @default 4000
+     */
+    defaultDuration?: number;
+    /**
+     * Render stack in a portal overlay.
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * Custom styles for stack containers.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+        content?: ViewStyle;
+    };
+};
+
+declare const SnackbarStack: React.FC<SnackbarStackProps>;
+declare const Snackbar: React.FC<SnackbarProps>;
+
+export { Snackbar, type SnackbarItem, type SnackbarPosition, type SnackbarProps, SnackbarStack, type SnackbarStackProps };

package/dist/snackbar/index.js

@@ -0,0 +1,420 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  Portal,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/snackbar/snackbar.tsx
+import React, {
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import { Animated, Easing, Pressable, Text, View } from "react-native";
+
+// src/components/snackbar/snackbar.style.ts
+import { StyleSheet } from "react-native";
+var SNACKBAR_DEFAULT_DURATION = 4e3;
+var SNACKBAR_DEFAULT_HORIZONTAL_INSET = 16;
+var SNACKBAR_DEFAULT_VERTICAL_INSET = 16;
+var SNACKBAR_DEFAULT_SPACING = 8;
+var SNACKBAR_DEFAULT_MAX_WIDTH = 640;
+var styles = StyleSheet.create({
+  stackContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 999
+  },
+  stackContent: {
+    width: "100%",
+    alignSelf: "center"
+  },
+  surface: {
+    width: "100%",
+    minHeight: 48,
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 16,
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+    elevation: 4
+  },
+  surfaceWithoutActions: {
+    paddingRight: 16
+  },
+  messageWrapper: {
+    flex: 1,
+    minWidth: 0,
+    justifyContent: "center",
+    paddingRight: 8
+  },
+  messageWrapperMultiline: {
+    paddingVertical: 14
+  },
+  messageText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    fontWeight: "400"
+  },
+  trailingActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  actionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 9999,
+    minHeight: 40,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  actionText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    fontWeight: "500"
+  },
+  closeButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 9999,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+// src/components/snackbar/snackbar.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+var M3_LIGHT_INVERSE_SURFACE = "#322F35";
+var M3_LIGHT_INVERSE_ON_SURFACE = "#F5EFF7";
+var M3_LIGHT_INVERSE_PRIMARY = "#D0BCFF";
+var M3_DARK_INVERSE_SURFACE = "#E6E1E5";
+var M3_DARK_INVERSE_ON_SURFACE = "#322F35";
+var M3_DARK_INVERSE_PRIMARY = "#6750A4";
+var useSnackbarColors = (themeColor = "default") => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  return useMemo(() => {
+    if (safeThemeColor === "default") {
+      const isDarkMode = theme.mode === "dark";
+      const containerColor = isDarkMode ? M3_DARK_INVERSE_SURFACE : M3_LIGHT_INVERSE_SURFACE;
+      const textColor = isDarkMode ? M3_DARK_INVERSE_ON_SURFACE : M3_LIGHT_INVERSE_ON_SURFACE;
+      const actionColor = isDarkMode ? M3_DARK_INVERSE_PRIMARY : M3_LIGHT_INVERSE_PRIMARY;
+      return {
+        containerColor,
+        textColor,
+        actionColor,
+        pressedOverlayColor: withOpacity(textColor, 0.16)
+      };
+    }
+    const colorScheme = theme.colors[safeThemeColor];
+    return {
+      containerColor: colorScheme.main,
+      textColor: colorScheme.foreground,
+      actionColor: withOpacity(colorScheme.foreground, 0.82),
+      pressedOverlayColor: withOpacity(colorScheme.foreground, 0.16)
+    };
+  }, [safeThemeColor, theme]);
+};
+var useSnackbarStackPositionStyles = (position, insetHorizontal, insetVertical, maxWidth) => {
+  return useMemo(
+    () => ({
+      container: position === "top" ? {
+        top: insetVertical,
+        paddingHorizontal: insetHorizontal
+      } : {
+        bottom: insetVertical,
+        paddingHorizontal: insetHorizontal
+      },
+      content: {
+        maxWidth
+      }
+    }),
+    [position, insetHorizontal, insetVertical, maxWidth]
+  );
+};
+
+// src/components/snackbar/snackbar.tsx
+import { CloseIcon } from "@xaui/icons/close";
+var ENTER_ANIMATION_DURATION = 220;
+var EXIT_ANIMATION_DURATION = 180;
+var ENTER_INITIAL_SCALE = 0.92;
+var SnackbarSurface = ({ item, duration, onDismiss }) => {
+  const {
+    id,
+    message,
+    actionLabel,
+    onActionPress,
+    closeOnActionPress = true,
+    showCloseAffordance = false,
+    themeColor = "default",
+    numberOfLines = 2,
+    customAppearance
+  } = item;
+  const { containerColor, textColor, actionColor, pressedOverlayColor } = useSnackbarColors(themeColor);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(ENTER_INITIAL_SCALE)).current;
+  const exitAnimationStartedRef = useRef(false);
+  const dismissTimeoutRef = useRef(null);
+  const clearDismissTimer = useCallback(() => {
+    if (!dismissTimeoutRef.current) return;
+    clearTimeout(dismissTimeoutRef.current);
+    dismissTimeoutRef.current = null;
+  }, []);
+  const runExitAnimation = useCallback(() => {
+    if (exitAnimationStartedRef.current) return;
+    exitAnimationStartedRef.current = true;
+    clearDismissTimer();
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: EXIT_ANIMATION_DURATION,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      }),
+      Animated.timing(scale, {
+        toValue: ENTER_INITIAL_SCALE,
+        duration: EXIT_ANIMATION_DURATION,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (!finished) return;
+      onDismiss?.(id);
+    });
+  }, [clearDismissTimer, id, onDismiss, opacity, scale]);
+  useEffect(() => {
+    opacity.setValue(0);
+    scale.setValue(ENTER_INITIAL_SCALE);
+    exitAnimationStartedRef.current = false;
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: ENTER_ANIMATION_DURATION,
+        easing: Easing.bezier(0.2, 0, 0, 1),
+        useNativeDriver: true
+      }),
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: ENTER_ANIMATION_DURATION,
+        easing: Easing.bezier(0.2, 0, 0, 1),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [opacity, scale]);
+  useEffect(() => {
+    clearDismissTimer();
+    if (duration <= 0) return;
+    dismissTimeoutRef.current = globalThis.setTimeout(() => {
+      runExitAnimation();
+    }, duration);
+    return clearDismissTimer;
+  }, [clearDismissTimer, duration, runExitAnimation]);
+  useEffect(() => {
+    return () => {
+      clearDismissTimer();
+      opacity.stopAnimation();
+      scale.stopAnimation();
+    };
+  }, [clearDismissTimer, opacity, scale]);
+  const handleDismiss = useCallback(() => {
+    runExitAnimation();
+  }, [runExitAnimation]);
+  const handleActionPress = useCallback(() => {
+    onActionPress?.();
+    if (closeOnActionPress) {
+      handleDismiss();
+    }
+  }, [onActionPress, closeOnActionPress, handleDismiss]);
+  const messageNode = useMemo2(() => {
+    if (typeof message === "string" || typeof message === "number") {
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.messageText, { color: textColor }, customAppearance?.message],
+          numberOfLines
+        },
+        message
+      );
+    }
+    return message;
+  }, [customAppearance?.message, message, numberOfLines, textColor]);
+  const actionNode = useMemo2(() => {
+    if (actionLabel === null || actionLabel === void 0) return null;
+    if (typeof actionLabel === "string" || typeof actionLabel === "number") {
+      return /* @__PURE__ */ React.createElement(Text, { style: [styles.actionText, { color: actionColor }, customAppearance?.action] }, actionLabel);
+    }
+    if (isValidElement(actionLabel)) {
+      return actionLabel;
+    }
+    return null;
+  }, [actionColor, actionLabel, customAppearance?.action]);
+  const hasActions = Boolean(actionNode || showCloseAffordance);
+  const isMultiline = numberOfLines > 1;
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.surface,
+        { backgroundColor: containerColor },
+        !hasActions && styles.surfaceWithoutActions,
+        customAppearance?.container,
+        {
+          opacity,
+          transform: [{ scale }]
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.messageWrapper,
+          isMultiline && styles.messageWrapperMultiline
+        ]
+      },
+      messageNode
+    ),
+    hasActions && /* @__PURE__ */ React.createElement(View, { style: styles.trailingActions }, actionNode && /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        onPress: handleActionPress,
+        style: ({ pressed }) => [
+          styles.actionButton,
+          pressed && { backgroundColor: pressedOverlayColor }
+        ]
+      },
+      actionNode
+    ), showCloseAffordance && /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close snackbar",
+        onPress: handleDismiss,
+        style: ({ pressed }) => [
+          styles.closeButton,
+          pressed && { backgroundColor: pressedOverlayColor },
+          customAppearance?.closeButton
+        ]
+      },
+      /* @__PURE__ */ React.createElement(CloseIcon, { size: 20, color: textColor })
+    ))
+  );
+};
+var SnackbarStack = ({
+  items,
+  onDismiss,
+  position = "bottom",
+  spacing = SNACKBAR_DEFAULT_SPACING,
+  insetHorizontal = SNACKBAR_DEFAULT_HORIZONTAL_INSET,
+  insetVertical = SNACKBAR_DEFAULT_VERTICAL_INSET,
+  maxWidth = SNACKBAR_DEFAULT_MAX_WIDTH,
+  defaultDuration = SNACKBAR_DEFAULT_DURATION,
+  usePortal = true,
+  customAppearance
+}) => {
+  const stackPositionStyles = useSnackbarStackPositionStyles(
+    position,
+    insetHorizontal,
+    insetVertical,
+    maxWidth
+  );
+  if (!items.length) return null;
+  const itemsToRender = position === "top" ? [...items].reverse() : items;
+  const stackNode = /* @__PURE__ */ React.createElement(
+    View,
+    {
+      pointerEvents: "box-none",
+      style: [
+        styles.stackContainer,
+        stackPositionStyles.container,
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        pointerEvents: "box-none",
+        style: [
+          styles.stackContent,
+          stackPositionStyles.content,
+          { gap: spacing },
+          customAppearance?.content
+        ]
+      },
+      itemsToRender.map((item) => /* @__PURE__ */ React.createElement(
+        SnackbarSurface,
+        {
+          key: item.id,
+          item,
+          duration: item.duration ?? defaultDuration,
+          onDismiss
+        }
+      ))
+    )
+  );
+  return usePortal ? /* @__PURE__ */ React.createElement(Portal, null, stackNode) : stackNode;
+};
+var Snackbar = ({
+  isVisible,
+  duration = SNACKBAR_DEFAULT_DURATION,
+  onClose,
+  onVisibleChange,
+  position = "bottom",
+  insetHorizontal = SNACKBAR_DEFAULT_HORIZONTAL_INSET,
+  insetVertical = SNACKBAR_DEFAULT_VERTICAL_INSET,
+  maxWidth = SNACKBAR_DEFAULT_MAX_WIDTH,
+  usePortal = true,
+  ...itemProps
+}) => {
+  const [internalVisible, setInternalVisible] = useState(isVisible ?? true);
+  const isControlled = typeof isVisible === "boolean";
+  const visible = isControlled ? isVisible : internalVisible;
+  const idRef = useRef(`snackbar-${Date.now()}-${Math.random().toString(16).slice(2)}`);
+  const dismiss = useCallback(() => {
+    if (!isControlled) {
+      setInternalVisible(false);
+    }
+    onVisibleChange?.(false);
+    onClose?.();
+  }, [isControlled, onClose, onVisibleChange]);
+  const items = useMemo2(
+    () => visible ? [
+      {
+        id: idRef.current,
+        duration,
+        ...itemProps
+      }
+    ] : [],
+    [duration, itemProps, visible]
+  );
+  return /* @__PURE__ */ React.createElement(
+    SnackbarStack,
+    {
+      items,
+      onDismiss: dismiss,
+      position,
+      insetHorizontal,
+      insetVertical,
+      maxWidth,
+      defaultDuration: duration,
+      usePortal
+    }
+  );
+};
+export {
+  Snackbar,
+  SnackbarStack
+};