@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/list.tsx

@@ -0,0 +1,519 @@
+/**
+ * List & ListItem
+ *
+ * A flexible list component with slots for left/right content,
+ * chevron indicators, dividers, and pressable support.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <List>
+ *   <ListItem title="Settings" />
+ *   <ListItem title="Profile" subtitle="John Doe" />
+ * </List>
+ *
+ * // With icons and chevron
+ * <List>
+ *   <ListItem
+ *     title="Notifications"
+ *     left={<BellIcon />}
+ *     showChevron
+ *     onPress={handlePress}
+ *   />
+ * </List>
+ *
+ * // With right content
+ * <List>
+ *   <ListItem
+ *     title="Dark Mode"
+ *     right={<Switch value={isDark} onValueChange={setIsDark} />}
+ *   />
+ * </List>
+ * ```
+ */
+
+import React, { createContext, useContext } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Image,
+  ImageSourcePropType,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ListProps {
+  /** List items */
+  children: React.ReactNode;
+  /** Show dividers between items */
+  showDividers?: boolean;
+  /** Inset dividers from left edge */
+  insetDividers?: boolean;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+/** Metadata item for thumbnail variant */
+export interface ListItemMetadata {
+  /** Icon to display */
+  icon: React.ReactNode;
+  /** Label text */
+  label: string;
+}
+
+export interface ListItemProps {
+  /** Visual variant */
+  variant?: 'default' | 'thumbnail';
+  /** Primary text */
+  title: string;
+  /** Secondary text below title (used as subtitle in default, description in thumbnail) */
+  subtitle?: string;
+  /** Longer description text (thumbnail variant only) */
+  description?: string;
+  /** Thumbnail image source (thumbnail variant only) */
+  thumbnail?: ImageSourcePropType;
+  /** Thumbnail size (thumbnail variant only, default: 100) */
+  thumbnailSize?: number;
+  /** Metadata items with icon and label (thumbnail variant only) */
+  metadata?: ListItemMetadata[];
+  /** Content to render on the left (icon, avatar, etc.) - default variant only */
+  left?: React.ReactNode;
+  /** Content to render on the right (switch, badge, etc.) */
+  right?: React.ReactNode;
+  /** Show chevron indicator on the right */
+  showChevron?: boolean;
+  /** Press handler - makes item pressable */
+  onPress?: () => void;
+  /** Long press handler */
+  onLongPress?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  style?: ViewStyle;
+  /** Title text style */
+  titleStyle?: TextStyle;
+  /** Subtitle text style */
+  subtitleStyle?: TextStyle;
+  /** Description text style (thumbnail variant only) */
+  descriptionStyle?: TextStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ListContextValue {
+  showDividers: boolean;
+  insetDividers: boolean;
+}
+
+const ListContext = createContext<ListContextValue>({
+  showDividers: true,
+  insetDividers: false,
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icons
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ChevronRightIcon({ color, size = 20 }: { color: string; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M9 18l6-6-6-6"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// List Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function List({
+  children,
+  showDividers = true,
+  insetDividers = false,
+  style,
+}: ListProps) {
+  const { colors, radius } = useTheme();
+
+  const childArray = React.Children.toArray(children);
+
+  return (
+    <ListContext.Provider value={{ showDividers, insetDividers }}>
+      <View
+        style={[
+          styles.list,
+          {
+            backgroundColor: colors.card,
+            borderRadius: radius.lg,
+            borderWidth: 1,
+            borderColor: colors.border,
+          },
+          style,
+        ]}
+      >
+        {childArray.map((child, index) => (
+          <React.Fragment key={index}>
+            {child}
+            {showDividers && index < childArray.length - 1 && (
+              <View
+                style={[
+                  styles.divider,
+                  {
+                    backgroundColor: colors.border,
+                    marginLeft: insetDividers ? 56 : 0,
+                  },
+                ]}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </View>
+    </ListContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ListItem Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function ListItem({
+  variant = 'default',
+  title,
+  subtitle,
+  description,
+  thumbnail,
+  thumbnailSize = 100,
+  metadata,
+  left,
+  right,
+  showChevron = false,
+  onPress,
+  onLongPress,
+  disabled = false,
+  style,
+  titleStyle,
+  subtitleStyle,
+  descriptionStyle,
+}: ListItemProps) {
+  const { colors, spacing, fontSize, fontWeight, radius, springs } = useTheme();
+  const scale = useSharedValue(1);
+
+  const isPressable = !!onPress || !!onLongPress;
+
+  const handlePressIn = () => {
+    if (isPressable && !disabled) {
+      scale.value = withSpring(0.98, springs.snappy);
+    }
+  };
+
+  const handlePressOut = () => {
+    if (isPressable && !disabled) {
+      scale.value = withSpring(1, springs.snappy);
+    }
+  };
+
+  const handlePress = () => {
+    if (!disabled) {
+      haptic('light');
+      onPress?.();
+    }
+  };
+
+  const handleLongPress = () => {
+    if (!disabled) {
+      haptic('medium');
+      onLongPress?.();
+    }
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  // Thumbnail variant content
+  const thumbnailContent = (
+    <>
+      {/* Thumbnail Image */}
+      {thumbnail && (
+        <Image
+          source={thumbnail}
+          style={[
+            styles.thumbnail,
+            {
+              width: thumbnailSize,
+              height: thumbnailSize,
+              borderRadius: radius.md,
+              marginRight: spacing[3],
+            },
+          ]}
+          resizeMode="cover"
+        />
+      )}
+
+      {/* Content */}
+      <View style={styles.thumbnailContent}>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: disabled ? colors.foregroundMuted : colors.foreground,
+              fontSize: fontSize.base,
+              fontWeight: fontWeight.semibold,
+            },
+            titleStyle,
+          ]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {(description || subtitle) && (
+          <Text
+            style={[
+              styles.description,
+              {
+                color: colors.foregroundMuted,
+                fontSize: fontSize.sm,
+                marginTop: spacing[1],
+                lineHeight: fontSize.sm * 1.4,
+              },
+              descriptionStyle,
+            ]}
+            numberOfLines={2}
+          >
+            {description || subtitle}
+          </Text>
+        )}
+        {metadata && metadata.length > 0 && (
+          <View style={[styles.metadataRow, { marginTop: spacing[2], gap: spacing[3] }]}>
+            {metadata.map((item, index) => (
+              <View key={index} style={[styles.metadataItem, { gap: spacing[1] }]}>
+                {React.isValidElement(item.icon)
+                  ? React.cloneElement(item.icon as React.ReactElement<{ color?: string; width?: number; height?: number }>, {
+                      color: colors.foregroundMuted,
+                      width: 14,
+                      height: 14,
+                    })
+                  : item.icon}
+                <Text
+                  style={{
+                    color: colors.foregroundMuted,
+                    fontSize: fontSize.xs,
+                  }}
+                >
+                  {item.label}
+                </Text>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {/* Right Slot */}
+      {right && (
+        <View style={[styles.rightSlot, { marginLeft: spacing[2] }]}>
+          {right}
+        </View>
+      )}
+
+      {/* Chevron */}
+      {showChevron && (
+        <View style={[styles.chevron, { marginLeft: spacing[2] }]}>
+          <ChevronRightIcon color={colors.foregroundMuted} />
+        </View>
+      )}
+    </>
+  );
+
+  // Default variant content
+  const defaultContent = (
+    <>
+      {/* Left Slot */}
+      {left && (
+        <View style={[styles.leftSlot, { marginRight: spacing[3] }]}>
+          {React.isValidElement(left)
+            ? React.cloneElement(left as React.ReactElement<{ color?: string; width?: number; height?: number }>, {
+                color: colors.foreground,
+                width: 24,
+                height: 24,
+              })
+            : left}
+        </View>
+      )}
+
+      {/* Content */}
+      <View style={styles.content}>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: disabled ? colors.foregroundMuted : colors.foreground,
+              fontSize: fontSize.base,
+              fontWeight: fontWeight.medium,
+            },
+            titleStyle,
+          ]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              styles.subtitle,
+              {
+                color: colors.foregroundMuted,
+                fontSize: fontSize.sm,
+                marginTop: spacing[0.5],
+              },
+              subtitleStyle,
+            ]}
+            numberOfLines={2}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+
+      {/* Right Slot */}
+      {right && (
+        <View style={[styles.rightSlot, { marginLeft: spacing[3] }]}>
+          {right}
+        </View>
+      )}
+
+      {/* Chevron */}
+      {showChevron && (
+        <View style={[styles.chevron, { marginLeft: spacing[2] }]}>
+          <ChevronRightIcon color={colors.foregroundMuted} />
+        </View>
+      )}
+    </>
+  );
+
+  const content = variant === 'thumbnail' ? thumbnailContent : defaultContent;
+
+  const containerStyle = [
+    styles.item,
+    {
+      paddingHorizontal: spacing[4],
+      paddingVertical: spacing[3],
+      minHeight: variant === 'thumbnail' ? thumbnailSize + spacing[3] * 2 : 56,
+    },
+    variant === 'thumbnail' && styles.thumbnailItem,
+    disabled && styles.disabled,
+    style,
+  ];
+
+  if (isPressable) {
+    return (
+      <AnimatedPressable
+        style={[containerStyle, animatedStyle]}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onPress={handlePress}
+        onLongPress={onLongPress ? handleLongPress : undefined}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        accessibilityHint={description || subtitle}
+        accessibilityState={{ disabled }}
+      >
+        {content}
+      </AnimatedPressable>
+    );
+  }
+
+  return (
+    <View style={containerStyle} accessibilityRole="text" accessibilityLabel={title}>
+      {content}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  list: {
+    overflow: 'hidden',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  thumbnailItem: {
+    alignItems: 'flex-start',
+  },
+  leftSlot: {
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  thumbnailContent: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  thumbnail: {
+    flexShrink: 0,
+  },
+  title: {
+    // Dynamic styles applied inline
+  },
+  subtitle: {
+    // Dynamic styles applied inline
+  },
+  description: {
+    // Dynamic styles applied inline
+  },
+  metadataRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  metadataItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rightSlot: {
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chevron: {
+    flexShrink: 0,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/registry/ui/progress.tsx

@@ -0,0 +1,168 @@
+/**
+ * Progress
+ *
+ * A progress bar component with animated fill.
+ * Supports determinate and indeterminate states.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={50} />
+ * <Progress value={75} size="lg" />
+ * <Progress indeterminate />
+ * <Progress value={100} color="success" />
+ * ```
+ */
+
+import React, { useEffect } from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+  Easing,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressColor = 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+
+export interface ProgressProps {
+  /** Current progress value (0-100) */
+  value?: number;
+  /** Maximum value */
+  max?: number;
+  /** Size preset */
+  size?: ProgressSize;
+  /** Color variant */
+  color?: ProgressColor;
+  /** Show indeterminate animation */
+  indeterminate?: boolean;
+  /** Container style */
+  style?: ViewStyle;
+  /** Track style */
+  trackStyle?: ViewStyle;
+  /** Fill style */
+  fillStyle?: ViewStyle;
+}
+
+const sizeMap: Record<ProgressSize, number> = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+};
+
+export function Progress({
+  value = 0,
+  max = 100,
+  size = 'md',
+  color = 'primary',
+  indeterminate = false,
+  style,
+  trackStyle,
+  fillStyle,
+}: ProgressProps) {
+  const { colors } = useTheme();
+  const progress = useSharedValue(0);
+  const indeterminateProgress = useSharedValue(0);
+
+  const normalizedValue = Math.min(Math.max(value, 0), max);
+  const percentage = (normalizedValue / max) * 100;
+
+  useEffect(() => {
+    if (!indeterminate) {
+      progress.value = withTiming(percentage, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+    }
+  }, [percentage, indeterminate]);
+
+  useEffect(() => {
+    if (indeterminate) {
+      indeterminateProgress.value = withRepeat(
+        withSequence(
+          withTiming(1, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
+          withTiming(0, { duration: 1000, easing: Easing.inOut(Easing.ease) })
+        ),
+        -1,
+        false
+      );
+    }
+  }, [indeterminate]);
+
+  const getFillColor = (): string => {
+    switch (color) {
+      case 'primary':
+        return colors.primary;
+      case 'success':
+        return colors.success ?? '#22c55e';
+      case 'warning':
+        return colors.warning ?? '#f59e0b';
+      case 'destructive':
+        return colors.destructive;
+      case 'default':
+      default:
+        return colors.foreground;
+    }
+  };
+
+  const determinateStyle = useAnimatedStyle(() => ({
+    width: `${progress.value}%`,
+  }));
+
+  const indeterminateStyle = useAnimatedStyle(() => ({
+    width: '30%',
+    left: `${indeterminateProgress.value * 70}%`,
+  }));
+
+  const height = sizeMap[size];
+  const fillColor = getFillColor();
+
+  return (
+    <View
+      style={[
+        styles.track,
+        {
+          height,
+          borderRadius: height / 2,
+          backgroundColor: colors.backgroundMuted,
+        },
+        trackStyle,
+        style,
+      ]}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max,
+        now: indeterminate ? undefined : normalizedValue,
+      }}
+    >
+      <Animated.View
+        style={[
+          styles.fill,
+          {
+            height,
+            borderRadius: height / 2,
+            backgroundColor: fillColor,
+          },
+          indeterminate ? indeterminateStyle : determinateStyle,
+          fillStyle,
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+});