zero-to-app 2.0.0 → 3.0.0

package/dist/utils/contrast-checker.js

@@ -0,0 +1,97 @@
+/**
+ * WCAG 2.1 Contrast Checker
+ * Automated accessibility contrast validation
+ */
+import { contrastRatio } from '../brand/palette-generator';
+/**
+ * WCAG 2.1 contrast requirements
+ * - AAA: 7:1 for normal text, 4.5:1 for large text
+ * - AA: 4.5:1 for normal text, 3:1 for large text
+ */
+export const WCAG_LEVELS = {
+    AAA_NORMAL: 7.0,
+    AAA_LARGE: 4.5,
+    AA_NORMAL: 4.5,
+    AA_LARGE: 3.0,
+};
+/**
+ * Check all critical color pairs in a theme for WCAG compliance
+ * @param colors Color scheme to validate
+ * @param largeText Whether to use large text criteria (default: false)
+ * @returns Array of contrast check results
+ */
+export function checkThemeContrast(colors, largeText = false) {
+    const minRatio = largeText ? WCAG_LEVELS.AA_LARGE : WCAG_LEVELS.AA_NORMAL;
+    const aaaRatio = largeText ? WCAG_LEVELS.AAA_LARGE : WCAG_LEVELS.AAA_NORMAL;
+    const checks = [];
+    // Critical color pairs that must have good contrast
+    const pairs = [
+        { pair: 'primary/onPrimary', fg: colors.onPrimary, bg: colors.primary },
+        { pair: 'primaryContainer/onPrimaryContainer', fg: colors.onPrimaryContainer, bg: colors.primaryContainer },
+        { pair: 'secondary/onSecondary', fg: colors.onSecondary, bg: colors.secondary },
+        { pair: 'secondaryContainer/onSecondaryContainer', fg: colors.onSecondaryContainer, bg: colors.secondaryContainer },
+        { pair: 'tertiary/onTertiary', fg: colors.onTertiary, bg: colors.tertiary },
+        { pair: 'tertiaryContainer/onTertiaryContainer', fg: colors.onTertiaryContainer, bg: colors.tertiaryContainer },
+        { pair: 'error/onError', fg: colors.onError, bg: colors.error },
+        { pair: 'errorContainer/onErrorContainer', fg: colors.onErrorContainer, bg: colors.errorContainer },
+        { pair: 'surface/onSurface', fg: colors.onSurface, bg: colors.surface },
+        { pair: 'surfaceVariant/onSurfaceVariant', fg: colors.onSurfaceVariant, bg: colors.surface },
+        { pair: 'inverseSurface/inverseOnSurface', fg: colors.inverseOnSurface, bg: colors.inverseSurface },
+    ];
+    for (const { pair, fg, bg } of pairs) {
+        const ratio = contrastRatio(fg, bg);
+        const passesAA = ratio >= minRatio;
+        const passesAAA = ratio >= aaaRatio;
+        checks.push({
+            pair,
+            foreground: fg,
+            background: bg,
+            ratio,
+            passes: passesAA,
+            level: passesAAA ? 'AAA' : passesAA ? 'AA' : 'Fail',
+        });
+    }
+    return checks;
+}
+/**
+ * Validate theme and return failing pairs
+ * @param colors Color scheme to validate
+ * @returns Array of failing contrast pairs
+ */
+export function validateThemeContrast(colors) {
+    const checks = checkThemeContrast(colors);
+    return checks.filter(check => !check.passes);
+}
+/**
+ * Generate a contrast report for a theme
+ * @param colors Color scheme to validate
+ * @returns Human-readable report string
+ */
+export function generateContrastReport(colors) {
+    const checks = checkThemeContrast(colors);
+    const failures = checks.filter(check => !check.passes);
+    if (failures.length === 0) {
+        return '✅ All color pairs pass WCAG AA contrast requirements';
+    }
+    let report = `❌ ${failures.length} color pair(s) failing WCAG AA:\n\n`;
+    for (const failure of failures) {
+        report += `  • ${failure.pair}\n`;
+        report += `    Foreground: ${failure.foreground}\n`;
+        report += `    Background: ${failure.background}\n`;
+        report += `    Level: ${failure.level}\n\n`;
+    }
+    return report;
+}
+/**
+ * Assert theme contrast passes WCAG AA
+ * Useful for automated tests
+ * @param colors Color scheme to validate
+ * @throws Error if any pairs fail
+ */
+export function assertThemeContrast(colors) {
+    const failures = validateThemeContrast(colors);
+    if (failures.length > 0) {
+        throw new Error(`Theme contrast validation failed:\n${generateContrastReport(colors)}`);
+    }
+}
+//# sourceMappingURL=contrast-checker.js.map

package/dist/utils/contrast-checker.js.map

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

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './contrast-checker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../utils/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+// Utility exports
+export * from './contrast-checker';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../utils/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zero-to-app",
-  "version": "2.0.0",
-  "description": "30+ reusable React Native components for iOS, Android, and Web",
+  "version": "3.0.0",
+  "description": "React Native components for building cross-platform apps with Material Design.",
   "license": "MIT",
   "author": "Alex Amayo",
   "repository": {
@@ -41,8 +41,8 @@
       "default": "./dist/hooks/index.js"
     },
     "./context": {
-      "types": "./dist/context/scrollContext.d.ts",
-      "default": "./dist/context/scrollContext.js"
+      "types": "./dist/context/scroll-context.d.ts",
+      "default": "./dist/context/scroll-context.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
@@ -64,41 +64,56 @@
       "types": "./dist/components/ui/*.d.ts",
       "default": "./dist/components/ui/*.js"
     },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
     "./package.json": "./package.json"
   },
-  "files": ["dist", "package.json", "README.md"],
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
   "scripts": {
     "build": "pnpm exec tsc -p tsconfig.build.json"
   },
+  "dependencies": {
+    "@material/material-color-utilities": "^0.4.0"
+  },
   "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "expo-image": "*",
+    "expo-router": "*",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
-    "@expo/vector-icons": "*",
-    "expo-blur": "*",
-    "expo-glass-effect": "*"
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*"
   },
   "peerDependenciesMeta": {
     "@expo/vector-icons": {
       "optional": true
     },
-    "expo-blur": {
+    "expo-image": {
       "optional": true
     },
-    "expo-glass-effect": {
+    "expo-router": {
       "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": false
+    },
+    "react-native-safe-area-context": {
+      "optional": false
     }
   },
-  "dependencies": {
-    "react-hook-form": "^7.0.0",
-    "@hookform/resolvers": "^3.0.0",
-    "zod": "^3.22.0",
-    "react-native-reanimated-carousel": "^3.5.0",
-    "@shopify/flash-list": "^1.7.0",
-    "lottie-react-native": "^6.7.0"
-  },
   "devDependencies": {
-    "@types/react": "~19.1.0",
-    "@types/react-native": "^0.73.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.2.14",
+    "expo-router": "~55.0.3",
+    "jest": "^30.2.0",
+    "react-test-renderer": "^19.2.4",
     "typescript": "~5.9.2"
   }
 }