@idealyst/components 1.0.82 → 1.0.84

package/src/Progress/Progress.native.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, forwardRef } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  useAnimatedProps,
+  withTiming,
+  withRepeat,
+  Easing,
+} from 'react-native-reanimated';
+import { useUnistyles } from 'react-native-unistyles';
+import Svg, { Circle } from 'react-native-svg';
+import Text from '../Text';
+import { progressStyles } from './Progress.styles';
+import type { ProgressProps } from './types';
+import { Theme } from '@idealyst/theme';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const Progress = forwardRef<View, ProgressProps>(({
+  value = 0,
+  max = 100,
+  variant = 'linear',
+  intent = 'primary',
+  size = 'md',
+  indeterminate = false,
+  showLabel = false,
+  label,
+  rounded = true,
+  style,
+  testID,
+}, ref) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  const { theme }: { theme: Theme } = useUnistyles();
+
+  // Apply variants
+  progressStyles.useVariants({
+    size,
+    intent,
+    rounded,
+  });
+
+  // Animation values
+  const animatedValue = useSharedValue(0);
+  const slideAnimation = useSharedValue(0);
+  const rotateAnimation = useSharedValue(0);
+
+  useEffect(() => {
+    if (indeterminate) {
+      // Indeterminate animation
+      slideAnimation.value = withRepeat(
+        withTiming(1, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+        -1,
+        false
+      );
+      rotateAnimation.value = withRepeat(
+        withTiming(1, { duration: 1400, easing: Easing.linear }),
+        -1,
+        false
+      );
+    } else {
+      // Determinate animation
+      animatedValue.value = withTiming(percentage, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+    }
+  }, [percentage, indeterminate]);
+
+  const getCircularSize = () => {
+    if (size === 'sm') return 32;
+    if (size === 'lg') return 64;
+    return 48;
+  };
+
+  if (variant === 'circular') {
+    const circularSize = getCircularSize();
+    const strokeWidth = size === 'sm' ? 3 : size === 'lg' ? 5 : 4;
+    const radius = (circularSize - strokeWidth) / 2;
+    const circumference = radius * 2 * Math.PI;
+
+    // Get colors from theme
+    const trackColor = theme.colors.border.secondary;
+    const barColor = theme.intents[intent].primary;
+
+    const circularAnimatedProps = useAnimatedProps(() => {
+      const offset = indeterminate
+        ? circumference * 0.25
+        : circumference - (animatedValue.value / 100) * circumference;
+
+      return {
+        strokeDashoffset: offset,
+      };
+    });
+
+    const rotationStyle = useAnimatedStyle(() => {
+      return {
+        transform: [
+          {
+            rotate: `${rotateAnimation.value * 360}deg`,
+          },
+        ],
+      };
+    });
+
+    return (
+      <View style={[progressStyles.circularContainer, style]} testID={testID}>
+        <Animated.View style={indeterminate ? rotationStyle : {}}>
+          <Svg width={circularSize} height={circularSize} style={{ transform: [{ rotate: '-90deg' }] }}>
+            {/* Track circle (background) */}
+            <Circle
+              cx={circularSize / 2}
+              cy={circularSize / 2}
+              r={radius}
+              strokeWidth={strokeWidth}
+              fill="none"
+              stroke={trackColor}
+            />
+            {/* Progress circle (foreground) */}
+            <AnimatedCircle
+              cx={circularSize / 2}
+              cy={circularSize / 2}
+              r={radius}
+              strokeWidth={strokeWidth}
+              fill="none"
+              stroke={barColor}
+              strokeDasharray={`${circumference} ${circumference}`}
+              animatedProps={circularAnimatedProps}
+              strokeLinecap="round"
+            />
+          </Svg>
+        </Animated.View>
+        {showLabel && (
+          <Text style={progressStyles.circularLabel}>
+            {label || `${Math.round(percentage)}%`}
+          </Text>
+        )}
+      </View>
+    );
+  }
+
+  // Linear progress
+  const barAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      width: `${animatedValue.value}%`,
+    };
+  });
+
+  const indeterminateAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: slideAnimation.value * 600 - 200,
+        },
+      ],
+    };
+  });
+
+  return (
+    <View ref={ref} style={[progressStyles.container, style]} testID={testID} accessibilityRole="progressbar">
+      <View style={progressStyles.linearTrack}>
+        {indeterminate ? (
+          <Animated.View style={[progressStyles.indeterminateBar, indeterminateAnimatedStyle]} />
+        ) : (
+          <Animated.View style={[progressStyles.linearBar, barAnimatedStyle]} />
+        )}
+      </View>
+      {showLabel && (
+        <Text style={progressStyles.label}>
+          {label || `${Math.round(percentage)}%`}
+        </Text>
+      )}
+    </View>
+  );
+});
+
+Progress.displayName = 'Progress';
+
+export default Progress;

package/src/Progress/Progress.styles.tsx

@@ -0,0 +1,164 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, Size, CompoundVariants, StaticStyles } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type ProgressSize = Size;
+type ProgressIntent = Intent;
+
+export type ProgressVariants = {
+    size: ProgressSize;
+    intent: ProgressIntent;
+    rounded: boolean;
+}
+
+function createLinearTrackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        height: size.linearHeight,
+    }));
+}
+
+function createCircularContainerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        width: size.circularSize,
+        height: size.circularSize,
+    }));
+}
+
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.labelFontSize,
+    }));
+}
+
+function createCircularLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.circularLabelFontSize,
+    }));
+}
+
+function createIntentVariants(theme: Theme) {
+    const variants: any = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
+function createLinearBarCompoundVariants(theme: Theme) {
+    const compoundVariants: CompoundVariants<keyof ProgressVariants> = [];
+
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        compoundVariants.push({
+            intent,
+            styles: {
+                backgroundColor: intentValue.primary,
+            },
+        });
+    }
+
+    return compoundVariants;
+}
+
+function createCircularBarCompoundVariants(theme: Theme) {
+    const compoundVariants: CompoundVariants<keyof ProgressVariants> = [];
+
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        compoundVariants.push({
+            intent,
+            styles: {
+                _web: {
+                    stroke: intentValue.primary,
+                },
+            },
+        });
+    }
+
+    return compoundVariants;
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const progressStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        gap: 4 as const,
+    },
+    linearTrack: {
+        backgroundColor: theme.colors.border.secondary,
+        overflow: 'hidden' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createLinearTrackSizeVariants(theme),
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
+            },
+        },
+    },
+    linearBar: {
+        height: '100%' as const,
+        variants: {
+            intent: createIntentVariants(theme),
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
+            },
+        },
+        compoundVariants: createLinearBarCompoundVariants(theme),
+        _web: {
+            transition: 'width 0.3s ease' as const,
+        },
+    },
+    indeterminateBar: {
+        position: 'absolute' as const,
+        height: '100%' as const,
+        width: '40%' as const,
+        variants: {
+            intent: createIntentVariants(theme),
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
+            },
+        },
+        compoundVariants: createLinearBarCompoundVariants(theme),
+    },
+    circularContainer: {
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createCircularContainerSizeVariants(theme),
+        } as const,
+    } as const,
+    circularTrack: {
+        _web: {
+            stroke: theme.colors.border.secondary,
+        }
+    },
+    circularBar: {
+        variants: {
+            intent: createIntentVariants(theme),
+        },
+        compoundVariants: createCircularBarCompoundVariants(theme),
+    },
+    label: {
+        color: theme.colors.text.primary,
+        textAlign: 'center' as const,
+        variants: {
+            size: createLabelSizeVariants(theme),
+        },
+    },
+    circularLabel: {
+        position: 'absolute' as const,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCircularLabelSizeVariants(theme),
+        },
+    },
+  };
+});

package/src/Progress/Progress.web.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { progressStyles } from './Progress.styles';
+import type { ProgressProps } from './types';
+
+const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  max = 100,
+  variant = 'linear',
+  intent = 'primary',
+  size = 'md',
+  indeterminate = false,
+  showLabel = false,
+  label,
+  rounded = true,
+  style,
+  testID,
+}) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  // Apply variants using the correct Unistyles v3 pattern
+  progressStyles.useVariants({
+    size,
+    intent,
+    rounded,
+  });
+
+    // Linear progress
+  const containerProps = getWebProps([progressStyles.container, style as any]);
+  const trackProps = getWebProps([progressStyles.linearTrack]);
+  const barProps = getWebProps([progressStyles.linearBar, { width: `${percentage}%` }]);
+  const indeterminateProps = getWebProps([progressStyles.indeterminateBar]);
+  const labelProps = getWebProps([progressStyles.label]);
+
+  const getCircularSize = () => {
+    if (size === 'sm') return 32;
+    if (size === 'lg') return 64;
+    return 48;
+  };
+
+  if (variant === 'circular') {
+    const circularSize = getCircularSize();
+    const strokeWidth = size === 'sm' ? 3 : size === 'lg' ? 5 : 4;
+    const radius = (circularSize - strokeWidth) / 2;
+    const circumference = radius * 2 * Math.PI;
+    const strokeDashoffset = indeterminate ? circumference * 0.25 : circumference - (percentage / 100) * circumference;
+
+    const computedContainerProps = getWebProps([
+      progressStyles.circularContainer,
+      style,
+      { display: 'inline-flex' }
+    ]);
+    const labelProps = getWebProps([progressStyles.circularLabel]);
+    const trackColorProps = getWebProps([progressStyles.circularTrack]);
+    const barColorProps = getWebProps([progressStyles.circularBar]);
+    console.log(trackColorProps)
+
+    return (
+      <div {...computedContainerProps} data-testid={testID}>
+        <svg
+          width={circularSize}
+          height={circularSize}
+          style={{ transform: 'rotate(-90deg)' }}
+          className={indeterminate ? 'progress-circular-container-indeterminate' : ''}
+        >
+          {/* Track circle (background) */}
+          <circle
+            cx={circularSize / 2}
+            cy={circularSize / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className={trackColorProps.className}
+          />
+          {/* Progress circle (foreground) - apply the className to get intent color */}
+          <circle
+            cx={circularSize / 2}
+            cy={circularSize / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className={barColorProps.className}
+            strokeDasharray={`${circumference} ${circumference}`}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            style={{ transition: 'stroke-dashoffset 0.3s ease' }}
+          />
+        </svg>
+        {showLabel && (
+          <span {...labelProps}>
+            {label || `${Math.round(percentage)}%`}
+          </span>
+        )}
+        <style>{`
+          @keyframes circular-rotate {
+            from { transform: rotate(-90deg); }
+            to { transform: rotate(270deg); }
+          }
+          .progress-circular-container-indeterminate {
+            animation: circular-rotate 1.4s linear infinite;
+          }
+        `}</style>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div {...containerProps} data-testid={testID}>
+        <div
+          {...trackProps}
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+        >
+          {indeterminate ? (
+            <div {...indeterminateProps} className={`${indeterminateProps.className} progress-linear-indeterminate`} />
+          ) : (
+            <div {...barProps} />
+          )}
+        </div>
+        {showLabel && (
+          <span {...labelProps}>
+            {label || `${Math.round(percentage)}%`}
+          </span>
+        )}
+      </div>
+      {indeterminate && (
+        <style>{`
+          @keyframes progress-slide {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(350%); }
+          }
+          .progress-linear-indeterminate {
+            animation: progress-slide 1.5s ease-in-out infinite;
+          }
+        `}</style>
+      )}
+    </>
+  );
+};
+
+export default Progress;

package/src/Progress/index.native.ts

@@ -0,0 +1 @@
+export { default } from './Progress.native';

package/src/Progress/index.ts

@@ -0,0 +1,5 @@
+import ProgressComponent from './Progress.web';
+
+export default ProgressComponent;
+export { ProgressComponent as Progress };
+export * from './types';

package/src/Progress/index.web.ts

@@ -0,0 +1,5 @@
+import ProgressComponent from './Progress.web';
+
+export default ProgressComponent;
+export { ProgressComponent as Progress };
+export * from './types';

package/src/Progress/types.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type ProgressIntentVariant = Intent;
+export type ProgressSizeVariant = Size;
+export type ProgressVariant = 'linear' | 'circular';
+
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  variant?: ProgressVariant;
+  intent?: ProgressIntentVariant;
+  size?: ProgressSizeVariant;
+  indeterminate?: boolean;
+  showLabel?: boolean;
+  label?: string;
+  rounded?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/RadioButton/RadioButton.native.tsx

@@ -0,0 +1,88 @@
+import React, { ComponentRef, forwardRef } from 'react';
+import { View, Pressable, Animated } from 'react-native';
+import Text from '../Text';
+import { radioButtonStyles } from './RadioButton.styles';
+import type { RadioButtonProps } from './types';
+import { useRadioGroup } from './RadioGroup.native';
+
+const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>(({
+  value,
+  checked: checkedProp,
+  onPress,
+  disabled: disabledProp = false,
+  label,
+  size = 'md',
+  intent = 'primary',
+  style,
+  testID,
+}, ref) => {
+  const group = useRadioGroup();
+
+  const checked = group.value !== undefined ? group.value === value : checkedProp;
+  const disabled = group.disabled || disabledProp;
+
+  const animatedValue = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+  React.useEffect(() => {
+    Animated.spring(animatedValue, {
+      toValue: checked ? 1 : 0,
+      useNativeDriver: true,
+      friction: 8,
+      tension: 100,
+    }).start();
+  }, [checked, animatedValue]);
+
+  const handlePress = () => {
+    if (!disabled) {
+      if (group.onValueChange) {
+        group.onValueChange(value);
+      } else if (onPress) {
+        onPress();
+      }
+    }
+  };
+
+  // Apply variants for radio styles
+  radioButtonStyles.useVariants({
+    size,
+    checked,
+    disabled,
+  });
+
+  const dotScale = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={handlePress}
+      disabled={disabled}
+      style={[radioButtonStyles.container, style]}
+      testID={testID}
+      accessibilityRole="radio"
+      accessibilityState={{ checked, disabled }}
+    >
+      <View style={radioButtonStyles.radio({ intent })}>
+        <Animated.View
+          style={[
+            radioButtonStyles.radioDot({ intent }),
+            {
+              transform: [{ scale: dotScale }],
+            },
+          ]}
+        />
+      </View>
+      {label && (
+        <Text style={radioButtonStyles.label}>
+          {label}
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+
+RadioButton.displayName = 'RadioButton';
+
+export default RadioButton;