mantine-json-view - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

./dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],r):(l=typeof globalThis<"u"?globalThis:l||self,r(l.index={},l["react/jsx-runtime"],l.React,l["@mantine/core"]))})(this,function(l,r,i,s){"use strict";const d=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0}),C=s.createStyles((e,{literal:n,theme:t})=>{const{key:c,literals:o={}}=(t==null?void 0:t.colors)||{};return{key:{color:c},root:{alignItems:"center",gap:8,width:"100%"},value:{color:o[n.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function u({literal:e}){const{clipboardComponent:n,theme:t}=i.useContext(d),{classes:c}=C({literal:e,theme:t}),o=i.useMemo(()=>m(e),[e]);return r.jsxs(s.Flex,{className:c.root,px:"xs",children:[r.jsxs(s.Text,{fz:"md",children:[r.jsxs("span",{className:c.key,children:['"',e.key,'":']})," ",r.jsx("span",{className:c.value,children:o})]}),n!==void 0&&r.jsx(n,{value:o})]})}function p({object:e}){const{collapseComponent:n}=i.useContext(d),[t,c]=i.useState(!1);return r.jsxs(s.Flex,{direction:t?"row":"column",children:[r.jsxs(s.Flex,{sx:{gap:4,alignItems:"center"},children:[n!==void 0&&r.jsx(n,{collapsed:t,setCollapsed:c}),r.jsxs(s.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(s.Text,{fz:"md",children:'"object": {'}),r.jsxs(s.Text,{c:"dimmed",children:[e.children.length," ",e.children.length!==1?"items":"item"]}),t&&r.jsx(s.Text,{fz:"md",children:"}"})]})]}),!t&&r.jsx(s.Flex,{direction:"column",px:"xs",children:e.children.map((o,a)=>{switch(o.type){case"array":return r.jsx(f,{array:o},a);case"object":return r.jsx(p,{object:o},a);default:return r.jsx(u,{literal:o},a)}})}),!t&&r.jsx(s.Text,{fz:"md",children:"}"})]})}function f({array:e}){const{collapseComponent:n}=i.useContext(d),[t,c]=i.useState(!1);return r.jsxs(s.Flex,{direction:t?"row":"column",px:"xs",children:[r.jsxs(s.Flex,{sx:{gap:4,alignItems:"center"},children:[n!==void 0&&r.jsx(n,{collapsed:t,setCollapsed:c}),r.jsxs(s.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(s.Text,{fz:"md",children:'"array": ['}),r.jsxs(s.Text,{c:"dimmed",children:[e.children.length," ",e.children.length!==1?"items":"item"]}),t&&r.jsx(s.Text,{fz:"md",children:"]"})]})]}),!t&&r.jsx(s.Flex,{direction:"column",px:"xs",children:e.children.map((o,a)=>{switch(o.type){case"array":return r.jsx(f,{array:o},a);case"object":return r.jsx(p,{object:o},a);default:return r.jsx(u,{literal:o},a)}})}),!t&&r.jsx(s.Text,{fz:"md",children:"]"})]})}function x(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function b(e){try{const n=JSON.parse(e);if(Array.isArray(n))return y(n);if(x(n))return h(n);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function h(e){return{type:"object",children:Object.entries(e).map(([n,t])=>g(n,t))}}function y(e){return{type:"array",children:Object.entries(e).map(([n,t])=>g(n,t))}}function g(e,n){if(x(n))return h(n);if(Array.isArray(n))return y(n);if(typeof n=="boolean")return{type:"boolean",key:e,value:n};if(typeof n=="number")return{type:"number",key:e,value:n};if(typeof n=="string")return{type:"string",key:e,value:n};if(n===void 0)return{type:"undefined",key:e,value:n};if(n===null)return{type:"null",key:e,value:n};throw new Error(`Unable to parse value: ${n}`)}const j={parse:b};function T(e){return{ast:i.useMemo(()=>j.parse(e),[e]),json:e}}function w({collapseComponent:e,clipboardComponent:n,json:t,theme:c}){const{ast:o}=T(t);return r.jsx(d.Provider,{value:{collapseComponent:e,clipboardComponent:n,theme:c},children:o.type==="object"?r.jsx(p,{object:o}):r.jsx(f,{array:o})})}l.JsonView=w,l.useJsonParser=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],r):(l=typeof globalThis<"u"?globalThis:l||self,r(l.index={},l["react/jsx-runtime"],l.React,l["@mantine/core"]))})(this,function(l,r,i,o){"use strict";const p=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a(n){const{theme:e}=i.useContext(p);return r.jsx(o.Text,{...n,sx:{fontFamily:e==null?void 0:e.fontFamily}})}const b=o.createStyles((n,{literal:e,theme:t})=>{const{key:c,literals:s={}}=(t==null?void 0:t.colors)||{};return{key:{color:c},root:{alignItems:"center",gap:8,width:"100%"},value:{color:s[e.type]}}});function j(n){switch(n.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${n.value}"`;default:return n.value.toString()}}function x({literal:n}){const{clipboardComponent:e,theme:t}=i.useContext(p),{classes:c}=b({literal:n,theme:t}),s=i.useMemo(()=>j(n),[n]);return r.jsxs(o.Flex,{className:c.root,px:"xs",children:[r.jsxs(a,{fz:"md",children:[r.jsxs("span",{className:c.key,children:['"',n.key,'":']})," ",r.jsx("span",{className:c.value,children:s})]}),e!==void 0&&r.jsx(e,{value:s})]})}function f({object:n}){const{collapseComponent:e}=i.useContext(p),[t,c]=i.useState(!1);return r.jsxs(o.Flex,{direction:t?"row":"column",children:[r.jsxs(o.Flex,{sx:{gap:4,alignItems:"center"},children:[e!==void 0&&r.jsx(e,{collapsed:t,setCollapsed:c}),r.jsxs(o.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(a,{fz:"md",children:'"object": {'}),r.jsxs(a,{c:"dimmed",children:[n.children.length," ",n.children.length!==1?"items":"item"]}),t&&r.jsx(a,{fz:"md",children:"}"})]})]}),!t&&r.jsx(o.Flex,{direction:"column",px:"xs",children:n.children.map((s,d)=>{switch(s.type){case"array":return r.jsx(u,{array:s},d);case"object":return r.jsx(f,{object:s},d);default:return r.jsx(x,{literal:s},d)}})}),!t&&r.jsx(a,{fz:"md",children:"}"})]})}function u({array:n}){const{collapseComponent:e}=i.useContext(p),[t,c]=i.useState(!1);return r.jsxs(o.Flex,{direction:t?"row":"column",px:"xs",children:[r.jsxs(o.Flex,{sx:{gap:4,alignItems:"center"},children:[e!==void 0&&r.jsx(e,{collapsed:t,setCollapsed:c}),r.jsxs(o.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(a,{fz:"md",children:'"array": ['}),r.jsxs(a,{c:"dimmed",children:[n.children.length," ",n.children.length!==1?"items":"item"]}),t&&r.jsx(a,{fz:"md",children:"]"})]})]}),!t&&r.jsx(o.Flex,{direction:"column",px:"xs",children:n.children.map((s,d)=>{switch(s.type){case"array":return r.jsx(u,{array:s},d);case"object":return r.jsx(f,{object:s},d);default:return r.jsx(x,{literal:s},d)}})}),!t&&r.jsx(a,{fz:"md",children:"]"})]})}function y(n){return typeof n=="object"&&!Array.isArray(n)&&n!==null}function w(n){try{const e=JSON.parse(n);if(Array.isArray(e))return g(e);if(y(e))return h(e);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function h(n){return{type:"object",children:Object.entries(n).map(([e,t])=>C(e,t))}}function g(n){return{type:"array",children:Object.entries(n).map(([e,t])=>C(e,t))}}function C(n,e){if(y(e))return h(e);if(Array.isArray(e))return g(e);if(typeof e=="boolean")return{type:"boolean",key:n,value:e};if(typeof e=="number")return{type:"number",key:n,value:e};if(typeof e=="string")return{type:"string",key:n,value:e};if(e===void 0)return{type:"undefined",key:n,value:e};if(e===null)return{type:"null",key:n,value:e};throw new Error(`Unable to parse value: ${e}`)}const T={parse:w};function m(n){return{ast:i.useMemo(()=>T.parse(n),[n]),json:n}}function F({collapseComponent:n,clipboardComponent:e,json:t,theme:c}){const{ast:s}=m(t);return r.jsx(p.Provider,{value:{collapseComponent:n,clipboardComponent:e,theme:c},children:s.type==="object"?r.jsx(f,{object:s}):r.jsx(u,{array:s})})}l.JsonView=F,l.useJsonParser=m,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

dist/index.es.js

@@ -1,4 +0,4 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { createContext as w, useContext as d, useMemo as f, useState as h } from "react";
-import { createStyles as j, Flex as i, Text as l } from "@mantine/core";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { createContext as w, useContext as d, useMemo as m, useState as h } from "react";
+import { Text as j, createStyles as A, Flex as i } from "@mantine/core";
 const p = w({
@@ -8,3 +8,8 @@ collapseComponent: void 0,
   theme: void 0
-}), A = j((e, { literal: r, theme: n }) => {
+});
+function a(r) {
+  const { theme: e } = d(p);
+  return /* @__PURE__ */ t(j, { ...r, sx: { fontFamily: e == null ? void 0 : e.fontFamily } });
+}
+const T = A((r, { literal: e, theme: n }) => {
   const { key: s, literals: o = {} } = (n == null ? void 0 : n.colors) || {};
@@ -21,8 +26,8 @@ return {
     value: {
-      color: o[r.type]
+      color: o[e.type]
     }
   };
 });
-function J(e) {
-  switch (e.type) {
+function J(r) {
+  switch (r.type) {
     case "null":
@@ -33,14 +38,14 @@ return "null";
     case "string":
-      return `"${e.value}"`;
+      return `"${r.value}"`;
     default:
-      return e.value.toString();
+      return r.value.toString();
   }
 }
-function y({ literal: e }) {
-  const { clipboardComponent: r, theme: n } = d(p), { classes: s } = A({ literal: e, theme: n }), o = f(() => J(e), [e]);
+function y({ literal: r }) {
+  const { clipboardComponent: e, theme: n } = d(p), { classes: s } = T({ literal: r, theme: n }), o = m(() => J(r), [r]);
   return /* @__PURE__ */ c(i, { className: s.root, px: "xs", children: [
-    /* @__PURE__ */ c(l, { fz: "md", children: [
+    /* @__PURE__ */ c(a, { fz: "md", children: [
       /* @__PURE__ */ c("span", { className: s.key, children: [
         '"',
-        e.key,
+        r.key,
         '":'
@@ -51,11 +56,11 @@ ] }),
     ] }),
-    r !== void 0 && /* @__PURE__ */ t(r, { value: o })
+    e !== void 0 && /* @__PURE__ */ t(e, { value: o })
   ] });
 }
-function u({ object: e }) {
-  const { collapseComponent: r } = d(p), [n, s] = h(!1);
+function u({ object: r }) {
+  const { collapseComponent: e } = d(p), [n, s] = h(!1);
   return /* @__PURE__ */ c(i, { direction: n ? "row" : "column", children: [
     /* @__PURE__ */ c(i, { sx: { gap: 4, alignItems: "center" }, children: [
-      r !== void 0 && /* @__PURE__ */ t(
-        r,
+      e !== void 0 && /* @__PURE__ */ t(
+        e,
         {
@@ -67,30 +72,30 @@ collapsed: n,
       /* @__PURE__ */ c(i, { sx: { alignItems: "center" }, gap: "xs", children: [
-        /* @__PURE__ */ t(l, { fz: "md", children: '"object": {' }),
-        /* @__PURE__ */ c(l, { c: "dimmed", children: [
-          e.children.length,
+        /* @__PURE__ */ t(a, { fz: "md", children: '"object": {' }),
+        /* @__PURE__ */ c(a, { c: "dimmed", children: [
+          r.children.length,
           " ",
-          e.children.length !== 1 ? "items" : "item"
+          r.children.length !== 1 ? "items" : "item"
         ] }),
-        n && /* @__PURE__ */ t(l, { fz: "md", children: "}" })
+        n && /* @__PURE__ */ t(a, { fz: "md", children: "}" })
       ] })
     ] }),
-    !n && /* @__PURE__ */ t(i, { direction: "column", px: "xs", children: e.children.map((o, a) => {
+    !n && /* @__PURE__ */ t(i, { direction: "column", px: "xs", children: r.children.map((o, l) => {
       switch (o.type) {
         case "array":
-          return /* @__PURE__ */ t(m, { array: o }, a);
+          return /* @__PURE__ */ t(f, { array: o }, l);
         case "object":
-          return /* @__PURE__ */ t(u, { object: o }, a);
+          return /* @__PURE__ */ t(u, { object: o }, l);
         default:
-          return /* @__PURE__ */ t(y, { literal: o }, a);
+          return /* @__PURE__ */ t(y, { literal: o }, l);
       }
     }) }),
-    !n && /* @__PURE__ */ t(l, { fz: "md", children: "}" })
+    !n && /* @__PURE__ */ t(a, { fz: "md", children: "}" })
   ] });
 }
-function m({ array: e }) {
-  const { collapseComponent: r } = d(p), [n, s] = h(!1);
+function f({ array: r }) {
+  const { collapseComponent: e } = d(p), [n, s] = h(!1);
   return /* @__PURE__ */ c(i, { direction: n ? "row" : "column", px: "xs", children: [
     /* @__PURE__ */ c(i, { sx: { gap: 4, alignItems: "center" }, children: [
-      r !== void 0 && /* @__PURE__ */ t(
-        r,
+      e !== void 0 && /* @__PURE__ */ t(
+        e,
         {
@@ -102,34 +107,34 @@ collapsed: n,
       /* @__PURE__ */ c(i, { sx: { alignItems: "center" }, gap: "xs", children: [
-        /* @__PURE__ */ t(l, { fz: "md", children: '"array": [' }),
-        /* @__PURE__ */ c(l, { c: "dimmed", children: [
-          e.children.length,
+        /* @__PURE__ */ t(a, { fz: "md", children: '"array": [' }),
+        /* @__PURE__ */ c(a, { c: "dimmed", children: [
+          r.children.length,
           " ",
-          e.children.length !== 1 ? "items" : "item"
+          r.children.length !== 1 ? "items" : "item"
         ] }),
-        n && /* @__PURE__ */ t(l, { fz: "md", children: "]" })
+        n && /* @__PURE__ */ t(a, { fz: "md", children: "]" })
       ] })
     ] }),
-    !n && /* @__PURE__ */ t(i, { direction: "column", px: "xs", children: e.children.map((o, a) => {
+    !n && /* @__PURE__ */ t(i, { direction: "column", px: "xs", children: r.children.map((o, l) => {
       switch (o.type) {
         case "array":
-          return /* @__PURE__ */ t(m, { array: o }, a);
+          return /* @__PURE__ */ t(f, { array: o }, l);
         case "object":
-          return /* @__PURE__ */ t(u, { object: o }, a);
+          return /* @__PURE__ */ t(u, { object: o }, l);
         default:
-          return /* @__PURE__ */ t(y, { literal: o }, a);
+          return /* @__PURE__ */ t(y, { literal: o }, l);
       }
     }) }),
-    !n && /* @__PURE__ */ t(l, { fz: "md", children: "]" })
+    !n && /* @__PURE__ */ t(a, { fz: "md", children: "]" })
   ] });
 }
-function g(e) {
-  return typeof e == "object" && !Array.isArray(e) && e !== null;
+function x(r) {
+  return typeof r == "object" && !Array.isArray(r) && r !== null;
 }
-function S(e) {
+function S(r) {
   try {
-    const r = JSON.parse(e);
-    if (Array.isArray(r))
-      return b(r);
-    if (g(r))
-      return x(r);
+    const e = JSON.parse(r);
+    if (Array.isArray(e))
+      return b(e);
+    if (x(e))
+      return g(e);
     throw new Error("Invalid json");
@@ -140,76 +145,76 @@ } catch {
 }
-function x(e) {
+function g(r) {
   return {
     type: "object",
-    children: Object.entries(e).map(
-      ([r, n]) => C(r, n)
+    children: Object.entries(r).map(
+      ([e, n]) => C(e, n)
     )
   };
 }
-function b(e) {
+function b(r) {
   return {
     type: "array",
-    children: Object.entries(e).map(
-      ([r, n]) => C(r, n)
+    children: Object.entries(r).map(
+      ([e, n]) => C(e, n)
     )
   };
 }
-function C(e, r) {
-  if (g(r))
-    return x(r);
-  if (Array.isArray(r))
-    return b(r);
-  if (typeof r == "boolean")
+function C(r, e) {
+  if (x(e))
+    return g(e);
+  if (Array.isArray(e))
+    return b(e);
+  if (typeof e == "boolean")
     return {
       type: "boolean",
-      key: e,
-      value: r
+      key: r,
+      value: e
     };
-  if (typeof r == "number")
+  if (typeof e == "number")
     return {
       type: "number",
-      key: e,
-      value: r
+      key: r,
+      value: e
     };
-  if (typeof r == "string")
+  if (typeof e == "string")
     return {
       type: "string",
-      key: e,
-      value: r
+      key: r,
+      value: e
     };
-  if (r === void 0)
+  if (e === void 0)
     return {
       type: "undefined",
-      key: e,
-      value: r
+      key: r,
+      value: e
     };
-  if (r === null)
+  if (e === null)
     return {
       type: "null",
-      key: e,
-      value: r
+      key: r,
+      value: e
     };
-  throw new Error(`Unable to parse value: ${r}`);
+  throw new Error(`Unable to parse value: ${e}`);
 }
-const T = {
+const z = {
   parse: S
 };
-function z(e) {
+function I(r) {
   return {
-    ast: f(() => T.parse(e), [e]),
-    json: e
+    ast: m(() => z.parse(r), [r]),
+    json: r
   };
 }
-function V({
-  collapseComponent: e,
-  clipboardComponent: r,
+function F({
+  collapseComponent: r,
+  clipboardComponent: e,
   json: n,
   theme: s
 }) {
-  const { ast: o } = z(n);
+  const { ast: o } = I(n);
   return /* @__PURE__ */ t(
     p.Provider,
     {
-      value: { collapseComponent: e, clipboardComponent: r, theme: s },
-      children: o.type === "object" ? /* @__PURE__ */ t(u, { object: o }) : /* @__PURE__ */ t(m, { array: o })
+      value: { collapseComponent: r, clipboardComponent: e, theme: s },
+      children: o.type === "object" ? /* @__PURE__ */ t(u, { object: o }) : /* @__PURE__ */ t(f, { array: o })
     }
@@ -219,4 +224,4 @@ );
 export {
-  V as JsonView,
-  z as useJsonParser
+  F as JsonView,
+  I as useJsonParser
 };

dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],r):(l=typeof globalThis<"u"?globalThis:l||self,r(l.index={},l["react/jsx-runtime"],l.React,l["@mantine/core"]))})(this,function(l,r,i,s){"use strict";const d=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0}),C=s.createStyles((e,{literal:n,theme:t})=>{const{key:c,literals:o={}}=(t==null?void 0:t.colors)||{};return{key:{color:c},root:{alignItems:"center",gap:8,width:"100%"},value:{color:o[n.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function u({literal:e}){const{clipboardComponent:n,theme:t}=i.useContext(d),{classes:c}=C({literal:e,theme:t}),o=i.useMemo(()=>m(e),[e]);return r.jsxs(s.Flex,{className:c.root,px:"xs",children:[r.jsxs(s.Text,{fz:"md",children:[r.jsxs("span",{className:c.key,children:['"',e.key,'":']})," ",r.jsx("span",{className:c.value,children:o})]}),n!==void 0&&r.jsx(n,{value:o})]})}function p({object:e}){const{collapseComponent:n}=i.useContext(d),[t,c]=i.useState(!1);return r.jsxs(s.Flex,{direction:t?"row":"column",children:[r.jsxs(s.Flex,{sx:{gap:4,alignItems:"center"},children:[n!==void 0&&r.jsx(n,{collapsed:t,setCollapsed:c}),r.jsxs(s.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(s.Text,{fz:"md",children:'"object": {'}),r.jsxs(s.Text,{c:"dimmed",children:[e.children.length," ",e.children.length!==1?"items":"item"]}),t&&r.jsx(s.Text,{fz:"md",children:"}"})]})]}),!t&&r.jsx(s.Flex,{direction:"column",px:"xs",children:e.children.map((o,a)=>{switch(o.type){case"array":return r.jsx(f,{array:o},a);case"object":return r.jsx(p,{object:o},a);default:return r.jsx(u,{literal:o},a)}})}),!t&&r.jsx(s.Text,{fz:"md",children:"}"})]})}function f({array:e}){const{collapseComponent:n}=i.useContext(d),[t,c]=i.useState(!1);return r.jsxs(s.Flex,{direction:t?"row":"column",px:"xs",children:[r.jsxs(s.Flex,{sx:{gap:4,alignItems:"center"},children:[n!==void 0&&r.jsx(n,{collapsed:t,setCollapsed:c}),r.jsxs(s.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(s.Text,{fz:"md",children:'"array": ['}),r.jsxs(s.Text,{c:"dimmed",children:[e.children.length," ",e.children.length!==1?"items":"item"]}),t&&r.jsx(s.Text,{fz:"md",children:"]"})]})]}),!t&&r.jsx(s.Flex,{direction:"column",px:"xs",children:e.children.map((o,a)=>{switch(o.type){case"array":return r.jsx(f,{array:o},a);case"object":return r.jsx(p,{object:o},a);default:return r.jsx(u,{literal:o},a)}})}),!t&&r.jsx(s.Text,{fz:"md",children:"]"})]})}function x(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function b(e){try{const n=JSON.parse(e);if(Array.isArray(n))return y(n);if(x(n))return h(n);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function h(e){return{type:"object",children:Object.entries(e).map(([n,t])=>g(n,t))}}function y(e){return{type:"array",children:Object.entries(e).map(([n,t])=>g(n,t))}}function g(e,n){if(x(n))return h(n);if(Array.isArray(n))return y(n);if(typeof n=="boolean")return{type:"boolean",key:e,value:n};if(typeof n=="number")return{type:"number",key:e,value:n};if(typeof n=="string")return{type:"string",key:e,value:n};if(n===void 0)return{type:"undefined",key:e,value:n};if(n===null)return{type:"null",key:e,value:n};throw new Error(`Unable to parse value: ${n}`)}const j={parse:b};function T(e){return{ast:i.useMemo(()=>j.parse(e),[e]),json:e}}function w({collapseComponent:e,clipboardComponent:n,json:t,theme:c}){const{ast:o}=T(t);return r.jsx(d.Provider,{value:{collapseComponent:e,clipboardComponent:n,theme:c},children:o.type==="object"?r.jsx(p,{object:o}):r.jsx(f,{array:o})})}l.JsonView=w,l.useJsonParser=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],r):(l=typeof globalThis<"u"?globalThis:l||self,r(l.index={},l["react/jsx-runtime"],l.React,l["@mantine/core"]))})(this,function(l,r,i,o){"use strict";const p=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a(n){const{theme:e}=i.useContext(p);return r.jsx(o.Text,{...n,sx:{fontFamily:e==null?void 0:e.fontFamily}})}const b=o.createStyles((n,{literal:e,theme:t})=>{const{key:c,literals:s={}}=(t==null?void 0:t.colors)||{};return{key:{color:c},root:{alignItems:"center",gap:8,width:"100%"},value:{color:s[e.type]}}});function j(n){switch(n.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${n.value}"`;default:return n.value.toString()}}function x({literal:n}){const{clipboardComponent:e,theme:t}=i.useContext(p),{classes:c}=b({literal:n,theme:t}),s=i.useMemo(()=>j(n),[n]);return r.jsxs(o.Flex,{className:c.root,px:"xs",children:[r.jsxs(a,{fz:"md",children:[r.jsxs("span",{className:c.key,children:['"',n.key,'":']})," ",r.jsx("span",{className:c.value,children:s})]}),e!==void 0&&r.jsx(e,{value:s})]})}function f({object:n}){const{collapseComponent:e}=i.useContext(p),[t,c]=i.useState(!1);return r.jsxs(o.Flex,{direction:t?"row":"column",children:[r.jsxs(o.Flex,{sx:{gap:4,alignItems:"center"},children:[e!==void 0&&r.jsx(e,{collapsed:t,setCollapsed:c}),r.jsxs(o.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(a,{fz:"md",children:'"object": {'}),r.jsxs(a,{c:"dimmed",children:[n.children.length," ",n.children.length!==1?"items":"item"]}),t&&r.jsx(a,{fz:"md",children:"}"})]})]}),!t&&r.jsx(o.Flex,{direction:"column",px:"xs",children:n.children.map((s,d)=>{switch(s.type){case"array":return r.jsx(u,{array:s},d);case"object":return r.jsx(f,{object:s},d);default:return r.jsx(x,{literal:s},d)}})}),!t&&r.jsx(a,{fz:"md",children:"}"})]})}function u({array:n}){const{collapseComponent:e}=i.useContext(p),[t,c]=i.useState(!1);return r.jsxs(o.Flex,{direction:t?"row":"column",px:"xs",children:[r.jsxs(o.Flex,{sx:{gap:4,alignItems:"center"},children:[e!==void 0&&r.jsx(e,{collapsed:t,setCollapsed:c}),r.jsxs(o.Flex,{sx:{alignItems:"center"},gap:"xs",children:[r.jsx(a,{fz:"md",children:'"array": ['}),r.jsxs(a,{c:"dimmed",children:[n.children.length," ",n.children.length!==1?"items":"item"]}),t&&r.jsx(a,{fz:"md",children:"]"})]})]}),!t&&r.jsx(o.Flex,{direction:"column",px:"xs",children:n.children.map((s,d)=>{switch(s.type){case"array":return r.jsx(u,{array:s},d);case"object":return r.jsx(f,{object:s},d);default:return r.jsx(x,{literal:s},d)}})}),!t&&r.jsx(a,{fz:"md",children:"]"})]})}function y(n){return typeof n=="object"&&!Array.isArray(n)&&n!==null}function w(n){try{const e=JSON.parse(n);if(Array.isArray(e))return g(e);if(y(e))return h(e);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function h(n){return{type:"object",children:Object.entries(n).map(([e,t])=>C(e,t))}}function g(n){return{type:"array",children:Object.entries(n).map(([e,t])=>C(e,t))}}function C(n,e){if(y(e))return h(e);if(Array.isArray(e))return g(e);if(typeof e=="boolean")return{type:"boolean",key:n,value:e};if(typeof e=="number")return{type:"number",key:n,value:e};if(typeof e=="string")return{type:"string",key:n,value:e};if(e===void 0)return{type:"undefined",key:n,value:e};if(e===null)return{type:"null",key:n,value:e};throw new Error(`Unable to parse value: ${e}`)}const T={parse:w};function m(n){return{ast:i.useMemo(()=>T.parse(n),[n]),json:n}}function F({collapseComponent:n,clipboardComponent:e,json:t,theme:c}){const{ast:s}=m(t);return r.jsx(p.Provider,{value:{collapseComponent:n,clipboardComponent:e,theme:c},children:s.type==="object"?r.jsx(f,{object:s}):r.jsx(u,{array:s})})}l.JsonView=F,l.useJsonParser=m,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

dist/types/theme.d.ts

 import type { CSSProperties } from 'react';
+import type { CSSObject } from '@mantine/core';
 import type { JsonLiteralValue } from './json';
 export interface Theme {
     colors: {
+        collapse?: CSSProperties['color'];
         key?: CSSProperties['color'];
         literals?: Partial<Record<JsonLiteralValue['type'], CSSProperties['color']>>;
     };
+    fontFamily?: CSSObject['fontFamily'];
 }

package.json

 {
   "name": "mantine-json-view",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "engines": {
@@ -37,9 +37,9 @@ "node": "18",
     "@storybook/testing-library": "^0.2.0",
-    "@tabler/icons-react": "^2.31.0",
-    "@types/react": "^18.2.20",
+    "@tabler/icons-react": "^2.32.0",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -51,6 +51,6 @@ "eslint-plugin-react-refresh": "^0.4.3",
     "storybook": "^7.3.2",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.2",
-    "vitest": "^0.34.2"
+    "vitest": "^0.34.3"
   },
@@ -57,0 +57,0 @@ "scripts": {

README.md

@@ -46,2 +46,3 @@ # Mantine JSON View
         },
+        fontFamily: 'monospace',
       }}
@@ -48,0 +49,0 @@ />

No alert changes

Improved metrics

Total package byte prevSize

21221

increased by3.58%

Number of package files

31

increased by10.71%

Lines of code

386

increased by4.04%

Number of lines in readme file

54

increased by1.89%

No dependency changes