@metacells/mcellui-mcp-server 0.1.1 → 0.1.3

package/registry/ui/segmented-control.tsx

@@ -0,0 +1,229 @@
+/**
+ * Segmented Control
+ *
+ * A native iOS-style segmented control component.
+ * Perfect for switching between views or filtering content.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState('daily');
+ *
+ * <SegmentedControl
+ *   value={selected}
+ *   onValueChange={setSelected}
+ *   segments={[
+ *     { label: 'Daily', value: 'daily' },
+ *     { label: 'Weekly', value: 'weekly' },
+ *     { label: 'Monthly', value: 'monthly' },
+ *   ]}
+ * />
+ * ```
+ */
+
+import React, { 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';
+
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+
+export interface Segment {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps {
+  /** Array of segment options */
+  segments: Segment[];
+  /** Current selected value */
+  value: string;
+  /** Callback when value changes */
+  onValueChange: (value: string) => void;
+  /** Size preset */
+  size?: SegmentedControlSize;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  style?: ViewStyle;
+  /** Segment text style */
+  textStyle?: TextStyle;
+}
+
+const heights: Record<SegmentedControlSize, number> = {
+  sm: 32,
+  md: 40,
+  lg: 48,
+};
+
+const fontSizes: Record<SegmentedControlSize, number> = {
+  sm: 13,
+  md: 14,
+  lg: 15,
+};
+
+const SPRING_CONFIG = { damping: 20, stiffness: 200 };
+
+export function SegmentedControl({
+  segments,
+  value,
+  onValueChange,
+  size = 'md',
+  disabled = false,
+  style,
+  textStyle,
+}: SegmentedControlProps) {
+  const { colors, radius } = useTheme();
+  const segmentLayouts = useRef(new Map<string, LayoutRectangle>()).current;
+
+  const indicatorX = useSharedValue(0);
+  const indicatorWidth = useSharedValue(0);
+
+  const height = heights[size];
+  const fontSize = fontSizes[size];
+  const padding = 4;
+  const segmentHeight = height - padding * 2;
+
+  const handleLayout = (segmentValue: string, event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    segmentLayouts.set(segmentValue, layout);
+
+    // Update indicator if this is the active segment
+    if (segmentValue === value) {
+      indicatorX.value = withSpring(layout.x, SPRING_CONFIG);
+      indicatorWidth.value = withSpring(layout.width, SPRING_CONFIG);
+    }
+  };
+
+  // Update indicator when value changes
+  useEffect(() => {
+    const layout = segmentLayouts.get(value);
+    if (layout) {
+      indicatorX.value = withSpring(layout.x, SPRING_CONFIG);
+      indicatorWidth.value = withSpring(layout.width, SPRING_CONFIG);
+    }
+  }, [value, segmentLayouts]);
+
+  const handlePress = useCallback(
+    (segmentValue: string, segmentDisabled?: boolean) => {
+      if (disabled || segmentDisabled) return;
+      haptic('selection');
+      onValueChange(segmentValue);
+    },
+    [disabled, onValueChange]
+  );
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: indicatorX.value }],
+    width: indicatorWidth.value,
+  }));
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+          backgroundColor: colors.backgroundMuted,
+          borderRadius: radius.lg,
+          padding,
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+    >
+      {/* Indicator */}
+      <Animated.View
+        style={[
+          styles.indicator,
+          {
+            height: segmentHeight,
+            backgroundColor: colors.background,
+            borderRadius: radius.md,
+          },
+          indicatorStyle,
+        ]}
+      />
+
+      {/* Segments */}
+      {segments.map((segment) => {
+        const isActive = value === segment.value;
+        const isSegmentDisabled = disabled || segment.disabled;
+
+        return (
+          <Pressable
+            key={segment.value}
+            style={[
+              styles.segment,
+              {
+                height: segmentHeight,
+                opacity: isSegmentDisabled ? 0.5 : 1,
+              },
+            ]}
+            onLayout={(e) => handleLayout(segment.value, e)}
+            onPress={() => handlePress(segment.value, segment.disabled)}
+            disabled={isSegmentDisabled}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isActive, disabled: isSegmentDisabled }}
+          >
+            <Text
+              style={[
+                styles.segmentText,
+                {
+                  fontSize,
+                  color: isActive ? colors.foreground : colors.foregroundMuted,
+                  fontWeight: isActive ? '600' : '500',
+                },
+                textStyle,
+              ]}
+              numberOfLines={1}
+            >
+              {segment.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  indicator: {
+    position: 'absolute',
+    top: 4,
+    left: 0,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+    paddingHorizontal: 8,
+  },
+  segmentText: {
+    textAlign: 'center',
+  },
+});

package/registry/ui/select.tsx

@@ -0,0 +1,311 @@
+/**
+ * Select
+ *
+ * A selection component using a bottom sheet picker.
+ * Native-feeling select experience for mobile.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('');
+ *
+ * <Select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   value={value}
+ *   onValueChange={setValue}
+ *   options={[
+ *     { label: 'United States', value: 'us' },
+ *     { label: 'Germany', value: 'de' },
+ *     { label: 'Japan', value: 'jp' },
+ *   ]}
+ * />
+ * ```
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ScrollView,
+} 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) };
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from './sheet';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  /** Label text above select */
+  label?: string;
+  /** Placeholder when no value selected */
+  placeholder?: string;
+  /** Current selected value */
+  value?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void;
+  /** Available options */
+  options: SelectOption[];
+  /** Error message */
+  error?: string;
+  /** Helper text */
+  helperText?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Sheet title */
+  sheetTitle?: string;
+  /** Container style */
+  containerStyle?: ViewStyle;
+  /** Trigger style */
+  style?: ViewStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function Select({
+  label,
+  placeholder = 'Select an option',
+  value,
+  onValueChange,
+  options,
+  error,
+  helperText,
+  disabled = false,
+  sheetTitle,
+  containerStyle,
+  style,
+  labelStyle,
+}: SelectProps) {
+  const { colors, radius, spacing } = useTheme();
+  const [open, setOpen] = useState(false);
+  const focusProgress = useSharedValue(0);
+
+  const hasError = !!error;
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return;
+    haptic('light');
+    focusProgress.value = withTiming(1, TIMING_CONFIG);
+    setOpen(true);
+  }, [disabled]);
+
+  const handleClose = useCallback(() => {
+    focusProgress.value = withTiming(0, TIMING_CONFIG);
+    setOpen(false);
+  }, []);
+
+  const handleSelect = useCallback(
+    (optionValue: string) => {
+      haptic('selection');
+      onValueChange?.(optionValue);
+      handleClose();
+    },
+    [onValueChange, handleClose]
+  );
+
+  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]);
+
+  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>
+      )}
+
+      <AnimatedPressable
+        style={[
+          styles.trigger,
+          {
+            minHeight: 48,
+            paddingHorizontal: 12,
+            borderRadius: radius.md,
+            backgroundColor: disabled ? colors.backgroundMuted : colors.background,
+          },
+          animatedBorderStyle,
+          style,
+        ]}
+        onPress={handleOpen}
+        disabled={disabled}
+        accessibilityRole="combobox"
+        accessibilityState={{ disabled, expanded: open }}
+        accessibilityLabel={label}
+      >
+        <Text
+          style={[
+            styles.triggerText,
+            {
+              color: selectedOption
+                ? disabled
+                  ? colors.foregroundMuted
+                  : colors.foreground
+                : colors.foregroundMuted,
+            },
+          ]}
+          numberOfLines={1}
+        >
+          {selectedOption?.label ?? placeholder}
+        </Text>
+        <Text style={[styles.chevron, { color: colors.foregroundMuted }]}>
+          ▼
+        </Text>
+      </AnimatedPressable>
+
+      {(error || helperText) && (
+        <Text
+          style={[
+            styles.helperText,
+            {
+              fontSize: 12,
+              marginTop: spacing[1],
+              color: hasError ? colors.destructive : colors.foregroundMuted,
+            },
+          ]}
+        >
+          {error || helperText}
+        </Text>
+      )}
+
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent height="50%">
+          <SheetHeader>
+            <SheetTitle>{sheetTitle ?? label ?? 'Select'}</SheetTitle>
+          </SheetHeader>
+          <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
+            {options.map((option) => (
+              <Pressable
+                key={option.value}
+                style={({ pressed }) => [
+                  styles.option,
+                  {
+                    backgroundColor:
+                      option.value === value
+                        ? colors.primary + '15'
+                        : pressed
+                          ? colors.backgroundMuted
+                          : 'transparent',
+                    borderRadius: radius.md,
+                    paddingVertical: spacing[3],
+                    paddingHorizontal: spacing[4],
+                    opacity: option.disabled ? 0.5 : 1,
+                  },
+                ]}
+                onPress={() => !option.disabled && handleSelect(option.value)}
+                disabled={option.disabled}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    {
+                      color:
+                        option.value === value
+                          ? colors.primary
+                          : colors.foreground,
+                      fontWeight: option.value === value ? '600' : '400',
+                    },
+                  ]}
+                >
+                  {option.label}
+                </Text>
+                {option.value === value && (
+                  <Text style={[styles.checkmark, { color: colors.primary }]}>
+                    ✓
+                  </Text>
+                )}
+              </Pressable>
+            ))}
+          </ScrollView>
+        </SheetContent>
+      </Sheet>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: 14,
+  },
+  chevron: {
+    fontSize: 10,
+    marginLeft: 8,
+  },
+  helperText: {},
+  optionsList: {
+    flex: 1,
+    marginTop: 8,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  optionText: {
+    fontSize: 16,
+  },
+  checkmark: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/registry/ui/separator.tsx

@@ -0,0 +1,74 @@
+/**
+ * Separator
+ *
+ * A visual divider component for separating content.
+ * Supports horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * <Separator decorative={false} />
+ * <Separator style={{ marginVertical: 16 }} />
+ * ```
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export interface SeparatorProps extends Omit<ViewProps, 'style'> {
+  /** Direction of the separator */
+  orientation?: SeparatorOrientation;
+  /** Whether the separator is purely decorative (affects accessibility) */
+  decorative?: boolean;
+  /** Additional styles */
+  style?: ViewStyle;
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  decorative = true,
+  style,
+  ...props
+}: SeparatorProps) {
+  const { colors } = useTheme();
+
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <View
+      style={[
+        styles.base,
+        isHorizontal ? styles.horizontal : styles.vertical,
+        { backgroundColor: colors.border },
+        style,
+      ]}
+      accessibilityRole={decorative ? 'none' : undefined}
+      accessible={!decorative}
+      accessibilityLabel={decorative ? undefined : 'Separator'}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexShrink: 0,
+  },
+  horizontal: {
+    height: StyleSheet.hairlineWidth,
+    width: '100%',
+  },
+  vertical: {
+    width: StyleSheet.hairlineWidth,
+    alignSelf: 'stretch',
+  },
+});