@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/chip/index.d.ts

@@ -1,195 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type ChipVariant = 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'dot';
-type ChipSize = 'sm' | 'md' | 'lg';
-type ChipRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type ChipSelectMode = 'single' | 'multiple';
-type ChipCustomAppearance = {
-    /**
-     * Custom styles for the chip container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the chip text
-     */
-    text?: TextStyle;
-    /**
-     * Custom styles for the close button
-     */
-    closeButton?: ViewStyle;
-    /**
-     * Custom styles for the dot indicator
-     */
-    dot?: ViewStyle;
-};
-type ChipProps = {
-    /**
-     * The content to display inside the chip.
-     */
-    children: ReactNode;
-    /**
-     * The visual variant of the chip.
-     * @default 'solid'
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color of the chip.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The size of the chip.
-     * @default 'md'
-     */
-    size?: ChipSize;
-    /**
-     * The border radius of the chip.
-     * @default 'full'
-     */
-    radius?: ChipRadius;
-    /**
-     * Avatar or image to display at the start.
-     */
-    avatar?: ReactNode;
-    /**
-     * Content to display at the start of the chip.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the chip.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the chip is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom appearance styles for chip parts.
-     */
-    customAppearance?: ChipCustomAppearance;
-    /**
-     * Callback fired when the close button is pressed.
-     * When provided, a close button is rendered.
-     */
-    onClose?: () => void;
-    /**
-     * Callback fired when the chip is pressed.
-     */
-    onPress?: () => void;
-};
-type ChipItemProps = {
-    /**
-     * Unique key for the chip item within a group.
-     */
-    value: string;
-    /**
-     * The content to display inside the chip item.
-     */
-    children: ReactNode;
-    /**
-     * The visual variant of the chip item.
-     * Overrides the group variant if set.
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color of the chip item.
-     * Overrides the group color if set.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Avatar or image to display at the start.
-     */
-    avatar?: ReactNode;
-    /**
-     * Content to display at the start of the chip.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the chip.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the chip item is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom appearance styles for chip parts.
-     */
-    customAppearance?: ChipCustomAppearance;
-};
-type ChipGroupProps = {
-    /**
-     * ChipItem children.
-     */
-    children: ReactNode;
-    /**
-     * Whether chips in the group are selectable.
-     * @default false
-     */
-    isSelectable?: boolean;
-    /**
-     * Selection mode when isSelectable is true.
-     * @default 'single'
-     */
-    selectMode?: ChipSelectMode;
-    /**
-     * The visual variant applied to all chips.
-     * @default 'solid'
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color applied to all chips.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The size applied to all chips.
-     * @default 'md'
-     */
-    size?: ChipSize;
-    /**
-     * The border radius applied to all chips.
-     * @default 'full'
-     */
-    radius?: ChipRadius;
-    /**
-     * Whether all chips in the group are disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Controlled selected values.
-     */
-    selectedValues?: string[];
-    /**
-     * Default selected values for uncontrolled mode.
-     */
-    defaultSelectedValues?: string[];
-    /**
-     * Callback fired when the selection changes.
-     */
-    onSelectionChange?: (values: string[]) => void;
-    /**
-     * Spacing between chips.
-     * @default 8
-     */
-    spacing?: number;
-    /**
-     * Custom appearance styles for the group container.
-     */
-    customAppearance?: {
-        container?: ViewStyle;
-    };
-};
-
-declare const Chip: React.FC<ChipProps>;
-
-declare const ChipGroup: React.FC<ChipGroupProps>;
-
-declare const ChipItem: React.FC<ChipItemProps>;
-
-export { Chip, ChipGroup, type ChipGroupProps, ChipItem, type ChipItemProps, type ChipProps, type ChipRadius, type ChipSelectMode, type ChipSize, type ChipVariant };

package/dist/chip/index.js

@@ -1,503 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.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.container,
-          color: colorScheme.onContainer
-        };
-      case "faded":
-        return {
-          backgroundColor: withOpacity(colorScheme.container, 0.7),
-          color: colorScheme.onContainer,
-          borderWidth: 1,
-          borderColor: withOpacity(colorScheme.main, 0.3)
-        };
-      case "shadow":
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.onMain,
-          shadow: theme.shadows.sm
-        };
-      case "dot":
-        return {
-          backgroundColor: colorScheme.container,
-          color: colorScheme.onContainer,
-          dotColor: colorScheme.main
-        };
-      case "solid":
-      default:
-        return {
-          backgroundColor: colorScheme.main,
-          color: colorScheme.onMain
-        };
-    }
-  }, [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
-};