@vitus-labs/elements 0.15.2 → 0.16.0

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { Provider } from '@vitus-labs/unistyle';
-import React, { ComponentType, VFC, ReactNode, ForwardRefExoticComponent, ReactNodeArray, ReactText, FC } from 'react';
-import { config, HTMLTags } from '@vitus-labs/core';
+import React, { ComponentType, VFC, ForwardedRef, PropsWithChildren, ReactElement, ReactNode, ReactText, ForwardRefExoticComponent } from 'react';
+import { renderContent, config, HTMLTags } from '@vitus-labs/core';
 
 declare type ExtractNullableKeys<T> = {
     [P in keyof T as T[P] extends null | never | undefined ? never : P]: T[P];
@@ -12,9 +12,11 @@ declare type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 declare type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 declare type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => VFC<MergeTypes<[P, ExtractProps<T>]>>;
+declare type InnerRef = ForwardedRef<any>;
 declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
 declare type Css = CssCallback | string | ReturnType<typeof config.css>;
 declare type isEmpty = null | undefined;
+declare type Content = Parameters<typeof renderContent>['0'];
 declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
 declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
 declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
@@ -24,16 +26,37 @@ declare type Direction = ContentDirection | ContentDirection[] | Record<string,
 declare type ResponsiveBooltype = boolean | Record<string, boolean> | Array<boolean>;
 declare type Responsive = number | Array<string | number> | Record<string, number | string>;
 declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
-declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
+declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
+declare type VLForwardedComponent<P = Record<string, unknown>> = ForwardRefRenderFunction<any, P> & VLStatic;
+declare type VLComponent<P = Record<string, unknown>> = VFC<P> & VLStatic;
+interface ForwardRefRenderFunction<T, P = Record<string, unknown>> {
+    (props: PropsWithChildren<P & {
+        ref?: ForwardedRef<T>;
+    }>, ref: ForwardedRef<T>): ReactElement | null;
+}
+declare type VLStatic = {
+    /**
+     * React displayName
+     */
+    displayName?: string | undefined;
+    /**
+     * package name
+     */
+    pkgName?: string;
+    /**
+     * component name
+     */
+    VITUS_LABS__COMPONENT?: `@vitus-labs/${string}`;
+};
 
-declare const component: React.ForwardRefExoticComponent<Partial<{
-    tag: "object" | "center" | "label" | "a" | "abbr" | "acronym" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "meter" | "nav" | "noframes" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strike" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tt" | "u" | "ul" | "var" | "video" | "wbr";
-    innerRef: any;
-    children: React.ReactNode;
-    content: React.ReactNode;
-    label: React.ReactNode;
-    beforeContent: React.ReactNode;
-    afterContent: React.ReactNode;
+declare type Props$7 = Partial<{
+    tag: HTMLTags;
+    innerRef: InnerRef;
+    children: Content;
+    content: Content;
+    label: Content;
+    beforeContent: Content;
+    afterContent: Content;
     block: ResponsiveBooltype;
     equalCols: ResponsiveBooltype;
     gap: Responsive;
@@ -55,51 +78,22 @@ declare const component: React.ForwardRefExoticComponent<Partial<{
     contentCss: ExtendCss;
     beforeContentCss: ExtendCss;
     afterContentCss: ExtendCss;
-}> & React.RefAttributes<any>>;
+}>;
 
-declare type Props$7 = Partial<{
+declare const component$2: VLForwardedComponent<Props$7>;
+
+declare type Props$6 = Partial<{
     equalBeforeAfter: boolean;
     vertical?: boolean;
     afterContent?: React.ReactNode;
     beforeContent?: React.ReactNode;
 }>;
-declare const withEqualBeforeAfter: SimpleHoc<Props$7>;
-
-declare type Props$6 = Partial<{
-    tag: HTMLTags;
-    innerRef: any;
-    children: ReactNode;
-    content: ReactNode;
-    label: ReactNode;
-    beforeContent: ReactNode;
-    afterContent: ReactNode;
-    block: ResponsiveBooltype;
-    equalCols: ResponsiveBooltype;
-    gap: Responsive;
-    vertical: ResponsiveBooltype;
-    direction: Direction;
-    contentDirection: Direction;
-    beforeContentDirection: Direction;
-    afterContentDirection: Direction;
-    alignX: AlignX;
-    contentAlignX: AlignX;
-    beforeContentAlignX: AlignX;
-    afterContentAlignX: AlignX;
-    alignY: AlignY;
-    contentAlignY: AlignY;
-    beforeContentAlignY: AlignY;
-    afterContentAlignY: AlignY;
-    dangerouslySetInnerHTML: any;
-    css: ExtendCss;
-    contentCss: ExtendCss;
-    beforeContentCss: ExtendCss;
-    afterContentCss: ExtendCss;
-}>;
+declare const withEqualBeforeAfter: SimpleHoc<Props$6>;
 
 declare type MaybeNull = undefined | null;
 declare type TObj = Record<string, unknown>;
 declare type SimpleValue = ReactText;
-declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T>;
+declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
 declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -116,7 +110,7 @@ declare type DataArrayObject = Partial<{
 }> & Record<string, unknown>;
 declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
 declare type Props$5 = Partial<{
-    children: ReactNodeArray;
+    children: ReactNode[];
     data: Array<SimpleValue | DataArrayObject | MaybeNull>;
     component: ElementType;
     valueName: string;
@@ -127,7 +121,7 @@ declare type Props$5 = Partial<{
 }>;
 
 declare type Props$4 = MergeTypes<[
-    Props$6,
+    Props$7,
     Props$5,
     {
         rootElement?: boolean;
@@ -135,42 +129,7 @@ declare type Props$4 = MergeTypes<[
         content: never;
     }
 ]>;
-declare const Component$4: React.ForwardRefExoticComponent<{
-    tag?: "object" | "label" | "data" | "a" | "abbr" | "acronym" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "meter" | "nav" | "noframes" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strike" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tt" | "u" | "ul" | "var" | "video" | "wbr";
-    innerRef?: any;
-    beforeContent?: React.ReactNode;
-    afterContent?: React.ReactNode;
-    block?: ResponsiveBooltype;
-    equalCols?: ResponsiveBooltype;
-    gap?: Responsive;
-    vertical?: ResponsiveBooltype;
-    direction?: Direction;
-    contentDirection?: Direction;
-    beforeContentDirection?: Direction;
-    afterContentDirection?: Direction;
-    alignX?: AlignX;
-    contentAlignX?: AlignX;
-    beforeContentAlignX?: AlignX;
-    afterContentAlignX?: AlignX;
-    alignY?: AlignY;
-    contentAlignY?: AlignY;
-    beforeContentAlignY?: AlignY;
-    afterContentAlignY?: AlignY;
-    dangerouslySetInnerHTML?: any;
-    css?: ExtendCss;
-    contentCss?: ExtendCss;
-    beforeContentCss?: ExtendCss;
-    afterContentCss?: ExtendCss;
-    children?: React.ReactNodeArray;
-    data?: (React.ReactText | DataArrayObject)[];
-    component?: ElementType<any>;
-    valueName?: string;
-    wrapComponent?: ElementType<any>;
-    itemProps?: PropsCallback;
-    wrapProps?: PropsCallback;
-    itemKey?: string | ((item: React.ReactText | Omit<DataArrayObject, "component">, index: number) => React.ReactText);
-    rootElement?: boolean;
-} & React.RefAttributes<any>>;
+declare const Component$2: VLForwardedComponent<Props$4>;
 
 declare type Key = string | number;
 declare type Props$3 = {
@@ -179,11 +138,11 @@ declare type Props$3 = {
     activeItems?: Key | Array<string | number>;
     itemProps?: Record<string, unknown> | ((props: Record<string, unknown>) => Record<string, unknown>);
 };
-declare const Component$3: SimpleHoc<Props$3>;
+declare const Component$1: SimpleHoc<Props$3>;
 
 declare type Props$2 = {
-    children: ReactNode | ComponentType;
-    trigger: ReactNode | ComponentType;
+    children: Content;
+    trigger: Content;
     DOMLocation?: HTMLElement;
     refName?: string;
     triggerRefName?: string;
@@ -200,14 +159,14 @@ declare type Props$2 = {
     offsetY?: number;
     throttleDelay?: number;
 };
-declare const Component$2: FC<Props$2>;
+declare const Component: VLComponent<Props$2>;
 
 declare type Props$1 = {
     position?: HTMLElement;
     children: ReactNode;
     tag?: string;
 };
-declare const Component$1: FC<Props$1>;
+declare const component$1: VLComponent<Props$1>;
 
 declare type Props = Partial<{
     paragraph: boolean;
@@ -216,8 +175,8 @@ declare type Props = Partial<{
     tag: HTMLTags;
     extendCss: ExtendCss;
 }>;
-declare const Component: ForwardRefExoticComponent<Props> & {
+declare const component: VLForwardedComponent<Props> & {
     isText?: true;
 };
 
-export { component as Element, Props$6 as ElementProps, Component$4 as List, Props$4 as ListProps, Component$2 as Overlay, Props$2 as OverlayProps, Component$1 as Portal, Props$1 as PortalProps, Component as Text, Props as TextProps, Component$3 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { component$2 as Element, Props$7 as ElementProps, Component$2 as List, Props$4 as ListProps, Component as Overlay, Props$2 as OverlayProps, component$1 as Portal, Props$1 as PortalProps, component as Text, Props as TextProps, Component$1 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };

package/lib/types/Element/component.d.ts

@@ -1,32 +1,4 @@
-import React from 'react';
-declare const component: React.ForwardRefExoticComponent<Partial<{
-    tag: "object" | "center" | "label" | "a" | "abbr" | "acronym" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "meter" | "nav" | "noframes" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strike" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tt" | "u" | "ul" | "var" | "video" | "wbr";
-    innerRef: any;
-    children: React.ReactNode;
-    content: React.ReactNode;
-    label: React.ReactNode;
-    beforeContent: React.ReactNode;
-    afterContent: React.ReactNode;
-    block: import("../types").ResponsiveBooltype;
-    equalCols: import("../types").ResponsiveBooltype;
-    gap: import("../types").Responsive;
-    vertical: import("../types").ResponsiveBooltype;
-    direction: import("../types").Direction;
-    contentDirection: import("../types").Direction;
-    beforeContentDirection: import("../types").Direction;
-    afterContentDirection: import("../types").Direction;
-    alignX: import("../types").AlignX;
-    contentAlignX: import("../types").AlignX;
-    beforeContentAlignX: import("../types").AlignX;
-    afterContentAlignX: import("../types").AlignX;
-    alignY: import("../types").AlignY;
-    contentAlignY: import("../types").AlignY;
-    beforeContentAlignY: import("../types").AlignY;
-    afterContentAlignY: import("../types").AlignY;
-    dangerouslySetInnerHTML: any;
-    css: import("../types").ExtendCss;
-    contentCss: import("../types").ExtendCss;
-    beforeContentCss: import("../types").ExtendCss;
-    afterContentCss: import("../types").ExtendCss;
-}> & React.RefAttributes<any>>;
+import type { VLForwardedComponent } from "../types";
+import type { Props } from './types';
+declare const component: VLForwardedComponent<Props>;
 export default component;

package/lib/types/Element/types.d.ts

@@ -1,14 +1,13 @@
-import type { ReactNode } from 'react';
 import type { HTMLTags } from '@vitus-labs/core';
-import type { AlignX, AlignY, Direction, ResponsiveBooltype, Responsive, ExtendCss } from "../types";
+import type { AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef } from "../types";
 export declare type Props = Partial<{
     tag: HTMLTags;
-    innerRef: any;
-    children: ReactNode;
-    content: ReactNode;
-    label: ReactNode;
-    beforeContent: ReactNode;
-    afterContent: ReactNode;
+    innerRef: InnerRef;
+    children: Content;
+    content: Content;
+    label: Content;
+    beforeContent: Content;
+    afterContent: Content;
     block: ResponsiveBooltype;
     equalCols: ResponsiveBooltype;
     gap: Responsive;

package/lib/types/Element/utils.d.ts

@@ -1,7 +1,7 @@
 declare type Value<T = unknown> = T extends true ? 'rows' : 'inline';
 declare type TransformVerticalProp = <T extends boolean | Record<string, boolean> | Array<boolean>>(vertical: T) => T extends boolean ? Value<T> : T extends Record<string, boolean> ? Record<keyof T, Value<T[keyof T]>> : T extends Array<boolean> ? Array<Value<T[number]>> : T;
 export declare const transformVerticalProp: TransformVerticalProp;
-declare type GetValue = (tag: string) => boolean | undefined;
+declare type GetValue = (tag?: string) => boolean;
 export declare const isInlineElement: GetValue;
 export declare const getShouldBeEmpty: GetValue;
 export {};

package/lib/types/List/component.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Props as ElementProps } from "../Element";
 import { Props as IteratorProps } from "../helpers/Iterator";
-import type { MergeTypes } from "../types";
+import type { MergeTypes, VLForwardedComponent } from "../types";
 export declare type Props = MergeTypes<[
     ElementProps,
     IteratorProps,
@@ -11,40 +10,5 @@ export declare type Props = MergeTypes<[
         content: never;
     }
 ]>;
-declare const Component: React.ForwardRefExoticComponent<{
-    tag?: "object" | "label" | "data" | "a" | "abbr" | "acronym" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "meter" | "nav" | "noframes" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strike" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tt" | "u" | "ul" | "var" | "video" | "wbr";
-    innerRef?: any;
-    beforeContent?: React.ReactNode;
-    afterContent?: React.ReactNode;
-    block?: import("../types").ResponsiveBooltype;
-    equalCols?: import("../types").ResponsiveBooltype;
-    gap?: import("../types").Responsive;
-    vertical?: import("../types").ResponsiveBooltype;
-    direction?: import("../types").Direction;
-    contentDirection?: import("../types").Direction;
-    beforeContentDirection?: import("../types").Direction;
-    afterContentDirection?: import("../types").Direction;
-    alignX?: import("../types").AlignX;
-    contentAlignX?: import("../types").AlignX;
-    beforeContentAlignX?: import("../types").AlignX;
-    afterContentAlignX?: import("../types").AlignX;
-    alignY?: import("../types").AlignY;
-    contentAlignY?: import("../types").AlignY;
-    beforeContentAlignY?: import("../types").AlignY;
-    afterContentAlignY?: import("../types").AlignY;
-    dangerouslySetInnerHTML?: any;
-    css?: import("../types").ExtendCss;
-    contentCss?: import("../types").ExtendCss;
-    beforeContentCss?: import("../types").ExtendCss;
-    afterContentCss?: import("../types").ExtendCss;
-    children?: React.ReactNodeArray;
-    data?: (React.ReactText | import("../helpers/Iterator/types").DataArrayObject)[];
-    component?: import("../helpers/Iterator/types").ElementType<any>;
-    valueName?: string;
-    wrapComponent?: import("../helpers/Iterator/types").ElementType<any>;
-    itemProps?: import("../helpers/Iterator/types").PropsCallback;
-    wrapProps?: import("../helpers/Iterator/types").PropsCallback;
-    itemKey?: string | ((item: React.ReactText | Omit<import("../helpers/Iterator/types").DataArrayObject, "component">, index: number) => React.ReactText);
-    rootElement?: boolean;
-} & React.RefAttributes<any>>;
+declare const Component: VLForwardedComponent<Props>;
 export default Component;

package/lib/types/List/withActiveState.d.ts

@@ -1,4 +1,4 @@
-import { SimpleHoc } from "../types";
+import type { SimpleHoc } from "../types";
 declare type Key = string | number;
 declare type Props = {
     type?: 'single' | 'multi';

package/lib/types/Overlay/component.d.ts

@@ -1,7 +1,7 @@
-import { FC, ReactNode, ComponentType } from 'react';
+import type { VLComponent, Content } from "../types";
 export declare type Props = {
-    children: ReactNode | ComponentType;
-    trigger: ReactNode | ComponentType;
+    children: Content;
+    trigger: Content;
     DOMLocation?: HTMLElement;
     refName?: string;
     triggerRefName?: string;
@@ -18,5 +18,5 @@ export declare type Props = {
     offsetY?: number;
     throttleDelay?: number;
 };
-declare const Component: FC<Props>;
+declare const Component: VLComponent<Props>;
 export default Component;

package/lib/types/Portal/component.d.ts

@@ -1,8 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import type { VLComponent } from "../types";
 export declare type Props = {
     position?: HTMLElement;
     children: ReactNode;
     tag?: string;
 };
-declare const Component: FC<Props>;
-export default Component;
+declare const component: VLComponent<Props>;
+export default component;

package/lib/types/Text/component.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
 import type { HTMLTags } from '@vitus-labs/core';
-import type { ExtendCss } from "../types";
+import type { VLForwardedComponent, ExtendCss } from "../types";
 export declare type Props = Partial<{
     paragraph: boolean;
     label: ReactNode;
@@ -8,7 +8,7 @@ export declare type Props = Partial<{
     tag: HTMLTags;
     extendCss: ExtendCss;
 }>;
-declare const Component: ForwardRefExoticComponent<Props> & {
+declare const component: VLForwardedComponent<Props> & {
     isText?: true;
 };
-export default Component;
+export default component;

package/lib/types/Util/component.d.ts

@@ -1,8 +1,9 @@
 import { renderContent } from '@vitus-labs/core';
+import type { VLComponent } from "../types";
 export declare type Props = {
     children: Parameters<typeof renderContent>[0];
     className?: string | string[];
     style?: Record<string, unknown>;
 };
-declare const Element: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<any>>;
-export default Element;
+declare const component: VLComponent<Props>;
+export default component;

package/lib/types/constants.d.ts

@@ -1 +1 @@
-export declare const PKG_NAME = "@vitus-labs/elements";
+export declare const PKG_NAME: "@vitus-labs/elements";

package/lib/types/helpers/Content/component.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { StyledComponentPropsWithRef } from 'styled-components';
-import { Direction, AlignX, AlignY, ResponsiveBooltype, Responsive, ExtendCss } from "../../types";
+import type { Direction, AlignX, AlignY, ResponsiveBooltype, Responsive, ExtendCss } from "../../types";
 declare type Props = {
     parentDirection: Direction;
     gap: Responsive;

package/lib/types/helpers/Iterator/types.d.ts

@@ -1,8 +1,9 @@
-import type { ComponentType, ForwardRefExoticComponent, ReactText, ReactNodeArray } from 'react';
+import type { ComponentType, ForwardRefExoticComponent, ReactText, ReactNode } from 'react';
+import { HTMLTags } from '@vitus-labs/core';
 export declare type MaybeNull = undefined | null;
 export declare type TObj = Record<string, unknown>;
 export declare type SimpleValue = ReactText;
-export declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T>;
+export declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
 export declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -19,7 +20,7 @@ export declare type DataArrayObject = Partial<{
 }> & Record<string, unknown>;
 export declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
 export declare type Props = Partial<{
-    children: ReactNodeArray;
+    children: ReactNode[];
     data: Array<SimpleValue | DataArrayObject | MaybeNull>;
     component: ElementType;
     valueName: string;

package/lib/types/helpers/Wrapper/component.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { StyledComponentPropsWithRef } from 'styled-components';
-import { Direction, AlignX, AlignY, ResponsiveBooltype, ExtendCss } from "../../types";
+import type { Direction, AlignX, AlignY, ResponsiveBooltype, ExtendCss } from "../../types";
 declare type Props = {
     children: ReactNode;
     tag: StyledComponentPropsWithRef<any>;

package/lib/types/types.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentType, VFC } from 'react';
-import { config } from '@vitus-labs/core';
+import type { ComponentType, VFC, ForwardedRef, PropsWithChildren, ReactElement } from 'react';
+import { config, renderContent } from '@vitus-labs/core';
 declare type ExtractNullableKeys<T> = {
     [P in keyof T as T[P] extends null | never | undefined ? never : P]: T[P];
 };
@@ -10,9 +10,11 @@ declare type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 declare type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 export declare type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 export declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => VFC<MergeTypes<[P, ExtractProps<T>]>>;
+export declare type InnerRef = ForwardedRef<any>;
 export declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
 export declare type Css = CssCallback | string | ReturnType<typeof config.css>;
 export declare type isEmpty = null | undefined;
+export declare type Content = Parameters<typeof renderContent>['0'];
 export declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
 export declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
 export declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
@@ -24,4 +26,25 @@ export declare type ResponsiveBooltype = boolean | Record<string, boolean> | Arr
 export declare type Responsive = number | Array<string | number> | Record<string, number | string>;
 export declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
 export declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
+export declare type VLForwardedComponent<P = Record<string, unknown>> = ForwardRefRenderFunction<any, P> & VLStatic;
+export declare type VLComponent<P = Record<string, unknown>> = VFC<P> & VLStatic;
+interface ForwardRefRenderFunction<T, P = Record<string, unknown>> {
+    (props: PropsWithChildren<P & {
+        ref?: ForwardedRef<T>;
+    }>, ref: ForwardedRef<T>): ReactElement | null;
+}
+export declare type VLStatic = {
+    /**
+     * React displayName
+     */
+    displayName?: string | undefined;
+    /**
+     * package name
+     */
+    pkgName?: string;
+    /**
+     * component name
+     */
+    VITUS_LABS__COMPONENT?: `@vitus-labs/${string}`;
+};
 export {};