@astacinco/rn-primitives 0.1.0

package/src/Button/Button.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Pressable, Text, StyleSheet, ActivityIndicator, ViewStyle, StyleProp } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { ButtonProps, ButtonVariant, ButtonSize } from './types';
+
+const sizeStyles: Record<ButtonSize, { paddingVertical: number; paddingHorizontal: number; fontSize: number }> = {
+  sm: { paddingVertical: 8, paddingHorizontal: 12, fontSize: 14 },
+  md: { paddingVertical: 12, paddingHorizontal: 20, fontSize: 16 },
+  lg: { paddingVertical: 16, paddingHorizontal: 28, fontSize: 18 },
+};
+
+export function Button({
+  label,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  onPress,
+  style,
+  testID,
+  ...props
+}: ButtonProps) {
+  const { colors } = useTheme();
+  const sizeStyle = sizeStyles[size];
+
+  const getVariantStyles = (v: ButtonVariant, pressed: boolean) => {
+    const opacity = pressed ? 0.8 : 1;
+
+    switch (v) {
+      case 'primary':
+        return {
+          backgroundColor: colors.primary,
+          borderWidth: 0,
+          textColor: colors.textInverse,
+          opacity,
+        };
+      case 'secondary':
+        return {
+          backgroundColor: colors.secondary,
+          borderWidth: 0,
+          textColor: colors.textInverse,
+          opacity,
+        };
+      case 'outline':
+        return {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: colors.primary,
+          textColor: colors.primary,
+          opacity,
+        };
+      case 'ghost':
+        return {
+          backgroundColor: pressed ? colors.surface : 'transparent',
+          borderWidth: 0,
+          textColor: colors.primary,
+          opacity: 1,
+        };
+    }
+  };
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      testID={testID}
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }): StyleProp<ViewStyle> => {
+        const variantStyle = getVariantStyles(variant, pressed);
+        return [
+          styles.base,
+          {
+            backgroundColor: variantStyle.backgroundColor,
+            borderWidth: variantStyle.borderWidth,
+            borderColor: variantStyle.borderColor,
+            paddingVertical: sizeStyle.paddingVertical,
+            paddingHorizontal: sizeStyle.paddingHorizontal,
+            opacity: isDisabled ? 0.5 : variantStyle.opacity,
+          },
+          style as ViewStyle,
+        ];
+      }}
+      {...props}
+    >
+      {({ pressed }) => {
+        const variantStyle = getVariantStyles(variant, pressed);
+        return loading ? (
+          <ActivityIndicator color={variantStyle.textColor} size="small" />
+        ) : (
+          <Text
+            style={[
+              styles.label,
+              {
+                color: variantStyle.textColor,
+                fontSize: sizeStyle.fontSize,
+              },
+            ]}
+          >
+            {label}
+          </Text>
+        );
+      }}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  label: {
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/src/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/Button/types.ts

@@ -0,0 +1,43 @@
+import type { PressableProps } from 'react-native';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Button label text (required)
+   */
+  label: string;
+
+  /**
+   * Button variant
+   * @default 'primary'
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Button size
+   * @default 'md'
+   */
+  size?: ButtonSize;
+
+  /**
+   * Disable the button
+   */
+  disabled?: boolean;
+
+  /**
+   * Show loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Press handler (required)
+   */
+  onPress: () => void;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Card/Card.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { CardProps } from './types';
+
+export function Card({
+  children,
+  variant = 'filled',
+  padding,
+  style,
+  testID,
+  ...props
+}: CardProps) {
+  const { colors, spacing, shadows } = useTheme();
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'filled':
+        return {
+          backgroundColor: colors.surface,
+          borderWidth: 0,
+        };
+      case 'outlined':
+        return {
+          backgroundColor: colors.background,
+          borderWidth: 1,
+          borderColor: colors.border,
+        };
+      case 'elevated':
+        return {
+          backgroundColor: colors.surfaceElevated,
+          borderWidth: 0,
+          ...shadows.md,
+        };
+    }
+  };
+
+  const variantStyle = getVariantStyles();
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.base,
+        {
+          padding: padding ?? spacing.md,
+          ...variantStyle,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 12,
+  },
+});

package/src/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant } from './types';

package/src/Card/types.ts

@@ -0,0 +1,21 @@
+import type { ViewProps } from 'react-native';
+
+export type CardVariant = 'filled' | 'outlined' | 'elevated';
+
+export interface CardProps extends ViewProps {
+  /**
+   * Card variant
+   * @default 'filled'
+   */
+  variant?: CardVariant;
+
+  /**
+   * Override padding
+   */
+  padding?: number;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Container/Container.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { ContainerProps } from './types';
+
+export function Container({
+  children,
+  padding,
+  maxWidth,
+  centered = false,
+  style,
+  testID,
+  ...props
+}: ContainerProps) {
+  const { colors, spacing } = useTheme();
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.base,
+        {
+          backgroundColor: colors.background,
+          padding: padding ?? spacing.md,
+          maxWidth,
+          alignSelf: centered ? 'center' : undefined,
+          width: centered && maxWidth ? '100%' : undefined,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+  },
+});

package/src/Container/index.ts

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

package/src/Container/types.ts

@@ -0,0 +1,23 @@
+import type { ViewProps } from 'react-native';
+
+export interface ContainerProps extends ViewProps {
+  /**
+   * Override padding
+   */
+  padding?: number;
+
+  /**
+   * Maximum width in pixels
+   */
+  maxWidth?: number;
+
+  /**
+   * Center the container horizontally
+   */
+  centered?: boolean;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Divider/Divider.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { DividerProps, DividerVariant } from './types';
+
+const heightMap: Record<DividerVariant, number> = {
+  thin: 1,
+  thick: 2,
+};
+
+export function Divider({
+  variant = 'thin',
+  color,
+  style,
+  testID,
+  ...props
+}: DividerProps) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.base,
+        {
+          backgroundColor: color ?? colors.border,
+          height: heightMap[variant],
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    width: '100%',
+  },
+});

package/src/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerVariant } from './types';

package/src/Divider/types.ts

@@ -0,0 +1,21 @@
+import type { ViewProps } from 'react-native';
+
+export type DividerVariant = 'thin' | 'thick';
+
+export interface DividerProps extends ViewProps {
+  /**
+   * Divider variant
+   * @default 'thin'
+   */
+  variant?: DividerVariant;
+
+  /**
+   * Override divider color
+   */
+  color?: string;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Input/Input.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { View, TextInput, Text, StyleSheet, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { InputProps } from './types';
+
+export function Input({
+  label,
+  error,
+  disabled = false,
+  style,
+  testID,
+  onFocus,
+  onBlur,
+  ...props
+}: InputProps) {
+  const { colors, spacing, typography } = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const borderColor = error
+    ? colors.error
+    : isFocused
+      ? colors.borderFocus
+      : colors.border;
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text
+          style={[
+            styles.label,
+            {
+              color: colors.textSecondary,
+              fontSize: typography.fontSize.sm,
+              marginBottom: spacing.xs,
+            },
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+      <TextInput
+        testID={testID}
+        editable={!disabled}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholderTextColor={colors.textMuted}
+        style={[
+          styles.input,
+          {
+            backgroundColor: disabled ? colors.surface : colors.background,
+            borderColor,
+            color: colors.text,
+            fontSize: typography.fontSize.md,
+            padding: spacing.sm,
+            opacity: disabled ? 0.6 : 1,
+          },
+          style,
+        ]}
+        {...props}
+      />
+      {error && (
+        <Text
+          style={[
+            styles.error,
+            {
+              color: colors.error,
+              fontSize: typography.fontSize.sm,
+              marginTop: spacing.xs,
+            },
+          ]}
+        >
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  error: {
+    // Error text styles
+  },
+});

package/src/Input/index.ts

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

package/src/Input/types.ts

@@ -0,0 +1,23 @@
+import type { TextInputProps } from 'react-native';
+
+export interface InputProps extends TextInputProps {
+  /**
+   * Input label
+   */
+  label?: string;
+
+  /**
+   * Error message to display
+   */
+  error?: string;
+
+  /**
+   * Disable the input
+   */
+  disabled?: boolean;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Stack/Stack.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, StyleSheet, FlexAlignType } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { StackProps, StackAlign, StackJustify } from './types';
+
+const alignMap: Record<StackAlign, FlexAlignType> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+};
+
+const justifyMap: Record<StackJustify, 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+};
+
+interface InternalStackProps extends StackProps {
+  direction: 'column' | 'row';
+}
+
+function BaseStack({
+  children,
+  direction,
+  spacing = 'none',
+  align = 'stretch',
+  justify = 'start',
+  style,
+  testID,
+  ...props
+}: InternalStackProps) {
+  const { spacing: themeSpacing } = useTheme();
+
+  const gap = spacing === 'none' ? 0 : themeSpacing[spacing];
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.base,
+        {
+          flexDirection: direction,
+          alignItems: alignMap[align],
+          justifyContent: justifyMap[justify],
+          gap,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+/**
+ * Vertical stack - arranges children in a column
+ */
+export function VStack(props: StackProps) {
+  return <BaseStack {...props} direction="column" />;
+}
+
+/**
+ * Horizontal stack - arranges children in a row
+ */
+export function HStack(props: StackProps) {
+  return <BaseStack {...props} direction="row" />;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    // Base stack styles
+  },
+});

package/src/Stack/index.ts

@@ -0,0 +1,2 @@
+export { VStack, HStack } from './Stack';
+export type { StackProps, StackSpacing, StackAlign, StackJustify } from './types';

package/src/Stack/types.ts

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+
+export type StackSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+export type StackJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+
+export interface StackProps extends ViewProps {
+  /**
+   * Gap between items
+   * @default 'none'
+   */
+  spacing?: StackSpacing;
+
+  /**
+   * Align items (cross axis)
+   * @default 'stretch'
+   */
+  align?: StackAlign;
+
+  /**
+   * Justify content (main axis)
+   * @default 'start'
+   */
+  justify?: StackJustify;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Text/Text.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text as RNText, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import type { TextProps, TextVariant } from './types';
+
+const variantStyles: Record<TextVariant, { fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; fontWeight: 'regular' | 'medium' | 'bold' }> = {
+  title: { fontSize: 'xl', fontWeight: 'bold' },
+  subtitle: { fontSize: 'lg', fontWeight: 'medium' },
+  body: { fontSize: 'md', fontWeight: 'regular' },
+  caption: { fontSize: 'sm', fontWeight: 'regular' },
+  label: { fontSize: 'xs', fontWeight: 'medium' },
+};
+
+export function Text({
+  children,
+  variant = 'body',
+  color,
+  style,
+  testID,
+  ...props
+}: TextProps) {
+  const { colors, typography } = useTheme();
+  const variantStyle = variantStyles[variant];
+
+  const textColor = color ?? (variant === 'caption' ? colors.textSecondary : colors.text);
+
+  return (
+    <RNText
+      testID={testID}
+      style={[
+        styles.base,
+        {
+          color: textColor,
+          fontSize: typography.fontSize[variantStyle.fontSize],
+          fontFamily: typography.fontFamily[variantStyle.fontWeight],
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    // Base text styles
+  },
+});

package/src/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps, TextVariant } from './types';