@kbach/react 0.4.2 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @kbach/react
 
-Tailwind-like utility classes for **React (web)**. Classes are converted to inline styles at render time through a custom JSX runtime — no stylesheet required.
+Tailwind-like utility classes for **React (web)**. Classes are converted to inline styles at render time through a custom JSX runtime — no stylesheet required. Responsive, dark mode, hover, and pseudo-element rules are injected as real CSS so they work with pure CSS cascading.
 
 ```jsx
 /** @jsxImportSource @kbach/react */
@@ -8,6 +8,9 @@ Tailwind-like utility classes for **React (web)**. Classes are converted to inli
 <div className="bg-white dark:bg-gray-10 p-4 rounded-xl shadow" />
 <div className="bg-blue-7 hover:bg-blue-8 dark:bg-indigo-6 rounded-lg px-6 py-3" />
 <div className="bg-[#6366f1] p-[14px] rounded-[20px]" />
+<div className="group">
+  <span className="group-hover:text-blue-6 transition" />
+</div>
 ```
 
 ## Install
@@ -83,12 +86,13 @@ 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" />
+<button className="bg-blue-7 hover:bg-blue-8 pressed:bg-blue-9 rounded-lg px-4 py-2" />
+<input className="caret-blue-6 focus:ring-2" />
 ```
 
 ### styled(Component, classes)
 
-Pre-style any component. Returns a new component that merges the base classes with any `className` or `kb` prop passed at use time.
+Pre-style any component. Returns a new component that merges the base classes with any `kb` prop passed at use time. On web, the class string is forwarded as `className` so CSS rules (group-hover:, before:, print:, etc.) match the element.
 
 ```jsx
 import { styled } from '@kbach/react';
@@ -121,7 +125,7 @@ function Badge() {
 
 ### kb(classes)
 
-Resolve classes outside a component (static contexts, StyleSheet.create, etc.).
+Resolve classes outside a component (static contexts, etc.).
 
 ```js
 import { kb } from '@kbach/react';
@@ -179,29 +183,13 @@ import { useColors } from '@kbach/react';
 
 const colors = useColors();
 
-// Shade access
 colors.blue[6]           // '#6c87b6'
-colors.red[11]           // '#3e0606'
-
-// Shade + opacity (0–100)
 colors.blue['6/50']      // 'rgba(108,135,182,0.5)'
-colors.slate['3/10']     // 'rgba(221,227,242,0.1)'
-
-// Flat colors
 colors.white             // '#ffffff'
-colors.transparent       // 'transparent'
-
-// Flat color + opacity
 colors['white/20']       // 'rgba(255,255,255,0.2)'
-colors['black/80']       // 'rgba(0,0,0,0.8)'
-
-// Arbitrary CSS color with opacity
-colors.alpha('#ff6b35', 60)           // 'rgba(255,107,53,0.6)'
-colors.alpha('rgb(100,200,100)', 30)  // 'rgba(100,200,100,0.3)'
+colors.alpha('#ff6b35', 60) // 'rgba(255,107,53,0.6)'
 ```
 
-Common uses: chart libraries that need raw hex values, dynamic inline styles, color pickers that mirror the theme palette.
-
 ### ThemeToggle
 
 Drop-in toggle component.
@@ -217,19 +205,95 @@ Drop-in toggle component.
 
 Up to 3 modifiers can be chained in any order.
 
+### Theme & interaction
+
 | 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 |
+| `pressed:` | Click / touch |
+| `focus:` | Focused |
+| `active:` | Active state |
+| `disabled:` | Disabled |
+| `checked:` | Checked (checkbox/radio) |
+| `visited:` | Visited link |
+| `focus-within:` | Focus inside element |
+| `focus-visible:` | Keyboard focus ring |
+
+Negated forms: `not-hover:`, `not-focus:`, `not-active:`, `not-pressed:`, `not-disabled:`, `not-checked:`, `not-visited:`
+
+### Structural
+
+| Modifier | Matches |
+|---|---|
+| `first:` | `:first-child` |
+| `last:` | `:last-child` |
+| `odd:` | `:nth-child(odd)` |
+| `even:` | `:nth-child(even)` |
+| `only:` | `:only-child` |
+
+### Responsive
+
+| Modifier | Min-width |
+|---|---|
+| `sm:` | 640 px |
+| `md:` | 768 px |
+| `lg:` | 1024 px |
+| `xl:` | 1280 px |
+| `2xl:` | 1536 px |
+
+### Group / peer
+
+Mark an ancestor with `group` or `peer`, then style descendants with the modifier:
+
+```jsx
+<div className="group">
+  <span className="opacity-0 group-hover:opacity-100 transition" />
+</div>
+```
+
+| Modifier | Fires when |
+|---|---|
+| `group-hover:` | Ancestor `.group` is hovered |
+| `group-focus:` | Ancestor `.group` is focused |
+| `peer-hover:` | Previous sibling `.peer` is hovered |
+| `peer-focus:` | Previous sibling `.peer` is focused |
+
+### Pseudo-elements
+
+Inject content or style structural parts of an element with real CSS:
+
+```jsx
+<div className="before:content-['*'] before:text-red-6 relative" />
+<p className="first-letter:text-4xl first-letter:font-bold" />
+<input className="placeholder:text-gray-5" />
+<p className="selection:bg-blue-3" />
+```
+
+| Modifier | CSS |
+|---|---|
+| `before:` | `::before` |
+| `after:` | `::after` |
+| `selection:` | `::selection` |
+| `first-letter:` | `::first-letter` |
+| `first-line:` | `::first-line` |
+| `marker:` | `::marker` |
+| `placeholder:` | `::placeholder` |
+
+### Print
+
+```jsx
+<div className="print:hidden" />
+<div className="print:text-black print:bg-white" />
+```
+
+### Important modifier
+
+Prefix any class with `!` to add `!important` to every CSS declaration it produces:
 
 ```jsx
-<div className="dark:hover:bg-gray-9" />
-<button className="dark:pressed:bg-indigo-8" />
+<div className="!p-0 !m-0" />
 ```
 
 ## Arbitrary values
@@ -238,6 +302,7 @@ Up to 3 modifiers can be chained in any order.
 <div className="bg-[#6366f1]" />
 <div className="p-[14px]" />
 <div className="text-[18px]" />
+<div className="w-[calc(100%-2rem)]" />
 <div className="bg-[rgba(99,102,241,0.15)]" />
 ```
 
@@ -265,13 +330,26 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 |---|---|
 | Background | `bg-white`, `bg-gray-10`, `bg-blue-6`, `bg-[#fff]` |
 | Text | `text-sm`, `text-2xl`, `text-gray-10`, `font-bold` |
+| Text wrap | `text-balance`, `text-pretty`, `text-nowrap`, `text-wrap` |
+| Line clamp | `line-clamp-3`, `line-clamp-none` |
 | Padding | `p-4`, `px-6`, `py-3` |
 | Margin | `m-4`, `mx-auto`, `mt-2`, `-mt-4` |
-| Size | `w-full`, `h-12`, `w-[200px]` |
+| Size | `size-12`, `w-full`, `h-screen`, `w-screen`, `w-[200px]` |
 | Flex | `flex-1`, `flex-row`, `items-center`, `justify-between`, `gap-4` |
+| Grid | `grid-3`, `col-span-2`, `grid-flow-col` |
 | Border | `border`, `border-2`, `border-gray-4`, `rounded-xl` |
 | Shadow | `shadow`, `shadow-md`, `shadow-lg` |
 | Opacity | `opacity-50`, `opacity-75` |
+| Overflow | `overflow-hidden`, `overflow-clip`, `overflow-x-auto` |
+| Cursor | `cursor-pointer`, `cursor-grab`, `cursor-zoom-in` |
+| Scroll | `scroll-smooth`, `scroll-auto` |
+| Float / clear | `float-left`, `float-right`, `clear-both` |
+| Vertical align | `align-middle`, `align-top`, `align-baseline` |
+| Touch action | `touch-none`, `touch-pan-x`, `touch-manipulation` |
+| Caret | `caret-blue-6`, `caret-transparent` |
+| Accent | `accent-blue-6`, `accent-auto` |
+| Animation | `animate-spin`, `animate-pulse`, `animate-bounce`, `animate-ping` |
+| Transition | `transition`, `duration-300`, `delay-150` |
 
 ## Configuration
 

package/dist/{chunk-JFQ7QYQM.mjs → chunk-2BRVUJPY.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-HY6PU2XS.mjs";
+} from "./chunk-LTYLJ4B3.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -32,6 +32,7 @@ var DarkWrapper = React.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
+    stripInternalMarkers(computedStyle);
     if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
@@ -39,6 +40,13 @@ var DarkWrapper = React.forwardRef(
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
+function stripInternalMarkers(s) {
+  delete s.__divideX;
+  delete s.__divideY;
+  delete s.__divideColor;
+  delete s.__divideStyle;
+  delete s.__keyframe;
+}
 function stripWebOnlyProps(s) {
   if (s.display === "grid" || s.display === "inline-grid") delete s.display;
   delete s.gridTemplateColumns;
@@ -46,9 +54,18 @@ function stripWebOnlyProps(s) {
   delete s.gridColumn;
   delete s.gridRow;
   delete s.gridArea;
+  delete s.gridColumnStart;
+  delete s.gridColumnEnd;
+  delete s.gridRowStart;
+  delete s.gridRowEnd;
   delete s.gridAutoFlow;
   delete s.gridAutoColumns;
   delete s.gridAutoRows;
+  delete s.placeItems;
+  delete s.placeContent;
+  delete s.justifyItems;
+  delete s.placeSelf;
+  delete s.justifySelf;
   if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
     delete s.position;
   }
@@ -122,6 +139,57 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
+function hasGridStyles(resolved) {
+  for (const styles of Object.values(resolved)) {
+    if (!styles) continue;
+    if (styles.display === "grid" || styles.display === "inline-grid") return true;
+    if ("gridTemplateColumns" in styles || "gridTemplateRows" in styles) return true;
+    if ("gridColumn" in styles || "gridRow" in styles) return true;
+    if ("gridColumnStart" in styles || "gridColumnEnd" in styles) return true;
+    if ("gridRowStart" in styles || "gridRowEnd" in styles) return true;
+    if ("gridAutoFlow" in styles || "gridAutoColumns" in styles || "gridAutoRows" in styles) return true;
+    if ("placeItems" in styles || "placeContent" in styles || "justifyItems" in styles) return true;
+    if ("placeSelf" in styles || "justifySelf" in styles) return true;
+  }
+  return false;
+}
+function hasWebPositionStyles(resolved) {
+  for (const styles of Object.values(resolved)) {
+    if (!styles) continue;
+    if (styles.position === "sticky" || styles.position === "fixed" || styles.position === "static") return true;
+  }
+  return false;
+}
+function stripInternalMarkers2(s) {
+  delete s.__divideX;
+  delete s.__divideY;
+  delete s.__divideColor;
+  delete s.__divideStyle;
+  delete s.__keyframe;
+}
+function stripWebOnlyInlineProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridColumnStart;
+  delete s.gridColumnEnd;
+  delete s.gridRowStart;
+  delete s.gridRowEnd;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+  delete s.placeItems;
+  delete s.placeContent;
+  delete s.justifyItems;
+  delete s.placeSelf;
+  delete s.justifySelf;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
+}
 function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return _jsx(type, null, key);
   const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
@@ -130,13 +198,12 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  const isOnWeb = typeof document !== "undefined" && classStr != null;
-  const isGrdOnWeb = isOnWeb && /(?:^|\s)grd(?:\s|$)/.test(classStr);
-  const hasWebPosition = isOnWeb && /(?:^|\s)(?:[\w-]+:)*(?:fixed|sticky)(?:\s|$)/.test(classStr);
-  const actualType = isGrdOnWeb || hasWebPosition ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
+  const onWeb = typeof document !== "undefined";
+  const needsDiv = onWeb && (hasGridStyles(resolved) || hasWebPositionStyles(resolved));
+  const actualType = needsDiv ? "div" : type;
   if (interactive) {
     return _jsx(InteractiveWrapper, {
       Component: actualType,
@@ -156,20 +223,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
-  if (typeof actualType !== "string") {
-    if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
-    delete computedStyle.gridTemplateColumns;
-    delete computedStyle.gridTemplateRows;
-    delete computedStyle.gridColumn;
-    delete computedStyle.gridRow;
-    delete computedStyle.gridArea;
-    delete computedStyle.gridAutoFlow;
-    delete computedStyle.gridAutoColumns;
-    delete computedStyle.gridAutoRows;
-    if (computedStyle.position === "sticky" || computedStyle.position === "fixed" || computedStyle.position === "static") {
-      delete computedStyle.position;
-    }
-  }
+  stripInternalMarkers2(computedStyle);
+  if (typeof actualType !== "string") stripWebOnlyInlineProps(computedStyle);
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, actualType, {
     ...passProps,