@xaui/native 0.0.17 → 0.0.19

package/dist/chunk-K2HSVISE.js

@@ -1,281 +0,0 @@
-import {
-  useXUITheme
-} from "./chunk-MZL77KV5.js";
-
-// src/components/avatar/avatar.tsx
-import React from "react";
-import { Image, Text, View } from "react-native";
-
-// src/components/avatar/avatar.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  image: {
-    width: "100%",
-    height: "100%"
-  },
-  fallback: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  group: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  grid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start"
-  }
-});
-
-// src/components/avatar/avatar.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-var sizeMap = {
-  xs: 24,
-  sm: 32,
-  md: 40,
-  lg: 48
-};
-function resolveAvatarSize(size) {
-  if (typeof size === "number") {
-    return size;
-  }
-  return sizeMap[size];
-}
-function useAvatarSizeStyles(size) {
-  const theme = useXUITheme();
-  const resolvedSize = useMemo(() => resolveAvatarSize(size), [size]);
-  const fontSize = useMemo(() => {
-    if (typeof size === "number") {
-      return Math.max(10, Math.round(size * 0.4));
-    }
-    return theme.fontSizes[size];
-  }, [size, theme]);
-  return {
-    size: resolvedSize,
-    fontSize
-  };
-}
-function useAvatarRadiusStyles(radius, size) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (radius === "full") {
-      return { borderRadius: size / 2 };
-    }
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: radii[radius] };
-  }, [radius, size, theme]);
-}
-function useAvatarColors(themeColor, isDisabled) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const backgroundColor = useMemo(() => {
-    if (isDisabled) {
-      return theme.colors.background;
-    }
-    return colorScheme.background;
-  }, [colorScheme.background, isDisabled, theme.colors.background]);
-  const textColor = useMemo(() => {
-    if (safeThemeColor === "default") {
-      return theme.colors.foreground;
-    }
-    return colorScheme.main;
-  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
-  return {
-    backgroundColor,
-    textColor,
-    borderColor: colorScheme.main
-  };
-}
-function getDefaultInitials(name) {
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return "";
-  }
-  const parts = trimmed.split(/\s+/);
-  if (parts.length === 1) {
-    return parts[0].slice(0, 2).toUpperCase();
-  }
-  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-}
-
-// src/components/avatar/avatar.tsx
-var Avatar = ({
-  src,
-  name,
-  icon,
-  fallback,
-  size = "md",
-  radius = "full",
-  themeColor = "default",
-  isBordered = false,
-  isDisabled = false,
-  showFallback = false,
-  getInitials,
-  customAppearance
-}) => {
-  const [isError, setIsError] = React.useState(false);
-  const { size: resolvedSize, fontSize } = useAvatarSizeStyles(size);
-  const radiusStyles = useAvatarRadiusStyles(radius, resolvedSize);
-  const { backgroundColor, textColor, borderColor } = useAvatarColors(
-    themeColor,
-    isDisabled
-  );
-  const accessibilityLabel = name ?? "Avatar";
-  const shouldShowFallback = showFallback || !src || isError;
-  const initials = name ? (getInitials ?? getDefaultInitials)(name) : "";
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.container,
-        {
-          width: resolvedSize,
-          height: resolvedSize,
-          backgroundColor,
-          opacity: isDisabled ? 0.6 : 1,
-          borderWidth: isBordered ? 1 : 0,
-          borderColor: isBordered ? borderColor : "transparent"
-        },
-        radiusStyles,
-        customAppearance?.container
-      ],
-      accessible: true,
-      accessibilityRole: "image",
-      accessibilityLabel
-    },
-    !shouldShowFallback && src ? /* @__PURE__ */ React.createElement(
-      Image,
-      {
-        source: { uri: src },
-        style: [styles.image, radiusStyles, customAppearance?.image],
-        accessibilityLabel,
-        onError: () => setIsError(true)
-      }
-    ) : /* @__PURE__ */ React.createElement(View, { style: [styles.fallback, { width: "100%", height: "100%" }] }, fallback ?? icon ?? /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          {
-            color: textColor,
-            fontSize,
-            fontWeight: "600"
-          },
-          customAppearance?.text
-        ]
-      },
-      initials
-    ))
-  );
-};
-
-// src/components/avatar/avatar-group.tsx
-import React2 from "react";
-import { Text as Text2, View as View2 } from "react-native";
-var AvatarGroup = ({
-  children,
-  max,
-  total,
-  size = "md",
-  radius = "full",
-  themeColor = "default",
-  isBordered = false,
-  isDisabled = false,
-  isGrid = false,
-  renderCount,
-  customAppearance
-}) => {
-  const theme = useXUITheme();
-  const resolvedSize = resolveAvatarSize(size);
-  const spacing = theme.spacing.xs;
-  const overlap = Math.round(resolvedSize * 0.28);
-  const allChildren = React2.Children.toArray(children).filter(
-    (child) => React2.isValidElement(child)
-  );
-  const totalCount = total ?? allChildren.length;
-  const maxCount = max ?? totalCount;
-  const visibleChildren = allChildren.slice(0, maxCount);
-  const remaining = Math.max(0, totalCount - maxCount);
-  const enhanced = visibleChildren.map((child, index) => {
-    const childProps = child.props;
-    return /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        key: child.key ?? index,
-        style: isGrid ? { marginRight: spacing, marginBottom: spacing } : { marginLeft: index === 0 ? 0 : -overlap, zIndex: index }
-      },
-      React2.cloneElement(child, {
-        size: childProps.size ?? size,
-        radius: childProps.radius ?? radius,
-        themeColor: childProps.themeColor ?? themeColor,
-        isBordered: childProps.isBordered ?? isBordered,
-        isDisabled: childProps.isDisabled ?? isDisabled
-      })
-    );
-  });
-  const countNode = remaining > 0 ? renderCount?.(remaining) ?? /* @__PURE__ */ React2.createElement(
-    Avatar,
-    {
-      name: `+${remaining}`,
-      showFallback: true,
-      size,
-      radius,
-      themeColor,
-      isBordered,
-      isDisabled,
-      fallback: /* @__PURE__ */ React2.createElement(
-        Text2,
-        {
-          style: {
-            color: theme.colors.foreground,
-            fontSize: Math.max(10, Math.round(resolvedSize * 0.35)),
-            fontWeight: "600"
-          }
-        },
-        "+",
-        remaining
-      )
-    }
-  ) : null;
-  if (countNode) {
-    enhanced.push(
-      /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          key: "avatar-count",
-          style: isGrid ? { marginRight: spacing, marginBottom: spacing } : {
-            marginLeft: enhanced.length === 0 ? 0 : -overlap,
-            zIndex: enhanced.length
-          }
-        },
-        countNode
-      )
-    );
-  }
-  return /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [isGrid ? styles.grid : styles.group, customAppearance?.container],
-      accessible: true
-    },
-    enhanced
-  );
-};
-
-export {
-  Avatar,
-  AvatarGroup
-};

package/dist/chunk-OXVIVNIJ.js

@@ -1,356 +0,0 @@
-import {
-  useBorderRadiusStyles,
-  useXUITheme
-} from "./chunk-MZL77KV5.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
-};