@uiw/react-json-view 1.8.5 → 1.10.0

package/cjs/value.js

@@ -17,8 +17,10 @@ var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes"],
-  _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+  _excluded2 = ["children", "length", "style"],
+  _excluded3 = ["color", "style", "isURL", "href", "children"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 var Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
 };
@@ -78,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
   }));
@@ -93,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';
@@ -127,6 +135,55 @@ function getValueString(value) {
     content: content
   };
 }
+var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
+  var children = _ref2.children,
+    length = _ref2.length,
+    style = _ref2.style,
+    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var childrenStr = children;
+  var _useState = (0, _react.useState)(length && childrenStr.length >= length),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    shorten = _useState2[0],
+    setShorten = _useState2[1];
+  var click = function click() {
+    console.log(shorten);
+    if (length && childrenStr.length <= length) return setShorten(false);
+    setShorten(!shorten);
+  };
+  var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rest), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+      cursor: 'pointer'
+    }),
+    onClick: click,
+    children: text
+  }));
+};
+RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
+var RenderStringValue = function RenderStringValue(_ref3) {
+  var color = _ref3.color,
+    style = _ref3.style,
+    isURL = _ref3.isURL,
+    href = _ref3.href,
+    children = _ref3.children,
+    rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    color: color,
+    style: style
+  }, rest), {}, {
+    className: "w-rjv-value",
+    children: [isURL && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: href,
+      style: {
+        color: color
+      },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    }), !isURL && children]
+  }));
+};
+RenderStringValue.displayName = 'JVR.RenderStringValue';
 function ValueView(props) {
   var _typeMap$type;
   var value = props.value,
@@ -145,7 +202,8 @@ function ValueView(props) {
     enableClipboard = props.enableClipboard,
     displayObjectSize = props.displayObjectSize,
     displayDataTypes = props.displayDataTypes,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    shortenTextAfterLength = props.shortenTextAfterLength,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var color = '';
   var style = {};
   var _getValueString = getValueString(value),
@@ -160,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;
@@ -168,10 +226,10 @@ function ValueView(props) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showTools = _useState2[0],
-    setShowTools = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showTools = _useState4[0],
+    setShowTools = _useState4[1];
   var tools = (0, _react.useMemo)(function () {
     return enableClipboard && showTools && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
       show: showTools,
@@ -211,24 +269,24 @@ function ValueView(props) {
       content: content,
       children: content
     });
-    var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+    var valueView = shortenTextAfterLength && type === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderShortenTextValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      isURL: isURL,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, {
       color: color,
+      href: isURL ? value.href : '',
       style: style,
-      className: "w-rjv-value",
-      children: isURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: value.href,
-        style: {
-          color: color
-        },
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: content
-      }) : content
+      isURL: isURL,
+      children: content
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
     }));
   }
@@ -250,14 +308,14 @@ function ValueView(props) {
   }));
 }
 ValueView.displayName = 'JVR.ValueView';
-var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var children = _ref2.children,
-    color = _ref2.color,
-    fontSize = _ref2.fontSize,
-    opacity = _ref2.opacity,
-    paddingRight = _ref2.paddingRight,
-    style = _ref2.style,
-    reset = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
+var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var children = _ref4.children,
+    color = _ref4.color,
+    fontSize = _ref4.fontSize,
+    opacity = _ref4.opacity,
+    paddingRight = _ref4.paddingRight,
+    style = _ref4.style,
+    reset = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     style: (0, _objectSpread2["default"])({
       color: color,

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/editor/countInfoExtra.js

@@ -6,6 +6,7 @@ import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
+  var _ref, _ref2;
   var {
     visible,
     showTools,
@@ -20,8 +21,8 @@ export function CountInfoExtra(props) {
     onDelete
   } = props;
   if (!visible || !showTools) return null;
-  var click = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* (event) {
+  var click = function click(_x) {
+    return (_ref = _ref || _asyncToGenerator(function* (event) {
       event.stopPropagation();
       var keyOrValue = 'AddKeyOrValue';
       var isArray = Array.isArray(value);
@@ -35,13 +36,10 @@ export function CountInfoExtra(props) {
           setValue(result);
         }
       }
-    });
-    return function click(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (event) {
+    })).apply(this, arguments);
+  };
+  var deleteHandle = function deleteHandle(_x2) {
+    return (_ref2 = _ref2 || _asyncToGenerator(function* (event) {
       event.stopPropagation();
       if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -57,11 +55,8 @@ export function CountInfoExtra(props) {
           }
         }
       }
-    });
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
       onClick: click

package/esm/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/esm/editor/objectKey.js

@@ -7,6 +7,7 @@ import { useHighlight } from '../semicolon';
 import { Label } from '../value';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ObjectKey = props => {
+  var _ref;
   var {
       className,
       value,
@@ -42,8 +43,8 @@ export var ObjectKey = props => {
       (_$edit$current = $edit.current) == null || _$edit$current.focus();
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref = _ref || _asyncToGenerator(function* () {
       if ($edit.current) {
         var _$edit$current2;
         if (onEdit) {
@@ -65,11 +66,8 @@ export var ObjectKey = props => {
         (_$edit$current2 = $edit.current) == null || _$edit$current2.focus();
       }
       setEditable(false);
-    });
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var focus = () => {
     if ($edit.current) {
       var _$edit$current3;

package/esm/editor/value.js

@@ -21,7 +21,7 @@ var Quotes = _ref => {
   });
 };
 export function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var {
       type,
       value,
@@ -65,8 +65,8 @@ export function ReValue(props) {
       }
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref2 = _ref2 || _asyncToGenerator(function* () {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
@@ -123,11 +123,8 @@ export function ReValue(props) {
           }
         }
       }
-    });
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -155,8 +152,8 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(function* (evn) {
+  var deleteHandle = function deleteHandle(_x) {
+    return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
       if (data && keyName && keyName in data && setValue && onDelete) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -167,11 +164,8 @@ export function ReValue(props) {
           setValue(_extends({}, data));
         }
       }
-    });
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,

package/esm/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/esm/index.js

@@ -7,6 +7,7 @@ import { RootNode } from './node';
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from './node';
 export * from './value';
+export * from './semicolon';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       value,

package/esm/node.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-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"];
 import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -46,6 +46,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
+      shortenTextAfterLength = 20,
       collapsed,
       level = 1,
       keyid = 'root',
@@ -93,6 +94,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    shortenTextAfterLength,
     level: level + 1,
     parentValue: value,
     indentWidth,

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;