@kbach/react 0.1.2 → 0.1.4

package/README.md

@@ -2,7 +2,7 @@
 
 Tailwind-like utility classes for **React (web)**. Classes are converted to inline styles at render time through a custom JSX runtime — no stylesheet required.
 
-```tsx
+```
 /** @jsxImportSource @kbach/react */
 
 <div className="bg-white dark:bg-gray-10 p-4 rounded-xl shadow" />
@@ -12,7 +12,7 @@ Tailwind-like utility classes for **React (web)**. Classes are converted to inli
 
 ## Install
 
-```bash
+```
 npm install @kbach/react
 ```
 
@@ -22,7 +22,7 @@ npm install @kbach/react
 
 **tsconfig.json**
 
-```jsonc
+```
 {
   "compilerOptions": {
     "jsx": "react-jsx",
@@ -33,7 +33,7 @@ npm install @kbach/react
 
 **Vite**
 
-```ts
+```
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -45,7 +45,7 @@ export default defineConfig({
 
 **Babel**
 
-```js
+```
 // babel.config.js
 module.exports = {
   presets: [
@@ -56,13 +56,13 @@ module.exports = {
 
 **Per-file pragma** (no config change required)
 
-```tsx
+```
 /** @jsxImportSource @kbach/react */
 ```
 
 ### 2. Wrap your app
 
-```tsx
+```
 import { ThemeProvider } from '@kbach/react';
 
 export default function Root() {
@@ -80,7 +80,7 @@ export default function Root() {
 
 Works on any HTML element or React component once the JSX runtime is configured.
 
-```tsx
+```
 <div className="bg-white dark:bg-gray-10 p-4 rounded-xl" />
 <p className="text-gray-10 dark:text-white text-lg font-bold" />
 <button className="bg-blue-7 hover:bg-blue-8 pressed:bg-blue-8 rounded-lg px-4 py-2" />
@@ -90,7 +90,7 @@ Works on any HTML element or React component once the JSX runtime is configured.
 
 Pre-style any component. Returns a new component that merges the base classes with any `className` or `tw` prop passed at use time.
 
-```tsx
+```
 import { styled } from '@kbach/react';
 
 const Card = styled('div', 'bg-white dark:bg-gray-9 rounded-2xl p-6 shadow');
@@ -110,7 +110,7 @@ const Button = styled(
 
 Resolve classes to a style object inside a component.
 
-```tsx
+```
 import { useStyles } from '@kbach/react';
 
 function Badge() {
@@ -123,7 +123,7 @@ function Badge() {
 
 Resolve classes outside a component (static contexts).
 
-```tsx
+```
 import { tw } from '@kbach/react';
 
 const cardStyle = tw('bg-white p-4 rounded-xl') as React.CSSProperties;
@@ -133,7 +133,7 @@ const cardStyle = tw('bg-white p-4 rounded-xl') as React.CSSProperties;
 
 Conditionally join class strings. Falsy values are ignored.
 
-```tsx
+```
 import { cx } from '@kbach/react';
 
 <div className={cx(
@@ -145,7 +145,7 @@ import { cx } from '@kbach/react';
 
 ### useTheme()
 
-```tsx
+```
 import { useTheme } from '@kbach/react';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -163,10 +163,10 @@ const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
 
 Drop-in toggle component.
 
-```tsx
-<ThemeToggle />                               // button (default)
-<ThemeToggle variant="switch" />             // toggle switch
-<ThemeToggle variant="icon-button" />        // icon button
+```
+<ThemeToggle />                                // button (default)
+<ThemeToggle variant="switch" />              // toggle switch
+<ThemeToggle variant="icon-button" />         // icon button
 <ThemeToggle variant="button" includeSystem /> // three-way selector
 ```
 
@@ -184,14 +184,14 @@ Up to 3 modifiers can be chained in any order.
 | active: | Element active |
 | disabled: | Element disabled |
 
-```tsx
+```
 <div className="dark:hover:bg-gray-9" />
 <button className="dark:pressed:bg-indigo-8" />
 ```
 
 ## Arbitrary values
 
-```tsx
+```
 <div className="bg-[#6366f1]" />
 <div className="p-[14px]" />
 <div className="text-[18px]" />
@@ -200,7 +200,7 @@ Up to 3 modifiers can be chained in any order.
 
 ## Color with opacity
 
-```tsx
+```
 <div className="bg-blue-6/50" />   // 50% opacity
 <div className="bg-gray-10/75" />  // 75% opacity
 ```
@@ -232,7 +232,7 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 
 ## Configuration
 
-```js
+```
 // kbach.config.js
 module.exports = {
   darkMode: 'attribute', // 'attribute' | 'class' | 'media'
@@ -263,7 +263,7 @@ module.exports = {
 
 Apply at runtime:
 
-```tsx
+```
 import { updateConfig } from '@kbach/react';
 
 updateConfig({ extend: { theme: { colors: { brand: { 6: '#6366f1' } } } } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",