@uiw/react-json-view 1.9.0 → 1.10.0

package/README.md

@@ -85,20 +85,38 @@ import React from 'react';
 import JsonView from '@uiw/react-json-view';
 import { lightTheme } from '@uiw/react-json-view/light';
 import { darkTheme } from '@uiw/react-json-view/dark';
+import { nordTheme } from '@uiw/react-json-view/nord';
+import { githubLightTheme } from '@uiw/react-json-view/githubLight';
+import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
+import { vscodeTheme } from '@uiw/react-json-view/vscode';
+import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
+import { monokaiTheme } from '@uiw/react-json-view/monokai';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
   integer: 42,
   float: 114.514,
+  boolean: true,
+  null: null,
+  nan: NaN,
+  url: new URL('https://example.com'),
 }
 
+const style = { display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' };
+
 export default function Demo() {
   return (
-    <React.Fragment>
+    <div style={style}>
       <JsonView value={object} style={darkTheme} />
       <JsonView value={object} style={lightTheme} />
-    </React.Fragment>
-  )
+      <JsonView value={object} style={nordTheme} />
+      <JsonView value={object} style={githubLightTheme} />
+      <JsonView value={object} style={githubDarkTheme} />
+      <JsonView value={object} style={gruvboxTheme} />
+      <JsonView value={object} style={vscodeTheme} />
+      <JsonView value={object} style={monokaiTheme} />
+    </div>
+  );
 }
 ```
 
@@ -200,6 +218,7 @@ const customTheme = {
   '--w-rjv-copied-success-color': '#28a745',
 
   '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#f8f8f2',
   '--w-rjv-brackets-color': '#d4d4d4',
 
   '--w-rjv-type-string-color': '#ce9178',

package/cjs/theme/dark.d.ts

@@ -1,24 +1,2 @@
-export declare const darkTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-color': string;
-    '--w-rjv-curlybraces-color': string;
-    '--w-rjv-brackets-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const darkTheme: import("react").CSSProperties;

package/cjs/theme/dark.js

@@ -25,7 +25,7 @@ var darkTheme = {
   '--w-rjv-type-date-color': '#586e75',
   '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
-  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
 };
 exports.darkTheme = darkTheme;

package/cjs/theme/github.dark.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const githubDarkTheme: import("react").CSSProperties;

package/cjs/theme/github.dark.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.githubDarkTheme = void 0;
+var githubDarkTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#79c0ff',
+  '--w-rjv-background-color': '#0d1117',
+  '--w-rjv-line-color': '#94949480',
+  '--w-rjv-arrow-color': '#ccc',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#7b7b7b',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#79c0ff',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#8b949e',
+  '--w-rjv-colon-color': '#c9d1d9',
+  '--w-rjv-brackets-color': '#8b949e',
+  '--w-rjv-type-string-color': '#a5d6ff',
+  '--w-rjv-type-int-color': '#79c0ff',
+  '--w-rjv-type-float-color': '#79c0ff',
+  '--w-rjv-type-bigint-color': '#79c0ff',
+  '--w-rjv-type-boolean-color': '#ffab70',
+  '--w-rjv-type-date-color': '#79c0ff',
+  '--w-rjv-type-url-color': '#4facff',
+  '--w-rjv-type-null-color': '#ff7b72',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#79c0ff'
+};
+exports.githubDarkTheme = githubDarkTheme;

package/cjs/theme/github.light.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const githubLightTheme: import("react").CSSProperties;

package/cjs/theme/github.light.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.githubLightTheme = void 0;
+var githubLightTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#6f42c1',
+  '--w-rjv-background-color': '#ffffff',
+  '--w-rjv-line-color': '#ddd',
+  '--w-rjv-arrow-color': '#6e7781',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#6a737d',
+  '--w-rjv-colon-color': '#24292e',
+  '--w-rjv-brackets-color': '#6a737d',
+  '--w-rjv-type-string-color': '#032f62',
+  '--w-rjv-type-int-color': '#005cc5',
+  '--w-rjv-type-float-color': '#005cc5',
+  '--w-rjv-type-bigint-color': '#005cc5',
+  '--w-rjv-type-boolean-color': '#d73a49',
+  '--w-rjv-type-date-color': '#005cc5',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#d73a49',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#005cc5'
+};
+exports.githubLightTheme = githubLightTheme;

package/cjs/theme/gruvbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const gruvboxTheme: import("react").CSSProperties;

package/cjs/theme/gruvbox.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gruvboxTheme = void 0;
+var gruvboxTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#3c3836',
+  '--w-rjv-background-color': '#fbf1c7',
+  '--w-rjv-line-color': '#ebdbb2',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
+  '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-type-string-color': '#3c3836',
+  '--w-rjv-type-int-color': '#8f3f71',
+  '--w-rjv-type-float-color': '#8f3f71',
+  '--w-rjv-type-bigint-color': '#8f3f71',
+  '--w-rjv-type-boolean-color': '#8f3f71',
+  '--w-rjv-type-date-color': '#076678',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#076678',
+  '--w-rjv-type-nan-color': '#076678',
+  '--w-rjv-type-undefined-color': '#076678'
+};
+exports.gruvboxTheme = gruvboxTheme;

package/cjs/theme/light.d.ts

@@ -1,24 +1,2 @@
-export declare const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-color': string;
-    '--w-rjv-curlybraces-color': string;
-    '--w-rjv-brackets-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const lightTheme: import("react").CSSProperties;

package/cjs/theme/light.js

@@ -16,6 +16,7 @@ var lightTheme = {
   '--w-rjv-copied-color': '#002b36',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
   '--w-rjv-type-string-color': '#cb4b16',
   '--w-rjv-type-int-color': '#268bd2',

package/cjs/theme/monokai.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const monokaiTheme: import("react").CSSProperties;

package/cjs/theme/monokai.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.monokaiTheme = void 0;
+var monokaiTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#E6DB74',
+  '--w-rjv-background-color': '#272822',
+  '--w-rjv-line-color': '#3e3d32',
+  '--w-rjv-arrow-color': '#f8f8f2',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#cecece4d',
+  '--w-rjv-update-color': '#5f5600',
+  '--w-rjv-copied-color': '#E6DB74',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#f8f8f2',
+  '--w-rjv-colon-color': '#f8f8f2',
+  '--w-rjv-brackets-color': '#f8f8f2',
+  '--w-rjv-type-string-color': '#E6DB74',
+  '--w-rjv-type-int-color': '#AE81FF',
+  '--w-rjv-type-float-color': '#AE81FF',
+  '--w-rjv-type-bigint-color': '#AE81FF',
+  '--w-rjv-type-boolean-color': '#AE81FF',
+  '--w-rjv-type-date-color': '#fd9720c7',
+  '--w-rjv-type-url-color': '#55a3ff',
+  '--w-rjv-type-null-color': '#FA2672',
+  '--w-rjv-type-nan-color': '#FD971F',
+  '--w-rjv-type-undefined-color': '#FD971F'
+};
+exports.monokaiTheme = monokaiTheme;

package/cjs/theme/nord.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const nordTheme: import("react").CSSProperties;

package/cjs/theme/nord.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nordTheme = void 0;
+var nordTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#88c0d0',
+  '--w-rjv-background-color': '#2e3440',
+  '--w-rjv-line-color': '#4c566a',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#c7c7c74d',
+  '--w-rjv-update-color': '#88c0cf75',
+  '--w-rjv-copied-color': '#119cc0',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#8fbcbb',
+  '--w-rjv-colon-color': '#6d9fac',
+  '--w-rjv-brackets-color': '#8fbcbb',
+  '--w-rjv-type-string-color': '#a3be8c',
+  '--w-rjv-type-int-color': '#b48ead',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#b48ead',
+  '--w-rjv-type-boolean-color': '#d08770',
+  '--w-rjv-type-date-color': '#41a2c2',
+  '--w-rjv-type-url-color': '#5e81ac',
+  '--w-rjv-type-null-color': '#5e81ac',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};
+exports.nordTheme = nordTheme;

package/cjs/theme/vscode.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const vscodeTheme: import("react").CSSProperties;

package/cjs/theme/vscode.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vscodeTheme = void 0;
+var vscodeTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--w-rjv-line-color': '#36334280',
+  '--w-rjv-arrow-color': '#838383',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#9c9c9c7a',
+  '--w-rjv-update-color': '#9cdcfe',
+  '--w-rjv-copied-color': '#9cdcfe',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#d4d4d4',
+  '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#b5cea8',
+  '--w-rjv-type-float-color': '#b5cea8',
+  '--w-rjv-type-bigint-color': '#b5cea8',
+  '--w-rjv-type-boolean-color': '#569cd6',
+  '--w-rjv-type-date-color': '#b5cea8',
+  '--w-rjv-type-url-color': '#3b89cf',
+  '--w-rjv-type-null-color': '#569cd6',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#569cd6'
+};
+exports.vscodeTheme = vscodeTheme;

package/cjs/value.js

@@ -80,9 +80,11 @@ var Colon = function Colon(_ref) {
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: "w-rjv-colon",
-    style: (0, _objectSpread2["default"])({
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
       paddingRight: 3
-    }, style)
+    }, style), {}, {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
+    })
   }, props), {}, {
     children: children
   }));
@@ -95,6 +97,10 @@ function getValueString(value) {
   if (typeof value === 'number') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
   if (typeof value === 'boolean') {
     type = 'boolean';
@@ -212,7 +218,7 @@ function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   var isURL = value instanceof URL;

package/dark.d.ts

@@ -1,19 +1,3 @@
 declare module '@uiw/react-json-view/dark' {
-  export const darkTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-  };
+  export const darkTheme: import('react').CSSProperties;
 }

package/esm/theme/dark.d.ts

@@ -1,24 +1,2 @@
-export declare const darkTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-color': string;
-    '--w-rjv-curlybraces-color': string;
-    '--w-rjv-brackets-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const darkTheme: import("react").CSSProperties;

package/esm/theme/dark.js

@@ -19,6 +19,6 @@ export var darkTheme = {
   '--w-rjv-type-date-color': '#586e75',
   '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
-  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
 };

package/esm/theme/github.dark.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const githubDarkTheme: import("react").CSSProperties;

package/esm/theme/github.dark.js

@@ -0,0 +1,25 @@
+export var githubDarkTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#79c0ff',
+  '--w-rjv-background-color': '#0d1117',
+  '--w-rjv-line-color': '#94949480',
+  '--w-rjv-arrow-color': '#ccc',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#7b7b7b',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#79c0ff',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#8b949e',
+  '--w-rjv-colon-color': '#c9d1d9',
+  '--w-rjv-brackets-color': '#8b949e',
+  '--w-rjv-type-string-color': '#a5d6ff',
+  '--w-rjv-type-int-color': '#79c0ff',
+  '--w-rjv-type-float-color': '#79c0ff',
+  '--w-rjv-type-bigint-color': '#79c0ff',
+  '--w-rjv-type-boolean-color': '#ffab70',
+  '--w-rjv-type-date-color': '#79c0ff',
+  '--w-rjv-type-url-color': '#4facff',
+  '--w-rjv-type-null-color': '#ff7b72',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#79c0ff'
+};

package/esm/theme/github.light.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const githubLightTheme: import("react").CSSProperties;

package/esm/theme/github.light.js

@@ -0,0 +1,25 @@
+export var githubLightTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#6f42c1',
+  '--w-rjv-background-color': '#ffffff',
+  '--w-rjv-line-color': '#ddd',
+  '--w-rjv-arrow-color': '#6e7781',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#6a737d',
+  '--w-rjv-colon-color': '#24292e',
+  '--w-rjv-brackets-color': '#6a737d',
+  '--w-rjv-type-string-color': '#032f62',
+  '--w-rjv-type-int-color': '#005cc5',
+  '--w-rjv-type-float-color': '#005cc5',
+  '--w-rjv-type-bigint-color': '#005cc5',
+  '--w-rjv-type-boolean-color': '#d73a49',
+  '--w-rjv-type-date-color': '#005cc5',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#d73a49',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#005cc5'
+};

package/esm/theme/gruvbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const gruvboxTheme: import("react").CSSProperties;

package/esm/theme/gruvbox.js

@@ -0,0 +1,25 @@
+export var gruvboxTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#3c3836',
+  '--w-rjv-background-color': '#fbf1c7',
+  '--w-rjv-line-color': '#ebdbb2',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
+  '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-type-string-color': '#3c3836',
+  '--w-rjv-type-int-color': '#8f3f71',
+  '--w-rjv-type-float-color': '#8f3f71',
+  '--w-rjv-type-bigint-color': '#8f3f71',
+  '--w-rjv-type-boolean-color': '#8f3f71',
+  '--w-rjv-type-date-color': '#076678',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#076678',
+  '--w-rjv-type-nan-color': '#076678',
+  '--w-rjv-type-undefined-color': '#076678'
+};

package/esm/theme/light.d.ts

@@ -1,24 +1,2 @@
-export declare const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-color': string;
-    '--w-rjv-curlybraces-color': string;
-    '--w-rjv-brackets-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const lightTheme: import("react").CSSProperties;

package/esm/theme/light.js

@@ -10,6 +10,7 @@ export var lightTheme = {
   '--w-rjv-copied-color': '#002b36',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
   '--w-rjv-type-string-color': '#cb4b16',
   '--w-rjv-type-int-color': '#268bd2',

package/esm/theme/monokai.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const monokaiTheme: import("react").CSSProperties;

package/esm/theme/monokai.js

@@ -0,0 +1,25 @@
+export var monokaiTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#E6DB74',
+  '--w-rjv-background-color': '#272822',
+  '--w-rjv-line-color': '#3e3d32',
+  '--w-rjv-arrow-color': '#f8f8f2',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#cecece4d',
+  '--w-rjv-update-color': '#5f5600',
+  '--w-rjv-copied-color': '#E6DB74',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#f8f8f2',
+  '--w-rjv-colon-color': '#f8f8f2',
+  '--w-rjv-brackets-color': '#f8f8f2',
+  '--w-rjv-type-string-color': '#E6DB74',
+  '--w-rjv-type-int-color': '#AE81FF',
+  '--w-rjv-type-float-color': '#AE81FF',
+  '--w-rjv-type-bigint-color': '#AE81FF',
+  '--w-rjv-type-boolean-color': '#AE81FF',
+  '--w-rjv-type-date-color': '#fd9720c7',
+  '--w-rjv-type-url-color': '#55a3ff',
+  '--w-rjv-type-null-color': '#FA2672',
+  '--w-rjv-type-nan-color': '#FD971F',
+  '--w-rjv-type-undefined-color': '#FD971F'
+};

package/esm/theme/nord.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const nordTheme: import("react").CSSProperties;

package/esm/theme/nord.js

@@ -0,0 +1,25 @@
+export var nordTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#88c0d0',
+  '--w-rjv-background-color': '#2e3440',
+  '--w-rjv-line-color': '#4c566a',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#c7c7c74d',
+  '--w-rjv-update-color': '#88c0cf75',
+  '--w-rjv-copied-color': '#119cc0',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#8fbcbb',
+  '--w-rjv-colon-color': '#6d9fac',
+  '--w-rjv-brackets-color': '#8fbcbb',
+  '--w-rjv-type-string-color': '#a3be8c',
+  '--w-rjv-type-int-color': '#b48ead',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#b48ead',
+  '--w-rjv-type-boolean-color': '#d08770',
+  '--w-rjv-type-date-color': '#41a2c2',
+  '--w-rjv-type-url-color': '#5e81ac',
+  '--w-rjv-type-null-color': '#5e81ac',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};

package/esm/theme/vscode.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const vscodeTheme: import("react").CSSProperties;

package/esm/theme/vscode.js

@@ -0,0 +1,25 @@
+export var vscodeTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--w-rjv-line-color': '#36334280',
+  '--w-rjv-arrow-color': '#838383',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#9c9c9c7a',
+  '--w-rjv-update-color': '#9cdcfe',
+  '--w-rjv-copied-color': '#9cdcfe',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#d4d4d4',
+  '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#b5cea8',
+  '--w-rjv-type-float-color': '#b5cea8',
+  '--w-rjv-type-bigint-color': '#b5cea8',
+  '--w-rjv-type-boolean-color': '#569cd6',
+  '--w-rjv-type-date-color': '#b5cea8',
+  '--w-rjv-type-url-color': '#3b89cf',
+  '--w-rjv-type-null-color': '#569cd6',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#569cd6'
+};

package/esm/value.js

@@ -65,7 +65,9 @@ export var Colon = _ref => {
     className: "w-rjv-colon",
     style: _extends({
       paddingRight: 3
-    }, style)
+    }, style, {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
+    })
   }, props, {
     children: children
   }));
@@ -77,6 +79,10 @@ export function getValueString(value) {
   if (typeof value === 'number') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
   if (typeof value === 'boolean') {
     type = 'boolean';
@@ -195,7 +201,7 @@ export function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var isURL = value instanceof URL;

package/light.d.ts

@@ -1,19 +1,3 @@
 declare module '@uiw/react-json-view/light' {
-  export const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-  };
+  export const lightTheme: import('react').CSSProperties;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -27,6 +27,36 @@
       "types": "./cjs/theme/dark.d.ts",
       "require": "./cjs/theme/dark.js"
     },
+    "./nord": {
+      "import": "./esm/theme/nord.js",
+      "types": "./cjs/theme/nord.d.ts",
+      "require": "./cjs/theme/nord.js"
+    },
+    "./vscode": {
+      "import": "./esm/theme/vscode.js",
+      "types": "./cjs/theme/vscode.d.ts",
+      "require": "./cjs/theme/vscode.js"
+    },
+    "./monokai": {
+      "import": "./esm/theme/monokai.js",
+      "types": "./cjs/theme/monokai.d.ts",
+      "require": "./cjs/theme/monokai.js"
+    },
+    "./gruvbox": {
+      "import": "./esm/theme/gruvbox.js",
+      "types": "./cjs/theme/gruvbox.d.ts",
+      "require": "./cjs/theme/gruvbox.js"
+    },
+    "./githubLight": {
+      "import": "./esm/theme/github.light.js",
+      "types": "./cjs/theme/github.light.d.ts",
+      "require": "./cjs/theme/github.light.js"
+    },
+    "./githubDark": {
+      "import": "./esm/theme/github.dark.js",
+      "types": "./cjs/theme/github.dark.d.ts",
+      "require": "./cjs/theme/github.dark.js"
+    },
     "./triangle-arrow": {
       "import": "./esm/arrow/TriangleArrow.js",
       "types": "./cjs/arrow/TriangleArrow.d.ts",