@native-mate/core 0.1.0

package/src/primitives/Spinner/Spinner.types.ts

@@ -0,0 +1,4 @@
+export interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  color?: string
+}

package/src/primitives/Text/Text.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Text as RNText } from 'react-native'
+import type { TextStyle } from 'react-native'
+import { useTheme } from '../../theme/useTheme'
+import type { TextProps, TextVariant, TextSize, TextWeight } from './Text.types'
+
+const variantMap: Record<TextVariant, { sizeKey: string; weightKey: string }> = {
+  body:    { sizeKey: 'md',  weightKey: 'regular' },
+  label:   { sizeKey: 'sm',  weightKey: 'medium'  },
+  caption: { sizeKey: 'xs',  weightKey: 'regular' },
+  heading: { sizeKey: 'xl',  weightKey: 'bold'    },
+  title:   { sizeKey: '2xl', weightKey: 'bold'    },
+  display: { sizeKey: '3xl', weightKey: 'bold'    },
+}
+
+export const Text: React.FC<TextProps> = ({
+  variant = 'body',
+  size,
+  weight,
+  color,
+  muted = false,
+  style,
+  children,
+  ...rest
+}) => {
+  const theme = useTheme()
+  const { sizeKey, weightKey } = variantMap[variant]
+
+  return (
+    <RNText
+      style={[
+        {
+          color: color ?? (muted ? theme.colors.muted : theme.colors.foreground),
+          fontSize: theme.typography.size[size ?? sizeKey as TextSize],
+          fontWeight: theme.typography.weight[weight ?? weightKey as TextWeight] as TextStyle['fontWeight'],
+          lineHeight: theme.typography.lineHeight.normal,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {children}
+    </RNText>
+  )
+}

package/src/primitives/Text/Text.types.ts

@@ -0,0 +1,15 @@
+import type { TextProps as RNTextProps } from 'react-native'
+
+export type TextVariant = 'body' | 'label' | 'caption' | 'heading' | 'title' | 'display'
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold'
+
+export interface TextProps extends Omit<RNTextProps, 'style'> {
+  variant?: TextVariant
+  size?: TextSize
+  weight?: TextWeight
+  color?: string
+  muted?: boolean
+  children: React.ReactNode
+  style?: RNTextProps['style']
+}

package/src/theme/ThemeContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import type { ResolvedTheme } from '../tokens/types'
+import { resolveTokens, zinc } from '../tokens'
+
+export const defaultTheme: ResolvedTheme = resolveTokens(zinc, 'light')
+export const ThemeContext = createContext<ResolvedTheme>(defaultTheme)

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react'
+import { useColorScheme } from 'react-native'
+import { ThemeContext } from './ThemeContext'
+import { presets, resolveTokens } from '../tokens'
+import type { ThemePreset, NativeMateTokenOverrides } from '../tokens/types'
+
+interface ThemeProviderProps {
+  preset?: ThemePreset
+  forcedColorScheme?: 'light' | 'dark'
+  overrides?: { light?: NativeMateTokenOverrides; dark?: NativeMateTokenOverrides }
+  children: React.ReactNode
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  preset = 'zinc',
+  forcedColorScheme,
+  overrides,
+  children,
+}) => {
+  const systemColorScheme = useColorScheme()
+  const mode = forcedColorScheme ?? systemColorScheme ?? 'light'
+  const theme = useMemo(
+    () => resolveTokens(presets[preset], mode, overrides?.[mode]),
+    [preset, mode, overrides],
+  )
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}

package/src/theme/makeStyles.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { useTheme } from './useTheme'
+import type { ResolvedTheme } from '../tokens/types'
+
+type StyleFactory<T extends StyleSheet.NamedStyles<T>> = (theme: ResolvedTheme) => T
+
+export function makeStyles<T extends StyleSheet.NamedStyles<T>>(
+  factory: StyleFactory<T>,
+): () => T {
+  return function useStyles(): T {
+    const theme = useTheme()
+    return useMemo(() => StyleSheet.create(factory(theme)), [theme])
+  }
+}

package/src/theme/useTheme.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { ThemeContext } from './ThemeContext'
+import type { ResolvedTheme } from '../tokens/types'
+
+export function useTheme(): ResolvedTheme {
+  return useContext(ThemeContext)
+}

package/src/tokens/index.ts

@@ -0,0 +1,29 @@
+import type { TokenSet, ResolvedTheme, NativeMateTokenOverrides } from './types'
+import { zinc } from './presets/zinc'
+import { slate } from './presets/slate'
+import { rose } from './presets/rose'
+import { midnight } from './presets/midnight'
+
+export { zinc, slate, rose, midnight }
+export * from './types'
+
+export const presets = { zinc, slate, rose, midnight } as const
+
+export function resolveTokens(
+  preset: TokenSet,
+  mode: 'light' | 'dark',
+  overrides?: NativeMateTokenOverrides,
+): ResolvedTheme {
+  const resolvedColors = Object.fromEntries(
+    Object.entries(preset.colors).map(([key, token]) => [key, token[mode]])
+  ) as ResolvedTheme['colors']
+
+  const colors = overrides?.colors ? { ...resolvedColors, ...overrides.colors } : resolvedColors
+  const spacing = overrides?.spacing ? { ...preset.spacing, ...overrides.spacing } : preset.spacing
+  const radius = overrides?.radius ? { ...preset.radius, ...overrides.radius } : preset.radius
+  const animation = overrides?.animation?.speed
+    ? { ...preset.animation, speed: { ...preset.animation.speed, ...overrides.animation.speed } }
+    : preset.animation
+
+  return { colors, spacing, radius, typography: preset.typography, animation, colorScheme: mode }
+}

package/src/tokens/presets/midnight.ts

@@ -0,0 +1,24 @@
+import type { TokenSet } from '../types'
+import { zinc } from './zinc'
+
+export const midnight: TokenSet = {
+  ...zinc,
+  colors: {
+    background:    { light: '#f8fafc', dark: '#000000' },
+    surface:       { light: '#f1f5f9', dark: '#111111' },
+    surfaceRaised: { light: '#ffffff', dark: '#1a1a1a' },
+    border:        { light: '#e2e8f0', dark: '#2a2a2a' },
+    primary:       { light: '#6366f1', dark: '#818cf8' },
+    onPrimary:     { light: '#ffffff', dark: '#000000' },
+    foreground:    { light: '#0f172a', dark: '#f8fafc' },
+    onBackground:  { light: '#0f172a', dark: '#f8fafc' },
+    onSurface:     { light: '#1e293b', dark: '#e2e8f0' },
+    muted:         { light: '#64748b', dark: '#6b7280' },
+    destructive:   { light: '#ef4444', dark: '#f87171' },
+    onDestructive: { light: '#ffffff', dark: '#ffffff' },
+    success:       { light: '#22c55e', dark: '#4ade80' },
+    onSuccess:     { light: '#ffffff', dark: '#000000' },
+    warning:       { light: '#f59e0b', dark: '#fbbf24' },
+    onWarning:     { light: '#ffffff', dark: '#000000' },
+  },
+}

package/src/tokens/presets/rose.ts

@@ -0,0 +1,24 @@
+import type { TokenSet } from '../types'
+import { zinc } from './zinc'
+
+export const rose: TokenSet = {
+  ...zinc,
+  colors: {
+    background:    { light: '#ffffff',  dark: '#0c0a0b' },
+    surface:       { light: '#fff1f2',  dark: '#1c1115' },
+    surfaceRaised: { light: '#ffffff',  dark: '#2d1a1f' },
+    border:        { light: '#fecdd3',  dark: '#4c2030' },
+    primary:       { light: '#e11d48',  dark: '#fb7185' },
+    onPrimary:     { light: '#ffffff',  dark: '#1c0a0f' },
+    foreground:    { light: '#0f0a0b',  dark: '#fef2f4' },
+    onBackground:  { light: '#0f0a0b',  dark: '#fef2f4' },
+    onSurface:     { light: '#881337',  dark: '#fecdd3' },
+    muted:         { light: '#9f4258',  dark: '#be738a' },
+    destructive:   { light: '#dc2626',  dark: '#f87171' },
+    onDestructive: { light: '#ffffff',  dark: '#ffffff' },
+    success:       { light: '#22c55e',  dark: '#4ade80' },
+    onSuccess:     { light: '#ffffff',  dark: '#000000' },
+    warning:       { light: '#f59e0b',  dark: '#fbbf24' },
+    onWarning:     { light: '#ffffff',  dark: '#000000' },
+  },
+}

package/src/tokens/presets/slate.ts

@@ -0,0 +1,24 @@
+import type { TokenSet } from '../types'
+import { zinc } from './zinc'
+
+export const slate: TokenSet = {
+  ...zinc,
+  colors: {
+    background:    { light: '#ffffff',  dark: '#0f172a' },
+    surface:       { light: '#f1f5f9',  dark: '#1e293b' },
+    surfaceRaised: { light: '#ffffff',  dark: '#334155' },
+    border:        { light: '#cbd5e1',  dark: '#475569' },
+    primary:       { light: '#0f172a',  dark: '#f8fafc' },
+    onPrimary:     { light: '#f8fafc',  dark: '#0f172a' },
+    foreground:    { light: '#020617',  dark: '#f8fafc' },
+    onBackground:  { light: '#020617',  dark: '#f8fafc' },
+    onSurface:     { light: '#0f172a',  dark: '#e2e8f0' },
+    muted:         { light: '#64748b',  dark: '#94a3b8' },
+    destructive:   { light: '#ef4444',  dark: '#f87171' },
+    onDestructive: { light: '#ffffff',  dark: '#ffffff' },
+    success:       { light: '#22c55e',  dark: '#4ade80' },
+    onSuccess:     { light: '#ffffff',  dark: '#000000' },
+    warning:       { light: '#f59e0b',  dark: '#fbbf24' },
+    onWarning:     { light: '#ffffff',  dark: '#000000' },
+  },
+}

package/src/tokens/presets/zinc.ts

@@ -0,0 +1,37 @@
+import type { TokenSet } from '../types'
+
+export const zinc: TokenSet = {
+  colors: {
+    background:    { light: '#ffffff', dark: '#070709' },
+    surface:       { light: '#e4e4e7', dark: '#0f0f11' },
+    surfaceRaised: { light: '#f4f4f5', dark: '#161619' },
+    border:        { light: '#d4d4d8', dark: '#252529' },
+    primary:       { light: '#18181b', dark: '#fafafa' },
+    onPrimary:     { light: '#fafafa', dark: '#18181b' },
+    foreground:    { light: '#09090b', dark: '#fafafa' },
+    onBackground:  { light: '#09090b', dark: '#fafafa' },
+    onSurface:     { light: '#18181b', dark: '#e4e4e7' },
+    muted:         { light: '#71717a', dark: '#71717a' },
+    destructive:   { light: '#ef4444', dark: '#f87171' },
+    onDestructive: { light: '#ffffff', dark: '#ffffff' },
+    success:       { light: '#22c55e', dark: '#4ade80' },
+    onSuccess:     { light: '#ffffff', dark: '#000000' },
+    warning:       { light: '#f59e0b', dark: '#fbbf24' },
+    onWarning:     { light: '#ffffff', dark: '#000000' },
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, '2xl': 32, '3xl': 48 },
+  radius:  { sm: 6, md: 10, lg: 16, xl: 24, full: 9999 },
+  typography: {
+    size:       { xs: 11, sm: 13, md: 15, lg: 17, xl: 20, '2xl': 24, '3xl': 30 },
+    weight:     { regular: '400', medium: '500', semibold: '600', bold: '700' },
+    lineHeight: { tight: 18, normal: 22, relaxed: 28 },
+  },
+  animation: {
+    speed:  { fast: 150, normal: 250, slow: 400 },
+    easing: {
+      standard:   [0.4, 0.0, 0.2, 1],
+      decelerate: [0.0, 0.0, 0.2, 1],
+      spring:     { damping: 15, stiffness: 200, mass: 1 },
+    },
+  },
+}

package/src/tokens/types.ts

@@ -0,0 +1,72 @@
+export interface ColorToken {
+  light: string
+  dark: string
+}
+
+export interface TokenColors {
+  background: ColorToken
+  surface: ColorToken
+  surfaceRaised: ColorToken
+  border: ColorToken
+  primary: ColorToken
+  onPrimary: ColorToken
+  foreground: ColorToken
+  onBackground: ColorToken
+  onSurface: ColorToken
+  muted: ColorToken
+  destructive: ColorToken
+  onDestructive: ColorToken
+  success: ColorToken
+  onSuccess: ColorToken
+  warning: ColorToken
+  onWarning: ColorToken
+}
+
+export interface TokenSet {
+  colors: TokenColors
+  spacing: { xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; '3xl': number }
+  radius: { sm: number; md: number; lg: number; xl: number; full: number }
+  typography: {
+    size: { xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; '3xl': number }
+    weight: { regular: string; medium: string; semibold: string; bold: string }
+    lineHeight: { tight: number; normal: number; relaxed: number }
+  }
+  animation: {
+    speed: { fast: number; normal: number; slow: number }
+    easing: {
+      standard: readonly [number, number, number, number]
+      decelerate: readonly [number, number, number, number]
+      spring: { damping: number; stiffness: number; mass: number }
+    }
+  }
+}
+
+export type ResolvedColors = { [K in keyof TokenColors]: string }
+
+export interface ResolvedTheme {
+  colors: ResolvedColors
+  spacing: TokenSet['spacing']
+  radius: TokenSet['radius']
+  typography: TokenSet['typography']
+  animation: TokenSet['animation']
+  colorScheme: 'light' | 'dark'
+}
+
+export type ThemePreset = 'zinc' | 'slate' | 'rose' | 'midnight'
+
+export interface NativeMateTokenOverrides {
+  colors?: Partial<ResolvedColors>
+  spacing?: Partial<TokenSet['spacing']>
+  radius?: Partial<TokenSet['radius']>
+  animation?: { speed?: Partial<TokenSet['animation']['speed']> }
+}
+
+export interface NativeMateConfig {
+  theme: ThemePreset
+  componentsDir: string
+  registry: string
+  tokens?: {
+    light?: NativeMateTokenOverrides
+    dark?: NativeMateTokenOverrides
+  }
+}

package/src/utils/platform.ts

@@ -0,0 +1,20 @@
+import { Platform } from 'react-native'
+
+export function shadow(level: 1 | 2 | 3 | 4 = 1) {
+  const config = {
+    1: { opacity: 0.06, radius: 4,  offsetY: 1, elevation: 2 },
+    2: { opacity: 0.10, radius: 8,  offsetY: 2, elevation: 4 },
+    3: { opacity: 0.14, radius: 16, offsetY: 4, elevation: 8 },
+    4: { opacity: 0.18, radius: 24, offsetY: 8, elevation: 12 },
+  }[level]
+
+  if (Platform.OS === 'ios') {
+    return {
+      shadowColor: '#000',
+      shadowOpacity: config.opacity,
+      shadowRadius: config.radius,
+      shadowOffset: { width: 0, height: config.offsetY },
+    }
+  }
+  return { elevation: config.elevation }
+}

package/src/utils/useBreakpoint.ts

@@ -0,0 +1,10 @@
+import { useWindowDimensions } from 'react-native'
+
+export type Breakpoint = 'sm' | 'md' | 'lg'
+
+export function useBreakpoint(): Breakpoint {
+  const { width } = useWindowDimensions()
+  if (width >= 1024) return 'lg'
+  if (width >= 768) return 'md'
+  return 'sm'
+}