@uiw/react-json-view 0.0.1

package/cjs/node.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = exports.Ellipsis = exports.CountInfo = void 0;
+exports.Meta = Meta;
+exports.RooNode = RooNode;
+exports.Semicolon = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _value = require("./value");
+var _TriangleArrow = require("./arrow/TriangleArrow");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["isArray", "start", "className", "render"],
+  _excluded2 = ["style", "render"],
+  _excluded3 = ["children", "render", "color", "value", "className", "show"],
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
+function Meta(props) {
+  var _props$isArray = props.isArray,
+    isArray = _props$isArray === void 0 ? false : _props$isArray,
+    _props$start = props.start,
+    start = _props$start === void 0 ? false : _props$start,
+    className = props.className,
+    render = props.render,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var mark = isArray ? '[]' : '{}';
+  var cls = "w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-").concat(start ? 'start' : 'end', " ").concat(className || '');
+  var color = "var(--w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-color, #236a7c)");
+  if (render) return render((0, _objectSpread2["default"])({
+    isArray: isArray,
+    className: cls,
+    style: {
+      color: color
+    },
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }, reset));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    color: color,
+    className: cls
+  }, reset), {}, {
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }));
+}
+var Line = function Line(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
+};
+exports.Line = Line;
+var Ellipsis = function Ellipsis(_ref) {
+  var style = _ref.style,
+    render = _ref.render,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+  var styl = (0, _objectSpread2["default"])({
+    cursor: 'pointer'
+  }, style);
+  var className = "w-rjv-ellipsis ".concat(props.className || '');
+  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    style: styl
+  }, props), {}, {
+    className: className
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className,
+    style: styl
+  }, props), {}, {
+    children: "..."
+  }));
+};
+exports.Ellipsis = Ellipsis;
+var Semicolon = function Semicolon(_ref2) {
+  var children = _ref2.children,
+    render = _ref2.render,
+    color = _ref2.color,
+    value = _ref2.value,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
+    show = _ref2.show,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
+  var content = show ? "\"".concat(children, "\"") : children;
+  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className
+  }, props), {}, {
+    value: value,
+    style: {
+      color: color
+    },
+    children: content
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className,
+    color: color
+  }, props), {}, {
+    children: content
+  }));
+};
+exports.Semicolon = Semicolon;
+var CountInfo = function CountInfo(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
+    style: {
+      paddingLeft: 4,
+      fontStyle: 'italic'
+    },
+    color: "var(--w-rjv-info-color, #0000004d)",
+    className: "object-size",
+    children: children
+  });
+};
+exports.CountInfo = CountInfo;
+function RooNode(props) {
+  var _expands$keyid;
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {} : _props$value,
+    keyName = props.keyName,
+    _props$displayDataTyp = props.displayDataTypes,
+    displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
+    _props$components = props.components,
+    components = _props$components === void 0 ? {} : _props$components,
+    _props$displayObjectS = props.displayObjectSize,
+    displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
+    _props$indentWidth = props.indentWidth,
+    indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    _props$keyid = props.keyid,
+    keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
+  var isArray = Array.isArray(value);
+  var nameKeys = isArray ? Object.keys(value).map(function (m) {
+    return Number(m);
+  }) : Object.keys(value);
+  var subkeyid = (0, _react.useId)();
+  var expands = (0, _store.useExpandsStatus)();
+  var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : true;
+  var arrowStyle = {
+    transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
+    transition: 'all 0.3s'
+  };
+  var handle = function handle() {
+    !expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
+  };
+  var subNodeProps = {
+    components: components,
+    indentWidth: indentWidth,
+    displayDataTypes: displayDataTypes,
+    displayObjectSize: displayObjectSize,
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
+  var valueViewProps = {
+    displayDataTypes: displayDataTypes,
+    renderValue: components.value
+  };
+  var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
+    style: arrowStyle,
+    'data-expand': expand
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
+    style: arrowStyle
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center'
+      },
+      onClick: handle,
+      children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+          value: value,
+          render: components.objectKey,
+          color: typeof keyName === 'number' ? _value.typeMap['number'].color : '',
+          show: typeof keyName === 'string',
+          children: keyName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Colon, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+        start: true,
+        isArray: isArray,
+        render: components.braces
+      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ellipsis, {
+        render: components.ellipsis
+      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+        isArray: isArray,
+        render: components.braces
+      }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
+        children: [nameKeys.length, " items"]
+      })]
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      style: {
+        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        marginLeft: 6
+      },
+      children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
+        var item = value[key];
+        if (Array.isArray(item)) {
+          var label = isArray ? idx : key;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
+              value: item,
+              keyid: keyid + subkeyid + label,
+              keyName: label
+            }, subNodeProps))
+          }, label + idx);
+        }
+        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date)) {
+          if (Object.keys(item).length === 0) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              style: {
+                paddingLeft: indentWidth
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
+                renderKey: renderKey,
+                keyName: key,
+                value: item
+              })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+                render: components.braces,
+                start: true,
+                isArray: isArray
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+                render: components.braces,
+                isArray: isArray
+              }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
+                children: [Object.keys(item).length, " items"]
+              })]
+            }, key + idx);
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
+              keyid: keyid + subkeyid + key,
+              value: item,
+              keyName: key
+            }, subNodeProps))
+          }, key + idx);
+        }
+        if (typeof item === 'function') {
+          return;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          style: {
+            paddingLeft: indentWidth
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
+            renderKey: renderKey,
+            keyName: key,
+            value: item
+          }))
+        }, idx);
+      })
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      style: {
+        paddingLeft: 2
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+        render: components.braces,
+        isArray: isArray,
+        style: {
+          paddingLeft: 2,
+          display: 'inline-block'
+        }
+      })
+    })]
+  }));
+}

package/cjs/store.d.ts

@@ -0,0 +1,5 @@
+export declare const store: {
+    collapse(id: string): void;
+    expand(id: string): void;
+};
+export declare function useExpandsStatus(): Record<string, boolean>;

package/cjs/store.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.store = void 0;
+exports.useExpandsStatus = useExpandsStatus;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var expands = {};
+var listeners = [];
+var store = {
+  collapse: function collapse(id) {
+    expands = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, expands), {}, (0, _defineProperty2["default"])({}, id, false));
+    emitChange();
+  },
+  expand: function expand(id) {
+    expands = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, expands), {}, (0, _defineProperty2["default"])({}, id, true));
+    emitChange();
+  }
+};
+exports.store = store;
+function getSnapshot() {
+  return expands;
+}
+function subscribe(listener) {
+  listeners = [].concat((0, _toConsumableArray2["default"])(listeners), [listener]);
+  return function () {
+    listeners = listeners.filter(function (l) {
+      return l !== listener;
+    });
+  };
+}
+function emitChange() {
+  var _iterator = (0, _createForOfIteratorHelper2["default"])(listeners),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var listener = _step.value;
+      listener();
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}
+function useExpandsStatus() {
+  var expands = (0, _react.useSyncExternalStore)(subscribe, getSnapshot);
+  return expands;
+}

package/cjs/theme/dark.d.ts

@@ -0,0 +1,19 @@
+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-arrow-color': string;
+    '--w-rjv-info-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-null-color': string;
+    '--w-rjv-type-nan-color': string;
+    '--w-rjv-type-undefined-color': string;
+};

package/cjs/theme/dark.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.darkTheme = void 0;
+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-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#656565',
+  '--w-rjv-curlybraces-color': '#1896b6',
+  '--w-rjv-brackets-color': '#1896b6',
+  '--w-rjv-type-string-color': '#cb4b16',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#2aa198',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};
+exports.darkTheme = darkTheme;

package/cjs/theme/light.d.ts

@@ -0,0 +1,19 @@
+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-arrow-color': string;
+    '--w-rjv-info-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-null-color': string;
+    '--w-rjv-type-nan-color': string;
+    '--w-rjv-type-undefined-color': string;
+};

package/cjs/theme/light.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightTheme = void 0;
+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-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-type-string-color': '#cb4b16',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#2aa198',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};
+exports.lightTheme = lightTheme;

package/cjs/value.d.ts

@@ -0,0 +1,61 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const typeMap: {
+    string: {
+        color: string;
+        label: string;
+    };
+    number: {
+        color: string;
+        label: string;
+    };
+    float: {
+        color: string;
+        label: string;
+    };
+    bigint: {
+        color: string;
+        label: string;
+    };
+    boolean: {
+        color: string;
+        label: string;
+    };
+    date: {
+        color: string;
+        label: string;
+    };
+    null: {
+        color: string;
+        label: string;
+    };
+    NaN: {
+        color: string;
+        label: string;
+    };
+    undefined: {
+        color: string;
+        label: string;
+    };
+};
+export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
+export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    keyName?: string;
+    value: T;
+    displayDataTypes: boolean;
+    renderKey?: JSX.Element;
+    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 interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: string;
+    fontSize?: number;
+    opacity?: number;
+    paddingRight?: number;
+}
+export declare const Label: FC<PropsWithChildren<LabelProps>>;
+export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    type: keyof typeof typeMap;
+}
+export declare const Type: FC<PropsWithChildren<TypeProps>>;

package/cjs/value.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Type = exports.Label = exports.Colon = void 0;
+exports.ValueView = ValueView;
+exports.typeMap = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "style"],
+  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+var isFloat = function isFloat(n) {
+  return Number(n) === n && n % 1 !== 0 || isNaN(n);
+};
+var typeMap = {
+  string: {
+    color: 'var(--w-rjv-type-string-color, #cb4b16)',
+    label: 'string'
+  },
+  number: {
+    color: 'var(--w-rjv-type-int-color, #268bd2)',
+    label: 'int'
+  },
+  "float": {
+    color: 'var(--w-rjv-type-float-color, #859900)',
+    label: 'float'
+  },
+  bigint: {
+    color: 'var(--w-rjv-type-bigint-color, #268bd2)',
+    label: 'bigint'
+  },
+  "boolean": {
+    color: 'var(--w-rjv-type-boolean-color, #2aa198)',
+    label: 'bool'
+  },
+  date: {
+    color: 'var(--w-rjv-type-date-color, #586e75)',
+    label: 'date'
+  },
+  "null": {
+    color: 'var(--w-rjv-type-null-color, #d33682)',
+    label: 'null'
+  },
+  NaN: {
+    color: 'var(--w-rjv-type-nan-color, #859900)',
+    label: 'NaN'
+  },
+  undefined: {
+    color: 'var(--w-rjv-type-undefined-color, #586e75)',
+    label: 'undefined'
+  }
+};
+exports.typeMap = typeMap;
+var Colon = function Colon(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? ':' : _ref$children,
+    style = _ref.style,
+    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"])({
+      paddingRight: 3
+    }, style)
+  }, props), {}, {
+    children: children
+  }));
+};
+exports.Colon = Colon;
+function ValueView(props) {
+  var _typeMap$type;
+  var value = props.value,
+    keyName = props.keyName,
+    renderKey = props.renderKey,
+    renderValue = props.renderValue,
+    displayDataTypes = props.displayDataTypes,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var type = (0, _typeof2["default"])(value);
+  var content = '';
+  var color = '';
+  var style = {};
+  if (typeof value === 'number') {
+    type = isFloat(value) ? 'float' : 'number';
+    content = value.toString();
+  }
+  if (typeof value === 'boolean') {
+    type = 'boolean';
+    content = value.toString();
+  }
+  if ((0, _typeof2["default"])(value) === 'object' && value instanceof Date) {
+    type = 'date';
+    content = value.toString();
+  }
+  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+    type: type
+  });
+  if (value === null) {
+    type = 'null';
+    content = "".concat(value).toLocaleUpperCase();
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+    style = {
+      fontWeight: 'bold'
+    };
+  }
+  if (value === undefined) {
+    type = 'undefined';
+    content = String(value);
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  }
+  if (typeof value === 'bigint') {
+    type = 'bigint';
+    content = "".concat(value, "n");
+  }
+  if (typeof value === 'string') {
+    content = "\"".concat(value, "\"");
+  }
+  if (!displayDataTypes) {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  }
+  color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
+  if (content && typeof content === 'string') {
+    var valueView = renderValue ? renderValue({
+      className: 'w-rjv-value',
+      style: (0, _objectSpread2["default"])({
+        color: color
+      }, style),
+      type: type,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      color: color,
+      style: style,
+      className: "w-rjv-value",
+      children: content
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView]
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView]
+  }));
+}
+var Label = function Label(_ref2) {
+  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);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    style: (0, _objectSpread2["default"])({
+      color: color,
+      fontSize: fontSize,
+      opacity: opacity,
+      paddingRight: paddingRight
+    }, style)
+  }, reset), {}, {
+    children: children
+  }));
+};
+exports.Label = Label;
+var Type = function Type(props) {
+  var _typeMap$type2, _typeMap$type3;
+  var type = props.type;
+  var color = (_typeMap$type2 = typeMap[type]) === null || _typeMap$type2 === void 0 ? void 0 : _typeMap$type2.color;
+  var label = (_typeMap$type3 = typeMap[type]) === null || _typeMap$type3 === void 0 ? void 0 : _typeMap$type3.label;
+  if (color && label) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      color: color,
+      fontSize: 11,
+      opacity: 0.8,
+      paddingRight: 4,
+      className: "w-rjv-type",
+      "data-type": type,
+      children: label
+    });
+  }
+};
+exports.Type = Type;

package/esm/arrow/TriangleArrow.d.ts

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