@xaui/native 0.0.21 → 0.0.24

package/dist/radio/index.d.ts

@@ -0,0 +1,145 @@
+import React, { ReactNode } from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
+
+type RadioVariant = 'filled' | 'light';
+type RadioLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type RadioOrientation = 'vertical' | 'horizontal';
+type RadioProps = {
+    /**
+     * The label to display alongside the radio.
+     */
+    label?: string;
+    /**
+     * Value associated to this option when used inside RadioGroup.
+     */
+    value?: string;
+    /**
+     * Alignment of the label relative to the radio.
+     * @default 'right'
+     */
+    labelAlignment?: RadioLabelAlignment;
+    /**
+     * The theme color of the radio.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the radio.
+     * @default 'filled'
+     */
+    variant?: RadioVariant;
+    /**
+     * The size of the radio.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The border radius of the radio.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Whether the radio should take full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled checked state when used outside RadioGroup.
+     */
+    isChecked?: boolean;
+    /**
+     * Uncontrolled checked state when used outside RadioGroup.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the radio is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom style for label text.
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Custom style for container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the radio checked state changes.
+     */
+    onValueChange?: (isChecked: boolean) => void;
+};
+type RadioGroupProps = {
+    /**
+     * Group options.
+     */
+    children: ReactNode;
+    /**
+     * Controlled selected value.
+     */
+    value?: string;
+    /**
+     * Uncontrolled default selected value.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether all radios in group are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Shared theme color for radios.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Shared variant for radios.
+     * @default 'filled'
+     */
+    variant?: RadioVariant;
+    /**
+     * Shared size for radios.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Shared radius for radios.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Shared label alignment for radios.
+     * @default 'right'
+     */
+    labelAlignment?: RadioLabelAlignment;
+    /**
+     * Shared full width behavior for radios.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Group orientation.
+     * @default 'vertical'
+     */
+    orientation?: RadioOrientation;
+    /**
+     * Space between options.
+     */
+    gap?: number;
+    /**
+     * Custom style for the group container.
+     */
+    style?: ViewStyle;
+};
+
+declare const Radio: React.FC<RadioProps>;
+
+declare const RadioGroup: React.FC<RadioGroupProps>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioLabelAlignment, type RadioOrientation, type RadioProps, type RadioVariant };

package/dist/radio/index.js

@@ -0,0 +1,464 @@
+import {
+  useXUITheme
+} from "../chunk-4KSZLONZ.js";
+
+// src/components/radio/radio.tsx
+import React2, { useContext, useEffect, useRef, useState } from "react";
+import { Animated as Animated2, Pressable, Text } from "react-native";
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
+
+// src/components/radio/radio-context.ts
+import React from "react";
+var RadioGroupContext = React.createContext(
+  null
+);
+
+// src/components/radio/radio.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+function useSizeStyles(size, variant) {
+  const theme = useXUITheme();
+  const sizeStyles = useMemo(() => {
+    const sizes = {
+      xs: {
+        radioSize: 14,
+        fontSize: theme.fontSizes.xs,
+        dotSize: variant === "light" ? 5 : 4
+      },
+      sm: {
+        radioSize: 18,
+        fontSize: theme.fontSizes.sm,
+        dotSize: variant === "light" ? 7 : 6
+      },
+      md: {
+        radioSize: 22,
+        fontSize: theme.fontSizes.md,
+        dotSize: variant === "light" ? 9 : 8
+      },
+      lg: {
+        radioSize: 26,
+        fontSize: theme.fontSizes.lg,
+        dotSize: variant === "light" ? 11 : 10
+      }
+    };
+    return sizes[size];
+  }, [size, theme, variant]);
+  return sizeStyles;
+}
+function useRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const radiusStyles = useMemo(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, theme]);
+  return radiusStyles;
+}
+function useDotColors(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const dotColors = useMemo(() => {
+    if (!isActive) {
+      return {
+        checked: "transparent"
+      };
+    }
+    if (variant === "filled") {
+      return {
+        checked: colorScheme.foreground
+      };
+    }
+    return {
+      checked: colorScheme.main
+    };
+  }, [colorScheme, isActive, variant]);
+  return dotColors;
+}
+function useVariantStyles(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = useMemo(() => {
+    if (variant === "filled") {
+      return {
+        backgroundColor: "transparent",
+        borderWidth: isActive ? 0 : theme.borderWidth.md,
+        borderColor: isActive ? "transparent" : colorScheme.main
+      };
+    }
+    return {
+      backgroundColor: "transparent",
+      borderWidth: theme.borderWidth.md,
+      borderColor: colorScheme.main
+    };
+  }, [colorScheme.main, isActive, theme.borderWidth.md, variant]);
+  return variantStyles;
+}
+function useContainerStyles(labelAlignment) {
+  const containerStyles = useMemo(() => {
+    const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
+    return {
+      flexDirection: labelAlignment === "left" || labelAlignment === "justify-left" ? "row-reverse" : "row",
+      justifyContent: isJustified ? "space-between" : "flex-start"
+    };
+  }, [labelAlignment]);
+  return containerStyles;
+}
+
+// src/components/radio/radio.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  group: {
+    width: "100%"
+  },
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  radio: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative"
+  },
+  background: {
+    position: "absolute",
+    width: "100%",
+    height: "100%"
+  },
+  dot: {
+    zIndex: 10
+  },
+  label: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  disabledText: {
+    opacity: 0.7
+  }
+});
+
+// src/components/radio/radio.animation.ts
+import { Animated } from "react-native";
+var runDotInAnimation = (dotScale, dotOpacity) => {
+  Animated.parallel([
+    Animated.spring(dotScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      tension: 90,
+      friction: 9
+    }),
+    Animated.timing(dotOpacity, {
+      toValue: 1,
+      duration: 180,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runDotOutAnimation = (dotScale, dotOpacity) => {
+  Animated.parallel([
+    Animated.spring(dotScale, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 90,
+      friction: 9
+    }),
+    Animated.timing(dotOpacity, {
+      toValue: 0,
+      duration: 140,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runBackgroundInAnimation = (backgroundScale, backgroundOpacity) => {
+  Animated.parallel([
+    Animated.timing(backgroundScale, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    Animated.timing(backgroundOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runBackgroundOutAnimation = (backgroundScale, backgroundOpacity) => {
+  Animated.parallel([
+    Animated.timing(backgroundScale, {
+      toValue: 0.5,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    Animated.timing(backgroundOpacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressInAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 0.95,
+    useNativeDriver: true
+  }).start();
+};
+var runPressOutAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 1,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/radio/radio.tsx
+var Radio = ({
+  label,
+  value,
+  labelAlignment,
+  themeColor,
+  variant,
+  size,
+  radius,
+  fullWidth,
+  isChecked: isCheckedProp,
+  defaultChecked = false,
+  isDisabled,
+  labelStyle,
+  style,
+  onValueChange
+}) => {
+  const group = useContext(RadioGroupContext);
+  const theme = useXUITheme();
+  const resolvedLabelAlignment = labelAlignment ?? group?.labelAlignment ?? "right";
+  const resolvedThemeColor = themeColor ?? group?.themeColor ?? "primary";
+  const resolvedVariant = variant ?? group?.variant ?? "filled";
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedRadius = radius ?? group?.radius ?? "full";
+  const resolvedFullWidth = fullWidth ?? group?.fullWidth ?? false;
+  const resolvedDisabled = !!(isDisabled || group?.isDisabled);
+  const isInGroup = !!group && typeof value === "string";
+  const isControlledStandalone = typeof isCheckedProp === "boolean";
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const groupChecked = isInGroup ? group.selectedValue === value : false;
+  const isChecked = isInGroup ? groupChecked : isControlledStandalone ? isCheckedProp : internalChecked;
+  const colorScheme = theme.colors[getSafeThemeColor2(resolvedThemeColor)];
+  const scale = useRef(new Animated2.Value(1)).current;
+  const backgroundScale = useRef(new Animated2.Value(0.5)).current;
+  const backgroundOpacity = useRef(new Animated2.Value(0)).current;
+  const dotScale = useRef(new Animated2.Value(isChecked ? 1 : 0)).current;
+  const dotOpacity = useRef(new Animated2.Value(isChecked ? 1 : 0)).current;
+  const sizeStyles = useSizeStyles(resolvedSize, resolvedVariant);
+  const radiusStyles = useRadiusStyles(resolvedRadius);
+  const dotColors = useDotColors(resolvedThemeColor, resolvedVariant, isChecked);
+  const variantStyles = useVariantStyles(
+    resolvedThemeColor,
+    resolvedVariant,
+    isChecked
+  );
+  const containerStyles = useContainerStyles(resolvedLabelAlignment);
+  useEffect(() => {
+    if (resolvedVariant !== "filled") return;
+    if (isChecked) {
+      runBackgroundInAnimation(backgroundScale, backgroundOpacity);
+    } else {
+      runBackgroundOutAnimation(backgroundScale, backgroundOpacity);
+    }
+  }, [backgroundOpacity, backgroundScale, isChecked, resolvedVariant]);
+  useEffect(() => {
+    if (isChecked) {
+      runDotInAnimation(dotScale, dotOpacity);
+    } else {
+      runDotOutAnimation(dotScale, dotOpacity);
+    }
+  }, [dotOpacity, dotScale, isChecked]);
+  const handlePress = () => {
+    if (resolvedDisabled || isChecked) return;
+    if (isInGroup && value) {
+      group.onValueChange?.(value);
+      onValueChange?.(true);
+      return;
+    }
+    if (!isControlledStandalone) {
+      setInternalChecked(true);
+    }
+    onValueChange?.(true);
+  };
+  const handlePressIn = () => {
+    if (resolvedDisabled) return;
+    runPressInAnimation(scale);
+  };
+  const handlePressOut = () => {
+    if (resolvedDisabled) return;
+    runPressOutAnimation(scale);
+  };
+  return /* @__PURE__ */ React2.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: resolvedDisabled,
+      accessible: true,
+      accessibilityRole: "radio",
+      accessibilityLabel: label,
+      accessibilityState: {
+        disabled: resolvedDisabled,
+        checked: !!isChecked
+      },
+      style: [
+        styles.container,
+        containerStyles,
+        resolvedFullWidth && styles.fullWidth,
+        resolvedDisabled && styles.disabled,
+        style
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(
+      Animated2.View,
+      {
+        style: [
+          styles.radio,
+          {
+            width: sizeStyles.radioSize,
+            height: sizeStyles.radioSize,
+            ...radiusStyles,
+            ...variantStyles
+          },
+          {
+            transform: [{ scale }]
+          }
+        ]
+      },
+      resolvedVariant === "filled" && /* @__PURE__ */ React2.createElement(
+        Animated2.View,
+        {
+          style: [
+            styles.background,
+            radiusStyles,
+            {
+              backgroundColor: colorScheme.main,
+              transform: [{ scale: backgroundScale }],
+              opacity: backgroundOpacity
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ React2.createElement(
+        Animated2.View,
+        {
+          style: [
+            styles.dot,
+            {
+              width: sizeStyles.dotSize,
+              height: sizeStyles.dotSize,
+              borderRadius: sizeStyles.dotSize / 2,
+              backgroundColor: dotColors.checked,
+              opacity: dotOpacity,
+              transform: [{ scale: dotScale }]
+            }
+          ]
+        }
+      )
+    ),
+    label && /* @__PURE__ */ React2.createElement(
+      Text,
+      {
+        style: [
+          styles.label,
+          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
+          resolvedDisabled && styles.disabledText,
+          labelStyle
+        ]
+      },
+      label
+    )
+  );
+};
+
+// src/components/radio/radio-group.tsx
+import React3, { useMemo as useMemo2, useState as useState2 } from "react";
+import { View } from "react-native";
+var RadioGroup = ({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  isDisabled = false,
+  themeColor = "primary",
+  variant = "filled",
+  size = "md",
+  radius = "full",
+  labelAlignment = "right",
+  fullWidth = false,
+  orientation = "vertical",
+  gap,
+  style
+}) => {
+  const theme = useXUITheme();
+  const isControlled = typeof value === "string";
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const selectedValue = isControlled ? value : internalValue;
+  const handleValueChange = (nextValue) => {
+    if (nextValue === selectedValue) return;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  const contextValue = useMemo2(
+    () => ({
+      selectedValue,
+      isDisabled,
+      themeColor,
+      variant,
+      size,
+      radius,
+      labelAlignment,
+      fullWidth,
+      onValueChange: handleValueChange
+    }),
+    [
+      fullWidth,
+      isDisabled,
+      labelAlignment,
+      radius,
+      selectedValue,
+      size,
+      themeColor,
+      variant
+    ]
+  );
+  return /* @__PURE__ */ React3.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React3.createElement(
+    View,
+    {
+      style: [
+        styles.group,
+        {
+          flexDirection: orientation === "horizontal" ? "row" : "column",
+          gap: gap ?? theme.spacing.sm
+        },
+        style
+      ]
+    },
+    children
+  ));
+};
+export {
+  Radio,
+  RadioGroup
+};

package/dist/segment-button/index.js

@@ -1,8 +1,8 @@
-import "../chunk-DXXNBF5P.js";
+import "../chunk-CZFDZPAS.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-I4V5Y5GD.js";
 
 // src/components/segment-button/segment-button.tsx
 import React, { useCallback, useMemo as useMemo2, useState } from "react";

package/dist/select/index.js

@@ -1,10 +1,6 @@
-import {
-  CheckmarkIcon
-} from "../chunk-GBHQCAKW.js";
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-GHCVNQET.js";
 
 // src/components/select/select.tsx
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -717,9 +713,25 @@ var Select = ({
 };
 
 // src/components/select/select-item.tsx
-import React4, { useContext } from "react";
+import React5, { useContext } from "react";
 import { Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
 
+// src/components/select/checkmark-icon.tsx
+import React4 from "react";
+import Svg2, { Polyline } from "react-native-svg";
+function CheckmarkIcon({ color, size }) {
+  return /* @__PURE__ */ React4.createElement(Svg2, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ React4.createElement(
+    Polyline,
+    {
+      points: "1 9 7 14 15 4",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+
 // src/components/select/select-item.hook.ts
 import { useMemo as useMemo3 } from "react";
 import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
@@ -839,7 +851,7 @@ var SelectItem = ({
     }
     onSelected?.();
   };
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Pressable3,
     {
       onPress: handlePress,
@@ -856,7 +868,7 @@ var SelectItem = ({
       ]
     },
     startContent,
-    /* @__PURE__ */ React4.createElement(View3, { style: styles2.content }, /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(View3, { style: styles2.content }, /* @__PURE__ */ React5.createElement(
       Text3,
       {
         style: [
@@ -866,7 +878,7 @@ var SelectItem = ({
         ]
       },
       label
-    ), description && /* @__PURE__ */ React4.createElement(
+    ), description && /* @__PURE__ */ React5.createElement(
       Text3,
       {
         style: [
@@ -876,7 +888,7 @@ var SelectItem = ({
       },
       description
     )),
-    isSelected && (selectedIcon || /* @__PURE__ */ React4.createElement(CheckmarkIcon, { color: checkmarkColor, size: 16 })),
+    isSelected && (selectedIcon || /* @__PURE__ */ React5.createElement(CheckmarkIcon, { color: checkmarkColor, size: 16 })),
     endContent
   );
 };

package/dist/skeleton/index.js

@@ -1,7 +1,7 @@
-import "../chunk-DXXNBF5P.js";
+import "../chunk-CZFDZPAS.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-I4V5Y5GD.js";
 
 // src/components/skeleton/skeleton.tsx
 import React, { useEffect, useMemo, useRef } from "react";