@demokit-ai/react 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,96 +1,257 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var react = require('react');
-var core = require('@demokit-ai/core');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DemoKitProvider: () => DemoKitProvider,
+  DemoModeBanner: () => DemoModeBanner,
+  DemoModeContext: () => DemoModeContext,
+  DemoModeToggle: () => DemoModeToggle,
+  PoweredByBadge: () => PoweredByBadge,
+  createRemoteSource: () => createRemoteSource,
+  useDemoGuard: () => useDemoGuard,
+  useDemoMode: () => useDemoMode,
+  useDemoSession: () => useDemoSession,
+  useIsDemoMode: () => useIsDemoMode,
+  useIsHydrated: () => useIsHydrated
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var DemoModeContext = react.createContext(void 0);
+var import_react2 = require("react");
+var import_core = require("@demokit-ai/core");
+
+// src/context.ts
+var import_react = require("react");
+var DemoModeContext = (0, import_react.createContext)(void 0);
 DemoModeContext.displayName = "DemoModeContext";
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function DemoKitProvider({
   children,
   fixtures,
+  // Remote config
+  source,
+  onRemoteLoad,
+  onRemoteError,
+  loadingFallback = null,
+  errorFallback,
+  // Standard props
   storageKey = "demokit-mode",
   initialEnabled = false,
   onDemoModeChange,
-  baseUrl
+  baseUrl,
+  // Detection & guards
+  detection,
+  canDisable,
+  onMutationIntercepted
 }) {
-  const [isDemoMode, setIsDemoMode] = react.useState(initialEnabled);
-  const [isHydrated, setIsHydrated] = react.useState(false);
-  const interceptorRef = react.useRef(null);
-  const initializedRef = react.useRef(false);
-  react.useEffect(() => {
+  const [isDemoMode, setIsDemoMode] = (0, import_react2.useState)(initialEnabled);
+  const [isHydrated, setIsHydrated] = (0, import_react2.useState)(false);
+  const [isPublicDemo, setIsPublicDemo] = (0, import_react2.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(!!source?.apiKey);
+  const [remoteError, setRemoteError] = (0, import_react2.useState)(null);
+  const [remoteVersion, setRemoteVersion] = (0, import_react2.useState)(null);
+  const interceptorRef = (0, import_react2.useRef)(null);
+  const initializedRef = (0, import_react2.useRef)(false);
+  const remoteFixturesRef = (0, import_react2.useRef)(null);
+  const refetchFnRef = (0, import_react2.useRef)(null);
+  const setupInterceptor = (0, import_react2.useCallback)(
+    (mergedFixtures) => {
+      interceptorRef.current?.destroy();
+      interceptorRef.current = (0, import_core.createDemoInterceptor)({
+        fixtures: mergedFixtures,
+        storageKey,
+        initialEnabled,
+        baseUrl,
+        detection,
+        canDisable,
+        onMutationIntercepted,
+        onEnable: () => {
+          setIsDemoMode(true);
+          onDemoModeChange?.(true);
+        },
+        onDisable: () => {
+          setIsDemoMode(false);
+          onDemoModeChange?.(false);
+        }
+      });
+      const storedState = interceptorRef.current.isEnabled();
+      setIsDemoMode(storedState);
+      setIsPublicDemo(interceptorRef.current.isPublicDemo());
+      setIsHydrated(true);
+    },
+    [storageKey, initialEnabled, baseUrl, onDemoModeChange, detection, canDisable, onMutationIntercepted]
+  );
+  const fetchAndSetup = (0, import_react2.useCallback)(async () => {
+    if (!source?.apiKey) return;
+    setIsLoading(true);
+    setRemoteError(null);
+    try {
+      const response = await (0, import_core.fetchCloudFixtures)({
+        apiKey: source.apiKey,
+        apiUrl: source.apiUrl,
+        timeout: source.timeout,
+        retry: source.retry,
+        maxRetries: source.maxRetries,
+        onLoad: onRemoteLoad,
+        onError: onRemoteError
+      });
+      const remoteFixtures = (0, import_core.createRemoteFixtures)(response, fixtures);
+      remoteFixturesRef.current = remoteFixtures;
+      setRemoteVersion(response.version);
+      setupInterceptor(remoteFixtures);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      setRemoteError(err);
+      onRemoteError?.(err);
+      if (fixtures && Object.keys(fixtures).length > 0) {
+        setupInterceptor(fixtures);
+      } else {
+        setIsHydrated(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    source,
+    fixtures,
+    onRemoteLoad,
+    onRemoteError,
+    setupInterceptor
+  ]);
+  refetchFnRef.current = fetchAndSetup;
+  (0, import_react2.useEffect)(() => {
     if (initializedRef.current) {
       return;
     }
     initializedRef.current = true;
-    interceptorRef.current = core.createDemoInterceptor({
-      fixtures,
-      storageKey,
-      initialEnabled,
-      baseUrl,
-      onEnable: () => {
-        setIsDemoMode(true);
-        onDemoModeChange?.(true);
-      },
-      onDisable: () => {
-        setIsDemoMode(false);
-        onDemoModeChange?.(false);
-      }
-    });
-    const storedState = interceptorRef.current.isEnabled();
-    setIsDemoMode(storedState);
-    setIsHydrated(true);
+    if (source?.apiKey) {
+      fetchAndSetup();
+    } else if (fixtures) {
+      setupInterceptor(fixtures);
+    } else {
+      setIsHydrated(true);
+      setIsLoading(false);
+    }
     return () => {
       interceptorRef.current?.destroy();
       interceptorRef.current = null;
       initializedRef.current = false;
     };
   }, []);
-  react.useEffect(() => {
-    if (interceptorRef.current && isHydrated) {
-      interceptorRef.current.setFixtures(fixtures);
+  (0, import_react2.useEffect)(() => {
+    if (!isHydrated || isLoading) return;
+    if (source?.apiKey && remoteFixturesRef.current) {
+      const merged = { ...remoteFixturesRef.current, ...fixtures };
+      interceptorRef.current?.setFixtures(merged);
+    } else if (fixtures) {
+      interceptorRef.current?.setFixtures(fixtures);
     }
-  }, [fixtures, isHydrated]);
-  const enable = react.useCallback(() => {
+  }, [fixtures, isHydrated, isLoading, source]);
+  const enable = (0, import_react2.useCallback)(() => {
     interceptorRef.current?.enable();
   }, []);
-  const disable = react.useCallback(() => {
-    interceptorRef.current?.disable();
+  const disable = (0, import_react2.useCallback)(() => {
+    return interceptorRef.current?.disable() ?? true;
   }, []);
-  const toggle = react.useCallback(() => {
+  const toggle = (0, import_react2.useCallback)(() => {
     interceptorRef.current?.toggle();
   }, []);
-  const setDemoMode = react.useCallback((enabled) => {
+  const setDemoMode = (0, import_react2.useCallback)((enabled) => {
     if (enabled) {
       interceptorRef.current?.enable();
     } else {
       interceptorRef.current?.disable();
     }
   }, []);
-  const resetSession = react.useCallback(() => {
+  const resetSession = (0, import_react2.useCallback)(() => {
     interceptorRef.current?.resetSession();
   }, []);
-  const getSession = react.useCallback(() => {
+  const getSession = (0, import_react2.useCallback)(() => {
     return interceptorRef.current?.getSession() ?? null;
   }, []);
-  const value = react.useMemo(
+  const refetch = (0, import_react2.useCallback)(async () => {
+    if (!source?.apiKey) {
+      console.warn("[DemoKit] refetch() called but no source provided");
+      return;
+    }
+    await refetchFnRef.current?.();
+  }, [source]);
+  const value = (0, import_react2.useMemo)(
     () => ({
       isDemoMode,
       isHydrated,
+      isPublicDemo,
+      isLoading,
+      remoteError,
+      remoteVersion,
       enable,
       disable,
       toggle,
       setDemoMode,
       resetSession,
-      getSession
+      getSession,
+      refetch
     }),
-    [isDemoMode, isHydrated, enable, disable, toggle, setDemoMode, resetSession, getSession]
+    [
+      isDemoMode,
+      isHydrated,
+      isPublicDemo,
+      isLoading,
+      remoteError,
+      remoteVersion,
+      enable,
+      disable,
+      toggle,
+      setDemoMode,
+      resetSession,
+      getSession,
+      refetch
+    ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DemoModeContext.Provider, { value, children });
+  if (isLoading && source?.apiKey) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoModeContext.Provider, { value, children: loadingFallback });
+  }
+  if (remoteError && errorFallback) {
+    const errorContent = typeof errorFallback === "function" ? errorFallback(remoteError) : errorFallback;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoModeContext.Provider, { value, children: errorContent });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoModeContext.Provider, { value, children });
 }
+
+// src/config.ts
+function createRemoteSource(config) {
+  return {
+    timeout: 1e4,
+    retry: true,
+    maxRetries: 3,
+    ...config
+  };
+}
+
+// src/hooks.ts
+var import_react3 = require("react");
 function useDemoMode() {
-  const context = react.useContext(DemoModeContext);
+  const context = (0, import_react3.useContext)(DemoModeContext);
   if (context === void 0) {
     throw new Error(
       "useDemoMode must be used within a DemoKitProvider. Make sure to wrap your app with <DemoKitProvider>."
@@ -107,8 +268,139 @@ function useIsHydrated() {
 function useDemoSession() {
   return useDemoMode().getSession();
 }
+
+// src/guard.ts
+var import_react4 = require("react");
+function useDemoGuard(options = {}) {
+  const { isDemoMode } = useDemoMode();
+  const { onBlocked } = options;
+  const guardMutation = (0, import_react4.useCallback)(
+    (action, actionName) => {
+      if (isDemoMode) {
+        const message = actionName ? `${actionName} (simulated in demo mode)` : "Action simulated in demo mode";
+        onBlocked?.(message);
+        return false;
+      }
+      action();
+      return true;
+    },
+    [isDemoMode, onBlocked]
+  );
+  return {
+    guardMutation,
+    isDemoMode
+  };
+}
+
+// src/powered-by.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ExternalLinkIcon({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+}
+var sizeConfig = {
+  xs: {
+    fontSize: "10px",
+    padding: "2px 6px",
+    gap: "3px",
+    iconSize: 8
+  },
+  sm: {
+    fontSize: "11px",
+    padding: "3px 8px",
+    gap: "4px",
+    iconSize: 10
+  },
+  md: {
+    fontSize: "12px",
+    padding: "4px 10px",
+    gap: "5px",
+    iconSize: 12
+  }
+};
+var variantStyles = {
+  light: {
+    color: "rgba(120, 53, 15, 0.7)",
+    hoverColor: "rgba(120, 53, 15, 0.9)",
+    backgroundColor: "transparent",
+    hoverBackgroundColor: "rgba(217, 119, 6, 0.08)"
+  },
+  dark: {
+    color: "rgba(255, 255, 255, 0.6)",
+    hoverColor: "rgba(255, 255, 255, 0.9)",
+    backgroundColor: "transparent",
+    hoverBackgroundColor: "rgba(255, 255, 255, 0.1)"
+  }
+};
+function PoweredByBadge({
+  url = "https://demokit.ai",
+  variant = "light",
+  size = "sm",
+  className = "",
+  style
+}) {
+  const config = sizeConfig[size];
+  const colors = variantStyles[variant === "auto" ? "light" : variant];
+  const baseStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: config.gap,
+    fontSize: config.fontSize,
+    padding: config.padding,
+    color: colors.color,
+    textDecoration: "none",
+    borderRadius: "4px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontWeight: 500,
+    transition: "color 0.15s ease, background-color 0.15s ease",
+    whiteSpace: "nowrap",
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: `demokit-powered-by ${className}`.trim(),
+      style: baseStyles,
+      onMouseOver: (e) => {
+        e.currentTarget.style.color = colors.hoverColor;
+        e.currentTarget.style.backgroundColor = colors.hoverBackgroundColor;
+      },
+      onMouseOut: (e) => {
+        e.currentTarget.style.color = colors.color;
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Powered by DemoKit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExternalLinkIcon, { size: config.iconSize })
+      ]
+    }
+  );
+}
+
+// src/banner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function EyeIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       width: "20",
@@ -121,8 +413,8 @@ function EyeIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
@@ -173,6 +465,8 @@ function DemoModeBanner({
   demoLabel = "Demo Mode Active",
   description = "Changes are simulated and not saved",
   showIcon = true,
+  showPoweredBy = true,
+  poweredByUrl = "https://demokit.ai",
   style,
   onExit
 }) {
@@ -187,45 +481,224 @@ function DemoModeBanner({
       disable();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const effectiveShowPoweredBy = showPoweredBy;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: `demokit-banner ${className}`.trim(),
-      style: { ...defaultStyles.container, ...style },
+      style: { ...defaultStyles.container, flexDirection: "column", gap: "4px", ...style },
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.content, children: [
-          showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.label, children: demoLabel }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles.description, children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.content, children: [
+            showIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: defaultStyles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EyeIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: defaultStyles.label, children: demoLabel }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: defaultStyles.description, children: description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: handleExit,
+              style: defaultStyles.button,
+              onMouseOver: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(217, 119, 6, 0.1)";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              type: "button",
+              children: exitLabel
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleExit,
-            style: defaultStyles.button,
-            onMouseOver: (e) => {
-              e.currentTarget.style.backgroundColor = "rgba(217, 119, 6, 0.1)";
-            },
-            onMouseOut: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-            },
-            type: "button",
-            children: exitLabel
-          }
-        )
+        effectiveShowPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PoweredByBadge, { url: poweredByUrl, size: "xs" }) })
       ]
     }
   );
 }
 
-exports.DemoKitProvider = DemoKitProvider;
-exports.DemoModeBanner = DemoModeBanner;
-exports.DemoModeContext = DemoModeContext;
-exports.useDemoMode = useDemoMode;
-exports.useDemoSession = useDemoSession;
-exports.useIsDemoMode = useIsDemoMode;
-exports.useIsHydrated = useIsHydrated;
-//# sourceMappingURL=index.cjs.map
+// src/toggle.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var sizeConfig2 = {
+  sm: {
+    trackWidth: 36,
+    trackHeight: 20,
+    thumbSize: 16,
+    thumbOffset: 2,
+    fontSize: "12px",
+    padding: "8px 12px",
+    gap: "8px"
+  },
+  md: {
+    trackWidth: 44,
+    trackHeight: 24,
+    thumbSize: 20,
+    thumbOffset: 2,
+    fontSize: "14px",
+    padding: "12px 16px",
+    gap: "10px"
+  },
+  lg: {
+    trackWidth: 52,
+    trackHeight: 28,
+    thumbSize: 24,
+    thumbOffset: 2,
+    fontSize: "16px",
+    padding: "16px 20px",
+    gap: "12px"
+  }
+};
+var positionStyles = {
+  inline: {},
+  floating: {
+    position: "fixed",
+    zIndex: 9999,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    borderRadius: "8px"
+  },
+  corner: {
+    position: "fixed",
+    bottom: "20px",
+    right: "20px",
+    zIndex: 9999,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    borderRadius: "8px"
+  }
+};
+var defaultStyles2 = {
+  container: {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "4px",
+    backgroundColor: "#ffffff",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  label: {
+    fontWeight: 500,
+    color: "#1f2937",
+    userSelect: "none"
+  },
+  track: {
+    position: "relative",
+    borderRadius: "9999px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    flexShrink: 0
+  },
+  trackOff: {
+    backgroundColor: "#d1d5db"
+  },
+  trackOn: {
+    backgroundColor: "#d97706"
+  },
+  thumb: {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+    transition: "left 0.2s ease"
+  },
+  poweredByContainer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    width: "100%"
+  }
+};
+function DemoModeToggle({
+  showLabel = true,
+  label = "Demo Mode",
+  showPoweredBy = true,
+  poweredByUrl = "https://demokit.ai",
+  position = "inline",
+  size = "md",
+  className = "",
+  style,
+  onChange
+}) {
+  const { isDemoMode, isHydrated, toggle } = useDemoMode();
+  if (!isHydrated) {
+    return null;
+  }
+  const config = sizeConfig2[size];
+  const posStyle = positionStyles[position];
+  const handleToggle = () => {
+    toggle();
+    onChange?.(!isDemoMode);
+  };
+  const thumbLeft = isDemoMode ? config.trackWidth - config.thumbSize - config.thumbOffset : config.thumbOffset;
+  const effectiveShowPoweredBy = showPoweredBy;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `demokit-toggle ${className}`.trim(),
+      style: {
+        ...defaultStyles2.container,
+        padding: config.padding,
+        ...posStyle,
+        ...style
+      },
+      role: "group",
+      "aria-label": "Demo mode toggle",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...defaultStyles2.row, gap: config.gap }, children: [
+          showLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { ...defaultStyles2.label, fontSize: config.fontSize }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": isDemoMode,
+              "aria-label": `${label}: ${isDemoMode ? "On" : "Off"}`,
+              onClick: handleToggle,
+              style: {
+                ...defaultStyles2.track,
+                ...isDemoMode ? defaultStyles2.trackOn : defaultStyles2.trackOff,
+                width: config.trackWidth,
+                height: config.trackHeight,
+                border: "none",
+                padding: 0
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  style: {
+                    ...defaultStyles2.thumb,
+                    width: config.thumbSize,
+                    height: config.thumbSize,
+                    left: thumbLeft
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        effectiveShowPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.poweredByContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PoweredByBadge, { url: poweredByUrl, size: "xs" }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DemoKitProvider,
+  DemoModeBanner,
+  DemoModeContext,
+  DemoModeToggle,
+  PoweredByBadge,
+  createRemoteSource,
+  useDemoGuard,
+  useDemoMode,
+  useDemoSession,
+  useIsDemoMode,
+  useIsHydrated
+});
 //# sourceMappingURL=index.cjs.map