@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/image.tsx

@@ -0,0 +1,283 @@
+/**
+ * Image
+ *
+ * An enhanced image component with loading skeleton, error fallback,
+ * and optional blur-up placeholder effect.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Image
+ *   source={{ uri: 'https://example.com/image.jpg' }}
+ *   style={{ width: 200, height: 200 }}
+ * />
+ *
+ * // With blur-up placeholder
+ * <Image
+ *   source={{ uri: 'https://example.com/image.jpg' }}
+ *   placeholder={{ uri: 'https://example.com/image-blur.jpg' }}
+ *   style={{ width: '100%', aspectRatio: 16 / 9 }}
+ * />
+ *
+ * // With error fallback
+ * <Image
+ *   source={{ uri: 'https://example.com/image.jpg' }}
+ *   fallback={<Text>Failed to load</Text>}
+ *   style={{ width: 100, height: 100, borderRadius: 8 }}
+ * />
+ * ```
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Image as RNImage,
+  ImageProps as RNImageProps,
+  ImageSourcePropType,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  Easing,
+} from 'react-native-reanimated';
+import Svg, { Path, Rect } from 'react-native-svg';
+import { useTheme } from '@nativeui/core';
+
+const AnimatedImage = Animated.createAnimatedComponent(RNImage);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ImageProps extends Omit<RNImageProps, 'source' | 'style'> {
+  /** Image source */
+  source: ImageSourcePropType;
+  /** Low-res placeholder for blur-up effect */
+  placeholder?: ImageSourcePropType;
+  /** Fallback content when image fails to load */
+  fallback?: React.ReactNode;
+  /** Show skeleton while loading */
+  showSkeleton?: boolean;
+  /** Container/image style */
+  style?: ImageStyle | ViewStyle;
+  /** Fade-in duration in ms */
+  fadeDuration?: number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Default Fallback Icon
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ImageFallbackIcon({ color, size = 48 }: { color: string; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        stroke={color}
+        strokeWidth="2"
+      />
+      <Path
+        d="M3 16l5-5 4 4 4-4 5 5"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M8.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Skeleton Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ImageSkeleton({ style }: { style?: ViewStyle }) {
+  const { colors } = useTheme();
+  const shimmer = useSharedValue(0);
+
+  React.useEffect(() => {
+    shimmer.value = withTiming(1, {
+      duration: 1500,
+      easing: Easing.inOut(Easing.ease),
+    });
+
+    const interval = setInterval(() => {
+      shimmer.value = 0;
+      shimmer.value = withTiming(1, {
+        duration: 1500,
+        easing: Easing.inOut(Easing.ease),
+      });
+    }, 1500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(shimmer.value, [0, 0.5, 1], [0.3, 0.6, 0.3]),
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        { backgroundColor: colors.backgroundMuted },
+        animatedStyle,
+        style,
+      ]}
+    />
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function Image({
+  source,
+  placeholder,
+  fallback,
+  showSkeleton = true,
+  style,
+  fadeDuration = 300,
+  onLoad,
+  onError,
+  ...props
+}: ImageProps) {
+  const { colors, radius } = useTheme();
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const opacity = useSharedValue(0);
+
+  const handleLoad = useCallback(
+    (e: any) => {
+      setIsLoading(false);
+      opacity.value = withTiming(1, {
+        duration: fadeDuration,
+        easing: Easing.out(Easing.ease),
+      });
+      onLoad?.(e);
+    },
+    [fadeDuration, onLoad]
+  );
+
+  const handleError = useCallback(
+    (e: any) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(e);
+    },
+    [onError]
+  );
+
+  const imageAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  // Extract dimensions from style
+  const flatStyle = StyleSheet.flatten(style) || {};
+  const { width, height, aspectRatio, borderRadius, ...containerStyle } = flatStyle as ImageStyle & ViewStyle;
+
+  const imageStyle: ImageStyle = {
+    width: width || '100%',
+    height: height || '100%',
+    aspectRatio,
+    borderRadius: borderRadius ?? radius.md,
+  };
+
+  // Error state
+  if (hasError) {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            width,
+            height,
+            aspectRatio,
+            borderRadius: borderRadius ?? radius.md,
+            backgroundColor: colors.backgroundMuted,
+          },
+          containerStyle,
+        ]}
+        accessibilityRole="image"
+        accessibilityLabel="Image failed to load"
+      >
+        {fallback || (
+          <View style={styles.fallbackContent}>
+            <ImageFallbackIcon color={colors.foregroundMuted} />
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width,
+          height,
+          aspectRatio,
+          borderRadius: borderRadius ?? radius.md,
+          overflow: 'hidden',
+        },
+        containerStyle,
+      ]}
+    >
+      {/* Skeleton/Placeholder */}
+      {isLoading && (
+        <>
+          {placeholder ? (
+            <RNImage
+              source={placeholder}
+              style={[StyleSheet.absoluteFill, { opacity: 0.5 }]}
+              blurRadius={10}
+            />
+          ) : showSkeleton ? (
+            <ImageSkeleton />
+          ) : null}
+        </>
+      )}
+
+      {/* Main Image */}
+      <AnimatedImage
+        source={source}
+        style={[imageStyle, imageAnimatedStyle]}
+        onLoad={handleLoad}
+        onError={handleError}
+        accessibilityRole="image"
+        {...props}
+      />
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fallbackContent: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/registry/ui/input.tsx

@@ -0,0 +1,242 @@
+/**
+ * Input
+ *
+ * Text input with label, placeholder, error states, and animated focus.
+ * Uses design tokens for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <Input label="Email" placeholder="you@example.com" />
+ * <Input label="Password" secureTextEntry error="Invalid password" />
+ * <Input size="lg" label="Name" icon={<Icon name="user" />} />
+ * ```
+ */
+
+import React, { forwardRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  TextInputProps,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** Label text above input */
+  label?: string;
+  /** Error message below input */
+  error?: string;
+  /** Helper text below input (hidden when error is present) */
+  helperText?: string;
+  /** Size variant */
+  size?: InputSize;
+  /** Icon element (left side) */
+  icon?: React.ReactNode;
+  /** Icon element (right side) */
+  iconRight?: React.ReactNode;
+  /** Container style */
+  containerStyle?: ViewStyle;
+  /** Input field style */
+  style?: TextStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      size = 'md',
+      icon,
+      iconRight,
+      containerStyle,
+      style,
+      labelStyle,
+      editable = true,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const { colors, components, timing, spacing } = useTheme();
+    const tokens = components.input[size];
+    const focusProgress = useSharedValue(0);
+
+    const hasError = !!error;
+    const isDisabled = editable === false;
+
+    const handleFocus = useCallback(
+      (e: any) => {
+        focusProgress.value = withTiming(1, timing.default);
+        haptic('selection');
+        onFocus?.(e);
+      },
+      [onFocus, timing.default]
+    );
+
+    const handleBlur = useCallback(
+      (e: any) => {
+        focusProgress.value = withTiming(0, timing.default);
+        onBlur?.(e);
+      },
+      [onBlur, timing.default]
+    );
+
+    const animatedBorderStyle = useAnimatedStyle(() => {
+      // Error state takes priority
+      if (hasError) {
+        return {
+          borderColor: colors.destructive,
+          borderWidth: 2,
+        };
+      }
+
+      return {
+        borderColor: interpolateColor(
+          focusProgress.value,
+          [0, 1],
+          [colors.border, colors.primary]
+        ),
+        borderWidth: focusProgress.value > 0.5 ? 2 : tokens.borderWidth,
+      };
+    }, [hasError, colors, tokens.borderWidth]);
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {label && (
+          <Text
+            style={[
+              styles.label,
+              {
+                fontSize: tokens.labelFontSize,
+                marginBottom: spacing[1.5],
+                color: hasError ? colors.destructive : colors.foreground,
+              },
+              labelStyle,
+            ]}
+          >
+            {label}
+          </Text>
+        )}
+
+        <View style={styles.inputWrapper}>
+          {icon && (
+            <View
+              style={[
+                styles.iconContainer,
+                styles.iconLeft,
+                { marginLeft: tokens.paddingHorizontal },
+              ]}
+            >
+              {icon}
+            </View>
+          )}
+
+          <AnimatedTextInput
+            ref={ref}
+            style={[
+              styles.input,
+              {
+                minHeight: tokens.height,
+                paddingHorizontal: tokens.paddingHorizontal,
+                paddingVertical: tokens.paddingVertical,
+                borderRadius: tokens.borderRadius,
+                fontSize: tokens.fontSize,
+                backgroundColor: isDisabled ? colors.backgroundMuted : colors.background,
+                color: isDisabled ? colors.foregroundMuted : colors.foreground,
+                paddingLeft: icon ? tokens.paddingHorizontal + tokens.iconSize + spacing[2] : tokens.paddingHorizontal,
+                paddingRight: iconRight ? tokens.paddingHorizontal + tokens.iconSize + spacing[2] : tokens.paddingHorizontal,
+              },
+              animatedBorderStyle,
+              style,
+            ]}
+            placeholderTextColor={colors.foregroundMuted}
+            editable={editable}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            accessibilityLabel={label}
+            accessibilityState={{ disabled: isDisabled }}
+            {...props}
+          />
+
+          {iconRight && (
+            <View
+              style={[
+                styles.iconContainer,
+                styles.iconRight,
+                { marginRight: tokens.paddingHorizontal },
+              ]}
+            >
+              {iconRight}
+            </View>
+          )}
+        </View>
+
+        {(error || helperText) && (
+          <Text
+            style={[
+              styles.helperText,
+              {
+                fontSize: tokens.helperFontSize,
+                marginTop: spacing[1],
+                color: hasError ? colors.destructive : colors.foregroundMuted,
+              },
+            ]}
+          >
+            {error || helperText}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  inputWrapper: {
+    position: 'relative',
+    justifyContent: 'center',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  input: {
+    // Dynamic styles applied inline
+  },
+  iconContainer: {
+    position: 'absolute',
+    zIndex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconLeft: {
+    left: 0,
+  },
+  iconRight: {
+    right: 0,
+  },
+  helperText: {
+    // Dynamic styles applied inline
+  },
+});

package/registry/ui/label.tsx

@@ -0,0 +1,99 @@
+/**
+ * Label
+ *
+ * A text label component for form inputs with consistent styling.
+ * Supports required indicator and disabled state.
+ *
+ * @example
+ * ```tsx
+ * <Label>Email</Label>
+ * <Label required>Password</Label>
+ * <Label disabled>Disabled Field</Label>
+ * <Label size="lg" htmlFor="name">Name</Label>
+ * ```
+ */
+
+import React from 'react';
+import {
+  Text,
+  StyleSheet,
+  TextStyle,
+  TextProps,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export type LabelSize = 'sm' | 'md' | 'lg';
+
+export interface LabelProps extends Omit<TextProps, 'style'> {
+  /** Label content */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: LabelSize;
+  /** Show required asterisk */
+  required?: boolean;
+  /** Disabled state (muted color) */
+  disabled?: boolean;
+  /** Error state (red color) */
+  error?: boolean;
+  /** Associated input id (for web compatibility) */
+  htmlFor?: string;
+  /** Additional text styles */
+  style?: TextStyle;
+}
+
+const sizeTokens: Record<LabelSize, { fontSize: number; lineHeight: number }> = {
+  sm: { fontSize: 12, lineHeight: 16 },
+  md: { fontSize: 14, lineHeight: 20 },
+  lg: { fontSize: 16, lineHeight: 24 },
+};
+
+export function Label({
+  children,
+  size = 'md',
+  required = false,
+  disabled = false,
+  error = false,
+  style,
+  ...props
+}: LabelProps) {
+  const { colors } = useTheme();
+  const tokens = sizeTokens[size];
+
+  const textColor = error
+    ? colors.destructive
+    : disabled
+      ? colors.foregroundMuted
+      : colors.foreground;
+
+  return (
+    <Text
+      style={[
+        styles.label,
+        {
+          fontSize: tokens.fontSize,
+          lineHeight: tokens.lineHeight,
+          color: textColor,
+        },
+        style,
+      ]}
+      accessibilityRole="text"
+      {...props}
+    >
+      {children}
+      {required && (
+        <Text style={[styles.required, { color: colors.destructive }]}>
+          {' *'}
+        </Text>
+      )}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    fontWeight: '500',
+  },
+  required: {
+    fontWeight: '400',
+  },
+});