@valbuild/react 0.20.2 → 0.21.0

package/dist/{ValUI-b51ca60e.browser.esm.js → ValUI-43955bc2.browser.esm.js}

@@ -1,10 +1,11 @@
+'use client';
 import { a as _slicedToArray } from './slicedToArray-0cbb3d34.browser.esm.js';
 import { Internal } from '@valbuild/core';
 import { Style, ValOverlay } from '@valbuild/ui';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useValApi } from './valbuild-react.browser.esm.js';
+import { a as useValApi } from './ValProvider-a6ce7155.browser.esm.js';
 import './defineProperty-034d0378.browser.esm.js';
 import '@valbuild/core/fp';
 

package/dist/ValUI-9b5a2304.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValUI-9b5a2304.cjs.prod.js");
+} else {
+  module.exports = require("./ValUI-9b5a2304.cjs.dev.js");
+}

package/dist/{ValUI-b5f81233.cjs.prod.js → ValUI-9b5a2304.cjs.prod.js}

@@ -1,12 +1,15 @@
+'use client';
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var slicedToArray = require('./slicedToArray-5bddfa58.cjs.prod.js');
 var core = require('@valbuild/core');
 var ui = require('@valbuild/ui');
 var React = require('react');
 var reactDom = require('react-dom');
 var ReactJSXRuntime = require('react/jsx-runtime');
-var dist_valbuildReact = require('./valbuild-react.cjs.prod.js');
+var ValProvider = require('./ValProvider-e8201907.cjs.prod.js');
 require('./defineProperty-36ed93cd.cjs.prod.js');
 require('@valbuild/core/fp');
 
@@ -59,7 +62,7 @@ function ValUI() {
     _useState6 = slicedToArray._slicedToArray(_useState5, 2);
     _useState6[0];
     var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
-  var api = dist_valbuildReact.useValApi();
+  var api = ValProvider.useValApi();
   React.useEffect(function () {
     setIsClient(true);
     try {

package/dist/ValUI-ba280067.worker.esm.js

@@ -0,0 +1,110 @@
+'use client';
+import { a as _slicedToArray } from './slicedToArray-5a51fd33.worker.esm.js';
+import { Internal } from '@valbuild/core';
+import { Style, ValOverlay } from '@valbuild/ui';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { a as useValApi } from './ValProvider-5026936f.worker.esm.js';
+import './defineProperty-18559492.worker.esm.js';
+import '@valbuild/core/fp';
+
+function ShadowContent(_ref) {
+  var root = _ref.root,
+    children = _ref.children;
+  return /*#__PURE__*/createPortal(children, root);
+}
+var ShadowRoot = function ShadowRoot(_ref2) {
+  var children = _ref2.children,
+    style = _ref2.style;
+  var node = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    root = _useState2[0],
+    setRoot = _useState2[1];
+  useLayoutEffect(function () {
+    if (node.current) {
+      if (node.current.shadowRoot) {
+        setRoot(node.current.shadowRoot);
+      } else {
+        var _root = node.current.attachShadow({
+          mode: "open"
+        });
+        setRoot(_root);
+      }
+    }
+  }, []);
+  return /*#__PURE__*/jsx("div", {
+    ref: node,
+    style: style,
+    children: root && /*#__PURE__*/jsx(ShadowContent, {
+      root: root,
+      children: children
+    })
+  });
+};
+
+function ValUI() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+  var api = useValApi();
+  useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
+      setEnabled(valEnabled);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+  }
+  if (!isClient || !enabled) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs(ShadowRoot, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 8999 // 1 less than the NextJS error z-index: 9000
+      },
+      children: [/*#__PURE__*/jsx("link", {
+        rel: "preconnect",
+        href: "https://fonts.googleapis.com"
+      }), /*#__PURE__*/jsx("link", {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous"
+      }), /*#__PURE__*/jsx("link", {
+        href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap",
+        rel: "stylesheet"
+      }), /*#__PURE__*/jsx(Style, {}), /*#__PURE__*/jsx(ValOverlay, {
+        api: api
+      })]
+    })
+  });
+}
+
+export { ValUI as default };

package/dist/declarations/src/ValRichText.d.ts

@@ -12,9 +12,7 @@ type ThemeOptions<O extends RichTextOptions> = {
     };
     classes: {
         [Key in Classes & keyof O as O[Key] extends true ? Key : never]: string;
-    } & (O["img"] extends true ? {
-        imgContainer?: string;
-    } : {});
+    };
 };
 export declare function ValRichText<O extends RichTextOptions>({ theme, children, }: {
     theme: ThemeOptions<O>;