@kbach/react 0.1.0

package/dist/jsx-runtime.d.mts

@@ -0,0 +1,17 @@
+export { Fragment } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+/**
+ * @kbach/react/jsx-runtime
+ *
+ * Drop-in replacement for react/jsx-runtime.
+ * Intercepts `className` and `tw` props on EVERY JSX element — React Native
+ * built-ins, HTML elements on web, and any third-party library component.
+ */
+
+/** jsx() — elements with 0–1 child or dynamic key. */
+declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
+/** jsxs() — elements with 2+ static children. Children array is compile-time stable. */
+declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
+
+export { jsx, jsxs };

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,17 @@
+export { Fragment } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+/**
+ * @kbach/react/jsx-runtime
+ *
+ * Drop-in replacement for react/jsx-runtime.
+ * Intercepts `className` and `tw` props on EVERY JSX element — React Native
+ * built-ins, HTML elements on web, and any third-party library component.
+ */
+
+/** jsx() — elements with 0–1 child or dynamic key. */
+declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
+/** jsxs() — elements with 2+ static children. Children array is compile-time stable. */
+declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
+
+export { jsx, jsxs };

package/dist/jsx-runtime.js

@@ -0,0 +1,206 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/jsx-runtime.tsx
+var jsx_runtime_exports = {};
+__export(jsx_runtime_exports, {
+  Fragment: () => import_jsx_runtime.Fragment,
+  jsx: () => jsx,
+  jsxs: () => jsxs
+});
+module.exports = __toCommonJS(jsx_runtime_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core4 = require("@kbach/core");
+
+// src/InteractiveWrapper.tsx
+var import_react2 = __toESM(require("react"));
+var import_core2 = require("@kbach/core");
+
+// src/useGlobalDarkMode.ts
+var import_react = __toESM(require("react"));
+var import_core = require("@kbach/core");
+var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react.default.useReducer((n) => n + 1, 0);
+  import_react.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    import_core.subscribeGlobalDarkMode,
+    import_core.getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
+// src/InteractiveWrapper.tsx
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+var InteractiveWrapper = (0, import_react2.forwardRef)(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isDark = useGlobalDarkMode();
+    const [pressed, setPressed] = (0, import_react2.useState)(false);
+    const [hovered, setHovered] = (0, import_react2.useState)(false);
+    const [focused, setFocused] = (0, import_react2.useState)(false);
+    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = (0, import_react2.useMemo)(
+      () => (0, import_core2.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
+      [resolvedStyle, isDark, pressed, hovered, focused]
+    );
+    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const { children, ...restWithoutChildren } = rest;
+    const componentProps = {
+      ref,
+      ...restWithoutChildren,
+      style: finalStyle,
+      ...import_core2.isWeb && className ? { className } : {},
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? import_react2.default.createElement(Component, componentProps, ...children) : import_react2.default.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
+// src/DarkWrapper.tsx
+var import_react3 = __toESM(require("react"));
+var import_core3 = require("@kbach/core");
+var DarkWrapper = import_react3.default.forwardRef(
+  function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
+    const isDark = useGlobalDarkMode();
+    const computedStyle = (0, import_core3.flatten)(resolvedStyle, isDark);
+    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const props = { ref, ...rest, style: finalStyle };
+    return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
+  }
+);
+DarkWrapper.displayName = "Kbach.DarkWrapper";
+
+// src/jsx-runtime.tsx
+var MODE_BUCKET_RE = /^(not-)?(dark|light)(:(not-)?(dark|light))*$/;
+function hasInteractiveBuckets(resolved) {
+  return Object.keys(resolved).some((key) => {
+    if (key === "base") return false;
+    if (/^(sm|md|lg|xl|2xl)$/.test(key)) return false;
+    if (MODE_BUCKET_RE.test(key)) return false;
+    return true;
+  });
+}
+var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "tw", "__kbachStyles", "__kbachClasses"]);
+function omitConsumed(props) {
+  const out = {};
+  for (const key of Object.keys(props)) {
+    if (!CONSUMED_PROPS.has(key)) out[key] = props[key];
+  }
+  return out;
+}
+function mergeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
+  return { ...computed, ...userStyle };
+}
+function makeElement(isStaticChildren, type, props, key) {
+  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
+}
+function processElement(type, rawProps, key, isStaticChildren) {
+  if (!rawProps) return (0, import_jsx_runtime.jsx)(type, null, key);
+  const { className, tw: twProp, __kbachStyles, __kbachClasses } = rawProps;
+  const classStr = className ?? twProp ?? __kbachClasses;
+  if (!classStr && !__kbachStyles) {
+    return makeElement(isStaticChildren, type, rawProps, key);
+  }
+  const config = (0, import_core4.getConfig)();
+  const resolved = __kbachStyles ?? (classStr ? (0, import_core4.resolve)(classStr, config.theme, config.darkMode) : {});
+  const { style: userStyle, ...passProps } = omitConsumed(rawProps);
+  if (hasInteractiveBuckets(resolved)) {
+    return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
+      Component: type,
+      resolvedStyle: resolved,
+      ...import_core4.isWeb && classStr ? { className: classStr } : {},
+      style: userStyle,
+      ...passProps
+    }, key);
+  }
+  const hasModeVariants = Object.keys(resolved).some(
+    (k) => k !== "base" && MODE_BUCKET_RE.test(k)
+  );
+  if (hasModeVariants) {
+    return (0, import_jsx_runtime.jsx)(DarkWrapper, {
+      Component: type,
+      resolvedStyle: resolved,
+      ...import_core4.isWeb && classStr ? { className: classStr } : {},
+      style: userStyle,
+      ...passProps
+    }, key);
+  }
+  const computedStyle = (0, import_core4.flatten)(resolved, false);
+  const finalStyle = mergeStyle(computedStyle, userStyle);
+  return makeElement(isStaticChildren, type, {
+    ...passProps,
+    style: finalStyle,
+    ...import_core4.isWeb && classStr ? { className: classStr } : {}
+  }, key);
+}
+function jsx(type, props, key) {
+  return processElement(type, props, key, false);
+}
+function jsxs(type, props, key) {
+  return processElement(type, props, key, true);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fragment,
+  jsx,
+  jsxs
+});

package/dist/jsx-runtime.mjs

@@ -0,0 +1,11 @@
+import {
+  Fragment,
+  jsx,
+  jsxs
+} from "./chunk-FUSJKUE7.mjs";
+import "./chunk-IZK5HMWK.mjs";
+export {
+  Fragment,
+  jsx,
+  jsxs
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@kbach/react",
+  "version": "0.1.0",
+  "description": "React / React Native components and hooks for the Kbach framework",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "source": "./src/jsx-runtime.tsx",
+      "import": "./dist/jsx-runtime.mjs",
+      "require": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "source": "./src/jsx-dev-runtime.tsx",
+      "import": "./dist/jsx-dev-runtime.mjs",
+      "require": "./dist/jsx-dev-runtime.js"
+    },
+    "./types": {
+      "types": "./types.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/jsx-runtime.tsx src/jsx-dev-runtime.tsx --format esm,cjs --dts --clean",
+    "dev": "tsup src/index.ts src/jsx-runtime.tsx src/jsx-dev-runtime.tsx --format esm,cjs --dts --watch",
+    "test": "vitest run --passWithNoTests",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kbach/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "tsup": "^8.0.0",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": ["dist"]
+}