@metacells/mcellui-mcp-server 0.1.1 → 0.1.3

package/registry/ui/chip.tsx

@@ -0,0 +1,271 @@
+/**
+ * Chip
+ *
+ * Selectable filter pills for filtering content or making selections.
+ * Supports single and multi-select modes with optional icons.
+ *
+ * @example
+ * ```tsx
+ * // Single chip
+ * <Chip selected={isSelected} onPress={() => setSelected(!isSelected)}>
+ *   Electronics
+ * </Chip>
+ *
+ * // With icon
+ * <Chip icon={<TagIcon />} selected>
+ *   Sale
+ * </Chip>
+ *
+ * // Chip group
+ * <ChipGroup>
+ *   {categories.map(cat => (
+ *     <Chip
+ *       key={cat.id}
+ *       selected={selectedIds.includes(cat.id)}
+ *       onPress={() => toggleSelection(cat.id)}
+ *     >
+ *       {cat.name}
+ *     </Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolateColor,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type ChipVariant = 'outline' | 'filled';
+export type ChipSize = 'sm' | 'md' | 'lg';
+
+export interface ChipProps {
+  /** Chip label */
+  children: string;
+  /** Whether chip is selected */
+  selected?: boolean;
+  /** Visual variant */
+  variant?: ChipVariant;
+  /** Size preset */
+  size?: ChipSize;
+  /** Icon element (left side) */
+  icon?: React.ReactNode;
+  /** Whether chip is disabled */
+  disabled?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Container style */
+  style?: ViewStyle;
+  /** Label style */
+  labelStyle?: TextStyle;
+}
+
+export interface ChipGroupProps {
+  /** Chip elements */
+  children: React.ReactNode;
+  /** Gap between chips */
+  spacing?: number;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size configs
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG = {
+  sm: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    fontSize: 12,
+    iconSize: 14,
+    radiusKey: 'md' as const,
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    fontSize: 14,
+    iconSize: 16,
+    radiusKey: 'lg' as const,
+  },
+  lg: {
+    paddingHorizontal: 18,
+    paddingVertical: 8,
+    fontSize: 16,
+    iconSize: 18,
+    radiusKey: 'xl' as const,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Chip Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function Chip({
+  children,
+  selected = false,
+  variant = 'outline',
+  size = 'md',
+  icon,
+  disabled = false,
+  onPress,
+  style,
+  labelStyle,
+}: ChipProps) {
+  const { colors, fontWeight, radius } = useTheme();
+  const config = SIZE_CONFIG[size];
+
+  const scale = useSharedValue(1);
+  const selectedAnim = useSharedValue(selected ? 1 : 0);
+
+  React.useEffect(() => {
+    selectedAnim.value = withSpring(selected ? 1 : 0, {
+      damping: 20,
+      stiffness: 300,
+    });
+  }, [selected, selectedAnim]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const backgroundColor =
+      variant === 'filled'
+        ? interpolateColor(
+            selectedAnim.value,
+            [0, 1],
+            [colors.secondary, colors.primary]
+          )
+        : interpolateColor(
+            selectedAnim.value,
+            [0, 1],
+            ['transparent', colors.primary + '15']
+          );
+
+    const borderColor = interpolateColor(
+      selectedAnim.value,
+      [0, 1],
+      [colors.border, colors.primary]
+    );
+
+    return {
+      transform: [{ scale: scale.value }],
+      backgroundColor,
+      borderColor,
+    };
+  });
+
+  const textColor =
+    variant === 'filled'
+      ? selected
+        ? colors.primaryForeground
+        : colors.secondaryForeground
+      : selected
+        ? colors.primary
+        : colors.foreground;
+
+  const handlePressIn = () => {
+    scale.value = withSpring(0.95, { damping: 20, stiffness: 400 });
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1, { damping: 20, stiffness: 400 });
+  };
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled}
+      style={[
+        styles.chip,
+        {
+          paddingHorizontal: config.paddingHorizontal,
+          paddingVertical: config.paddingVertical,
+          borderRadius: radius[config.radiusKey],
+          opacity: disabled ? 0.5 : 1,
+        },
+        animatedStyle,
+        style,
+      ]}
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+    >
+      {icon && (
+        <View style={{ marginRight: 6 }}>
+          {React.isValidElement(icon)
+            ? React.cloneElement(icon as React.ReactElement<{ width?: number; height?: number; color?: string }>, {
+                width: config.iconSize,
+                height: config.iconSize,
+                color: textColor,
+              })
+            : icon}
+        </View>
+      )}
+      <Text
+        style={[
+          styles.label,
+          {
+            fontSize: config.fontSize,
+            fontWeight: fontWeight.medium,
+            color: textColor,
+          },
+          labelStyle,
+        ]}
+      >
+        {children}
+      </Text>
+    </AnimatedPressable>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ChipGroup Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function ChipGroup({ children, spacing, style }: ChipGroupProps) {
+  const { spacing: themeSpacing } = useTheme();
+  const gap = spacing ?? themeSpacing[2];
+
+  return (
+    <View style={[styles.group, { gap }, style]}>
+      {children}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  label: {
+    textAlign: 'center',
+  },
+  group: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});

package/registry/ui/column.tsx

@@ -0,0 +1,133 @@
+/**
+ * Column
+ *
+ * Vertical flex container with gap, alignment, and padding props.
+ * Uses design tokens for consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <Column gap="md" align="center">
+ *   <Text>Top</Text>
+ *   <Text>Bottom</Text>
+ * </Column>
+ *
+ * <Column gap={4} flex={1} justify="between">
+ *   <Header />
+ *   <Content />
+ *   <Footer />
+ * </Column>
+ * ```
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+// Semantic gap values
+type GapSemantic = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// Gap can be either semantic string or numeric spacing key
+export type GapValue = GapSemantic | number;
+
+// Semantic → Spacing Key Mapping
+const semanticGapMap: Record<GapSemantic, number> = {
+  'none': 0,
+  'xs': 2,
+  'sm': 3,
+  'md': 4,
+  'lg': 6,
+  'xl': 8,
+  '2xl': 12,
+};
+
+// Alignment value mappings
+const alignMap = {
+  'start': 'flex-start',
+  'center': 'center',
+  'end': 'flex-end',
+  'stretch': 'stretch',
+} as const;
+
+const justifyMap = {
+  'start': 'flex-start',
+  'center': 'center',
+  'end': 'flex-end',
+  'between': 'space-between',
+  'around': 'space-around',
+  'evenly': 'space-evenly',
+} as const;
+
+export interface ColumnProps extends ViewProps {
+  /** Gap between children (semantic or spacing key) */
+  gap?: GapValue;
+  /** Horizontal alignment of children */
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  /** Vertical distribution of children */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  /** Flex value for the container */
+  flex?: number;
+  /** Padding (all sides) */
+  p?: GapValue;
+  /** Horizontal padding */
+  px?: GapValue;
+  /** Vertical padding */
+  py?: GapValue;
+  /** Additional styles */
+  style?: ViewStyle;
+  /** Children */
+  children?: React.ReactNode;
+}
+
+function resolveGap(
+  value: GapValue | undefined,
+  spacing: ReturnType<typeof useTheme>['spacing']
+): number | undefined {
+  if (value === undefined) return undefined;
+
+  if (typeof value === 'string') {
+    const key = semanticGapMap[value as GapSemantic];
+    return (spacing as Record<number, number>)[key];
+  }
+
+  return (spacing as Record<number, number>)[value];
+}
+
+export const Column = forwardRef<View, ColumnProps>(function Column(
+  {
+    gap,
+    align,
+    justify,
+    flex,
+    p,
+    px,
+    py,
+    style,
+    children,
+    ...props
+  },
+  ref
+) {
+  const { spacing } = useTheme();
+
+  const resolvedGap = resolveGap(gap, spacing);
+  const resolvedP = resolveGap(p, spacing);
+  const resolvedPx = resolveGap(px, spacing);
+  const resolvedPy = resolveGap(py, spacing);
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    ...(resolvedGap !== undefined && { gap: resolvedGap }),
+    ...(align && { alignItems: alignMap[align] }),
+    ...(justify && { justifyContent: justifyMap[justify] }),
+    ...(flex !== undefined && { flex }),
+    ...(resolvedP !== undefined && { padding: resolvedP }),
+    ...(resolvedPx !== undefined && { paddingHorizontal: resolvedPx }),
+    ...(resolvedPy !== undefined && { paddingVertical: resolvedPy }),
+  };
+
+  return (
+    <View ref={ref} style={[containerStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+});