@xaui/native 0.0.14 → 0.0.15

package/dist/chip/index.cjs

@@ -0,0 +1,584 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/chip/index.ts
+var chip_exports = {};
+__export(chip_exports, {
+  Chip: () => Chip,
+  ChipGroup: () => ChipGroup,
+  ChipItem: () => ChipItem
+});
+module.exports = __toCommonJS(chip_exports);
+
+// src/components/chip/chip.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/chip/chip.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.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
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/chip/chip.hook.ts
+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 (0, import_react6.useMemo)(() => {
+    const { height, paddingH, fontSize } = sizeMap[size];
+    return { height, paddingHorizontal: paddingH, fontSize };
+  }, [size]);
+}
+function useChipDotSize(size) {
+  return (0, import_react6.useMemo)(() => dotSizeMap[size], [size]);
+}
+function useChipCloseSize(size) {
+  return (0, import_react6.useMemo)(() => closeSizeMap[size], [size]);
+}
+function useChipRadiusStyles(radius, height) {
+  const theme = useXUITheme();
+  return (0, import_react6.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 = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeColor];
+  return (0, import_react6.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: (0, import_core.withOpacity)(colorScheme.background, 0.7),
+          color: colorScheme.main,
+          borderWidth: 1,
+          borderColor: (0, import_core.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] = import_react7.default.useState(false);
+  const [isClosing, setIsClosing] = import_react7.default.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 = import_react7.default.useRef(new import_react_native5.Animated.Value(1)).current;
+  const opacity = import_react7.default.useRef(new import_react_native5.Animated.Value(1)).current;
+  const isClosingRef = import_react7.default.useRef(false);
+  const colorProgress = import_react7.default.useRef(new import_react_native5.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 = import_react7.default.useRef({
+    backgroundColor: targetBackgroundColor,
+    borderColor: targetBorderColor,
+    textColor: targetTextColor,
+    dotColor: targetDotColor
+  });
+  import_react7.default.useEffect(() => {
+    if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
+      return;
+    }
+    colorProgress.setValue(0);
+    import_react_native5.Animated.timing(colorProgress, {
+      toValue: 1,
+      duration: 180,
+      easing: import_react_native5.Easing.out(import_react_native5.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 = import_react7.default.useCallback(() => {
+    if (!isInteractive || isDisabled || isClosing || hasClose) return;
+    import_react_native5.Animated.timing(scale, {
+      toValue: 0.97,
+      duration: 90,
+      easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
+  const handlePressOut = import_react7.default.useCallback(() => {
+    if (!isInteractive || isDisabled || isClosing || hasClose) return;
+    import_react_native5.Animated.timing(scale, {
+      toValue: 1,
+      duration: 120,
+      easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
+  const handleChipPress = import_react7.default.useCallback(() => {
+    if (isDisabled || isClosing || isClosingRef.current) return;
+    if (hasClose && onClose) {
+      isClosingRef.current = true;
+      setIsClosing(true);
+      import_react_native5.Animated.parallel([
+        import_react_native5.Animated.timing(opacity, {
+          toValue: 0,
+          duration: 180,
+          easing: import_react_native5.Easing.in(import_react_native5.Easing.quad),
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(scale, {
+          toValue: 0.88,
+          duration: 180,
+          easing: import_react_native5.Easing.in(import_react_native5.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__ */ import_react7.default.createElement(import_react_native5.Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.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__ */ import_react7.default.createElement(
+      import_react_native5.Animated.View,
+      {
+        style: [
+          styles.dot,
+          {
+            width: dotSize,
+            height: dotSize,
+            backgroundColor: animatedDotColor
+          },
+          customAppearance?.dot
+        ]
+      }
+    ),
+    avatar && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.avatar }, avatar),
+    startContent && !avatar && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.startContent }, startContent),
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Animated.Text,
+      {
+        style: [
+          styles.text,
+          { fontSize: sizeStyles.fontSize, color: animatedTextColor },
+          customAppearance?.text
+        ]
+      },
+      children
+    ),
+    endContent && !hasClose && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.endContent }, endContent),
+    hasClose && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.View,
+      {
+        style: [
+          styles.closeButton,
+          { width: closeSize, height: closeSize },
+          customAppearance?.closeButton
+        ]
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Animated.Text,
+        {
+          style: {
+            fontSize: closeSize - 2,
+            color: animatedTextColor,
+            lineHeight: closeSize
+          }
+        },
+        "\u2715"
+      )
+    )
+  ));
+  if (isInteractive) {
+    return /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Pressable,
+      {
+        onPress: isDisabled || isClosing ? void 0 : handleChipPress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        disabled: isDisabled || isClosing
+      },
+      chipContent
+    );
+  }
+  return chipContent;
+};
+
+// src/components/chip/chip-group.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/components/chip/chip-context.ts
+var import_react8 = require("react");
+var ChipGroupContext = (0, import_react8.createContext)(null);
+
+// src/components/chip/chip-group.hook.ts
+var import_react9 = require("react");
+function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
+  const [internalValues, setInternalValues] = (0, import_react9.useState)(
+    defaultSelectedValues ?? []
+  );
+  const isControlled = selectedValues !== void 0;
+  const currentValues = isControlled ? selectedValues : internalValues;
+  const onToggle = (0, import_react9.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 (0, import_react9.useMemo)(
+    () => ({ 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 = import_react10.default.useMemo(
+    () => ({
+      variant,
+      themeColor,
+      size,
+      radius,
+      isDisabled,
+      isSelectable,
+      selectMode,
+      selectedValues: currentValues,
+      onToggle
+    }),
+    [
+      variant,
+      themeColor,
+      size,
+      radius,
+      isDisabled,
+      isSelectable,
+      selectMode,
+      currentValues,
+      onToggle
+    ]
+  );
+  return /* @__PURE__ */ import_react10.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.View,
+    {
+      style: [
+        styles.groupContainer,
+        { gap: spacing },
+        customAppearance?.container
+      ],
+      accessible: true
+    },
+    children
+  ));
+};
+
+// src/components/chip/chip-item.tsx
+var import_react11 = __toESM(require("react"), 1);
+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 = (0, import_react11.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__ */ import_react11.default.createElement(
+    Chip,
+    {
+      variant: chipVariant,
+      themeColor: resolvedColor,
+      size: groupContext.size,
+      radius: groupContext.radius,
+      isDisabled: resolvedDisabled,
+      avatar,
+      startContent,
+      endContent,
+      customAppearance,
+      onPress: handlePress
+    },
+    children
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chip,
+  ChipGroup,
+  ChipItem
+});