@uiw/react-json-view 1.8.5 → 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',
@@ -452,8 +471,9 @@ export default function Demo() {
 ## Editor JSON
 
 ```tsx mdx:preview
-import React from 'react';
+import React, { useRef } from 'react';
 import JsonViewEditor from '@uiw/react-json-view/editor';
+import { type SemicolonProps, useHighlight } from '@uiw/react-json-view';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -472,12 +492,14 @@ const object = {
   nestedArray: [ [1, 2], [3, 4], { a: 1} ],
 }
 
-const ObjectKey = ({ value, keyName, parentName, parentValue, ...reset }) => {
+const ObjectKey: SemicolonProps['render'] = ({ value, keyName, parentName, ...props }) => {
+  const $edit = useRef<HTMLSpanElement & HTMLModElement>(null);
+  useHighlight({ value, highlightUpdates: true, highlightContainer: $edit });
   if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-    return <del {...reset} />
+    return <del {...props} ref={$edit} />;
   }
-  return <span {...reset} />
-};
+  return <span {...props} ref={$edit} />;
+}
 
 export default function Demo() {
   return (
@@ -663,6 +685,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+  shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
@@ -721,7 +745,7 @@ export interface CountInfoProps {
 ```ts
 import { JsonViewProps } from '@uiw/react-json-view';
 import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
   /**
    * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
    * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

package/cjs/editor/countInfoExtra.js

@@ -15,6 +15,7 @@ var _add = require("./icon/add");
 var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
+  var _ref, _ref2;
   var visible = props.visible,
     showTools = props.showTools,
     editable = props.editable,
@@ -27,8 +28,8 @@ function CountInfoExtra(props) {
     onAdd = props.onAdd,
     onDelete = props.onDelete;
   if (!visible || !showTools) return null;
-  var click = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+  var click = function click(_x) {
+    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
       var keyOrValue, isArray, isAdd, result, maybeAdd;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -54,13 +55,10 @@ function CountInfoExtra(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function click(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+    }))).apply(this, arguments);
+  };
+  var deleteHandle = function deleteHandle(_x2) {
+    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -90,11 +88,8 @@ function CountInfoExtra(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }));
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
       onClick: click

package/cjs/editor/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { JsonViewProps } from '../';
 import type { CountInfoExtraProps } from './countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
     /**
      * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
      * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

package/cjs/editor/objectKey.js

@@ -16,6 +16,7 @@ var _value = require("../value");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
 var ObjectKey = function ObjectKey(props) {
+  var _ref;
   var className = props.className,
     value = props.value,
     keyName = props.keyName,
@@ -58,8 +59,8 @@ var ObjectKey = function ObjectKey(props) {
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = function blur() {
+    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var _$edit$current2, result;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -98,11 +99,8 @@ var ObjectKey = function ObjectKey(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var focus = function focus() {
     if ($edit.current) {
       var _$edit$current3;

package/cjs/editor/value.js

@@ -27,7 +27,7 @@ var Quotes = function Quotes(_ref) {
   });
 };
 function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var type = props.type,
     value = props.value,
     setValue = props.setValue,
@@ -81,8 +81,8 @@ function ReValue(props) {
       }
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = function blur() {
+    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var text, _typeStr, dt, result, _getValueString, oldChildStr;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -158,11 +158,8 @@ function ReValue(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -189,8 +186,8 @@ function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+  var deleteHandle = function deleteHandle(_x) {
+    return (_ref3 = _ref3 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -215,11 +212,8 @@ function ReValue(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }));
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       style: style,

package/cjs/index.d.ts

@@ -7,6 +7,7 @@ import type { MetaProps } from './comps/meta';
 import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export * from './semicolon';
 export interface CountInfoProps {
     count: number;
     level: number;
@@ -32,6 +33,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Define the root node name. @default undefined */
     keyName?: string | number;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */

package/cjs/index.js

@@ -35,6 +35,18 @@ Object.keys(_value).forEach(function (key) {
     }
   });
 });
+var _semicolon = require("./semicolon");
+Object.keys(_semicolon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _semicolon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _semicolon[key];
+    }
+  });
+});
 var _excluded = ["value", "style", "className"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,

package/cjs/node.js

@@ -19,7 +19,7 @@ var _copied = require("./copied");
 var _ellipsis = require("./comps/ellipsis");
 var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
 function getLength(obj) {
   try {
     return Object.keys(obj).length;
@@ -61,6 +61,8 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    _props$shortenTextAft = props.shortenTextAfterLength,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
     collapsed = props.collapsed,
     _props$level = props.level,
     level = _props$level === void 0 ? 1 : _props$level,
@@ -114,6 +116,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
+    shortenTextAfterLength: shortenTextAfterLength,
     level: level + 1,
     parentValue: value,
     indentWidth: indentWidth,

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.d.ts

@@ -55,6 +55,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     components?: JsonViewProps<T>['components'];