@xaui/native 0.0.17 → 0.0.18

package/dist/chunk-STUNTRKJ.js

@@ -1,405 +0,0 @@
-import {
-  useBorderRadiusStyles,
-  useXUITheme
-} from "./chunk-MZL77KV5.js";
-
-// src/components/segment-button/segment-button.tsx
-import React, { useCallback, useMemo as useMemo2, useState } from "react";
-import { View } from "react-native";
-
-// src/components/segment-button/segment-button.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    overflow: "hidden",
-    alignSelf: "flex-start"
-  },
-  fullWidth: {
-    width: "100%",
-    alignSelf: "stretch"
-  },
-  segment: {
-    flex: 1
-  },
-  segmentInner: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  segmentContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 4
-  },
-  segmentText: {
-    fontWeight: "500",
-    textAlign: "center"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  divider: {
-    width: 1,
-    alignSelf: "stretch"
-  }
-});
-
-// src/components/segment-button/segment-button.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
-function useSegmentSizeStyles(size) {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const sizes = {
-      xs: {
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        minHeight: 32,
-        fontSize: theme.fontSizes.xs,
-        iconSize: 14
-      },
-      sm: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        minHeight: 36,
-        fontSize: theme.fontSizes.sm,
-        iconSize: 16
-      },
-      md: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        minHeight: 40,
-        fontSize: theme.fontSizes.md,
-        iconSize: 18
-      },
-      lg: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        minHeight: 48,
-        fontSize: theme.fontSizes.lg,
-        iconSize: 20
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-}
-function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const selectedBackgroundColor = withPaletteNumber(colorScheme.main, 400);
-  return useMemo(() => {
-    const variants = {
-      outlined: {
-        containerBackground: "transparent",
-        containerBorderWidth: theme.borderWidth.sm,
-        containerBorderColor: colorScheme.main,
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
-        unselectedTextColor: colorScheme.main
-      },
-      flat: {
-        containerBackground: colorScheme.background,
-        containerBorderWidth: 0,
-        containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
-        unselectedTextColor: colorScheme.main
-      },
-      light: {
-        containerBackground: "transparent",
-        containerBorderWidth: 0,
-        containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
-        unselectedTextColor: colorScheme.main
-      },
-      faded: {
-        containerBackground: `${colorScheme.background}95`,
-        containerBorderWidth: theme.borderWidth.sm,
-        containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
-        unselectedTextColor: colorScheme.main
-      }
-    };
-    const baseStyle = variants[variant] ?? variants.outlined;
-    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
-    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
-    return {
-      ...baseStyle,
-      containerShadow: shouldApplyElevation && elevation > 0 ? shadowStyles : baseStyle.containerShadow
-    };
-  }, [variant, colorScheme, theme, elevation]);
-}
-
-// src/components/segment-button/segment-button-context.ts
-import { createContext, useContext } from "react";
-var SegmentButtonContext = createContext(void 0);
-var useSegmentButtonContext = () => {
-  const context = useContext(SegmentButtonContext);
-  if (!context) {
-    throw new Error(
-      "SegmentButtonItem must be used within a SegmentButton component"
-    );
-  }
-  return context;
-};
-
-// src/components/segment-button/segment-button.tsx
-var SegmentButton = ({
-  children,
-  selected: controlledSelected,
-  defaultSelected,
-  onSelectionChange,
-  selectionMode = "single",
-  themeColor = "primary",
-  variant = "outlined",
-  size = "md",
-  radius = "full",
-  fullWidth = false,
-  isDisabled = false,
-  showCheckmark = true,
-  elevation = 0,
-  customAppearance
-}) => {
-  const isControlled = controlledSelected !== void 0;
-  const [internalSelected, setInternalSelected] = useState(
-    () => defaultSelected ?? ""
-  );
-  const selected = isControlled ? controlledSelected : internalSelected;
-  const selectedKeys = useMemo2(() => {
-    if (Array.isArray(selected)) return selected;
-    return selected ? [selected] : [];
-  }, [selected]);
-  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
-  const radiusStyles = useBorderRadiusStyles(radius);
-  const toggleItem = useCallback(
-    (key) => {
-      let nextSelected;
-      if (selectionMode === "single") {
-        nextSelected = key;
-      } else {
-        const isCurrentlySelected = selectedKeys.includes(key);
-        if (isCurrentlySelected && selectedKeys.length > 1) {
-          nextSelected = selectedKeys.filter((k) => k !== key);
-        } else if (!isCurrentlySelected) {
-          nextSelected = [...selectedKeys, key];
-        } else {
-          return;
-        }
-      }
-      if (!isControlled) {
-        setInternalSelected(nextSelected);
-      }
-      onSelectionChange?.(nextSelected);
-    },
-    [selectionMode, selectedKeys, onSelectionChange, isControlled]
-  );
-  const contextValue = useMemo2(
-    () => ({
-      selectedKeys,
-      toggleItem,
-      themeColor,
-      variant,
-      size,
-      elevation,
-      isDisabled,
-      showCheckmark
-    }),
-    [
-      selectedKeys,
-      toggleItem,
-      themeColor,
-      variant,
-      size,
-      elevation,
-      isDisabled,
-      showCheckmark
-    ]
-  );
-  const showDivider = variant === "outlined" || variant === "faded";
-  const childrenArray = React.Children.toArray(children);
-  const getItemKey = (child) => {
-    if (!React.isValidElement(child)) {
-      return void 0;
-    }
-    return child.props.itemKey;
-  };
-  return /* @__PURE__ */ React.createElement(SegmentButtonContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.container,
-        {
-          backgroundColor: variantStyles.containerBackground,
-          borderWidth: variantStyles.containerBorderWidth,
-          borderColor: variantStyles.containerBorderColor,
-          borderRadius: radiusStyles.borderRadius,
-          ...variantStyles.containerShadow
-        },
-        fullWidth && styles.fullWidth,
-        customAppearance?.container
-      ]
-    },
-    childrenArray.map((child, index) => {
-      const isLast = index === childrenArray.length - 1;
-      const childItemKey = getItemKey(child);
-      const childKey = childItemKey ?? index;
-      const isSelected = selectedKeys.includes(String(childKey));
-      const nextChildKey = !isLast ? getItemKey(childrenArray[index + 1]) : void 0;
-      const nextSelected = nextChildKey ? selectedKeys.includes(String(nextChildKey)) : false;
-      return /* @__PURE__ */ React.createElement(React.Fragment, { key: childKey }, child, showDivider && !isLast && !isSelected && !nextSelected && /* @__PURE__ */ React.createElement(
-        View,
-        {
-          style: [
-            styles.divider,
-            {
-              backgroundColor: variantStyles.containerBorderColor
-            }
-          ]
-        }
-      ));
-    })
-  ));
-};
-
-// src/components/segment-button/segment-button-item.tsx
-import React2, { useEffect, useRef } from "react";
-import { Pressable, Text, View as View2, Animated as Animated2 } from "react-native";
-import Svg, { Path } from "react-native-svg";
-
-// src/components/segment-button/segment-button.animation.ts
-import { Animated } from "react-native";
-var runCheckmarkEnterAnimation = (animatedValue) => {
-  animatedValue.setValue(0);
-  Animated.timing(animatedValue, {
-    toValue: 1,
-    duration: 200,
-    useNativeDriver: true
-  }).start();
-};
-var runCheckmarkExitAnimation = (animatedValue) => {
-  Animated.timing(animatedValue, {
-    toValue: 0,
-    duration: 150,
-    useNativeDriver: true
-  }).start();
-};
-
-// src/components/segment-button/segment-button-item.tsx
-var CheckIcon = ({ size, color }) => /* @__PURE__ */ React2.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React2.createElement(
-  Path,
-  {
-    d: "M20 6L9 17l-5-5",
-    stroke: color,
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var SegmentButtonItem = ({
-  itemKey,
-  label,
-  startContent,
-  icon,
-  endContent,
-  checkIndicator,
-  isDisabled: itemDisabled = false,
-  customAppearance
-}) => {
-  const {
-    selectedKeys,
-    toggleItem,
-    themeColor,
-    variant,
-    size,
-    elevation,
-    isDisabled: groupDisabled,
-    showCheckmark
-  } = useSegmentButtonContext();
-  const isSelected = selectedKeys.includes(itemKey);
-  const disabled = groupDisabled || itemDisabled;
-  const checkmarkAnim = useRef(new Animated2.Value(isSelected ? 1 : 0)).current;
-  const prevSelected = useRef(isSelected);
-  useEffect(() => {
-    if (isSelected && !prevSelected.current) {
-      runCheckmarkEnterAnimation(checkmarkAnim);
-    } else if (!isSelected && prevSelected.current) {
-      runCheckmarkExitAnimation(checkmarkAnim);
-    }
-    prevSelected.current = isSelected;
-  }, [isSelected, checkmarkAnim]);
-  const sizeStyles = useSegmentSizeStyles(size);
-  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
-  const handlePress = () => {
-    if (!disabled) {
-      toggleItem(itemKey);
-    }
-  };
-  const backgroundColor = isSelected ? variantStyles.selectedBackground : variantStyles.unselectedBackground;
-  const textColor = isSelected ? variantStyles.selectedTextColor : variantStyles.unselectedTextColor;
-  const showCheck = isSelected && showCheckmark;
-  const startNode = showCheck ? checkIndicator ?? /* @__PURE__ */ React2.createElement(CheckIcon, { size: sizeStyles.iconSize, color: textColor }) : startContent ?? icon;
-  return /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      style: [styles.segment, disabled && styles.disabled],
-      onPress: handlePress,
-      disabled
-    },
-    /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.segmentInner,
-          {
-            paddingHorizontal: sizeStyles.paddingHorizontal,
-            paddingVertical: sizeStyles.paddingVertical,
-            minHeight: sizeStyles.minHeight,
-            backgroundColor
-          },
-          isSelected ? customAppearance?.selectedSegment : customAppearance?.segment
-        ]
-      },
-      /* @__PURE__ */ React2.createElement(View2, { style: styles.segmentContent }, startNode && /* @__PURE__ */ React2.createElement(
-        Animated2.View,
-        {
-          style: {
-            opacity: showCheck ? checkmarkAnim : 1,
-            transform: [{ scale: showCheck ? checkmarkAnim : 1 }]
-          }
-        },
-        startNode
-      ), /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          numberOfLines: 1,
-          style: [
-            styles.segmentText,
-            {
-              fontSize: sizeStyles.fontSize,
-              color: textColor
-            },
-            isSelected ? customAppearance?.selectedText : customAppearance?.text
-          ]
-        },
-        label
-      ), endContent)
-    )
-  );
-};
-SegmentButtonItem.displayName = "SegmentButtonItem";
-
-export {
-  SegmentButton,
-  SegmentButtonItem
-};

package/dist/chunk-UGDGCMGC.js

@@ -1,197 +0,0 @@
-import {
-  useXUITheme
-} from "./chunk-MZL77KV5.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
-};