@xaui/native 0.0.16 → 0.0.18

package/dist/chunk-QLEQYKG5.js

@@ -1,509 +0,0 @@
-import {
-  useXUITheme
-} from "./chunk-NBRASCX4.js";
-
-// src/components/chip/chip.tsx
-import React from "react";
-import { Animated, Easing, Pressable, View } from "react-native";
-
-// src/components/chip/chip.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  },
-  text: {
-    fontWeight: "500",
-    includeFontPadding: false,
-    textAlignVertical: "center"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  avatar: {
-    marginRight: 4
-  },
-  startContent: {
-    marginRight: 4
-  },
-  endContent: {
-    marginLeft: 4
-  },
-  closeButton: {
-    marginLeft: 4,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  dot: {
-    borderRadius: 9999,
-    marginRight: 6
-  },
-  groupContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap"
-  }
-});
-
-// src/components/chip/chip.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-var sizeMap = {
-  sm: { height: 32, paddingH: 12, fontSize: 13 },
-  md: { height: 40, paddingH: 16, fontSize: 15 },
-  lg: { height: 44, paddingH: 18, fontSize: 17 }
-};
-var dotSizeMap = {
-  sm: 8,
-  md: 10,
-  lg: 11
-};
-var closeSizeMap = {
-  sm: 14,
-  md: 16,
-  lg: 17
-};
-function useChipSizeStyles(size) {
-  return useMemo(() => {
-    const { height, paddingH, fontSize } = sizeMap[size];
-    return { height, paddingHorizontal: paddingH, fontSize };
-  }, [size]);
-}
-function useChipDotSize(size) {
-  return useMemo(() => dotSizeMap[size], [size]);
-}
-function useChipCloseSize(size) {
-  return useMemo(() => closeSizeMap[size], [size]);
-}
-function useChipRadiusStyles(radius, height) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (radius === "full") {
-      return { borderRadius: height / 2 };
-    }
-    return { borderRadius: theme.borderRadius[radius] };
-  }, [height, radius, theme.borderRadius]);
-}
-function useChipVariantStyles(themeColor, variant) {
-  const theme = useXUITheme();
-  const safeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeColor];
-  return useMemo(() => {
-    switch (variant) {
-      case "bordered":
-        return {
-          backgroundColor: "transparent",
-          color: colorScheme.main,
-          borderWidth: 2,
-          borderColor: colorScheme.main
-        };
-      case "light":
-        return {
-          backgroundColor: "transparent",
-          color: colorScheme.main
-        };
-      case "flat":
-        return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main
-        };
-      case "faded":
-        return {
-          backgroundColor: withOpacity(colorScheme.background, 0.7),
-          color: colorScheme.main,
-          borderWidth: 1,
-          borderColor: withOpacity(colorScheme.main, 0.3)
-        };
-      case "shadow":
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.foreground,
-          shadow: theme.shadows.sm
-        };
-      case "dot":
-        return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main,
-          dotColor: colorScheme.main
-        };
-      case "solid":
-      default:
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.foreground
-        };
-    }
-  }, [colorScheme, theme, variant]);
-}
-
-// src/components/chip/chip.tsx
-var Chip = ({
-  children,
-  variant = "solid",
-  themeColor = "default",
-  size = "md",
-  radius = "full",
-  avatar,
-  startContent,
-  endContent,
-  isDisabled = false,
-  customAppearance,
-  onClose,
-  onPress
-}) => {
-  const [isClosed, setIsClosed] = React.useState(false);
-  const [isClosing, setIsClosing] = React.useState(false);
-  const sizeStyles = useChipSizeStyles(size);
-  const radiusStyles = useChipRadiusStyles(radius, sizeStyles.height);
-  const variantStyles = useChipVariantStyles(themeColor, variant);
-  const dotSize = useChipDotSize(size);
-  const closeSize = useChipCloseSize(size);
-  const isDotVariant = variant === "dot";
-  const hasClose = onClose !== void 0;
-  const isInteractive = onPress !== void 0 || hasClose;
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const opacity = React.useRef(new Animated.Value(1)).current;
-  const isClosingRef = React.useRef(false);
-  const colorProgress = React.useRef(new Animated.Value(1)).current;
-  const targetBackgroundColor = variantStyles.backgroundColor ?? "transparent";
-  const targetBorderColor = variantStyles.borderColor ?? "transparent";
-  const targetTextColor = variantStyles.color ?? "#000000";
-  const targetDotColor = variantStyles.dotColor ?? targetTextColor;
-  const previousColorsRef = React.useRef({
-    backgroundColor: targetBackgroundColor,
-    borderColor: targetBorderColor,
-    textColor: targetTextColor,
-    dotColor: targetDotColor
-  });
-  React.useEffect(() => {
-    if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
-      return;
-    }
-    colorProgress.setValue(0);
-    Animated.timing(colorProgress, {
-      toValue: 1,
-      duration: 180,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: false
-    }).start(() => {
-      previousColorsRef.current = {
-        backgroundColor: targetBackgroundColor,
-        borderColor: targetBorderColor,
-        textColor: targetTextColor,
-        dotColor: targetDotColor
-      };
-    });
-  }, [
-    colorProgress,
-    targetBackgroundColor,
-    targetBorderColor,
-    targetTextColor,
-    targetDotColor
-  ]);
-  const animatedBackgroundColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [
-      previousColorsRef.current.backgroundColor,
-      targetBackgroundColor
-    ]
-  });
-  const animatedBorderColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.borderColor, targetBorderColor]
-  });
-  const animatedTextColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.textColor, targetTextColor]
-  });
-  const animatedDotColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [previousColorsRef.current.dotColor, targetDotColor]
-  });
-  const handlePressIn = React.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    Animated.timing(scale, {
-      toValue: 0.97,
-      duration: 90,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handlePressOut = React.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    Animated.timing(scale, {
-      toValue: 1,
-      duration: 120,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handleChipPress = React.useCallback(() => {
-    if (isDisabled || isClosing || isClosingRef.current) return;
-    if (hasClose && onClose) {
-      isClosingRef.current = true;
-      setIsClosing(true);
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 0,
-          duration: 180,
-          easing: Easing.in(Easing.quad),
-          useNativeDriver: true
-        }),
-        Animated.timing(scale, {
-          toValue: 0.88,
-          duration: 180,
-          easing: Easing.in(Easing.quad),
-          useNativeDriver: true
-        })
-      ]).start(() => {
-        setIsClosed(true);
-        onClose();
-        setIsClosing(false);
-        isClosingRef.current = false;
-      });
-      return;
-    }
-    onPress?.();
-  }, [hasClose, isClosing, isDisabled, onClose, onPress, opacity, scale]);
-  if (isClosed) {
-    return null;
-  }
-  const chipContent = /* @__PURE__ */ React.createElement(Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      style: [
-        styles.chip,
-        {
-          height: sizeStyles.height,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: animatedBackgroundColor,
-          borderWidth: variantStyles.borderWidth,
-          borderColor: animatedBorderColor
-        },
-        radiusStyles,
-        variantStyles.shadow,
-        isDisabled && styles.disabled,
-        customAppearance?.container
-      ],
-      accessible: true,
-      accessibilityRole: "text"
-    },
-    isDotVariant && /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [
-          styles.dot,
-          {
-            width: dotSize,
-            height: dotSize,
-            backgroundColor: animatedDotColor
-          },
-          customAppearance?.dot
-        ]
-      }
-    ),
-    avatar && /* @__PURE__ */ React.createElement(View, { style: styles.avatar }, avatar),
-    startContent && !avatar && /* @__PURE__ */ React.createElement(View, { style: styles.startContent }, startContent),
-    /* @__PURE__ */ React.createElement(
-      Animated.Text,
-      {
-        style: [
-          styles.text,
-          { fontSize: sizeStyles.fontSize, color: animatedTextColor },
-          customAppearance?.text
-        ]
-      },
-      children
-    ),
-    endContent && !hasClose && /* @__PURE__ */ React.createElement(View, { style: styles.endContent }, endContent),
-    hasClose && /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.closeButton,
-          { width: closeSize, height: closeSize },
-          customAppearance?.closeButton
-        ]
-      },
-      /* @__PURE__ */ React.createElement(
-        Animated.Text,
-        {
-          style: {
-            fontSize: closeSize - 2,
-            color: animatedTextColor,
-            lineHeight: closeSize
-          }
-        },
-        "\u2715"
-      )
-    )
-  ));
-  if (isInteractive) {
-    return /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        onPress: isDisabled || isClosing ? void 0 : handleChipPress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        disabled: isDisabled || isClosing
-      },
-      chipContent
-    );
-  }
-  return chipContent;
-};
-
-// src/components/chip/chip-group.tsx
-import React2 from "react";
-import { View as View2 } from "react-native";
-
-// src/components/chip/chip-context.ts
-import { createContext } from "react";
-var ChipGroupContext = createContext(null);
-
-// src/components/chip/chip-group.hook.ts
-import { useCallback, useMemo as useMemo2, useState } from "react";
-function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
-  const [internalValues, setInternalValues] = useState(
-    defaultSelectedValues ?? []
-  );
-  const isControlled = selectedValues !== void 0;
-  const currentValues = isControlled ? selectedValues : internalValues;
-  const onToggle = useCallback(
-    (value) => {
-      const isSelected = currentValues.includes(value);
-      let nextValues;
-      if (selectMode === "single") {
-        nextValues = isSelected ? [] : [value];
-      } else {
-        nextValues = isSelected ? currentValues.filter((v) => v !== value) : [...currentValues, value];
-      }
-      if (!isControlled) {
-        setInternalValues(nextValues);
-      }
-      onSelectionChange?.(nextValues);
-    },
-    [currentValues, isControlled, onSelectionChange, selectMode]
-  );
-  return useMemo2(
-    () => ({ currentValues, onToggle }),
-    [currentValues, onToggle]
-  );
-}
-
-// src/components/chip/chip-group.tsx
-var ChipGroup = ({
-  children,
-  isSelectable = false,
-  selectMode = "single",
-  variant = "solid",
-  themeColor = "default",
-  size = "md",
-  radius = "full",
-  isDisabled = false,
-  selectedValues,
-  defaultSelectedValues,
-  onSelectionChange,
-  spacing = 8,
-  customAppearance
-}) => {
-  const { currentValues, onToggle } = useChipGroupSelection(
-    selectMode,
-    selectedValues,
-    defaultSelectedValues,
-    onSelectionChange
-  );
-  const contextValue = React2.useMemo(
-    () => ({
-      variant,
-      themeColor,
-      size,
-      radius,
-      isDisabled,
-      isSelectable,
-      selectMode,
-      selectedValues: currentValues,
-      onToggle
-    }),
-    [
-      variant,
-      themeColor,
-      size,
-      radius,
-      isDisabled,
-      isSelectable,
-      selectMode,
-      currentValues,
-      onToggle
-    ]
-  );
-  return /* @__PURE__ */ React2.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [
-        styles.groupContainer,
-        { gap: spacing },
-        customAppearance?.container
-      ],
-      accessible: true
-    },
-    children
-  ));
-};
-
-// src/components/chip/chip-item.tsx
-import React3, { useContext } from "react";
-function getSelectableVariant(baseVariant, isSelected) {
-  if (isSelected) {
-    return baseVariant;
-  }
-  if (baseVariant === "solid" || baseVariant === "shadow") {
-    return "bordered";
-  }
-  return "light";
-}
-var ChipItem = ({
-  value,
-  children,
-  variant,
-  themeColor,
-  avatar,
-  startContent,
-  endContent,
-  isDisabled,
-  customAppearance
-}) => {
-  const groupContext = useContext(ChipGroupContext);
-  if (!groupContext) {
-    return null;
-  }
-  const resolvedVariant = variant ?? groupContext.variant;
-  const resolvedColor = themeColor ?? groupContext.themeColor;
-  const resolvedDisabled = isDisabled ?? groupContext.isDisabled;
-  const isSelected = groupContext.selectedValues.includes(value);
-  const chipVariant = groupContext.isSelectable ? getSelectableVariant(resolvedVariant, isSelected) : resolvedVariant;
-  const handlePress = groupContext.isSelectable ? () => groupContext.onToggle(value) : void 0;
-  return /* @__PURE__ */ React3.createElement(
-    Chip,
-    {
-      variant: chipVariant,
-      themeColor: resolvedColor,
-      size: groupContext.size,
-      radius: groupContext.radius,
-      isDisabled: resolvedDisabled,
-      avatar,
-      startContent,
-      endContent,
-      customAppearance,
-      onPress: handlePress
-    },
-    children
-  );
-};
-
-export {
-  Chip,
-  ChipGroup,
-  ChipItem
-};

package/dist/chunk-XJKA22BK.js

@@ -1,197 +0,0 @@
-import {
-  useXUITheme
-} from "./chunk-NBRASCX4.js";
-
-// src/components/badge/badge.tsx
-import React from "react";
-import { Text, View } from "react-native";
-
-// src/components/badge/badge.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    position: "relative",
-    alignSelf: "flex-start"
-  },
-  badge: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  text: {
-    textAlign: "center",
-    fontWeight: "600",
-    includeFontPadding: false,
-    textAlignVertical: "center"
-  }
-});
-
-// src/components/badge/badge.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-var sizeMap = {
-  sm: { height: 16, minWidth: 16, dot: 8 },
-  md: { height: 20, minWidth: 20, dot: 10 },
-  lg: { height: 24, minWidth: 24, dot: 12 }
-};
-var fontSizeMap = {
-  sm: 9,
-  md: 10,
-  lg: 12
-};
-function useBadgeSizeStyles(size, isDot, isOneChar) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const { height, minWidth, dot } = sizeMap[size];
-    const fontSize = fontSizeMap[size];
-    if (isDot) {
-      return {
-        height: dot,
-        minWidth: dot,
-        paddingHorizontal: 0,
-        fontSize
-      };
-    }
-    if (isOneChar) {
-      return {
-        height,
-        minWidth: height,
-        paddingHorizontal: 0,
-        fontSize
-      };
-    }
-    const paddingHorizontal = size === "sm" ? theme.spacing.xs : theme.spacing.sm;
-    return {
-      height,
-      minWidth,
-      paddingHorizontal,
-      fontSize
-    };
-  }, [isDot, isOneChar, size, theme]);
-}
-function useBadgeVariantStyles(themeColor, variant) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return useMemo(() => {
-    if (variant === "flat") {
-      return {
-        backgroundColor: colorScheme.background,
-        color: colorScheme.main
-      };
-    }
-    if (variant === "faded") {
-      return {
-        backgroundColor: withOpacity(colorScheme.background, 0.7),
-        color: colorScheme.main
-      };
-    }
-    if (variant === "shadow") {
-      return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.foreground,
-        shadow: theme.shadows.sm
-      };
-    }
-    return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.foreground
-    };
-  }, [colorScheme, theme, variant]);
-}
-function useBadgeRadiusStyles(radius, height) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (radius === "full") {
-      return { borderRadius: height / 2 };
-    }
-    return { borderRadius: theme.borderRadius[radius] };
-  }, [height, radius, theme.borderRadius]);
-}
-function useBadgePlacementStyles(placement, height) {
-  return useMemo(() => {
-    const offset = Math.round(height * 0.3);
-    switch (placement) {
-      case "top-left":
-        return { top: -offset, left: -offset };
-      case "bottom-right":
-        return { bottom: -offset, right: -offset };
-      case "bottom-left":
-        return { bottom: -offset, left: -offset };
-      case "top-right":
-      default:
-        return { top: -offset, right: -offset };
-    }
-  }, [height, placement]);
-}
-
-// src/components/badge/badge.tsx
-var Badge = ({
-  children,
-  content,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius = "full",
-  placement = "top-right",
-  showOutline = true,
-  disableOutline = false,
-  isInvisible = false,
-  isDot = false,
-  isOneChar = false,
-  disableAnimation = false,
-  customAppearance
-}) => {
-  const shouldRender = !isInvisible && (isDot || content !== void 0);
-  if (!shouldRender && !children) {
-    return null;
-  }
-  const forceOneChar = isOneChar || radius === "full";
-  const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
-  const variantStyles = useBadgeVariantStyles(themeColor, variant);
-  const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);
-  const placementStyles = useBadgePlacementStyles(placement, sizeStyles.height);
-  const outlineEnabled = disableOutline ? false : showOutline;
-  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
-  const badgeContent = isDot ? null : content;
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, children, shouldRender && /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.badge,
-        {
-          minWidth: sizeStyles.minWidth,
-          height: sizeStyles.height,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: variantStyles.backgroundColor,
-          opacity: disableAnimation ? 1 : 1
-        },
-        radiusStyles,
-        placementStyles,
-        outlineStyles,
-        variantStyles.shadow,
-        customAppearance?.badge
-      ],
-      accessible: true,
-      accessibilityRole: "text"
-    },
-    badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          styles.text,
-          {
-            fontSize: sizeStyles.fontSize,
-            color: variantStyles.color
-          },
-          customAppearance?.text
-        ]
-      },
-      badgeContent
-    )
-  ));
-};
-
-export {
-  Badge
-};