@robin-ux/native 0.1.0

package/src/components/Input.tsx

@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import { Control, useController } from 'react-hook-form';
+import { TextInput, TextInputProps, View, ViewStyle } from 'react-native';
+import { useThemeSafe } from '../theme';
+import { borderRadius, spacing, useThemedStyles } from '../utils/styles';
+import { Button } from './Button';
+import { Text } from './Text';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** Field label */
+  label?: string;
+  /** Error message to display */
+  error?: string;
+  /** Helper text below input */
+  helperText?: string;
+  /** Custom input style */
+  style?: TextInputProps['style'];
+  /** Container style */
+  containerStyle?: ViewStyle;
+  /** Input ref */
+  ref?: React.RefObject<TextInput | null>;
+  /** Element to render at the end of the input */
+  endElement?: React.ReactNode;
+  /** Child elements */
+  children?: React.ReactNode;
+  /** React Hook Form control object (optional) */
+  control?: Control<any>;
+  /** Field name for React Hook Form (optional) */
+  name?: string;
+}
+
+const inputStyles = {
+  paddingHorizontal: spacing.md,
+  paddingVertical: spacing.md,
+  borderRadius: borderRadius.lg,
+  fontSize: 16,
+};
+
+/**
+ * Base input wrapper providing label, error, and helper text layout.
+ */
+export function BaseInput({
+  label,
+  error,
+  helperText,
+  containerStyle,
+  children,
+}: Pick<InputProps, 'label' | 'error' | 'helperText' | 'containerStyle' | 'children'>) {
+  const styles = useThemedStyles((colors) => ({
+    label: {
+      marginBottom: spacing.xs,
+      color: colors.foregroundSecondary,
+      fontSize: 14,
+    },
+    helperText: {
+      marginTop: spacing.xs,
+    },
+  }));
+
+  return (
+    <View style={containerStyle}>
+      {label && (
+        <Text variant="body" weight="medium" style={styles.label}>
+          {label}
+        </Text>
+      )}
+      {children}
+      {error && (
+        <Text variant="caption" color="error" style={styles.helperText}>
+          {error}
+        </Text>
+      )}
+      {!error && helperText && (
+        <Text variant="caption" color="secondary" style={styles.helperText}>
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+/**
+ * Password input with visibility toggle.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput
+ *   label="Password"
+ *   placeholder="Enter your password"
+ *   value={password}
+ *   onChangeText={setPassword}
+ * />
+ *
+ * // With React Hook Form
+ * <PasswordInput
+ *   label="Password"
+ *   control={control}
+ *   name="password"
+ * />
+ * ```
+ */
+export const PasswordInput: React.FC<InputProps> = ({
+  value,
+  onChangeText,
+  style,
+  onSubmitEditing,
+  ref,
+  error,
+  control,
+  name,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const { colors } = useThemeSafe();
+
+  // Use useController if control and name are provided
+  const controller = control && name ? useController({ control, name }) : null;
+
+  const inputValue = controller ? controller.field.value : value;
+  const inputOnChange = controller ? controller.field.onChange : onChangeText;
+  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
+  const inputRef = controller ? controller.field.ref : ref;
+
+  const hasError = error || controller?.fieldState.error;
+
+  return (
+    <BaseInput
+      label={props.label}
+      error={error || controller?.fieldState.error?.message}
+      helperText={props.helperText}
+      containerStyle={props.containerStyle}
+    >
+      <View
+        style={[
+          {
+            backgroundColor: colors.backgroundSecondary,
+            borderColor: hasError ? colors.error : colors.border,
+            borderWidth: hasError ? 1 : 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderRadius: borderRadius.lg,
+          },
+          style as ViewStyle,
+        ]}
+      >
+        <TextInput
+          placeholderTextColor={colors.foregroundSecondary}
+          ref={inputRef as any}
+          {...props}
+          style={[
+            inputStyles,
+            {
+              flex: 1,
+              color: colors.foreground,
+            },
+          ]}
+          value={inputValue}
+          onChangeText={inputOnChange}
+          autoCapitalize="none"
+          onBlur={inputOnBlur}
+          onSubmitEditing={onSubmitEditing}
+          secureTextEntry={!showPassword}
+        />
+        <Button
+          variant="ghost"
+          icon={showPassword ? 'eye-off' : 'eye'}
+          size="sm"
+          onPress={() => setShowPassword(!showPassword)}
+        />
+      </View>
+    </BaseInput>
+  );
+};
+
+/**
+ * Text input component with label, error, and helper text support.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   value={email}
+ *   onChangeText={setEmail}
+ *   keyboardType="email-address"
+ * />
+ *
+ * // With React Hook Form
+ * <Input
+ *   label="Email"
+ *   control={control}
+ *   name="email"
+ * />
+ * ```
+ */
+export const Input: React.FC<InputProps> = ({
+  value,
+  error,
+  onChangeText,
+  onSubmitEditing,
+  style,
+  ref,
+  control,
+  name,
+  ...props
+}) => {
+  const { colors } = useThemeSafe();
+
+  // Use useController if control and name are provided
+  const controller = control && name ? useController({ control, name }) : null;
+
+  const inputValue = controller ? controller.field.value : value;
+  const inputOnChange = controller ? controller.field.onChange : onChangeText;
+  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
+  const inputRef = controller ? controller.field.ref : ref;
+
+  const hasError = error || controller?.fieldState.error;
+
+  return (
+    <BaseInput
+      label={props.label}
+      error={error || controller?.fieldState.error?.message}
+      helperText={props.helperText}
+      containerStyle={props.containerStyle}
+    >
+      <TextInput
+        placeholderTextColor={colors.foregroundSecondary}
+        ref={inputRef as any}
+        value={inputValue}
+        onChangeText={inputOnChange}
+        onBlur={inputOnBlur}
+        onSubmitEditing={onSubmitEditing}
+        {...props}
+        style={[
+          inputStyles,
+          {
+            backgroundColor: colors.backgroundSecondary,
+            color: colors.foreground,
+            borderColor: hasError ? colors.error : colors.border,
+            borderWidth: hasError ? 1 : 0,
+            borderRadius: borderRadius.lg,
+          },
+          style,
+        ]}
+      />
+    </BaseInput>
+  );
+};

package/src/components/SegmentedControl.tsx

@@ -0,0 +1,107 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Pressable, StyleProp, View, ViewStyle } from "react-native";
+import { useThemeSafe } from "../theme";
+import { borderRadius, spacing, useThemedStyles } from "../utils/styles";
+import { Text } from "./Text";
+
+export interface Segment {
+    /** Unique value for this segment */
+    value: string;
+    /** Display label (optional if using icon only) */
+    label?: string;
+    /** Icon name from Ionicons (optional) */
+    icon?: keyof typeof Ionicons.glyphMap;
+}
+
+export interface SegmentedControlProps {
+    /** Array of segments to display */
+    segments: Segment[];
+    /** Currently selected segment value */
+    value: string;
+    /** Callback when selection changes */
+    onChange: (value: string) => void;
+    /** Control size */
+    size?: "sm" | "md";
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Segmented control component for switching between options.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   segments={[
+ *     { value: 'list', label: 'List', icon: 'list' },
+ *     { value: 'grid', label: 'Grid', icon: 'grid' },
+ *   ]}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ * ```
+ */
+export function SegmentedControl({ segments, value, onChange, size = "sm", style }: SegmentedControlProps) {
+    const { isDark } = useThemeSafe();
+
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            backgroundColor: colors.backgroundSecondary,
+            borderRadius: borderRadius.full,
+            padding: spacing.xs,
+            flexDirection: "row",
+            alignSelf: "flex-start",
+        },
+        segment: {
+            alignItems: "center",
+            justifyContent: "center",
+            paddingVertical: spacing[size],
+            paddingHorizontal: spacing[size],
+            borderRadius: borderRadius.full,
+            flexDirection: "row",
+            gap: spacing[size],
+        },
+        activeSegment: {
+            backgroundColor: isDark ? colors.primaryLight : colors.primaryDark,
+        },
+        segmentText: {
+            color: colors.foregroundSecondary,
+            fontSize: size === "sm" ? 12 : 14,
+            fontWeight: "600",
+        },
+        segmentWithText: {
+            paddingHorizontal: size == "md" ? spacing.xl : spacing.lg,
+        },
+        activeSegmentText: {
+            color: colors.background,
+        },
+        segmentIcon: {
+            color: colors.foregroundSecondary,
+            fontSize: size === "sm" ? 14 : 16,
+        },
+        activeSegmentIcon: {
+            color: colors.background,
+        },
+    }));
+
+    return (
+        <View style={[styles.container, style]}>
+            {segments.map((segment) => {
+                const isActive = segment.value === value;
+                return (
+                    <Pressable
+                        key={segment.value}
+                        style={[styles.segment, isActive && styles.activeSegment, segment.label && styles.segmentWithText]}
+                        onPress={() => onChange(segment.value)}
+                        accessibilityRole="radio"
+                        accessibilityState={{ selected: isActive }}
+                    >
+                        {segment.icon && <Ionicons name={segment.icon} style={[styles.segmentIcon, isActive && styles.activeSegmentIcon]} />}
+                        {segment.label && <Text style={[styles.segmentText, isActive && styles.activeSegmentText]}>{segment.label}</Text>}
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+}

package/src/components/Text.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native';
+import { useThemeSafe } from '../theme';
+import { typography } from '../utils/styles';
+
+export type TextVariant =
+  | 'heading'
+  | 'subheading'
+  | 'title'
+  | 'body'
+  | 'bodyMedium'
+  | 'bodySemibold'
+  | 'caption'
+  | 'label';
+
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+
+export type TextColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'accent'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'white';
+
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+export interface TextProps extends Omit<RNTextProps, 'style'> {
+  /** Typography variant */
+  variant?: TextVariant;
+  /** Font weight override */
+  weight?: TextWeight;
+  /** Text color */
+  color?: TextColor;
+  /** Text alignment */
+  align?: TextAlign;
+  /** Custom style */
+  style?: RNTextProps['style'];
+  /** Text content */
+  children: React.ReactNode;
+}
+
+// Map weights to system font weights
+const fontWeightMap: Record<TextWeight, TextStyle['fontWeight']> = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+};
+
+/**
+ * Text component with semantic variants and theme support.
+ *
+ * @example
+ * ```tsx
+ * <Text variant="heading" color="primary">Hello World</Text>
+ * <Text variant="body" weight="semibold">Bold text</Text>
+ * <Text variant="caption" color="secondary">Small helper text</Text>
+ * ```
+ */
+export function Text({
+  variant = 'body',
+  weight,
+  color = 'primary',
+  align = 'left',
+  style,
+  children,
+  ...props
+}: TextProps) {
+  const { colors } = useThemeSafe();
+
+  // Get base variant style
+  const baseStyle = typography[variant];
+
+  // Determine font weight
+  const fontWeight = weight ? fontWeightMap[weight] : baseStyle.fontWeight;
+
+  // Get text color from theme
+  const textColor: Record<TextColor, string> = {
+    primary: colors.foreground,
+    secondary: colors.foregroundSecondary,
+    tertiary: colors.foregroundTertiary,
+    accent: colors.accent,
+    error: colors.error,
+    success: colors.success,
+    warning: colors.warning,
+    info: colors.info,
+    white: '#ffffff',
+  };
+
+  const computedStyle: TextStyle[] = [
+    baseStyle,
+    { color: textColor[color], textAlign: align },
+    fontWeight ? { fontWeight } : {},
+    style as TextStyle,
+  ].filter(Boolean);
+
+  return (
+    <RNText style={computedStyle} {...props}>
+      {children}
+    </RNText>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,23 @@
+// Button
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+// Text
+export { Text } from './Text';
+export type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';
+
+// Input
+export { Input, PasswordInput, BaseInput } from './Input';
+export type { InputProps } from './Input';
+
+// SegmentedControl
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, Segment } from './SegmentedControl';
+
+// Badge
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeStatus } from './Badge';
+
+// DynamicStatusBar
+export { DynamicStatusBar } from './DynamicStatusBar';
+export type { DynamicStatusBarProps } from './DynamicStatusBar';

package/src/index.ts

@@ -0,0 +1,70 @@
+// ============================================================================
+// @robin-ux/native - Themeable React Native UI Components
+// ============================================================================
+
+// Theme system
+export {
+  ThemeProvider,
+  ThemeContext,
+  useTheme,
+  useThemeSafe,
+  defaultTheme,
+  defaultDarkTheme,
+  defaultLightColors,
+  defaultDarkColors,
+} from './theme';
+
+export type {
+  Theme,
+  ThemeColors,
+  ThemeContextValue,
+  ThemeProviderProps,
+} from './theme';
+
+// Components
+export {
+  Button,
+  Text,
+  Input,
+  PasswordInput,
+  BaseInput,
+  SegmentedControl,
+  Badge,
+  DynamicStatusBar,
+} from './components';
+
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonSize,
+  TextProps,
+  TextVariant,
+  TextWeight,
+  TextColor,
+  TextAlign,
+  InputProps,
+  SegmentedControlProps,
+  Segment,
+  BadgeProps,
+  BadgeStatus,
+  DynamicStatusBarProps,
+} from './components';
+
+// Utilities
+export {
+  spacing,
+  borderRadius,
+  typography,
+  shadows,
+  layouts,
+  useThemedStyles,
+  createThemedStyle,
+} from './utils';
+
+export type {
+  SpacingKey,
+  BorderRadiusKey,
+  TypographyVariant,
+  ShadowKey,
+  LayoutKey,
+} from './utils';

package/src/theme/ThemeContext.ts

@@ -0,0 +1,38 @@
+import { createContext, useContext } from 'react';
+import { defaultTheme } from './defaultTheme';
+import { Theme, ThemeContextValue } from './types';
+
+/**
+ * Theme context for providing theme to components.
+ * Default value is undefined to allow detection of missing provider.
+ */
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+/**
+ * Hook to access the theme context.
+ * Throws an error if used outside of a ThemeProvider.
+ *
+ * @throws Error if no ThemeProvider is found in the component tree
+ */
+export function useTheme(): Theme {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context.theme;
+}
+
+/**
+ * Safe hook to access theme with fallback to default.
+ * Never throws - returns default theme if no provider is found.
+ *
+ * This is the recommended hook for component libraries to ensure
+ * components work even without an explicit ThemeProvider.
+ */
+export function useThemeSafe(): Theme {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    return defaultTheme;
+  }
+  return context.theme;
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { ThemeContext } from './ThemeContext';
+import { defaultTheme } from './defaultTheme';
+import { Theme, ThemeContextValue } from './types';
+
+export interface ThemeProviderProps {
+  /**
+   * The theme to provide to child components.
+   * Falls back to default neutral theme if not provided.
+   */
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+/**
+ * Theme provider component that makes theme available to all child components.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@robin-ux/native';
+ *
+ * const myTheme = {
+ *   colors: { ... },
+ *   isDark: false,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider theme={myTheme}>
+ *       <MyApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+export function ThemeProvider({ theme = defaultTheme, children }: ThemeProviderProps) {
+  const value: ThemeContextValue = useMemo(
+    () => ({
+      theme,
+    }),
+    [theme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}