@uiw/react-json-view 2.0.0-alpha.1 → 2.0.0-alpha.3

package/esm/section/CountInfo.js

@@ -1,5 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { useStore } from '../store';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfo = props => {
   var {
     CountInfo: Comp = {}
@@ -7,4 +13,40 @@ export var CountInfo = props => {
   useSectionRender(Comp, props, 'CountInfo');
   return null;
 };
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+export var CountInfoComp = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    displayObjectSize
+  } = useStore();
+  var {
+    CountInfo: Comp = {}
+  } = useSectionStore();
+  if (!displayObjectSize) return null;
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  var Elm = as || 'span';
+  reset.style = _extends({}, reset.style, props.style);
+  var len = Object.keys(value).length;
+  if (!reset.children) {
+    reset.children = len + " items";
+  }
+  var elmProps = _extends({}, reset, other);
+  var isRender = render && typeof render === 'function';
+  var child = isRender && render(_extends({}, elmProps, {
+    'data-length': len
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoComp.displayName = 'JVR.CountInfoComp';

package/esm/section/CountInfoExtra.d.ts

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

package/esm/section/CountInfoExtra.js

@@ -1,5 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfoExtra = props => {
   var {
     CountInfoExtra: Comp = {}
@@ -7,4 +12,30 @@ export var CountInfoExtra = props => {
   useSectionRender(Comp, props, 'CountInfoExtra');
   return null;
 };
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+export var CountInfoExtraComps = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    CountInfoExtra: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  if (!render && !reset.children) return null;
+  var Elm = as || 'span';
+  var isRender = render && typeof render === 'function';
+  var elmProps = _extends({}, reset, other);
+  var child = isRender && render(elmProps, {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = props => {
   var {
     Ellipsis: Comp = {}
@@ -7,4 +11,30 @@ export var Ellipsis = props => {
   useSectionRender(Comp, props, 'Ellipsis');
   return null;
 };
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+export var EllipsisComp = _ref => {
+  var {
+    isExpanded,
+    value,
+    keyName
+  } = _ref;
+  var {
+    Ellipsis: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    'data-expanded': isExpanded
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
+};
+EllipsisComp.displayName = 'JVR.EllipsisComp';

package/esm/section/KeyName.d.ts

@@ -1,6 +1,13 @@
+import { type FC, type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+type KeyNameCompProps = {
+    keyName: string | number;
+    value?: unknown;
+};
+export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
+export {};

package/esm/section/KeyName.js

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyName = props => {
   var {
     KeyName: Comp = {}
@@ -7,4 +11,36 @@ export var KeyName = props => {
   useSectionRender(Comp, props, 'KeyName');
   return null;
 };
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+export var KeyNameComp = props => {
+  var {
+    children,
+    value,
+    keyName
+  } = props;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var {
+    KeyName: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  reset.style = _extends({}, reset.style, style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    children
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
+    children: children
+  }));
+};
+KeyNameComp.displayName = 'JVR.KeyNameComp';

package/esm/store/Symbols.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var initialState = {
   Arrow: {
     as: 'span',
+    className: 'w-rjv-arrow',
     style: {
       transform: 'rotate(0deg)',
       transition: 'all 0.3s'

package/{cjs/comps/ReRender/Symbols.d.ts → esm/symbol/index.d.ts}

@@ -1,16 +1,14 @@
 /// <reference types="react" />
-import { type SymbolsElement } from '../../store/Symbols';
-import { type TagType } from '../../store/Types';
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
 export declare const Quote: {
     (props: {
         isNumber?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
-    (props: {
-        isNumber?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    (props: React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Colon: {

package/esm/{comps/ReRender/Symbols.js → symbol/index.js}

@@ -1,52 +1,54 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["as", "render"],
+var _excluded = ["isNumber"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
-  _excluded4 = ["as", "style", "render"],
-  _excluded5 = ["as", "render"],
+  _excluded4 = ["as", "render"],
+  _excluded5 = ["as", "style", "render"],
   _excluded6 = ["as", "render"],
   _excluded7 = ["as", "render"],
-  _excluded8 = ["as", "render"];
-import { useSymbolsStore } from '../../store/Symbols';
-import { useExpandsStore } from '../../store/Expands';
+  _excluded8 = ["as", "render"],
+  _excluded9 = ["as", "render"];
+import { useSymbolsStore } from '../store/Symbols';
+import { useExpandsStore } from '../store/Expands';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Quote = props => {
   var {
     Quote: Comp = {}
   } = useSymbolsStore();
   var {
-    isNumber
-  } = props;
+      isNumber
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   if (isNumber) return null;
   var {
       as,
       render
     } = Comp,
-    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var elmProps = _extends({}, other, reset);
+  var child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
 Quote.displayName = 'JVR.Quote';
 export var ValueQuote = props => {
   var {
     ValueQuote: Comp = {}
   } = useSymbolsStore();
-  var {
-    isNumber
-  } = props;
-  if (isNumber) return null;
+  var other = _extends({}, (_objectDestructuringEmpty(props), props));
   var {
       as,
       render
     } = Comp,
-    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded3);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var elmProps = _extends({}, other, reset);
+  var child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
 ValueQuote.displayName = 'JVR.ValueQuote';
 export var Colon = () => {
@@ -57,7 +59,7 @@ export var Colon = () => {
       as,
       render
     } = Comp,
-    reset = _objectWithoutPropertiesLoose(Comp, _excluded3);
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded4);
   var Elm = as || 'span';
   var child = render && typeof render === 'function' && render(reset);
   if (child) return child;
@@ -78,7 +80,7 @@ export var Arrow = props => {
       style,
       render
     } = Comp,
-    reset = _objectWithoutPropertiesLoose(Comp, _excluded4);
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
   var child = isRender && render(_extends({}, reset, {
@@ -104,7 +106,7 @@ export var BracketsOpen = _ref => {
         as,
         render: _render
       } = BracketsLeft,
-      reset = _objectWithoutPropertiesLoose(BracketsLeft, _excluded5);
+      reset = _objectWithoutPropertiesLoose(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
     var _child = _render && typeof _render === 'function' && _render(reset);
     if (_child) return _child;
@@ -114,7 +116,7 @@ export var BracketsOpen = _ref => {
       as: elm,
       render
     } = BraceLeft,
-    props = _objectWithoutPropertiesLoose(BraceLeft, _excluded6);
+    props = _objectWithoutPropertiesLoose(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
   var child = render && typeof render === 'function' && render(props);
   if (child) return child;
@@ -136,7 +138,7 @@ export var BracketsClose = _ref2 => {
         as,
         render: _render2
       } = BracketsRight,
-      _reset = _objectWithoutPropertiesLoose(BracketsRight, _excluded7);
+      _reset = _objectWithoutPropertiesLoose(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
     var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
     if (_child2) return _child2;
@@ -146,7 +148,7 @@ export var BracketsClose = _ref2 => {
       as: elm,
       render
     } = BraceRight,
-    reset = _objectWithoutPropertiesLoose(BraceRight, _excluded8);
+    reset = _objectWithoutPropertiesLoose(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
   var child = render && typeof render === 'function' && render(reset);
   if (child) return child;

package/{cjs/comps/ReRender/Types.d.ts → esm/types/index.d.ts}

@@ -1,16 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const SetComp: {
-    ({ isSet }: {
-        isSet: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export declare const MapComp: {
-    ({ isMap }: {
-        isMap: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const SetComp: FC<PropsWithChildren<{
+    value: unknown;
+}>>;
+export declare const MapComp: FC<PropsWithChildren<{
+    value: unknown;
+}>>;
 type TypeProps = PropsWithChildren<{
     expandKey: string;
     keyName: string | number;
@@ -32,5 +26,4 @@ export declare const TypeDate: FC<{
 export declare const TypeUndefined: FC<TypeProps>;
 export declare const TypeNull: FC<TypeProps>;
 export declare const TypeNan: FC<TypeProps>;
-export declare const TypeEmptyValue: FC<TypeProps>;
 export {};

package/esm/{comps/ReRender/Types.js → types/index.js}

@@ -12,59 +12,62 @@ var _excluded = ["as", "render"],
   _excluded10 = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"],
-  _excluded14 = ["as", "render"];
+  _excluded13 = ["as", "render"];
 import { Fragment, useState } from 'react';
-import { useTypesStore } from '../../store/Types';
-import { useStore } from '../../store';
-import { ValueQuote } from './Symbols';
-import { Copied } from '../Copied';
+import { useTypesStore } from '../store/Types';
+import { useStore } from '../store';
+import { ValueQuote } from '../symbol';
+import { Copied } from '../comps/Copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var SetComp = _ref => {
   var {
-    isSet
+    value
   } = _ref;
   var {
-    Set = {},
+    Set: Comp = {},
     displayDataTypes
   } = useTypesStore();
+  var isSet = value instanceof Set;
   if (!isSet || !displayDataTypes) return null;
   var {
       as,
       render
-    } = Set,
-    reset = _objectWithoutPropertiesLoose(Set, _excluded);
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/_jsx(Comp, _extends({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
 SetComp.displayName = 'JVR.SetComp';
 export var MapComp = _ref2 => {
   var {
-    isMap
+    value
   } = _ref2;
   var {
-    Map = {},
+    Map: Comp = {},
     displayDataTypes
   } = useTypesStore();
+  var isMap = value instanceof Map;
   if (!isMap || !displayDataTypes) return null;
   var {
       as,
       render
-    } = Map,
-    reset = _objectWithoutPropertiesLoose(Map, _excluded2);
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/_jsx(Comp, _extends({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
 MapComp.displayName = 'JVR.MapComp';
 var defalutStyle = {
@@ -99,7 +102,6 @@ export var TypeString = _ref3 => {
     });
     if (childrenStr.length > length) {
       reset.onClick = () => {
-        if (length && childrenStr.length <= length) return setShorten(false);
         setShorten(!shorten);
       };
     }
@@ -122,10 +124,12 @@ export var TypeString = _ref3 => {
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
-    }))), child || /*#__PURE__*/_jsxs(Comp, _extends({}, reset, {
-      className: "w-rjv-value",
-      children: [/*#__PURE__*/_jsx(ValueQuote, {}), text, /*#__PURE__*/_jsx(ValueQuote, {})]
-    })), /*#__PURE__*/_jsx(Copied, {
+    }))), child || /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
+        className: "w-rjv-value",
+        children: text
+      })), /*#__PURE__*/_jsx(ValueQuote, {})]
+    }), /*#__PURE__*/_jsx(Copied, {
       keyName: keyName,
       value: children,
       expandKey: expandKey
@@ -383,7 +387,7 @@ export var TypeUrl = _ref9 => {
     value: children
   });
   var child = isRender && render(_extends({}, reset, {
-    children,
+    children: children == null ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
@@ -430,8 +434,9 @@ export var TypeDate = _ref10 => {
     type: 'type',
     value: children
   });
+  var childStr = children == null ? void 0 : children.toString();
   var child = isRender && render(_extends({}, reset, {
-    children,
+    children: childStr,
     className: 'w-rjv-value'
   }), {
     type: 'value',
@@ -442,7 +447,7 @@ export var TypeDate = _ref10 => {
       style: style
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
-      children: children == null ? void 0 : children.toString()
+      children: childStr
     })), /*#__PURE__*/_jsx(Copied, {
       keyName: keyName,
       value: children,
@@ -560,49 +565,7 @@ export var TypeNan = _ref13 => {
     value: children
   });
   var child = isRender && render(_extends({}, reset, {
-    children,
-    className: 'w-rjv-value'
-  }), {
-    type: 'value',
-    value: children
-  });
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
-      style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
-  });
-};
-TypeNan.displayName = 'JVR.TypeNan';
-export var TypeEmptyValue = _ref14 => {
-  var {
-    children,
-    expandKey,
-    keyName
-  } = _ref14;
-  var {
-    Nan = {},
-    displayDataTypes
-  } = useTypesStore();
-  var {
-      as,
-      render
-    } = Nan,
-    reset = _objectWithoutPropertiesLoose(Nan, _excluded14);
-  var Comp = as || 'span';
-  var style = _extends({}, defalutStyle, Nan.style || {});
-  var isRender = render && typeof render === 'function';
-  var type = isRender && render(_extends({}, reset, {
-    style
-  }), {
-    type: 'type',
-    value: children
-  });
-  var child = isRender && render(_extends({}, reset, {
-    children,
+    children: children == null ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',

package/esm/utils/useHighlight.js

@@ -38,7 +38,6 @@ export function useHighlight(_ref) {
     if (value !== prevValue) {
       return true;
     }
-    return false;
   }, [highlightUpdates, value]);
   useEffect(() => {
     if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/cjs/comps/CountInfo.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { type SectionElementProps } from '../store/Section';
-import { type TagType } from '../store/Types';
-export interface CountInfoProps<T extends object> {
-    value?: T;
-    keyName: string | number;
-}
-export declare const CountInfo: {
-    <T extends object>(props: SectionElementProps<TagType> & CountInfoProps<T> & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export interface CountInfoExtraProps<T extends object> {
-    value?: T;
-    keyName: string | number;
-}
-export declare const CountInfoExtra: {
-    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};