@kbach/native 0.2.8 → 0.3.0

package/README.md

@@ -149,17 +149,17 @@ function Badge() {
 }
 ```
 
-### tw(classes)
+### kb(classes)
 
 Resolve classes outside a component, for use in StyleSheet.create() or static contexts.
 
 ```js
 import { StyleSheet } from 'react-native';
-import { tw } from '@kbach/native';
+import { kb } from '@kbach/native';
 
 const styles = StyleSheet.create({
-  container: tw('flex-1 bg-white p-4') as object,
-  title: tw('text-2xl font-bold text-gray-10') as object,
+  container: kb('flex-1 bg-white p-4') as object,
+  title: kb('text-2xl font-bold text-gray-10') as object,
 });
 ```
 
@@ -182,16 +182,57 @@ import { cx } from '@kbach/native';
 ```js
 import { useTheme } from '@kbach/native';
 
-const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
+const { mode, resolvedMode, isDark, setMode, toggle, config } = useTheme();
 ```
 
 | Value | Type | Description |
 |---|---|---|
-| mode | `'light' \| 'dark' \| 'system'` | User-selected mode |
-| resolvedMode | `'light' \| 'dark'` | Resolved after system lookup |
-| isDark | boolean | Shorthand for `resolvedMode === 'dark'` |
-| setMode | function | Set mode explicitly |
-| toggle | function | Toggle between light and dark |
+| `mode` | `'light' \| 'dark' \| 'system'` | User-selected mode |
+| `resolvedMode` | `'light' \| 'dark'` | Resolved after system lookup |
+| `isDark` | `boolean` | Shorthand for `resolvedMode === 'dark'` |
+| `setMode` | `fn` | Set mode explicitly |
+| `toggle` | `fn` | Toggle between light and dark |
+| `config` | `ResolvedConfig` | Full resolved config (theme, darkMode, plugins) |
+
+### useIsDark()
+
+Shorthand hook when you only need the dark-mode boolean.
+
+```js
+import { useIsDark } from '@kbach/native';
+
+const isDark = useIsDark();
+```
+
+### useColors()
+
+Returns the active theme's color palette as a smart proxy. Supports shade access, the `/opacity` modifier, flat colors with opacity, and arbitrary CSS color manipulation.
+
+```js
+import { useColors } from '@kbach/native';
+
+const colors = useColors();
+
+// Shade access
+colors.blue[6]           // '#6c87b6'
+colors.red[11]           // '#3e0606'
+
+// Shade + opacity (0–100)
+colors.blue['6/50']      // 'rgba(108,135,182,0.5)'
+colors.slate['3/10']     // 'rgba(221,227,242,0.1)'
+
+// Flat colors
+colors.white             // '#ffffff'
+colors.transparent       // 'transparent'
+
+// Flat color + opacity
+colors['white/20']       // 'rgba(255,255,255,0.2)'
+colors['black/80']       // 'rgba(0,0,0,0.8)'
+
+// Arbitrary CSS color with opacity
+colors.alpha('#ff6b35', 60)           // 'rgba(255,107,53,0.6)'
+colors.alpha('rgb(100,200,100)', 30)  // 'rgba(100,200,100,0.3)'
+```
 
 ### ThemeToggle
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/native",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Single-package Kbach install for React Native and Expo — includes core, components, Babel plugin, and Metro config",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -35,7 +35,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@kbach/react": "0.2.8"
+    "@kbach/react": "0.3.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -47,12 +47,29 @@
     "react-native": ">=0.70.0"
   },
   "peerDependenciesMeta": {
-    "@babel/core": { "optional": true },
-    "react-native": { "optional": true }
+    "@babel/core": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
-  "files": ["dist", "src/babel-plugin", "src/babel"],
-  "keywords": ["react-native", "expo", "tailwind", "css-in-js", "styling", "framework", "frontend", "mobile"]
+  "files": [
+    "dist",
+    "src/babel-plugin",
+    "src/babel"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "tailwind",
+    "css-in-js",
+    "styling",
+    "framework",
+    "frontend",
+    "mobile"
+  ]
 }