@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/radio/index.js

@@ -1,465 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.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.onMain
-      };
-    }
-    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: isActive ? colorScheme.main : "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/refresh-control/index.cjs

@@ -1,45 +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(); } }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/refresh-control/refresh-control.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-var PullToRefresh = ({
-  refreshing,
-  onRefresh,
-  enabled = true,
-  themeColor = "primary",
-  color,
-  title,
-  titleColor,
-  progressViewOffset,
-  children,
-  refreshControlProps
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const indicatorColor = _nullishCoalesce(color, () => ( theme.colors[themeColor].main));
-  const indicatorTitleColor = _nullishCoalesce(titleColor, () => ( theme.colors.foreground));
-  const refreshControl = /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.RefreshControl,
-    {
-      refreshing,
-      onRefresh,
-      enabled,
-      colors: [indicatorColor],
-      tintColor: indicatorColor,
-      title,
-      titleColor: indicatorTitleColor,
-      progressViewOffset,
-      ...refreshControlProps
-    }
-  );
-  return _react2.default.cloneElement(children, {
-    refreshControl
-  });
-};
-PullToRefresh.displayName = "PullToRefresh";
-
-
-exports.PullToRefresh = PullToRefresh;

package/dist/refresh-control/index.d.cts

@@ -1,55 +0,0 @@
-import React, { ReactElement } from 'react';
-import { RefreshControlProps } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type SupportedChildProps = {
-    refreshControl?: ReactElement | null;
-};
-type PullToRefreshProps = {
-    /**
-     * Whether the refresh indicator is visible.
-     */
-    refreshing: boolean;
-    /**
-     * Callback fired when user triggers pull-to-refresh.
-     */
-    onRefresh: () => void | Promise<void>;
-    /**
-     * Whether pull-to-refresh is enabled.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Theme color used for the refresh indicator.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Override indicator color.
-     */
-    color?: string;
-    /**
-     * Title shown near the refresh indicator.
-     */
-    title?: string;
-    /**
-     * Override title color.
-     */
-    titleColor?: string;
-    /**
-     * Progress offset from top (Android).
-     */
-    progressViewOffset?: number;
-    /**
-     * Scrollable child that accepts `refreshControl` prop.
-     */
-    children: ReactElement<SupportedChildProps>;
-    /**
-     * Additional native refresh control props.
-     */
-    refreshControlProps?: Omit<RefreshControlProps, 'refreshing' | 'onRefresh' | 'enabled' | 'colors' | 'tintColor' | 'title' | 'titleColor' | 'progressViewOffset'>;
-};
-
-declare const PullToRefresh: React.FC<PullToRefreshProps>;
-
-export { PullToRefresh, type PullToRefreshProps };

package/dist/refresh-control/index.d.ts

@@ -1,55 +0,0 @@
-import React, { ReactElement } from 'react';
-import { RefreshControlProps } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type SupportedChildProps = {
-    refreshControl?: ReactElement | null;
-};
-type PullToRefreshProps = {
-    /**
-     * Whether the refresh indicator is visible.
-     */
-    refreshing: boolean;
-    /**
-     * Callback fired when user triggers pull-to-refresh.
-     */
-    onRefresh: () => void | Promise<void>;
-    /**
-     * Whether pull-to-refresh is enabled.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Theme color used for the refresh indicator.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Override indicator color.
-     */
-    color?: string;
-    /**
-     * Title shown near the refresh indicator.
-     */
-    title?: string;
-    /**
-     * Override title color.
-     */
-    titleColor?: string;
-    /**
-     * Progress offset from top (Android).
-     */
-    progressViewOffset?: number;
-    /**
-     * Scrollable child that accepts `refreshControl` prop.
-     */
-    children: ReactElement<SupportedChildProps>;
-    /**
-     * Additional native refresh control props.
-     */
-    refreshControlProps?: Omit<RefreshControlProps, 'refreshing' | 'onRefresh' | 'enabled' | 'colors' | 'tintColor' | 'title' | 'titleColor' | 'progressViewOffset'>;
-};
-
-declare const PullToRefresh: React.FC<PullToRefreshProps>;
-
-export { PullToRefresh, type PullToRefreshProps };

package/dist/refresh-control/index.js

@@ -1,45 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/refresh-control/refresh-control.tsx
-import React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
-var PullToRefresh = ({
-  refreshing,
-  onRefresh,
-  enabled = true,
-  themeColor = "primary",
-  color,
-  title,
-  titleColor,
-  progressViewOffset,
-  children,
-  refreshControlProps
-}) => {
-  const theme = useXUITheme();
-  const indicatorColor = color ?? theme.colors[themeColor].main;
-  const indicatorTitleColor = titleColor ?? theme.colors.foreground;
-  const refreshControl = /* @__PURE__ */ React.createElement(
-    RNRefreshControl,
-    {
-      refreshing,
-      onRefresh,
-      enabled,
-      colors: [indicatorColor],
-      tintColor: indicatorColor,
-      title,
-      titleColor: indicatorTitleColor,
-      progressViewOffset,
-      ...refreshControlProps
-    }
-  );
-  return React.cloneElement(children, {
-    refreshControl
-  });
-};
-PullToRefresh.displayName = "PullToRefresh";
-export {
-  PullToRefresh
-};