@vitus-labs/elements 0.55.0 → 0.57.0-alpha.2

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export { Provider } from '@vitus-labs/unistyle';
 import * as React from 'react';
-import React__default, { ForwardedRef, ComponentType, VFC, PropsWithChildren, ReactElement, ForwardRefExoticComponent, ReactNode, ReactText, FC } from 'react';
-import { renderContent, config, HTMLTags, HTMLTagsText } from '@vitus-labs/core';
+import React__default, { ForwardedRef, ComponentType, FC, PropsWithChildren, ReactElement, ForwardRefExoticComponent, ReactNode } from 'react';
+import { render, BreakpointKeys, config, HTMLTags, HTMLTagsText } from '@vitus-labs/core';
 
 declare type ExtractNullableKeys<T> = {
     [P in keyof T as T[P] extends null | never | undefined ? never : P]: T[P];
@@ -12,69 +12,24 @@ declare type Id<T> = T extends infer U ? {
 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>]>>;
-/**
- * @hidden
- */
+declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => FC<MergeTypes<[P, ExtractProps<T>]>>;
 declare type InnerRef = ForwardedRef<any>;
-/**
- * @hidden
- */
 declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
-/**
- * @hidden
- */
 declare type Css = CssCallback | string | ReturnType<typeof config.css>;
-/**
- * @hidden
- */
 declare type isEmpty = null | undefined;
-/**
- * @hidden
- */
-declare type Content = Parameters<typeof renderContent>['0'];
-/**
- * @hidden
- */
+declare type Content = Parameters<typeof render>['0'];
 declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
-/**
- * @hidden
- */
 declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
-/**
- * @hidden
- */
 declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
-/**
- * @hidden
- */
-declare type AlignY$2 = ContentAlignY | ContentAlignY[] | Record<string, ContentAlignY>;
-/**
- * @hidden
- */
-declare type AlignX$2 = ContentAlignX | ContentAlignX[] | Record<string, ContentAlignX>;
-/**
- * @hidden
- */
-declare type Direction = ContentDirection | ContentDirection[] | Record<string, ContentDirection>;
-/**
- * @hidden
- */
-declare type ResponsiveBooltype = boolean | Record<string, boolean> | Array<boolean>;
-/**
- * @hidden
- */
-declare type Responsive = number | Array<string | number> | Record<string, number | string>;
-/**
- * @hidden
- */
-declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
-/**
- * @hidden
- */
+declare type AlignY$2 = ContentAlignY | ContentAlignY[] | Partial<Record<BreakpointKeys, ContentAlignY>>;
+declare type AlignX$2 = ContentAlignX | ContentAlignX[] | Partial<Record<BreakpointKeys, ContentAlignX>>;
+declare type Direction = ContentDirection | ContentDirection[] | Partial<Record<BreakpointKeys, ContentDirection>>;
+declare type ResponsiveBooltype = boolean | Array<boolean> | Partial<Record<BreakpointKeys, boolean>>;
+declare type Responsive = number | Array<string | number> | Partial<Record<BreakpointKeys, number | string>>;
+declare type ExtendCss = Css | Array<Css> | Partial<Record<BreakpointKeys, Css>>;
 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;
+declare type VLComponent<P = Record<string, unknown>> = FC<P> & VLStatic;
 interface ForwardRefRenderFunction<T, P = Record<string, unknown>> {
     (props: PropsWithChildren<P & {
         ref?: ForwardedRef<T>;
@@ -132,7 +87,7 @@ declare type VLElement<P extends Record<string, unknown> = {}> = {
     }): ReactElement | null;
 } & VLStatic;
 
-declare const component$7: VLElement;
+declare const Component$3: VLElement;
 
 declare type Props$7 = Partial<{
     equalBeforeAfter: boolean;
@@ -144,14 +99,14 @@ declare const withEqualBeforeAfter: SimpleHoc<Props$7>;
 
 declare type MaybeNull = undefined | null;
 declare type TObj = Record<string, unknown>;
-declare type SimpleValue = ReactText;
-/**
- * @hidden
- */
+declare type SimpleValue = string | number;
+declare type ObjectValue = Partial<{
+    id: SimpleValue;
+    key: SimpleValue;
+    itemId: SimpleValue;
+    component: ElementType;
+}> & Record<string, unknown>;
 declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
-/**
- * @hidden
- */
 declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -160,28 +115,16 @@ declare type ExtendedProps = {
     even: boolean;
     position: number;
 };
-/**
- * @hidden
- */
-declare type DataArrayObject = Partial<{
-    id: SimpleValue;
-    key: SimpleValue;
-    itemId: SimpleValue;
-    component: ElementType;
-}> & Record<string, unknown>;
-/**
- * @hidden
- */
-declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
+declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | ObjectValue, extendedProps: ExtendedProps) => TObj);
 declare type Props$6 = Partial<{
     children: ReactNode;
-    data: Array<SimpleValue | DataArrayObject | MaybeNull>;
+    data: Array<SimpleValue | ObjectValue | MaybeNull>;
     component: ElementType;
     valueName: string;
     wrapComponent: ElementType;
     itemProps: PropsCallback;
     wrapProps?: PropsCallback;
-    itemKey?: keyof DataArrayObject | ((item: SimpleValue | Omit<DataArrayObject, 'component'>, index: number) => SimpleValue);
+    itemKey?: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue);
 }>;
 
 declare type Props$5 = MergeTypes<[
@@ -192,7 +135,7 @@ declare type Props$5 = MergeTypes<[
         content: never;
     }
 ]>;
-declare const component$6: VLElement<Props$5>;
+declare const component$3: VLElement<Props$5>;
 
 declare type Key = string | number;
 declare type Props$4 = {
@@ -201,7 +144,7 @@ declare type Props$4 = {
     activeItems?: Key | Array<string | number>;
     itemProps?: Record<string, unknown> | ((props: Record<string, unknown>) => Record<string, unknown>);
 };
-declare const component$5: SimpleHoc<Props$4>;
+declare const component$2: SimpleHoc<Props$4>;
 
 declare type Align$1 = 'bottom' | 'top' | 'left' | 'bottom' | 'right';
 declare type AlignX$1 = 'left' | 'center' | 'right';
@@ -245,7 +188,7 @@ declare type TriggerRenderer = (props: Partial<{
     active: boolean;
     showContent: () => void;
     hideContent: () => void;
-}>) => Content;
+}>) => ReactNode;
 declare type ContentRenderer = (props: Partial<{
     active: boolean;
     showContent: () => void;
@@ -253,7 +196,7 @@ declare type ContentRenderer = (props: Partial<{
     align: Align;
     alignX: AlignX;
     alignY: AlignY;
-}>) => Content;
+}>) => ReactNode;
 declare type Props$3 = {
     children: Content | TriggerRenderer;
     trigger: Content | ContentRenderer;
@@ -261,21 +204,23 @@ declare type Props$3 = {
     triggerRefName?: string;
     contentRefName?: string;
 } & UseOverlayProps;
-declare const component$4: VLComponent<Props$3>;
+declare const Component$2: VLComponent<Props$3>;
 
 declare type Context = {
     blocked: boolean;
     setBlocked: () => void;
     setUnblocked: () => void;
 };
-declare const component$3: FC<Context>;
+declare const component$1: FC<Context & {
+    children: ReactNode;
+}>;
 
 declare type Props$2 = {
     position?: HTMLElement;
     children: ReactNode;
     tag?: string;
 };
-declare const component$2: VLComponent<Props$2>;
+declare const Component$1: VLComponent<Props$2>;
 
 declare type Props$1 = Partial<{
     paragraph: boolean;
@@ -284,7 +229,7 @@ declare type Props$1 = Partial<{
     tag: HTMLTagsText;
     extendCss: ExtendCss;
 }>;
-declare const component$1: VLForwardedComponent<Props$1> & {
+declare const component: VLForwardedComponent<Props$1> & {
     isText?: true;
 };
 
@@ -293,6 +238,6 @@ declare type Props = {
     className?: string | string[];
     style?: Record<string, unknown>;
 };
-declare const component: VLComponent<Props>;
+declare const Component: VLComponent<Props>;
 
-export { AlignX$2 as AlignX, AlignY$2 as AlignY, Content, DataArrayObject, Direction, component$7 as Element, Props$8 as ElementProps, ElementType, ExtendCss, ExtendedProps, InnerRef, Props$6 as IteratorProps, component$6 as List, Props$5 as ListProps, component$4 as Overlay, Props$3 as OverlayProps, component$3 as OverlayProvider, component$2 as Portal, Props$2 as PortalProps, PropsCallback, Responsive, ResponsiveBooltype, component$1 as Text, Props$1 as TextProps, UseOverlayProps, component as Util, Props as UtilProps, _default as useOverlay, component$5 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { AlignX$2 as AlignX, AlignY$2 as AlignY, Content, Direction, Component$3 as Element, Props$8 as ElementProps, ElementType, ExtendCss, ExtendedProps, InnerRef, Props$6 as IteratorProps, component$3 as List, Props$5 as ListProps, ObjectValue, Component$2 as Overlay, Props$3 as OverlayProps, component$1 as OverlayProvider, Component$1 as Portal, Props$2 as PortalProps, PropsCallback, Responsive, ResponsiveBooltype, component as Text, Props$1 as TextProps, UseOverlayProps, Component as Util, Props as UtilProps, _default as useOverlay, component$2 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };

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

@@ -1,3 +1,3 @@
 import type { VLElement } from './types';
-declare const component: VLElement;
-export default component;
+declare const Component: VLElement;
+export default Component;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { VLComponent, Content } from "../types";
 import { UseOverlayProps } from './useOverlay';
 declare type Align = 'bottom' | 'top' | 'left' | 'bottom' | 'right';
@@ -7,7 +8,7 @@ declare type TriggerRenderer = (props: Partial<{
     active: boolean;
     showContent: () => void;
     hideContent: () => void;
-}>) => Content;
+}>) => ReactNode;
 declare type ContentRenderer = (props: Partial<{
     active: boolean;
     showContent: () => void;
@@ -15,7 +16,7 @@ declare type ContentRenderer = (props: Partial<{
     align: Align;
     alignX: AlignX;
     alignY: AlignY;
-}>) => Content;
+}>) => ReactNode;
 export declare type Props = {
     children: Content | TriggerRenderer;
     trigger: Content | ContentRenderer;
@@ -23,5 +24,5 @@ export declare type Props = {
     triggerRefName?: string;
     contentRefName?: string;
 } & UseOverlayProps;
-declare const component: VLComponent<Props>;
-export default component;
+declare const Component: VLComponent<Props>;
+export default Component;

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

@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 declare type Context = {
     blocked: boolean;
     setBlocked: () => void;
     setUnblocked: () => void;
 };
 export declare const useOverlayContext: () => Context;
-declare const component: FC<Context>;
+declare const component: FC<Context & {
+    children: ReactNode;
+}>;
 export default component;

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

@@ -5,5 +5,5 @@ export declare type Props = {
     children: ReactNode;
     tag?: string;
 };
-declare const component: VLComponent<Props>;
-export default component;
+declare const Component: VLComponent<Props>;
+export default Component;

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

@@ -1,2 +1,2 @@
-declare const _default: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+declare const _default: import("styled-components").StyledComponent<"object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meter" | "nav" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | import("react").ComponentType<{}>, any, {}, never>;
 export default _default;

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

@@ -5,5 +5,5 @@ export declare type Props = {
     className?: string | string[];
     style?: Record<string, unknown>;
 };
-declare const component: VLComponent<Props>;
-export default component;
+declare const Component: VLComponent<Props>;
+export default Component;

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

@@ -5,5 +5,5 @@ declare type Static = {
     isIterator: true;
     RESERVED_PROPS: typeof RESERVED_PROPS;
 };
-declare const component: FC<Props> & Static;
-export default component;
+declare const Component: FC<Props> & Static;
+export default Component;

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

@@ -1,4 +1,4 @@
 import component from './component';
-import type { Props, PropsCallback, DataArrayObject, ExtendedProps, ElementType } from './types';
-export type { Props, PropsCallback, DataArrayObject, ExtendedProps, ElementType, };
+import type { Props, PropsCallback, ObjectValue, ExtendedProps, ElementType } from './types';
+export type { Props, PropsCallback, ObjectValue, ExtendedProps, ElementType };
 export default component;

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

@@ -1,15 +1,15 @@
-import type { ComponentType, ForwardRefExoticComponent, ReactText, ReactNode } from 'react';
+import type { ComponentType, ForwardRefExoticComponent, 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;
-/**
- * @hidden
- */
+export declare type SimpleValue = string | number;
+export declare type ObjectValue = Partial<{
+    id: SimpleValue;
+    key: SimpleValue;
+    itemId: SimpleValue;
+    component: ElementType;
+}> & Record<string, unknown>;
 export declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
-/**
- * @hidden
- */
 export declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -18,26 +18,14 @@ export declare type ExtendedProps = {
     even: boolean;
     position: number;
 };
-/**
- * @hidden
- */
-export declare type DataArrayObject = Partial<{
-    id: SimpleValue;
-    key: SimpleValue;
-    itemId: SimpleValue;
-    component: ElementType;
-}> & Record<string, unknown>;
-/**
- * @hidden
- */
-export declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
+export declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | ObjectValue, extendedProps: ExtendedProps) => TObj);
 export declare type Props = Partial<{
     children: ReactNode;
-    data: Array<SimpleValue | DataArrayObject | MaybeNull>;
+    data: Array<SimpleValue | ObjectValue | MaybeNull>;
     component: ElementType;
     valueName: string;
     wrapComponent: ElementType;
     itemProps: PropsCallback;
     wrapProps?: PropsCallback;
-    itemKey?: keyof DataArrayObject | ((item: SimpleValue | Omit<DataArrayObject, 'component'>, index: number) => SimpleValue);
+    itemKey?: keyof ObjectValue | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue);
 }>;

package/lib/types/index.d.ts

@@ -5,7 +5,7 @@ import Overlay, { Props as OverlayProps, useOverlay, OverlayProvider, UseOverlay
 import Portal, { Props as PortalProps } from "./Portal";
 import Text, { Props as TextProps } from "./Text";
 import Util, { Props as UtilProps } from "./Util";
-import type { Props as IteratorProps, PropsCallback, DataArrayObject, ExtendedProps, ElementType } from "./helpers/Iterator";
+import type { Props as IteratorProps, PropsCallback, ObjectValue, ExtendedProps, ElementType } from "./helpers/Iterator";
 import type { AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef } from "./types";
-export type { ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, UtilProps, IteratorProps, AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef, PropsCallback, DataArrayObject, ExtendedProps, ElementType, };
+export type { ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, UtilProps, IteratorProps, AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef, PropsCallback, ObjectValue, ExtendedProps, ElementType, };
 export { Element, withEqualSizeBeforeAfter, withActiveState, List, Overlay, useOverlay, OverlayProvider, Portal, Text, Util, Provider, };

package/lib/types/types.d.ts

@@ -1,5 +1,7 @@
-import type { ComponentType, VFC, ForwardedRef, PropsWithChildren, ReactElement } from 'react';
-import { config, renderContent } from '@vitus-labs/core';
+import type { ComponentType, FC, ForwardedRef, PropsWithChildren, ReactElement } from 'react';
+import { MakeItResponsive } from '@vitus-labs/unistyle';
+import { config, render, BreakpointKeys } from '@vitus-labs/core';
+export declare type ResponsiveStylesCallback = Parameters<MakeItResponsive>[0]['styles'];
 declare type ExtractNullableKeys<T> = {
     [P in keyof T as T[P] extends null | never | undefined ? never : P]: T[P];
 };
@@ -9,73 +11,25 @@ declare type Id<T> = T extends infer U ? {
 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>]>>;
-/**
- * @hidden
- */
+export declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => FC<MergeTypes<[P, ExtractProps<T>]>>;
 export declare type InnerRef = ForwardedRef<any>;
-/**
- * @hidden
- */
 export declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
-/**
- * @hidden
- */
 export declare type Css = CssCallback | string | ReturnType<typeof config.css>;
-/**
- * @hidden
- */
 export declare type isEmpty = null | undefined;
-/**
- * @hidden
- */
-export declare type Content = Parameters<typeof renderContent>['0'];
-/**
- * @hidden
- */
+export declare type Content = Parameters<typeof render>['0'];
 export declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
-/**
- * @hidden
- */
 export declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
-/**
- * @hidden
- */
 export declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
-/**
- * @hidden
- */
 export declare type Ref = HTMLElement;
-/**
- * @hidden
- */
-export declare type AlignY = ContentAlignY | ContentAlignY[] | Record<string, ContentAlignY>;
-/**
- * @hidden
- */
-export declare type AlignX = ContentAlignX | ContentAlignX[] | Record<string, ContentAlignX>;
-/**
- * @hidden
- */
-export declare type Direction = ContentDirection | ContentDirection[] | Record<string, ContentDirection>;
-/**
- * @hidden
- */
-export declare type ResponsiveBooltype = boolean | Record<string, boolean> | Array<boolean>;
-/**
- * @hidden
- */
-export declare type Responsive = number | Array<string | number> | Record<string, number | string>;
-/**
- * @hidden
- */
-export declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
-/**
- * @hidden
- */
+export declare type AlignY = ContentAlignY | ContentAlignY[] | Partial<Record<BreakpointKeys, ContentAlignY>>;
+export declare type AlignX = ContentAlignX | ContentAlignX[] | Partial<Record<BreakpointKeys, ContentAlignX>>;
+export declare type Direction = ContentDirection | ContentDirection[] | Partial<Record<BreakpointKeys, ContentDirection>>;
+export declare type ResponsiveBooltype = boolean | Array<boolean> | Partial<Record<BreakpointKeys, boolean>>;
+export declare type Responsive = number | Array<string | number> | Partial<Record<BreakpointKeys, number | string>>;
+export declare type ExtendCss = Css | Array<Css> | Partial<Record<BreakpointKeys, 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;
+export declare type VLComponent<P = Record<string, unknown>> = FC<P> & VLStatic;
 interface ForwardRefRenderFunction<T, P = Record<string, unknown>> {
     (props: PropsWithChildren<P & {
         ref?: ForwardedRef<T>;