@metacells/mcellui-mcp-server 0.1.1 → 0.1.3

package/registry/ui/tabs.tsx

@@ -0,0 +1,348 @@
+/**
+ * Tabs
+ *
+ * A tabbed navigation component with animated indicator.
+ * Supports both controlled and uncontrolled modes.
+ * Two visual variants: "pill" (segmented control) and "underline" (bottom border).
+ *
+ * @example
+ * ```tsx
+ * // Pill variant (default) - segmented control style
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Account</TabsTrigger>
+ *     <TabsTrigger value="tab2">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">
+ *     <Text>Account content</Text>
+ *   </TabsContent>
+ *   <TabsContent value="tab2">
+ *     <Text>Settings content</Text>
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * // Underline variant - bottom border style (great for profiles)
+ * <Tabs defaultValue="posts">
+ *   <TabsList variant="underline">
+ *     <TabsTrigger value="posts">Posts</TabsTrigger>
+ *     <TabsTrigger value="media">Media</TabsTrigger>
+ *     <TabsTrigger value="about">About</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="posts">...</TabsContent>
+ * </Tabs>
+ * ```
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  LayoutChangeEvent,
+  LayoutRectangle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+// Context
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs components must be used within a Tabs provider');
+  }
+  return context;
+}
+
+// Tabs Root
+export interface TabsProps {
+  /** Controlled value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void;
+  /** Children */
+  children: React.ReactNode;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function Tabs({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  children,
+  style,
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View style={[styles.container, style]}>{children}</View>
+    </TabsContext.Provider>
+  );
+}
+
+// TabsList Context for indicator
+export type TabsVariant = 'pill' | 'underline';
+
+interface TabsListContextValue {
+  registerTab: (value: string, layout: LayoutRectangle) => void;
+  tabLayouts: Map<string, LayoutRectangle>;
+  variant: TabsVariant;
+}
+
+const TabsListContext = createContext<TabsListContextValue | null>(null);
+
+// TabsList
+export interface TabsListProps {
+  children: React.ReactNode;
+  /** Visual variant: "pill" (segmented control) or "underline" (bottom border) */
+  variant?: TabsVariant;
+  style?: ViewStyle;
+}
+
+export function TabsList({ children, variant = 'pill', style }: TabsListProps) {
+  const { colors, radius } = useTheme();
+  const { value } = useTabsContext();
+  const tabLayouts = useRef(new Map<string, LayoutRectangle>()).current;
+
+  const indicatorX = useSharedValue(0);
+  const indicatorWidth = useSharedValue(0);
+
+  const registerTab = useCallback(
+    (tabValue: string, layout: LayoutRectangle) => {
+      tabLayouts.set(tabValue, layout);
+
+      // Update indicator if this is the active tab
+      if (tabValue === value) {
+        indicatorX.value = withSpring(layout.x, { damping: 20, stiffness: 200 });
+        indicatorWidth.value = withSpring(layout.width, {
+          damping: 20,
+          stiffness: 200,
+        });
+      }
+    },
+    [value, tabLayouts]
+  );
+
+  // Update indicator when value changes
+  useEffect(() => {
+    const layout = tabLayouts.get(value);
+    if (layout) {
+      indicatorX.value = withSpring(layout.x, { damping: 20, stiffness: 200 });
+      indicatorWidth.value = withSpring(layout.width, {
+        damping: 20,
+        stiffness: 200,
+      });
+    }
+  }, [value, tabLayouts]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: indicatorX.value }],
+    width: indicatorWidth.value,
+  }));
+
+  const isPill = variant === 'pill';
+
+  return (
+    <TabsListContext.Provider value={{ registerTab, tabLayouts, variant }}>
+      <View
+        style={[
+          styles.list,
+          isPill
+            ? {
+                backgroundColor: colors.backgroundMuted,
+                borderRadius: radius.lg,
+                padding: 4,
+              }
+            : {
+                backgroundColor: 'transparent',
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+              },
+          style,
+        ]}
+      >
+        {children}
+        <Animated.View
+          style={[
+            isPill ? styles.indicatorPill : styles.indicatorUnderline,
+            isPill
+              ? {
+                  backgroundColor: colors.background,
+                  borderRadius: radius.md,
+                }
+              : {
+                  backgroundColor: colors.primary,
+                },
+            indicatorStyle,
+          ]}
+        />
+      </View>
+    </TabsListContext.Provider>
+  );
+}
+
+// TabsTrigger
+export interface TabsTriggerProps {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function TabsTrigger({
+  value: tabValue,
+  children,
+  disabled = false,
+  style,
+  textStyle,
+}: TabsTriggerProps) {
+  const { colors, spacing } = useTheme();
+  const { value, onValueChange } = useTabsContext();
+  const listContext = useContext(TabsListContext);
+  const isActive = value === tabValue;
+  const variant = listContext?.variant ?? 'pill';
+  const isUnderline = variant === 'underline';
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    listContext?.registerTab(tabValue, event.nativeEvent.layout);
+  };
+
+  const handlePress = () => {
+    if (disabled) return;
+    haptic('selection');
+    onValueChange(tabValue);
+  };
+
+  return (
+    <Pressable
+      style={[
+        styles.trigger,
+        {
+          paddingVertical: isUnderline ? spacing[3] : spacing[2],
+          paddingHorizontal: isUnderline ? spacing[4] : spacing[3],
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+      onLayout={handleLayout}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive, disabled }}
+    >
+      <Text
+        style={[
+          styles.triggerText,
+          {
+            color: isActive
+              ? isUnderline
+                ? colors.primary
+                : colors.foreground
+              : colors.foregroundMuted,
+            fontWeight: isActive ? '600' : '500',
+          },
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+// TabsContent
+export interface TabsContentProps {
+  value: string;
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export function TabsContent({ value: tabValue, children, style }: TabsContentProps) {
+  const { value } = useTabsContext();
+  const { spacing } = useTheme();
+
+  if (value !== tabValue) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.content, { marginTop: spacing[4] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  list: {
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  indicatorPill: {
+    position: 'absolute',
+    top: 4,
+    bottom: 4,
+    left: 0,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  indicatorUnderline: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: 2,
+  },
+  trigger: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  triggerText: {
+    fontSize: 14,
+  },
+  content: {},
+});

package/registry/ui/textarea.tsx

@@ -0,0 +1,265 @@
+/**
+ * Textarea
+ *
+ * A multiline text input component with auto-grow support.
+ * Extends Input with multiline-specific features.
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="Bio" placeholder="Tell us about yourself" />
+ * <Textarea label="Description" rows={5} maxLength={500} showCount />
+ * <Textarea autoGrow minRows={2} maxRows={6} />
+ * ```
+ */
+
+import React, { forwardRef, useCallback, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  TextInputProps,
+  NativeSyntheticEvent,
+  TextInputContentSizeChangeEventData,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const TIMING_CONFIG = { duration: 200, easing: Easing.out(Easing.quad) };
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export interface TextareaProps extends Omit<TextInputProps, 'style' | 'multiline'> {
+  /** Label text above input */
+  label?: string;
+  /** Error message below input */
+  error?: string;
+  /** Helper text below input (hidden when error is present) */
+  helperText?: string;
+  /** Number of visible rows (default: 4) */
+  rows?: number;
+  /** Auto-grow based on content */
+  autoGrow?: boolean;
+  /** Minimum rows when autoGrow is true */
+  minRows?: number;
+  /** Maximum rows when autoGrow is true */
+  maxRows?: number;
+  /** Show character count */
+  showCount?: boolean;
+  /** Container style */
+  containerStyle?: ViewStyle;
+  /** Input field style */
+  style?: TextStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+const LINE_HEIGHT = 20;
+const PADDING_VERTICAL = 12;
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      rows = 4,
+      autoGrow = false,
+      minRows = 2,
+      maxRows = 8,
+      showCount = false,
+      maxLength,
+      containerStyle,
+      style,
+      labelStyle,
+      editable = true,
+      onFocus,
+      onBlur,
+      onChangeText,
+      value,
+      ...props
+    },
+    ref
+  ) => {
+    const { colors, radius, spacing } = useTheme();
+    const focusProgress = useSharedValue(0);
+    const [textLength, setTextLength] = useState(value?.length ?? 0);
+    const [height, setHeight] = useState(rows * LINE_HEIGHT + PADDING_VERTICAL * 2);
+
+    const hasError = !!error;
+    const isDisabled = editable === false;
+
+    const handleFocus = useCallback(
+      (e: any) => {
+        focusProgress.value = withTiming(1, TIMING_CONFIG);
+        haptic('selection');
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+
+    const handleBlur = useCallback(
+      (e: any) => {
+        focusProgress.value = withTiming(0, TIMING_CONFIG);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        setTextLength(text.length);
+        onChangeText?.(text);
+      },
+      [onChangeText]
+    );
+
+    const handleContentSizeChange = useCallback(
+      (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+        if (!autoGrow) return;
+
+        const contentHeight = e.nativeEvent.contentSize.height;
+        const minHeight = minRows * LINE_HEIGHT + PADDING_VERTICAL * 2;
+        const maxHeight = maxRows * LINE_HEIGHT + PADDING_VERTICAL * 2;
+
+        const newHeight = Math.min(Math.max(contentHeight, minHeight), maxHeight);
+        setHeight(newHeight);
+      },
+      [autoGrow, minRows, maxRows]
+    );
+
+    const animatedBorderStyle = useAnimatedStyle(() => {
+      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 : 1,
+      };
+    }, [hasError, colors]);
+
+    const baseHeight = autoGrow ? height : rows * LINE_HEIGHT + PADDING_VERTICAL * 2;
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {label && (
+          <Text
+            style={[
+              styles.label,
+              {
+                fontSize: 14,
+                marginBottom: spacing[1.5],
+                color: hasError ? colors.destructive : colors.foreground,
+              },
+              labelStyle,
+            ]}
+          >
+            {label}
+          </Text>
+        )}
+
+        <AnimatedTextInput
+          ref={ref}
+          style={[
+            styles.input,
+            {
+              height: baseHeight,
+              paddingHorizontal: 12,
+              paddingVertical: PADDING_VERTICAL,
+              borderRadius: radius.md,
+              fontSize: 14,
+              lineHeight: LINE_HEIGHT,
+              backgroundColor: isDisabled ? colors.backgroundMuted : colors.background,
+              color: isDisabled ? colors.foregroundMuted : colors.foreground,
+              textAlignVertical: 'top',
+            },
+            animatedBorderStyle,
+            style,
+          ]}
+          multiline
+          placeholderTextColor={colors.foregroundMuted}
+          editable={editable}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
+          onContentSizeChange={handleContentSizeChange}
+          maxLength={maxLength}
+          value={value}
+          accessibilityLabel={label}
+          accessibilityState={{ disabled: isDisabled }}
+          {...props}
+        />
+
+        <View style={styles.footer}>
+          {(error || helperText) && (
+            <Text
+              style={[
+                styles.helperText,
+                {
+                  fontSize: 12,
+                  marginTop: spacing[1],
+                  color: hasError ? colors.destructive : colors.foregroundMuted,
+                },
+              ]}
+            >
+              {error || helperText}
+            </Text>
+          )}
+          {showCount && maxLength && (
+            <Text
+              style={[
+                styles.count,
+                {
+                  fontSize: 12,
+                  marginTop: spacing[1],
+                  color: textLength >= maxLength ? colors.destructive : colors.foregroundMuted,
+                },
+              ]}
+            >
+              {textLength}/{maxLength}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  input: {},
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  helperText: {
+    flex: 1,
+  },
+  count: {
+    marginLeft: 8,
+  },
+});