@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Json/Json.cjs

@@ -0,0 +1,87 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../node_modules/.pnpm/@uiw_react-json-view@2.0.0-alpha.42_@babel_runtime@7.29.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@uiw/react-json-view/esm/index.cjs");
+const require_jsonParser = require("./jsonParser.cjs");
+const require_CopiedRenderer = require("./subcomponents/CopiedRenderer.cjs");
+const require_ErrorRenderer = require("./subcomponents/ErrorRenderer.cjs");
+const require_NullRenderer = require("./subcomponents/NullRenderer.cjs");
+require("./theme.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/Json/Json.tsx
+/**
+* Handles copying text or object values to clipboard.
+*
+* @param rawValue - The original value to copy (can be an object or primitive)
+* @param onCopy - Optional callback function triggered after copying with the copied value
+*
+* This function:
+* 1. Detects if the value is an object (not null and typeof 'object')
+* 2. Converts objects to JSON strings for clipboard copying
+* 3. Uses setTimeout to write the value to clipboard in the next render cycle
+*    - This is necessary because JsonView (CopiedRenderer) normally handles copying itself,
+*      but its copied value doesn't follow the same isObject logic
+*    - By using setTimeout, we ensure our properly formatted value overwrites any previous copy operation
+* 4. Calls the optional onCopy callback with the copied value if provided
+*
+* Note: The text parameter is kept for API consistency but is not used in the copying process
+*/
+const handleCopy = (rawValue, onCopy) => {
+	let isObject = false;
+	try {
+		if (rawValue !== require_NullRenderer.default && typeof rawValue === "object") isObject = true;
+	} catch (_err) {}
+	const copyValue = isObject ? JSON.stringify(rawValue, null, 2) : rawValue;
+	setTimeout(async () => {
+		return navigator.clipboard.writeText(copyValue);
+	}, 1);
+	if (onCopy) onCopy(copyValue);
+};
+/**
+* Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
+* with improved error handling, accessibility, and customization options
+*/
+const Json = ({ className = void 0, collapsed = false, errorRenderer = void 0, maxHeight = void 0, onCopy = void 0, value }) => {
+	const [showDetails, setShowDetails] = (0, react.useState)(false);
+	let content = null;
+	let error = null;
+	try {
+		const parsedValue = require_jsonParser.getValue(value);
+		content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative",
+			style: {
+				maxHeight,
+				overflowY: maxHeight ? "auto" : void 0
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.default, {
+				className: "pr-5",
+				collapsed,
+				displayDataTypes: false,
+				value: parsedValue,
+				onCopied: (_, rawValue) => {
+					handleCopy(rawValue, onCopy);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopiedRenderer.default, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NullRenderer.default, {})]
+			})
+		});
+	} catch (err) {
+		error = errorRenderer ? errorRenderer(err, value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ErrorRenderer.default, {
+			data: value,
+			error: err,
+			showDetails,
+			onToggleDetails: () => {
+				setShowDetails(!showDetails);
+			}
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": "JSON viewer",
+		className: (0, _fuf_stack_pixel_utils.cn)(className),
+		role: "region",
+		children: error ?? content
+	});
+};
+//#endregion
+exports.default = Json;
+
+//# sourceMappingURL=Json.cjs.map

package/dist/Json/Json.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Json.cjs","names":["NullRenderer","getValue","JsonView","CopiedRenderer","ErrorRenderer"],"sources":["../../src/Json/Json.tsx"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\n\nimport type { ReactNode } from 'react';\n\nimport { useState } from 'react';\n\n// INFO: react-json-view is bundled with --dts-resolve for now (dev dep)\nimport JsonView from '@uiw/react-json-view';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { getValue } from './jsonParser';\nimport CopiedRenderer from './subcomponents/CopiedRenderer';\nimport ErrorRenderer from './subcomponents/ErrorRenderer';\nimport NullRenderer from './subcomponents/NullRenderer';\n\nimport './theme.css';\n\n/**\n * Handles copying text or object values to clipboard.\n *\n * @param rawValue - The original value to copy (can be an object or primitive)\n * @param onCopy - Optional callback function triggered after copying with the copied value\n *\n * This function:\n * 1. Detects if the value is an object (not null and typeof 'object')\n * 2. Converts objects to JSON strings for clipboard copying\n * 3. Uses setTimeout to write the value to clipboard in the next render cycle\n *    - This is necessary because JsonView (CopiedRenderer) normally handles copying itself,\n *      but its copied value doesn't follow the same isObject logic\n *    - By using setTimeout, we ensure our properly formatted value overwrites any previous copy operation\n * 4. Calls the optional onCopy callback with the copied value if provided\n *\n * Note: The text parameter is kept for API consistency but is not used in the copying process\n */\nconst handleCopy = (rawValue?: unknown, onCopy?: JsonProps['onCopy']) => {\n  // determine of copied value is object-like\n  let isObject = false;\n  try {\n    if (rawValue !== NullRenderer && typeof rawValue === 'object') {\n      isObject = true;\n    }\n  } catch (_err) {\n    // ignore\n  }\n  const copyValue = isObject\n    ? JSON.stringify(rawValue as string, null, 2)\n    : (rawValue as string);\n\n  // JsonView (CopiedRenderer) does copy on its own but doesn't handle\n  // object serialization correctly. We use setTimeout to overwrite its\n  // clipboard value with our properly formatted version in the next tick.\n  setTimeout(async () => {\n    return navigator.clipboard.writeText(copyValue);\n  }, 1);\n\n  // if cb provided call it with copyValue\n  if (onCopy) {\n    onCopy(copyValue);\n  }\n};\n\nexport interface JsonProps {\n  /** CSS class name */\n  className?: string;\n  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n  collapsed?: boolean | number;\n  /** Optional custom error renderer */\n  errorRenderer?: (error: Error, data: string | object) => ReactNode;\n  /** Optional maximum height of the JSON viewer */\n  maxHeight?: string | number;\n  /** Callback when copy action is performed */\n  onCopy?: (copiedValue: string) => void;\n  /** Object to be visualized JSON string or object */\n  value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)\n * with improved error handling, accessibility, and customization options\n */\nconst Json = ({\n  className = undefined,\n  collapsed = false,\n  errorRenderer = undefined,\n  maxHeight = undefined,\n  onCopy = undefined,\n  value,\n}: JsonProps) => {\n  const [showDetails, setShowDetails] = useState(false);\n\n  let content: ReactNode = null;\n  let error: ReactNode = null;\n\n  try {\n    const parsedValue = getValue(value);\n    content = (\n      <div\n        className=\"relative\"\n        style={{ maxHeight, overflowY: maxHeight ? 'auto' : undefined }}\n      >\n        <JsonView\n          className=\"pr-5\"\n          collapsed={collapsed}\n          displayDataTypes={false}\n          value={parsedValue}\n          onCopied={(_, rawValue) => {\n            handleCopy(rawValue, onCopy);\n          }}\n        >\n          <CopiedRenderer />\n          <NullRenderer />\n        </JsonView>\n      </div>\n    );\n  } catch (err) {\n    const defaultError = (\n      <ErrorRenderer\n        data={value}\n        error={err}\n        showDetails={showDetails}\n        onToggleDetails={() => {\n          setShowDetails(!showDetails);\n        }}\n      />\n    );\n\n    error = errorRenderer ? errorRenderer(err as Error, value) : defaultError;\n  }\n\n  return (\n    <div aria-label=\"JSON viewer\" className={cn(className)} role=\"region\">\n      {error ?? content}\n    </div>\n  );\n};\n\nexport default Json;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,cAAc,UAAoB,WAAiC;CAEvE,IAAI,WAAW;CACf,IAAI;EACF,IAAI,aAAaA,qBAAAA,WAAgB,OAAO,aAAa,UACnD,WAAW;CAEf,SAAS,MAAM,CAEf;CACA,MAAM,YAAY,WACd,KAAK,UAAU,UAAoB,MAAM,CAAC,IACzC;CAKL,WAAW,YAAY;EACrB,OAAO,UAAU,UAAU,UAAU,SAAS;CAChD,GAAG,CAAC;CAGJ,IAAI,QACF,OAAO,SAAS;AAEpB;;;;;AAqBA,MAAM,QAAQ,EACZ,YAAY,KAAA,GACZ,YAAY,OACZ,gBAAgB,KAAA,GAChB,YAAY,KAAA,GACZ,SAAS,KAAA,GACT,YACe;CACf,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,KAAK;CAEpD,IAAI,UAAqB;CACzB,IAAI,QAAmB;CAEvB,IAAI;EACF,MAAM,cAAcC,mBAAAA,SAAS,KAAK;EAClC,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE;IAAW,WAAW,YAAY,SAAS,KAAA;GAAU;aAE9D,iBAAA,GAAA,kBAAA,MAACC,cAAAA,SAAD;IACE,WAAU;IACC;IACX,kBAAkB;IAClB,OAAO;IACP,WAAW,GAAG,aAAa;KACzB,WAAW,UAAU,MAAM;IAC7B;cAPF,CASE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,SAAD,CAAiB,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAACH,qBAAAA,SAAD,CAAe,CAAA,CACP;;EACP,CAAA;CAET,SAAS,KAAK;EAYZ,QAAQ,gBAAgB,cAAc,KAAc,KAAK,IAAI,iBAAA,GAAA,kBAAA,KAV1DI,sBAAAA,SAAD;GACE,MAAM;GACN,OAAO;GACM;GACb,uBAAuB;IACrB,eAAe,CAAC,WAAW;GAC7B;EACD,CAGqE;CAC1E;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAW;EAAc,YAAA,GAAA,uBAAA,IAAc,SAAS;EAAG,MAAK;YAC1D,SAAS;CACP,CAAA;AAET"}

package/dist/Json/Json.d.cts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+//#region src/Json/Json.d.ts
+interface JsonProps {
+  /** CSS class name */
+  className?: string;
+  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */
+  collapsed?: boolean | number;
+  /** Optional custom error renderer */
+  errorRenderer?: (error: Error, data: string | object) => ReactNode;
+  /** Optional maximum height of the JSON viewer */
+  maxHeight?: string | number;
+  /** Callback when copy action is performed */
+  onCopy?: (copiedValue: string) => void;
+  /** Object to be visualized JSON string or object */
+  value: string | object;
+}
+/**
+ * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
+ * with improved error handling, accessibility, and customization options
+ */
+declare const Json: ({
+  className,
+  collapsed,
+  errorRenderer,
+  maxHeight,
+  onCopy,
+  value
+}: JsonProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Json, JsonProps };
+//# sourceMappingURL=Json.d.cts.map

package/dist/Json/Json.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Json.d.cts","names":[],"sources":["../../src/Json/Json.tsx"],"mappings":";;;UA8DiB,SAAA;EAAA;EAEf,SAAA;;EAEA,SAAA;EAFA;EAIA,aAAA,IAAiB,KAAA,EAAO,KAAA,EAAO,IAAA,sBAA0B,SAAS;EAAlE;EAEA,SAAA;EAFiB;EAIjB,MAAA,IAAU,WAAA;EAJ+C;EAMzD,KAAA;AAAA;;;;AAAK;cAOD,IAAA;EAAQ,SAAA;EAAA,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA,MAAA;EAAA;AAAA,GAOX,SAAA,iCAAS,GAAA,CAAA,OAAA"}

package/dist/Json/Json.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+//#region src/Json/Json.d.ts
+interface JsonProps {
+  /** CSS class name */
+  className?: string;
+  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */
+  collapsed?: boolean | number;
+  /** Optional custom error renderer */
+  errorRenderer?: (error: Error, data: string | object) => ReactNode;
+  /** Optional maximum height of the JSON viewer */
+  maxHeight?: string | number;
+  /** Callback when copy action is performed */
+  onCopy?: (copiedValue: string) => void;
+  /** Object to be visualized JSON string or object */
+  value: string | object;
+}
+/**
+ * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
+ * with improved error handling, accessibility, and customization options
+ */
+declare const Json: ({
+  className,
+  collapsed,
+  errorRenderer,
+  maxHeight,
+  onCopy,
+  value
+}: JsonProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Json, JsonProps };
+//# sourceMappingURL=Json.d.ts.map

package/dist/Json/Json.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Json.d.ts","names":[],"sources":["../../src/Json/Json.tsx"],"mappings":";;;UA8DiB,SAAA;EAAA;EAEf,SAAA;;EAEA,SAAA;EAFA;EAIA,aAAA,IAAiB,KAAA,EAAO,KAAA,EAAO,IAAA,sBAA0B,SAAS;EAAlE;EAEA,SAAA;EAFiB;EAIjB,MAAA,IAAU,WAAA;EAJ+C;EAMzD,KAAA;AAAA;;;;AAAK;cAOD,IAAA;EAAQ,SAAA;EAAA,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA,MAAA;EAAA;AAAA,GAOX,SAAA,iCAAS,GAAA,CAAA,OAAA"}

package/dist/Json/Json.js

@@ -0,0 +1,86 @@
+import JsonView from "../node_modules/.pnpm/@uiw_react-json-view@2.0.0-alpha.42_@babel_runtime@7.29.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@uiw/react-json-view/esm/index.js";
+import { getValue } from "./jsonParser.js";
+import CopiedRenderer from "./subcomponents/CopiedRenderer.js";
+import ErrorRenderer from "./subcomponents/ErrorRenderer.js";
+import NullRenderer from "./subcomponents/NullRenderer.js";
+/* empty css      */
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/Json/Json.tsx
+/**
+* Handles copying text or object values to clipboard.
+*
+* @param rawValue - The original value to copy (can be an object or primitive)
+* @param onCopy - Optional callback function triggered after copying with the copied value
+*
+* This function:
+* 1. Detects if the value is an object (not null and typeof 'object')
+* 2. Converts objects to JSON strings for clipboard copying
+* 3. Uses setTimeout to write the value to clipboard in the next render cycle
+*    - This is necessary because JsonView (CopiedRenderer) normally handles copying itself,
+*      but its copied value doesn't follow the same isObject logic
+*    - By using setTimeout, we ensure our properly formatted value overwrites any previous copy operation
+* 4. Calls the optional onCopy callback with the copied value if provided
+*
+* Note: The text parameter is kept for API consistency but is not used in the copying process
+*/
+const handleCopy = (rawValue, onCopy) => {
+	let isObject = false;
+	try {
+		if (rawValue !== NullRenderer && typeof rawValue === "object") isObject = true;
+	} catch (_err) {}
+	const copyValue = isObject ? JSON.stringify(rawValue, null, 2) : rawValue;
+	setTimeout(async () => {
+		return navigator.clipboard.writeText(copyValue);
+	}, 1);
+	if (onCopy) onCopy(copyValue);
+};
+/**
+* Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
+* with improved error handling, accessibility, and customization options
+*/
+const Json = ({ className = void 0, collapsed = false, errorRenderer = void 0, maxHeight = void 0, onCopy = void 0, value }) => {
+	const [showDetails, setShowDetails] = useState(false);
+	let content = null;
+	let error = null;
+	try {
+		const parsedValue = getValue(value);
+		content = /* @__PURE__ */ jsx("div", {
+			className: "relative",
+			style: {
+				maxHeight,
+				overflowY: maxHeight ? "auto" : void 0
+			},
+			children: /* @__PURE__ */ jsxs(JsonView, {
+				className: "pr-5",
+				collapsed,
+				displayDataTypes: false,
+				value: parsedValue,
+				onCopied: (_, rawValue) => {
+					handleCopy(rawValue, onCopy);
+				},
+				children: [/* @__PURE__ */ jsx(CopiedRenderer, {}), /* @__PURE__ */ jsx(NullRenderer, {})]
+			})
+		});
+	} catch (err) {
+		error = errorRenderer ? errorRenderer(err, value) : /* @__PURE__ */ jsx(ErrorRenderer, {
+			data: value,
+			error: err,
+			showDetails,
+			onToggleDetails: () => {
+				setShowDetails(!showDetails);
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "JSON viewer",
+		className: cn(className),
+		role: "region",
+		children: error ?? content
+	});
+};
+//#endregion
+export { Json as default };
+
+//# sourceMappingURL=Json.js.map

package/dist/Json/Json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Json.js","names":[],"sources":["../../src/Json/Json.tsx"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\n\nimport type { ReactNode } from 'react';\n\nimport { useState } from 'react';\n\n// INFO: react-json-view is bundled with --dts-resolve for now (dev dep)\nimport JsonView from '@uiw/react-json-view';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { getValue } from './jsonParser';\nimport CopiedRenderer from './subcomponents/CopiedRenderer';\nimport ErrorRenderer from './subcomponents/ErrorRenderer';\nimport NullRenderer from './subcomponents/NullRenderer';\n\nimport './theme.css';\n\n/**\n * Handles copying text or object values to clipboard.\n *\n * @param rawValue - The original value to copy (can be an object or primitive)\n * @param onCopy - Optional callback function triggered after copying with the copied value\n *\n * This function:\n * 1. Detects if the value is an object (not null and typeof 'object')\n * 2. Converts objects to JSON strings for clipboard copying\n * 3. Uses setTimeout to write the value to clipboard in the next render cycle\n *    - This is necessary because JsonView (CopiedRenderer) normally handles copying itself,\n *      but its copied value doesn't follow the same isObject logic\n *    - By using setTimeout, we ensure our properly formatted value overwrites any previous copy operation\n * 4. Calls the optional onCopy callback with the copied value if provided\n *\n * Note: The text parameter is kept for API consistency but is not used in the copying process\n */\nconst handleCopy = (rawValue?: unknown, onCopy?: JsonProps['onCopy']) => {\n  // determine of copied value is object-like\n  let isObject = false;\n  try {\n    if (rawValue !== NullRenderer && typeof rawValue === 'object') {\n      isObject = true;\n    }\n  } catch (_err) {\n    // ignore\n  }\n  const copyValue = isObject\n    ? JSON.stringify(rawValue as string, null, 2)\n    : (rawValue as string);\n\n  // JsonView (CopiedRenderer) does copy on its own but doesn't handle\n  // object serialization correctly. We use setTimeout to overwrite its\n  // clipboard value with our properly formatted version in the next tick.\n  setTimeout(async () => {\n    return navigator.clipboard.writeText(copyValue);\n  }, 1);\n\n  // if cb provided call it with copyValue\n  if (onCopy) {\n    onCopy(copyValue);\n  }\n};\n\nexport interface JsonProps {\n  /** CSS class name */\n  className?: string;\n  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n  collapsed?: boolean | number;\n  /** Optional custom error renderer */\n  errorRenderer?: (error: Error, data: string | object) => ReactNode;\n  /** Optional maximum height of the JSON viewer */\n  maxHeight?: string | number;\n  /** Callback when copy action is performed */\n  onCopy?: (copiedValue: string) => void;\n  /** Object to be visualized JSON string or object */\n  value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)\n * with improved error handling, accessibility, and customization options\n */\nconst Json = ({\n  className = undefined,\n  collapsed = false,\n  errorRenderer = undefined,\n  maxHeight = undefined,\n  onCopy = undefined,\n  value,\n}: JsonProps) => {\n  const [showDetails, setShowDetails] = useState(false);\n\n  let content: ReactNode = null;\n  let error: ReactNode = null;\n\n  try {\n    const parsedValue = getValue(value);\n    content = (\n      <div\n        className=\"relative\"\n        style={{ maxHeight, overflowY: maxHeight ? 'auto' : undefined }}\n      >\n        <JsonView\n          className=\"pr-5\"\n          collapsed={collapsed}\n          displayDataTypes={false}\n          value={parsedValue}\n          onCopied={(_, rawValue) => {\n            handleCopy(rawValue, onCopy);\n          }}\n        >\n          <CopiedRenderer />\n          <NullRenderer />\n        </JsonView>\n      </div>\n    );\n  } catch (err) {\n    const defaultError = (\n      <ErrorRenderer\n        data={value}\n        error={err}\n        showDetails={showDetails}\n        onToggleDetails={() => {\n          setShowDetails(!showDetails);\n        }}\n      />\n    );\n\n    error = errorRenderer ? errorRenderer(err as Error, value) : defaultError;\n  }\n\n  return (\n    <div aria-label=\"JSON viewer\" className={cn(className)} role=\"region\">\n      {error ?? content}\n    </div>\n  );\n};\n\nexport default Json;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,cAAc,UAAoB,WAAiC;CAEvE,IAAI,WAAW;CACf,IAAI;EACF,IAAI,aAAa,gBAAgB,OAAO,aAAa,UACnD,WAAW;CAEf,SAAS,MAAM,CAEf;CACA,MAAM,YAAY,WACd,KAAK,UAAU,UAAoB,MAAM,CAAC,IACzC;CAKL,WAAW,YAAY;EACrB,OAAO,UAAU,UAAU,UAAU,SAAS;CAChD,GAAG,CAAC;CAGJ,IAAI,QACF,OAAO,SAAS;AAEpB;;;;;AAqBA,MAAM,QAAQ,EACZ,YAAY,KAAA,GACZ,YAAY,OACZ,gBAAgB,KAAA,GAChB,YAAY,KAAA,GACZ,SAAS,KAAA,GACT,YACe;CACf,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,IAAI,UAAqB;CACzB,IAAI,QAAmB;CAEvB,IAAI;EACF,MAAM,cAAc,SAAS,KAAK;EAClC,UACE,oBAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE;IAAW,WAAW,YAAY,SAAS,KAAA;GAAU;aAE9D,qBAAC,UAAD;IACE,WAAU;IACC;IACX,kBAAkB;IAClB,OAAO;IACP,WAAW,GAAG,aAAa;KACzB,WAAW,UAAU,MAAM;IAC7B;cAPF,CASE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,cAAD,CAAe,CAAA,CACP;;EACP,CAAA;CAET,SAAS,KAAK;EAYZ,QAAQ,gBAAgB,cAAc,KAAc,KAAK,IAAI,oBAV1D,eAAD;GACE,MAAM;GACN,OAAO;GACM;GACb,uBAAuB;IACrB,eAAe,CAAC,WAAW;GAC7B;EACD,CAGqE;CAC1E;CAEA,OACE,oBAAC,OAAD;EAAK,cAAW;EAAc,WAAW,GAAG,SAAS;EAAG,MAAK;YAC1D,SAAS;CACP,CAAA;AAET"}

package/dist/Json/index.cjs

@@ -1,11 +1,12 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Json = require("./Json.cjs");
+//#region src/Json/index.ts
+var Json_default = require_Json.default;
+//#endregion
+exports.Json = require_Json.default;
+exports.default = Json_default;
 
-
-var _chunkP7QMPWKScjs = require('../chunk-P7QMPWKS.cjs');
-require('../chunk-FVQDVD3E.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-exports.Json = _chunkP7QMPWKScjs.Json_default; exports.default = _chunkP7QMPWKScjs.Json_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Json/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Json/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACF,iGAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Json/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Json"],"sources":["../../src/Json/index.ts"],"sourcesContent":["import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":";;;;;;AAMA,IAAA,eAAeA,aAAAA"}

package/dist/Json/index.d.cts

@@ -1,8 +1,2 @@
-import { J as Json } from '../Json-Dny90Wml.cjs';
-export { a as JsonProps } from '../Json-Dny90Wml.cjs';
-import 'react/jsx-runtime';
-import 'react';
-
-
-
-export { Json, Json as default };
+import { Json, JsonProps } from "./Json.cjs";
+export { Json, Json as default, type JsonProps };

package/dist/Json/index.d.ts

@@ -1,8 +1,2 @@
-import { J as Json } from '../Json-Dny90Wml.js';
-export { a as JsonProps } from '../Json-Dny90Wml.js';
-import 'react/jsx-runtime';
-import 'react';
-
-
-
-export { Json, Json as default };
+import { Json, JsonProps } from "./Json.js";
+export { Json, Json as default, type JsonProps };

package/dist/Json/index.js

@@ -1,11 +1,7 @@
-import {
-  Json_default,
-  Json_default2
-} from "../chunk-NZ5FWOC6.js";
-import "../chunk-2NMIKTA5.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Json_default as Json,
-  Json_default2 as default
-};
+import Json from "./Json.js";
+//#region src/Json/index.ts
+var Json_default = Json;
+//#endregion
+export { Json, Json_default as default };
+
 //# sourceMappingURL=index.js.map

package/dist/Json/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Json/index.ts"],"sourcesContent":["import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":";;AAMA,IAAA,eAAe"}

package/dist/Json/jsonParser.cjs

@@ -0,0 +1,21 @@
+//#region src/Json/jsonParser.ts
+var JsonParseError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "JsonParseError";
+	}
+};
+const getValue = (value) => {
+	if (typeof value === "string") 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 JsonParseError(`${typeof value} cannot be visualized`);
+};
+//#endregion
+exports.getValue = getValue;
+
+//# sourceMappingURL=jsonParser.cjs.map

package/dist/Json/jsonParser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonParser.cjs","names":[],"sources":["../../src/Json/jsonParser.ts"],"sourcesContent":["export class JsonParseError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = 'JsonParseError';\n  }\n}\n\nexport const getValue = (value: string | object): object => {\n  if (typeof value === 'string') {\n    try {\n      return JSON.parse(value);\n    } catch (error) {\n      throw new JsonParseError(\n        `Invalid JSON string: ${(error as Error).message}`,\n      );\n    }\n  }\n  if (value === null || value === undefined) {\n    throw new JsonParseError('Value cannot be null or undefined');\n  }\n  if (typeof value === 'object') {\n    return value;\n  }\n  throw new JsonParseError(`${typeof value} cannot be visualized`);\n};\n"],"mappings":";AAAA,IAAa,iBAAb,cAAoC,MAAM;CACxC,YAAY,SAAiB;EAC3B,MAAM,OAAO;EACb,KAAK,OAAO;CACd;AACF;AAEA,MAAa,YAAY,UAAmC;CAC1D,IAAI,OAAO,UAAU,UACnB,IAAI;EACF,OAAO,KAAK,MAAM,KAAK;CACzB,SAAS,OAAO;EACd,MAAM,IAAI,eACR,wBAAyB,MAAgB,SAC3C;CACF;CAEF,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,MAAM,IAAI,eAAe,mCAAmC;CAE9D,IAAI,OAAO,UAAU,UACnB,OAAO;CAET,MAAM,IAAI,eAAe,GAAG,OAAO,MAAM,sBAAsB;AACjE"}

package/dist/Json/jsonParser.js

@@ -0,0 +1,21 @@
+//#region src/Json/jsonParser.ts
+var JsonParseError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "JsonParseError";
+	}
+};
+const getValue = (value) => {
+	if (typeof value === "string") 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 JsonParseError(`${typeof value} cannot be visualized`);
+};
+//#endregion
+export { getValue };
+
+//# sourceMappingURL=jsonParser.js.map

package/dist/Json/jsonParser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonParser.js","names":[],"sources":["../../src/Json/jsonParser.ts"],"sourcesContent":["export class JsonParseError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = 'JsonParseError';\n  }\n}\n\nexport const getValue = (value: string | object): object => {\n  if (typeof value === 'string') {\n    try {\n      return JSON.parse(value);\n    } catch (error) {\n      throw new JsonParseError(\n        `Invalid JSON string: ${(error as Error).message}`,\n      );\n    }\n  }\n  if (value === null || value === undefined) {\n    throw new JsonParseError('Value cannot be null or undefined');\n  }\n  if (typeof value === 'object') {\n    return value;\n  }\n  throw new JsonParseError(`${typeof value} cannot be visualized`);\n};\n"],"mappings":";AAAA,IAAa,iBAAb,cAAoC,MAAM;CACxC,YAAY,SAAiB;EAC3B,MAAM,OAAO;EACb,KAAK,OAAO;CACd;AACF;AAEA,MAAa,YAAY,UAAmC;CAC1D,IAAI,OAAO,UAAU,UACnB,IAAI;EACF,OAAO,KAAK,MAAM,KAAK;CACzB,SAAS,OAAO;EACd,MAAM,IAAI,eACR,wBAAyB,MAAgB,SAC3C;CACF;CAEF,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,MAAM,IAAI,eAAe,mCAAmC;CAE9D,IAAI,OAAO,UAAU,UACnB,OAAO;CAET,MAAM,IAAI,eAAe,GAAG,OAAO,MAAM,sBAAsB;AACjE"}

package/dist/Json/subcomponents/CopiedRenderer.cjs

@@ -0,0 +1,46 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../node_modules/.pnpm/@uiw_react-json-view@2.0.0-alpha.42_@babel_runtime@7.29.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@uiw/react-json-view/esm/index.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_icons_hi = require("react-icons/hi");
+//#region src/Json/subcomponents/CopiedRenderer.tsx
+/**
+* A custom renderer for the JsonView's copy functionality that provides an accessible
+* and interactive copy button with visual feedback.
+*
+* This component overrides the default copy button implementation from @uiw/react-json-view
+* to fix flickering issues and improve accessibility. It renders a button that:
+* - Shows different icons for copied/not copied states
+* - Supports keyboard navigation
+* - Provides proper ARIA labels
+* - Maintains consistent positioning
+*
+* @returns A JsonView.Copied component with custom render implementation
+*/
+const CopiedRenderer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default.Copied, { render: (props) => {
+		const { style, onClick, className } = props;
+		const isCopied = props["data-copied"];
+		const elmClasses = (0, _fuf_stack_pixel_utils.cn)(className, "fill-transparent! absolute -right-4 -top-[2px] h-4 w-4 pl-1", { "text-success": isCopied });
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter" || e.key === " ") onClick?.(e);
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
+			className: "ml-0! h-[1em]! w-0! relative",
+			"data-testid": "copy-button",
+			onKeyDown: handleKeyDown,
+			role: "button",
+			style,
+			tabIndex: 0,
+			onClick: (e) => {
+				return onClick?.(e);
+			},
+			children: isCopied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_hi.HiOutlineClipboardCheck, { className: elmClasses }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_hi.HiOutlineClipboard, { className: elmClasses })
+		});
+	} });
+};
+//#endregion
+exports.default = CopiedRenderer;
+
+//# sourceMappingURL=CopiedRenderer.cjs.map

package/dist/Json/subcomponents/CopiedRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopiedRenderer.cjs","names":["JsonView","HiOutlineClipboardCheck","HiOutlineClipboard"],"sources":["../../../src/Json/subcomponents/CopiedRenderer.tsx"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\n\nimport type { KeyboardEvent, MouseEvent } from 'react';\n\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\n// INFO: react-json-view is bundled with --dts-resolve for now (dev dep)\nimport JsonView from '@uiw/react-json-view';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\n/**\n * A custom renderer for the JsonView's copy functionality that provides an accessible\n * and interactive copy button with visual feedback.\n *\n * This component overrides the default copy button implementation from @uiw/react-json-view\n * to fix flickering issues and improve accessibility. It renders a button that:\n * - Shows different icons for copied/not copied states\n * - Supports keyboard navigation\n * - Provides proper ARIA labels\n * - Maintains consistent positioning\n *\n * @returns A JsonView.Copied component with custom render implementation\n */\nconst CopiedRenderer = () => {\n  return (\n    <JsonView.Copied\n      render={(props) => {\n        const { style, onClick, className } = props;\n\n        // @ts-expect-error this is ok\n\n        const isCopied = props['data-copied'] as boolean;\n\n        const elmClasses = cn(\n          className,\n          'fill-transparent! absolute -right-4 -top-[2px] h-4 w-4 pl-1',\n          { 'text-success': isCopied },\n        );\n\n        const handleKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onClick?.(e as unknown as MouseEvent<SVGSVGElement>);\n          }\n        };\n\n        return (\n          <span\n            aria-label={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}\n            className=\"ml-0! h-[1em]! w-0! relative\"\n            data-testid=\"copy-button\"\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            style={style}\n            tabIndex={0}\n            onClick={(e) => {\n              return onClick?.(e as unknown as MouseEvent<SVGSVGElement>);\n            }}\n          >\n            {isCopied ? (\n              <HiOutlineClipboardCheck className={elmClasses} />\n            ) : (\n              <HiOutlineClipboard className={elmClasses} />\n            )}\n          </span>\n        );\n      }}\n    />\n  );\n};\n\nexport default CopiedRenderer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,MAAM,uBAAuB;CAC3B,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,QAAS,QAAV,EACE,SAAS,UAAU;EACjB,MAAM,EAAE,OAAO,SAAS,cAAc;EAItC,MAAM,WAAW,MAAM;EAEvB,MAAM,cAAA,GAAA,uBAAA,IACJ,WACA,+DACA,EAAE,gBAAgB,SAAS,CAC7B;EAEA,MAAM,iBAAiB,MAAsC;GAC3D,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC,UAAU,CAAyC;EAEvD;EAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,cAAY,WAAW,wBAAwB;GAC/C,WAAU;GACV,eAAY;GACZ,WAAW;GACX,MAAK;GACE;GACP,UAAU;GACV,UAAU,MAAM;IACd,OAAO,UAAU,CAAyC;GAC5D;aAEC,WACC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,yBAAD,EAAyB,WAAW,WAAa,CAAA,IAEjD,iBAAA,GAAA,kBAAA,KAACC,eAAAA,oBAAD,EAAoB,WAAW,WAAa,CAAA;EAE1C,CAAA;CAEV,EACD,CAAA;AAEL"}

package/dist/Json/subcomponents/CopiedRenderer.js

@@ -0,0 +1,45 @@
+import JsonView from "../../node_modules/.pnpm/@uiw_react-json-view@2.0.0-alpha.42_@babel_runtime@7.29.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@uiw/react-json-view/esm/index.js";
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+//#region src/Json/subcomponents/CopiedRenderer.tsx
+/**
+* A custom renderer for the JsonView's copy functionality that provides an accessible
+* and interactive copy button with visual feedback.
+*
+* This component overrides the default copy button implementation from @uiw/react-json-view
+* to fix flickering issues and improve accessibility. It renders a button that:
+* - Shows different icons for copied/not copied states
+* - Supports keyboard navigation
+* - Provides proper ARIA labels
+* - Maintains consistent positioning
+*
+* @returns A JsonView.Copied component with custom render implementation
+*/
+const CopiedRenderer = () => {
+	return /* @__PURE__ */ jsx(JsonView.Copied, { render: (props) => {
+		const { style, onClick, className } = props;
+		const isCopied = props["data-copied"];
+		const elmClasses = cn(className, "fill-transparent! absolute -right-4 -top-[2px] h-4 w-4 pl-1", { "text-success": isCopied });
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter" || e.key === " ") onClick?.(e);
+		};
+		return /* @__PURE__ */ jsx("span", {
+			"aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
+			className: "ml-0! h-[1em]! w-0! relative",
+			"data-testid": "copy-button",
+			onKeyDown: handleKeyDown,
+			role: "button",
+			style,
+			tabIndex: 0,
+			onClick: (e) => {
+				return onClick?.(e);
+			},
+			children: isCopied ? /* @__PURE__ */ jsx(HiOutlineClipboardCheck, { className: elmClasses }) : /* @__PURE__ */ jsx(HiOutlineClipboard, { className: elmClasses })
+		});
+	} });
+};
+//#endregion
+export { CopiedRenderer as default };
+
+//# sourceMappingURL=CopiedRenderer.js.map

package/dist/Json/subcomponents/CopiedRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopiedRenderer.js","names":[],"sources":["../../../src/Json/subcomponents/CopiedRenderer.tsx"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\n\nimport type { KeyboardEvent, MouseEvent } from 'react';\n\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\n// INFO: react-json-view is bundled with --dts-resolve for now (dev dep)\nimport JsonView from '@uiw/react-json-view';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\n/**\n * A custom renderer for the JsonView's copy functionality that provides an accessible\n * and interactive copy button with visual feedback.\n *\n * This component overrides the default copy button implementation from @uiw/react-json-view\n * to fix flickering issues and improve accessibility. It renders a button that:\n * - Shows different icons for copied/not copied states\n * - Supports keyboard navigation\n * - Provides proper ARIA labels\n * - Maintains consistent positioning\n *\n * @returns A JsonView.Copied component with custom render implementation\n */\nconst CopiedRenderer = () => {\n  return (\n    <JsonView.Copied\n      render={(props) => {\n        const { style, onClick, className } = props;\n\n        // @ts-expect-error this is ok\n\n        const isCopied = props['data-copied'] as boolean;\n\n        const elmClasses = cn(\n          className,\n          'fill-transparent! absolute -right-4 -top-[2px] h-4 w-4 pl-1',\n          { 'text-success': isCopied },\n        );\n\n        const handleKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onClick?.(e as unknown as MouseEvent<SVGSVGElement>);\n          }\n        };\n\n        return (\n          <span\n            aria-label={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}\n            className=\"ml-0! h-[1em]! w-0! relative\"\n            data-testid=\"copy-button\"\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            style={style}\n            tabIndex={0}\n            onClick={(e) => {\n              return onClick?.(e as unknown as MouseEvent<SVGSVGElement>);\n            }}\n          >\n            {isCopied ? (\n              <HiOutlineClipboardCheck className={elmClasses} />\n            ) : (\n              <HiOutlineClipboard className={elmClasses} />\n            )}\n          </span>\n        );\n      }}\n    />\n  );\n};\n\nexport default CopiedRenderer;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,uBAAuB;CAC3B,OACE,oBAAC,SAAS,QAAV,EACE,SAAS,UAAU;EACjB,MAAM,EAAE,OAAO,SAAS,cAAc;EAItC,MAAM,WAAW,MAAM;EAEvB,MAAM,aAAa,GACjB,WACA,+DACA,EAAE,gBAAgB,SAAS,CAC7B;EAEA,MAAM,iBAAiB,MAAsC;GAC3D,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC,UAAU,CAAyC;EAEvD;EAEA,OACE,oBAAC,QAAD;GACE,cAAY,WAAW,wBAAwB;GAC/C,WAAU;GACV,eAAY;GACZ,WAAW;GACX,MAAK;GACE;GACP,UAAU;GACV,UAAU,MAAM;IACd,OAAO,UAAU,CAAyC;GAC5D;aAEC,WACC,oBAAC,yBAAD,EAAyB,WAAW,WAAa,CAAA,IAEjD,oBAAC,oBAAD,EAAoB,WAAW,WAAa,CAAA;EAE1C,CAAA;CAEV,EACD,CAAA;AAEL"}

package/dist/Json/subcomponents/ErrorRenderer.cjs

@@ -0,0 +1,53 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_Button = require("../../Button/Button.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_icons_fa = require("react-icons/fa");
+//#region src/Json/subcomponents/ErrorRenderer.tsx
+/**
+* Displays JSON parsing or processing errors in a user-friendly format with expandable details.
+*
+* This component provides a consistent error display with:
+* - A prominent error message
+* - Expandable details section
+* - Original data preview
+* - Accessibility support via ARIA attributes
+*/
+const ErrorRenderer = ({ error, data, showDetails, onToggleDetails }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-live": "polite",
+		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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full justify-between gap-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaTimesCircle, {
+					"aria-hidden": "true",
+					className: "mr-2"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium",
+					children: "Failed to parse JSON data"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				"aria-controls": "error-details",
+				"aria-expanded": showDetails,
+				color: "danger",
+				onClick: onToggleDetails,
+				size: "sm",
+				variant: "light",
+				children: showDetails ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaChevronUp, { "aria-hidden": "true" }), " Hide Details"] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaChevronDown, { "aria-hidden": "true" }), " Show Details"] })
+			})]
+		}), showDetails ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-4 w-full text-left",
+			id: "error-details",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Error:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: error instanceof Error ? `${error.name}: ${error.message}` : "Unknown error" })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Data:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: typeof data !== "string" ? JSON.stringify(data, null, 2) : data })]
+			})]
+		}) : null]
+	});
+};
+//#endregion
+exports.default = ErrorRenderer;
+
+//# sourceMappingURL=ErrorRenderer.cjs.map

package/dist/Json/subcomponents/ErrorRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorRenderer.cjs","names":["FaTimesCircle","Button","FaChevronUp","FaChevronDown"],"sources":["../../../src/Json/subcomponents/ErrorRenderer.tsx"],"sourcesContent":["import { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\n\nimport { Button } from '../../Button';\n\ninterface ErrorRendererProps {\n  /** The error that occurred during JSON parsing or processing */\n  error: unknown;\n  /** The original data that caused the error */\n  data: string | object;\n  /** Controls whether detailed error information is visible */\n  showDetails: boolean;\n  /** Callback function to toggle the visibility of error details */\n  onToggleDetails: () => void;\n}\n\n/**\n * Displays JSON parsing or processing errors in a user-friendly format with expandable details.\n *\n * This component provides a consistent error display with:\n * - A prominent error message\n * - Expandable details section\n * - Original data preview\n * - Accessibility support via ARIA attributes\n */\nconst ErrorRenderer = ({\n  error,\n  data,\n  showDetails,\n  onToggleDetails,\n}: ErrorRendererProps) => {\n  return (\n    <div\n      aria-live=\"polite\"\n      className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n      role=\"alert\"\n    >\n      <div className=\"flex w-full justify-between gap-6\">\n        <div className=\"flex items-center\">\n          <FaTimesCircle aria-hidden=\"true\" className=\"mr-2\" />\n          <span className=\"font-medium\">Failed to parse JSON data</span>\n        </div>\n        <Button\n          aria-controls=\"error-details\"\n          aria-expanded={showDetails}\n          color=\"danger\"\n          onClick={onToggleDetails}\n          size=\"sm\"\n          variant=\"light\"\n        >\n          {showDetails ? (\n            <>\n              <FaChevronUp aria-hidden=\"true\" /> Hide Details\n            </>\n          ) : (\n            <>\n              <FaChevronDown aria-hidden=\"true\" /> Show Details\n            </>\n          )}\n        </Button>\n      </div>\n      {showDetails ? (\n        <div className=\"mt-4 w-full text-left\" id=\"error-details\">\n          <div>\n            <strong>Error:</strong>\n            <pre>\n              {error instanceof Error\n                ? `${error.name}: ${error.message}`\n                : 'Unknown error'}\n            </pre>\n          </div>\n          <div className=\"mt-4\">\n            <strong>Data:</strong>\n            <pre>\n              {typeof data !== 'string' ? JSON.stringify(data, null, 2) : data}\n            </pre>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ErrorRenderer;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,EACrB,OACA,MACA,aACA,sBACwB;CACxB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,WAAU;EACV,MAAK;YAHP,CAKE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,eAAAA,eAAD;KAAe,eAAY;KAAO,WAAU;IAAQ,CAAA,GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAc;IAA+B,CAAA,CAC1D;OACL,iBAAA,GAAA,kBAAA,KAACC,eAAAA,SAAD;IACE,iBAAc;IACd,iBAAe;IACf,OAAM;IACN,SAAS;IACT,MAAK;IACL,SAAQ;cAEP,cACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,eAAAA,aAAD,EAAa,eAAY,OAAQ,CAAA,GAAC,eAClC,EAAA,CAAA,IAEF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,eAAAA,eAAD,EAAe,eAAY,OAAQ,CAAA,GAAC,eACpC,EAAA,CAAA;GAEE,CAAA,CACL;MACJ,cACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;GAAwB,IAAG;aAA1C,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UAAQ,SAAc,CAAA,GACtB,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UACG,iBAAiB,QACd,GAAG,MAAM,KAAK,IAAI,MAAM,YACxB,gBACD,CAAA,CACF,EAAA,CAAA,GACL,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UAAQ,QAAa,CAAA,GACrB,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UACG,OAAO,SAAS,WAAW,KAAK,UAAU,MAAM,MAAM,CAAC,IAAI,KACzD,CAAA,CACF;KACF;OACH,IACD;;AAET"}