mosuk-ui 1.0.1

package/components/texts/hint/component/component.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { HintTypeConstant } from './component.constants';
+import { HintTypeEnum } from './component.enums';
+import styles from './component.module.css';
+export function Hint(_a) {
+    var _b;
+    var as = _a.as, type = _a.type, props = __rest(_a, ["as", "type"]);
+    var hintType = type !== null && type !== void 0 ? type : HintTypeEnum.INFO;
+    var Component = as !== null && as !== void 0 ? as : 'p';
+    var ComponentIcon = (_b = HintTypeConstant[hintType]) === null || _b === void 0 ? void 0 : _b.icon;
+    if (!(props === null || props === void 0 ? void 0 : props.children)) {
+        return undefined;
+    }
+    return (React.createElement(Component, __assign({}, props, { className: classNames('mosuk-hint', styles.hint, styles[hintType], props.className) }),
+        React.createElement(ComponentIcon, null), props === null || props === void 0 ? void 0 :
+        props.children));
+}

package/components/texts/hint/component/component.module.css

@@ -0,0 +1,56 @@
+@layer mosuk-ui {
+    @layer index-10 {
+        .hint {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--leading-2, 0.5em);
+
+            font-size: var(--text-xs, .75rem);
+            font-weight: 400;
+            line-height: var(--leading-relaxed, 1.625);
+
+            color: var(--color-black, #000000);
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 0.6s ease-in-out;
+            }
+
+            & svg {
+                width: var(--leading-4, 1em);
+                height: var(--leading-4, 1em);
+                min-width: var(--leading-4, 1em);
+                min-height: var(--leading-4, 1em);
+
+                color: var(--color-primary-500, #0074e7);
+
+                margin-top: 0.25em;
+            }
+
+            &.info {            
+                svg {
+                    color: var(--color-primary-500, #0074e7);
+                }
+            }
+
+            &.success {
+                svg {
+                    color: var(--color-green-500, oklch(0.723 0.219 149.579));
+                }
+            }
+
+            &.warning {
+                svg {
+                    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+                }
+            }
+
+            &.error {             
+                svg {
+                    color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                }
+            }
+        }
+    }
+}

package/components/texts/hint/component/index.d.ts

@@ -0,0 +1,28 @@
+import { Hint as BaseHint } from './component';
+import { HintAsEnum, HintTypeEnum } from './component.enums';
+import { HintProps } from './component.interface';
+export declare const Hint: typeof BaseHint & {
+    ENUMS: {
+        As: typeof HintAsEnum;
+        Type: typeof HintTypeEnum;
+    };
+    CONSTANTS: {
+        Type: {
+            info: {
+                icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+            };
+            success: {
+                icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+            };
+            warning: {
+                icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+            };
+            error: {
+                icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+            };
+        };
+    };
+};
+export declare namespace Hint {
+    type Props = HintProps;
+}

package/components/texts/hint/component/index.js

@@ -0,0 +1,12 @@
+import { Hint as BaseHint } from './component';
+import { HintTypeConstant } from './component.constants';
+import { HintAsEnum, HintTypeEnum } from './component.enums';
+export var Hint = Object.assign(BaseHint, {
+    ENUMS: {
+        As: HintAsEnum,
+        Type: HintTypeEnum
+    },
+    CONSTANTS: {
+        Type: HintTypeConstant
+    }
+});

package/components/texts/hint/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HintSkeletonProps } from './component.interface';
+export declare function HintSkeleton({ ...props }: HintSkeletonProps): React.JSX.Element;

package/components/texts/hint/skeleton/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface HintSkeletonProps extends HTMLAttributes<HTMLParagraphElement> {
+}

package/components/texts/hint/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/hint/skeleton/component.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
+import styles from './component.module.css';
+export function HintSkeleton(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: classNames('mosuk-hint-skeleton', styles.hint, props.className) }),
+        React.createElement(Skeleton, { className: styles.icon }),
+        React.createElement(Skeleton, { className: styles.text })));
+}

package/components/texts/hint/skeleton/component.module.css

@@ -0,0 +1,44 @@
+@layer mosuk-ui {
+    @layer index-10 {
+
+        /* ! =============================== Hint =============================== */
+        .hint {
+            width: 100%;
+
+            display: flex;
+            align-items: flex-start;
+            gap: calc(var(--spacing, .25rem) * 1.5);
+
+            font-size: var(--text-xs, .75rem);
+            font-weight: 400;
+            line-height: var(--leading-relaxed, 1.625em);
+
+            color: var(--color-black, #000000);
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 0.6s ease-in-out;
+            }
+
+            .icon {
+                width: var(--leading-5, 1.25em);
+                height: var(--leading-5, 1.25em);
+                min-width: var(--leading-5, 1.25em);
+                min-height: var(--leading-5, 1.25em);
+
+                color: var(--color-primary-500, #0074e7);
+
+                margin-top: 0.025em;
+            }
+
+            .text {
+                width: 50%;
+                height: var(--leading-4, 1em);
+                min-height: var(--leading-4, 1em);
+
+                margin-top: calc(var(--spacing, .25rem) * 0.375);
+            }
+        }
+    }
+}

package/components/texts/hint/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+import { HintSkeleton as BaseHintSkeleton } from './component';
+import { HintSkeletonProps } from './component.interface';
+export declare const HintSkeleton: typeof BaseHintSkeleton;
+export declare namespace HintSkeleton {
+    type Props = HintSkeletonProps;
+}

package/components/texts/hint/skeleton/index.js

@@ -0,0 +1,2 @@
+import { HintSkeleton as BaseHintSkeleton } from './component';
+export var HintSkeleton = BaseHintSkeleton;

package/components/texts/p/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { PProps } from './component.interface';
+export declare function P<C extends ElementType = 'p'>({ as, ...rest }: PProps<C>): React.JSX.Element;

package/components/texts/p/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type PProps<C extends ElementType = 'p'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/p/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/p/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function P(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'p');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-p', styles.p, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/texts/p/component/component.module.css

@@ -0,0 +1,53 @@
+@layer mosuk-ui {
+    @layer index-10 {
+        .p {
+            display: block;
+
+            font-size: var(--text-sm, 0.875rem);
+            font-weight: 400;
+            text-align: start;
+            line-height: var(--leading-relaxed, 1.625);
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+
+            &:has(.icon) {
+                line-height: 0;
+
+                .text {
+                    display: inline-flex;
+
+                    width: auto;
+                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
+
+                    line-height: var(--leading-relaxed, 1.625);
+                    vertical-align: top;
+
+                    margin-top: 0.20em;
+                    margin-left: calc(var(--spacing, .25rem) * 2);
+                }
+            }
+        }
+    }
+
+    @layer index-20 {
+        .p {
+            &:has(.icon) {
+                .icon {
+                    display: inline-flex;
+
+                    width: calc(var(--spacing, .25rem) * 7);
+                    height: calc(var(--spacing, .25rem) * 7);
+                    min-width: calc(var(--spacing, .25rem) * 7);
+                    min-height: calc(var(--spacing, .25rem) * 7);
+                    font-size: var(--text-base, 1rem);
+
+                    padding: calc(var(--spacing, .25rem) * 2);
+                }
+            }
+        }
+    }
+}

package/components/texts/p/component/icon/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PIconProps } from './component.interface';
+export declare function PIcon({ ...rest }: PIconProps): React.JSX.Element;

package/components/texts/p/component/icon/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { IconProps } from '../../../../actions/icon/component/component.interface';
+export interface PIconProps extends IconProps<ElementType> {
+}

package/components/texts/p/component/icon/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/p/component/icon/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Icon } from '../../../../actions/icon/component/index';
+import styles from '../component.module.css';
+export function PIcon(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Icon, __assign({}, rest, { className: classNames('mosuk-p-icon', styles.icon, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/texts/p/component/index.d.ts

@@ -0,0 +1,19 @@
+import { P as BaseP } from './component';
+import type { PProps } from './component.interface';
+import { PIcon } from './icon/component';
+import { PIconProps } from './icon/component.interface';
+import { PText } from './text/component';
+import { PTextProps } from './text/component.interface';
+export declare const P: typeof BaseP & {
+    Icon: typeof PIcon;
+    Text: typeof PText;
+};
+export declare namespace P {
+    type Props = PProps;
+    namespace Icon {
+        type Props = PIconProps;
+    }
+    namespace Text {
+        type Props = PTextProps;
+    }
+}

package/components/texts/p/component/index.js

@@ -0,0 +1,7 @@
+import { P as BaseP } from './component';
+import { PIcon } from './icon/component';
+import { PText } from './text/component';
+export var P = Object.assign(BaseP, {
+    Icon: PIcon,
+    Text: PText,
+});

package/components/texts/p/component/text/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { PTextProps } from './component.interface';
+export declare function PText<C extends ElementType = 'span'>({ as, ...rest }: PTextProps<C>): React.JSX.Element;

package/components/texts/p/component/text/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type PTextProps<C extends ElementType = 'span'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/p/component/text/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/p/component/text/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../component.module.css';
+export function PText(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'span');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-p-text', styles.text, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/texts/p/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { PSkeletonProps } from './component.interface';
+export declare function PSkeleton<C extends ElementType = 'div'>({ as, ...rest }: PSkeletonProps<C>): React.JSX.Element;

package/components/texts/p/skeleton/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type PSkeletonProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/p/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/p/skeleton/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function PSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-p-skeleton', styles.p, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/texts/p/skeleton/component.module.css

@@ -0,0 +1,58 @@
+@layer mosuk-ui {
+    @layer index-10 {
+        .p {
+            display: block;
+
+            width: 100%;
+
+            font-size: var(--text-sm, 0.875rem);
+            text-align: start;
+            line-height: 0;
+
+            .text {
+                display: inline-flex;
+
+                width: 100%;
+                height: 1.2em;
+                min-height: 1.2em;
+
+                line-height: 0;
+
+                border-radius: calc(infinity * 1px);
+            }
+
+            &:has(.icon) {
+                .text {
+                    display: inline-flex;
+
+                    width: 50%;
+                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
+
+                    line-height: var(--leading-relaxed, 1.625);
+                    vertical-align: top;
+
+                    margin-top: 0.4em;
+                    margin-left: calc(var(--spacing, .25rem) * 2);
+                }
+            }
+        }
+    }
+
+    @layer index-20 {
+        .p {
+            &:has(.icon) {
+                .icon {
+                    display: inline-flex;
+
+                    width: calc(var(--spacing, .25rem) * 7);
+                    height: calc(var(--spacing, .25rem) * 7);
+                    min-width: calc(var(--spacing, .25rem) * 7);
+                    min-height: calc(var(--spacing, .25rem) * 7);
+                    font-size: var(--text-base, 1rem);
+
+                    padding: calc(var(--spacing, .25rem) * 2);
+                }
+            }
+        }
+    }
+}

package/components/texts/p/skeleton/icon/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PIconSkeletonProps } from './component.interface';
+export declare function PIconSKeleton({ ...rest }: PIconSkeletonProps): React.JSX.Element;

package/components/texts/p/skeleton/icon/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { IconSkeletonProps } from '../../../../actions/icon/skeleton/component.interface';
+export interface PIconSkeletonProps extends IconSkeletonProps {
+}

package/components/texts/p/skeleton/icon/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/texts/p/skeleton/icon/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { IconSkeleton } from '../../../../actions/icon/skeleton/component';
+import styles from '../component.module.css';
+export function PIconSKeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(IconSkeleton, __assign({}, rest, { className: classNames('mosuk-p-icon-skeleton', styles.icon, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/texts/p/skeleton/index.d.ts

@@ -0,0 +1,19 @@
+import { PSkeleton as BasePSkeleton } from './component';
+import { PSkeletonProps } from './component.interface';
+import { PIconSKeleton } from './icon/component';
+import { PIconSkeletonProps } from './icon/component.interface';
+import { PTextSkeleton } from './text/component';
+import { PTextSkeletonProps } from './text/component.interface';
+export declare const PSkeleton: typeof BasePSkeleton & {
+    Icon: typeof PIconSKeleton;
+    Text: typeof PTextSkeleton;
+};
+export declare namespace PSkeleton {
+    type Props = PSkeletonProps;
+    namespace Icon {
+        type Props = PIconSkeletonProps;
+    }
+    namespace Text {
+        type Props = PTextSkeletonProps;
+    }
+}

package/components/texts/p/skeleton/index.js

@@ -0,0 +1,7 @@
+import { PSkeleton as BasePSkeleton } from './component';
+import { PIconSKeleton } from './icon/component';
+import { PTextSkeleton } from './text/component';
+export var PSkeleton = Object.assign(BasePSkeleton, {
+    Icon: PIconSKeleton,
+    Text: PTextSkeleton,
+});

package/components/texts/p/skeleton/text/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PTextSkeletonProps } from './component.interface';
+export declare function PTextSkeleton({ ...rest }: PTextSkeletonProps): React.JSX.Element;

package/components/texts/p/skeleton/text/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { SkeletonProps } from '../../../../display/skeleton/component/component.interface';
+export interface PTextSkeletonProps extends SkeletonProps<ElementType> {
+}