@xaui/native 0.0.30 → 0.0.32

package/dist/dialog/index.d.ts

@@ -0,0 +1,151 @@
+import React, { ReactNode } from 'react';
+import { ModalProps, ViewStyle, TextStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.js';
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'full';
+type DialogPlacement = 'top' | 'center' | 'bottom';
+type DialogBackdrop = 'transparent' | 'blurred' | 'opaque';
+type DialogCustomAppearance = {
+    /**
+     * Custom style for the overlay backdrop.
+     */
+    backdrop?: ViewStyle;
+    /**
+     * Custom style for the dialog container.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for the dialog header section.
+     */
+    header?: ViewStyle;
+    /**
+     * Custom style for the dialog body section.
+     */
+    body?: ViewStyle;
+    /**
+     * Custom style for the dialog footer section.
+     */
+    footer?: ViewStyle;
+    /**
+     * Custom style for the close button.
+     */
+    closeButton?: ViewStyle;
+    /**
+     * Custom style for default title text rendered in DialogHeader.
+     */
+    headerText?: TextStyle;
+    /**
+     * Custom style for default body text rendered in DialogBody.
+     */
+    bodyText?: TextStyle;
+};
+type DialogEvents = {
+    /**
+     * Called when the dialog requests to close.
+     */
+    onClose?: () => void;
+    /**
+     * Called whenever open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+type DialogProps = {
+    /**
+     * Dialog content.
+     */
+    children: ReactNode;
+    /**
+     * Controls visibility.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Dialog size preset.
+     * @default 'md'
+     */
+    size?: DialogSize;
+    /**
+     * Dialog placement on screen.
+     * @default 'center'
+     */
+    placement?: DialogPlacement;
+    /**
+     * Border radius of the dialog container.
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Controls backdrop intensity.
+     * @default 'opaque'
+     */
+    backdrop?: DialogBackdrop;
+    /**
+     * If true, backdrop press closes the dialog.
+     * @default true
+     */
+    closeOnBackdropPress?: boolean;
+    /**
+     * Whether to hide the backdrop layer.
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Modal animation type.
+     * @default 'fade'
+     */
+    animationType?: ModalProps['animationType'];
+    /**
+     * Disable animation by forcing `animationType="none"`.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Extra style for the dialog container.
+     */
+    style?: ViewStyle;
+    /**
+     * Custom styles per section.
+     */
+    customAppearance?: DialogCustomAppearance;
+} & DialogEvents;
+type DialogHeaderProps = {
+    children?: ReactNode;
+    /**
+     * Whether to show a close button in header.
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * Custom close button element.
+     */
+    closeButton?: ReactNode;
+    /**
+     * Optional close callback override for this header.
+     */
+    onClose?: () => void;
+    /**
+     * Custom style for header container.
+     */
+    style?: ViewStyle;
+};
+type DialogBodyProps = {
+    children?: ReactNode;
+    /**
+     * Custom style for body container.
+     */
+    style?: ViewStyle;
+};
+type DialogFooterProps = {
+    children?: ReactNode;
+    /**
+     * Custom style for footer container.
+     */
+    style?: ViewStyle;
+};
+
+declare const Dialog: React.FC<DialogProps>;
+declare const DialogHeader: React.FC<DialogHeaderProps>;
+declare const DialogBody: React.FC<DialogBodyProps>;
+declare const DialogFooter: React.FC<DialogFooterProps>;
+
+export { Dialog, type DialogBackdrop, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogPlacement, type DialogProps, type DialogSize };

package/dist/dialog/index.js

@@ -0,0 +1,381 @@
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/dialog/dialog.tsx
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Modal, Pressable, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { withOpacity } from "@xaui/core";
+import { CloseIcon } from "@xaui/icons";
+
+// src/components/dialog/dialog.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  backdropTransparent: {
+    backgroundColor: "transparent"
+  },
+  backdropBlurred: {
+    backgroundColor: "rgba(15, 23, 42, 0.35)"
+  },
+  backdropOpaque: {
+    backgroundColor: "rgba(15, 23, 42, 0.55)"
+  },
+  placementBase: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  placementTop: {
+    justifyContent: "flex-start",
+    paddingTop: 44,
+    paddingBottom: 16
+  },
+  placementCenter: {
+    justifyContent: "center",
+    paddingVertical: 16
+  },
+  placementBottom: {
+    justifyContent: "flex-end",
+    paddingTop: 16,
+    paddingBottom: 28
+  },
+  dialog: {
+    width: "100%",
+    alignSelf: "center",
+    overflow: "hidden",
+    borderWidth: 1
+  },
+  sizeSm: {
+    maxWidth: 360
+  },
+  sizeMd: {
+    maxWidth: 520
+  },
+  sizeLg: {
+    maxWidth: 700
+  },
+  sizeFull: {
+    maxWidth: "100%",
+    flex: 1
+  },
+  header: {
+    paddingTop: 18,
+    paddingBottom: 12,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  headerContent: {
+    flex: 1
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: "700"
+  },
+  body: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    gap: 10
+  },
+  bodyText: {
+    fontSize: 15,
+    lineHeight: 22
+  },
+  footer: {
+    paddingTop: 8,
+    paddingBottom: 18,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: 8
+  },
+  closeButton: {
+    padding: 4,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/dialog/dialog.tsx
+var DialogContext = createContext({});
+var sizeStyles = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  full: styles.sizeFull
+};
+var placementStyles = {
+  top: styles.placementTop,
+  center: styles.placementCenter,
+  bottom: styles.placementBottom
+};
+var backdropStyles = {
+  transparent: styles.backdropTransparent,
+  blurred: styles.backdropBlurred,
+  opaque: styles.backdropOpaque
+};
+var ENTER_DURATION = 240;
+var EXIT_DURATION = 180;
+function getTranslateOffset(placement, animationType) {
+  if (animationType === "slide") {
+    if (placement === "top") return -28;
+    if (placement === "bottom") return 28;
+    return 18;
+  }
+  if (placement === "top") return -18;
+  if (placement === "bottom") return 18;
+  return 10;
+}
+var resolveChildrenContent = (content, textStyle) => {
+  if (content === void 0 || content === null) return null;
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ React.createElement(Text, { style: textStyle }, content);
+  }
+  return content;
+};
+var Dialog = ({
+  children,
+  isOpen,
+  onClose,
+  onOpenChange,
+  size = "md",
+  placement = "center",
+  radius = "lg",
+  backdrop = "opaque",
+  closeOnBackdropPress = true,
+  hideBackdrop = false,
+  animationType = "fade",
+  disableAnimation = false,
+  style,
+  customAppearance
+}) => {
+  const theme = useXUITheme();
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const openRef = useRef(isOpen);
+  const shouldAnimate = !disableAnimation && animationType !== "none";
+  const initialOffset = getTranslateOffset(placement, animationType);
+  const backdropOpacity = useSharedValue(isOpen ? 1 : 0);
+  const dialogOpacity = useSharedValue(isOpen ? 1 : 0);
+  const dialogTranslate = useSharedValue(isOpen ? 0 : initialOffset);
+  const dialogScale = useSharedValue(isOpen ? 1 : placement === "center" ? 0.98 : 1);
+  const requestClose = useCallback(() => {
+    onOpenChange?.(false);
+    onClose?.();
+  }, [onClose, onOpenChange]);
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      requestClose();
+    }
+  };
+  const finishClosing = useCallback(() => {
+    if (!openRef.current) {
+      setShouldRender(false);
+    }
+  }, []);
+  useEffect(() => {
+    openRef.current = isOpen;
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && !shouldRender) {
+      setShouldRender(true);
+    }
+  }, [isOpen, shouldRender]);
+  useEffect(() => {
+    if (!shouldRender) return;
+    if (!shouldAnimate) {
+      backdropOpacity.value = isOpen ? 1 : 0;
+      dialogOpacity.value = isOpen ? 1 : 0;
+      dialogTranslate.value = 0;
+      dialogScale.value = 1;
+      if (!isOpen) {
+        setShouldRender(false);
+      }
+      return;
+    }
+    const offset = getTranslateOffset(placement, animationType);
+    if (isOpen) {
+      backdropOpacity.value = 0;
+      dialogOpacity.value = 0;
+      dialogTranslate.value = offset;
+      dialogScale.value = placement === "center" ? 0.98 : 1;
+      backdropOpacity.value = withTiming(1, {
+        duration: 210,
+        easing: Easing.out(Easing.quad)
+      });
+      dialogOpacity.value = withTiming(1, {
+        duration: 220,
+        easing: Easing.out(Easing.quad)
+      });
+      dialogTranslate.value = withTiming(0, {
+        duration: ENTER_DURATION,
+        easing: Easing.out(Easing.cubic)
+      });
+      dialogScale.value = withTiming(1, {
+        duration: 220,
+        easing: Easing.out(Easing.quad)
+      });
+      return;
+    }
+    backdropOpacity.value = withTiming(0, {
+      duration: 150,
+      easing: Easing.in(Easing.quad)
+    });
+    dialogTranslate.value = withTiming(offset, {
+      duration: EXIT_DURATION,
+      easing: Easing.in(Easing.cubic)
+    });
+    dialogScale.value = withTiming(placement === "center" ? 0.98 : 1, {
+      duration: 150,
+      easing: Easing.in(Easing.quad)
+    });
+    dialogOpacity.value = withTiming(
+      0,
+      {
+        duration: EXIT_DURATION,
+        easing: Easing.in(Easing.quad)
+      },
+      (finished) => {
+        if (finished) {
+          runOnJS(finishClosing)();
+        }
+      }
+    );
+  }, [
+    animationType,
+    backdropOpacity,
+    dialogOpacity,
+    dialogScale,
+    dialogTranslate,
+    finishClosing,
+    isOpen,
+    placement,
+    shouldAnimate,
+    shouldRender
+  ]);
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value
+  }));
+  const dialogAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: dialogOpacity.value,
+    transform: [{ translateY: dialogTranslate.value }, { scale: dialogScale.value }]
+  }));
+  const dialogContextValue = useMemo(
+    () => ({
+      onClose: requestClose,
+      customAppearance
+    }),
+    [customAppearance, requestClose]
+  );
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: requestClose
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.root }, !hideBackdrop && /* @__PURE__ */ React.createElement(
+      AnimatedPressable,
+      {
+        style: [
+          styles.backdrop,
+          backdropStyles[backdrop],
+          backdropAnimatedStyle,
+          customAppearance?.backdrop
+        ],
+        onPress: handleBackdropPress
+      }
+    ), /* @__PURE__ */ React.createElement(View, { style: [styles.placementBase, placementStyles[placement]] }, /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: dialogContextValue }, /* @__PURE__ */ React.createElement(Pressable, { onPress: (event) => event.stopPropagation() }, /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          styles.dialog,
+          sizeStyles[size],
+          radiusStyles,
+          dialogAnimatedStyle,
+          {
+            backgroundColor: theme.colors.background,
+            borderColor: withOpacity(theme.colors.foreground, 0.14)
+          },
+          theme.shadows.lg,
+          customAppearance?.container,
+          style
+        ]
+      },
+      children
+    )))))
+  );
+};
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var DialogHeader = ({
+  children,
+  isClosable = false,
+  closeButton,
+  onClose,
+  style
+}) => {
+  const theme = useXUITheme();
+  const { onClose: contextClose, customAppearance } = useContext(DialogContext);
+  const close = onClose ?? contextClose;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, customAppearance?.header, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.headerContent }, resolveChildrenContent(children, [
+    styles.headerText,
+    { color: theme.colors.foreground },
+    customAppearance?.headerText
+  ])), isClosable && /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: "Close dialog",
+      onPress: close,
+      style: [styles.closeButton, customAppearance?.closeButton]
+    },
+    closeButton ?? /* @__PURE__ */ React.createElement(CloseIcon, { size: 22, color: theme.colors.foreground })
+  ));
+};
+var DialogBody = ({ children, style }) => {
+  const theme = useXUITheme();
+  const { customAppearance } = useContext(DialogContext);
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.body, customAppearance?.body, style] }, resolveChildrenContent(children, [
+    styles.bodyText,
+    { color: withOpacity(theme.colors.foreground, 0.9) },
+    customAppearance?.bodyText
+  ]));
+};
+var DialogFooter = ({ children, style }) => {
+  const { customAppearance } = useContext(DialogContext);
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, customAppearance?.footer, style] }, children);
+};
+export {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader
+};

package/dist/index-DyU3sW3_.d.cts

@@ -0,0 +1,4 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+export type { Radius as R, ThemeColor as T };

package/dist/index-DyU3sW3_.d.ts

@@ -0,0 +1,4 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+export type { Radius as R, ThemeColor as T };

package/dist/snackbar/index.d.cts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
-
-type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+import { T as ThemeColor } from '../index-DyU3sW3_.cjs';
 
 type SnackbarPosition = 'top' | 'bottom';
 type SnackbarCustomAppearance = {

package/dist/snackbar/index.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
-
-type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+import { T as ThemeColor } from '../index-DyU3sW3_.js';
 
 type SnackbarPosition = 'top' | 'bottom';
 type SnackbarCustomAppearance = {