@xaui/native 0.0.26 → 0.0.28

package/dist/snackbar/index.cjs

@@ -0,0 +1,420 @@
+"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-HSPTLUFA.cjs');
+
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/snackbar/snackbar.tsx
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+
+// src/components/snackbar/snackbar.style.ts
+
+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 = _reactnative.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
+
+var _core = require('@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 = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+  return _react.useMemo.call(void 0, () => {
+    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: _core.withOpacity.call(void 0, textColor, 0.16)
+      };
+    }
+    const colorScheme = theme.colors[safeThemeColor];
+    return {
+      containerColor: colorScheme.main,
+      textColor: colorScheme.foreground,
+      actionColor: _core.withOpacity.call(void 0, colorScheme.foreground, 0.82),
+      pressedOverlayColor: _core.withOpacity.call(void 0, colorScheme.foreground, 0.16)
+    };
+  }, [safeThemeColor, theme]);
+};
+var useSnackbarStackPositionStyles = (position, insetHorizontal, insetVertical, maxWidth) => {
+  return _react.useMemo.call(void 0, 
+    () => ({
+      container: position === "top" ? {
+        top: insetVertical,
+        paddingHorizontal: insetHorizontal
+      } : {
+        bottom: insetVertical,
+        paddingHorizontal: insetHorizontal
+      },
+      content: {
+        maxWidth
+      }
+    }),
+    [position, insetHorizontal, insetVertical, maxWidth]
+  );
+};
+
+// src/components/snackbar/snackbar.tsx
+var _close = require('@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 = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
+  const scale = _react.useRef.call(void 0, new _reactnative.Animated.Value(ENTER_INITIAL_SCALE)).current;
+  const exitAnimationStartedRef = _react.useRef.call(void 0, false);
+  const dismissTimeoutRef = _react.useRef.call(void 0, null);
+  const clearDismissTimer = _react.useCallback.call(void 0, () => {
+    if (!dismissTimeoutRef.current) return;
+    clearTimeout(dismissTimeoutRef.current);
+    dismissTimeoutRef.current = null;
+  }, []);
+  const runExitAnimation = _react.useCallback.call(void 0, () => {
+    if (exitAnimationStartedRef.current) return;
+    exitAnimationStartedRef.current = true;
+    clearDismissTimer();
+    _reactnative.Animated.parallel([
+      _reactnative.Animated.timing(opacity, {
+        toValue: 0,
+        duration: EXIT_ANIMATION_DURATION,
+        easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      }),
+      _reactnative.Animated.timing(scale, {
+        toValue: ENTER_INITIAL_SCALE,
+        duration: EXIT_ANIMATION_DURATION,
+        easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (!finished) return;
+      _optionalChain([onDismiss, 'optionalCall', _ => _(id)]);
+    });
+  }, [clearDismissTimer, id, onDismiss, opacity, scale]);
+  _react.useEffect.call(void 0, () => {
+    opacity.setValue(0);
+    scale.setValue(ENTER_INITIAL_SCALE);
+    exitAnimationStartedRef.current = false;
+    _reactnative.Animated.parallel([
+      _reactnative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: ENTER_ANIMATION_DURATION,
+        easing: _reactnative.Easing.bezier(0.2, 0, 0, 1),
+        useNativeDriver: true
+      }),
+      _reactnative.Animated.timing(scale, {
+        toValue: 1,
+        duration: ENTER_ANIMATION_DURATION,
+        easing: _reactnative.Easing.bezier(0.2, 0, 0, 1),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [opacity, scale]);
+  _react.useEffect.call(void 0, () => {
+    clearDismissTimer();
+    if (duration <= 0) return;
+    dismissTimeoutRef.current = globalThis.setTimeout(() => {
+      runExitAnimation();
+    }, duration);
+    return clearDismissTimer;
+  }, [clearDismissTimer, duration, runExitAnimation]);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      clearDismissTimer();
+      opacity.stopAnimation();
+      scale.stopAnimation();
+    };
+  }, [clearDismissTimer, opacity, scale]);
+  const handleDismiss = _react.useCallback.call(void 0, () => {
+    runExitAnimation();
+  }, [runExitAnimation]);
+  const handleActionPress = _react.useCallback.call(void 0, () => {
+    _optionalChain([onActionPress, 'optionalCall', _2 => _2()]);
+    if (closeOnActionPress) {
+      handleDismiss();
+    }
+  }, [onActionPress, closeOnActionPress, handleDismiss]);
+  const messageNode = _react.useMemo.call(void 0, () => {
+    if (typeof message === "string" || typeof message === "number") {
+      return /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Text,
+        {
+          style: [styles.messageText, { color: textColor }, _optionalChain([customAppearance, 'optionalAccess', _3 => _3.message])],
+          numberOfLines
+        },
+        message
+      );
+    }
+    return message;
+  }, [_optionalChain([customAppearance, 'optionalAccess', _4 => _4.message]), message, numberOfLines, textColor]);
+  const actionNode = _react.useMemo.call(void 0, () => {
+    if (actionLabel === null || actionLabel === void 0) return null;
+    if (typeof actionLabel === "string" || typeof actionLabel === "number") {
+      return /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.actionText, { color: actionColor }, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.action])] }, actionLabel);
+    }
+    if (_react.isValidElement.call(void 0, actionLabel)) {
+      return actionLabel;
+    }
+    return null;
+  }, [actionColor, actionLabel, _optionalChain([customAppearance, 'optionalAccess', _6 => _6.action])]);
+  const hasActions = Boolean(actionNode || showCloseAffordance);
+  const isMultiline = numberOfLines > 1;
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.surface,
+        { backgroundColor: containerColor },
+        !hasActions && styles.surfaceWithoutActions,
+        _optionalChain([customAppearance, 'optionalAccess', _7 => _7.container]),
+        {
+          opacity,
+          transform: [{ scale }]
+        }
+      ]
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        style: [
+          styles.messageWrapper,
+          isMultiline && styles.messageWrapperMultiline
+        ]
+      },
+      messageNode
+    ),
+    hasActions && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.trailingActions }, actionNode && /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Pressable,
+      {
+        accessibilityRole: "button",
+        onPress: handleActionPress,
+        style: ({ pressed }) => [
+          styles.actionButton,
+          pressed && { backgroundColor: pressedOverlayColor }
+        ]
+      },
+      actionNode
+    ), showCloseAffordance && /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close snackbar",
+        onPress: handleDismiss,
+        style: ({ pressed }) => [
+          styles.closeButton,
+          pressed && { backgroundColor: pressedOverlayColor },
+          _optionalChain([customAppearance, 'optionalAccess', _8 => _8.closeButton])
+        ]
+      },
+      /* @__PURE__ */ _react2.default.createElement(_close.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__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      pointerEvents: "box-none",
+      style: [
+        styles.stackContainer,
+        stackPositionStyles.container,
+        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
+      ]
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        pointerEvents: "box-none",
+        style: [
+          styles.stackContent,
+          stackPositionStyles.content,
+          { gap: spacing },
+          _optionalChain([customAppearance, 'optionalAccess', _10 => _10.content])
+        ]
+      },
+      itemsToRender.map((item) => /* @__PURE__ */ _react2.default.createElement(
+        SnackbarSurface,
+        {
+          key: item.id,
+          item,
+          duration: _nullishCoalesce(item.duration, () => ( defaultDuration)),
+          onDismiss
+        }
+      ))
+    )
+  );
+  return usePortal ? /* @__PURE__ */ _react2.default.createElement(_chunkOQ2BLOOGcjs.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] = _react.useState.call(void 0, _nullishCoalesce(isVisible, () => ( true)));
+  const isControlled = typeof isVisible === "boolean";
+  const visible = isControlled ? isVisible : internalVisible;
+  const idRef = _react.useRef.call(void 0, `snackbar-${Date.now()}-${Math.random().toString(16).slice(2)}`);
+  const dismiss = _react.useCallback.call(void 0, () => {
+    if (!isControlled) {
+      setInternalVisible(false);
+    }
+    _optionalChain([onVisibleChange, 'optionalCall', _11 => _11(false)]);
+    _optionalChain([onClose, 'optionalCall', _12 => _12()]);
+  }, [isControlled, onClose, onVisibleChange]);
+  const items = _react.useMemo.call(void 0, 
+    () => visible ? [
+      {
+        id: idRef.current,
+        duration,
+        ...itemProps
+      }
+    ] : [],
+    [duration, itemProps, visible]
+  );
+  return /* @__PURE__ */ _react2.default.createElement(
+    SnackbarStack,
+    {
+      items,
+      onDismiss: dismiss,
+      position,
+      insetHorizontal,
+      insetVertical,
+      maxWidth,
+      defaultDuration: duration,
+      usePortal
+    }
+  );
+};
+
+
+
+exports.Snackbar = Snackbar; exports.SnackbarStack = SnackbarStack;

package/dist/snackbar/index.d.cts

@@ -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 };