@kbach/react 0.5.45 → 0.5.46

package/README.md

@@ -1,13 +1,10 @@
 # @kbach/react
 
-Tailwind-like utility classes for **React (web)**. Classes are resolved to inline styles at render time through a custom JSX runtime — no separate stylesheet step required. Responsive, dark mode, hover, and pseudo-element rules are injected as real CSS so they work with the full CSS cascade.
+Tailwind-like utility classes for React (web). Write classes as `className` strings — the custom JSX runtime resolves them at render time. A Vite plugin generates a static `kbach.css` file so styles ship as real CSS with zero runtime overhead in production.
 
 ```jsx
-/** @jsxImportSource @kbach/react */
-
 <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="opacity-0 group-hover:opacity-100 transition" />
 </div>
@@ -34,7 +31,24 @@ npm install @kbach/react
 }
 ```
 
-**Vite**
+Or per-file (no config change needed):
+
+```js
+/** @jsxImportSource @kbach/react */
+```
+
+**Babel (non-Vite)**
+
+```js
+// babel.config.js
+module.exports = {
+  presets: [
+    ['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }],
+  ],
+};
+```
+
+### 2. Add the Vite plugin
 
 ```ts
 // vite.config.ts
@@ -45,31 +59,32 @@ import { kbach } from '@kbach/react/vite';
 export default defineConfig({
   plugins: [
     react({ jsxImportSource: '@kbach/react' }),
-    kbach(), // generates CSS and writes it to your main CSS file
+    kbach(),
   ],
 });
 ```
 
-The `kbach()` Vite plugin scans your source files for class strings (including ternary expressions, template literals, and `clsx`/`cn` call patterns) and writes the generated CSS between `/* kbach:start */` / `/* kbach:end */` markers in your main CSS file (`src/index.css`, `app/app.css`, etc.). On HMR only the changed file is rescanned — unchanged class tokens reuse their cached CSS.
+The plugin scans your source files and writes generated CSS between `/* kbach:start */` / `/* kbach:end */` markers inside any `kbach.css` file it finds in your project. On HMR only the changed file is rescanned — unchanged tokens reuse cached CSS.
 
-**Babel**
+### 3. Create and import kbach.css
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    ['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }],
-  ],
-};
+Create `kbach.css` anywhere in your project (e.g. `src/kbach.css`):
+
+```css
+/* kbach:start */
+/* kbach:end */
 ```
 
-**Per-file pragma** (no config change required)
+Import it in your app entry:
 
-```js
-/** @jsxImportSource @kbach/react */
+```ts
+// main.tsx
+import './kbach.css';
 ```
 
-### 2. Wrap your app
+Importing `kbach.css` automatically disables runtime style injection — all styles come from the CSS file instead.
+
+### 4. Wrap your app
 
 ```jsx
 import { ThemeProvider } from '@kbach/react';
@@ -87,46 +102,74 @@ export default function Root() {
 
 ### className / kb prop
 
-Works on any HTML element or React component once the JSX runtime is configured. Both `className` and `kb` are equivalent — `kb` is shorter and avoids conflicts with library components that forward `className` to their own DOM elements.
+Works on any HTML element or React component once the JSX runtime is configured. `kb` is an alias for `className`.
 
 ```jsx
 <div className="bg-white dark:bg-gray-10 p-4 rounded-xl" />
 <p kb="text-gray-10 dark:text-white text-lg font-bold" />
 <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 `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.
+Pre-style any component. Returns a new component that merges the base classes with any `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');
-const Title = styled('h2', 'text-2xl font-bold text-gray-10 dark:text-white');
 const Button = styled(
   'button',
   'bg-blue-7 hover:bg-blue-8 dark:bg-indigo-6 rounded-xl px-6 py-3'
 );
 
-// Pass extra classes at use time
-<Card kb="mt-4 mb-2">
-  <Title kb="text-3xl">Hello</Title>
+<Card kb="mt-4">
+  <Button kb="w-full">Submit</Button>
 </Card>
 ```
 
+### cx(...classes)
+
+Conditionally join class strings. Falsy values are ignored. The Vite plugin scans `cx()` calls when building the static CSS.
+
+```jsx
+import { cx } from '@kbach/react';
+
+<div className={cx(
+  'p-4 rounded-xl',
+  isSelected && 'border-2 border-blue-6',
+  isDisabled && 'opacity-50',
+)} />
+```
+
+Pre-built style constants (also scanned by the Vite plugin):
+
+```ts
+// styles.ts
+import { cx } from '@kbach/react';
+
+export const container = cx('flex-1 bg-white dark:bg-gray-9 p-4');
+export const heading   = cx('text-2xl font-bold text-gray-10 dark:text-white');
+```
+
+```jsx
+import { container, heading } from './styles';
+
+<div className={container}>
+  <h1 className={heading}>Hello</h1>
+</div>
+```
+
 ### useStyles(classes, state?)
 
-Resolve classes to a style object inside a component. Accepts a string, an array of strings (merged left-to-right), and an optional interaction state object.
+Resolve classes to a style object inside a component.
 
 ```jsx
 import { useStyles } from '@kbach/react';
 
-// Basic
 const style = useStyles('bg-blue-6 dark:bg-indigo-6 px-3 py-1 rounded-full');
 
-// Multiple class strings merged
+// Multiple strings merged left-to-right
 const style = useStyles(['bg-white p-4', 'dark:bg-gray-9 rounded-xl']);
 
 // With interaction state
@@ -134,18 +177,9 @@ const [pressed, setPressed] = useState(false);
 const style = useStyles('bg-blue-5 pressed:bg-blue-7 rounded-lg', { pressed });
 ```
 
-### useResolvedStyle(classes)
-
-Returns the raw bucket map (`{ base, dark, hover, … }`) without flattening. Useful when you need to pass different buckets to different elements, or animate between states with `Animated`.
-
-```js
-const resolved = useResolvedStyle('bg-white dark:bg-gray-9 p-4');
-// { base: { backgroundColor: '#fff', padding: 16 }, dark: { backgroundColor: '#1f2937' } }
-```
-
 ### kb(classes)
 
-Resolve classes outside a component (static contexts, `StyleSheet.create()`, etc.).
+Resolve classes outside a component (static contexts).
 
 ```js
 import { kb } from '@kbach/react';
@@ -153,20 +187,6 @@ import { kb } from '@kbach/react';
 const cardStyle = kb('bg-white p-4 rounded-xl') as React.CSSProperties;
 ```
 
-### cx(...classes)
-
-Conditionally join class strings. Falsy values are ignored.
-
-```jsx
-import { cx } from '@kbach/react';
-
-<div className={cx(
-  'p-4 rounded-xl',
-  isSelected && 'border-2 border-blue-6',
-  isDisabled && 'opacity-50',
-)} />
-```
-
 ### useTheme()
 
 ```js
@@ -182,7 +202,7 @@ const { mode, resolvedMode, isDark, setMode, toggle, config } = useTheme();
 | `isDark` | `boolean` | Shorthand for `resolvedMode === 'dark'` |
 | `setMode` | `fn` | Set mode explicitly |
 | `toggle` | `fn` | Toggle between light and dark |
-| `config` | `ResolvedConfig` | Full resolved config (theme, darkMode, plugins) |
+| `config` | `ResolvedConfig` | Full resolved config |
 
 ### useIsDark()
 
@@ -191,37 +211,23 @@ import { useIsDark } from '@kbach/react';
 const isDark = useIsDark();
 ```
 
-### useBreakpoint() / useResponsive()
-
-```js
-import { useBreakpoint, useResponsive } from '@kbach/react';
-
-const bp = useBreakpoint(); // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-
-const { sm, md, lg } = useResponsive();
-const padding = lg ? 32 : sm ? 16 : 8;
-```
-
 ### useColors()
 
-Returns the active theme's color palette as a smart proxy. Supports shade access, `/opacity` modifier, and arbitrary CSS color manipulation. Handles 3, 4, 6, and 8-digit hex values.
+Returns the active theme's color palette as a smart proxy.
 
 ```js
 import { useColors } from '@kbach/react';
 
 const colors = useColors();
-
-colors.blue[6]           // '#3b82f6'
-colors.blue['6/50']      // 'rgba(59,130,246,0.5)'
-colors.white             // '#ffffff'
-colors['white/20']       // 'rgba(255,255,255,0.2)'
+colors.blue[6]              // '#3b82f6'
+colors.blue['6/50']         // 'rgba(59,130,246,0.5)'
+colors.white                // '#ffffff'
+colors['white/20']          // 'rgba(255,255,255,0.2)'
 colors.alpha('#ff6b35', 60) // 'rgba(255,107,53,0.6)'
 ```
 
 ### ThemeToggle
 
-Drop-in toggle component.
-
 ```jsx
 <ThemeToggle />                                // button (default)
 <ThemeToggle variant="switch" />              // toggle switch
@@ -231,66 +237,50 @@ Drop-in toggle component.
 
 ## Modifiers
 
-Modifiers are chainable with no hard cap — as many as needed in any order:
+Chain modifiers in any order before the utility name:
 
 ```jsx
-<div className="dark:sm:hover:focus:p-4" />
-<div className="dark:group-hover:not-disabled:text-blue-6" />
+<div className="dark:sm:hover:p-4" />
+<input className="focus:ring-2 focus:ring-blue-5 focus:outline-none" />
 ```
 
-### Theme & mode
+### Theme
 
 | Modifier | Trigger |
 |---|---|
-| `dark:` | Dark mode active |
-| `not-dark:` / `light:` | Light mode active |
-| `not-light:` | Dark mode active (alias) |
+| `dark:` | Dark mode |
+| `light:` / `not-dark:` | Light mode |
 
-### Interactive — JS state + CSS pseudo
+### Interactive
 
 | Modifier | Trigger |
 |---|---|
-| `hover:` / `not-hover:` | Mouse hover |
-| `focus:` / `not-focus:` | Focused |
-| `pressed:` / `not-pressed:` | Click / touch down |
-| `active:` / `not-active:` | Active state |
-| `disabled:` / `not-disabled:` | Disabled |
-| `checked:` / `not-checked:` | Checkbox / radio checked |
-| `visited:` / `not-visited:` | Visited link |
+| `hover:` | Mouse hover |
+| `focus:` | Element focused |
+| `pressed:` | Click / touch down |
+| `active:` | Active state |
+| `disabled:` | Disabled |
+| `checked:` | Checkbox / radio checked |
+| `visited:` | Visited link |
 | `placeholder:` | Placeholder text |
 
-### CSS-only pseudo-classes (structural)
+Negated: `not-hover:`, `not-focus:`, `not-pressed:`, `not-active:`, `not-disabled:`, `not-checked:`
 
-| Modifier | CSS |
-|---|---|
-| `first:` | `:first-child` |
-| `last:` | `:last-child` |
-| `odd:` | `:nth-child(odd)` |
-| `even:` | `:nth-child(even)` |
-| `only:` | `:only-child` |
-| `focus-within:` | `:focus-within` |
-| `focus-visible:` | `:focus-visible` |
+### Structural
+
+`first:` `last:` `odd:` `even:` `only:` `focus-within:` `focus-visible:`
 
 ### Pseudo-elements
 
+`before:` `after:` `selection:` `first-letter:` `first-line:` `marker:` `placeholder:`
+
 ```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" />
+<input className="placeholder:text-gray-5" />
 ```
 
-| Modifier | CSS |
-|---|---|
-| `before:` | `::before` |
-| `after:` | `::after` |
-| `selection:` | `::selection` |
-| `first-letter:` | `::first-letter` |
-| `first-line:` | `::first-line` |
-| `marker:` | `::marker` |
-| `placeholder:` | `::placeholder` |
-
-### Group / peer ancestor selectors
+### Group / peer
 
 ```jsx
 <div className="group">
@@ -300,13 +290,6 @@ Modifiers are chainable with no hard cap — as many as needed in any order:
 <p className="peer-focus:text-blue-6" />
 ```
 
-| 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 |
-
 ### Responsive
 
 | Modifier | Min-width |
@@ -317,92 +300,48 @@ Modifiers are chainable with no hard cap — as many as needed in any order:
 | `xl:` | 1280 px |
 | `2xl:` | 1536 px |
 
-### Print
-
-```jsx
-<div className="print:hidden" />
-<div className="print:text-black print:bg-white" />
-```
-
-### Orientation & accessibility media
+### Other
 
-| Modifier | Media query |
+| Modifier | Effect |
 |---|---|
-| `landscape:` | `(orientation: landscape)` |
-| `portrait:` | `(orientation: portrait)` |
-| `motion-reduce:` | `(prefers-reduced-motion: reduce)` |
-| `motion-safe:` | `(prefers-reduced-motion: no-preference)` |
-| `contrast-more:` | `(prefers-contrast: more)` |
-| `contrast-less:` | `(prefers-contrast: less)` |
-
-### Directionality
-
-```jsx
-<div className="rtl:text-right ltr:text-left" />
-```
-
-### Important
-
-Prefix any class with `!` to add `!important` to every declaration it produces:
-
-```jsx
-<div className="!p-0 !m-0" />
-```
+| `print:hidden` | Visible only on screen |
+| `landscape:` `portrait:` | Orientation |
+| `motion-reduce:` `motion-safe:` | Reduced-motion preference |
+| `contrast-more:` `contrast-less:` | Contrast preference |
+| `rtl:` `ltr:` | Text direction |
+| `!p-0` | `!important` on every declaration |
 
 ## Arbitrary values
 
 ```jsx
 <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)]" />
+<div className="text-[18px]" />
 ```
 
-## Color with opacity
+## Color system
 
-```jsx
-<div className="bg-blue-6/50" />   // 50% opacity
-<div className="bg-gray-10/75" />  // 75% opacity
-```
+12-shade scale — 1 lightest, 12 darkest. Use as `bg-blue-6`, `text-gray-10`, `border-red-4/50`.
 
-## Color scale
+Families: `slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose`  
+Special: `transparent` `current` `black` `white`
 
-Colors use a 12-shade scale — 1 is lightest, 12 is darkest.
+Opacity modifier: `bg-blue-6/50` (50% alpha), `bg-blue-6/[0.15]` (arbitrary)
 
-```
-shade 1  ·  2  ·  3  ·  4  ·  5  ·  6  ·  7  ·  8  ·  9  ·  10  ·  11  ·  12
-light ──────────────────────────────────────────────────────────────── dark
-```
+## CSS resets
 
-Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
+Included automatically in `kbach.css` and in runtime injection:
 
-## 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`, `font-sans` |
-| 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 | `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` |
+- `*, *::before, *::after { box-sizing: border-box }`
+- `body { margin: 0; padding: 0 }`
+- `h1–h6` — margin, font-size, font-weight cleared (inherit from parent)
+- `p`, `ul`, `ol` — margin and list style cleared
+- `a` — color and underline cleared (inherit from parent)
+- `img`, `video`, `svg` — `display: block; max-width: 100%`
+- `input`, `textarea`, `select`, `button`, `fieldset` — appearance, border, padding cleared
+- `table` — `border-collapse: collapse`
 
 ## Configuration
 
@@ -412,108 +351,56 @@ module.exports = {
   darkMode: 'attribute', // 'attribute' | 'class' | 'media'
 
   theme: {
-    // Replace a theme section entirely
-    colors: {
-      brand: { 1: '#eff6ff', 6: '#3b82f6', 10: '#1e3a5f' },
-    },
+    // Replace a section entirely
+    colors: { brand: { 1: '#eff6ff', 6: '#3b82f6', 10: '#1e3a5f' } },
   },
 
   extend: {
-    // Add to defaults without replacing them
+    // Add to defaults
     colors: { brand: { 6: '#6366f1' } },
     spacing: { 18: '72px' },
     screens: { '3xl': '1920px' },
+    fontFamily: {
+      sans:        'Inter, sans-serif',
+      'sans-bold': 'Inter_700Bold, sans-serif',
+    },
   },
 
   plugins: [
     ({ addUtility, addVariant, theme }) => {
-      // Custom utility
       addUtility('border-brand', {
         borderColor: theme('colors.brand.6'),
         borderWidth: 2,
       });
-
-      // Custom variant — selector string (auto-converted to CSS rules)
       addVariant('hocus', ':hover, :focus');
-      addVariant('supports-grid', '@media (display: grid)');
-      addVariant('dark-theme', '.dark-theme');
-
-      // Custom variant — full ModifierDef for JS-tracked interactive states
-      addVariant('long-press', {
-        pseudo: ':active',
-        jsBehavior: 'interactive',
-        jsMatch: (_, state) => !!state.longPressed,
-      });
     },
   ],
 };
 ```
 
-### Color aliases
+Setting `fontFamily.sans` to anything other than `'System'` auto-injects `body { font-family: … }`.
 
-Color values can reference other palette entries — chains up to 5 levels deep are resolved:
+Color aliases:
 
 ```js
 extend: {
   colors: {
-    primary: 'blue-6',          // → resolved hex of blue shade 6
-    brand: { 6: 'primary' },    // → follows through to blue-6's hex
+    primary: 'blue-6',       // resolves to blue shade 6's hex
+    brand: { 6: 'primary' }, // follows through to blue-6's hex
   },
 },
 ```
 
-### Font Family
-
-```js
-// kbach.config.js
-module.exports = {
-  extend: {
-    fontFamily: {
-      sans:        'Inter_400Regular',
-      'sans-md':   'Inter_500Medium',
-      'sans-bold': 'Inter_700Bold',
-    },
-  },
-};
-```
-
-Use as utilities:
-
-```jsx
-<p className="font-sans">Regular</p>
-<p className="font-sans-md">Medium</p>
-<p className="font-sans-bold">Bold</p>
-```
-
-**Global default font (web):** When `fontFamily.sans` is set to anything other than `'System'`, Kbach automatically injects `body { font-family: <your-font> }` — all text inherits it without `font-sans` on every element.
-
-Apply at runtime (e.g. from a server-side user preference):
+Runtime update:
 
 ```js
-import { updateConfig } from '@kbach/react';
-
+import { updateConfig, clearCache } from '@kbach/react';
 updateConfig({ extend: { colors: { brand: { 6: '#6366f1' } } } });
-```
-
-## Custom responsive breakpoints
-
-Add breakpoints in `extend.screens` — they automatically register as new modifier names:
-
-```js
-// kbach.config.js
-module.exports = {
-  extend: {
-    screens: { '3xl': '1920px' },
-  },
-};
-```
-
-```jsx
-<div className="3xl:max-w-screen-3xl 3xl:mx-auto" />
+clearCache();
 ```
 
 ## Full reference
 
-See [kbach-react.md](./kbach-react.md) for the complete utility reference, all modifiers, configuration options, and common patterns.
+See [kbach-react.md](./kbach-react.md) for the complete utility reference, all modifier tables, and configuration options.
 
-For React Native / Expo, see the [`@kbach/native`](https://www.npmjs.com/package/@kbach/native) package.
+For React Native / Expo, see [`@kbach/native`](https://www.npmjs.com/package/@kbach/native).

package/dist/{chunk-52N32L7A.mjs → chunk-G76344ZQ.mjs}

@@ -2433,6 +2433,21 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/reset.ts
+var BASE_RESET = [
+  "*, *::before, *::after { box-sizing: border-box; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "fieldset { border: 0; padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/cache.ts
 var LRUCache = class {
   constructor(capacity = 1e4) {
@@ -2582,7 +2597,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [];
+  const rules = [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -3023,6 +3038,7 @@ export {
   splitClassTokens,
   normalizeClassString,
   parseClasses,
+  BASE_RESET,
   syncGlobalWidth,
   syncGlobalScreens,
   setGlobalWidth,

package/dist/{chunk-BBI6IU22.mjs → chunk-ISCQQRG5.mjs}

@@ -6,7 +6,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-52N32L7A.mjs";
+} from "./chunk-G76344ZQ.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";

package/dist/{chunk-MIBPTKXT.mjs → chunk-ZN5E7I56.mjs}

@@ -4,7 +4,7 @@ import {
   hasResponsiveBuckets,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-BBI6IU22.mjs";
+} from "./chunk-ISCQQRG5.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -17,7 +17,7 @@ import {
   isRuntimeCSSDisabled,
   normalizeClassString,
   resolve
-} from "./chunk-52N32L7A.mjs";
+} from "./chunk-G76344ZQ.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.js

@@ -2604,6 +2604,21 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/reset.ts
+var BASE_RESET = [
+  "*, *::before, *::after { box-sizing: border-box; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "fieldset { border: 0; padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2713,7 +2728,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [];
+  const rules = [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-BBI6IU22.mjs";
+} from "./chunk-ISCQQRG5.mjs";
 import {
   __require,
   buildConfig,
@@ -29,7 +29,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-52N32L7A.mjs";
+} from "./chunk-G76344ZQ.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -2504,6 +2504,21 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/reset.ts
+var BASE_RESET = [
+  "*, *::before, *::after { box-sizing: border-box; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "fieldset { border: 0; padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2598,7 +2613,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [];
+  const rules = [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-MIBPTKXT.mjs";
-import "./chunk-BBI6IU22.mjs";
-import "./chunk-52N32L7A.mjs";
+} from "./chunk-ZN5E7I56.mjs";
+import "./chunk-ISCQQRG5.mjs";
+import "./chunk-G76344ZQ.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -2504,6 +2504,21 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/reset.ts
+var BASE_RESET = [
+  "*, *::before, *::after { box-sizing: border-box; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "fieldset { border: 0; padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2598,7 +2613,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [];
+  const rules = [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;

package/dist/jsx-runtime.mjs

@@ -3,9 +3,9 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-MIBPTKXT.mjs";
-import "./chunk-BBI6IU22.mjs";
-import "./chunk-52N32L7A.mjs";
+} from "./chunk-ZN5E7I56.mjs";
+import "./chunk-ISCQQRG5.mjs";
+import "./chunk-G76344ZQ.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -47,6 +47,21 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
+// src/core/reset.ts
+var BASE_RESET = [
+  "*, *::before, *::after { box-sizing: border-box; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "fieldset { border: 0; padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/theme.ts
 var defaultColors = {
   transparent: "transparent",
@@ -2492,7 +2507,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [];
+  const rules = [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -2893,10 +2908,13 @@ ${globalCSS}`);
   return out.join("\n");
 }
 function buildThemeGlobal(theme) {
+  const lines = [BASE_RESET];
   const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
+  if (ff?.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    lines.push(`body { font-family: ${family}; }`);
+  }
+  return lines.join("\n");
 }
 var SKIP_DIRS = /* @__PURE__ */ new Set([
   "node_modules",
@@ -3014,7 +3032,9 @@ function scanDir(dir, onFile) {
   try {
     entries = (0, import_fs.readdirSync)(dir);
   } catch (err) {
-    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    if (err.code !== "ENOENT") {
+      console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    }
     return;
   }
   for (const entry of entries) {

package/dist/vite-plugin.mjs

@@ -1,9 +1,10 @@
 import {
+  BASE_RESET,
   buildConfig,
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-52N32L7A.mjs";
+} from "./chunk-G76344ZQ.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
@@ -87,10 +88,13 @@ ${globalCSS}`);
   return out.join("\n");
 }
 function buildThemeGlobal(theme) {
+  const lines = [BASE_RESET];
   const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
+  if (ff?.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    lines.push(`body { font-family: ${family}; }`);
+  }
+  return lines.join("\n");
 }
 var SKIP_DIRS = /* @__PURE__ */ new Set([
   "node_modules",
@@ -208,7 +212,9 @@ function scanDir(dir, onFile) {
   try {
     entries = readdirSync(dir);
   } catch (err) {
-    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    if (err.code !== "ENOENT") {
+      console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    }
     return;
   }
   for (const entry of entries) {

package/package.json

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