@xaui/native 0.0.9 → 0.0.11

package/dist/chunk-OFYJYQ2M.js

@@ -0,0 +1,358 @@
+import {
+  CloseIcon
+} from "./chunk-SIXET7TJ.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "./chunk-NBRASCX4.js";
+
+// src/components/alert/alert.tsx
+import React2, {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo as useMemo2,
+  useState
+} from "react";
+import { Pressable, Text, View } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS
+} from "react-native-reanimated";
+
+// src/components/alert/alert.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    gap: 12
+  },
+  mainWrapper: {
+    flex: 1,
+    justifyContent: "center",
+    gap: 2
+  },
+  title: {
+    fontWeight: "600"
+  },
+  description: {
+    fontWeight: "400"
+  },
+  iconWrapper: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconText: {
+    fontWeight: "600"
+  },
+  closeButton: {
+    alignSelf: "flex-start",
+    padding: 4
+  },
+  extraContent: {
+    marginTop: 4
+  }
+});
+
+// src/components/alert/alert.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+var useAlertColorScheme = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  return {
+    theme,
+    colorScheme: theme.colors[safeThemeColor],
+    isDefault: safeThemeColor === "default"
+  };
+};
+var useAlertContainerStyles = (themeColor, variant) => {
+  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
+  const containerStyles = useMemo(() => {
+    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? withOpacity(colorScheme.background, 0.75) : "transparent";
+    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
+    const borderColor = variant === "bordered" ? withOpacity(colorScheme.main, 0.75) : variant === "faded" ? withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
+    return {
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      paddingVertical: theme.spacing.sm,
+      paddingHorizontal: theme.spacing.md
+    };
+  }, [colorScheme, isDefault, theme, variant]);
+  return containerStyles;
+};
+var useAlertIconWrapperStyles = (themeColor, variant) => {
+  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
+  const iconWrapperStyles = useMemo(() => {
+    const backgroundColor = variant === "solid" ? withOpacity(colorScheme.foreground, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
+    const borderColor = withOpacity(
+      isDefault ? theme.colors.foreground : colorScheme.main,
+      0.2
+    );
+    return {
+      backgroundColor,
+      borderColor,
+      borderWidth
+    };
+  }, [colorScheme, isDefault, theme, variant]);
+  return iconWrapperStyles;
+};
+var useAlertTextStyles = (themeColor, variant) => {
+  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
+  const textStyles = useMemo(() => {
+    const baseTextColor = variant === "solid" ? colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
+    return {
+      titleStyles: {
+        color: baseTextColor,
+        fontSize: theme.fontSizes.sm,
+        fontWeight: theme.fontWeights.semibold
+      },
+      descriptionStyles: {
+        color: withOpacity(baseTextColor, 0.75),
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.normal
+      },
+      iconColor: baseTextColor,
+      closeButtonColor: baseTextColor
+    };
+  }, [colorScheme, isDefault, theme, variant]);
+  return textStyles;
+};
+
+// src/components/alert/alert-icons.tsx
+import React from "react";
+import Svg, { Circle, Line, Path } from "react-native-svg";
+function InfoIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      x1: 12,
+      y1: 10,
+      x2: 12,
+      y2: 16,
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ), /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 7, r: 1, fill: color }));
+}
+function SuccessIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      d: "M7 12.5L10.2 15.5L17 9",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function WarningIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      d: "M12 3L22 20H2L12 3Z",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      x1: 12,
+      y1: 9,
+      x2: 12,
+      y2: 14,
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ), /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 17, r: 1, fill: color }));
+}
+function DangerIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      x1: 9,
+      y1: 9,
+      x2: 15,
+      y2: 15,
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      x1: 15,
+      y1: 9,
+      x2: 9,
+      y2: 15,
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ));
+}
+
+// src/components/alert/alert.tsx
+var iconMap = {
+  default: InfoIcon,
+  primary: InfoIcon,
+  secondary: InfoIcon,
+  tertiary: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon
+};
+var Alert = ({
+  title,
+  description,
+  icon,
+  themeColor = "default",
+  variant = "flat",
+  radius = "md",
+  isClosable = false,
+  hideIcon = false,
+  closeButton,
+  isVisible,
+  customAppearance,
+  children,
+  onClose,
+  onVisibleChange
+}) => {
+  const [internalVisible, setInternalVisible] = useState(isVisible ?? true);
+  const [shouldRender, setShouldRender] = useState(isVisible ?? true);
+  const isControlled = typeof isVisible === "boolean";
+  const visible = isControlled ? isVisible : internalVisible;
+  const opacity = useSharedValue(1);
+  const scale = useSharedValue(1);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const containerStyles = useAlertContainerStyles(themeColor, variant);
+  const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
+  const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
+  const finishClosing = useCallback(() => {
+    setShouldRender(false);
+    if (!isControlled) {
+      setInternalVisible(false);
+    }
+    onVisibleChange?.(false);
+    onClose?.();
+  }, [isControlled, onClose, onVisibleChange]);
+  const handleClose = useCallback(() => {
+    if (!visible) return;
+    opacity.value = withTiming(0, { duration: 250 });
+    scale.value = withTiming(0.95, { duration: 250 }, (finished) => {
+      if (finished) {
+        runOnJS(finishClosing)();
+      }
+    });
+  }, [finishClosing, opacity, scale, visible]);
+  useEffect(() => {
+    if (visible && !shouldRender) {
+      setShouldRender(true);
+      opacity.value = 0;
+      scale.value = 0.95;
+      opacity.value = withTiming(1, { duration: 250 });
+      scale.value = withTiming(1, { duration: 250 });
+      return;
+    }
+    if (!visible && shouldRender) {
+      handleClose();
+    }
+  }, [visible, shouldRender, opacity, scale, handleClose]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }]
+  }));
+  const IconComponent = iconMap[themeColor] ?? InfoIcon;
+  const shouldShowClose = Boolean(closeButton || isClosable || onClose);
+  const renderIcon = () => {
+    if (hideIcon) return null;
+    if (icon && isValidElement(icon)) {
+      return cloneElement(icon, { color: iconColor, size: 22 });
+    }
+    if (icon) {
+      return /* @__PURE__ */ React2.createElement(Text, { style: [styles.iconText, { color: iconColor }] }, icon);
+    }
+    return /* @__PURE__ */ React2.createElement(IconComponent, { color: iconColor, size: 22 });
+  };
+  const renderContentText = (content) => {
+    if (content === null || content === void 0) return null;
+    if (typeof content === "string" || typeof content === "number") {
+      return /* @__PURE__ */ React2.createElement(
+        Text,
+        {
+          style: [
+            styles.description,
+            descriptionStyles,
+            customAppearance?.description
+          ]
+        },
+        content
+      );
+    }
+    return content;
+  };
+  const titleNode = useMemo2(() => {
+    if (title === null || title === void 0) return null;
+    if (typeof title === "string" || typeof title === "number") {
+      return /* @__PURE__ */ React2.createElement(Text, { style: [styles.title, titleStyles, customAppearance?.title] }, title);
+    }
+    return title;
+  }, [title, customAppearance?.title, titleStyles]);
+  const descriptionNode = renderContentText(description);
+  const childrenNode = renderContentText(children);
+  const closeButtonNode = useMemo2(() => {
+    if (!closeButton) return null;
+    if (!isValidElement(closeButton)) return closeButton;
+    const existingOnPress = closeButton.props.onPress;
+    return cloneElement(closeButton, {
+      onPress: (event) => {
+        existingOnPress?.(event);
+        handleClose();
+      }
+    });
+  }, [closeButton, handleClose]);
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ React2.createElement(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      style: [
+        styles.container,
+        containerStyles,
+        radiusStyles,
+        customAppearance?.container,
+        animatedStyle
+      ]
+    },
+    !hideIcon && /* @__PURE__ */ React2.createElement(View, { style: [styles.iconWrapper, iconWrapperStyles] }, renderIcon()),
+    /* @__PURE__ */ React2.createElement(View, { style: styles.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ React2.createElement(View, { style: styles.extraContent }, childrenNode)),
+    shouldShowClose && /* @__PURE__ */ React2.createElement(View, null, closeButtonNode ?? /* @__PURE__ */ React2.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        onPress: handleClose,
+        style: styles.closeButton
+      },
+      /* @__PURE__ */ React2.createElement(CloseIcon, { size: 20, color: closeButtonColor })
+    ))
+  );
+};
+
+export {
+  Alert
+};

package/dist/{chunk-7LXW4BXD.js → chunk-RE3CO277.js}

@@ -1,3 +1,6 @@
+import {
+  isThemeColor
+} from "./chunk-SIXET7TJ.js";
 import {
   useXUITheme
 } from "./chunk-NBRASCX4.js";
@@ -6,22 +9,6 @@ import {
 import React, { useEffect, useMemo, useRef } from "react";
 import { Animated } from "react-native";
 import Svg, { Circle, Path, Rect } from "react-native-svg";
-
-// src/components/icon/icon.utils.ts
-var isThemeColor = (color) => {
-  const themeColors = [
-    "primary",
-    "secondary",
-    "tertiary",
-    "danger",
-    "warning",
-    "success",
-    "default"
-  ];
-  return themeColors.includes(color);
-};
-
-// src/components/icon/icons/arrow-back.tsx
 var AnimatedPath = Animated.createAnimatedComponent(Path);
 var ArrowBackIcon = ({
   variant = "baseline",
@@ -450,157 +437,8 @@ var ChevronDownIcon = ({
   return /* @__PURE__ */ React3.createElement(Svg3, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
-// src/components/icon/icons/close.tsx
-import React4, { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4 } from "react";
-import { Animated as Animated4 } from "react-native";
-import Svg4, { Path as Path4, Rect as Rect4, Circle as Circle4 } from "react-native-svg";
-var AnimatedPath4 = Animated4.createAnimatedComponent(Path4);
-var CloseIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = useMemo4(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  useEffect4(() => {
-    if (isAnimated) {
-      Animated4.parallel([
-        Animated4.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        Animated4.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    Path4,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderRoundOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    Circle4,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderSquareOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    Rect4,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderRoundFilled = () => /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderSquareFilled = () => /* @__PURE__ */ React4.createElement(
-    AnimatedPath4,
-    {
-      fill: resolvedColor,
-      d: "M400 64H112a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-59.31 244.69a16 16 0 1 1-22.62 22.62L256 278.63l-62.07 52.68a16 16 0 0 1-22.62-22.62L223.37 256l-52.06-52.69a16 16 0 0 1 22.62-22.62L256 233.37l62.07-52.68a16 16 0 0 1 22.62 22.62L288.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-        return renderRoundFilled();
-      case "square-filled":
-        return renderSquareFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ React4.createElement(Svg4, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
 export {
   ArrowBackIcon,
   CheckmarkIcon,
-  ChevronDownIcon,
-  CloseIcon
+  ChevronDownIcon
 };