@uiw/react-json-view 0.0.1 → 1.0.0

package/esm/copied.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
+    show?: boolean;
+    text?: T;
+}
+export declare function Copied<T>(props: CopiedProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/copied.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "style", "text", "show"];
+import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Copied(props) {
+  var {
+      style,
+      text = '',
+      show
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!show) return null;
+  var [copied, setCopied] = useState(false);
+  var click = event => {
+    event.stopPropagation();
+    var copyText = JSON.stringify(text, (key, value) => {
+      if (typeof value === 'bigint') {
+        return value.toString();
+      }
+      return value;
+    }, 2);
+    if (text === Infinity) copyText = Infinity;
+    navigator.clipboard.writeText(copyText).then(() => {
+      setCopied(true);
+      var timer = setTimeout(() => {
+        setCopied(false);
+        clearTimeout(timer);
+      }, 3000);
+    }).catch(error => {});
+  };
+  var defalutStyle = _extends({}, style, {
+    cursor: 'pointer',
+    marginLeft: 5
+  });
+  var svgProps = _extends({
+    height: "1em",
+    width: "1em",
+    fill: "var(--w-rjv-copied-color, currentColor)",
+    onClick: click,
+    style: defalutStyle,
+    className: 'w-rjv-copied'
+  }, reset);
+  if (copied) {
+    return /*#__PURE__*/_jsx("svg", _extends({
+      viewBox: "0 0 38 38"
+    }, svgProps, {
+      fill: "var(--w-rjv-copied-success-color, #28a745)",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M31.5589286,15 L35.1589286,18.6 L21.0160714,33 L12.5303571,24.2571429 L16.1303571,20.6571429 L21.0160714,25.5428571 L31.5589286,15 Z M12.5,30 L12.5,32.5 L5,32.5 L5,30 L12.5,30 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+      })
+    }));
+  }
+  return /*#__PURE__*/_jsx("svg", _extends({
+    viewBox: "0 0 38 38"
+  }, svgProps, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,22.5 L22.5,17.5 L12.5,25 L22.5,32.5 L22.5,27.5 L35,27.5 L35,22.5 L22.5,22.5 Z M5,32.5 L12.5,32.5 L12.5,30 L5,30 L5,32.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+    })
+  }));
+}

package/esm/index.d.ts

@@ -6,14 +6,17 @@ export * from './value';
 export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
-    /** Set the indent-width for nested objects @default `15`*/
+    /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
-    /** When set to `true`, data type labels prefix values @default `true` */
+    /** When set to `true`, data type labels prefix values @default true */
     displayDataTypes?: boolean;
-    /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+    /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
-    /** Define the root node name. @default `undefined` */
+    /** 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 */
+    enableClipboard?: boolean;
+    /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];
         ellipsis?: EllipsisProps['render'];

package/esm/node.d.ts

@@ -7,7 +7,6 @@ export interface MetaProps extends LabelProps {
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
-export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
 }

package/esm/node.js

@@ -3,11 +3,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
   _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
-import { Fragment, useId, cloneElement } from 'react';
-import { ValueView, Colon, Label, typeMap } from './value';
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
+import { Fragment, useId, cloneElement, useState } from 'react';
+import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
+import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function Meta(props) {
@@ -36,7 +37,6 @@ export function Meta(props) {
     children: start ? mark.charAt(0) : mark.charAt(1)
   }));
 }
-export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 export var Ellipsis = _ref => {
   var {
       style,
@@ -108,6 +108,7 @@ export function RooNode(props) {
       displayDataTypes = true,
       components = {},
       displayObjectSize = true,
+      enableClipboard = true,
       indentWidth = 15,
       keyid = 'root'
     } = props,
@@ -135,6 +136,9 @@ export function RooNode(props) {
   };
   var valueViewProps = {
     displayDataTypes,
+    displayObjectSize,
+    enableClipboard,
+    indentWidth,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
@@ -143,7 +147,16 @@ export function RooNode(props) {
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle
   });
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
     children: [/*#__PURE__*/_jsxs(Line, {
       style: {
         display: 'inline-flex',
@@ -169,15 +182,23 @@ export function RooNode(props) {
         render: components.braces
       }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
         children: [nameKeys.length, " items"]
-      })]
+      }), tools]
     }), expand && /*#__PURE__*/_jsx(Line, {
       style: {
-        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
       children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
         var item = value[key];
-        if (Array.isArray(item)) {
+        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
+        if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
             children: /*#__PURE__*/_jsx(RooNode, _extends({
@@ -187,35 +208,7 @@ export function RooNode(props) {
             }, subNodeProps))
           }, label + idx);
         }
-        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
-          render: components.objectKey,
-          color: typeof key === 'number' ? typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
-        });
-        if (typeof item === 'object' && item && !(item instanceof Date)) {
-          if (Object.keys(item).length === 0) {
-            return /*#__PURE__*/_jsxs(Line, {
-              style: {
-                paddingLeft: indentWidth
-              },
-              children: [/*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-                renderKey: renderKey,
-                keyName: key,
-                value: item
-              })), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                start: true,
-                isArray: isArray
-              }), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                isArray: isArray
-              }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
-                children: [Object.keys(item).length, " items"]
-              })]
-            }, key + idx);
-          }
+        if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               keyid: keyid + subkeyid + key,
@@ -227,16 +220,12 @@ export function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/_jsx(Line, {
-          style: {
-            paddingLeft: indentWidth
-          },
-          children: /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-            renderKey: renderKey,
-            keyName: key,
-            value: item
-          }))
-        }, idx);
+        return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+          renderBraces: components.braces,
+          renderKey: renderKey,
+          keyName: key,
+          value: item
+        }), idx);
       })
     }), expand && /*#__PURE__*/_jsx(Line, {
       style: {

package/esm/theme/dark.d.ts

@@ -2,9 +2,11 @@ export declare const darkTheme: {
     '--w-rjv-font-family': string;
     '--w-rjv-color': string;
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-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;

package/esm/theme/dark.js

@@ -2,9 +2,11 @@ export var darkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#0184a6',
   '--w-rjv-background-color': '#202020',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',
   '--w-rjv-brackets-color': '#1896b6',
   '--w-rjv-type-string-color': '#cb4b16',

package/esm/theme/light.d.ts

@@ -2,9 +2,11 @@ export declare const lightTheme: {
     '--w-rjv-font-family': string;
     '--w-rjv-color': string;
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-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;

package/esm/theme/light.js

@@ -2,9 +2,11 @@ export var lightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#002b36',
   '--w-rjv-background-color': '#ffffff',
-  '--w-rjv-border-left': '1px solid #ebebeb',
+  '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
   '--w-rjv-brackets-color': '#236a7c',
   '--w-rjv-type-string-color': '#cb4b16',

package/esm/value.d.ts

@@ -1,4 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
+import { MetaProps } from './node';
+export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const typeMap: {
     string: {
         color: string;
@@ -40,14 +42,18 @@ export declare const typeMap: {
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
 export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string;
-    value: T;
+    value?: T;
     displayDataTypes: boolean;
+    displayObjectSize: boolean;
+    enableClipboard: boolean;
+    indentWidth: number;
     renderKey?: JSX.Element;
+    renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
         type: TypeProps['type'];
     }) => JSX.Element;
 }
-export declare function ValueView<T>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
     fontSize?: number;

package/esm/value.js

@@ -1,11 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
+import { Meta, CountInfo } from './node';
+import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var typeMap = {
   string: {
@@ -64,8 +67,12 @@ export function ValueView(props) {
   var _typeMap$type;
   var {
       value,
+      indentWidth,
       renderKey,
       renderValue,
+      renderBraces,
+      enableClipboard,
+      displayObjectSize,
       displayDataTypes
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -112,6 +119,13 @@ export function ValueView(props) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   if (content && typeof content === 'string') {
     var valueView = renderValue ? renderValue({
       className: 'w-rjv-value',
@@ -126,13 +140,40 @@ export function ValueView(props) {
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView]
-    }));
+    return /*#__PURE__*/_jsx(Line, {
+      style: {
+        paddingLeft: indentWidth
+      },
+      onMouseEnter: mouseEnter,
+      onMouseLeave: mouseLeave,
+      children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+      }))
+    });
   }
-  return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-    children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView]
-  }));
+  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
+  var empty = /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      start: true,
+      isArray: Array.isArray(value)
+    }), /*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      isArray: Array.isArray(value)
+    }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
+      children: [length, " items"]
+    })]
+  });
+  return /*#__PURE__*/_jsx(Line, {
+    style: {
+      paddingLeft: indentWidth
+    },
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
+    }))
+  });
 }
 export var Label = _ref2 => {
   var {

package/light.d.ts

@@ -0,0 +1,19 @@
+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;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -45,9 +45,12 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
+    "dark.d.ts",
+    "light.d.ts",
+    "triangle-arrow.d.ts",
+    "triangle-solid-arrow.d.ts",
     "cjs",
-    "esm",
-    "src"
+    "esm"
   ],
   "keywords": [
     "monaco-editor",

package/triangle-arrow.d.ts

@@ -0,0 +1,5 @@
+declare module '@uiw/react-json-view/triangle-arrow' {
+  import React from 'react';
+  export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> { }
+  export function TriangleArrow(props: TriangleArrowProps): import("react/jsx-runtime").JSX.Element;
+}

package/triangle-solid-arrow.d.ts

@@ -0,0 +1,5 @@
+declare module '@uiw/react-json-view/triangle-solid-arrow' {
+  import React from 'react';
+  export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> { }
+  export function TriangleSolidArrow(props: TriangleSolidArrowProps): import("react/jsx-runtime").JSX.Element;
+}

package/src/arrow/TriangleArrow.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> {}
-export function TriangleArrow(props: TriangleArrowProps) {
-  const { style, ...reset } = props;
-  const defaultStyle: React.CSSProperties = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-    ...style,
-  };
-  return (
-    <svg viewBox="0 0 24 24" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
-      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
-    </svg>
-  );
-}

package/src/arrow/TriangleSolidArrow.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {}
-export function TriangleSolidArrow(props: TriangleSolidArrowProps) {
-  const { style, ...reset } = props;
-  const defaultStyle: React.CSSProperties = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-    ...style,
-  };
-  return (
-    <svg viewBox="0 0 15 15" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
-      <path d="M0 5l6 6 6-6z"></path>
-    </svg>
-  );
-}

package/src/index.tsx

@@ -1,43 +0,0 @@
-import React, { useId } from 'react';
-import { forwardRef } from 'react';
-import { RooNode, MetaProps, SemicolonProps, EllipsisProps } from './node';
-import { ValueViewProps } from './value';
-
-export * from './node';
-export * from './value';
-export interface JsonViewProps<T>
-  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  /** This property contains your input JSON */
-  value?: T;
-  /** Set the indent-width for nested objects @default `15`*/
-  indentWidth?: number;
-  /** When set to `true`, data type labels prefix values @default `true` */
-  displayDataTypes?: boolean;
-  /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
-  displayObjectSize?: boolean;
-  /** Define the root node name. @default `undefined` */
-  keyName?: string | number;
-  components?: {
-    braces?: MetaProps['render'];
-    ellipsis?: EllipsisProps['render'];
-    arrow?: JSX.Element;
-    objectKey?: SemicolonProps['render'];
-    value?: ValueViewProps<T>['renderValue'];
-  };
-}
-
-const JsonView = forwardRef<HTMLDivElement, JsonViewProps<object>>((props, ref) => {
-  const { value, style, className, ...reset } = props;
-  const defaultStyle = {
-    lineHeight: 1.4,
-    fontFamily: 'monospace',
-    color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
-    ...style,
-  } as React.CSSProperties;
-  const cls = `w-json-view-container w-rjv ${className || ''}`;
-  const keyid = useId();
-  return <RooNode className={cls} value={value} {...reset} ref={ref} keyid={keyid} style={defaultStyle} />;
-});
-
-export default JsonView;