@kbach/react 0.1.0

package/dist/index.js

@@ -0,0 +1,516 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InteractiveWrapper: () => InteractiveWrapper,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
+  ThemeToggle: () => ThemeToggle,
+  cx: () => cx,
+  defaultColors: () => import_core7.defaultColors,
+  defaultTheme: () => import_core7.defaultTheme,
+  flatten: () => import_core7.flatten,
+  getConfig: () => import_core7.getConfig,
+  parseClass: () => import_core7.parseClass,
+  parseClasses: () => import_core7.parseClasses,
+  resolve: () => import_core7.resolve,
+  styled: () => styled,
+  tw: () => tw,
+  updateConfig: () => import_core7.updateConfig,
+  useGlobalDarkMode: () => useGlobalDarkMode,
+  useResolvedStyle: () => useResolvedStyle,
+  useStyles: () => useStyles,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var ThemeContext = (0, import_react.createContext)(null);
+function useTheme() {
+  const ctx = (0, import_react.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
+var import_react2 = require("react");
+var import_core = require("@kbach/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Appearance;
+try {
+  ({ Appearance } = require("react-native"));
+} catch {
+}
+var STORAGE_KEY = "kbach-theme";
+function loadPersistedMode() {
+  try {
+    if (import_core.isWeb) {
+      return localStorage.getItem(STORAGE_KEY);
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function persistMode(mode) {
+  try {
+    if (import_core.isWeb) localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+  }
+}
+function applyWebTheme(resolvedMode, strategy) {
+  if (!import_core.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] = (0, import_react2.useState)(
+    () => configOverride ? (0, import_core.buildConfig)(configOverride) : (0, import_core.getConfig)()
+  );
+  const getSystemScheme = (0, import_react2.useCallback)(() => {
+    if (import_core.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] = (0, import_react2.useState)(getSystemScheme);
+  const [mode, _setMode] = (0, import_react2.useState)(() => {
+    if (!disablePersistence) {
+      const persisted = loadPersistedMode();
+      if (persisted) return persisted;
+    }
+    return defaultMode;
+  });
+  const setMode = (0, import_react2.useCallback)((next) => {
+    _setMode(next);
+    if (!disablePersistence) persistMode(next);
+  }, [disablePersistence]);
+  const toggle = (0, import_react2.useCallback)(() => {
+    setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
+  }, [mode, systemScheme, setMode]);
+  const resolvedMode = mode === "system" ? systemScheme : mode;
+  const isDark = resolvedMode === "dark";
+  (0, import_core.syncGlobalDarkMode)(isDark);
+  (0, import_react2.useEffect)(() => {
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    (0, import_core.setGlobalDarkMode)(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  const setSystemSchemeRef = (0, import_react2.useRef)(setSystemScheme);
+  setSystemSchemeRef.current = setSystemScheme;
+  (0, import_react2.useEffect)(() => {
+    if (import_core.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;
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (configOverride) return;
+    const unsub = (0, import_core.onConfigChange)(setResolvedConfig);
+    return unsub;
+  }, [configOverride]);
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
+    [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
+}
+
+// src/ThemeToggle.tsx
+var import_react3 = __toESM(require("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 }) => import_react3.default.createElement("div", { style, ...rest });
+    const Text = ({ style, ...rest }) => import_react3.default.createElement("span", { style, ...rest });
+    const Touchable = ({ onPress, style, ...rest }) => import_react3.default.createElement("button", { onClick: onPress, style, ...rest });
+    const Switch = ({
+      value,
+      onValueChange,
+      accessibilityLabel
+    }) => import_react3.default.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 import_react3.default.createElement(
+      View,
+      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
+      import_react3.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
+      import_react3.default.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"
+      }),
+      import_react3.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
+    );
+  }
+  if (variant === "icon-button") {
+    const icon = isDark ? darkLabel : lightLabel;
+    return import_react3.default.createElement(
+      Touchable,
+      {
+        onPress: toggle,
+        style: {
+          padding: 8,
+          borderRadius: 8,
+          backgroundColor: isDark ? "#374151" : "#f3f4f6",
+          ...style
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
+        accessibilityState: {}
+      },
+      import_react3.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
+    );
+  }
+  if (includeSystem) {
+    const modes = [
+      { key: "light", label: lightLabel },
+      { key: "dark", label: darkLabel },
+      { key: "system", label: "System" }
+    ];
+    return import_react3.default.createElement(
+      View,
+      { style: { flexDirection: "row", gap: 4, ...style } },
+      ...modes.map(
+        ({ key, label: mLabel }) => import_react3.default.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 }
+          },
+          import_react3.default.createElement(Text, {
+            style: {
+              fontSize: 13,
+              fontWeight: "500",
+              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
+              ...labelStyle
+            }
+          }, mLabel)
+        )
+      )
+    );
+  }
+  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
+  return import_react3.default.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: {}
+    },
+    import_react3.default.createElement(Text, {
+      style: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: isDark ? "#f9fafb" : "#111827",
+        ...labelStyle
+      }
+    }, currentLabel)
+  );
+}
+
+// src/styled.tsx
+var import_react4 = __toESM(require("react"));
+var import_core2 = require("@kbach/core");
+function styled(Component, baseClasses = "") {
+  const Styled = (0, import_react4.forwardRef)(
+    (props, ref) => {
+      const {
+        tw: extraClasses,
+        style: styleProp,
+        onPressIn,
+        onPressOut,
+        onMouseEnter,
+        onMouseLeave,
+        onFocus,
+        onBlur,
+        ...rest
+      } = props;
+      const { isDark, config } = useTheme();
+      const [pressed, setPressed] = (0, import_react4.useState)(false);
+      const [hovered, setHovered] = (0, import_react4.useState)(false);
+      const [focused, setFocused] = (0, import_react4.useState)(false);
+      const handlePressIn = (0, import_react4.useCallback)((e) => {
+        setPressed(true);
+        onPressIn?.(e);
+      }, [onPressIn]);
+      const handlePressOut = (0, import_react4.useCallback)((e) => {
+        setPressed(false);
+        onPressOut?.(e);
+      }, [onPressOut]);
+      const handleMouseEnter = (0, import_react4.useCallback)((e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      }, [onMouseEnter]);
+      const handleMouseLeave = (0, import_react4.useCallback)((e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      }, [onMouseLeave]);
+      const handleFocus = (0, import_react4.useCallback)((e) => {
+        setFocused(true);
+        onFocus?.(e);
+      }, [onFocus]);
+      const handleBlur = (0, import_react4.useCallback)((e) => {
+        setFocused(false);
+        onBlur?.(e);
+      }, [onBlur]);
+      const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
+      const resolved = (0, import_react4.useMemo)(() => (0, import_core2.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const computedStyle = (0, import_react4.useMemo)(
+        () => (0, import_core2.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 import_react4.default.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
+var import_react5 = require("react");
+var import_core3 = require("@kbach/core");
+function useStyles(classString, state = {}) {
+  const { isDark, config } = useTheme();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return (0, import_react5.useMemo)(() => {
+    const resolved = (0, import_core3.resolve)(normalised, config.theme, config.darkMode);
+    return (0, import_core3.flatten)(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 (0, import_react5.useMemo)(
+    () => (0, import_core3.resolve)(normalised, config.theme, config.darkMode),
+    [normalised, config]
+  );
+}
+
+// src/useGlobalDarkMode.ts
+var import_react6 = __toESM(require("react"));
+var import_core4 = require("@kbach/core");
+var useSyncExternalStore = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
+  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    import_core4.subscribeGlobalDarkMode,
+    import_core4.getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
+// src/InteractiveWrapper.tsx
+var import_react7 = __toESM(require("react"));
+var import_core5 = require("@kbach/core");
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+var InteractiveWrapper = (0, import_react7.forwardRef)(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isDark = useGlobalDarkMode();
+    const [pressed, setPressed] = (0, import_react7.useState)(false);
+    const [hovered, setHovered] = (0, import_react7.useState)(false);
+    const [focused, setFocused] = (0, import_react7.useState)(false);
+    const handlePressIn = (0, import_react7.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react7.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handleMouseEnter = (0, import_react7.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react7.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react7.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react7.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = (0, import_react7.useMemo)(
+      () => (0, import_core5.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_core5.isWeb && className ? { className } : {},
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? import_react7.default.createElement(Component, componentProps, ...children) : import_react7.default.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
+// src/tw.ts
+var import_core6 = require("@kbach/core");
+function tw(classString, isDark = false) {
+  const config = (0, import_core6.getConfig)();
+  const resolved = (0, import_core6.resolve)(classString, config.theme, config.darkMode);
+  if (import_core6.isWeb) {
+    return classString;
+  }
+  return (0, import_core6.flatten)(resolved, isDark);
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/index.ts
+var import_core7 = require("@kbach/core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InteractiveWrapper,
+  ThemeContext,
+  ThemeProvider,
+  ThemeToggle,
+  cx,
+  defaultColors,
+  defaultTheme,
+  flatten,
+  getConfig,
+  parseClass,
+  parseClasses,
+  resolve,
+  styled,
+  tw,
+  updateConfig,
+  useGlobalDarkMode,
+  useResolvedStyle,
+  useStyles,
+  useTheme
+});