@native-mate/core 0.1.0 → 0.1.1

package/src/__tests__/tokens.test.ts

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

@@ -1,27 +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'
+// 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

@@ -1,11 +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} />
-}
+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

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

@@ -1,22 +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,
-      ]}
-    />
-  )
-}
+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

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

package/src/primitives/Spinner/Spinner.tsx

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

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

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

package/src/primitives/Text/Text.tsx

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

@@ -1,15 +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']
-}
+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

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