@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/pull-to-refresh.tsx

@@ -0,0 +1,231 @@
+/**
+ * Pull to Refresh
+ *
+ * A pull-to-refresh wrapper component with custom animated indicator.
+ * Works with ScrollView and FlatList.
+ *
+ * @example
+ * ```tsx
+ * const [refreshing, setRefreshing] = useState(false);
+ *
+ * const onRefresh = async () => {
+ *   setRefreshing(true);
+ *   await fetchData();
+ *   setRefreshing(false);
+ * };
+ *
+ * <PullToRefresh refreshing={refreshing} onRefresh={onRefresh}>
+ *   <ScrollView>
+ *     {content}
+ *   </ScrollView>
+ * </PullToRefresh>
+ * ```
+ */
+
+import React, { useCallback } from 'react';
+import {
+  View,
+  RefreshControl,
+  StyleSheet,
+  ViewStyle,
+  Platform,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+export interface PullToRefreshProps {
+  /** Whether currently refreshing */
+  refreshing: boolean;
+  /** Callback when refresh is triggered */
+  onRefresh: () => void;
+  /** Children (ScrollView, FlatList, etc.) */
+  children: React.ReactElement;
+  /** Custom refresh indicator color */
+  indicatorColor?: string;
+  /** Custom background color for iOS */
+  backgroundColor?: string;
+  /** Progress view offset for Android */
+  progressViewOffset?: number;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function PullToRefresh({
+  refreshing,
+  onRefresh,
+  children,
+  indicatorColor,
+  backgroundColor,
+  progressViewOffset = 0,
+  style,
+}: PullToRefreshProps) {
+  const { colors } = useTheme();
+
+  const tintColor = indicatorColor ?? colors.primary;
+  const bgColor = backgroundColor ?? colors.backgroundSubtle;
+
+  // Clone child with RefreshControl
+  const childWithRefreshControl = React.cloneElement(
+    children as React.ReactElement<{ refreshControl?: React.ReactElement }>,
+    {
+      refreshControl: (
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={tintColor}
+          colors={[tintColor]} // Android
+          progressBackgroundColor={bgColor} // Android
+          progressViewOffset={progressViewOffset}
+          style={Platform.OS === 'ios' ? { backgroundColor: bgColor } : undefined}
+        />
+      ),
+    }
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {childWithRefreshControl}
+    </View>
+  );
+}
+
+/**
+ * Custom Refresh Indicator
+ *
+ * A custom animated spinner for use with pull-to-refresh.
+ * Can be used standalone or with custom refresh implementations.
+ */
+export interface RefreshIndicatorProps {
+  /** Whether animating */
+  animating?: boolean;
+  /** Size of the indicator */
+  size?: number;
+  /** Color of the indicator */
+  color?: string;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function RefreshIndicator({
+  animating = true,
+  size = 24,
+  color,
+  style,
+}: RefreshIndicatorProps) {
+  const { colors } = useTheme();
+  const rotation = useSharedValue(0);
+
+  const indicatorColor = color ?? colors.primary;
+
+  React.useEffect(() => {
+    if (animating) {
+      rotation.value = withRepeat(
+        withTiming(360, { duration: 1000, easing: Easing.linear }),
+        -1,
+        false
+      );
+    } else {
+      cancelAnimation(rotation);
+      rotation.value = 0;
+    }
+  }, [animating]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <View style={[styles.indicatorContainer, { width: size, height: size }, style]}>
+      <Animated.View style={[styles.indicator, animatedStyle]}>
+        <View
+          style={[
+            styles.indicatorArc,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              borderWidth: size / 8,
+              borderColor: indicatorColor,
+              borderTopColor: 'transparent',
+              borderRightColor: 'transparent',
+            },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  );
+}
+
+/**
+ * RefreshContainer
+ *
+ * A container component that shows a custom refresh indicator
+ * at the top when pulling down. For more control than PullToRefresh.
+ */
+export interface RefreshContainerProps {
+  /** Whether currently refreshing */
+  refreshing: boolean;
+  /** Callback when refresh is triggered */
+  onRefresh: () => void;
+  /** Pull threshold to trigger refresh */
+  threshold?: number;
+  /** Children */
+  children: React.ReactNode;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function RefreshContainer({
+  refreshing,
+  onRefresh,
+  threshold = 80,
+  children,
+  style,
+}: RefreshContainerProps) {
+  const { colors, spacing } = useTheme();
+
+  return (
+    <View style={[styles.refreshContainer, style]}>
+      {refreshing && (
+        <View
+          style={[
+            styles.refreshHeader,
+            {
+              backgroundColor: colors.backgroundSubtle,
+              paddingVertical: spacing[4],
+            },
+          ]}
+        >
+          <RefreshIndicator animating={refreshing} />
+        </View>
+      )}
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  indicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {},
+  indicatorArc: {},
+  refreshContainer: {
+    flex: 1,
+  },
+  refreshHeader: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/registry/ui/radio-group.tsx

@@ -0,0 +1,294 @@
+/**
+ * Radio Group
+ *
+ * A set of radio buttons where only one can be selected.
+ * Features animated selection indicator, haptic feedback,
+ * dark mode support, and accessibility.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('option1');
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroupItem value="option1" label="Option 1" />
+ *   <RadioGroupItem value="option2" label="Option 2" />
+ *   <RadioGroupItem value="option3" label="Option 3" />
+ * </RadioGroup>
+ * ```
+ */
+
+import React, { createContext, useContext, useEffect, useCallback } from 'react';
+import {
+  Pressable,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  AccessibilityInfo,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  interpolate,
+  interpolateColor,
+  Extrapolation,
+} from 'react-native-reanimated';
+import { useTheme, ThemeColors, springs as themeSpringPresets } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+// Context for sharing state between RadioGroup and RadioGroupItem
+interface RadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+  colors: ThemeColors;
+  springs: typeof themeSpringPresets;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroup() {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error('RadioGroupItem must be used within a RadioGroup');
+  }
+  return context;
+}
+
+export interface RadioGroupProps {
+  /** Currently selected value */
+  value: string;
+  /** Callback when selection changes */
+  onValueChange: (value: string) => void;
+  /** Disable all items */
+  disabled?: boolean;
+  /** Size variant for all items */
+  size?: 'sm' | 'md' | 'lg';
+  /** Radio items */
+  children: React.ReactNode;
+  /** Additional container styles */
+  style?: ViewStyle;
+}
+
+export function RadioGroup({
+  value,
+  onValueChange,
+  disabled = false,
+  size = 'md',
+  children,
+  style,
+}: RadioGroupProps) {
+  const { colors, springs } = useTheme();
+
+  return (
+    <RadioGroupContext.Provider
+      value={{ value, onValueChange, disabled, size, colors, springs }}
+    >
+      <View
+        style={[styles.group, style]}
+        accessibilityRole="radiogroup"
+      >
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioGroupItemProps {
+  /** Value for this radio option */
+  value: string;
+  /** Label text */
+  label: string;
+  /** Description text (optional) */
+  description?: string;
+  /** Disable this specific item */
+  disabled?: boolean;
+  /** Additional accessibility label */
+  accessibilityLabel?: string;
+  /** Additional container styles */
+  style?: ViewStyle;
+}
+
+export function RadioGroupItem({
+  value,
+  label,
+  description,
+  disabled: itemDisabled = false,
+  accessibilityLabel,
+  style,
+}: RadioGroupItemProps) {
+  const context = useRadioGroup();
+  const isSelected = context.value === value;
+  const disabled = context.disabled || itemDisabled;
+  const { colors, springs } = context;
+
+  const progress = useSharedValue(isSelected ? 1 : 0);
+  const [reduceMotion, setReduceMotion] = React.useState(false);
+
+  // Check for reduce motion preference
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotion
+    );
+    return () => subscription.remove();
+  }, []);
+
+  // Animate on selection change
+  useEffect(() => {
+    const target = isSelected ? 1 : 0;
+    if (reduceMotion) {
+      progress.value = target;
+    } else {
+      progress.value = withSpring(target, springs.snappy);
+    }
+  }, [isSelected, reduceMotion, springs.snappy]);
+
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    haptic('selection');
+    context.onValueChange(value);
+  }, [disabled, context.onValueChange, value]);
+
+  const sizeStyles = sizes[context.size];
+
+  const outerAnimatedStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.border, colors.primary]
+    ),
+  }));
+
+  const innerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [
+      {
+        scale: interpolate(
+          progress.value,
+          [0, 1],
+          [0, 1],
+          Extrapolation.CLAMP
+        ),
+      },
+    ],
+  }));
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.item,
+        pressed && !disabled && styles.pressed,
+        style,
+      ]}
+      accessible
+      accessibilityRole="radio"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{
+        checked: isSelected,
+        disabled,
+      }}
+    >
+      <Animated.View
+        style={[
+          styles.outer,
+          sizeStyles.outer,
+          outerAnimatedStyle,
+          disabled && styles.disabled,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.inner,
+            sizeStyles.inner,
+            { backgroundColor: colors.primary },
+            innerAnimatedStyle,
+          ]}
+        />
+      </Animated.View>
+
+      <View style={styles.textContainer}>
+        <Text
+          style={[
+            styles.label,
+            sizeStyles.label,
+            { color: disabled ? colors.foregroundMuted : colors.foreground },
+          ]}
+        >
+          {label}
+        </Text>
+        {description && (
+          <Text
+            style={[
+              styles.description,
+              sizeStyles.description,
+              { color: disabled ? colors.foregroundMuted : colors.foregroundMuted },
+            ]}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+// Size-specific styles using StyleSheet
+const sizes = {
+  sm: StyleSheet.create({
+    outer: { width: 16, height: 16, borderRadius: 8 },
+    inner: { width: 8, height: 8, borderRadius: 4 },
+    label: { fontSize: 14 },
+    description: { fontSize: 12 },
+  }),
+  md: StyleSheet.create({
+    outer: { width: 20, height: 20, borderRadius: 10 },
+    inner: { width: 10, height: 10, borderRadius: 5 },
+    label: { fontSize: 16 },
+    description: { fontSize: 14 },
+  }),
+  lg: StyleSheet.create({
+    outer: { width: 24, height: 24, borderRadius: 12 },
+    inner: { width: 12, height: 12, borderRadius: 6 },
+    label: { fontSize: 18 },
+    description: { fontSize: 16 },
+  }),
+};
+
+const styles = StyleSheet.create({
+  group: {
+    gap: 12,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  outer: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 2,
+  },
+  inner: {},
+  disabled: {
+    opacity: 0.5,
+  },
+  textContainer: {
+    flex: 1,
+    gap: 2,
+  },
+  label: {
+    fontWeight: '500',
+  },
+  description: {
+    fontWeight: '400',
+  },
+});