@kbach/native 0.1.1 → 0.1.3

package/README.md

@@ -2,7 +2,7 @@
 
 Tailwind-like utility classes for **React Native and Expo**. One package includes everything: the core engine, JSX runtime, Babel plugin for compile-time optimization, and Metro config helper.
 
-```tsx
+```
 import { View, Text, TouchableOpacity } from 'react-native';
 import { styled } from '@kbach/native';
 
@@ -65,7 +65,7 @@ module.exports = withKbach(config);
 
 ### 3. Wrap your app
 
-```tsx
+```
 import { ThemeProvider } from '@kbach/native';
 
 export default function App() {
@@ -85,21 +85,21 @@ npx expo start --clear
 
 ## API
 
-### `className` prop
+### className prop
 
-Works on any React Native component — `View`, `Text`, `TouchableOpacity`, `TextInput`, and third-party components.
+Works on any React Native component — View, Text, TouchableOpacity, TextInput, and third-party components.
 
-```tsx
+```
 <View className="flex-1 bg-gray-2 dark:bg-gray-11 p-4" />
 <Text className="text-lg font-bold text-gray-10 dark:text-white" />
 <TouchableOpacity className="bg-blue-7 pressed:bg-blue-8 rounded-xl px-6 py-3" />
 ```
 
-### `styled(Component, classes)`
+### styled(Component, classes)
 
-Pre-style any component. Handles interaction states (`pressed:`, `focus:`, etc.) automatically.
+Pre-style any component. Handles interaction states (pressed, focus, etc.) automatically.
 
-```tsx
+```
 import { styled } from '@kbach/native';
 import { View, Text, TouchableOpacity, TextInput } from 'react-native';
 
@@ -117,17 +117,17 @@ const Input = styled(
 
 Pass extra classes at use time with the `tw` prop:
 
-```tsx
+```
 <Card tw="mt-4 mb-2">
   <Title tw="text-3xl">Hello</Title>
 </Card>
 ```
 
-### `useStyles(classes)`
+### useStyles(classes)
 
 Resolve classes to a style object inside a component. Use this when you need a value for the `style` prop.
 
-```tsx
+```
 import { useStyles } from '@kbach/native';
 import { View, Text } from 'react-native';
 
@@ -143,11 +143,11 @@ function Badge() {
 }
 ```
 
-### `tw(classes)`
+### tw(classes)
 
-Resolve classes outside a component, for use in `StyleSheet.create()` or static contexts.
+Resolve classes outside a component, for use in StyleSheet.create() or static contexts.
 
-```tsx
+```
 import { StyleSheet } from 'react-native';
 import { tw } from '@kbach/native';
 
@@ -157,11 +157,11 @@ const styles = StyleSheet.create({
 });
 ```
 
-### `cx(...classes)`
+### cx(...classes)
 
 Conditionally join class strings. Falsy values are ignored.
 
-```tsx
+```
 import { cx } from '@kbach/native';
 
 <View className={cx(
@@ -171,9 +171,9 @@ import { cx } from '@kbach/native';
 )} />
 ```
 
-### `useTheme()`
+### useTheme()
 
-```tsx
+```
 import { useTheme } from '@kbach/native';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -181,44 +181,44 @@ const { mode, resolvedMode, isDark, setMode, toggle } = 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(mode)` | `fn` | Set mode explicitly |
-| `toggle()` | `fn` | 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 | function | Set mode explicitly |
+| toggle | function | Toggle between light and dark |
 
-### `ThemeToggle`
+### ThemeToggle
 
 Drop-in toggle component that works on both web and native.
 
-```tsx
-<ThemeToggle />                                 // button (default)
-<ThemeToggle variant="switch" />               // toggle switch
-<ThemeToggle variant="icon-button" />          // icon button
-<ThemeToggle variant="button" includeSystem /> // three-way selector
+```
+<ThemeToggle />                                  // button (default)
+<ThemeToggle variant="switch" />                // toggle switch
+<ThemeToggle variant="icon-button" />           // icon button
+<ThemeToggle variant="button" includeSystem />  // three-way selector
 ```
 
 ## Modifiers
 
-Up to **3 modifiers** can be chained in any order.
+Up to 3 modifiers can be chained in any order.
 
 | Modifier | Trigger |
 |---|---|
-| `dark:` | Dark mode active |
-| `light:` | Light mode active |
-| `pressed:` | Touch pressed |
-| `focus:` | Element focused |
-| `active:` | Element active |
-| `disabled:` | Element disabled |
-
-```tsx
+| dark: | Dark mode active |
+| light: | Light mode active |
+| pressed: | Touch pressed |
+| focus: | Element focused |
+| active: | Element active |
+| disabled: | Element disabled |
+
+```
 <View className="dark:bg-gray-10" />
 <TouchableOpacity className="dark:pressed:bg-indigo-8" />
 ```
 
 ## Arbitrary values
 
-```tsx
+```
 <View className="bg-[#6366f1]" />
 <View className="p-[14px]" />
 <Text className="text-[18px]" />
@@ -228,41 +228,42 @@ Up to **3 modifiers** can be chained in any order.
 
 ## Negative values
 
-```tsx
-<View className="-mt-4" />   {/* marginTop: -16 */}
-<View className="-mx-2" />   {/* marginHorizontal: -8 */}
+```
+<View className="-mt-4" />   // marginTop: -16
+<View className="-mx-2" />   // marginHorizontal: -8
 ```
 
 ## Color with opacity
 
-```tsx
-<View className="bg-blue-6/50" />   {/* 50% opacity */}
-<View className="bg-gray-10/75" />  {/* 75% opacity */}
+```
+<View className="bg-blue-6/50" />   // 50% opacity
+<View className="bg-gray-10/75" />  // 75% opacity
 ```
 
 ## Color scale
 
-Colors use an 11-shade scale where **1 is lightest** and **11 is darkest**.
+Colors use an 11-shade scale — 1 is lightest, 11 is darkest.
 
 ```
-bg-gray-1   (near white)  →  bg-gray-6  (mid)  →  bg-gray-11  (near black)
+shade 1  ·  2  ·  3  ·  4  ·  5  ·  6  ·  7  ·  8  ·  9  ·  10  ·  11
+light ─────────────────────────────────────────────────────────── dark
 ```
 
-Available families: `slate` `gray` `zinc` `neutral` `stone` `red` `orange` `amber` `yellow` `lime` `green` `emerald` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `fuchsia` `pink` `rose`
+Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
 
 ## Common utilities
 
 | Category | Examples |
 |---|---|
-| **Background** | `bg-white`, `bg-gray-10`, `bg-blue-6`, `bg-[#fff]` |
-| **Text** | `text-sm`, `text-lg`, `text-2xl`, `text-gray-10`, `font-bold` |
-| **Padding** | `p-4`, `px-6`, `py-3`, `pt-2`, `pb-4` |
-| **Margin** | `m-4`, `mx-auto`, `mt-2`, `mb-4`, `-mt-4` |
-| **Size** | `w-full`, `h-12`, `w-[200px]` |
-| **Flex** | `flex-1`, `flex-row`, `items-center`, `justify-between`, `gap-4` |
-| **Border** | `border`, `border-2`, `border-gray-4`, `rounded-xl`, `rounded-full` |
-| **Shadow** | `shadow`, `shadow-md`, `shadow-lg` |
-| **Opacity** | `opacity-50`, `opacity-75` |
+| Background | `bg-white`, `bg-gray-10`, `bg-blue-6`, `bg-[#fff]` |
+| Text | `text-sm`, `text-2xl`, `text-gray-10`, `font-bold` |
+| Padding | `p-4`, `px-6`, `py-3` |
+| Margin | `m-4`, `mx-auto`, `mt-2`, `-mt-4` |
+| Size | `w-full`, `h-12`, `w-[200px]` |
+| Flex | `flex-1`, `flex-row`, `items-center`, `justify-between`, `gap-4` |
+| Border | `border`, `border-2`, `border-gray-4`, `rounded-xl` |
+| Shadow | `shadow`, `shadow-md`, `shadow-lg` |
+| Opacity | `opacity-50`, `opacity-75` |
 
 ## Configuration
 
@@ -295,7 +296,9 @@ module.exports = {
 };
 ```
 
-```tsx
+Apply at runtime:
+
+```
 import { updateConfig } from '@kbach/native';
 
 updateConfig({ extend: { theme: { colors: { brand: { 6: '#6366f1' } } } } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/native",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@kbach/core": "0.1.0",
-    "@kbach/react": "0.1.1",
+    "@kbach/react": "0.1.3",
     "babel-plugin-kbach": "0.1.0"
   },
   "devDependencies": {