@kbach/react 0.1.1 → 0.1.3

package/README.md

@@ -1,8 +1,8 @@
 # @kbach/react
 
-Tailwind-like utility classes for **React (web)**. Same class names as Tailwind, zero stylesheet required — classes are converted to inline styles at render time via a custom JSX runtime.
+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" />
@@ -20,7 +20,7 @@ npm install @kbach/react
 
 ### 1. Configure the JSX runtime
 
-**tsconfig.json** (applies to every file in the project)
+**tsconfig.json**
 
 ```jsonc
 {
@@ -33,7 +33,7 @@ npm install @kbach/react
 
 **Vite**
 
-```ts
+```js
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -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() {
@@ -76,21 +76,21 @@ export default function Root() {
 
 ## API
 
-### `className` prop
+### className prop
 
 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" />
 ```
 
-### `styled(Component, classes)`
+### styled(Component, classes)
 
 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');
@@ -106,11 +106,11 @@ const Button = styled(
 </Card>
 ```
 
-### `useStyles(classes)`
+### useStyles(classes)
 
 Resolve classes to a style object inside a component.
 
-```tsx
+```
 import { useStyles } from '@kbach/react';
 
 function Badge() {
@@ -119,21 +119,21 @@ function Badge() {
 }
 ```
 
-### `tw(classes)`
+### tw(classes)
 
 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;
 ```
 
-### `cx(...classes)`
+### cx(...classes)
 
 Conditionally join class strings. Falsy values are ignored.
 
-```tsx
+```
 import { cx } from '@kbach/react';
 
 <div className={cx(
@@ -143,9 +143,9 @@ import { cx } from '@kbach/react';
 )} />
 ```
 
-### `useTheme()`
+### useTheme()
 
-```tsx
+```
 import { useTheme } from '@kbach/react';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -153,45 +153,45 @@ 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.
 
-```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
 ```
 
 ## 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 |
-| `hover:` | Mouse hover |
-| `pressed:` | Click / touch |
-| `focus:` | Element focused |
-| `active:` | Element active |
-| `disabled:` | Element disabled |
-
-```tsx
+| dark: | Dark mode active |
+| light: | Light mode active |
+| hover: | Mouse hover |
+| pressed: | Click or touch |
+| focus: | Element focused |
+| active: | Element active |
+| disabled: | Element disabled |
+
+```
 <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,20 +200,35 @@ 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 */}
+```
+<div className="bg-blue-6/50" />   // 50% opacity
+<div 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-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
 
@@ -246,7 +261,9 @@ module.exports = {
 };
 ```
 
-```tsx
+Apply at runtime:
+
+```
 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.1",
+  "version": "0.1.3",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",