@kbach/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,421 @@
+import {
+  InteractiveWrapper,
+  __require,
+  useGlobalDarkMode
+} from "./chunk-IZK5HMWK.mjs";
+
+// src/context.tsx
+import { createContext, useContext } from "react";
+var ThemeContext = createContext(null);
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "[Kbach] useTheme() must be called inside a <ThemeProvider>. Wrap your app root with <ThemeProvider>."
+    );
+  }
+  return ctx;
+}
+
+// src/ThemeProvider.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  isWeb,
+  getConfig,
+  buildConfig,
+  onConfigChange,
+  setGlobalDarkMode,
+  syncGlobalDarkMode
+} from "@kbach/core";
+import { jsx } from "react/jsx-runtime";
+var Appearance;
+try {
+  ({ Appearance } = __require("react-native"));
+} catch {
+}
+var STORAGE_KEY = "kbach-theme";
+function loadPersistedMode() {
+  try {
+    if (isWeb) {
+      return localStorage.getItem(STORAGE_KEY);
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function persistMode(mode) {
+  try {
+    if (isWeb) localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+  }
+}
+function applyWebTheme(resolvedMode, strategy) {
+  if (!isWeb) return;
+  const root = document.documentElement;
+  if (strategy === "attribute") {
+    root.setAttribute("data-theme", resolvedMode);
+  } else if (strategy === "class") {
+    root.classList.toggle("dark", resolvedMode === "dark");
+    root.classList.toggle("light", resolvedMode === "light");
+  }
+}
+function ThemeProvider({
+  children,
+  defaultMode = "system",
+  config: configOverride,
+  disablePersistence = false
+}) {
+  const [resolvedConfig, setResolvedConfig] = useState(
+    () => configOverride ? buildConfig(configOverride) : getConfig()
+  );
+  const getSystemScheme = useCallback(() => {
+    if (isWeb && typeof window !== "undefined") {
+      return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    if (Appearance) {
+      return Appearance.getColorScheme() === "dark" ? "dark" : "light";
+    }
+    return "light";
+  }, []);
+  const [systemScheme, setSystemScheme] = useState(getSystemScheme);
+  const [mode, _setMode] = useState(() => {
+    if (!disablePersistence) {
+      const persisted = loadPersistedMode();
+      if (persisted) return persisted;
+    }
+    return defaultMode;
+  });
+  const setMode = useCallback((next) => {
+    _setMode(next);
+    if (!disablePersistence) persistMode(next);
+  }, [disablePersistence]);
+  const toggle = useCallback(() => {
+    setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
+  }, [mode, systemScheme, setMode]);
+  const resolvedMode = mode === "system" ? systemScheme : mode;
+  const isDark = resolvedMode === "dark";
+  syncGlobalDarkMode(isDark);
+  useEffect(() => {
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    setGlobalDarkMode(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  const setSystemSchemeRef = useRef(setSystemScheme);
+  setSystemSchemeRef.current = setSystemScheme;
+  useEffect(() => {
+    if (isWeb && typeof window !== "undefined") {
+      const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+      if (!mq) return;
+      const handler = (e) => {
+        setSystemSchemeRef.current(e.matches ? "dark" : "light");
+      };
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }
+    if (Appearance) {
+      const sub = Appearance.addChangeListener(({ colorScheme }) => {
+        setSystemSchemeRef.current(colorScheme === "dark" ? "dark" : "light");
+      });
+      return () => sub.remove();
+    }
+    return void 0;
+  }, []);
+  useEffect(() => {
+    if (configOverride) return;
+    const unsub = onConfigChange(setResolvedConfig);
+    return unsub;
+  }, [configOverride]);
+  const contextValue = useMemo(
+    () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
+    [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+
+// src/ThemeToggle.tsx
+import React2 from "react";
+function getPrimitives() {
+  try {
+    const RN = __require("react-native");
+    return {
+      View: RN.View,
+      Text: RN.Text,
+      Touchable: RN.TouchableOpacity,
+      Switch: RN.Switch
+    };
+  } catch {
+    const View = ({ style, ...rest }) => React2.createElement("div", { style, ...rest });
+    const Text = ({ style, ...rest }) => React2.createElement("span", { style, ...rest });
+    const Touchable = ({ onPress, style, ...rest }) => React2.createElement("button", { onClick: onPress, style, ...rest });
+    const Switch = ({
+      value,
+      onValueChange,
+      accessibilityLabel
+    }) => React2.createElement("input", {
+      type: "checkbox",
+      checked: value,
+      onChange: (e) => onValueChange?.(e.target.checked),
+      "aria-label": accessibilityLabel
+    });
+    return { View, Text, Touchable, Switch };
+  }
+}
+var { View: _View, Text: _Text, Touchable: _Touchable, Switch: _Switch } = getPrimitives();
+function ThemeToggle({
+  variant = "button",
+  label,
+  lightLabel = "Light",
+  darkLabel = "Dark",
+  includeSystem = false,
+  style,
+  labelStyle
+}) {
+  const { mode, isDark, setMode, toggle } = useTheme();
+  const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
+  if (variant === "switch") {
+    return React2.createElement(
+      View,
+      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
+      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
+      React2.createElement(Switch, {
+        value: isDark,
+        onValueChange: (v) => setMode(v ? "dark" : "light"),
+        trackColor: { false: "#d1d5db", true: "#6366f1" },
+        thumbColor: isDark ? "#ffffff" : "#f3f4f6",
+        ios_backgroundColor: "#d1d5db",
+        accessibilityLabel: "Toggle dark mode"
+      }),
+      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
+    );
+  }
+  if (variant === "icon-button") {
+    const icon = isDark ? darkLabel : lightLabel;
+    return React2.createElement(
+      Touchable,
+      {
+        onPress: toggle,
+        style: {
+          padding: 8,
+          borderRadius: 8,
+          backgroundColor: isDark ? "#374151" : "#f3f4f6",
+          ...style
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
+        accessibilityState: {}
+      },
+      React2.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
+    );
+  }
+  if (includeSystem) {
+    const modes = [
+      { key: "light", label: lightLabel },
+      { key: "dark", label: darkLabel },
+      { key: "system", label: "System" }
+    ];
+    return React2.createElement(
+      View,
+      { style: { flexDirection: "row", gap: 4, ...style } },
+      ...modes.map(
+        ({ key, label: mLabel }) => React2.createElement(
+          Touchable,
+          {
+            key,
+            onPress: () => setMode(key),
+            style: {
+              paddingHorizontal: 12,
+              paddingVertical: 6,
+              borderRadius: 6,
+              backgroundColor: mode === key ? isDark ? "#6366f1" : "#3b82f6" : isDark ? "#374151" : "#e5e7eb"
+            },
+            accessibilityRole: "button",
+            accessibilityLabel: `Set ${key} theme`,
+            accessibilityState: { selected: mode === key }
+          },
+          React2.createElement(Text, {
+            style: {
+              fontSize: 13,
+              fontWeight: "500",
+              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
+              ...labelStyle
+            }
+          }, mLabel)
+        )
+      )
+    );
+  }
+  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
+  return React2.createElement(
+    Touchable,
+    {
+      onPress: toggle,
+      style: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 8,
+        backgroundColor: isDark ? "#374151" : "#e5e7eb",
+        ...style
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
+      accessibilityState: {}
+    },
+    React2.createElement(Text, {
+      style: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: isDark ? "#f9fafb" : "#111827",
+        ...labelStyle
+      }
+    }, currentLabel)
+  );
+}
+
+// src/styled.tsx
+import React3, {
+  forwardRef,
+  useState as useState2,
+  useCallback as useCallback3,
+  useMemo as useMemo2
+} from "react";
+import { resolve, flatten } from "@kbach/core";
+function styled(Component, baseClasses = "") {
+  const Styled = forwardRef(
+    (props, ref) => {
+      const {
+        tw: extraClasses,
+        style: styleProp,
+        onPressIn,
+        onPressOut,
+        onMouseEnter,
+        onMouseLeave,
+        onFocus,
+        onBlur,
+        ...rest
+      } = props;
+      const { isDark, config } = useTheme();
+      const [pressed, setPressed] = useState2(false);
+      const [hovered, setHovered] = useState2(false);
+      const [focused, setFocused] = useState2(false);
+      const handlePressIn = useCallback3((e) => {
+        setPressed(true);
+        onPressIn?.(e);
+      }, [onPressIn]);
+      const handlePressOut = useCallback3((e) => {
+        setPressed(false);
+        onPressOut?.(e);
+      }, [onPressOut]);
+      const handleMouseEnter = useCallback3((e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      }, [onMouseEnter]);
+      const handleMouseLeave = useCallback3((e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      }, [onMouseLeave]);
+      const handleFocus = useCallback3((e) => {
+        setFocused(true);
+        onFocus?.(e);
+      }, [onFocus]);
+      const handleBlur = useCallback3((e) => {
+        setFocused(false);
+        onBlur?.(e);
+      }, [onBlur]);
+      const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
+      const resolved = useMemo2(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const computedStyle = useMemo2(
+        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }),
+        [resolved, isDark, pressed, hovered, focused]
+      );
+      const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
+      const finalStyle = extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      return React3.createElement(Component, {
+        ref,
+        ...rest,
+        style: finalStyle,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      });
+    }
+  );
+  const componentName = Component.displayName ?? Component.name ?? "Component";
+  Styled.displayName = `Styled(${componentName})`;
+  return Styled;
+}
+
+// src/useStyles.ts
+import { useMemo as useMemo3 } from "react";
+import { resolve as resolve2, flatten as flatten2 } from "@kbach/core";
+function useStyles(classString, state = {}) {
+  const { isDark, config } = useTheme();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return useMemo3(() => {
+    const resolved = resolve2(normalised, config.theme, config.darkMode);
+    return flatten2(resolved, isDark, state);
+  }, [normalised, isDark, config, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
+}
+function useResolvedStyle(classString) {
+  const { config } = useTheme();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return useMemo3(
+    () => resolve2(normalised, config.theme, config.darkMode),
+    [normalised, config]
+  );
+}
+
+// src/tw.ts
+import { resolve as resolve3, flatten as flatten3, getConfig as getConfig2, isWeb as isWeb2 } from "@kbach/core";
+function tw(classString, isDark = false) {
+  const config = getConfig2();
+  const resolved = resolve3(classString, config.theme, config.darkMode);
+  if (isWeb2) {
+    return classString;
+  }
+  return flatten3(resolved, isDark);
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/index.ts
+import {
+  resolve as resolve4,
+  flatten as flatten4,
+  updateConfig,
+  getConfig as getConfig3,
+  defaultTheme,
+  defaultColors,
+  parseClass,
+  parseClasses
+} from "@kbach/core";
+export {
+  InteractiveWrapper,
+  ThemeContext,
+  ThemeProvider,
+  ThemeToggle,
+  cx,
+  defaultColors,
+  defaultTheme,
+  flatten4 as flatten,
+  getConfig3 as getConfig,
+  parseClass,
+  parseClasses,
+  resolve4 as resolve,
+  styled,
+  tw,
+  updateConfig,
+  useGlobalDarkMode,
+  useResolvedStyle,
+  useStyles,
+  useTheme
+};

package/dist/jsx-dev-runtime.d.mts

@@ -0,0 +1,19 @@
+export { Fragment } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+/**
+ * @kbach/react/jsx-dev-runtime
+ *
+ * Development variant of the custom JSX runtime.
+ * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
+ * We forward isStaticChildren so React's dev-mode key-warning suppression
+ * works correctly for compile-time static child arrays.
+ */
+
+declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}, _self?: unknown): ReactElement;
+
+export { jsxDEV };

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,19 @@
+export { Fragment } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+
+/**
+ * @kbach/react/jsx-dev-runtime
+ *
+ * Development variant of the custom JSX runtime.
+ * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
+ * We forward isStaticChildren so React's dev-mode key-warning suppression
+ * works correctly for compile-time static child arrays.
+ */
+
+declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}, _self?: unknown): ReactElement;
+
+export { jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,211 @@
+"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-dev-runtime.tsx
+var jsx_dev_runtime_exports = {};
+__export(jsx_dev_runtime_exports, {
+  Fragment: () => import_jsx_runtime.Fragment,
+  jsxDEV: () => jsxDEV
+});
+module.exports = __toCommonJS(jsx_dev_runtime_exports);
+
+// src/jsx-runtime.tsx
+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);
+}
+
+// src/jsx-dev-runtime.tsx
+function jsxDEV(type, props, key, isStaticChildren, _source, _self) {
+  return (isStaticChildren ? jsxs : jsx)(type, props, key);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fragment,
+  jsxDEV
+});

package/dist/jsx-dev-runtime.mjs

@@ -0,0 +1,15 @@
+import {
+  Fragment,
+  jsx,
+  jsxs
+} from "./chunk-FUSJKUE7.mjs";
+import "./chunk-IZK5HMWK.mjs";
+
+// src/jsx-dev-runtime.tsx
+function jsxDEV(type, props, key, isStaticChildren, _source, _self) {
+  return (isStaticChildren ? jsxs : jsx)(type, props, key);
+}
+export {
+  Fragment,
+  jsxDEV
+};