@vitus-labs/elements 0.79.0 → 0.81.0

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

@@ -2,38 +2,425 @@ import type { ReactElement, ForwardedRef } from 'react';
 import type { HTMLTags } from '@vitus-labs/core';
 import type { AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef, VLStatic } from "../types";
 export type Props = Partial<{
+    /**
+     * Valid HTML Tag
+     */
     tag: HTMLTags;
+    /**
+     * React `ref`, the prop is alternative to `ref` prop without need to wrap component to `forwardRef`
+     */
     innerRef: InnerRef;
+    /**
+     * Valid React `children`
+     */
     children: Content;
+    /**
+     * Alternative prop to React `children`
+     * It is recommended to pass only one of `children`, `content` or `label` props
+     *
+     * The prioritization of rendering is following: `children` → `content` → `label`
+     */
     content: Content;
+    /**
+     * Alternative prop to React `children`
+     * It is recommended to pass only one of `children`, `content` or `label` props
+     *
+     * The prioritization of rendering is following: `children` → `content` → `label`
+     */
     label: Content;
+    /**
+     * Valid React `children` to be rendered inside _beforeContent_ wrapper
+     *
+     * In a case, where at least one of `beforeContent` or `afterContent` is defined,
+     * **Element** component will render additional inner wrapper helpers to
+     * attach `beforeContent` **before** any of `children`, `context` or `label`
+     * props.
+     *
+     * Together with prop `direction` can be the **Element** component aligned
+     * vertically or horizontally.
+     *
+     * To attach any react node _after_, use `afterContent`
+     */
     beforeContent: Content;
+    /**
+     * Valid React `children` to be rendered inside _afterContent_ wrapper
+     *
+     * In a case, where at least one of `beforeContent` or `afterContent` is defined,
+     * **Element** component will render additional inner wrapper helpers to
+     * attach `afterContent` **after** any of `children`, `context` or `label`
+     * props.
+     *
+     * Together with prop `direction` can be the **Element** component aligned
+     * vertically or horizontally.
+     *
+     * To attach any react node _before_, use `beforeContent`
+     */
     afterContent: Content;
+    /**
+     * A boolean type to define wheather **Element** should behave
+     * as an inline or block element (`flex` vs. `inline-flex`)
+     */
     block: ResponsiveBooltype;
+    /**
+     * A boolean type to define wheather inner wrappers should be equal
+     * (have the same width or height)
+     */
     equalCols: ResponsiveBooltype;
+    /**
+     * Defines a `gap` spacing between inner wrappers between `beforeContent` and `children`
+     * and `children` and `afterContent`
+     */
     gap: Responsive;
+    /**
+     * Defines a `gap` spacing between inner wrappers between `beforeContent`,
+     * `children` and `afterContent`
+     */
     direction: Direction;
+    /**
+     * Defines flow of `children` elements within it's inner wrapper.
+     *
+     * Can be one of the following **flex** values `inline` | `rows` | `reverseInline` | `reverseRows`
+     */
     contentDirection: Direction;
+    /**
+     * Defines flow of `beforeContent` elements within it's inner wrapper.
+     *
+     * Can be one of the following **flex** values `inline` | `rows` | `reverseInline` | `reverseRows`
+     */
     beforeContentDirection: Direction;
+    /**
+     * Defines flow of `afterContent` elements within it's inner wrapper.
+     *
+     * Can be one of the following **flex** values `inline` | `rows` | `reverseInline` | `reverseRows`
+     */
     afterContentDirection: Direction;
+    /**
+     * Define alignment of `beforeContent`, `content`, and `afterContent`
+     * with respect to root element **horizontally**.
+     *
+     * Can be one of the following **flex** values `left` | `center` | `right` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     alignX: AlignX;
+    /**
+     * Defines how `content` children (`children`, `content` or `label` props)
+     * are aligned within it's inner wrapper **horizontally**.
+     *
+     * Can be one of the following **flex** values `left` | `center` | `right` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     contentAlignX: AlignX;
+    /**
+     * Defines how `beforeContent` children are aligned within it's inner wrapper **horizontally**.
+     *
+     * Can be one of the following **flex** values `left` | `center` | `right` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     beforeContentAlignX: AlignX;
+    /**
+     * Defines how `afterContent` children are aligned within it's inner wrapper **horizontally**.
+     *
+     * Can be one of the following **flex** values `left` | `center` | `right` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     afterContentAlignX: AlignX;
+    /**
+     * Define alignment of `beforeContent`, `content`, and `afterContent`
+     * with respect to root element **vertically**.
+     *
+     * Can be one of the following **flex** values `top` | `center` | `bottom` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     alignY: AlignY;
+    /**
+     * Defines how `content` children (`children`, `content` or `label` props)
+     * are aligned within it's inner wrapper **vertically**.
+     *
+     * Can be one of the following **flex** values `top` | `center` | `bottom` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     contentAlignY: AlignY;
+    /**
+     * Defines how `beforeContent` children are aligned within it's inner wrapper **vertically**.
+     *
+     * Can be one of the following **flex** values `top` | `center` | `bottom` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     beforeContentAlignY: AlignY;
+    /**
+     * Defines how `afterContent` children are aligned within it's inner wrapper **vertically**.
+     *
+     * Can be one of the following **flex** values `top` | `center` | `bottom` | `spaceBetween` |
+     * `spaceAround` | `block`
+     */
     afterContentAlignY: AlignY;
+    /**
+     * React `dangerouslySetInnerHTML` prop. For more details follow the link:
+     *
+     * https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
+     */
     dangerouslySetInnerHTML: {
         __html: string;
     };
+    /**
+     * An additional prop for extending styling of the **root** wrapper element
+     *
+     * #### [A] Template literals
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [B] String
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css="text-color: red;"
+     *  />
+     * )
+     * ```
+     *
+     * #### [C] Css Function
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * import { css } from 'styled-components'
+     *
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [D] Css Callback
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css => css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     */
     css: ExtendCss;
+    /**
+     * An additional prop for extending styling of the **content** wrapper element
+     *
+     * #### [A] Template literals
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [B] String
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css="text-color: red;"
+     *  />
+     * )
+     * ```
+     *
+     * #### [C] Css Function
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * import { css } from 'styled-components'
+     *
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [D] Css Callback
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css => css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     */
     contentCss: ExtendCss;
+    /**
+     * An additional prop for extending styling of the **beforeContent** wrapper element
+     *
+     * #### [A] Template literals
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [B] String
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css="text-color: red;"
+     *  />
+     * )
+     * ```
+     *
+     * #### [C] Css Function
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * import { css } from 'styled-components'
+     *
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [D] Css Callback
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css => css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     */
     beforeContentCss: ExtendCss;
+    /**
+     * An additional prop for extending styling of the **afterContent** wrapper element
+     *
+     * #### [A] Template literals
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [B] String
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css="text-color: red;"
+     *  />
+     * )
+     * ```
+     *
+     * #### [C] Css Function
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * import { css } from 'styled-components'
+     *
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     *
+     * #### [D] Css Callback
+     *
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+     *
+     * ```jsx
+     * export default () => (
+     *  <Element
+     *    label="This is an element"
+     *    css={css => css`
+     *      text-color: red;
+     *    `}
+     *  />
+     * )
+     * ```
+     */
     afterContentCss: ExtendCss;
 }>;
 export type VLElement<P extends Record<string, unknown> = {}> = {
-    (props: Props & P & {
+    <T extends Record<string, unknown> = {}>(props: Props & P & T & {
         ref?: ForwardedRef<any>;
     }): ReactElement | null;
 } & VLStatic;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Element/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,KAAK,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,QAAQ,EACR,QAAQ,EACT,iBAAe;AAEhB,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,QAAQ,CAAA;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;IACd,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,kBAAkB,CAAA;IACzB,SAAS,EAAE,kBAAkB,CAAA;IAC7B,GAAG,EAAE,UAAU,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,gBAAgB,EAAE,SAAS,CAAA;IAC3B,sBAAsB,EAAE,SAAS,CAAA;IACjC,qBAAqB,EAAE,SAAS,CAAA;IAChC,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,uBAAuB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C,GAAG,EAAE,SAAS,CAAA;IACd,UAAU,EAAE,SAAS,CAAA;IACrB,gBAAgB,EAAE,SAAS,CAAA;IAC3B,eAAe,EAAE,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI;IAC9D,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,YAAY,GAAG,IAAI,CAAA;CACtE,GAAG,QAAQ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Element/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,KAAK,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,QAAQ,EACR,QAAQ,EACT,iBAAe;AAEhB,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,GAAG,EAAE,QAAQ,CAAA;IAEb;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAA;IAElB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,OAAO,EAAE,OAAO,CAAA;IAEhB;;;;;OAKG;IACH,KAAK,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;OAYG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;;;;;;;;;;;OAYG;IACH,YAAY,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,KAAK,EAAE,kBAAkB,CAAA;IAEzB;;;OAGG;IACH,SAAS,EAAE,kBAAkB,CAAA;IAE7B;;;OAGG;IACH,GAAG,EAAE,UAAU,CAAA;IAEf;;;OAGG;IACH,SAAS,EAAE,SAAS,CAAA;IAEpB;;;;OAIG;IACH,gBAAgB,EAAE,SAAS,CAAA;IAE3B;;;;OAIG;IACH,sBAAsB,EAAE,SAAS,CAAA;IAEjC;;;;OAIG;IACH,qBAAqB,EAAE,SAAS,CAAA;IAEhC;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,mBAAmB,EAAE,MAAM,CAAA;IAE3B;;;;;OAKG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAE1B;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,mBAAmB,EAAE,MAAM,CAAA;IAE3B;;;;;OAKG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAE1B;;;;OAIG;IACH,uBAAuB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8DG;IACH,GAAG,EAAE,SAAS,CAAA;IAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8DG;IACH,UAAU,EAAE,SAAS,CAAA;IAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8DG;IACH,gBAAgB,EAAE,SAAS,CAAA;IAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8DG;IACH,eAAe,EAAE,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI;IAC9D,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,EACrC,KAAK,EAAE,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAA;KAAE,GACjD,YAAY,GAAG,IAAI,CAAA;CACvB,GAAG,QAAQ,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Element/utils.ts"],"names":[],"mappings":"AA4CA,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;AAEzC,eAAO,MAAM,eAAe,EAAE,QAG7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAG9B,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Element/utils.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;AAEzC,eAAO,MAAM,eAAe,EAAE,QAG7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAG9B,CAAA"}

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

@@ -1,14 +1,26 @@
 import { VLElement } from "../Element";
 import { Props as IteratorProps } from "../helpers/Iterator";
 import type { MergeTypes } from "../types";
+type ListProps = {
+    /**
+     * A boolean value. When set to `false`, component returns `React.Fragment`
+     * When set to `true`, component returns as the **root** element `Element`
+     * component.
+     */
+    rootElement?: boolean;
+    /**
+     * Label prop frol `Element` component is being ignored.
+     */
+    label: never;
+    /**
+     * Content prop frol `Element` component is being ignored.
+     */
+    content: never;
+};
 export type Props = MergeTypes<[
     IteratorProps,
-    {
-        rootElement?: boolean;
-        label: never;
-        content: never;
-    }
+    ListProps
 ]>;
-declare const component: VLElement<Props>;
-export default component;
+declare const Component: VLElement<Props>;
+export default Component;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/List/component.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,SAAS,EAAE,mBAAiB;AAC9C,OAAiB,EAAE,KAAK,IAAI,aAAa,EAAE,4BAA0B;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAe;AAEzC,MAAM,MAAM,KAAK,GAAG,UAAU,CAC5B;IACE,aAAa;IACb;QACE,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,KAAK,EAAE,KAAK,CAAA;QACZ,OAAO,EAAE,KAAK,CAAA;KACf;CACF,CACF,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,SAAS,CAAC,KAAK,CAY/B,CAAA;AAQD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/List/component.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,SAAS,EAAE,mBAAiB;AAC9C,OAAiB,EAAE,KAAK,IAAI,aAAa,EAAE,4BAA0B;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAe;AAEzC,KAAK,SAAS,GAAG;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,OAAO,EAAE,KAAK,CAAA;CACf,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,CAC5B;IACE,aAAa;IACb,SAAS;CACV,CACF,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,SAAS,CAAC,KAAK,CAY/B,CAAA;AAQD,eAAe,SAAS,CAAA"}

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

@@ -18,10 +18,33 @@ type ContentRenderer = (props: Partial<{
     alignY: AlignY;
 }>) => ReactNode;
 export type Props = {
+    /**
+     * Children to be rendered within **Overlay** component when Overlay is active.
+     */
     children: Content | TriggerRenderer;
+    /**
+     * React component to be used as a trigger (e.g. `Button` for opening
+     * dropdowns). Component must acept accept `ref` or any other prop name
+     * defined in `triggerRefName` prop.
+     */
     trigger: Content | ContentRenderer;
+    /**
+     * Defines a HTML DOM where children to be appended. Component uses JavaScript
+     * [`Node.appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
+     *
+     * For more information follow [Portal](https://vitus-labs.com/docs/ui-system/elements/portal)
+     * component.
+     */
     DOMLocation?: HTMLElement;
+    /**
+     * Defines a prop name to be used for passing `ref` for **trigger**. By default,
+     * the value is `ref`.
+     */
     triggerRefName?: string;
+    /**
+     * Defines a prop name to be used for passing `ref` for **content** (passed `children`).
+     * By default, the value is `ref`.
+     */
     contentRefName?: string;
 } & UseOverlayProps;
 declare const Component: VLComponent<Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Overlay/component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjD,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAe;AACnD,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE1D,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC3D,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AACzC,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEzC,KAAK,eAAe,GAAG,CACrB,KAAK,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC,KACC,SAAS,CAAA;AAEd,KAAK,eAAe,GAAG,CACrB,KAAK,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf,CAAC,KACC,SAAS,CAAA;AAEd,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC,OAAO,EAAE,OAAO,GAAG,eAAe,CAAA;IAClC,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,eAAe,CAAA;AAEnB,QAAA,MAAM,SAAS,EAAE,WAAW,CAAC,KAAK,CAuDjC,CAAA;AAQD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Overlay/component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjD,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAe;AACnD,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE1D,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC3D,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AACzC,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEzC,KAAK,eAAe,GAAG,CACrB,KAAK,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC,KACC,SAAS,CAAA;AAEd,KAAK,eAAe,GAAG,CACrB,KAAK,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf,CAAC,KACC,SAAS,CAAA;AAEd,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC;;;;OAIG;IACH,OAAO,EAAE,OAAO,GAAG,eAAe,CAAA;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,eAAe,CAAA;AAEnB,QAAA,MAAM,SAAS,EAAE,WAAW,CAAC,KAAK,CAuDjC,CAAA;AAQD,eAAe,SAAS,CAAA"}

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

@@ -2,21 +2,80 @@ type Align = 'bottom' | 'top' | 'left' | 'bottom' | 'right';
 type AlignX = 'left' | 'center' | 'right';
 type AlignY = 'bottom' | 'top' | 'center';
 export type UseOverlayProps = Partial<{
+    /**
+     * Defines default state whather **Overlay** component should be active.
+     * Default value is `false`.
+     */
     isOpen: boolean;
+    /**
+     * Defines `event` when **Overlay** is supposed to be open.
+     *
+     * When `manual` is set, callbacks needs to be applied to make it working.
+     */
     openOn: 'click' | 'hover' | 'manual';
+    /**
+     * Defines `event` when **Overlay** is supposed to be closed.
+     */
     closeOn: 'click' | 'clickOnTrigger' | 'clickOutsideContent' | 'hover' | 'manual';
+    /**
+     * Defines what type of **Overlay** will be created. Type `modal`
+     * has different positioning calculations than others.
+     */
     type: 'dropdown' | 'tooltip' | 'popover' | 'modal';
+    /**
+     * Defines how `content` is treated regarding CSS positioning.
+     */
     position: 'absolute' | 'fixed' | 'relative' | 'static';
+    /**
+     * Defines from which side is `content` aligned to `trigger` (top, left, bottom, right).
+     * For more specific alignment configuration can be used `alignX` and/or `alignY` prop.
+     */
     align: Align;
+    /**
+     * Defines how `content` is aligned to `trigger` on axis X
+     */
     alignX: AlignX;
+    /**
+     * Defines how `content` is aligned to `trigger` on axis Y
+     */
     alignY: AlignY;
+    /**
+     * Defines `margin` from trigger on axis X.
+     */
     offsetX: number;
+    /**
+     * Defines `margin` from trigger on axis Y.
+     */
     offsetY: number;
+    /**
+     * Performance helper. Value defined in miliseconds for `throttling`
+     * recalculations
+     */
     throttleDelay: number;
+    /**
+     * A valid HTML element. Prop can be used for ability to handle properly
+     * scrolling inside custom scrollable HTML element.
+     */
     parentContainer: HTMLElement | null;
+    /**
+     * Defines wheather active **Overlay** is supposed to be closed on pressing
+     * `ESC` key.
+     */
     closeOnEsc: boolean;
+    /**
+     * When set to `true`, **Overlay** is automatically closed and is blocked for
+     * being opened.
+     */
     disabled: boolean;
+    /**
+     * A callback hook to be called when **Overlay** is being opened. Does not
+     * accept any arguments.
+     */
     onOpen: () => void;
+    /**
+     * A callback hook to be called when **Overlay** is being closed. Does not
+     * accept any arguments.
+     */
     onClose: () => void;
 }>;
 declare const useOverlay: ({ isOpen, openOn, closeOn, type, position, align, alignX, alignY, offsetX, offsetY, throttleDelay, parentContainer, closeOnEsc, disabled, onOpen, onClose, }?: Partial<UseOverlayProps>) => {

package/lib/types/Overlay/useOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../../src/Overlay/useOverlay.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC3D,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AACzC,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEzC,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC;IACpC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC,OAAO,EACH,OAAO,GACP,gBAAgB,GAChB,qBAAqB,GACrB,OAAO,GACP,QAAQ,CAAA;IACZ,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAClD,QAAQ,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAA;IACtD,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC,CAAA;AAEF,QAAA,MAAM,UAAU,kKAiBb,QAAQ,eAAe,CAAC;;uBAgdqB,WAAW;;;;;;;;;;;;;;;;;CAqB1D,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../../src/Overlay/useOverlay.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC3D,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AACzC,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEzC,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC;;OAEG;IACH,OAAO,EACH,OAAO,GACP,gBAAgB,GAChB,qBAAqB,GACrB,OAAO,GACP,QAAQ,CAAA;IAEZ;;;OAGG;IACH,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAClD;;OAEG;IACH,QAAQ,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAA;IACtD;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,eAAe,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC,CAAA;AAEF,QAAA,MAAM,UAAU,kKAiBb,QAAQ,eAAe,CAAC;;uBAgdqB,WAAW;;;;;;;;;;;;;;;;;CAqB1D,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -1,8 +1,18 @@
 import { ReactNode } from 'react';
 import type { VLComponent } from "../types";
 export type Props = {
+    /**
+     * Defines a HTML DOM where children to be appended. Component uses JavaScript
+     * [`Node.appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
+     */
     DOMLocation?: HTMLElement;
+    /**
+     * Children to be rendered within **Portal** component.
+     */
     children: ReactNode;
+    /**
+     * Valid HTML Tag
+     */
     tag?: string;
 };
 declare const Component: VLComponent<Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Portal/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAe;AAE1C,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,WAAW,CAAC,KAAK,CAwBjC,CAAA;AAQD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Portal/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAe;AAE1C,MAAM,MAAM,KAAK,GAAG;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,WAAW,CAAC,KAAK,CAwBjC,CAAA;AAQD,eAAe,SAAS,CAAA"}

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

@@ -2,14 +2,29 @@ import { ReactNode } from 'react';
 import type { HTMLTextTags } from '@vitus-labs/core';
 import type { VLForwardedComponent, ExtendCss } from "../types";
 export type Props = Partial<{
-    paragraph: boolean;
+    /**
+     * Label can be used instead of children for inline syntax. But **children** prop takes a precedence
+     */
     label: ReactNode;
+    /**
+     * Children to be rendered within **Text** component.
+     */
     children: ReactNode;
+    /**
+     * Defines whether should behave as a block text element. Automatically adds **p** HTML tag
+     */
+    paragraph: boolean;
+    /**
+     * Defines what kind of HTML tag should be rendered
+     */
     tag: HTMLTextTags;
-    extendCss: ExtendCss;
+    /**
+     * If an additional styling needs to be added, it can be do so via injecting styles using this property.
+     */
+    css: ExtendCss;
 }>;
-declare const component: VLForwardedComponent<Props> & {
+declare const Component: VLForwardedComponent<Props> & {
     isText?: true;
 };
-export default component;
+export default Component;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Text/component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAwC,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,iBAAe;AAG9D,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,GAAG,EAAE,YAAY,CAAA;IACjB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAC,CAAA;AAIF,QAAA,MAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,CAAC,GAAG;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAA;CAoBd,CAAA;AASD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/Text/component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAwC,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,iBAAe;AAG9D,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,EAAE,YAAY,CAAA;IACjB;;OAEG;IACH,GAAG,EAAE,SAAS,CAAA;CACf,CAAC,CAAA;AAIF,QAAA,MAAM,SAAS,EAAE,oBAAoB,CAAC,KAAK,CAAC,GAAG;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAA;CAkBb,CAAA;AASF,eAAe,SAAS,CAAA"}