@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/alert-dialog.tsx

@@ -0,0 +1,355 @@
+/**
+ * Alert Dialog
+ *
+ * A confirmation dialog that requires explicit user action.
+ * Cannot be dismissed by clicking backdrop (use for destructive actions).
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <AlertDialog open={open} onOpenChange={setOpen}>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Delete Account</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This will permanently delete your account. This action cannot be undone.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction onPress={handleDelete}>Delete</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
+
+import React, { useEffect, useCallback, createContext, useContext } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Dimensions,
+  Pressable,
+  PressableProps,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  interpolate,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// Context for alert dialog state
+const AlertDialogContext = createContext<{
+  onClose: () => void;
+} | null>(null);
+
+const useAlertDialog = () => {
+  const context = useContext(AlertDialogContext);
+  if (!context) {
+    throw new Error('AlertDialog components must be used within an AlertDialog');
+  }
+  return context;
+};
+
+export interface AlertDialogProps {
+  /** Controlled open state */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Children (should be AlertDialogContent) */
+  children: React.ReactNode;
+}
+
+export function AlertDialog({ open, onOpenChange, children }: AlertDialogProps) {
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={handleClose}
+    >
+      <AlertDialogContext.Provider value={{ onClose: handleClose }}>
+        {children}
+      </AlertDialogContext.Provider>
+    </Modal>
+  );
+}
+
+export interface AlertDialogContentProps {
+  /** Content children */
+  children: React.ReactNode;
+  /** Max width of dialog */
+  maxWidth?: number;
+  /** Additional styles */
+  style?: ViewStyle;
+}
+
+export function AlertDialogContent({
+  children,
+  maxWidth = SCREEN_WIDTH - 48,
+  style,
+}: AlertDialogContentProps) {
+  const { colors, radius, platformShadow, springs } = useTheme();
+
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withSpring(1, springs.snappy);
+  }, []);
+
+  const animatedBackdropStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(progress.value, [0, 1], [0, 0.5]),
+  }));
+
+  const animatedDialogStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [
+      { scale: interpolate(progress.value, [0, 1], [0.95, 1]) },
+    ],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.backdrop,
+          { backgroundColor: colors.foreground },
+          animatedBackdropStyle,
+        ]}
+      />
+
+      <Animated.View
+        style={[
+          styles.dialog,
+          {
+            maxWidth,
+            backgroundColor: colors.card,
+            borderRadius: radius.xl,
+          },
+          platformShadow('lg'),
+          animatedDialogStyle,
+          style,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  );
+}
+
+export interface AlertDialogHeaderProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export function AlertDialogHeader({ children, style }: AlertDialogHeaderProps) {
+  const { spacing } = useTheme();
+  return (
+    <View style={[styles.header, { marginBottom: spacing[4] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface AlertDialogTitleProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function AlertDialogTitle({ children, style }: AlertDialogTitleProps) {
+  const { colors } = useTheme();
+  return (
+    <Text style={[styles.title, { color: colors.foreground }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export interface AlertDialogDescriptionProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function AlertDialogDescription({ children, style }: AlertDialogDescriptionProps) {
+  const { colors, spacing } = useTheme();
+  return (
+    <Text
+      style={[
+        styles.description,
+        { color: colors.foregroundMuted, marginTop: spacing[2] },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export interface AlertDialogFooterProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export function AlertDialogFooter({ children, style }: AlertDialogFooterProps) {
+  const { spacing } = useTheme();
+  return (
+    <View style={[styles.footer, { marginTop: spacing[6], gap: spacing[3] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface AlertDialogCancelProps extends Omit<PressableProps, 'style'> {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function AlertDialogCancel({
+  children,
+  style,
+  textStyle,
+  onPress,
+  ...props
+}: AlertDialogCancelProps) {
+  const { colors, radius, spacing } = useTheme();
+  const { onClose } = useAlertDialog();
+
+  const handlePress = useCallback(
+    (e: any) => {
+      haptic('light');
+      onPress?.(e);
+      onClose();
+    },
+    [onPress, onClose]
+  );
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: colors.secondary,
+          borderRadius: radius.md,
+          paddingHorizontal: spacing[4],
+          paddingVertical: spacing[2.5],
+          opacity: pressed ? 0.7 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      {...props}
+    >
+      <Text style={[styles.buttonText, { color: colors.secondaryForeground }, textStyle]}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+export interface AlertDialogActionProps extends Omit<PressableProps, 'style'> {
+  children: React.ReactNode;
+  /** Use destructive styling */
+  destructive?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function AlertDialogAction({
+  children,
+  destructive = false,
+  style,
+  textStyle,
+  onPress,
+  ...props
+}: AlertDialogActionProps) {
+  const { colors, radius, spacing } = useTheme();
+  const { onClose } = useAlertDialog();
+
+  const handlePress = useCallback(
+    (e: any) => {
+      haptic(destructive ? 'warning' : 'light');
+      onPress?.(e);
+      onClose();
+    },
+    [onPress, onClose, destructive]
+  );
+
+  const backgroundColor = destructive ? colors.destructive : colors.primary;
+  const textColor = destructive ? colors.destructiveForeground : colors.primaryForeground;
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor,
+          borderRadius: radius.md,
+          paddingHorizontal: spacing[4],
+          paddingVertical: spacing[2.5],
+          opacity: pressed ? 0.7 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      {...props}
+    >
+      <Text style={[styles.buttonText, { color: textColor }, textStyle]}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  dialog: {
+    width: '100%',
+    padding: 24,
+  },
+  header: {},
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/registry/ui/avatar-stack.tsx

@@ -0,0 +1,278 @@
+/**
+ * AvatarStack
+ *
+ * Overlapping avatar group for displaying multiple users.
+ * Shows a configurable number of avatars with an overflow indicator.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AvatarStack
+ *   avatars={[
+ *     { source: { uri: 'https://...' }, name: 'John' },
+ *     { source: { uri: 'https://...' }, name: 'Jane' },
+ *     { source: { uri: 'https://...' }, name: 'Bob' },
+ *   ]}
+ * />
+ *
+ * // With max count
+ * <AvatarStack
+ *   avatars={users.map(u => ({ source: { uri: u.avatar }, name: u.name }))}
+ *   max={3}
+ *   size="lg"
+ * />
+ *
+ * // Different sizes
+ * <AvatarStack avatars={avatars} size="sm" />
+ * <AvatarStack avatars={avatars} size="md" />
+ * <AvatarStack avatars={avatars} size="lg" />
+ * ```
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  ViewStyle,
+  ImageSourcePropType,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type AvatarStackSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarItem {
+  /** Image source */
+  source?: ImageSourcePropType;
+  /** User name (used for fallback initials) */
+  name?: string;
+  /** Background color for fallback */
+  fallbackColor?: string;
+}
+
+export interface AvatarStackProps {
+  /** Array of avatar items */
+  avatars: AvatarItem[];
+  /** Maximum number of avatars to show */
+  max?: number;
+  /** Size preset */
+  size?: AvatarStackSize;
+  /** Overlap amount (0-1, default 0.3) */
+  overlap?: number;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size configs
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG = {
+  sm: {
+    size: 28,
+    fontSize: 10,
+    borderWidth: 2,
+  },
+  md: {
+    size: 36,
+    fontSize: 12,
+    borderWidth: 2,
+  },
+  lg: {
+    size: 44,
+    fontSize: 14,
+    borderWidth: 3,
+  },
+  xl: {
+    size: 56,
+    fontSize: 18,
+    borderWidth: 3,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helper functions
+// ─────────────────────────────────────────────────────────────────────────────
+
+function getInitials(name?: string): string {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0] ?? '';
+  const last = parts[parts.length - 1] ?? '';
+  if (parts.length === 1) {
+    return first.charAt(0).toUpperCase();
+  }
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+
+function stringToColor(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash % 360);
+  return `hsl(${hue}, 55%, 55%)`;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function AvatarStack({
+  avatars,
+  max = 4,
+  size = 'md',
+  overlap = 0.3,
+  style,
+}: AvatarStackProps) {
+  const { colors, fontWeight } = useTheme();
+  const config = SIZE_CONFIG[size];
+
+  const visibleAvatars = avatars.slice(0, max);
+  const overflowCount = avatars.length - max;
+  const hasOverflow = overflowCount > 0;
+
+  // Calculate overlap offset
+  const overlapOffset = config.size * overlap;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        style,
+      ]}
+      accessibilityRole="none"
+      accessibilityLabel={`${avatars.length} users`}
+    >
+      {visibleAvatars.map((avatar, index) => {
+        const initials = getInitials(avatar.name);
+        const bgColor = avatar.fallbackColor || stringToColor(avatar.name || `user-${index}`);
+
+        return (
+          <View
+            key={index}
+            style={[
+              styles.avatarWrapper,
+              {
+                width: config.size,
+                height: config.size,
+                borderRadius: config.size / 2,
+                borderWidth: config.borderWidth,
+                borderColor: colors.background,
+                marginLeft: index === 0 ? 0 : -overlapOffset,
+                zIndex: visibleAvatars.length - index,
+              },
+            ]}
+          >
+            {avatar.source ? (
+              <Image
+                source={avatar.source}
+                style={[
+                  styles.avatarImage,
+                  {
+                    width: config.size - config.borderWidth * 2,
+                    height: config.size - config.borderWidth * 2,
+                    borderRadius: (config.size - config.borderWidth * 2) / 2,
+                  },
+                ]}
+              />
+            ) : (
+              <View
+                style={[
+                  styles.avatarFallback,
+                  {
+                    width: config.size - config.borderWidth * 2,
+                    height: config.size - config.borderWidth * 2,
+                    borderRadius: (config.size - config.borderWidth * 2) / 2,
+                    backgroundColor: bgColor,
+                  },
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.initials,
+                    {
+                      fontSize: config.fontSize,
+                      fontWeight: fontWeight.semibold,
+                      color: '#ffffff',
+                    },
+                  ]}
+                >
+                  {initials}
+                </Text>
+              </View>
+            )}
+          </View>
+        );
+      })}
+
+      {/* Overflow indicator */}
+      {hasOverflow && (
+        <View
+          style={[
+            styles.avatarWrapper,
+            styles.overflowBadge,
+            {
+              width: config.size,
+              height: config.size,
+              borderRadius: config.size / 2,
+              borderWidth: config.borderWidth,
+              borderColor: colors.background,
+              backgroundColor: colors.secondary,
+              marginLeft: -overlapOffset,
+              zIndex: 0,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.overflowText,
+              {
+                fontSize: config.fontSize,
+                fontWeight: fontWeight.semibold,
+                color: colors.secondaryForeground,
+              },
+            ]}
+          >
+            +{overflowCount > 99 ? '99' : overflowCount}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+  },
+  avatarImage: {
+    resizeMode: 'cover',
+  },
+  avatarFallback: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  initials: {
+    textAlign: 'center',
+  },
+  overflowBadge: {},
+  overflowText: {
+    textAlign: 'center',
+  },
+});