@particle-academy/react-fancy 3.4.3 → 3.5.0

package/dist/index.cjs

@@ -6413,6 +6413,98 @@ var Callout = react.forwardRef(
   }
 );
 Callout.displayName = "Callout";
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var FauxClient = react.forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const viewportRef = react.useRef(null);
+    const stageRef = react.useRef(null);
+    const [s, setS] = react.useState(typeof scale === "number" ? scale : 1);
+    const [contentHeight, setContentHeight] = react.useState(void 0);
+    react.useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
+        const naturalHeight = stage.offsetHeight;
+        setS(next);
+        setContentHeight(naturalHeight * next);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-faux-client": "",
+        className: cn(
+          "overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: cn("relative overflow-hidden", bodyClassName),
+              style: scaled ? { height: contentHeight } : void 0,
+              children: scaled ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: stageRef,
+                  className: "absolute left-0 top-0 origin-top-left",
+                  style: { width, transform: `scale(${s})` },
+                  children
+                }
+              ) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
 var colorClasses5 = {
   yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
   blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
@@ -13367,6 +13459,7 @@ exports.EMOJI_ENTRIES = EMOJI_ENTRIES;
 exports.Editor = Editor;
 exports.Emoji = Emoji;
 exports.EmojiSelect = EmojiSelect;
+exports.FauxClient = FauxClient;
 exports.Field = Field;
 exports.FileUpload = FileUpload;
 exports.Heading = Heading;