@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/slider.tsx

@@ -0,0 +1,307 @@
+/**
+ * Slider
+ *
+ * A value slider component with gesture support.
+ * Supports range selection and step values.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState(50);
+ *
+ * <Slider value={value} onValueChange={setValue} />
+ * <Slider value={value} onValueChange={setValue} min={0} max={100} step={10} />
+ * <Slider value={value} onValueChange={setValue} showValue />
+ * ```
+ */
+
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  LayoutChangeEvent,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  runOnJS,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+} from 'react-native-gesture-handler';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+export type SliderSize = 'sm' | 'md' | 'lg';
+
+export interface SliderProps {
+  /** Current value */
+  value: number;
+  /** Callback when value changes */
+  onValueChange?: (value: number) => void;
+  /** Callback when sliding starts */
+  onSlidingStart?: () => void;
+  /** Callback when sliding ends */
+  onSlidingComplete?: (value: number) => void;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Size preset */
+  size?: SliderSize;
+  /** Show current value label */
+  showValue?: boolean;
+  /** Format value for display */
+  formatValue?: (value: number) => string;
+  /** Label text */
+  label?: string;
+  /** Container style */
+  style?: ViewStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+const trackHeights: Record<SliderSize, number> = {
+  sm: 4,
+  md: 6,
+  lg: 8,
+};
+
+const thumbSizes: Record<SliderSize, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+export function Slider({
+  value,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  size = 'md',
+  showValue = false,
+  formatValue,
+  label,
+  style,
+  labelStyle,
+}: SliderProps) {
+  const { colors, spacing } = useTheme();
+
+  const trackWidth = useSharedValue(0);
+  const thumbScale = useSharedValue(1);
+
+  const trackHeight = trackHeights[size];
+  const thumbSize = thumbSizes[size];
+
+  // Calculate value from position (JS thread version)
+  const calculateValue = useCallback(
+    (posX: number, width: number): number => {
+      if (width === 0) return min;
+      const percentage = Math.max(0, Math.min(1, posX / width));
+      let newValue = min + percentage * (max - min);
+
+      // Apply step
+      if (step > 0) {
+        newValue = Math.round(newValue / step) * step;
+      }
+
+      return Math.max(min, Math.min(max, newValue));
+    },
+    [min, max, step]
+  );
+
+  const handleUpdate = useCallback(
+    (posX: number, width: number) => {
+      const newValue = calculateValue(posX, width);
+      onValueChange?.(newValue);
+    },
+    [calculateValue, onValueChange]
+  );
+
+  const handleSlidingStart = useCallback(() => {
+    haptic('selection');
+    onSlidingStart?.();
+  }, [onSlidingStart]);
+
+  const handleSlidingComplete = useCallback(
+    (posX: number, width: number) => {
+      const finalValue = calculateValue(posX, width);
+      haptic('light');
+      onSlidingComplete?.(finalValue);
+    },
+    [calculateValue, onSlidingComplete]
+  );
+
+  const panGesture = Gesture.Pan()
+    .enabled(!disabled)
+    .onStart(() => {
+      'worklet';
+      thumbScale.value = withSpring(1.2, { damping: 20, stiffness: 300 });
+      runOnJS(handleSlidingStart)();
+    })
+    .onUpdate((event) => {
+      'worklet';
+      runOnJS(handleUpdate)(event.x, trackWidth.value);
+    })
+    .onEnd((event) => {
+      'worklet';
+      thumbScale.value = withSpring(1, { damping: 20, stiffness: 300 });
+      runOnJS(handleSlidingComplete)(event.x, trackWidth.value);
+    });
+
+  const tapGesture = Gesture.Tap()
+    .enabled(!disabled)
+    .onEnd((event) => {
+      'worklet';
+      runOnJS(handleUpdate)(event.x, trackWidth.value);
+      runOnJS(handleSlidingComplete)(event.x, trackWidth.value);
+    });
+
+  const gesture = Gesture.Race(panGesture, tapGesture);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    trackWidth.value = event.nativeEvent.layout.width;
+  };
+
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: thumbScale.value }],
+  }));
+
+  const displayValue = formatValue ? formatValue(value) : value.toString();
+
+  return (
+    <View style={[styles.container, style]}>
+      {(label || showValue) && (
+        <View style={[styles.header, { marginBottom: spacing[2] }]}>
+          {label && (
+            <Text
+              style={[
+                styles.label,
+                { color: disabled ? colors.foregroundMuted : colors.foreground },
+                labelStyle,
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {showValue && (
+            <Text
+              style={[
+                styles.value,
+                { color: disabled ? colors.foregroundMuted : colors.primary },
+              ]}
+            >
+              {displayValue}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <GestureDetector gesture={gesture}>
+        <View
+          style={[
+            styles.trackContainer,
+            { height: thumbSize, opacity: disabled ? 0.5 : 1 },
+          ]}
+          onLayout={handleLayout}
+        >
+          {/* Track background */}
+          <View
+            style={[
+              styles.track,
+              {
+                height: trackHeight,
+                borderRadius: trackHeight / 2,
+                backgroundColor: colors.backgroundMuted,
+              },
+            ]}
+          />
+
+          {/* Track fill */}
+          <View
+            style={[
+              styles.trackFill,
+              {
+                height: trackHeight,
+                borderRadius: trackHeight / 2,
+                backgroundColor: colors.primary,
+                width: `${percentage}%`,
+              },
+            ]}
+          />
+
+          {/* Thumb */}
+          <Animated.View
+            style={[
+              styles.thumb,
+              {
+                width: thumbSize,
+                height: thumbSize,
+                borderRadius: thumbSize / 2,
+                backgroundColor: colors.background,
+                borderWidth: 2,
+                borderColor: colors.primary,
+                left: `${percentage}%`,
+                marginLeft: -thumbSize / 2,
+              },
+              thumbAnimatedStyle,
+            ]}
+          />
+        </View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  trackContainer: {
+    justifyContent: 'center',
+  },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  trackFill: {
+    position: 'absolute',
+    left: 0,
+  },
+  thumb: {
+    position: 'absolute',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+});

package/registry/ui/spinner.tsx

@@ -0,0 +1,100 @@
+/**
+ * Spinner
+ *
+ * A loading indicator component with consistent styling.
+ * Wraps ActivityIndicator with theme-aware colors and size presets.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" />
+ * <Spinner color="primary" />
+ * <Spinner size="sm" color="secondary" />
+ * ```
+ */
+
+import React from 'react';
+import {
+  ActivityIndicator,
+  View,
+  StyleSheet,
+  ViewStyle,
+  ActivityIndicatorProps,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerColor = 'default' | 'primary' | 'secondary' | 'muted';
+
+export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size' | 'color'> {
+  /** Size preset */
+  size?: SpinnerSize;
+  /** Color variant */
+  color?: SpinnerColor;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
+  sm: 'small',
+  md: 'small',
+  lg: 'large',
+};
+
+const containerSizes: Record<SpinnerSize, number> = {
+  sm: 16,
+  md: 24,
+  lg: 36,
+};
+
+export function Spinner({
+  size = 'md',
+  color = 'default',
+  style,
+  ...props
+}: SpinnerProps) {
+  const { colors } = useTheme();
+
+  const getColor = (): string => {
+    switch (color) {
+      case 'primary':
+        return colors.primary;
+      case 'secondary':
+        return colors.secondary;
+      case 'muted':
+        return colors.foregroundMuted;
+      case 'default':
+      default:
+        return colors.foreground;
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: containerSizes[size],
+          height: containerSizes[size],
+        },
+        style,
+      ]}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading"
+      accessibilityState={{ busy: true }}
+    >
+      <ActivityIndicator
+        size={sizeMap[size]}
+        color={getColor()}
+        {...props}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/registry/ui/stepper.tsx

@@ -0,0 +1,314 @@
+/**
+ * Stepper
+ *
+ * A quantity input component with increment/decrement buttons.
+ * Perfect for cart quantities, counters, and numeric inputs.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState(1);
+ *
+ * <Stepper value={value} onValueChange={setValue} />
+ * <Stepper value={value} onValueChange={setValue} min={0} max={10} />
+ * <Stepper value={value} onValueChange={setValue} size="lg" />
+ * ```
+ */
+
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type StepperSize = 'sm' | 'md' | 'lg';
+export type StepperVariant = 'default' | 'outline' | 'ghost';
+
+export interface StepperProps {
+  /** Current value */
+  value: number;
+  /** Callback when value changes */
+  onValueChange?: (value: number) => void;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Size preset */
+  size?: StepperSize;
+  /** Visual variant */
+  variant?: StepperVariant;
+  /** Label text */
+  label?: string;
+  /** Format value for display */
+  formatValue?: (value: number) => string;
+  /** Container style */
+  style?: ViewStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+const sizeTokens: Record<StepperSize, {
+  height: number;
+  buttonWidth: number;
+  fontSize: number;
+  iconSize: number;
+  valueWidth: number;
+}> = {
+  sm: { height: 32, buttonWidth: 32, fontSize: 14, iconSize: 16, valueWidth: 40 },
+  md: { height: 40, buttonWidth: 40, fontSize: 16, iconSize: 20, valueWidth: 48 },
+  lg: { height: 48, buttonWidth: 48, fontSize: 18, iconSize: 24, valueWidth: 56 },
+};
+
+export function Stepper({
+  value,
+  onValueChange,
+  min = 0,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  size = 'md',
+  variant = 'default',
+  label,
+  formatValue,
+  style,
+  labelStyle,
+}: StepperProps) {
+  const { colors, radius, spacing } = useTheme();
+  const tokens = sizeTokens[size];
+
+  const decrementScale = useSharedValue(1);
+  const incrementScale = useSharedValue(1);
+
+  const canDecrement = value > min;
+  const canIncrement = value < max;
+
+  const handleDecrement = useCallback(() => {
+    if (!canDecrement || disabled) return;
+    haptic('light');
+    const newValue = Math.max(min, value - step);
+    onValueChange?.(newValue);
+  }, [canDecrement, disabled, min, value, step, onValueChange]);
+
+  const handleIncrement = useCallback(() => {
+    if (!canIncrement || disabled) return;
+    haptic('light');
+    const newValue = Math.min(max, value + step);
+    onValueChange?.(newValue);
+  }, [canIncrement, disabled, max, value, step, onValueChange]);
+
+  const handleDecrementPressIn = () => {
+    decrementScale.value = withSpring(0.9, { damping: 15, stiffness: 400 });
+  };
+
+  const handleDecrementPressOut = () => {
+    decrementScale.value = withSpring(1, { damping: 15, stiffness: 400 });
+  };
+
+  const handleIncrementPressIn = () => {
+    incrementScale.value = withSpring(0.9, { damping: 15, stiffness: 400 });
+  };
+
+  const handleIncrementPressOut = () => {
+    incrementScale.value = withSpring(1, { damping: 15, stiffness: 400 });
+  };
+
+  const decrementAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: decrementScale.value }],
+  }));
+
+  const incrementAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: incrementScale.value }],
+  }));
+
+  const getButtonStyle = (isDisabled: boolean): ViewStyle => {
+    const base: ViewStyle = {
+      width: tokens.buttonWidth,
+      height: tokens.height,
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+    switch (variant) {
+      case 'outline':
+        return {
+          ...base,
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: isDisabled ? colors.border : colors.border,
+        };
+      case 'ghost':
+        return {
+          ...base,
+          backgroundColor: 'transparent',
+        };
+      default:
+        return {
+          ...base,
+          backgroundColor: isDisabled ? colors.backgroundMuted : colors.secondary,
+        };
+    }
+  };
+
+  const displayValue = formatValue ? formatValue(value) : value.toString();
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      {label && (
+        <Text
+          style={[
+            styles.label,
+            {
+              fontSize: 14,
+              marginBottom: spacing[2],
+              color: disabled ? colors.foregroundMuted : colors.foreground,
+            },
+            labelStyle,
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+
+      <View
+        style={[
+          styles.container,
+          {
+            borderRadius: radius.md,
+            overflow: 'hidden',
+            opacity: disabled ? 0.5 : 1,
+          },
+          variant === 'outline' && {
+            borderWidth: 1,
+            borderColor: colors.border,
+          },
+        ]}
+      >
+        {/* Decrement Button */}
+        <AnimatedPressable
+          style={[
+            getButtonStyle(!canDecrement),
+            { borderTopLeftRadius: radius.md, borderBottomLeftRadius: radius.md },
+            decrementAnimatedStyle,
+          ]}
+          onPress={handleDecrement}
+          onPressIn={handleDecrementPressIn}
+          onPressOut={handleDecrementPressOut}
+          disabled={disabled || !canDecrement}
+          accessibilityRole="button"
+          accessibilityLabel="Decrease value"
+          accessibilityState={{ disabled: disabled || !canDecrement }}
+        >
+          <Text
+            style={[
+              styles.icon,
+              {
+                fontSize: tokens.iconSize,
+                color: !canDecrement || disabled
+                  ? colors.foregroundMuted
+                  : colors.foreground,
+              },
+            ]}
+          >
+            −
+          </Text>
+        </AnimatedPressable>
+
+        {/* Value Display */}
+        <View
+          style={[
+            styles.valueContainer,
+            {
+              width: tokens.valueWidth,
+              height: tokens.height,
+              backgroundColor: variant === 'default' ? colors.background : 'transparent',
+              borderLeftWidth: variant !== 'ghost' ? 1 : 0,
+              borderRightWidth: variant !== 'ghost' ? 1 : 0,
+              borderColor: colors.border,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.value,
+              {
+                fontSize: tokens.fontSize,
+                color: disabled ? colors.foregroundMuted : colors.foreground,
+              },
+            ]}
+          >
+            {displayValue}
+          </Text>
+        </View>
+
+        {/* Increment Button */}
+        <AnimatedPressable
+          style={[
+            getButtonStyle(!canIncrement),
+            { borderTopRightRadius: radius.md, borderBottomRightRadius: radius.md },
+            incrementAnimatedStyle,
+          ]}
+          onPress={handleIncrement}
+          onPressIn={handleIncrementPressIn}
+          onPressOut={handleIncrementPressOut}
+          disabled={disabled || !canIncrement}
+          accessibilityRole="button"
+          accessibilityLabel="Increase value"
+          accessibilityState={{ disabled: disabled || !canIncrement }}
+        >
+          <Text
+            style={[
+              styles.icon,
+              {
+                fontSize: tokens.iconSize,
+                color: !canIncrement || disabled
+                  ? colors.foregroundMuted
+                  : colors.foreground,
+              },
+            ]}
+          >
+            +
+          </Text>
+        </AnimatedPressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  label: {
+    fontWeight: '500',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+  },
+  valueContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  value: {
+    fontWeight: '600',
+    fontVariant: ['tabular-nums'],
+  },
+  icon: {
+    fontWeight: '400',
+  },
+});