@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/swipeable-row.tsx

@@ -0,0 +1,362 @@
+/**
+ * Swipeable Row
+ *
+ * A list row with swipe-to-reveal actions.
+ * Supports left and right swipe actions with haptic feedback.
+ *
+ * @example
+ * ```tsx
+ * <SwipeableRow
+ *   rightActions={[
+ *     {
+ *       label: 'Archive',
+ *       color: '#3b82f6',
+ *       onPress: () => handleArchive(),
+ *     },
+ *     {
+ *       label: 'Delete',
+ *       color: '#ef4444',
+ *       onPress: () => handleDelete(),
+ *     },
+ *   ]}
+ * >
+ *   <ListItem title="Swipe me" />
+ * </SwipeableRow>
+ * ```
+ */
+
+import React, { useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Dimensions,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  interpolate,
+  Extrapolation,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+} from 'react-native-gesture-handler';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const ACTION_WIDTH = 80;
+const SPRING_CONFIG = { damping: 20, stiffness: 200 };
+
+export interface SwipeAction {
+  /** Action label */
+  label: string;
+  /** Icon component (optional) */
+  icon?: React.ReactNode;
+  /** Background color */
+  color: string;
+  /** Text color */
+  textColor?: string;
+  /** Action callback */
+  onPress: () => void;
+}
+
+export interface SwipeableRowProps {
+  /** Content to display */
+  children: React.ReactNode;
+  /** Actions revealed on left swipe (right side) */
+  rightActions?: SwipeAction[];
+  /** Actions revealed on right swipe (left side) */
+  leftActions?: SwipeAction[];
+  /** Width of each action button */
+  actionWidth?: number;
+  /** Enable full swipe to trigger first action */
+  fullSwipeEnabled?: boolean;
+  /** Callback when row is swiped open */
+  onSwipeOpen?: (direction: 'left' | 'right') => void;
+  /** Callback when row is closed */
+  onSwipeClose?: () => void;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function SwipeableRow({
+  children,
+  rightActions = [],
+  leftActions = [],
+  actionWidth = ACTION_WIDTH,
+  fullSwipeEnabled = true,
+  onSwipeOpen,
+  onSwipeClose,
+  style,
+}: SwipeableRowProps) {
+  const { colors } = useTheme();
+
+  const translateX = useSharedValue(0);
+  const contextX = useSharedValue(0);
+  const isOpen = useRef<'left' | 'right' | null>(null);
+
+  const rightActionsWidth = rightActions.length * actionWidth;
+  const leftActionsWidth = leftActions.length * actionWidth;
+  const fullSwipeThreshold = SCREEN_WIDTH * 0.5;
+
+  const close = useCallback(() => {
+    translateX.value = withSpring(0, SPRING_CONFIG);
+    if (isOpen.current) {
+      isOpen.current = null;
+      onSwipeClose?.();
+    }
+  }, [onSwipeClose]);
+
+  const openRight = useCallback(() => {
+    translateX.value = withSpring(-rightActionsWidth, SPRING_CONFIG);
+    if (isOpen.current !== 'right') {
+      isOpen.current = 'right';
+      onSwipeOpen?.('right');
+    }
+  }, [rightActionsWidth, onSwipeOpen]);
+
+  const openLeft = useCallback(() => {
+    translateX.value = withSpring(leftActionsWidth, SPRING_CONFIG);
+    if (isOpen.current !== 'left') {
+      isOpen.current = 'left';
+      onSwipeOpen?.('left');
+    }
+  }, [leftActionsWidth, onSwipeOpen]);
+
+  const triggerFullSwipe = useCallback(
+    (direction: 'left' | 'right') => {
+      haptic('medium');
+      const action = direction === 'right' ? rightActions[0] : leftActions[0];
+      if (action) {
+        // Animate off screen then reset
+        const target = direction === 'right' ? -SCREEN_WIDTH : SCREEN_WIDTH;
+        translateX.value = withTiming(target, { duration: 200 }, () => {
+          runOnJS(action.onPress)();
+          translateX.value = 0;
+        });
+      }
+    },
+    [rightActions, leftActions]
+  );
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-10, 10])
+    .onStart(() => {
+      contextX.value = translateX.value;
+    })
+    .onUpdate((event) => {
+      let newX = contextX.value + event.translationX;
+
+      // Limit swipe based on available actions
+      if (rightActions.length === 0 && newX < 0) newX = 0;
+      if (leftActions.length === 0 && newX > 0) newX = 0;
+
+      // Determine max swipe distances
+      const maxSwipeLeft = fullSwipeEnabled ? SCREEN_WIDTH * 0.75 : rightActionsWidth;
+      const maxSwipeRight = fullSwipeEnabled ? SCREEN_WIDTH * 0.75 : leftActionsWidth;
+
+      // Clamp the swipe to prevent seeing both sides at once
+      // Add rubber band resistance when going past the action buttons
+      if (newX < 0) {
+        // Swiping left (revealing right actions)
+        if (newX < -rightActionsWidth) {
+          // Add resistance past the buttons
+          const overshoot = -newX - rightActionsWidth;
+          const resistance = Math.min(overshoot * 0.3, maxSwipeLeft - rightActionsWidth);
+          newX = -rightActionsWidth - resistance;
+        }
+      } else if (newX > 0) {
+        // Swiping right (revealing left actions)
+        if (newX > leftActionsWidth) {
+          // Add resistance past the buttons
+          const overshoot = newX - leftActionsWidth;
+          const resistance = Math.min(overshoot * 0.3, maxSwipeRight - leftActionsWidth);
+          newX = leftActionsWidth + resistance;
+        }
+      }
+
+      translateX.value = newX;
+    })
+    .onEnd((event) => {
+      'worklet';
+      const velocity = event.velocityX;
+      const x = translateX.value;
+
+      // Full swipe detection
+      if (fullSwipeEnabled) {
+        if (x < -fullSwipeThreshold && rightActions.length > 0) {
+          runOnJS(triggerFullSwipe)('right');
+          return;
+        }
+        if (x > fullSwipeThreshold && leftActions.length > 0) {
+          runOnJS(triggerFullSwipe)('left');
+          return;
+        }
+      }
+
+      // Determine final position based on position and velocity
+      if (x < -rightActionsWidth / 2 || velocity < -500) {
+        if (rightActions.length > 0) {
+          runOnJS(openRight)();
+          runOnJS(haptic)('selection');
+        } else {
+          runOnJS(close)();
+        }
+      } else if (x > leftActionsWidth / 2 || velocity > 500) {
+        if (leftActions.length > 0) {
+          runOnJS(openLeft)();
+          runOnJS(haptic)('selection');
+        } else {
+          runOnJS(close)();
+        }
+      } else {
+        runOnJS(close)();
+      }
+    });
+
+  const rowStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const rightActionsStyle = useAnimatedStyle(() => {
+    // Only show when swiping left (negative translateX)
+    const isSwipingLeft = translateX.value < 0;
+    return {
+      width: isSwipingLeft
+        ? Math.min(-translateX.value, rightActionsWidth + 50) // Allow slight overshoot for full swipe
+        : 0,
+      opacity: isSwipingLeft ? 1 : 0,
+    };
+  });
+
+  const leftActionsStyle = useAnimatedStyle(() => {
+    // Only show when swiping right (positive translateX)
+    const isSwipingRight = translateX.value > 0;
+    return {
+      width: isSwipingRight
+        ? Math.min(translateX.value, leftActionsWidth + 50) // Allow slight overshoot for full swipe
+        : 0,
+      opacity: isSwipingRight ? 1 : 0,
+    };
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Left Actions (revealed on right swipe) */}
+      {leftActions.length > 0 && (
+        <Animated.View style={[styles.actionsContainer, styles.leftActions, leftActionsStyle]}>
+          {leftActions.map((action, index) => (
+            <ActionButton
+              key={index}
+              action={action}
+              width={actionWidth}
+              onPress={() => {
+                haptic('light');
+                action.onPress();
+                close();
+              }}
+            />
+          ))}
+        </Animated.View>
+      )}
+
+      {/* Right Actions (revealed on left swipe) */}
+      {rightActions.length > 0 && (
+        <Animated.View style={[styles.actionsContainer, styles.rightActions, rightActionsStyle]}>
+          {rightActions.map((action, index) => (
+            <ActionButton
+              key={index}
+              action={action}
+              width={actionWidth}
+              onPress={() => {
+                haptic('light');
+                action.onPress();
+                close();
+              }}
+            />
+          ))}
+        </Animated.View>
+      )}
+
+      {/* Main Content */}
+      <GestureDetector gesture={panGesture}>
+        <Animated.View style={[styles.row, { backgroundColor: colors.background }, rowStyle]}>
+          {children}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+interface ActionButtonProps {
+  action: SwipeAction;
+  width: number;
+  onPress: () => void;
+}
+
+function ActionButton({ action, width, onPress }: ActionButtonProps) {
+  return (
+    <Pressable
+      style={[
+        styles.actionButton,
+        { width, backgroundColor: action.color },
+      ]}
+      onPress={onPress}
+    >
+      {action.icon && <View style={styles.actionIcon}>{action.icon}</View>}
+      <Text
+        style={[
+          styles.actionLabel,
+          { color: action.textColor ?? '#fff' },
+        ]}
+        numberOfLines={1}
+      >
+        {action.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  row: {
+    zIndex: 1,
+  },
+  actionsContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  leftActions: {
+    left: 0,
+    justifyContent: 'flex-start',
+  },
+  rightActions: {
+    right: 0,
+    justifyContent: 'flex-end',
+  },
+  actionButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  actionIcon: {
+    marginBottom: 4,
+  },
+  actionLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/registry/ui/switch.tsx

@@ -0,0 +1,246 @@
+/**
+ * Switch
+ *
+ * An iOS-style toggle switch with animated thumb.
+ * Uses design tokens for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * <Switch checked={enabled} onCheckedChange={setEnabled} label="Notifications" />
+ * <Switch label="Dark Mode" description="Enable dark theme" />
+ * <Switch disabled />
+ * ```
+ */
+
+import React, { 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 } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+export type SwitchSize = 'sm' | 'md' | 'lg';
+
+export interface SwitchProps {
+  /** Whether the switch is on */
+  checked?: boolean;
+  /** Callback when switch state changes */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Disable the switch */
+  disabled?: boolean;
+  /** Label text shown next to switch */
+  label?: string;
+  /** Description text below label */
+  description?: string;
+  /** Additional accessibility label */
+  accessibilityLabel?: string;
+  /** Size variant */
+  size?: SwitchSize;
+  /** Additional container styles */
+  style?: ViewStyle;
+}
+
+export function Switch({
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  description,
+  accessibilityLabel,
+  size = 'md',
+  style,
+}: SwitchProps) {
+  const { colors, components, platformShadow, springs } = useTheme();
+  const tokens = components.switch[size];
+  const progress = useSharedValue(checked ? 1 : 0);
+  const scale = useSharedValue(1);
+  const [reduceMotion, setReduceMotion] = React.useState(false);
+
+  // Calculate thumb travel distance from tokens
+  const thumbTravel = tokens.trackWidth - tokens.thumbSize - (tokens.thumbOffset * 2);
+
+  // Check for reduce motion preference
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotion
+    );
+    return () => subscription.remove();
+  }, []);
+
+  // Animate on state change
+  useEffect(() => {
+    const target = checked ? 1 : 0;
+    if (reduceMotion) {
+      progress.value = target;
+    } else {
+      progress.value = withSpring(target, springs.snappy);
+    }
+  }, [checked, reduceMotion, springs.snappy]);
+
+  const handlePressIn = useCallback(() => {
+    if (!disabled) {
+      scale.value = withSpring(0.95, springs.snappy);
+    }
+  }, [disabled, springs.snappy]);
+
+  const handlePressOut = useCallback(() => {
+    scale.value = withSpring(1, springs.snappy);
+  }, [springs.snappy]);
+
+  const handlePress = useCallback(() => {
+    if (disabled || !onCheckedChange) return;
+    haptic('medium');
+    onCheckedChange(!checked);
+  }, [disabled, onCheckedChange, checked]);
+
+  const trackAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.backgroundMuted, colors.primary]
+    ),
+    transform: [{ scale: scale.value }],
+  }));
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          progress.value,
+          [0, 1],
+          [0, thumbTravel],
+          Extrapolation.CLAMP
+        ),
+      },
+      {
+        scale: interpolate(
+          progress.value,
+          [0, 0.5, 1],
+          [1, 0.9, 1],
+          Extrapolation.CLAMP
+        ),
+      },
+    ],
+  }));
+
+  return (
+    <Pressable
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={handlePress}
+      disabled={disabled}
+      style={[
+        styles.container,
+        { gap: tokens.gap },
+        style,
+      ]}
+      accessible
+      accessibilityRole="switch"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{
+        checked,
+        disabled,
+      }}
+    >
+      {(label || description) && (
+        <View style={styles.labelContainer}>
+          {label && (
+            <Text
+              style={[
+                styles.label,
+                {
+                  fontSize: tokens.labelFontSize,
+                  color: disabled ? colors.foregroundMuted : colors.foreground,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text
+              style={[
+                styles.description,
+                { color: colors.foregroundMuted },
+              ]}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <Animated.View
+        style={[
+          styles.track,
+          {
+            width: tokens.trackWidth,
+            height: tokens.trackHeight,
+            borderRadius: tokens.borderRadius,
+            paddingHorizontal: tokens.thumbOffset,
+          },
+          trackAnimatedStyle,
+          disabled && styles.disabled,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              width: tokens.thumbSize,
+              height: tokens.thumbSize,
+              borderRadius: tokens.borderRadius,
+              backgroundColor: colors.background,
+            },
+            platformShadow('sm'),
+            thumbAnimatedStyle,
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  labelContainer: {
+    flex: 1,
+    gap: 2,
+  },
+  label: {
+    fontWeight: '500',
+  },
+  description: {
+    fontSize: 13,
+  },
+  track: {
+    justifyContent: 'center',
+  },
+  thumb: {
+    // Shadow applied via platformShadow
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});