@xaui/native 0.0.16 → 0.0.18

package/dist/chip/index.js

@@ -1,9 +1,501 @@
+import "../chunk-DXXNBF5P.js";
 import {
-  Chip,
-  ChipGroup,
-  ChipItem
-} from "../chunk-QLEQYKG5.js";
-import "../chunk-NBRASCX4.js";
+  useXUITheme
+} from "../chunk-LTKYHG5V.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,

package/dist/chunk-DXXNBF5P.js

@@ -0,0 +1,7 @@
+// src/core/index.ts
+import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
+
+export {
+  defaultDarkTheme,
+  defaultTheme
+};

package/dist/{chunk-MKHBEJLO.js → chunk-F7WH4DMG.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-LTKYHG5V.js";
 
 // src/components/indicator/indicator.tsx
 import React3 from "react";

package/dist/{chunk-II4QINLG.js → chunk-JEGEPGVU.js}

@@ -1,9 +1,9 @@
 import {
   ActivityIndicator
-} from "./chunk-MKHBEJLO.js";
+} from "./chunk-F7WH4DMG.js";
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-LTKYHG5V.js";
 
 // src/components/fab/fab.tsx
 import React from "react";

package/dist/{chunk-NBRASCX4.js → chunk-LTKYHG5V.js}

@@ -1,9 +1,3 @@
-// src/core/theme-context.tsx
-import React3, { createContext as createContext2 } from "react";
-import { useColorScheme } from "react-native";
-import { defaultTheme } from "@xaui/core/theme";
-import { colors } from "@xaui/core/palette";
-
 // src/core/portal/portal.tsx
 import { useContext, useEffect, useLayoutEffect, useRef } from "react";
 
@@ -57,6 +51,10 @@ var PortalHost = ({ children }) => {
 };
 
 // src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext2(null);
 function XUIProvider({
   children,
@@ -67,7 +65,7 @@ function XUIProvider({
   const theme = React3.useMemo(() => {
     if (!darkTheme && !lightTheme) return defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    const mode = colorScheme === "dark" ? "dark" : "light";
+    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
     if (!activeTheme) return defaultTheme;
     return {
       ...defaultTheme,
@@ -128,9 +126,6 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
-// src/core/index.ts
-import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
-
 export {
   Portal,
   PortalHost,
@@ -139,7 +134,5 @@ export {
   useXUITheme,
   useXUIColors,
   useXUIPalette,
-  useBorderRadiusStyles,
-  defaultDarkTheme,
-  defaultTheme2 as defaultTheme
+  useBorderRadiusStyles
 };

package/dist/{chunk-GNJIET26.js → chunk-LUBWRVI2.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-NBRASCX4.js";
+} from "./chunk-LTKYHG5V.js";
 
 // src/components/divider/divider.tsx
 import React from "react";

package/dist/core/index.cjs

@@ -110,7 +110,7 @@ function XUIProvider({
   const theme = import_react4.default.useMemo(() => {
     if (!darkTheme && !lightTheme) return import_theme.defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    const mode = colorScheme === "dark" ? "dark" : "light";
+    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
     if (!activeTheme) return import_theme.defaultTheme;
     return {
       ...import_theme.defaultTheme,

package/dist/core/index.js

@@ -1,13 +1,15 @@
+import {
+  defaultDarkTheme,
+  defaultTheme
+} from "../chunk-DXXNBF5P.js";
 import {
   Portal,
   PortalHost,
   XUIProvider,
-  defaultDarkTheme,
-  defaultTheme,
   useColorMode,
   useXUIColors,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-LTKYHG5V.js";
 export {
   Portal,
   PortalHost,