@astacinco/rn-primitives 0.1.0 → 0.2.0

package/src/Input/Input.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, TextInput, Text, StyleSheet, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+import { View, TextInput, StyleSheet, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
 import type { InputProps } from './types';
 
 export function Input({
@@ -36,14 +37,9 @@ export function Input({
     <View style={styles.container}>
       {label && (
         <Text
-          style={[
-            styles.label,
-            {
-              color: colors.textSecondary,
-              fontSize: typography.fontSize.sm,
-              marginBottom: spacing.xs,
-            },
-          ]}
+          variant="label"
+          color={colors.textSecondary}
+          style={{ marginBottom: spacing.xs }}
         >
           {label}
         </Text>
@@ -70,14 +66,9 @@ export function Input({
       />
       {error && (
         <Text
-          style={[
-            styles.error,
-            {
-              color: colors.error,
-              fontSize: typography.fontSize.sm,
-              marginTop: spacing.xs,
-            },
-          ]}
+          variant="caption"
+          color={colors.error}
+          style={{ marginTop: spacing.xs }}
         >
           {error}
         </Text>
@@ -90,14 +81,8 @@ const styles = StyleSheet.create({
   container: {
     width: '100%',
   },
-  label: {
-    fontWeight: '500',
-  },
   input: {
     borderWidth: 1,
     borderRadius: 8,
   },
-  error: {
-    // Error text styles
-  },
 });

package/src/MarkdownViewer/MarkdownViewer.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { MarkdownViewerProps } from './types';
+
+// Conditionally import markdown display
+let Markdown: React.ComponentType<any> | null = null;
+try {
+  Markdown = require('react-native-markdown-display').default;
+} catch {
+  // react-native-markdown-display not installed
+}
+
+export function MarkdownViewer({
+  content,
+  style,
+  testID,
+}: MarkdownViewerProps) {
+  const { colors, typography } = useTheme();
+
+  // Theme-aware markdown styles
+  const markdownStyles = {
+    body: {
+      color: colors.text,
+      fontSize: typography.fontSize.md,
+      lineHeight: typography.fontSize.md * 1.6,
+    },
+    heading1: {
+      color: colors.text,
+      fontSize: typography.fontSize.xxl,
+      fontWeight: 'bold' as const,
+      marginTop: 16,
+      marginBottom: 8,
+    },
+    heading2: {
+      color: colors.text,
+      fontSize: typography.fontSize.xl,
+      fontWeight: 'bold' as const,
+      marginTop: 14,
+      marginBottom: 6,
+    },
+    heading3: {
+      color: colors.text,
+      fontSize: typography.fontSize.lg,
+      fontWeight: '600' as const,
+      marginTop: 12,
+      marginBottom: 4,
+    },
+    heading4: {
+      color: colors.text,
+      fontSize: typography.fontSize.md,
+      fontWeight: '600' as const,
+      marginTop: 10,
+      marginBottom: 4,
+    },
+    paragraph: {
+      marginTop: 0,
+      marginBottom: 12,
+    },
+    link: {
+      color: colors.primary,
+    },
+    blockquote: {
+      backgroundColor: colors.surface,
+      borderLeftColor: colors.primary,
+      borderLeftWidth: 4,
+      paddingLeft: 12,
+      paddingVertical: 8,
+      marginVertical: 8,
+    },
+    code_inline: {
+      backgroundColor: colors.surface,
+      color: colors.secondary,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 4,
+      fontSize: typography.fontSize.sm,
+      fontFamily: 'monospace',
+    },
+    code_block: {
+      backgroundColor: colors.surface,
+      padding: 12,
+      borderRadius: 8,
+      marginVertical: 8,
+    },
+    fence: {
+      backgroundColor: colors.surface,
+      padding: 12,
+      borderRadius: 8,
+      marginVertical: 8,
+      fontFamily: 'monospace',
+      fontSize: typography.fontSize.sm,
+      color: colors.text,
+    },
+    list_item: {
+      marginVertical: 4,
+    },
+    bullet_list: {
+      marginVertical: 8,
+    },
+    ordered_list: {
+      marginVertical: 8,
+    },
+    table: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      marginVertical: 8,
+    },
+    thead: {
+      backgroundColor: colors.surface,
+    },
+    th: {
+      padding: 8,
+      borderBottomWidth: 1,
+      borderColor: colors.border,
+      fontWeight: '600' as const,
+    },
+    td: {
+      padding: 8,
+      borderBottomWidth: 1,
+      borderColor: colors.border,
+    },
+    hr: {
+      backgroundColor: colors.border,
+      height: 1,
+      marginVertical: 16,
+    },
+    strong: {
+      fontWeight: 'bold' as const,
+    },
+    em: {
+      fontStyle: 'italic' as const,
+    },
+  };
+
+  // Fallback if markdown library not installed
+  if (!Markdown) {
+    return (
+      <View testID={testID} style={[styles.container, style]}>
+        <View style={[styles.fallback, { backgroundColor: colors.surface }]}>
+          {/* Simple text display without markdown parsing */}
+          <View>
+            {content.split('\n').map((line, i) => (
+              <View key={i} style={{ marginVertical: 2 }}>
+                <View>
+                  {/* Using native Text here as fallback */}
+                  {React.createElement(
+                    require('react-native').Text,
+                    {
+                      style: {
+                        color: colors.text,
+                        fontSize: typography.fontSize.sm,
+                        fontFamily: 'monospace',
+                      },
+                    },
+                    line
+                  )}
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      <Markdown style={markdownStyles}>
+        {content}
+      </Markdown>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  fallback: {
+    padding: 12,
+    borderRadius: 8,
+  },
+});

package/src/MarkdownViewer/index.ts

@@ -0,0 +1,2 @@
+export { MarkdownViewer } from './MarkdownViewer';
+export type { MarkdownViewerProps } from './types';

package/src/MarkdownViewer/types.ts

@@ -0,0 +1,18 @@
+import type { ViewStyle, StyleProp } from 'react-native';
+
+export interface MarkdownViewerProps {
+  /**
+   * Markdown content to render
+   */
+  content: string;
+
+  /**
+   * Custom container style
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Modal/Modal.tsx

@@ -0,0 +1,136 @@
+/**
+ * Modal Component
+ *
+ * Theme-aware modal dialog for confirmations and alerts.
+ */
+
+import React from 'react';
+import {
+  Modal as RNModal,
+  StyleSheet,
+  Pressable,
+  Dimensions,
+} from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { VStack, HStack } from '../Stack';
+import type { ModalProps } from './types';
+
+export function Modal({
+  visible,
+  onDismiss,
+  title,
+  message,
+  actions,
+  showCloseButton = true,
+  closeOnBackdropPress = true,
+  children,
+  testID,
+}: ModalProps) {
+  const { colors } = useTheme();
+
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      onDismiss();
+    }
+  };
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onDismiss}
+      testID={testID}
+    >
+      <Pressable
+        style={styles.backdrop}
+        onPress={handleBackdropPress}
+      >
+        <Pressable
+          style={[
+            styles.container,
+            {
+              backgroundColor: colors.surface,
+              borderColor: colors.border,
+            },
+          ]}
+          onPress={(e) => e.stopPropagation()}
+        >
+          <VStack spacing="md">
+            {/* Header */}
+            <HStack justify="space-between" align="center">
+              <Text variant="subtitle">{title}</Text>
+              {showCloseButton && (
+                <Pressable
+                  onPress={onDismiss}
+                  style={[styles.closeButton, { backgroundColor: colors.surfaceElevated }]}
+                  hitSlop={8}
+                >
+                  <Text variant="body" color={colors.textSecondary}>✕</Text>
+                </Pressable>
+              )}
+            </HStack>
+
+            {/* Content */}
+            {message && (
+              <Text variant="body" color={colors.textSecondary}>
+                {message}
+              </Text>
+            )}
+            {children}
+
+            {/* Actions */}
+            {actions && actions.length > 0 && (
+              <HStack spacing="sm" justify="end" style={styles.actions}>
+                {actions.map((action, index) => (
+                  <Button
+                    key={index}
+                    label={action.label}
+                    variant={action.variant || (index === actions.length - 1 ? 'primary' : 'outline')}
+                    onPress={action.onPress}
+                    size="sm"
+                  />
+                ))}
+              </HStack>
+            )}
+          </VStack>
+        </Pressable>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+const { width } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  container: {
+    width: Math.min(width - 48, 400),
+    borderRadius: 16,
+    padding: 20,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.25,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  closeButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actions: {
+    marginTop: 8,
+  },
+});

package/src/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalAction } from './types';

package/src/Modal/types.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+
+export interface ModalAction {
+  /**
+   * Button label
+   */
+  label: string;
+
+  /**
+   * Press handler
+   */
+  onPress: () => void;
+
+  /**
+   * Button variant
+   * @default 'primary' for last action, 'outline' for others
+   */
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+}
+
+export interface ModalProps {
+  /**
+   * Whether the modal is visible
+   */
+  visible: boolean;
+
+  /**
+   * Callback when modal is dismissed
+   */
+  onDismiss: () => void;
+
+  /**
+   * Modal title
+   */
+  title: string;
+
+  /**
+   * Modal message/content
+   */
+  message?: string;
+
+  /**
+   * Action buttons
+   */
+  actions?: ModalAction[];
+
+  /**
+   * Whether to show close button
+   * @default true
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * Whether to close on backdrop press
+   * @default true
+   */
+  closeOnBackdropPress?: boolean;
+
+  /**
+   * Custom content to render instead of message
+   */
+  children?: ReactNode;
+
+  /**
+   * Test ID
+   */
+  testID?: string;
+}

package/src/ProBadge/ProBadge.tsx

@@ -0,0 +1,59 @@
+/**
+ * ProBadge component
+ *
+ * Gold badge indicating pro-tier content.
+ * Uses themed pro color for consistency across themes.
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import type { ProBadgeProps, ProBadgeSize } from './types';
+
+const sizeConfig: Record<ProBadgeSize, { paddingH: number; paddingV: number; fontSize: number; radius: number }> = {
+  sm: { paddingH: 4, paddingV: 1, fontSize: 9, radius: 3 },
+  md: { paddingH: 6, paddingV: 2, fontSize: 11, radius: 4 },
+  lg: { paddingH: 8, paddingV: 3, fontSize: 13, radius: 5 },
+};
+
+export function ProBadge({ size = 'md' }: ProBadgeProps) {
+  const { colors } = useTheme();
+  const config = sizeConfig[size];
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: colors.pro,
+          paddingHorizontal: config.paddingH,
+          paddingVertical: config.paddingV,
+          borderRadius: config.radius,
+        },
+      ]}
+    >
+      <Text
+        variant="label"
+        style={[
+          styles.text,
+          { fontSize: config.fontSize },
+        ]}
+      >
+        PRO
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#000',
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+});

package/src/ProBadge/index.ts

@@ -0,0 +1,2 @@
+export { ProBadge } from './ProBadge';
+export type { ProBadgeProps, ProBadgeSize } from './types';

package/src/ProBadge/types.ts

@@ -0,0 +1,13 @@
+/**
+ * ProBadge types
+ */
+
+export type ProBadgeSize = 'sm' | 'md' | 'lg';
+
+export interface ProBadgeProps {
+  /**
+   * Size of the badge
+   * @default 'md'
+   */
+  size?: ProBadgeSize;
+}

package/src/ProLockOverlay/ProLockOverlay.tsx

@@ -0,0 +1,106 @@
+/**
+ * ProLockOverlay component
+ *
+ * Displays over locked pro content with blur effect and unlock CTA.
+ * Uses themed colors for consistency.
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import { VStack } from '../Stack';
+import { Button } from '../Button';
+import { ProBadge } from '../ProBadge';
+import type { ProLockOverlayProps } from './types';
+
+export function ProLockOverlay({
+  onUnlockPress,
+  message = 'Unlock with Pro to access this content',
+  buttonLabel = 'Unlock Pro Content',
+}: ProLockOverlayProps) {
+  const { colors } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      {/* Blur/dim overlay */}
+      <View
+        style={[
+          styles.backdrop,
+          { backgroundColor: colors.background },
+        ]}
+      />
+
+      {/* Content */}
+      <View style={styles.content}>
+        <VStack spacing="md" align="center">
+          {/* Lock icon */}
+          <View
+            style={[
+              styles.lockIcon,
+              {
+                borderColor: colors.pro,
+                backgroundColor: colors.proGlow,
+              },
+            ]}
+          >
+            <Text style={styles.lockEmoji}>🔒</Text>
+          </View>
+
+          {/* Pro badge */}
+          <ProBadge size="lg" />
+
+          {/* Message */}
+          <Text
+            variant="body"
+            color={colors.textSecondary}
+            style={styles.message}
+          >
+            {message}
+          </Text>
+
+          {/* Unlock button */}
+          <Button
+            label={buttonLabel}
+            onPress={onUnlockPress}
+            variant="primary"
+            size="md"
+          />
+        </VStack>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0.92,
+  },
+  content: {
+    padding: 24,
+    alignItems: 'center',
+  },
+  lockIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lockEmoji: {
+    fontSize: 24,
+  },
+  message: {
+    textAlign: 'center',
+    maxWidth: 280,
+  },
+});

package/src/ProLockOverlay/index.ts

@@ -0,0 +1,2 @@
+export { ProLockOverlay } from './ProLockOverlay';
+export type { ProLockOverlayProps } from './types';

package/src/ProLockOverlay/types.ts

@@ -0,0 +1,22 @@
+/**
+ * ProLockOverlay types
+ */
+
+export interface ProLockOverlayProps {
+  /**
+   * Callback when unlock button is pressed
+   */
+  onUnlockPress: () => void;
+
+  /**
+   * Custom message to display
+   * @default 'Unlock with Pro to access this content'
+   */
+  message?: string;
+
+  /**
+   * Button label text
+   * @default 'Unlock Pro Content'
+   */
+  buttonLabel?: string;
+}