@uiw/react-json-view 2.0.0-alpha.2 → 2.0.0-alpha.21

package/cjs/section/CountInfoExtra.js

@@ -1,17 +1,45 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfoExtra = void 0;
+exports.CountInfoExtraComps = exports.CountInfoExtra = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
-var CountInfoExtra = function CountInfoExtra(props) {
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
+var CountInfoExtra = exports.CountInfoExtra = function CountInfoExtra(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Coun = _useSectionStore.CountInfoExtra,
     Comp = _useSectionStore$Coun === void 0 ? {} : _useSectionStore$Coun;
   (0, _useRender.useSectionRender)(Comp, props, 'CountInfoExtra');
   return null;
 };
-exports.CountInfoExtra = CountInfoExtra;
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+var CountInfoExtraComps = exports.CountInfoExtraComps = function CountInfoExtraComps(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {} : _props$value,
+    keyName = props.keyName,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Cou = _useSectionStore2.CountInfoExtra,
+    Comp = _useSectionStore2$Cou === void 0 ? {} : _useSectionStore2$Cou;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+  if (!render && !reset.children) return null;
+  var Elm = as || 'span';
+  var isRender = render && typeof render === 'function';
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other);
+  var child = isRender && render(elmProps, {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
+};
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

package/cjs/section/Ellipsis.d.ts

@@ -1,6 +1,16 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const Ellipsis: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+export interface EllipsisCompProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+    isExpanded: boolean;
+}
+export declare const EllipsisComp: {
+    <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/section/Ellipsis.js

@@ -1,17 +1,43 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Ellipsis = void 0;
+exports.EllipsisComp = exports.Ellipsis = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
-var Ellipsis = function Ellipsis(props) {
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
+var Ellipsis = exports.Ellipsis = function Ellipsis(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Elli = _useSectionStore.Ellipsis,
     Comp = _useSectionStore$Elli === void 0 ? {} : _useSectionStore$Elli;
   (0, _useRender.useSectionRender)(Comp, props, 'Ellipsis');
   return null;
 };
-exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+var EllipsisComp = exports.EllipsisComp = function EllipsisComp(_ref) {
+  var isExpanded = _ref.isExpanded,
+    value = _ref.value,
+    keyName = _ref.keyName;
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Ell = _useSectionStore2.Ellipsis,
+    Comp = _useSectionStore2$Ell === void 0 ? {} : _useSectionStore2$Ell;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    'data-expanded': isExpanded
+  }), {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
+};
+EllipsisComp.displayName = 'JVR.EllipsisComp';

package/cjs/section/KeyName.d.ts

@@ -1,6 +1,14 @@
+import { type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+export interface KeyNameCompProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement>, SectionElementResult<T> {
+}
+export declare const KeyNameComp: {
+    <T extends object>(props: PropsWithChildren<KeyNameCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/cjs/section/KeyName.js

@@ -1,17 +1,53 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KeyName = void 0;
+exports.KeyNameComp = exports.KeyName = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
-var KeyName = function KeyName(props) {
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
+var KeyName = exports.KeyName = function KeyName(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$KeyN = _useSectionStore.KeyName,
     Comp = _useSectionStore$KeyN === void 0 ? {} : _useSectionStore$KeyN;
   (0, _useRender.useSectionRender)(Comp, props, 'KeyName');
   return null;
 };
-exports.KeyName = KeyName;
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+var KeyNameComp = exports.KeyNameComp = function KeyNameComp(props) {
+  var children = props.children,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Key = _useSectionStore2.KeyName,
+    Comp = _useSectionStore2$Key === void 0 ? {} : _useSectionStore2$Key;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+  reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }), {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }));
+};
+KeyNameComp.displayName = 'JVR.KeyNameComp';

package/cjs/section/Row.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type TagType } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
+export declare const Row: {
+    <K extends TagType>(props: SectionElement<K>): null;
+    displayName: string;
+};
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement>, SectionElementResult<T> {
+}
+export declare const RowComp: {
+    <T extends object>(props: React.PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/cjs/section/Row.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowComp = exports.Row = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
+  _excluded2 = ["as", "render", "children"];
+var Row = exports.Row = function Row(props) {
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$Row = _useSectionStore.Row,
+    Comp = _useSectionStore$Row === void 0 ? {} : _useSectionStore$Row;
+  (0, _useRender.useSectionRender)(Comp, props, 'Row');
+  return null;
+};
+Row.displayName = 'JVR.Row';
+var RowComp = exports.RowComp = function RowComp(props) {
+  var children = props.children,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Row = _useSectionStore2.Row,
+    Comp = _useSectionStore2$Row === void 0 ? {} : _useSectionStore2$Row;
+  var as = Comp.as,
+    render = Comp.render,
+    _ = Comp.children,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+  var Elm = as || 'div';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset), {}, {
+    children: children
+  }), {
+    value: value,
+    keyName: keyName,
+    parentValue: parentValue,
+    keys: keys
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset), {}, {
+    children: children
+  }));
+};
+RowComp.displayName = 'JVR.RowComp';

package/cjs/store/Expands.js

@@ -16,10 +16,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useExpandsStore = function useExpandsStore() {
+var useExpandsStore = exports.useExpandsStore = function useExpandsStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useExpandsStore = useExpandsStore;
 var DispatchExpands = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchExpands.displayName = 'JVR.DispatchExpands';
 function useExpands() {
@@ -28,7 +27,7 @@ function useExpands() {
 function useExpandsDispatch() {
   return (0, _react.useContext)(DispatchExpands);
 }
-var Expands = function Expands(_ref) {
+var Expands = exports.Expands = function Expands(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -40,5 +39,4 @@ var Expands = function Expands(_ref) {
     })
   });
 };
-exports.Expands = Expands;
 Expands.displayName = 'JVR.Expands';

package/cjs/store/Section.d.ts

@@ -1,18 +1,23 @@
 import React, { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
-export type SectionElementProps<T extends TagType> = {
+export interface SectionElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
+export type SectionElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SectionElement<T>, result: {
-        value: unknown;
-        keyName: string | number;
-    }) => React.ReactNode;
+    render?: (props: SectionElement<T>, result: SectionElementResult<object>) => React.ReactNode;
 };
-export type SectionElement<T extends TagType> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
+export type SectionElement<T extends TagType = 'span'> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
 type InitialState<T extends TagType> = {
     Copied?: SectionElement<T>;
     CountInfo?: SectionElement<T>;
     CountInfoExtra?: SectionElement<T>;
     Ellipsis?: SectionElement<T>;
+    Row?: SectionElement<T>;
     KeyName?: SectionElement<T>;
 };
 type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -22,6 +27,7 @@ export declare function useSection(): [{
     CountInfo?: SectionElement<TagType> | undefined;
     CountInfoExtra?: SectionElement<TagType> | undefined;
     Ellipsis?: SectionElement<TagType> | undefined;
+    Row?: SectionElement<TagType> | undefined;
     KeyName?: SectionElement<TagType> | undefined;
 }, React.Dispatch<InitialState<TagType>>];
 export declare function useSectionDispatch(): Dispatch;

package/cjs/store/Section.js

@@ -49,6 +49,10 @@ var initialState = {
     className: 'w-rjv-ellipsis',
     children: '...'
   },
+  Row: {
+    as: 'div',
+    className: 'w-rjv-line'
+  },
   KeyName: {
     as: 'span',
     className: 'w-rjv-object-key'
@@ -58,10 +62,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useSectionStore = function useSectionStore() {
+var useSectionStore = exports.useSectionStore = function useSectionStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useSectionStore = useSectionStore;
 var DispatchSection = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchSection.displayName = 'JVR.DispatchSection';
 function useSection() {
@@ -70,7 +73,7 @@ function useSection() {
 function useSectionDispatch() {
   return (0, _react.useContext)(DispatchSection);
 }
-var Section = function Section(_ref) {
+var Section = exports.Section = function Section(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -82,5 +85,4 @@ var Section = function Section(_ref) {
     })
   });
 };
-exports.Section = Section;
 Section.displayName = 'JVR.Section';

package/cjs/store/ShowTools.js

@@ -16,10 +16,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useShowToolsStore = function useShowToolsStore() {
+var useShowToolsStore = exports.useShowToolsStore = function useShowToolsStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useShowToolsStore = useShowToolsStore;
 var DispatchShowTools = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchShowTools.displayName = 'JVR.DispatchShowTools';
 function useShowTools() {
@@ -28,7 +27,7 @@ function useShowTools() {
 function useShowToolsDispatch() {
   return (0, _react.useContext)(DispatchShowTools);
 }
-var ShowTools = function ShowTools(_ref) {
+var ShowTools = exports.ShowTools = function ShowTools(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -40,5 +39,4 @@ var ShowTools = function ShowTools(_ref) {
     })
   });
 };
-exports.ShowTools = ShowTools;
 ShowTools.displayName = 'JVR.ShowTools';

package/cjs/store/Symbols.d.ts

@@ -1,11 +1,11 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
-type SymbolsElementProps<T extends TagType> = {
+type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
     render?: (props: SymbolsElement<T>) => React.ReactNode;
     'data-type'?: string;
 };
-export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
+export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
 type InitialState<T extends ElementType = 'span'> = {
     Arrow?: SymbolsElement<T>;
     Colon?: SymbolsElement<T>;

package/cjs/store/Symbols.js

@@ -85,10 +85,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useSymbolsStore = function useSymbolsStore() {
+var useSymbolsStore = exports.useSymbolsStore = function useSymbolsStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useSymbolsStore = useSymbolsStore;
 var DispatchSymbols = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchSymbols.displayName = 'JVR.DispatchSymbols';
 function useSymbols() {
@@ -97,7 +96,7 @@ function useSymbols() {
 function useSymbolsDispatch() {
   return (0, _react.useContext)(DispatchSymbols);
 }
-var Symbols = function Symbols(_ref) {
+var Symbols = exports.Symbols = function Symbols(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -109,5 +108,4 @@ var Symbols = function Symbols(_ref) {
     })
   });
 };
-exports.Symbols = Symbols;
 Symbols.displayName = 'JVR.Symbols';

package/cjs/store/Types.d.ts

@@ -1,32 +1,33 @@
-import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef } from 'react';
 export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
-type TypesElementProps<T extends TagType> = {
+type TypesElementProps<T extends TagType = 'span'> = {
     as?: T;
     render?: (props: TypesElement<T>, result: {
         type: 'type' | 'value';
         value?: unknown;
+        keyName: string | number;
     }) => React.ReactNode;
     'data-type'?: string;
 };
 export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
-export type InitialTypesState = {
+export type InitialTypesState<T extends TagType = 'span'> = {
     displayDataTypes?: boolean;
-    Url?: TypesElement<TagType>;
-    Str?: TypesElement<TagType>;
-    Undefined?: TypesElement<TagType>;
-    Null?: TypesElement<TagType>;
-    True?: TypesElement<TagType>;
-    False?: TypesElement<TagType>;
-    Date?: TypesElement<TagType>;
-    Float?: TypesElement<TagType>;
-    Set?: TypesElement<TagType>;
-    Int?: TypesElement<TagType>;
-    Map?: TypesElement<TagType>;
-    Nan?: TypesElement<TagType>;
-    Bigint?: TypesElement<TagType>;
+    Url?: TypesElement<T>;
+    Str?: TypesElement<T>;
+    Undefined?: TypesElement<T>;
+    Null?: TypesElement<T>;
+    True?: TypesElement<T>;
+    False?: TypesElement<T>;
+    Date?: TypesElement<T>;
+    Float?: TypesElement<T>;
+    Set?: TypesElement<T>;
+    Int?: TypesElement<T>;
+    Map?: TypesElement<T>;
+    Nan?: TypesElement<T>;
+    Bigint?: TypesElement<T>;
 };
-type Dispatch = React.Dispatch<InitialTypesState>;
-export declare const useTypesStore: () => InitialTypesState;
+type Dispatch<T extends TagType> = React.Dispatch<InitialTypesState<T>>;
+export declare const useTypesStore: () => InitialTypesState<TagType>;
 export declare function useTypes(): [{
     displayDataTypes?: boolean | undefined;
     Url?: TypesElement<TagType> | undefined;
@@ -42,11 +43,14 @@ export declare function useTypes(): [{
     Map?: TypesElement<TagType> | undefined;
     Nan?: TypesElement<TagType> | undefined;
     Bigint?: TypesElement<TagType> | undefined;
-}, import("react").Dispatch<InitialTypesState>];
-export declare function useTypesDispatch(): Dispatch;
-interface TypesProps {
-    initial: InitialTypesState;
-    dispatch: Dispatch;
+}, import("react").Dispatch<InitialTypesState<TagType>>];
+export declare function useTypesDispatch(): Dispatch<TagType>;
+interface TypesProps<T extends TagType> {
+    initial: InitialTypesState<T>;
+    dispatch: Dispatch<TagType>;
+}
+export declare function Types<T extends TagType>({ initial, dispatch, children }: PropsWithChildren<TypesProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Types {
+    var displayName: string;
 }
-export declare const Types: FC<PropsWithChildren<TypesProps>>;
 export {};

package/cjs/store/Types.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Types = void 0;
+exports.Types = Types;
 exports.useTypes = useTypes;
 exports.useTypesDispatch = useTypesDispatch;
 exports.useTypesStore = void 0;
@@ -50,7 +50,8 @@ var initialState = {
   },
   Map: {
     style: {
-      color: 'var(--w-rjv-type-map-color, #268bd2)'
+      color: 'var(--w-rjv-type-map-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'map',
@@ -86,7 +87,8 @@ var initialState = {
   },
   Set: {
     style: {
-      color: 'var(--w-rjv-type-set-color, #268bd2)'
+      color: 'var(--w-rjv-type-set-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'set',
@@ -134,10 +136,9 @@ var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 var reducer = function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 };
-var useTypesStore = function useTypesStore() {
+var useTypesStore = exports.useTypesStore = function useTypesStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useTypesStore = useTypesStore;
 var DispatchTypes = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchTypes.displayName = 'JVR.DispatchTypes';
 function useTypes() {
@@ -146,7 +147,7 @@ function useTypes() {
 function useTypesDispatch() {
   return (0, _react.useContext)(DispatchTypes);
 }
-var Types = function Types(_ref) {
+function Types(_ref) {
   var initial = _ref.initial,
     dispatch = _ref.dispatch,
     children = _ref.children;
@@ -157,6 +158,5 @@ var Types = function Types(_ref) {
       children: children
     })
   });
-};
-exports.Types = Types;
+}
 Types.displayName = 'JVR.Types';

package/cjs/store.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { JsonViewProps } from './';
-import { type InitialTypesState } from './store/Types';
+import { type InitialTypesState, type TagType } from './store/Types';
 export type BlockTagType = keyof JSX.IntrinsicElements;
 export interface InitialState<T extends object> {
     value?: object;
@@ -20,10 +20,13 @@ export declare const Context: React.Context<InitialState<object>>;
 export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
 export declare const useStore: () => InitialState<object>;
 export declare const useDispatchStore: () => Dispatch;
-export interface ProviderProps {
+export interface ProviderProps<T extends TagType> {
     initialState?: InitialState<object>;
-    initialTypes?: InitialTypesState;
+    initialTypes?: InitialTypesState<T>;
 }
-export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare const Provider: {
+    <T extends TagType>({ children, initialState: init, initialTypes, }: PropsWithChildren<ProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare function useDispatch(): Dispatch;
 export {};

package/cjs/store.js

@@ -18,28 +18,24 @@ var _Types = require("./store/Types");
 var _Symbols = require("./store/Symbols");
 var _Section = require("./store/Section");
 var _jsxRuntime = require("react/jsx-runtime");
-var initialState = {
+var initialState = exports.initialState = {
   objectSortKeys: false,
   indentWidth: 15
 };
-exports.initialState = initialState;
-var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
-exports.Context = Context;
+var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)(initialState);
 Context.displayName = 'JVR.Context';
 var DispatchContext = /*#__PURE__*/(0, _react.createContext)(function () {});
 DispatchContext.displayName = 'JVR.DispatchContext';
 function reducer(state, action) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 }
-var useStore = function useStore() {
+var useStore = exports.useStore = function useStore() {
   return (0, _react.useContext)(Context);
 };
-exports.useStore = useStore;
-var useDispatchStore = function useDispatchStore() {
+var useDispatchStore = exports.useDispatchStore = function useDispatchStore() {
   return (0, _react.useContext)(DispatchContext);
 };
-exports.useDispatchStore = useDispatchStore;
-var Provider = function Provider(_ref) {
+var Provider = exports.Provider = function Provider(_ref) {
   var children = _ref.children,
     init = _ref.initialState,
     initialTypes = _ref.initialTypes;
@@ -98,7 +94,6 @@ var Provider = function Provider(_ref) {
     })
   });
 };
-exports.Provider = Provider;
 function useDispatch() {
   return (0, _react.useContext)(DispatchContext);
 }

package/cjs/symbol/Arrow.d.ts

@@ -1,6 +1,6 @@
 import { type SymbolsElement } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Arrow: {
-    (props: SymbolsElement<TagType>): null;
+    <K extends TagType = "span">(props: SymbolsElement<K>): null;
     displayName: string;
 };

package/cjs/symbol/Arrow.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Arrow = void 0;
 var _Symbols = require("../store/Symbols");
 var _useRender = require("../utils/useRender");
-var Arrow = function Arrow(props) {
+var Arrow = exports.Arrow = function Arrow(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Arro = _useSymbolsStore.Arrow,
     Comp = _useSymbolsStore$Arro === void 0 ? {} : _useSymbolsStore$Arro;
   (0, _useRender.useSymbolsRender)(Comp, props, 'Arrow');
   return null;
 };
-exports.Arrow = Arrow;
 Arrow.displayName = 'JVR.Arrow';