@kbach/native 0.1.2 → 0.1.4

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';
 
@@ -27,7 +27,7 @@ export default function Screen() {
 
 ## Install
 
-```bash
+```
 npm install @kbach/native
 ```
 
@@ -37,14 +37,14 @@ That's it. Core engine, Babel plugin, and Metro helpers are bundled — nothing
 
 ### 1. babel.config.js
 
-```js
+```
 const { createKbachConfig } = require('@kbach/native');
 module.exports = createKbachConfig();
 ```
 
 If you need to keep an existing Babel config:
 
-```js
+```
 const { withKbachBabel } = require('@kbach/native');
 
 module.exports = withKbachBabel({
@@ -55,7 +55,7 @@ module.exports = withKbachBabel({
 
 ### 2. metro.config.js
 
-```js
+```
 const { getDefaultConfig } = require('expo/metro-config');
 const { withKbach } = require('@kbach/native');
 
@@ -65,7 +65,7 @@ module.exports = withKbach(config);
 
 ### 3. Wrap your app
 
-```tsx
+```
 import { ThemeProvider } from '@kbach/native';
 
 export default function App() {
@@ -79,7 +79,7 @@ export default function App() {
 
 After changing `babel.config.js` or `metro.config.js`, clear the Metro cache:
 
-```bash
+```
 npx expo start --clear
 ```
 
@@ -89,7 +89,7 @@ npx expo start --clear
 
 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" />
@@ -99,7 +99,7 @@ Works on any React Native component — View, Text, TouchableOpacity, TextInput,
 
 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,7 +117,7 @@ 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>
@@ -127,7 +127,7 @@ Pass extra classes at use time with the `tw` prop:
 
 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';
 
@@ -145,9 +145,9 @@ function Badge() {
 
 ### 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';
 
@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
 
 Conditionally join class strings. Falsy values are ignored.
 
-```tsx
+```
 import { cx } from '@kbach/native';
 
 <View className={cx(
@@ -173,7 +173,7 @@ import { cx } from '@kbach/native';
 
 ### useTheme()
 
-```tsx
+```
 import { useTheme } from '@kbach/native';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -191,7 +191,7 @@ const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
 
 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
@@ -211,14 +211,14 @@ Up to 3 modifiers can be chained in any order.
 | active: | Element active |
 | disabled: | Element disabled |
 
-```tsx
+```
 <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,14 +228,14 @@ 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
 ```
 
 ## Color with opacity
 
-```tsx
+```
 <View className="bg-blue-6/50" />   // 50% opacity
 <View className="bg-gray-10/75" />  // 75% opacity
 ```
@@ -267,7 +267,7 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 
 ## Configuration
 
-```js
+```
 // kbach.config.js
 module.exports = {
   darkMode: 'attribute', // 'attribute' | 'class' | 'media'
@@ -298,7 +298,7 @@ module.exports = {
 
 Apply at runtime:
 
-```tsx
+```
 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.2",
+  "version": "0.1.4",
   "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.2",
+    "@kbach/react": "0.1.4",
     "babel-plugin-kbach": "0.1.0"
   },
   "devDependencies": {