@fuf-stack/pixels 0.29.3 → 0.30.0

package/dist/{chunk-C2BIHVLT.js → chunk-LCSYN3DI.js}

@@ -3,8 +3,10 @@ import {
 } from "./chunk-ODLZQXBE.js";
 import {
   __commonJS,
+  __spreadProps,
+  __spreadValues,
   __toESM
-} from "./chunk-5WRI5ZAA.js";
+} from "./chunk-J7N2552D.js";
 
 // ../../node_modules/.pnpm/@babel+runtime@7.26.0/node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
@@ -52,9 +54,7 @@ var require_objectDestructuringEmpty = __commonJS({
 });
 
 // src/Json/Json.tsx
-import { useState as useState3 } from "react";
-import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
-import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 
 // ../../node_modules/.pnpm/@uiw+react-json-view@2.0.0-alpha.30_@babel+runtime@7.26.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@uiw/react-json-view/esm/index.js
 var import_extends21 = __toESM(require_extends());
@@ -2562,120 +2562,204 @@ var vscodeTheme = {
 
 // src/Json/Json.tsx
 import { useTheme } from "next-themes";
-import { cn } from "@fuf-stack/pixel-utils";
-import { Fragment as Fragment3, jsx, jsxs } from "react/jsx-runtime";
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
+
+// src/Json/jsonParser.ts
+var JsonParseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "JsonParseError";
+  }
+};
 var getValue = (value) => {
   if (typeof value === "string") {
-    return JSON.parse(value);
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      throw new JsonParseError(
+        `Invalid JSON string: ${error.message}`
+      );
+    }
+  }
+  if (value === null || value === void 0) {
+    throw new JsonParseError("Value cannot be null or undefined");
   }
   if (typeof value === "object") {
     return value;
   }
-  throw new Error(`${typeof value} can not be visualized`);
+  throw new JsonParseError(`${typeof value} cannot be visualized`);
+};
+
+// src/Json/subcomponents/CopiedRenderer.tsx
+import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+var CopiedRenderer = () => {
+  return /* @__PURE__ */ jsx(
+    esm_default.Copied,
+    {
+      render: (props) => {
+        const { style, onClick, className } = props;
+        const isCopied = props["data-copied"];
+        const elmClasses = cn(
+          className,
+          "absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1",
+          { "text-success": isCopied }
+        );
+        const handleKeyDown = (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onClick == null ? void 0 : onClick(e);
+          }
+        };
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "relative !ml-0 !h-[1em] !w-0",
+            style,
+            "data-testid": "copy-button",
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => onClick == null ? void 0 : onClick(e),
+            "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
+            children: isCopied ? /* @__PURE__ */ jsx(HiOutlineClipboardCheck, { className: elmClasses }) : /* @__PURE__ */ jsx(HiOutlineClipboard, { className: elmClasses })
+          }
+        );
+      }
+    }
+  );
 };
-var Json = ({ className = null, collapsed = false, value }) => {
+var CopiedRenderer_default = CopiedRenderer;
+
+// src/Json/subcomponents/ErrorRenderer.tsx
+import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
+import { Fragment as Fragment3, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ErrorRenderer = ({
+  error,
+  data,
+  showDetails,
+  onToggleDetails
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx2(FaTimesCircle, { className: "mr-2", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Failed to parse JSON data" })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            Button_default,
+            {
+              color: "danger",
+              size: "sm",
+              variant: "light",
+              onClick: onToggleDetails,
+              "aria-expanded": showDetails,
+              "aria-controls": "error-details",
+              children: showDetails ? /* @__PURE__ */ jsxs(Fragment3, { children: [
+                /* @__PURE__ */ jsx2(FaChevronUp, { "aria-hidden": "true" }),
+                " Hide Details"
+              ] }) : /* @__PURE__ */ jsxs(Fragment3, { children: [
+                /* @__PURE__ */ jsx2(FaChevronDown, { "aria-hidden": "true" }),
+                " Show Details"
+              ] })
+            }
+          )
+        ] }),
+        showDetails && /* @__PURE__ */ jsxs("div", { id: "error-details", className: "mt-4 w-full text-left", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx2("strong", { children: "Error:" }),
+            /* @__PURE__ */ jsx2("pre", { children: error instanceof Error ? `${error.name}: ${error.message}` : "Unknown error" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx2("strong", { children: "Data:" }),
+            /* @__PURE__ */ jsx2("pre", { children: typeof data !== "string" ? JSON.stringify(data, null, 2) : data })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ErrorRenderer_default = ErrorRenderer;
+
+// src/Json/subcomponents/NullRenderer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NullRenderer = () => {
+  return /* @__PURE__ */ jsx3(
+    esm_default.Null,
+    {
+      render: () => /* @__PURE__ */ jsx3("span", { className: "rounded bg-warning-100 px-1 text-xs text-warning-700", children: "null" })
+    }
+  );
+};
+var NullRenderer_default = NullRenderer;
+
+// src/Json/Json.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Json = ({
+  className = void 0,
+  collapsed = false,
+  value,
+  maxHeight = void 0,
+  onCopy = void 0,
+  errorRenderer = void 0
+}) => {
   const [showDetails, setShowDetails] = useState3(false);
   const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark" || document.body.classList.contains("dark");
+  const isDarkMode = useMemo2(
+    () => resolvedTheme === "dark" || document.body.classList.contains("dark"),
+    [resolvedTheme]
+  );
+  const handleCopy = (event) => {
+    const copiedValue = event.currentTarget.textContent || "";
+    onCopy == null ? void 0 : onCopy(copiedValue);
+  };
   let content = null;
   let error = null;
   try {
-    content = /* @__PURE__ */ jsx(
-      esm_default,
+    const parsedValue = getValue(value);
+    content = /* @__PURE__ */ jsx4(
+      "div",
       {
-        className: "pr-5",
-        collapsed,
-        displayDataTypes: false,
-        style: {
-          ...isDarkMode ? vscodeTheme : lightTheme,
-          backgroundColor: "unset"
-        },
-        value: getValue(value),
-        children: /* @__PURE__ */ jsx(
-          esm_default.Copied,
+        style: { maxHeight, overflowY: maxHeight ? "auto" : void 0 },
+        className: "relative",
+        children: /* @__PURE__ */ jsxs2(
+          esm_default,
           {
-            render: ({
-              // @ts-expect-error this should be fine
-              "data-copied": copied,
-              style,
-              ...elmProps
-            }) => {
-              const elmClasses = cn(
-                elmProps.className,
-                "absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1",
-                { "text-success": copied }
-              );
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "relative !ml-0 !h-[1em] !w-0",
-                  style,
-                  "data-testid": "copy-button",
-                  children: copied ? /* @__PURE__ */ jsx(
-                    HiOutlineClipboardCheck,
-                    {
-                      ...elmProps,
-                      className: elmClasses
-                    }
-                  ) : (
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    /* @__PURE__ */ jsx(HiOutlineClipboard, { ...elmProps, className: elmClasses })
-                  )
-                }
-              );
-            }
+            className: "pr-5",
+            collapsed,
+            displayDataTypes: false,
+            style: __spreadProps(__spreadValues({}, isDarkMode ? vscodeTheme : lightTheme), {
+              backgroundColor: "unset"
+            }),
+            value: parsedValue,
+            onCopy: handleCopy,
+            children: [
+              /* @__PURE__ */ jsx4(CopiedRenderer_default, {}),
+              /* @__PURE__ */ jsx4(NullRenderer_default, {})
+            ]
           }
         )
       }
     );
   } catch (err) {
-    error = /* @__PURE__ */ jsxs(
-      "div",
+    const defaultError = /* @__PURE__ */ jsx4(
+      ErrorRenderer_default,
       {
-        className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
-        role: "alert",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between gap-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ jsx(FaTimesCircle, { className: "mr-2" }),
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Failed to parse JSON data" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Button_default,
-              {
-                color: "danger",
-                size: "sm",
-                variant: "light",
-                onClick: () => setShowDetails(!showDetails),
-                children: showDetails ? /* @__PURE__ */ jsxs(Fragment3, { children: [
-                  /* @__PURE__ */ jsx(FaChevronUp, {}),
-                  " Hide Details"
-                ] }) : /* @__PURE__ */ jsxs(Fragment3, { children: [
-                  /* @__PURE__ */ jsx(FaChevronDown, {}),
-                  " Show Details"
-                ] })
-              }
-            )
-          ] }),
-          showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-4 w-full text-left", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Error:" }),
-              /* @__PURE__ */ jsxs("pre", { children: [
-                err?.name,
-                ": ",
-                err?.message
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-              /* @__PURE__ */ jsx("strong", { children: "Data:" }),
-              /* @__PURE__ */ jsx("pre", { children: typeof value !== "string" ? JSON.stringify(value, null, 2) : value })
-            ] })
-          ] })
-        ]
+        error: err,
+        data: value,
+        showDetails,
+        onToggleDetails: () => setShowDetails(!showDetails)
       }
     );
+    error = errorRenderer ? errorRenderer(err, value) : defaultError;
   }
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: error || content });
+  return /* @__PURE__ */ jsx4("div", { "aria-label": "JSON viewer", className: cn2(className), role: "region", children: error || content });
 };
 var Json_default = Json;
 
@@ -2686,4 +2770,4 @@ export {
   Json_default,
   Json_default2
 };
-//# sourceMappingURL=chunk-C2BIHVLT.js.map
+//# sourceMappingURL=chunk-LCSYN3DI.js.map