@native-mate/core 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,102 @@
+# @native-mate/core
+
+Token system, theme provider, and primitive components for [native-mate](https://github.com/native-mate/native-mate).
+
+## Install
+
+```bash
+npm install @native-mate/core
+```
+
+## Setup
+
+Wrap your app in `ThemeProvider`:
+
+```tsx
+import { ThemeProvider } from '@native-mate/core'
+
+export default function App() {
+  return (
+    <ThemeProvider preset="zinc">
+      <YourApp />
+    </ThemeProvider>
+  )
+}
+```
+
+## Presets
+
+Four built-in presets: `zinc`, `slate`, `rose`, `midnight`
+
+```tsx
+<ThemeProvider preset="zinc" />       // neutral grays (default)
+<ThemeProvider preset="slate" />      // cool blue-gray
+<ThemeProvider preset="rose" />       // warm rose accents
+<ThemeProvider preset="midnight" />   // deep dark with purple
+```
+
+## Hooks
+
+### `useTheme()`
+
+Access resolved tokens inside any component:
+
+```tsx
+import { useTheme } from '@native-mate/core'
+
+function MyComponent() {
+  const theme = useTheme()
+  return <View style={{ backgroundColor: theme.colors.background }} />
+}
+```
+
+### `makeStyles(factory)`
+
+Create memoized, theme-aware StyleSheets:
+
+```tsx
+import { makeStyles } from '@native-mate/core'
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    backgroundColor: theme.colors.surface,
+    padding: theme.spacing.lg,
+    borderRadius: theme.radius.md,
+  },
+}))
+```
+
+### `useBreakpoint()`
+
+Responsive breakpoints: `sm` (<768), `md` (768–1023), `lg` (1024+)
+
+```tsx
+import { useBreakpoint } from '@native-mate/core'
+
+const bp = useBreakpoint() // 'sm' | 'md' | 'lg'
+```
+
+## Token Categories
+
+| Category | Examples |
+|---|---|
+| Colors | `background`, `foreground`, `primary`, `destructive`, `muted` |
+| Spacing | `xs` (4), `sm` (8), `md` (12), `lg` (16), `xl` (24) |
+| Radius | `sm` (6), `md` (10), `lg` (16), `full` (9999) |
+| Typography | `size`, `weight`, `lineHeight` |
+| Animation | `speed.fast` (150ms), `speed.normal` (250ms) |
+
+## Overrides
+
+```tsx
+<ThemeProvider
+  preset="zinc"
+  overrides={{
+    dark: { colors: { primary: '#6366f1' } },
+  }}
+>
+```
+
+## License
+
+MIT

package/dist/primitives/Spinner/Spinner.js

@@ -14,7 +14,7 @@ export const Spinner = ({ size = 'md', color }) => {
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotation.value}deg` }],
     }));
-    return (<View style={{ width: px, height: px }}>
+    return (<View style={{ width: px, height: px }}>
       <Animated.View style={[
             animatedStyle,
             {
@@ -25,7 +25,7 @@ export const Spinner = ({ size = 'md', color }) => {
                 borderColor: spinnerColor,
                 borderTopColor: 'transparent',
             },
-        ]}/>
+        ]}/>
     </View>);
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/primitives/Text/Text.js

@@ -20,8 +20,8 @@ export const Text = ({ variant = 'body', size, weight, color, muted = false, sty
                 lineHeight: theme.typography.lineHeight.normal,
             },
             style,
-        ]} {...rest}>
-      {children}
+        ]} {...rest}>
+      {children}
     </RNText>);
 };
 //# sourceMappingURL=Text.js.map

package/package.json

@@ -1,31 +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"
-  }
-}
+{
+  "name": "@native-mate/core",
+  "version": "0.1.1",
+  "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

@@ -1,56 +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')
-  })
-})
+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

@@ -1,46 +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())
-    }
-  })
-})
+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

@@ -1,34 +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)
-  })
-})
+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

@@ -1,58 +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')
-  })
-})
+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')
+  })
+})