@kbach/react 0.1.5 → 0.1.9

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.
 
-```
+```jsx
 /** @jsxImportSource @kbach/react */
 
 <div className="bg-white dark:bg-gray-10 p-4 rounded-xl shadow" />
@@ -22,7 +22,7 @@ npm install @kbach/react
 
 **tsconfig.json**
 
-```
+```json
 {
   "compilerOptions": {
     "jsx": "react-jsx",
@@ -33,7 +33,7 @@ npm install @kbach/react
 
 **Vite**
 
-```
+```js
 // 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)
 
-```
+```js
 /** @jsxImportSource @kbach/react */
 ```
 
 ### 2. Wrap your app
 
-```
+```jsx
 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.
 
-```
+```jsx
 <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" />
@@ -88,9 +88,9 @@ Works on any HTML element or React component once the JSX runtime is configured.
 
 ### 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.
+Pre-style any component. Returns a new component that merges the base classes with any `className` or `kb` prop passed at use time.
 
-```
+```jsx
 import { styled } from '@kbach/react';
 
 const Card = styled('div', 'bg-white dark:bg-gray-9 rounded-2xl p-6 shadow');
@@ -101,8 +101,8 @@ const Button = styled(
 );
 
 // Pass extra classes at use time
-<Card tw="mt-4 mb-2">
-  <Title tw="text-3xl">Hello</Title>
+<Card kb="mt-4 mb-2">
+  <Title kb="text-3xl">Hello</Title>
 </Card>
 ```
 
@@ -110,7 +110,7 @@ const Button = styled(
 
 Resolve classes to a style object inside a component.
 
-```
+```jsx
 import { useStyles } from '@kbach/react';
 
 function Badge() {
@@ -123,7 +123,7 @@ function Badge() {
 
 Resolve classes outside a component (static contexts).
 
-```
+```js
 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.
 
-```
+```jsx
 import { cx } from '@kbach/react';
 
 <div className={cx(
@@ -145,7 +145,7 @@ import { cx } from '@kbach/react';
 
 ### useTheme()
 
-```
+```js
 import { useTheme } from '@kbach/react';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -163,7 +163,7 @@ const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
 
 Drop-in toggle component.
 
-```
+```jsx
 <ThemeToggle />                                // button (default)
 <ThemeToggle variant="switch" />              // toggle switch
 <ThemeToggle variant="icon-button" />         // icon button
@@ -176,22 +176,22 @@ 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 or touch |
-| focus: | Element focused |
-| active: | Element active |
-| disabled: | Element disabled |
-
-```
+| `dark:` | Dark mode active |
+| `light:` | Light mode active |
+| `hover:` | Mouse hover |
+| `pressed:` | Click or touch |
+| `focus:` | Element focused |
+| `active:` | Element active |
+| `disabled:` | Element disabled |
+
+```jsx
 <div className="dark:hover:bg-gray-9" />
 <button className="dark:pressed:bg-indigo-8" />
 ```
 
 ## Arbitrary values
 
-```
+```jsx
 <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
 
-```
+```jsx
 <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:
 
-```
+```js
 import { updateConfig } from '@kbach/react';
 
 updateConfig({ extend: { theme: { colors: { brand: { 6: '#6366f1' } } } } });

package/dist/{chunk-FUSJKUE7.mjs → chunk-CNS23UB5.mjs}

@@ -1,15 +1,17 @@
 import {
   InteractiveWrapper,
+  flatten,
+  getConfig,
+  isWeb,
+  resolve,
   useGlobalDarkMode
-} from "./chunk-IZK5HMWK.mjs";
+} from "./chunk-PYBA3DFG.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
-import { isWeb, getConfig, resolve, flatten as flatten2 } from "@kbach/core";
 
 // src/DarkWrapper.tsx
 import React from "react";
-import { flatten } from "@kbach/core";
 var DarkWrapper = React.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
@@ -31,7 +33,7 @@ function hasInteractiveBuckets(resolved) {
     return true;
   });
 }
-var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "tw", "__kbachStyles", "__kbachClasses"]);
+var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
 function omitConsumed(props) {
   const out = {};
   for (const key of Object.keys(props)) {
@@ -49,8 +51,8 @@ function makeElement(isStaticChildren, type, props, key) {
 }
 function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return _jsx(type, null, key);
-  const { className, tw: twProp, __kbachStyles, __kbachClasses } = rawProps;
-  const classStr = className ?? twProp ?? __kbachClasses;
+  const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
+  const classStr = className ?? kbProp ?? __kbachClasses;
   if (!classStr && !__kbachStyles) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
@@ -78,7 +80,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...passProps
     }, key);
   }
-  const computedStyle = flatten2(resolved, false);
+  const computedStyle = flatten(resolved, false);
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, type, {
     ...passProps,