@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/progress/index.js

@@ -1,219 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/progress/progress.tsx
-import React3 from "react";
-import { View as View3 } from "react-native";
-
-// src/components/progress/circular-progress-indicator.tsx
-import React from "react";
-import { View } from "react-native";
-import Animated, { useAnimatedProps } from "react-native-reanimated";
-import Svg, { Circle } from "react-native-svg";
-
-// src/components/progress/progress.hook.ts
-import { useEffect } from "react";
-import { Easing, useSharedValue, withTiming } from "react-native-reanimated";
-var MIN_VALUE = 0;
-var MAX_VALUE = 1;
-var clampProgress = (value) => Math.max(MIN_VALUE, Math.min(MAX_VALUE, value));
-var useProgressAnimation = (value, disableAnimation) => {
-  const progressAnim = useSharedValue(clampProgress(value));
-  useEffect(() => {
-    const clampedValue = clampProgress(value);
-    if (disableAnimation) {
-      progressAnim.value = clampedValue;
-      return;
-    }
-    progressAnim.value = withTiming(clampedValue, {
-      duration: 500,
-      easing: Easing.bezier(0, 0, 0.2, 1)
-    });
-  }, [value, disableAnimation, progressAnim]);
-  return progressAnim;
-};
-
-// src/components/progress/progress.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  track: {
-    width: "100%",
-    overflow: "hidden"
-  },
-  progress: {
-    height: "100%"
-  },
-  circleContainer: {
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
-
-// src/components/progress/circular-progress-indicator.tsx
-var AnimatedCircle = Animated.createAnimatedComponent(Circle);
-var CircularProgressIndicator = ({
-  size = 40,
-  color,
-  backgroundColor,
-  value,
-  borderRadius,
-  disableAnimation
-}) => {
-  const progressAnim = useProgressAnimation(value, disableAnimation);
-  const strokeWidth = size * 0.1;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const center = size / 2;
-  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
-  const animatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: circumference * (1 - progressAnim.value)
-  }));
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.circleContainer, { width: size, height: size }] }, /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, style: { transform: [{ rotate: "-90deg" }] } }, /* @__PURE__ */ React.createElement(
-    Circle,
-    {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: backgroundColor,
-      strokeWidth,
-      fill: "none"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    AnimatedCircle,
-    {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: strokeCap,
-      strokeDasharray: circumference,
-      animatedProps,
-      fill: "none"
-    }
-  )));
-};
-
-// src/components/progress/linear-progress-indicator.tsx
-import React2 from "react";
-import { View as View2 } from "react-native";
-import Animated2, { useAnimatedStyle } from "react-native-reanimated";
-var LinearProgressIndicator = ({
-  size = 4,
-  color,
-  backgroundColor,
-  value,
-  borderRadius,
-  disableAnimation
-}) => {
-  const progressAnim = useProgressAnimation(value, disableAnimation);
-  const radius = Math.max(0, Math.min(size / 2, borderRadius ?? 0));
-  const animatedStyle = useAnimatedStyle(() => ({
-    width: `${progressAnim.value * 100}%`
-  }));
-  return /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [
-        styles.track,
-        {
-          height: size,
-          backgroundColor,
-          borderRadius: radius
-        }
-      ]
-    },
-    /* @__PURE__ */ React2.createElement(
-      Animated2.View,
-      {
-        style: [
-          styles.progress,
-          animatedStyle,
-          {
-            backgroundColor: color,
-            borderRadius: radius
-          }
-        ]
-      }
-    )
-  );
-};
-
-// src/components/progress/progress.tsx
-var Progress = (props) => {
-  const {
-    variant = "linear",
-    themeColor = "primary",
-    value,
-    color,
-    backgroundColor,
-    size,
-    disableAnimation = false
-  } = props;
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[themeColor];
-  const mainColor = color ?? colorScheme.main;
-  const trackColor = backgroundColor ?? colorScheme.container;
-  const clampedValue = clampProgress(value);
-  const accessibilityValue = {
-    min: 0,
-    max: 100,
-    now: clampedValue * 100
-  };
-  if (variant === "circular") {
-    const circleSize = size ?? 40;
-    const borderRadius2 = "borderRadius" in props ? props.borderRadius : void 0;
-    return /* @__PURE__ */ React3.createElement(
-      View3,
-      {
-        style: [styles.circleContainer, { width: circleSize, height: circleSize }],
-        accessible: true,
-        accessibilityRole: "progressbar",
-        accessibilityValue
-      },
-      /* @__PURE__ */ React3.createElement(
-        CircularProgressIndicator,
-        {
-          size: circleSize,
-          color: mainColor,
-          backgroundColor: trackColor,
-          value: clampedValue,
-          borderRadius: borderRadius2,
-          disableAnimation
-        }
-      )
-    );
-  }
-  const linearSize = size ?? 4;
-  const borderRadius = "borderRadius" in props ? props.borderRadius : void 0;
-  return /* @__PURE__ */ React3.createElement(
-    View3,
-    {
-      style: styles.container,
-      accessible: true,
-      accessibilityRole: "progressbar",
-      accessibilityValue
-    },
-    /* @__PURE__ */ React3.createElement(
-      LinearProgressIndicator,
-      {
-        size: linearSize,
-        color: mainColor,
-        backgroundColor: trackColor,
-        value: clampedValue,
-        borderRadius,
-        disableAnimation
-      }
-    )
-  );
-};
-export {
-  Progress
-};

package/dist/radio/index.cjs

@@ -1,465 +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/radio/radio.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-var _core = require('@xaui/core');
-
-// src/components/radio/radio-context.ts
-
-var RadioGroupContext = _react2.default.createContext(
-  null
-);
-
-// src/components/radio/radio.hook.ts
-
-
-function useSizeStyles(size, variant) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const sizeStyles = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const radiusStyles = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const dotColors = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const variantStyles = _react.useMemo.call(void 0, () => {
-    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 = _react.useMemo.call(void 0, () => {
-    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
-
-var styles = _reactnative.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
-
-var runDotInAnimation = (dotScale, dotOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(dotScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      tension: 90,
-      friction: 9
-    }),
-    _reactnative.Animated.timing(dotOpacity, {
-      toValue: 1,
-      duration: 180,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runDotOutAnimation = (dotScale, dotOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(dotScale, {
-      toValue: 0,
-      useNativeDriver: true,
-      tension: 90,
-      friction: 9
-    }),
-    _reactnative.Animated.timing(dotOpacity, {
-      toValue: 0,
-      duration: 140,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runBackgroundInAnimation = (backgroundScale, backgroundOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(backgroundScale, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.timing(backgroundOpacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runBackgroundOutAnimation = (backgroundScale, backgroundOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(backgroundScale, {
-      toValue: 0.5,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.timing(backgroundOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runPressInAnimation = (scale) => {
-  _reactnative.Animated.spring(scale, {
-    toValue: 0.95,
-    useNativeDriver: true
-  }).start();
-};
-var runPressOutAnimation = (scale) => {
-  _reactnative.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 = _react.useContext.call(void 0, RadioGroupContext);
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const resolvedLabelAlignment = _nullishCoalesce(_nullishCoalesce(labelAlignment, () => ( _optionalChain([group, 'optionalAccess', _ => _.labelAlignment]))), () => ( "right"));
-  const resolvedThemeColor = _nullishCoalesce(_nullishCoalesce(themeColor, () => ( _optionalChain([group, 'optionalAccess', _2 => _2.themeColor]))), () => ( "primary"));
-  const resolvedVariant = _nullishCoalesce(_nullishCoalesce(variant, () => ( _optionalChain([group, 'optionalAccess', _3 => _3.variant]))), () => ( "filled"));
-  const resolvedSize = _nullishCoalesce(_nullishCoalesce(size, () => ( _optionalChain([group, 'optionalAccess', _4 => _4.size]))), () => ( "md"));
-  const resolvedRadius = _nullishCoalesce(_nullishCoalesce(radius, () => ( _optionalChain([group, 'optionalAccess', _5 => _5.radius]))), () => ( "full"));
-  const resolvedFullWidth = _nullishCoalesce(_nullishCoalesce(fullWidth, () => ( _optionalChain([group, 'optionalAccess', _6 => _6.fullWidth]))), () => ( false));
-  const resolvedDisabled = !!(isDisabled || _optionalChain([group, 'optionalAccess', _7 => _7.isDisabled]));
-  const isInGroup = !!group && typeof value === "string";
-  const isControlledStandalone = typeof isCheckedProp === "boolean";
-  const [internalChecked, setInternalChecked] = _react.useState.call(void 0, defaultChecked);
-  const groupChecked = isInGroup ? group.selectedValue === value : false;
-  const isChecked = isInGroup ? groupChecked : isControlledStandalone ? isCheckedProp : internalChecked;
-  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, resolvedThemeColor)];
-  const scale = _react.useRef.call(void 0, new _reactnative.Animated.Value(1)).current;
-  const backgroundScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0.5)).current;
-  const backgroundOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const dotScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(isChecked ? 1 : 0)).current;
-  const dotOpacity = _react.useRef.call(void 0, new _reactnative.Animated.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);
-  _react.useEffect.call(void 0, () => {
-    if (resolvedVariant !== "filled") return;
-    if (isChecked) {
-      runBackgroundInAnimation(backgroundScale, backgroundOpacity);
-    } else {
-      runBackgroundOutAnimation(backgroundScale, backgroundOpacity);
-    }
-  }, [backgroundOpacity, backgroundScale, isChecked, resolvedVariant]);
-  _react.useEffect.call(void 0, () => {
-    if (isChecked) {
-      runDotInAnimation(dotScale, dotOpacity);
-    } else {
-      runDotOutAnimation(dotScale, dotOpacity);
-    }
-  }, [dotOpacity, dotScale, isChecked]);
-  const handlePress = () => {
-    if (resolvedDisabled || isChecked) return;
-    if (isInGroup && value) {
-      _optionalChain([group, 'access', _8 => _8.onValueChange, 'optionalCall', _9 => _9(value)]);
-      _optionalChain([onValueChange, 'optionalCall', _10 => _10(true)]);
-      return;
-    }
-    if (!isControlledStandalone) {
-      setInternalChecked(true);
-    }
-    _optionalChain([onValueChange, 'optionalCall', _11 => _11(true)]);
-  };
-  const handlePressIn = () => {
-    if (resolvedDisabled) return;
-    runPressInAnimation(scale);
-  };
-  const handlePressOut = () => {
-    if (resolvedDisabled) return;
-    runPressOutAnimation(scale);
-  };
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.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.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.radio,
-          {
-            width: sizeStyles.radioSize,
-            height: sizeStyles.radioSize,
-            ...radiusStyles,
-            ...variantStyles
-          },
-          {
-            transform: [{ scale }]
-          }
-        ]
-      },
-      resolvedVariant === "filled" && /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.background,
-            radiusStyles,
-            {
-              backgroundColor: colorScheme.main,
-              transform: [{ scale: backgroundScale }],
-              opacity: backgroundOpacity
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.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.default.createElement(
-      _reactnative.Text,
-      {
-        style: [
-          styles.label,
-          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
-          resolvedDisabled && styles.disabledText,
-          labelStyle
-        ]
-      },
-      label
-    )
-  );
-};
-
-// src/components/radio/radio-group.tsx
-
-
-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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const isControlled = typeof value === "string";
-  const [internalValue, setInternalValue] = _react.useState.call(void 0, defaultValue);
-  const selectedValue = isControlled ? value : internalValue;
-  const handleValueChange = (nextValue) => {
-    if (nextValue === selectedValue) return;
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    _optionalChain([onValueChange, 'optionalCall', _12 => _12(nextValue)]);
-  };
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      selectedValue,
-      isDisabled,
-      themeColor,
-      variant,
-      size,
-      radius,
-      labelAlignment,
-      fullWidth,
-      onValueChange: handleValueChange
-    }),
-    [
-      fullWidth,
-      isDisabled,
-      labelAlignment,
-      radius,
-      selectedValue,
-      size,
-      themeColor,
-      variant
-    ]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.group,
-        {
-          flexDirection: orientation === "horizontal" ? "row" : "column",
-          gap: _nullishCoalesce(gap, () => ( theme.spacing.sm))
-        },
-        style
-      ]
-    },
-    children
-  ));
-};
-
-
-
-exports.Radio = Radio; exports.RadioGroup = RadioGroup;