rnnovaui 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# rnnovaui
+
+High-performance, reusable UI component library for React Native and Expo.
+
+Built with plain JavaScript and designed for:
+
+- React Native
+- Expo
+- Expo Router
+- Light / Dark / System themes
+- Reanimated-powered components
+- Responsive layouts
+- Performance-focused rendering
+- Android and iOS
+- JavaScript projects
+- TypeScript consumer projects
+
+---
+
+## Installation
+
+```bash
+npm install rnnovaui
+```

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "rnnovaui",
+  "version": "0.1.0",
+  "description": "",
+  "main": "src/index.js",
+  "react-native": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "echo \"Package ready\""
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "react-native-ui",
+    "ui-components",
+    "component-library",
+    "mobile-ui",
+    "dark-mode",
+    "light-mode"
+  ],
+  "author": "",
+  "license": "MIT",
+  "type": "commonjs",
+  "devDependencies": {
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-reanimated": "^4.5.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-native": "^0.86.2"
+  }
+}

package/src/components/Button/UIButton.js

@@ -0,0 +1,418 @@
+import React, { memo, useCallback } from "react";
+
+import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
+
+import { useUITheme } from "../../theme";
+
+import { UIText } from "../Text";
+
+/**
+ * Button variants
+ */
+const VARIANTS = {
+  solid: "solid",
+  outline: "outline",
+  ghost: "ghost",
+  soft: "soft",
+  danger: "danger",
+  success: "success",
+};
+
+/**
+ * Button sizes
+ */
+const SIZES = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+};
+
+const UIButtonComponent = ({
+  title,
+
+  children,
+
+  variant = VARIANTS.solid,
+
+  size = SIZES.md,
+
+  disabled = false,
+
+  loading = false,
+
+  fullWidth = false,
+
+  leftIcon = null,
+
+  rightIcon = null,
+
+  onPress,
+
+  onLongPress,
+
+  onPressIn,
+
+  onPressOut,
+
+  style,
+
+  textStyle,
+
+  contentStyle,
+
+  testID,
+
+  accessibilityLabel,
+
+  accessibilityHint,
+
+  accessibilityRole = "button",
+
+  hitSlop,
+
+  pressRetentionOffset,
+
+  android_ripple = true,
+
+  activeOpacity = 0.9,
+
+  ...props
+}) => {
+  const { theme } = useUITheme();
+
+  /**
+   * Prevent callbacks when button
+   * cannot currently be interacted with.
+   */
+  const isDisabled = disabled || loading;
+
+  /**
+   * Resolve invalid variant safely.
+   */
+  const safeVariant = VARIANTS[variant] ? variant : VARIANTS.solid;
+
+  /**
+   * Resolve invalid size safely.
+   */
+  const safeSize = SIZES[size] ? size : SIZES.md;
+
+  /**
+   * Theme-dependent colors.
+   */
+  const colors = getVariantColors(safeVariant, theme.colors);
+
+  /**
+   * Theme-dependent dimensions.
+   */
+  const dimensions = getSizeDimensions(safeSize, theme);
+
+  /**
+   * Stable press callback.
+   */
+  const handlePress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      if (onPress) {
+        onPress(event);
+      }
+    },
+    [isDisabled, onPress],
+  );
+
+  const handleLongPress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      if (onLongPress) {
+        onLongPress(event);
+      }
+    },
+    [isDisabled, onLongPress],
+  );
+
+  const handlePressIn = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      if (onPressIn) {
+        onPressIn(event);
+      }
+    },
+    [isDisabled, onPressIn],
+  );
+
+  const handlePressOut = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      if (onPressOut) {
+        onPressOut(event);
+      }
+    },
+    [isDisabled, onPressOut],
+  );
+
+  /**
+   * Loading indicator color.
+   */
+  const indicatorColor = colors.text;
+
+  /**
+   * Android ripple.
+   */
+  const ripple = android_ripple
+    ? {
+        color: colors.ripple,
+
+        borderless: false,
+      }
+    : undefined;
+
+  const label = title ?? children;
+
+  return (
+    <Pressable
+      {...props}
+      testID={testID}
+      disabled={isDisabled}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      hitSlop={hitSlop}
+      pressRetentionOffset={pressRetentionOffset}
+      android_ripple={ripple}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={
+        accessibilityLabel ?? (typeof label === "string" ? label : undefined)
+      }
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{
+        disabled: isDisabled,
+        busy: loading,
+      }}
+      style={({ pressed }) => [
+        styles.base,
+
+        {
+          minHeight: dimensions.height,
+
+          paddingHorizontal: dimensions.paddingHorizontal,
+
+          borderRadius: theme.radius.button,
+
+          backgroundColor: colors.background,
+
+          borderColor: colors.border,
+
+          borderWidth: colors.border ? 1 : 0,
+
+          opacity: isDisabled ? 0.55 : pressed ? activeOpacity : 1,
+
+          width: fullWidth ? "100%" : undefined,
+        },
+
+        style,
+      ]}
+    >
+      <View
+        style={[
+          styles.content,
+
+          {
+            minHeight: dimensions.height - 2,
+
+            gap: dimensions.gap,
+          },
+
+          contentStyle,
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={indicatorColor} />
+        ) : (
+          leftIcon
+        )}
+
+        {!loading && label != null && (
+          <UIText
+            variant={dimensions.textVariant}
+            color={colors.text}
+            style={[styles.label, textStyle]}
+            numberOfLines={1}
+          >
+            {label}
+          </UIText>
+        )}
+
+        {!loading && rightIcon && <View>{rightIcon}</View>}
+      </View>
+    </Pressable>
+  );
+};
+
+/**
+ * Variant colors.
+ */
+function getVariantColors(variant, colors) {
+  switch (variant) {
+    case VARIANTS.outline:
+      return {
+        background: colors.transparent,
+
+        border: colors.primary,
+
+        text: colors.primary,
+
+        ripple: colors.primarySoft,
+      };
+
+    case VARIANTS.ghost:
+      return {
+        background: colors.transparent,
+
+        border: null,
+
+        text: colors.primary,
+
+        ripple: colors.primarySoft,
+      };
+
+    case VARIANTS.soft:
+      return {
+        background: colors.primarySoft,
+
+        border: null,
+
+        text: colors.primary,
+
+        ripple: colors.primary,
+      };
+
+    case VARIANTS.danger:
+      return {
+        background: colors.danger,
+
+        border: colors.danger,
+
+        text: colors.onPrimary,
+
+        ripple: colors.dangerSoft,
+      };
+
+    case VARIANTS.success:
+      return {
+        background: colors.success,
+
+        border: colors.success,
+
+        text: colors.onPrimary,
+
+        ripple: colors.successSoft,
+      };
+
+    case VARIANTS.solid:
+    default:
+      return {
+        background: colors.primary,
+
+        border: colors.primary,
+
+        text: colors.onPrimary,
+
+        ripple: colors.primaryPressed,
+      };
+  }
+}
+
+/**
+ * Size dimensions.
+ */
+function getSizeDimensions(size, theme) {
+  switch (size) {
+    case SIZES.sm:
+      return {
+        height: theme.sizes.button.sm,
+
+        paddingHorizontal: theme.spacing.md,
+
+        gap: theme.spacing.xs,
+
+        textVariant: "label",
+      };
+
+    case SIZES.lg:
+      return {
+        height: theme.sizes.button.lg,
+
+        paddingHorizontal: theme.spacing.xl,
+
+        gap: theme.spacing.sm,
+
+        textVariant: "bodyMedium",
+      };
+
+    case SIZES.xl:
+      return {
+        height: theme.sizes.button.xl,
+
+        paddingHorizontal: theme.spacing.xl2,
+
+        gap: theme.spacing.sm,
+
+        textVariant: "bodyMedium",
+      };
+
+    case SIZES.md:
+    default:
+      return {
+        height: theme.sizes.button.md,
+
+        paddingHorizontal: theme.spacing.lg,
+
+        gap: theme.spacing.sm,
+
+        textVariant: "label",
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+
+  content: {
+    width: "100%",
+
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  label: {
+    flexShrink: 1,
+
+    textAlign: "center",
+  },
+});
+
+export const UIButton = memo(UIButtonComponent);
+
+UIButton.displayName = "UIButton";
+
+export { VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };

package/src/components/Button/index.js

@@ -0,0 +1 @@
+export { UIButton, UIButtonVariants, UIButtonSizes } from "./UIButton";

package/src/components/IconButton/UIIconButton.js

@@ -0,0 +1,324 @@
+import React, { memo, useCallback } from "react";
+
+import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
+
+import { useUITheme } from "../../theme";
+
+const SIZES = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+};
+
+const VARIANTS = {
+  solid: "solid",
+  outline: "outline",
+  ghost: "ghost",
+  soft: "soft",
+  danger: "danger",
+  success: "success",
+};
+
+const SHAPES = {
+  circle: "circle",
+  rounded: "rounded",
+  square: "square",
+};
+
+const UIIconButtonComponent = ({
+  icon,
+
+  size = "md",
+
+  variant = "ghost",
+
+  shape = "circle",
+
+  disabled = false,
+
+  loading = false,
+
+  onPress,
+
+  onLongPress,
+
+  onPressIn,
+
+  onPressOut,
+
+  style,
+
+  iconContainerStyle,
+
+  activeOpacity = 0.82,
+
+  android_ripple = true,
+
+  hitSlop = 8,
+
+  accessibilityLabel,
+
+  accessibilityHint,
+
+  testID,
+
+  ...props
+}) => {
+  const { theme } = useUITheme();
+
+  const safeSize = SIZES[size] ? size : SIZES.md;
+
+  const safeVariant = VARIANTS[variant] ? variant : VARIANTS.ghost;
+
+  const safeShape = SHAPES[shape] ? shape : SHAPES.circle;
+
+  const isDisabled = disabled || loading;
+
+  const dimensions = getDimensions(safeSize, theme);
+
+  const colors = getColors(safeVariant, theme.colors);
+
+  const borderRadius = getBorderRadius(safeShape, theme);
+
+  const handlePress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onPress?.(event);
+    },
+    [isDisabled, onPress],
+  );
+
+  const handleLongPress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onLongPress?.(event);
+    },
+    [isDisabled, onLongPress],
+  );
+
+  const handlePressIn = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onPressIn?.(event);
+    },
+    [isDisabled, onPressIn],
+  );
+
+  const handlePressOut = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onPressOut?.(event);
+    },
+    [isDisabled, onPressOut],
+  );
+
+  const ripple = android_ripple
+    ? {
+        color: colors.ripple,
+        borderless: false,
+      }
+    : undefined;
+
+  return (
+    <Pressable
+      {...props}
+      testID={testID}
+      disabled={isDisabled}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      hitSlop={hitSlop}
+      android_ripple={ripple}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{
+        disabled: isDisabled,
+        busy: loading,
+      }}
+      style={({ pressed }) => [
+        styles.button,
+
+        {
+          width: dimensions.size,
+
+          height: dimensions.size,
+
+          borderRadius,
+
+          backgroundColor: colors.background,
+
+          borderColor: colors.border,
+
+          borderWidth: colors.border ? 1 : 0,
+
+          opacity: isDisabled ? 0.5 : pressed ? activeOpacity : 1,
+        },
+
+        style,
+      ]}
+    >
+      <View style={[styles.iconContainer, iconContainerStyle]}>
+        {loading ? (
+          <ActivityIndicator size="small" color={colors.icon} />
+        ) : (
+          icon
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+function getDimensions(size, theme) {
+  switch (size) {
+    case SIZES.xs:
+      return {
+        size: theme.sizes.icon.lg + theme.spacing.sm,
+      };
+
+    case SIZES.sm:
+      return {
+        size: theme.sizes.button.sm,
+      };
+
+    case SIZES.lg:
+      return {
+        size: theme.sizes.button.lg,
+      };
+
+    case SIZES.xl:
+      return {
+        size: theme.sizes.button.xl,
+      };
+
+    case SIZES.md:
+    default:
+      return {
+        size: theme.sizes.button.md,
+      };
+  }
+}
+
+function getBorderRadius(shape, theme) {
+  switch (shape) {
+    case SHAPES.rounded:
+      return theme.radius.lg;
+
+    case SHAPES.square:
+      return theme.radius.sm;
+
+    case SHAPES.circle:
+    default:
+      return theme.radius.circle;
+  }
+}
+
+function getColors(variant, colors) {
+  switch (variant) {
+    case VARIANTS.solid:
+      return {
+        background: colors.primary,
+
+        border: colors.primary,
+
+        icon: colors.onPrimary,
+
+        ripple: colors.primaryPressed,
+      };
+
+    case VARIANTS.outline:
+      return {
+        background: colors.transparent,
+
+        border: colors.borderStrong,
+
+        icon: colors.text,
+
+        ripple: colors.surfaceSecondary,
+      };
+
+    case VARIANTS.soft:
+      return {
+        background: colors.primarySoft,
+
+        border: null,
+
+        icon: colors.primary,
+
+        ripple: colors.primary,
+      };
+
+    case VARIANTS.danger:
+      return {
+        background: colors.danger,
+
+        border: colors.danger,
+
+        icon: colors.onPrimary,
+
+        ripple: colors.dangerSoft,
+      };
+
+    case VARIANTS.success:
+      return {
+        background: colors.success,
+
+        border: colors.success,
+
+        icon: colors.onPrimary,
+
+        ripple: colors.successSoft,
+      };
+
+    case VARIANTS.ghost:
+    default:
+      return {
+        background: colors.transparent,
+
+        border: null,
+
+        icon: colors.text,
+
+        ripple: colors.surfaceSecondary,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+  },
+});
+
+export const UIIconButton = memo(UIIconButtonComponent);
+
+UIIconButton.displayName = "UIIconButton";
+
+export {
+  SIZES as UIIconButtonSizes,
+  VARIANTS as UIIconButtonVariants,
+  SHAPES as UIIconButtonShapes,
+};

package/src/components/IconButton/index.js

@@ -0,0 +1,6 @@
+export {
+  UIIconButton,
+  UIIconButtonSizes,
+  UIIconButtonVariants,
+  UIIconButtonShapes,
+} from "./UIIconButton";

package/src/components/Text/UIText.js

@@ -0,0 +1,60 @@
+import React, { memo } from "react";
+
+import { Text } from "react-native";
+
+import { useUITheme } from "../../theme";
+
+const UITextComponent = ({
+  children,
+
+  variant = "body",
+
+  color,
+
+  fontSize,
+
+  fontWeight,
+
+  lineHeight,
+
+  letterSpacing,
+
+  align,
+
+  style,
+
+  ...props
+}) => {
+  const { theme } = useUITheme();
+
+  const typography = theme.typography[variant] || theme.typography.body;
+
+  return (
+    <Text
+      {...props}
+      style={[
+        {
+          color: color ?? theme.colors.text,
+
+          fontSize: fontSize ?? typography.fontSize,
+
+          lineHeight: lineHeight ?? typography.lineHeight,
+
+          fontWeight: fontWeight ?? typography.fontWeight,
+
+          letterSpacing,
+
+          textAlign: align,
+        },
+
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export const UIText = memo(UITextComponent);
+
+UIText.displayName = "UIText";

package/src/components/Text/index.js

@@ -0,0 +1 @@
+export { UIText } from "./UIText";

package/src/components/index.js

@@ -0,0 +1,8 @@
+export { UIText } from "./Text";
+export { UIButton, UIButtonVariants, UIButtonSizes } from "./Button";
+export {
+  UIIconButton,
+  UIIconButtonSizes,
+  UIIconButtonVariants,
+  UIIconButtonShapes,
+} from "./IconButton";

package/src/index.js

@@ -0,0 +1,27 @@
+export { UIProvider, useUITheme } from "./theme";
+
+export {
+  lightColors,
+  darkColors,
+  spacing,
+  radius,
+  typography,
+  fontSizes,
+  lineHeights,
+  fontWeights,
+  sizes,
+  shadows,
+  animation,
+  breakpoints,
+} from "./theme";
+
+export {
+  UIText,
+  UIButton,
+  UIButtonVariants,
+  UIButtonSizes,
+  UIIconButton,
+  UIIconButtonSizes,
+  UIIconButtonVariants,
+  UIIconButtonShapes,
+} from "./components";

package/src/theme/UIProvider.js

@@ -0,0 +1,86 @@
+import React, { createContext, useContext, useMemo } from "react";
+
+import { useColorScheme } from "react-native";
+
+import { lightColors, darkColors } from "./colors";
+
+import { spacing } from "./spacing";
+
+import { radius } from "./radius";
+
+import { typography } from "./typography";
+
+import { sizes } from "./sizes";
+
+import { shadows } from "./shadows";
+
+import { animation } from "./animation";
+
+import { breakpoints } from "./breakpoints";
+
+const UIContext = createContext(null);
+
+function createTheme(mode, overrides) {
+  const colors = mode === "dark" ? darkColors : lightColors;
+
+  return {
+    mode,
+
+    colors: {
+      ...colors,
+      ...overrides?.colors,
+    },
+
+    spacing,
+    radius,
+    typography,
+    sizes,
+    shadows,
+    animation,
+    breakpoints,
+  };
+}
+
+export function UIProvider({ children, mode = "system", onModeChange, theme }) {
+  const systemScheme = useColorScheme();
+
+  const resolvedMode =
+    mode === "system" ? (systemScheme === "dark" ? "dark" : "light") : mode;
+
+  const setMode = (nextMode) => {
+    if (nextMode !== "light" && nextMode !== "dark" && nextMode !== "system") {
+      return;
+    }
+
+    if (onModeChange) {
+      onModeChange(nextMode);
+    }
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      theme: createTheme(resolvedMode, theme),
+
+      mode: resolvedMode,
+
+      selectedMode: mode,
+
+      setMode,
+    }),
+    [resolvedMode, mode, theme, onModeChange],
+  );
+
+  return (
+    <UIContext.Provider value={contextValue}>{children}</UIContext.Provider>
+  );
+}
+
+export function useUITheme() {
+  const context = useContext(UIContext);
+
+  if (!context) {
+    throw new Error("useUITheme must be used inside UIProvider.");
+  }
+
+  return context;
+}

package/src/theme/animation.js

@@ -0,0 +1,14 @@
+export const animation = {
+  instant: 0,
+
+  fast: 120,
+  normal: 200,
+  medium: 280,
+  slow: 400,
+
+  spring: {
+    damping: 18,
+    stiffness: 180,
+    mass: 0.8,
+  },
+};

package/src/theme/breakpoints.js

@@ -0,0 +1,10 @@
+export const breakpoints = {
+  phoneSmall: 320,
+  phone: 360,
+  phoneLarge: 480,
+
+  tablet: 768,
+  tabletLarge: 1024,
+
+  desktop: 1280,
+};

package/src/theme/colors.js

@@ -0,0 +1,99 @@
+export const lightColors = {
+  transparent: "transparent",
+
+  primary: "#FF5A1F",
+  primaryPressed: "#E94D17",
+  primarySoft: "#FFF0EA",
+  onPrimary: "#FFFFFF",
+
+  secondary: "#7CFF32",
+  secondarySoft: "#F0FFE7",
+  onSecondary: "#111111",
+
+  background: "#FFFFFF",
+  surface: "#F8F8F8",
+  surfaceSecondary: "#F1F1F1",
+  card: "#FFFFFF",
+
+  text: "#111111",
+  textSecondary: "#525252",
+  textMuted: "#737373",
+  textDisabled: "#A3A3A3",
+  textInverse: "#FFFFFF",
+
+  border: "#E5E5E5",
+  borderStrong: "#D4D4D4",
+  divider: "#EEEEEE",
+
+  input: "#F7F7F7",
+  inputFocused: "#FFFFFF",
+  inputDisabled: "#EEEEEE",
+
+  success: "#16A34A",
+  successSoft: "#EAF8EF",
+
+  warning: "#D97706",
+  warningSoft: "#FFF7E6",
+
+  danger: "#DC2626",
+  dangerSoft: "#FDECEC",
+
+  info: "#2563EB",
+  infoSoft: "#EBF2FF",
+
+  overlay: "rgba(0,0,0,0.45)",
+  backdrop: "rgba(0,0,0,0.55)",
+
+  skeleton: "#E5E5E5",
+  skeletonHighlight: "#F5F5F5",
+};
+
+export const darkColors = {
+  transparent: "transparent",
+
+  primary: "#FF7040",
+  primaryPressed: "#FF5A1F",
+  primarySoft: "#3A1C11",
+  onPrimary: "#FFFFFF",
+
+  secondary: "#7CFF32",
+  secondarySoft: "#1B3010",
+  onSecondary: "#111111",
+
+  background: "#0B0B0B",
+  surface: "#151515",
+  surfaceSecondary: "#1D1D1D",
+  card: "#181818",
+
+  text: "#F5F5F5",
+  textSecondary: "#D4D4D4",
+  textMuted: "#A3A3A3",
+  textDisabled: "#666666",
+  textInverse: "#111111",
+
+  border: "#292929",
+  borderStrong: "#3A3A3A",
+  divider: "#252525",
+
+  input: "#1C1C1C",
+  inputFocused: "#202020",
+  inputDisabled: "#242424",
+
+  success: "#4ADE80",
+  successSoft: "#12351F",
+
+  warning: "#FBBF24",
+  warningSoft: "#382B0B",
+
+  danger: "#F87171",
+  dangerSoft: "#3B1616",
+
+  info: "#60A5FA",
+  infoSoft: "#132A46",
+
+  overlay: "rgba(0,0,0,0.60)",
+  backdrop: "rgba(0,0,0,0.72)",
+
+  skeleton: "#292929",
+  skeletonHighlight: "#3A3A3A",
+};

package/src/theme/index.js

@@ -0,0 +1,17 @@
+export { UIProvider, useUITheme } from "./UIProvider";
+
+export { lightColors, darkColors } from "./colors";
+
+export { spacing } from "./spacing";
+
+export { radius } from "./radius";
+
+export { typography, fontSizes, lineHeights, fontWeights } from "./typography";
+
+export { sizes } from "./sizes";
+
+export { shadows } from "./shadows";
+
+export { animation } from "./animation";
+
+export { breakpoints } from "./breakpoints";

package/src/theme/radius.js

@@ -0,0 +1,17 @@
+export const radius = {
+  none: 0,
+
+  xs: 4,
+  sm: 6,
+  md: 10,
+  lg: 14,
+  xl: 18,
+  xxl: 24,
+
+  card: 18,
+  input: 12,
+  button: 12,
+
+  pill: 999,
+  circle: 9999,
+};

package/src/theme/shadows.js

@@ -0,0 +1,41 @@
+import { Platform } from "react-native";
+
+export const shadows = {
+  none: {
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 3,
+    elevation: Platform.OS === "android" ? 2 : 1,
+  },
+
+  md: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: Platform.OS === "android" ? 4 : 2,
+  },
+
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 6,
+    },
+    shadowOpacity: 0.16,
+    shadowRadius: 14,
+    elevation: Platform.OS === "android" ? 8 : 4,
+  },
+};

package/src/theme/sizes.js

@@ -0,0 +1,45 @@
+export const sizes = {
+  icon: {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    xxl: 40,
+    xxxl: 48,
+  },
+
+  button: {
+    sm: 36,
+    md: 44,
+    lg: 52,
+    xl: 60,
+  },
+
+  input: {
+    sm: 40,
+    md: 48,
+    lg: 56,
+  },
+
+  avatar: {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 64,
+    xxl: 80,
+    xxxl: 120,
+  },
+
+  touchTarget: 44,
+
+  header: 56,
+
+  tabBar: 64,
+
+  bottomSheetHandle: {
+    width: 40,
+    height: 4,
+  },
+};

package/src/theme/spacing.js

@@ -0,0 +1,24 @@
+export const spacing = {
+  none: 0,
+
+  xxs: 2,
+  xs: 4,
+
+  sm: 8,
+  sm2: 10,
+
+  md: 12,
+  md2: 14,
+
+  lg: 16,
+  lg2: 20,
+
+  xl: 24,
+  xl2: 28,
+
+  xxl: 32,
+  xxxl: 40,
+
+  huge: 48,
+  massive: 64,
+};

package/src/theme/typography.js

@@ -0,0 +1,107 @@
+export const fontSizes = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+  xxxl: 28,
+  display: 32,
+  displayLarge: 40,
+};
+
+export const lineHeights = {
+  xs: 14,
+  sm: 16,
+  md: 20,
+  base: 24,
+  lg: 26,
+  xl: 28,
+  xxl: 32,
+  xxxl: 36,
+  display: 40,
+  displayLarge: 48,
+};
+
+export const fontWeights = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+};
+
+export const typography = {
+  displayLarge: {
+    fontSize: fontSizes.displayLarge,
+    lineHeight: lineHeights.displayLarge,
+    fontWeight: fontWeights.bold,
+  },
+
+  display: {
+    fontSize: fontSizes.display,
+    lineHeight: lineHeights.display,
+    fontWeight: fontWeights.bold,
+  },
+
+  h1: {
+    fontSize: fontSizes.xxxl,
+    lineHeight: lineHeights.xxxl,
+    fontWeight: fontWeights.bold,
+  },
+
+  h2: {
+    fontSize: fontSizes.xxl,
+    lineHeight: lineHeights.xxl,
+    fontWeight: fontWeights.bold,
+  },
+
+  h3: {
+    fontSize: fontSizes.xl,
+    lineHeight: lineHeights.xl,
+    fontWeight: fontWeights.semibold,
+  },
+
+  h4: {
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    fontWeight: fontWeights.semibold,
+  },
+
+  bodyLarge: {
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    fontWeight: fontWeights.regular,
+  },
+
+  body: {
+    fontSize: fontSizes.base,
+    lineHeight: lineHeights.base,
+    fontWeight: fontWeights.regular,
+  },
+
+  bodyMedium: {
+    fontSize: fontSizes.base,
+    lineHeight: lineHeights.base,
+    fontWeight: fontWeights.medium,
+  },
+
+  label: {
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.md,
+    fontWeight: fontWeights.semibold,
+  },
+
+  caption: {
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.sm,
+    fontWeight: fontWeights.regular,
+  },
+
+  overline: {
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.xs,
+    fontWeight: fontWeights.bold,
+  },
+};