rangaat 0.1.0

package/src/RangaatViewNativeComponent.ts

@@ -0,0 +1,11 @@
+import {
+  codegenNativeComponent,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+interface NativeProps extends ViewProps {
+  color?: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>('RangaatView');

package/src/components/Button/Button.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import { getButtonStyles } from './styles';
+import type { ButtonProps } from './types';
+
+export const Button = React.forwardRef<any, ButtonProps>(
+  (
+    {
+      children,
+      variant = 'filled',
+      size = 'medium',
+      color,
+      fullWidth = false,
+      iconLeft,
+      iconRight,
+      style,
+      textStyle,
+      disabled = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        style={({ pressed }) => {
+          const styles = getButtonStyles(
+            theme,
+            variant,
+            size,
+            pressed,
+            disabled,
+            color
+          );
+          return [
+            styles.container,
+            fullWidth && { width: '100%' },
+            style,
+          ];
+        }}
+        {...rest}
+      >
+        {({ pressed }) => {
+          const styles = getButtonStyles(
+            theme,
+            variant,
+            size,
+            pressed,
+            disabled,
+            color
+          );
+
+          return (
+            <>
+              {iconLeft}
+              {typeof children === 'string' ? (
+                <Text style={[styles.text, textStyle]} numberOfLines={1}>
+                  {children}
+                </Text>
+              ) : (
+                children
+              )}
+              {iconRight}
+            </>
+          );
+        }}
+      </Pressable>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/index.ts

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

package/src/components/Button/styles.ts

@@ -0,0 +1,114 @@
+import { StyleSheet } from 'react-native';
+import type { RangaatTheme } from '../../theme/types';
+import type { ButtonSize, ButtonVariant } from './types';
+
+export const getButtonStyles = (
+  theme: RangaatTheme,
+  variant: ButtonVariant,
+  size: ButtonSize,
+  isPressed: boolean,
+  isDisabled: boolean,
+  customColor?: string
+) => {
+  const { colors, spacing, shapes, typography } = theme;
+
+  // 1. Determine base colors based on variant
+  let backgroundColor = 'transparent';
+  let textColor = colors.primary;
+  let borderColor = 'transparent';
+  let elevation = 0;
+
+  switch (variant) {
+    case 'filled':
+      backgroundColor = customColor || colors.primary;
+      textColor = colors.onPrimary;
+      break;
+    case 'tonal':
+      backgroundColor = colors.secondaryContainer;
+      textColor = colors.onSecondaryContainer;
+      break;
+    case 'elevated':
+      backgroundColor = colors.surface;
+      textColor = colors.primary;
+      elevation = isPressed ? 2 : 4; // Shadow
+      break;
+    case 'outlined':
+      borderColor = colors.outline;
+      textColor = customColor || colors.primary;
+      break;
+    case 'text':
+      textColor = customColor || colors.primary;
+      break;
+  }
+
+  // 2. Handle disabled state (Material Design 3 specs usually apply opacity or specific disabled colors)
+  if (isDisabled) {
+    if (variant === 'filled' || variant === 'tonal' || variant === 'elevated') {
+      backgroundColor = colors.disabled;
+      textColor = colors.onDisabled;
+      elevation = 0;
+    } else if (variant === 'outlined') {
+      borderColor = colors.disabled;
+      textColor = colors.onDisabled;
+    } else {
+      textColor = colors.onDisabled;
+    }
+  }
+
+  // 3. Handle pressed state (visual feedback)
+  let opacity = 1;
+  if (isPressed && !isDisabled) {
+    if (variant === 'filled' || variant === 'tonal' || variant === 'elevated') {
+      opacity = 0.85; // Simple opacity feedback
+    } else {
+      backgroundColor = `${textColor}1A`; // 10% opacity of text color for background
+    }
+  }
+
+  // 4. Determine sizing and typography
+  let paddingVertical = spacing.sm;
+  let paddingHorizontal = spacing.lg;
+  let textVariant = typography.labelLarge;
+
+  if (size === 'small') {
+    paddingVertical = spacing.xs;
+    paddingHorizontal = spacing.md;
+    textVariant = typography.labelMedium;
+  } else if (size === 'large') {
+    paddingVertical = spacing.md;
+    paddingHorizontal = spacing.xl;
+    textVariant = typography.labelLarge; // Could be larger if needed
+  }
+
+  return StyleSheet.create({
+    container: {
+      backgroundColor,
+      borderColor,
+      borderWidth: variant === 'outlined' ? 1 : 0,
+      borderRadius: shapes.pill, // Fully rounded for expressive
+      paddingVertical,
+      paddingHorizontal,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity,
+      elevation,
+      shadowColor: colors.outline,
+      shadowOffset: { width: 0, height: elevation / 2 },
+      shadowOpacity: elevation > 0 ? 0.15 : 0,
+      shadowRadius: elevation,
+      gap: spacing.sm, // Gap between icon and text
+    },
+    text: {
+      color: textColor,
+      fontSize: textVariant.fontSize,
+      fontWeight: textVariant.fontWeight as any,
+      lineHeight: textVariant.lineHeight,
+      letterSpacing: textVariant.letterSpacing,
+      textAlign: 'center',
+    },
+    disabled: {
+      opacity: 0.8, // Overall container opacity adjustment if needed, but handled above
+    },
+  });
+};

package/src/components/Button/types.ts

@@ -0,0 +1,26 @@
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type ButtonVariant = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+  /** The text to display inside the button */
+  children: ReactNode;
+  /** The visual variant of the button */
+  variant?: ButtonVariant;
+  /** The size of the button */
+  size?: ButtonSize;
+  /** Custom color override for the button (background for filled, text/border for outlined) */
+  color?: string;
+  /** Whether the button should take the full width of its container */
+  fullWidth?: boolean;
+  /** Icon to display before the text */
+  iconLeft?: ReactNode;
+  /** Icon to display after the text */
+  iconRight?: ReactNode;
+  /** Custom styles for the button container */
+  style?: StyleProp<ViewStyle>;
+  /** Custom styles for the button text */
+  textStyle?: StyleProp<TextStyle>;
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,12 @@
+import { useThemeContext } from '../theme/ThemeProvider';
+import type { RangaatTheme } from '../theme/types';
+
+export const useTheme = (): RangaatTheme => {
+  const { theme } = useThemeContext();
+  return theme;
+};
+
+export const useThemeActions = () => {
+  const { setTheme, toggleTheme } = useThemeContext();
+  return { setTheme, toggleTheme };
+};

package/src/index.tsx

@@ -0,0 +1,13 @@
+export { RangaatView } from './RangaatView';
+
+// Theme Architecture
+export { ThemeProvider, useThemeContext } from './theme/ThemeProvider';
+export { lightTheme, darkTheme } from './theme/defaultTheme';
+export type { RangaatTheme, ThemeColors, ThemeTypography, ThemeShapes, ThemeSpacing } from './theme/types';
+
+// Hooks
+export { useTheme, useThemeActions } from './hooks/useTheme';
+
+// Components
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { RangaatTheme } from './types';
+import { lightTheme, darkTheme } from './defaultTheme';
+
+interface ThemeContextValue {
+  theme: RangaatTheme;
+  setTheme: (theme: RangaatTheme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  initialTheme?: RangaatTheme;
+  useSystemTheme?: boolean; // In a full implementation, you'd listen to Appearance.getColorScheme()
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialTheme = lightTheme,
+}) => {
+  const [theme, setTheme] = useState<RangaatTheme>(initialTheme);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme.isDark ? lightTheme : darkTheme));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,79 @@
+import type { RangaatTheme } from './types';
+
+export const lightTheme: RangaatTheme = {
+  isDark: false,
+  colors: {
+    primary: '#6750A4',
+    onPrimary: '#FFFFFF',
+    primaryContainer: '#EADDFF',
+    onPrimaryContainer: '#21005D',
+    secondary: '#625B71',
+    onSecondary: '#FFFFFF',
+    secondaryContainer: '#E8DEF8',
+    onSecondaryContainer: '#1D192B',
+    background: '#FFFBFE',
+    onBackground: '#1C1B1F',
+    surface: '#FFFBFE',
+    onSurface: '#1C1B1F',
+    surfaceVariant: '#E7E0EC',
+    onSurfaceVariant: '#49454F',
+    outline: '#79747E',
+    error: '#B3261E',
+    onError: '#FFFFFF',
+    disabled: '#1C1B1F60',
+    onDisabled: '#1C1B1F30',
+  },
+  typography: {
+    h1: { fontSize: 57, fontWeight: '400', lineHeight: 64 },
+    h2: { fontSize: 45, fontWeight: '400', lineHeight: 52 },
+    h3: { fontSize: 36, fontWeight: '400', lineHeight: 44 },
+    bodyLarge: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+    bodyMedium: { fontSize: 14, fontWeight: '400', lineHeight: 20 },
+    bodySmall: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
+    labelLarge: { fontSize: 14, fontWeight: '500', lineHeight: 20, letterSpacing: 0.1 },
+    labelMedium: { fontSize: 12, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5 },
+    labelSmall: { fontSize: 11, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5 },
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 40,
+  },
+  shapes: {
+    extraSmall: 4,
+    small: 8,
+    medium: 12,
+    large: 16,
+    extraLarge: 28,
+    pill: 9999,
+  },
+};
+
+export const darkTheme: RangaatTheme = {
+  ...lightTheme,
+  isDark: true,
+  colors: {
+    primary: '#D0BCFF',
+    onPrimary: '#381E72',
+    primaryContainer: '#4F378B',
+    onPrimaryContainer: '#EADDFF',
+    secondary: '#CCC2DC',
+    onSecondary: '#332D41',
+    secondaryContainer: '#4A4458',
+    onSecondaryContainer: '#E8DEF8',
+    background: '#1C1B1F',
+    onBackground: '#E6E1E5',
+    surface: '#1C1B1F',
+    onSurface: '#E6E1E5',
+    surfaceVariant: '#49454F',
+    onSurfaceVariant: '#CAC4D0',
+    outline: '#938F99',
+    error: '#F2B8B5',
+    onError: '#601410',
+    disabled: '#E6E1E560',
+    onDisabled: '#E6E1E530',
+  },
+};

package/src/theme/types.ts

@@ -0,0 +1,59 @@
+export interface ThemeColors {
+  primary: string;
+  onPrimary: string;
+  primaryContainer: string;
+  onPrimaryContainer: string;
+  secondary: string;
+  onSecondary: string;
+  secondaryContainer: string;
+  onSecondaryContainer: string;
+  background: string;
+  onBackground: string;
+  surface: string;
+  onSurface: string;
+  surfaceVariant: string;
+  onSurfaceVariant: string;
+  outline: string;
+  error: string;
+  onError: string;
+  disabled: string;
+  onDisabled: string;
+}
+
+export interface ThemeTypography {
+  h1: { fontSize: number; fontWeight: string; lineHeight: number };
+  h2: { fontSize: number; fontWeight: string; lineHeight: number };
+  h3: { fontSize: number; fontWeight: string; lineHeight: number };
+  bodyLarge: { fontSize: number; fontWeight: string; lineHeight: number };
+  bodyMedium: { fontSize: number; fontWeight: string; lineHeight: number };
+  bodySmall: { fontSize: number; fontWeight: string; lineHeight: number };
+  labelLarge: { fontSize: number; fontWeight: string; lineHeight: number; letterSpacing: number };
+  labelMedium: { fontSize: number; fontWeight: string; lineHeight: number; letterSpacing: number };
+  labelSmall: { fontSize: number; fontWeight: string; lineHeight: number; letterSpacing: number };
+}
+
+export interface ThemeSpacing {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+}
+
+export interface ThemeShapes {
+  extraSmall: number;
+  small: number;
+  medium: number;
+  large: number;
+  extraLarge: number;
+  pill: number;
+}
+
+export interface RangaatTheme {
+  colors: ThemeColors;
+  typography: ThemeTypography;
+  spacing: ThemeSpacing;
+  shapes: ThemeShapes;
+  isDark: boolean;
+}