@native-mate/core 0.1.0

package/dist/tokens/presets/zinc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zinc.js","sourceRoot":"","sources":["../../../src/tokens/presets/zinc.ts"],"names":[],"mappings":"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"}

package/dist/tokens/types.d.ts

@@ -0,0 +1,109 @@
+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;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/tokens/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/tokens/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":""}

package/dist/utils/platform.d.ts

@@ -0,0 +1,17 @@
+export declare function shadow(level?: 1 | 2 | 3 | 4): {
+    shadowColor: string;
+    shadowOpacity: number;
+    shadowRadius: number;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    elevation?: undefined;
+} | {
+    elevation: number;
+    shadowColor?: undefined;
+    shadowOpacity?: undefined;
+    shadowRadius?: undefined;
+    shadowOffset?: undefined;
+};
+//# sourceMappingURL=platform.d.ts.map

package/dist/utils/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../src/utils/platform.ts"],"names":[],"mappings":"AAEA,wBAAgB,MAAM,CAAC,KAAK,GAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAK;;;;;;;;;;;;;;;EAiB9C"}

package/dist/utils/platform.js

@@ -0,0 +1,19 @@
+import { Platform } from 'react-native';
+export function shadow(level = 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 };
+}
+//# sourceMappingURL=platform.js.map

package/dist/utils/platform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.js","sourceRoot":"","sources":["../../src/utils/platform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,MAAM,UAAU,MAAM,CAAC,QAAuB,CAAC;IAC7C,MAAM,MAAM,GAAG;QACb,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAG,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAC1D,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAG,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAC1D,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAC1D,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;KAC5D,CAAC,KAAK,CAAC,CAAA;IAER,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO;YACL,WAAW,EAAE,MAAM;YACnB,aAAa,EAAE,MAAM,CAAC,OAAO;YAC7B,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE;SACnD,CAAA;IACH,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,CAAA;AACxC,CAAC"}

package/dist/utils/useBreakpoint.d.ts

@@ -0,0 +1,3 @@
+export type Breakpoint = 'sm' | 'md' | 'lg';
+export declare function useBreakpoint(): Breakpoint;
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/utils/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/useBreakpoint.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,wBAAgB,aAAa,IAAI,UAAU,CAK1C"}

package/dist/utils/useBreakpoint.js

@@ -0,0 +1,10 @@
+import { useWindowDimensions } from 'react-native';
+export function useBreakpoint() {
+    const { width } = useWindowDimensions();
+    if (width >= 1024)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    return 'sm';
+}
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/utils/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/utils/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAIlD,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACvC,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,IAAI,CAAA;IAC9B,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,IAAI,CAAA;IAC7B,OAAO,IAAI,CAAA;AACb,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@native-mate/core",
+  "version": "0.1.0",
+  "description": "Token system, ThemeProvider, and primitive components for native-mate",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "src"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/native-mate/native-mate",
+    "directory": "packages/core"
+  },
+  "keywords": ["react-native", "expo", "ui", "theme", "tokens", "native-mate"],
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "test": "cd ../.. && npx vitest run --config vitest.config.ts packages/core",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-reanimated": "^3.6.0",
+    "typescript": "^5.4.0"
+  }
+}

package/src/__tests__/makeStyles.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { resolveTokens, zinc } from '../tokens'
+import { makeStyles } from '../theme/makeStyles'
+
+// makeStyles is a factory that returns a hook. We can't call hooks outside
+// React, but we CAN verify the factory itself and the styles it produces.
+
+describe('makeStyles', () => {
+  it('returns a function (hook)', () => {
+    const useStyles = makeStyles((theme) => ({
+      container: { backgroundColor: theme.colors.background },
+    }))
+    expect(typeof useStyles).toBe('function')
+  })
+
+  it('factory receives a theme and returns style objects', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    const factory = (t: typeof theme) => ({
+      box: { padding: t.spacing.md, borderRadius: t.radius.md },
+    })
+    const styles = factory(theme)
+    expect(styles.box.padding).toBe(12)
+    expect(styles.box.borderRadius).toBe(10)
+  })
+
+  it('factory can access all token categories', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    const factory = (t: typeof theme) => ({
+      text: {
+        color: t.colors.foreground,
+        fontSize: t.typography.size.md,
+        fontWeight: t.typography.weight.bold,
+        lineHeight: t.typography.lineHeight.normal,
+      },
+      animated: {
+        // animation tokens are accessible
+        opacity: t.animation.speed.fast > 0 ? 1 : 0,
+      },
+    })
+    const styles = factory(theme)
+    expect(styles.text.color).toBe('#fafafa')
+    expect(styles.text.fontSize).toBe(15)
+    expect(styles.text.fontWeight).toBe('700')
+    expect(styles.animated.opacity).toBe(1)
+  })
+
+  it('produces different styles for different presets', () => {
+    const darkTheme = resolveTokens(zinc, 'dark')
+    const lightTheme = resolveTokens(zinc, 'light')
+    const factory = (t: typeof darkTheme) => ({
+      bg: { backgroundColor: t.colors.background },
+    })
+    expect(factory(darkTheme).bg.backgroundColor).toBe('#070709')
+    expect(factory(lightTheme).bg.backgroundColor).toBe('#ffffff')
+  })
+})

package/src/__tests__/perf.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { resolveTokens, zinc, slate, rose, midnight, presets } from '../tokens'
+
+describe('performance', () => {
+  it('resolveTokens runs 10,000 times under 200ms', () => {
+    const start = performance.now()
+    for (let i = 0; i < 10_000; i++) {
+      resolveTokens(zinc, i % 2 === 0 ? 'dark' : 'light')
+    }
+    const elapsed = performance.now() - start
+    expect(elapsed).toBeLessThan(200)
+  })
+
+  it('resolveTokens with overrides runs 10,000 times under 300ms', () => {
+    const overrides = { colors: { primary: '#6366f1' }, spacing: { lg: 20 } }
+    const start = performance.now()
+    for (let i = 0; i < 10_000; i++) {
+      resolveTokens(zinc, 'dark', overrides)
+    }
+    const elapsed = performance.now() - start
+    expect(elapsed).toBeLessThan(300)
+  })
+
+  it('all 4 presets × 2 modes (80,000 calls) under 1s', () => {
+    const allPresets = [zinc, slate, rose, midnight]
+    const start = performance.now()
+    for (let i = 0; i < 10_000; i++) {
+      for (const preset of allPresets) {
+        resolveTokens(preset, 'dark')
+        resolveTokens(preset, 'light')
+      }
+    }
+    const elapsed = performance.now() - start
+    expect(elapsed).toBeLessThan(1000)
+  })
+
+  it('resolved theme object is consistently shaped', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    const colorKeys = Object.keys(theme.colors)
+    // Verify across all presets
+    for (const preset of Object.values(presets)) {
+      const t = resolveTokens(preset, 'dark')
+      expect(Object.keys(t.colors).sort()).toEqual(colorKeys.sort())
+    }
+  })
+})

package/src/__tests__/platform.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { Platform } from 'react-native'
+import { shadow } from '../utils/platform'
+
+describe('shadow()', () => {
+  it('returns elevation on Android', () => {
+    Object.defineProperty(Platform, 'OS', { get: () => 'android', configurable: true })
+    const s = shadow(2)
+    expect(s).toHaveProperty('elevation')
+    expect((s as { elevation: number }).elevation).toBe(4)
+  })
+
+  it('returns shadowColor and shadowOffset on iOS', () => {
+    Object.defineProperty(Platform, 'OS', { get: () => 'ios', configurable: true })
+    const s = shadow(1)
+    expect(s).toHaveProperty('shadowColor')
+    expect(s).toHaveProperty('shadowOffset')
+    expect(s).toHaveProperty('shadowOpacity')
+    expect(s).toHaveProperty('shadowRadius')
+  })
+
+  it('level 1 has lower shadow than level 4', () => {
+    Object.defineProperty(Platform, 'OS', { get: () => 'android', configurable: true })
+    const s1 = shadow(1) as { elevation: number }
+    const s4 = shadow(4) as { elevation: number }
+    expect(s4.elevation).toBeGreaterThan(s1.elevation)
+  })
+
+  it('returns elevation object on non-ios (android fallback)', () => {
+    Object.defineProperty(Platform, 'OS', { get: () => 'android', configurable: true })
+    const s = shadow(3) as { elevation: number }
+    expect(s.elevation).toBe(8)
+  })
+})

package/src/__tests__/theme.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { defaultTheme, ThemeContext } from '../theme/ThemeContext'
+import { resolveTokens, zinc, presets } from '../tokens'
+
+describe('ThemeContext', () => {
+  it('defaultTheme is zinc light', () => {
+    const expected = resolveTokens(zinc, 'light')
+    expect(defaultTheme.colorScheme).toBe('light')
+    expect(defaultTheme.colors.background).toBe(expected.colors.background)
+    expect(defaultTheme.colors.foreground).toBe(expected.colors.foreground)
+  })
+
+  it('defaultTheme has all required token categories', () => {
+    expect(defaultTheme).toHaveProperty('colors')
+    expect(defaultTheme).toHaveProperty('spacing')
+    expect(defaultTheme).toHaveProperty('radius')
+    expect(defaultTheme).toHaveProperty('typography')
+    expect(defaultTheme).toHaveProperty('animation')
+    expect(defaultTheme).toHaveProperty('colorScheme')
+  })
+
+  it('ThemeContext is a valid React context', () => {
+    expect(ThemeContext).toHaveProperty('Provider')
+    expect(ThemeContext).toHaveProperty('Consumer')
+  })
+})
+
+describe('ThemeProvider logic', () => {
+  it('forcedColorScheme dark resolves dark tokens', () => {
+    const theme = resolveTokens(presets.zinc, 'dark')
+    expect(theme.colorScheme).toBe('dark')
+    expect(theme.colors.background).toBe('#070709')
+  })
+
+  it('forcedColorScheme light resolves light tokens', () => {
+    const theme = resolveTokens(presets.zinc, 'light')
+    expect(theme.colorScheme).toBe('light')
+    expect(theme.colors.background).toBe('#ffffff')
+  })
+
+  it('each preset resolves to different primary colors', () => {
+    const themes = Object.entries(presets).map(([name, preset]) => ({
+      name,
+      primary: resolveTokens(preset, 'dark').colors.primary,
+    }))
+    const primaries = new Set(themes.map((t) => t.primary))
+    // At least 3 unique primaries across 4 presets (zinc and slate may share)
+    expect(primaries.size).toBeGreaterThanOrEqual(3)
+  })
+
+  it('overrides are applied per-mode', () => {
+    const darkOverrides = { colors: { primary: '#ff0000' } }
+    const darkTheme = resolveTokens(presets.zinc, 'dark', darkOverrides)
+    const lightTheme = resolveTokens(presets.zinc, 'light')
+    expect(darkTheme.colors.primary).toBe('#ff0000')
+    expect(lightTheme.colors.primary).not.toBe('#ff0000')
+  })
+})

package/src/__tests__/tokens.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest'
+import { resolveTokens, zinc, slate, rose, midnight, presets } from '../tokens'
+
+describe('resolveTokens', () => {
+  it('resolves zinc dark mode correctly', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    expect(theme.colors.background).toBe('#070709')
+    expect(theme.colors.foreground).toBe('#fafafa')
+    expect(theme.colorScheme).toBe('dark')
+  })
+
+  it('resolves zinc light mode correctly', () => {
+    const theme = resolveTokens(zinc, 'light')
+    expect(theme.colors.background).toBe('#ffffff')
+    expect(theme.colors.foreground).toBe('#09090b')
+    expect(theme.colorScheme).toBe('light')
+  })
+
+  it('returns non-color tokens unchanged', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    expect(theme.spacing.lg).toBe(16)
+    expect(theme.spacing.xl).toBe(24)
+    expect(theme.radius.md).toBe(10)
+    expect(theme.typography.size.md).toBe(15)
+    expect(theme.typography.weight.bold).toBe('700')
+  })
+
+  it('lineHeight values are absolute pixels, not multipliers', () => {
+    const theme = resolveTokens(zinc, 'dark')
+    expect(theme.typography.lineHeight.tight).toBe(18)
+    expect(theme.typography.lineHeight.normal).toBe(22)
+    expect(theme.typography.lineHeight.relaxed).toBe(28)
+  })
+
+  it('applies color overrides', () => {
+    const theme = resolveTokens(zinc, 'dark', {
+      colors: { primary: '#6366f1' },
+    })
+    expect(theme.colors.primary).toBe('#6366f1')
+    expect(theme.colors.background).toBe('#070709') // unchanged
+  })
+
+  it('applies spacing overrides', () => {
+    const theme = resolveTokens(zinc, 'dark', {
+      spacing: { lg: 20 },
+    })
+    expect(theme.spacing.lg).toBe(20)
+    expect(theme.spacing.sm).toBe(8) // unchanged
+  })
+
+  it('applies radius overrides', () => {
+    const theme = resolveTokens(zinc, 'dark', {
+      radius: { md: 8 },
+    })
+    expect(theme.radius.md).toBe(8)
+    expect(theme.radius.full).toBe(9999) // unchanged
+  })
+
+  it('applies animation speed overrides', () => {
+    const theme = resolveTokens(zinc, 'dark', {
+      animation: { speed: { fast: 100 } },
+    })
+    expect(theme.animation.speed.fast).toBe(100)
+    expect(theme.animation.speed.normal).toBe(250) // unchanged
+  })
+})
+
+describe('presets', () => {
+  it('exports all 4 presets', () => {
+    expect(presets).toHaveProperty('zinc')
+    expect(presets).toHaveProperty('slate')
+    expect(presets).toHaveProperty('rose')
+    expect(presets).toHaveProperty('midnight')
+  })
+
+  it('slate dark background differs from zinc', () => {
+    const zincTheme = resolveTokens(zinc, 'dark')
+    const slateTheme = resolveTokens(slate, 'dark')
+    expect(slateTheme.colors.background).not.toBe(zincTheme.colors.background)
+  })
+
+  it('rose primary differs from zinc primary in dark mode', () => {
+    const zincTheme = resolveTokens(zinc, 'dark')
+    const roseTheme = resolveTokens(rose, 'dark')
+    expect(roseTheme.colors.primary).not.toBe(zincTheme.colors.primary)
+  })
+
+  it('all presets share same spacing, radius, and typography', () => {
+    const zincTheme = resolveTokens(zinc, 'dark')
+    const midnightTheme = resolveTokens(midnight, 'dark')
+    expect(midnightTheme.spacing).toEqual(zincTheme.spacing)
+    expect(midnightTheme.radius).toEqual(zincTheme.radius)
+    expect(midnightTheme.typography).toEqual(zincTheme.typography)
+  })
+
+  it('every preset color token resolves to a hex string', () => {
+    for (const preset of Object.values(presets)) {
+      const theme = resolveTokens(preset, 'dark')
+      for (const [key, value] of Object.entries(theme.colors)) {
+        expect(typeof value).toBe('string')
+        expect(value.startsWith('#')).toBe(true)
+      }
+    }
+  })
+})

package/src/index.ts

@@ -0,0 +1,27 @@
+// Theme
+export { ThemeProvider } from './theme/ThemeProvider'
+export { useTheme } from './theme/useTheme'
+export { makeStyles } from './theme/makeStyles'
+
+// Tokens
+export { presets, resolveTokens, zinc, slate, rose, midnight } from './tokens'
+export type {
+  TokenSet, ResolvedTheme, ThemePreset,
+  NativeMateConfig, NativeMateTokenOverrides,
+  TokenColors, ColorToken, ResolvedColors,
+} from './tokens/types'
+
+// Primitives
+export { Text } from './primitives/Text/Text'
+export { Icon } from './primitives/Icon/Icon'
+export { Spinner } from './primitives/Spinner/Spinner'
+export { Separator } from './primitives/Separator/Separator'
+export type { TextProps, TextVariant, TextSize, TextWeight } from './primitives/Text/Text.types'
+export type { IconProps } from './primitives/Icon/Icon.types'
+export type { SpinnerProps } from './primitives/Spinner/Spinner.types'
+export type { SeparatorProps } from './primitives/Separator/Separator.types'
+
+// Utils
+export { shadow } from './utils/platform'
+export { useBreakpoint } from './utils/useBreakpoint'
+export type { Breakpoint } from './utils/useBreakpoint'

package/src/primitives/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { useTheme } from '../../theme/useTheme'
+import type { IconProps } from './Icon.types'
+
+const sizePx = { xs: 14, sm: 16, md: 20, lg: 24, xl: 32 }
+
+export const Icon: React.FC<IconProps> = ({ as: IconComponent, name, size = 'md', color, ...rest }) => {
+  const theme = useTheme()
+  if (!IconComponent) return null
+  return <IconComponent name={name} size={sizePx[size]} color={color ?? theme.colors.foreground} {...rest} />
+}

package/src/primitives/Icon/Icon.types.ts

@@ -0,0 +1,7 @@
+export interface IconProps {
+  as?: React.ComponentType<any>
+  name?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: string
+  [key: string]: any
+}

package/src/primitives/Separator/Separator.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { View } from 'react-native'
+import { useTheme } from '../../theme/useTheme'
+import type { SeparatorProps } from './Separator.types'
+
+export const Separator: React.FC<SeparatorProps> = ({ orientation = 'horizontal', style }) => {
+  const theme = useTheme()
+  return (
+    <View
+      accessible={false}
+      style={[
+        {
+          backgroundColor: theme.colors.border,
+          ...(orientation === 'horizontal'
+            ? { height: 1, width: '100%' }
+            : { width: 1, height: '100%' }),
+        },
+        style,
+      ]}
+    />
+  )
+}

package/src/primitives/Separator/Separator.types.ts

@@ -0,0 +1,6 @@
+import type { ViewStyle } from 'react-native'
+
+export interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical'
+  style?: ViewStyle
+}

package/src/primitives/Spinner/Spinner.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react'
+import { View } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
+import { useTheme } from '../../theme/useTheme'
+import type { SpinnerProps } from './Spinner.types'
+
+const sizes = { sm: 16, md: 24, lg: 32 }
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 'md', color }) => {
+  const theme = useTheme()
+  const rotation = useSharedValue(0)
+  const px = sizes[size]
+  const spinnerColor = color ?? theme.colors.primary
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 900, easing: Easing.linear }),
+      -1,
+      false,
+    )
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }))
+
+  return (
+    <View style={{ width: px, height: px }}>
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            width: px,
+            height: px,
+            borderRadius: px / 2,
+            borderWidth: 2,
+            borderColor: spinnerColor,
+            borderTopColor: 'transparent',
+          },
+        ]}
+      />
+    </View>
+  )
+}