@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/chip/index.cjs

@@ -1,503 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/chip/chip.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/chip/chip.style.ts
-
-var styles = _reactnative.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 _core = require('@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 _react.useMemo.call(void 0, () => {
-    const { height, paddingH, fontSize } = sizeMap[size];
-    return { height, paddingHorizontal: paddingH, fontSize };
-  }, [size]);
-}
-function useChipDotSize(size) {
-  return _react.useMemo.call(void 0, () => dotSizeMap[size], [size]);
-}
-function useChipCloseSize(size) {
-  return _react.useMemo.call(void 0, () => closeSizeMap[size], [size]);
-}
-function useChipRadiusStyles(radius, height) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    if (radius === "full") {
-      return { borderRadius: height / 2 };
-    }
-    return { borderRadius: theme.borderRadius[radius] };
-  }, [height, radius, theme.borderRadius]);
-}
-function useChipVariantStyles(themeColor, variant) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeColor];
-  return _react.useMemo.call(void 0, () => {
-    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: _core.withOpacity.call(void 0, colorScheme.container, 0.7),
-          color: colorScheme.onContainer,
-          borderWidth: 1,
-          borderColor: _core.withOpacity.call(void 0, 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] = _react2.default.useState(false);
-  const [isClosing, setIsClosing] = _react2.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 = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const opacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const isClosingRef = _react2.default.useRef(false);
-  const colorProgress = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const targetBackgroundColor = _nullishCoalesce(variantStyles.backgroundColor, () => ( "transparent"));
-  const targetBorderColor = _nullishCoalesce(variantStyles.borderColor, () => ( "transparent"));
-  const targetTextColor = _nullishCoalesce(variantStyles.color, () => ( "#000000"));
-  const targetDotColor = _nullishCoalesce(variantStyles.dotColor, () => ( targetTextColor));
-  const previousColorsRef = _react2.default.useRef({
-    backgroundColor: targetBackgroundColor,
-    borderColor: targetBorderColor,
-    textColor: targetTextColor,
-    dotColor: targetDotColor
-  });
-  _react2.default.useEffect(() => {
-    if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
-      return;
-    }
-    colorProgress.setValue(0);
-    _reactnative.Animated.timing(colorProgress, {
-      toValue: 1,
-      duration: 180,
-      easing: _reactnative.Easing.out(_reactnative.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 = _react2.default.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    _reactnative.Animated.timing(scale, {
-      toValue: 0.97,
-      duration: 90,
-      easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handlePressOut = _react2.default.useCallback(() => {
-    if (!isInteractive || isDisabled || isClosing || hasClose) return;
-    _reactnative.Animated.timing(scale, {
-      toValue: 1,
-      duration: 120,
-      easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [hasClose, isInteractive, isClosing, isDisabled, scale]);
-  const handleChipPress = _react2.default.useCallback(() => {
-    if (isDisabled || isClosing || isClosingRef.current) return;
-    if (hasClose && onClose) {
-      isClosingRef.current = true;
-      setIsClosing(true);
-      _reactnative.Animated.parallel([
-        _reactnative.Animated.timing(opacity, {
-          toValue: 0,
-          duration: 180,
-          easing: _reactnative.Easing.in(_reactnative.Easing.quad),
-          useNativeDriver: true
-        }),
-        _reactnative.Animated.timing(scale, {
-          toValue: 0.88,
-          duration: 180,
-          easing: _reactnative.Easing.in(_reactnative.Easing.quad),
-          useNativeDriver: true
-        })
-      ]).start(() => {
-        setIsClosed(true);
-        onClose();
-        setIsClosing(false);
-        isClosingRef.current = false;
-      });
-      return;
-    }
-    _optionalChain([onPress, 'optionalCall', _ => _()]);
-  }, [hasClose, isClosing, isDisabled, onClose, onPress, opacity, scale]);
-  if (isClosed) {
-    return null;
-  }
-  const chipContent = /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Animated.View,
-    {
-      style: [
-        styles.chip,
-        {
-          height: sizeStyles.height,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: animatedBackgroundColor,
-          borderWidth: variantStyles.borderWidth,
-          borderColor: animatedBorderColor
-        },
-        radiusStyles,
-        variantStyles.shadow,
-        isDisabled && styles.disabled,
-        _optionalChain([customAppearance, 'optionalAccess', _2 => _2.container])
-      ],
-      accessible: true,
-      accessibilityRole: "text"
-    },
-    isDotVariant && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.dot,
-          {
-            width: dotSize,
-            height: dotSize,
-            backgroundColor: animatedDotColor
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _3 => _3.dot])
-        ]
-      }
-    ),
-    avatar && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.avatar }, avatar),
-    startContent && !avatar && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.startContent }, startContent),
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.Text,
-      {
-        style: [
-          styles.text,
-          { fontSize: sizeStyles.fontSize, color: animatedTextColor },
-          _optionalChain([customAppearance, 'optionalAccess', _4 => _4.text])
-        ]
-      },
-      children
-    ),
-    endContent && !hasClose && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.endContent }, endContent),
-    hasClose && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [
-          styles.closeButton,
-          { width: closeSize, height: closeSize },
-          _optionalChain([customAppearance, 'optionalAccess', _5 => _5.closeButton])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.Text,
-        {
-          style: {
-            fontSize: closeSize - 2,
-            color: animatedTextColor,
-            lineHeight: closeSize
-          }
-        },
-        "\u2715"
-      )
-    )
-  ));
-  if (isInteractive) {
-    return /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Pressable,
-      {
-        onPress: isDisabled || isClosing ? void 0 : handleChipPress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        disabled: isDisabled || isClosing
-      },
-      chipContent
-    );
-  }
-  return chipContent;
-};
-
-// src/components/chip/chip-group.tsx
-
-
-
-// src/components/chip/chip-context.ts
-
-var ChipGroupContext = _react.createContext.call(void 0, null);
-
-// src/components/chip/chip-group.hook.ts
-
-function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
-  const [internalValues, setInternalValues] = _react.useState.call(void 0, 
-    _nullishCoalesce(defaultSelectedValues, () => ( []))
-  );
-  const isControlled = selectedValues !== void 0;
-  const currentValues = isControlled ? selectedValues : internalValues;
-  const onToggle = _react.useCallback.call(void 0, 
-    (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);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _6 => _6(nextValues)]);
-    },
-    [currentValues, isControlled, onSelectionChange, selectMode]
-  );
-  return _react.useMemo.call(void 0, () => ({ 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.default.useMemo(
-    () => ({
-      variant,
-      themeColor,
-      size,
-      radius,
-      isDisabled,
-      isSelectable,
-      selectMode,
-      selectedValues: currentValues,
-      onToggle
-    }),
-    [
-      variant,
-      themeColor,
-      size,
-      radius,
-      isDisabled,
-      isSelectable,
-      selectMode,
-      currentValues,
-      onToggle
-    ]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.groupContainer,
-        { gap: spacing },
-        _optionalChain([customAppearance, 'optionalAccess', _7 => _7.container])
-      ],
-      accessible: true
-    },
-    children
-  ));
-};
-
-// src/components/chip/chip-item.tsx
-
-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 = _react.useContext.call(void 0, ChipGroupContext);
-  if (!groupContext) {
-    return null;
-  }
-  const resolvedVariant = _nullishCoalesce(variant, () => ( groupContext.variant));
-  const resolvedColor = _nullishCoalesce(themeColor, () => ( groupContext.themeColor));
-  const resolvedDisabled = _nullishCoalesce(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__ */ _react2.default.createElement(
-    Chip,
-    {
-      variant: chipVariant,
-      themeColor: resolvedColor,
-      size: groupContext.size,
-      radius: groupContext.radius,
-      isDisabled: resolvedDisabled,
-      avatar,
-      startContent,
-      endContent,
-      customAppearance,
-      onPress: handlePress
-    },
-    children
-  );
-};
-
-
-
-
-exports.Chip = Chip; exports.ChipGroup = ChipGroup; exports.ChipItem = ChipItem;

package/dist/chip/index.d.cts

@@ -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 };