@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/avatar.tsx

@@ -0,0 +1,116 @@
+/**
+ * Avatar
+ *
+ * User profile picture with fallback initials.
+ * Uses design tokens for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} fallback="JD" />
+ * <Avatar fallback="AB" size="lg" />
+ * <Avatar fallback="XY" size="xs" />
+ * ```
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps {
+  /** Image source */
+  source?: ImageSourcePropType;
+  /** Fallback text (usually initials) */
+  fallback?: string;
+  /** Size preset */
+  size?: AvatarSize;
+  /** Additional container styles */
+  style?: ViewStyle;
+}
+
+export function Avatar({
+  source,
+  fallback = '?',
+  size = 'md',
+  style,
+}: AvatarProps) {
+  const { colors, components, platformShadow } = useTheme();
+  const tokens = components.avatar[size];
+  const [imageError, setImageError] = useState(false);
+  const showFallback = !source || imageError;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: tokens.size,
+          height: tokens.size,
+          borderRadius: tokens.borderRadius,
+          backgroundColor: colors.backgroundMuted,
+        },
+        platformShadow('sm'),
+        style,
+      ]}
+      accessibilityRole="image"
+      accessibilityLabel={fallback ? `Avatar: ${fallback}` : 'Avatar'}
+    >
+      {showFallback ? (
+        <View
+          style={[
+            styles.fallback,
+            {
+              borderRadius: tokens.borderRadius,
+              backgroundColor: colors.primary,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.fallbackText,
+              {
+                fontSize: tokens.fontSize,
+                fontWeight: tokens.fontWeight,
+                color: colors.primaryForeground,
+              },
+            ]}
+          >
+            {fallback.slice(0, 2).toUpperCase()}
+          </Text>
+        </View>
+      ) : (
+        <Image
+          source={source}
+          style={[styles.image, { borderRadius: tokens.borderRadius }]}
+          onError={() => setImageError(true)}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  fallback: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fallbackText: {
+    // Dynamic styles applied inline
+  },
+});

package/registry/ui/badge.tsx

@@ -0,0 +1,125 @@
+/**
+ * Badge
+ *
+ * Small status indicator for labels and counts.
+ * Uses design tokens for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <Badge>New</Badge>
+ * <Badge variant="secondary">12</Badge>
+ * <Badge variant="destructive" size="lg">Error</Badge>
+ * <Badge variant="outline">Draft</Badge>
+ * ```
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { useTheme, ThemeColors } from '@nativeui/core';
+
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Visual style variant */
+  variant?: BadgeVariant;
+  /** Size variant */
+  size?: BadgeSize;
+  /** Additional container styles */
+  style?: ViewStyle;
+  /** Additional text styles */
+  textStyle?: TextStyle;
+}
+
+export function Badge({
+  children,
+  variant = 'default',
+  size = 'md',
+  style,
+  textStyle,
+}: BadgeProps) {
+  const { colors, components, platformShadow } = useTheme();
+  const tokens = components.badge[size];
+  const variantStyles = getVariantStyles(variant, colors);
+
+  // Add subtle shadow for solid badges
+  const shadowStyle = variant !== 'outline' ? platformShadow('sm') : {};
+
+  return (
+    <View
+      style={[
+        styles.base,
+        {
+          paddingHorizontal: tokens.paddingHorizontal,
+          paddingVertical: tokens.paddingVertical,
+          borderRadius: tokens.borderRadius,
+        },
+        variantStyles.container,
+        shadowStyle,
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.text,
+          {
+            fontSize: tokens.fontSize,
+            fontWeight: tokens.fontWeight,
+          },
+          variantStyles.text,
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+function getVariantStyles(
+  variant: BadgeVariant,
+  colors: ThemeColors
+) {
+  switch (variant) {
+    case 'default':
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        text: { color: colors.primaryForeground } as TextStyle,
+      };
+    case 'secondary':
+      return {
+        container: { backgroundColor: colors.secondary } as ViewStyle,
+        text: { color: colors.secondaryForeground } as TextStyle,
+      };
+    case 'destructive':
+      return {
+        container: { backgroundColor: colors.destructive } as ViewStyle,
+        text: { color: colors.destructiveForeground } as TextStyle,
+      };
+    case 'outline':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: colors.border,
+        } as ViewStyle,
+        text: { color: colors.foreground } as TextStyle,
+      };
+    default:
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        text: { color: colors.primaryForeground } as TextStyle,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});

package/registry/ui/button.tsx

@@ -0,0 +1,240 @@
+/**
+ * Button
+ *
+ * A pressable button component with multiple variants and sizes.
+ * Uses design tokens for consistent styling across the app.
+ *
+ * @example
+ * ```tsx
+ * <Button onPress={() => {}}>Click me</Button>
+ * <Button variant="secondary" size="sm">Small</Button>
+ * <Button variant="destructive" disabled>Disabled</Button>
+ * <Button variant="outline" icon={<Icon name="plus" />}>With Icon</Button>
+ * ```
+ */
+
+import React, { useCallback, forwardRef } from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+  PressableProps,
+  Pressable,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme, BUTTON_CONSTANTS } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+  /** Button content */
+  children: React.ReactNode;
+  /** Visual style variant */
+  variant?: ButtonVariant;
+  /** Size preset */
+  size?: ButtonSize;
+  /** Show loading spinner */
+  loading?: boolean;
+  /** Icon element (left side) */
+  icon?: React.ReactNode;
+  /** Icon element (right side) */
+  iconRight?: React.ReactNode;
+  /** Full width button */
+  fullWidth?: boolean;
+  /** Additional container styles */
+  style?: ViewStyle;
+  /** Additional text styles */
+  textStyle?: TextStyle;
+}
+
+export const Button = forwardRef(function Button(
+  {
+    children,
+    variant = 'default',
+    size = 'md',
+    loading = false,
+    icon,
+    iconRight,
+    fullWidth = false,
+    disabled,
+    style,
+    textStyle,
+    onPressIn,
+    onPressOut,
+    onPress,
+    ...props
+  }: ButtonProps,
+  ref: React.ForwardedRef<View>
+) {
+  const { colors, components, platformShadow, springs } = useTheme();
+  const tokens = components.button[size];
+  const isDisabled = disabled || loading;
+  const scale = useSharedValue(1);
+
+  const handlePressIn = useCallback(
+    (e: any) => {
+      scale.value = withSpring(BUTTON_CONSTANTS.pressScale, springs.snappy);
+      onPressIn?.(e);
+    },
+    [onPressIn, springs.snappy]
+  );
+
+  const handlePressOut = useCallback(
+    (e: any) => {
+      scale.value = withSpring(1, springs.snappy);
+      onPressOut?.(e);
+    },
+    [onPressOut, springs.snappy]
+  );
+
+  const handlePress = useCallback(
+    (e: any) => {
+      haptic('light');
+      onPress?.(e);
+    },
+    [onPress]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  // Get variant-specific styles
+  const variantStyles = getVariantStyles(variant, colors);
+
+  // Add shadow for solid buttons
+  const shadowStyle =
+    variant !== 'ghost' && variant !== 'outline' && !isDisabled
+      ? platformShadow('sm')
+      : {};
+
+  return (
+    <AnimatedPressable
+      ref={ref}
+      style={[
+        styles.base,
+        {
+          minHeight: tokens.height,
+          paddingHorizontal: tokens.paddingHorizontal,
+          paddingVertical: tokens.paddingVertical,
+          borderRadius: tokens.borderRadius,
+          gap: tokens.gap,
+        },
+        variantStyles.container,
+        shadowStyle,
+        isDisabled && styles.disabled,
+        fullWidth && styles.fullWidth,
+        animatedStyle,
+        style,
+      ]}
+      disabled={isDisabled}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={handlePress}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled }}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={variantStyles.spinnerColor} />
+      ) : (
+        <>
+          {icon && <View style={styles.icon}>{icon}</View>}
+          <Text
+            style={[
+              styles.text,
+              {
+                fontSize: tokens.fontSize,
+                fontWeight: tokens.fontWeight,
+              },
+              variantStyles.text,
+              textStyle,
+            ]}
+          >
+            {children}
+          </Text>
+          {iconRight && <View style={styles.icon}>{iconRight}</View>}
+        </>
+      )}
+    </AnimatedPressable>
+  );
+});
+
+function getVariantStyles(
+  variant: ButtonVariant,
+  colors: ReturnType<typeof useTheme>['colors']
+) {
+  switch (variant) {
+    case 'default':
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        text: { color: colors.primaryForeground } as TextStyle,
+        spinnerColor: colors.primaryForeground,
+      };
+    case 'secondary':
+      return {
+        container: { backgroundColor: colors.secondary } as ViewStyle,
+        text: { color: colors.secondaryForeground } as TextStyle,
+        spinnerColor: colors.secondaryForeground,
+      };
+    case 'outline':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: colors.border,
+        } as ViewStyle,
+        text: { color: colors.foreground } as TextStyle,
+        spinnerColor: colors.foreground,
+      };
+    case 'ghost':
+      return {
+        container: { backgroundColor: 'transparent' } as ViewStyle,
+        text: { color: colors.foreground } as TextStyle,
+        spinnerColor: colors.foreground,
+      };
+    case 'destructive':
+      return {
+        container: { backgroundColor: colors.destructive } as ViewStyle,
+        text: { color: colors.destructiveForeground } as TextStyle,
+        spinnerColor: colors.destructiveForeground,
+      };
+    default:
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        text: { color: colors.primaryForeground } as TextStyle,
+        spinnerColor: colors.primaryForeground,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: BUTTON_CONSTANTS.disabledOpacity,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  text: {
+    textAlign: 'center',
+  },
+  icon: {
+    flexShrink: 0,
+  },
+});