app-studio 0.7.18 → 0.8.1

package/docs/Theming.md

@@ -2,6 +2,8 @@
 
 Theming is an essential part of any application. It allows you to maintain a consistent look and feel across your app. With App-Studio, theming becomes effortless through its `ThemeProvider` component. This document shows you how to set up theming in App-Studio.
 
+> **React Native:** the entire color system documented here (singletons, palettes, theme tokens, `light-`/`dark-` prefixes, alpha shorthand, component-level `theme` overrides) works identically on native. The only implementation difference: on web, alpha colors compile to `color-mix(...)` CSS; on native the theme provider returns concrete hex/rgba strings that get substituted into RN style props. See [Native.md → Theme & Color Resolution](Native.md#theme--color-resolution).
+
 ## Available Colors Reference
 
 App-Studio provides an extensive color system with three types of colors:
@@ -413,6 +415,57 @@ function Example() {
 
 This direct access syntax works with all color-related properties and can be used with both singleton colors (like `white`, `black`) and palette colors (like `red-200`, `blue-500`). It provides a convenient way to reference specific theme colors without having to use the `getColor` function from the `useTheme` hook.
 
+### Component-Level Sub-Theming
+
+Any component that extends `Element` (`View`, `Text`, `Button`, etc.) accepts a `theme` prop that remaps `theme-*` tokens **for that single component**, without touching the global `ThemeProvider`. Useful when a screen needs one "branded" element (a Startup Studio launch button, a special card, a colored chip) while the rest of the UI keeps the global palette.
+
+```javascript
+import { View, Text } from 'app-studio';
+
+function Example() {
+  return (
+    <View>
+      {/* Global theme-primary (no override) */}
+      <View backgroundColor="theme-primary" padding={20}>
+        <Text color="color-white">Global primary</Text>
+      </View>
+
+      {/* Same component, locally remapped to red */}
+      <View
+        backgroundColor="theme-primary"
+        theme={{ primary: 'color-red-500' }}
+        padding={20}
+      >
+        <Text color="color-white">Local primary = red-500</Text>
+      </View>
+
+      {/* Multiple slots at once */}
+      <View
+        backgroundColor="theme-primary"
+        borderColor="theme-secondary"
+        borderWidth={2}
+        borderStyle="solid"
+        theme={{
+          primary: 'color-indigo-600',
+          secondary: 'color-yellow-400',
+        }}
+        padding={20}
+      >
+        <Text color="color-white">indigo bg, yellow border</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+**What the `theme` prop accepts**: a `Partial<Theme>` where each value is itself a color token (`'color-red-500'`, `'theme-secondary'`) or a direct color string (`'#ff0000'`). The keys match the global `Theme` shape (`primary`, `secondary`, `success`, `error`, `warning`, `disabled`, `loading`).
+
+**Alpha suffix works**: `theme-primary-200` on a component with `theme={{ primary: 'color-red-500' }}` resolves to `color-red-500` at 20% opacity via `color-mix()`.
+
+**Dark mode**: overrides that point at palette tokens (e.g., `'color-red-500'`) keep responding to global dark-mode switching, because the resolution returns the underlying CSS variable. Overrides that point at raw hex literals (`'#ff0000'`) bypass the palette and do **not** swap with dark mode — use palette tokens whenever you need dark-mode reactivity.
+
+**Scope**: the override applies only to the Element receiving the `theme` prop. Children that re-use `theme-primary` resolve against the global theme, not the parent's override. To remap an entire subtree, wrap it in a nested `ThemeProvider` instead, or set the `theme` prop on each child.
+
 ### Smart Text Contrast
 
 For text that needs to be visible on any background color (light, dark, or dynamic gradients), App-Studio provides a smart contrast feature.

package/package.json

@@ -1,14 +1,53 @@
 {
-  "version": "0.7.18",
+  "version": "0.8.1",
   "name": "app-studio",
   "description": "App Studio is a responsive and themeable framework to build cross platform applications",
   "repository": "git@github.com:rize-network/app-studio.git",
   "license": "MIT",
   "bugs": "https://github.com/rize-network/app-studio/issues",
-  "main": "dist/index.js",
-  "module": "dist/app-studio.esm.js",
-  "unpkg": "dist/app-studio.umd.production.min.js",
-  "typings": "dist/index.d.ts",
+  "main": "dist/web/index.cjs",
+  "module": "dist/web/index.js",
+  "unpkg": "dist/web/app-studio.umd.production.min.global.js",
+  "typings": "dist/web/index.d.ts",
+  "types": "dist/web/index.d.ts",
+  "react-native": "dist/native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/native/index.d.ts",
+        "import": "./dist/native/index.js",
+        "require": "./dist/native/index.cjs",
+        "default": "./dist/native/index.js"
+      },
+      "browser": {
+        "types": "./dist/web/index.d.ts",
+        "import": "./dist/web/index.js",
+        "require": "./dist/web/index.cjs",
+        "default": "./dist/web/index.js"
+      },
+      "import": {
+        "types": "./dist/web/index.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "require": {
+        "types": "./dist/web/index.d.ts",
+        "default": "./dist/web/index.cjs"
+      }
+    },
+    "./web": {
+      "types": "./dist/web/index.d.ts",
+      "import": "./dist/web/index.js",
+      "require": "./dist/web/index.cjs",
+      "default": "./dist/web/index.js"
+    },
+    "./native": {
+      "types": "./dist/native/index.d.ts",
+      "import": "./dist/native/index.js",
+      "require": "./dist/native/index.cjs",
+      "default": "./dist/native/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "keywords": [
     "react",
@@ -29,8 +68,11 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "tsdx watch --format cjs,esm,umd",
-    "build": "tsdx build --format cjs,esm,umd",
+    "start": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "npm run typecheck:web && npm run typecheck:native",
+    "typecheck:web": "tsc -p tsconfig.web.json --noEmit",
+    "typecheck:native": "tsc -p tsconfig.native.json --noEmit",
     "test": "tsdx test --passWithNoTests",
     "test:e2e": "ts-node test/webdriver/data-testid.test.ts && ts-node test/webdriver/component-tests.test.ts && ts-node test/webdriver/form-components.test.ts",
     "lint": "npm run eslint && npm run prettier",
@@ -53,6 +95,12 @@
     "setupFilesAfterEnv": [
       "./test/setupTests.ts"
     ],
+    "moduleNameMapper": {
+      "^react-native$": "<rootDir>/test/jest/native/reactNativeMock.tsx"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-native|react-native|@testing-library/react-native)/)"
+    ],
     "testMatch": [
       "<rootDir>/test/jest/**/*.test.{ts,tsx}"
     ]
@@ -74,16 +122,16 @@
   },
   "size-limit": [
     {
-      "path": "dist/app-studio.cjs.production.min.js",
-      "limit": "25 KB"
+      "path": "dist/web/index.cjs",
+      "limit": "180 KB"
     },
     {
-      "path": "dist/app-studio.esm.js",
-      "limit": "25 KB"
+      "path": "dist/web/index.js",
+      "limit": "180 KB"
     },
     {
-      "path": "dist/app-studio.umd.production.min.js",
-      "limit": "25 KB"
+      "path": "dist/web/app-studio.umd.production.min.global.js",
+      "limit": "125 KB"
     }
   ],
   "dependencies": {
@@ -112,7 +160,10 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/color": "^3.0.6",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^20.19.39",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/selenium-webdriver": "^4.35.5",
@@ -139,6 +190,7 @@
     "prettier": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-native": "^0.79.7",
     "react-test-renderer": "^17.0.2",
     "release-it": "^16.2.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -148,10 +200,20 @@
     "ts-node": "^10.9.2",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
+    "tsup": "^8.5.1",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "react-native": ">=0.79"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   }
 }