@kbach/react 0.5.5 → 0.5.7

package/README.md

@@ -329,7 +329,7 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 | Category | Examples |
 |---|---|
 | Background | `bg-white`, `bg-gray-10`, `bg-blue-6`, `bg-[#fff]` |
-| Text | `text-sm`, `text-2xl`, `text-gray-10`, `font-bold` |
+| 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` |
@@ -389,3 +389,44 @@ import { updateConfig } from '@kbach/react';
 
 updateConfig({ extend: { theme: { colors: { brand: { 6: '#6366f1' } } } } });
 ```
+
+### Font Family
+
+Define custom font families and use them with `font-<name>`:
+
+```js
+// kbach.config.js
+module.exports = {
+  extend: {
+    fontFamily: {
+      // shorthand: extend.fontFamily is equivalent to extend.theme.fontFamily
+      sans:        'CormorantGaramond_400Regular',
+      'sans-md':   'CormorantGaramond_500Medium',
+      'sans-semi': 'CormorantGaramond_600SemiBold',
+      'sans-bold': 'CormorantGaramond_700Bold',
+    },
+  },
+};
+```
+
+Use them as utilities:
+
+```jsx
+<Text className="font-sans">Regular</Text>
+<Text className="font-sans-md">Medium</Text>
+<Text className="font-sans-bold">Bold</Text>
+```
+
+**Global default font (web only):** When you set `fontFamily.sans` to anything other than `'System'`, Kbach automatically injects `body { font-family: <your-font> }` into the page — all text inherits it without needing `font-sans` on every element.
+
+**React Native:** CSS inheritance does not exist in RN. Apply `font-sans` (or your base font utility) to each `Text` component, or use `styled()` to create a pre-styled text component:
+
+```jsx
+// Define once
+const Body = styled(Text, 'font-sans');
+const Heading = styled(Text, 'font-sans-bold text-2xl');
+
+// Use everywhere
+<Body>Regular text</Body>
+<Heading>Title</Heading>
+```

package/dist/{chunk-UR4DTYE3.mjs → chunk-3SF5YHWG.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-D7Q7ZCOW.mjs";
+} from "./chunk-YLT5TFLD.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/{chunk-D7Q7ZCOW.mjs → chunk-YLT5TFLD.mjs}

@@ -3005,6 +3005,24 @@ function injectRule(rule) {
   } catch {
   }
 }
+var _globalStyleEl = null;
+function getGlobalStyleEl() {
+  if (_globalStyleEl) return _globalStyleEl;
+  _globalStyleEl = document.createElement("style");
+  _globalStyleEl.setAttribute("data-kbach-global", "");
+  document.head.insertBefore(_globalStyleEl, getStyleEl());
+  return _globalStyleEl;
+}
+function injectGlobalStyles(theme) {
+  if (typeof document === "undefined") return;
+  const rules = [];
+  const ff = theme.fontFamily;
+  if (ff.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    rules.push(`body { font-family: ${family}; }`);
+  }
+  getGlobalStyleEl().textContent = rules.join("\n");
+}
 var MODIFIER_TO_PSEUDO = {
   hover: ":hover",
   focus: ":focus",
@@ -3384,16 +3402,21 @@ function buildConfig(userConfig) {
   if (userConfig.theme) {
     theme = deepMerge(theme, userConfig.theme);
   }
-  if (userConfig.extend?.theme) {
-    const ext = userConfig.extend.theme;
-    for (const [key, value] of Object.entries(ext)) {
-      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-        theme[key] = deepMerge(
-          theme[key] ?? {},
-          value
-        );
-      } else {
-        theme[key] = value;
+  if (userConfig.extend) {
+    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extSources = [];
+    if (nestedTheme) extSources.push(nestedTheme);
+    if (Object.keys(directKeys).length) extSources.push(directKeys);
+    for (const ext of extSources) {
+      for (const [key, value] of Object.entries(ext)) {
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        } else if (value !== void 0) {
+          theme[key] = value;
+        }
       }
     }
   }
@@ -3409,6 +3432,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
+  injectGlobalStyles(resolved.theme);
   return resolved;
 }
 function makePluginAPI(theme) {

package/dist/index.d.mts

@@ -57,9 +57,10 @@ interface PluginAPI {
 interface FrameworkConfig {
     darkMode?: DarkMode;
     theme?: Partial<ThemeConfig>;
+    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
     extend?: {
         theme?: Partial<ThemeConfig>;
-    };
+    } & Partial<ThemeConfig>;
     plugins?: Array<(api: PluginAPI) => void>;
     content?: string[];
 }

package/dist/index.d.ts

@@ -57,9 +57,10 @@ interface PluginAPI {
 interface FrameworkConfig {
     darkMode?: DarkMode;
     theme?: Partial<ThemeConfig>;
+    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
     extend?: {
         theme?: Partial<ThemeConfig>;
-    };
+    } & Partial<ThemeConfig>;
     plugins?: Array<(api: PluginAPI) => void>;
     content?: string[];
 }

package/dist/index.js

@@ -3135,6 +3135,24 @@ function injectRule(rule) {
   } catch {
   }
 }
+var _globalStyleEl = null;
+function getGlobalStyleEl() {
+  if (_globalStyleEl) return _globalStyleEl;
+  _globalStyleEl = document.createElement("style");
+  _globalStyleEl.setAttribute("data-kbach-global", "");
+  document.head.insertBefore(_globalStyleEl, getStyleEl());
+  return _globalStyleEl;
+}
+function injectGlobalStyles(theme) {
+  if (typeof document === "undefined") return;
+  const rules = [];
+  const ff = theme.fontFamily;
+  if (ff.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    rules.push(`body { font-family: ${family}; }`);
+  }
+  getGlobalStyleEl().textContent = rules.join("\n");
+}
 var MODIFIER_TO_PSEUDO = {
   hover: ":hover",
   focus: ":focus",
@@ -3514,16 +3532,21 @@ function buildConfig(userConfig) {
   if (userConfig.theme) {
     theme = deepMerge(theme, userConfig.theme);
   }
-  if (userConfig.extend?.theme) {
-    const ext = userConfig.extend.theme;
-    for (const [key, value] of Object.entries(ext)) {
-      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-        theme[key] = deepMerge(
-          theme[key] ?? {},
-          value
-        );
-      } else {
-        theme[key] = value;
+  if (userConfig.extend) {
+    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extSources = [];
+    if (nestedTheme) extSources.push(nestedTheme);
+    if (Object.keys(directKeys).length) extSources.push(directKeys);
+    for (const ext of extSources) {
+      for (const [key, value] of Object.entries(ext)) {
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        } else if (value !== void 0) {
+          theme[key] = value;
+        }
       }
     }
   }
@@ -3539,6 +3562,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
+  injectGlobalStyles(resolved.theme);
   return resolved;
 }
 function makePluginAPI(theme) {

package/dist/index.mjs

@@ -23,7 +23,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-D7Q7ZCOW.mjs";
+} from "./chunk-YLT5TFLD.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -3026,6 +3026,24 @@ function injectRule(rule) {
   } catch {
   }
 }
+var _globalStyleEl = null;
+function getGlobalStyleEl() {
+  if (_globalStyleEl) return _globalStyleEl;
+  _globalStyleEl = document.createElement("style");
+  _globalStyleEl.setAttribute("data-kbach-global", "");
+  document.head.insertBefore(_globalStyleEl, getStyleEl());
+  return _globalStyleEl;
+}
+function injectGlobalStyles(theme) {
+  if (typeof document === "undefined") return;
+  const rules = [];
+  const ff = theme.fontFamily;
+  if (ff.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    rules.push(`body { font-family: ${family}; }`);
+  }
+  getGlobalStyleEl().textContent = rules.join("\n");
+}
 var MODIFIER_TO_PSEUDO = {
   hover: ":hover",
   focus: ":focus",
@@ -3397,16 +3415,21 @@ function buildConfig(userConfig) {
   if (userConfig.theme) {
     theme = deepMerge(theme, userConfig.theme);
   }
-  if (userConfig.extend?.theme) {
-    const ext = userConfig.extend.theme;
-    for (const [key, value] of Object.entries(ext)) {
-      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-        theme[key] = deepMerge(
-          theme[key] ?? {},
-          value
-        );
-      } else {
-        theme[key] = value;
+  if (userConfig.extend) {
+    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extSources = [];
+    if (nestedTheme) extSources.push(nestedTheme);
+    if (Object.keys(directKeys).length) extSources.push(directKeys);
+    for (const ext of extSources) {
+      for (const [key, value] of Object.entries(ext)) {
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        } else if (value !== void 0) {
+          theme[key] = value;
+        }
       }
     }
   }
@@ -3422,6 +3445,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
+  injectGlobalStyles(resolved.theme);
   return resolved;
 }
 function makePluginAPI(theme) {

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-UR4DTYE3.mjs";
-import "./chunk-D7Q7ZCOW.mjs";
+} from "./chunk-3SF5YHWG.mjs";
+import "./chunk-YLT5TFLD.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -3025,6 +3025,24 @@ function injectRule(rule) {
   } catch {
   }
 }
+var _globalStyleEl = null;
+function getGlobalStyleEl() {
+  if (_globalStyleEl) return _globalStyleEl;
+  _globalStyleEl = document.createElement("style");
+  _globalStyleEl.setAttribute("data-kbach-global", "");
+  document.head.insertBefore(_globalStyleEl, getStyleEl());
+  return _globalStyleEl;
+}
+function injectGlobalStyles(theme) {
+  if (typeof document === "undefined") return;
+  const rules = [];
+  const ff = theme.fontFamily;
+  if (ff.sans && ff.sans !== "System") {
+    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+    rules.push(`body { font-family: ${family}; }`);
+  }
+  getGlobalStyleEl().textContent = rules.join("\n");
+}
 var MODIFIER_TO_PSEUDO = {
   hover: ":hover",
   focus: ":focus",
@@ -3396,16 +3414,21 @@ function buildConfig(userConfig) {
   if (userConfig.theme) {
     theme = deepMerge(theme, userConfig.theme);
   }
-  if (userConfig.extend?.theme) {
-    const ext = userConfig.extend.theme;
-    for (const [key, value] of Object.entries(ext)) {
-      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-        theme[key] = deepMerge(
-          theme[key] ?? {},
-          value
-        );
-      } else {
-        theme[key] = value;
+  if (userConfig.extend) {
+    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extSources = [];
+    if (nestedTheme) extSources.push(nestedTheme);
+    if (Object.keys(directKeys).length) extSources.push(directKeys);
+    for (const ext of extSources) {
+      for (const [key, value] of Object.entries(ext)) {
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        } else if (value !== void 0) {
+          theme[key] = value;
+        }
       }
     }
   }
@@ -3421,6 +3444,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
+  injectGlobalStyles(resolved.theme);
   return resolved;
 }
 function makePluginAPI(theme) {

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-UR4DTYE3.mjs";
-import "./chunk-D7Q7ZCOW.mjs";
+} from "./chunk-3SF5YHWG.mjs";
+import "./chunk-YLT5TFLD.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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