@xaui/native 0.0.16 → 0.0.18

package/dist/accordion/index.cjs

@@ -290,7 +290,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = (0, import_core3.addOpacityToColor)(theme.colors.default.background, 0.5);
+      base.backgroundColor = (0, import_core3.withOpacity)(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/accordion/index.js

@@ -1,10 +1,11 @@
 import {
   Divider
-} from "../chunk-GNJIET26.js";
+} from "../chunk-LUBWRVI2.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useXUIPalette,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/accordion/accordion.tsx
 import React4 from "react";
@@ -139,7 +140,7 @@ import {
   Easing
 } from "react-native";
 import { colors as palette } from "@xaui/core/palette";
-import { addOpacityToColor } from "@xaui/core";
+import { withOpacity } from "@xaui/core";
 var useAccordionItemState = (itemKey) => {
   const context = useAccordionContext();
   const resolvedItemKey = itemKey ?? "";
@@ -219,7 +220,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = addOpacityToColor(theme.colors.default.background, 0.5);
+      base.backgroundColor = withOpacity(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/alert/index.js

@@ -1,7 +1,356 @@
+import "../chunk-DXXNBF5P.js";
 import {
-  Alert
-} from "../chunk-2T6FKPJW.js";
-import "../chunk-NBRASCX4.js";
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.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
+import { CloseIcon } from "@xaui/icons";
+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/autocomplete/index.cjs

@@ -508,13 +508,7 @@ var styles2 = import_react_native5.StyleSheet.create({
 });
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var addOpacityToColor = (color, opacity) => {
-  const hex = color.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
+var import_core4 = require("@xaui/core");
 var AutocompleteDialogHeader = ({
   title,
   inputValue,
@@ -545,7 +539,7 @@ var AutocompleteDialogHeader = ({
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
+      placeholderTextColor: (0, import_core4.withOpacity)(theme.colors.foreground, 0.5),
       style: [
         styles2.input,
         {
@@ -1073,7 +1067,7 @@ var styles3 = import_react_native11.StyleSheet.create({
 
 // src/components/autocomplete/autocomplete-item.hook.ts
 var import_react15 = require("react");
-var import_core6 = require("@xaui/core");
+var import_core7 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
   return (0, import_react15.useMemo)(() => {
@@ -1108,7 +1102,7 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     return "transparent";
@@ -1125,7 +1119,7 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     if (themeColor === "default") {