mosuk-ui 1.0.1

package/components/actions/input/skeleton/index.d.ts

@@ -0,0 +1,19 @@
+import { InputSkeleton as InputSkeletonComponent } from './component';
+import type { InputSkeletonProps } from './component.interface';
+import { InputHintSkeleton } from './hint/component';
+import { InputHintSkeletonProps } from './hint/component.interface';
+import { InputInputSkeleton } from './input/component';
+import { InputInputSkeletonProps } from './input/component.interface';
+export declare const InputSkeleton: typeof InputSkeletonComponent & {
+    Input: typeof InputInputSkeleton;
+    Hint: typeof InputHintSkeleton;
+};
+export declare namespace InputSkeleton {
+    type Props = InputSkeletonProps;
+    namespace Input {
+        type Props = InputInputSkeletonProps;
+    }
+    namespace Hint {
+        type Props = InputHintSkeletonProps;
+    }
+}

package/components/actions/input/skeleton/index.js

@@ -0,0 +1,7 @@
+import { InputSkeleton as InputSkeletonComponent } from './component';
+import { InputHintSkeleton } from './hint/component';
+import { InputInputSkeleton } from './input/component';
+export var InputSkeleton = Object.assign(InputSkeletonComponent, {
+    Input: InputInputSkeleton,
+    Hint: InputHintSkeleton,
+});

package/components/actions/input/skeleton/input/component.d.ts

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

package/components/actions/input/skeleton/input/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export interface InputInputSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: boolean;
+}

package/components/actions/input/skeleton/input/component.interface.js

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

package/components/actions/input/skeleton/input/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 InputInputSkeleton(_a) {
+    var icon = _a.icon, rest = __rest(_a, ["icon"]);
+    return (React.createElement("div", __assign({}, rest, { className: classNames('mosuk-input-skeleton-input', styles.input, rest === null || rest === void 0 ? void 0 : rest.className) }),
+        icon && React.createElement("div", { className: classNames(styles.icon) }),
+        React.createElement(Skeleton, { className: classNames(styles.field) })));
+}

package/components/actions/textarea/component/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextareaContextProps, TextareaProps } from './component.interface';
+export declare const TextareaContext: React.Context<TextareaContextProps | null>;
+export declare function Textarea({ ...props }: TextareaProps): React.JSX.Element;

package/components/actions/textarea/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { FieldsetHTMLAttributes } from 'react';
+export interface TextareaContextProps {
+}
+export interface TextareaProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+}

package/components/actions/textarea/component/component.interface.js

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

package/components/actions/textarea/component/component.js

@@ -0,0 +1,31 @@
+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 React, { createContext } from 'react';
+import styles from './component.module.css';
+export var TextareaContext = createContext(null);
+export function Textarea(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement(TextareaContext.Provider, { value: {} },
+        React.createElement("fieldset", __assign({}, props, { className: "mosuk-textarea ".concat((_b = styles.fieldset) !== null && _b !== void 0 ? _b : '', " ").concat((_c = props === null || props === void 0 ? void 0 : props.className) !== null && _c !== void 0 ? _c : '') }), props === null || props === void 0 ? void 0 : props.children)));
+}

package/components/actions/textarea/component/component.module.css

@@ -0,0 +1,284 @@
+@layer mosuk-ui {
+    @layer index-11 {
+
+        /* ! =============================== Textarea =============================== */
+        .textarea {
+            position: relative;
+            z-index: 0;
+
+            width: 100%;
+
+            display: block;
+
+            textarea {
+                overflow: hidden;
+                resize: none;
+
+                position: relative;
+                z-index: 1;
+
+                width: 100%;
+                height: auto;
+
+                display: block;
+
+                background-color: white;
+                color: black;
+
+                padding-top: calc(var(--spacing, .25rem) * 1);
+                padding-bottom: calc(var(--spacing, .25rem) * 1);
+                padding-left: calc(var(--spacing, .25rem) * 3);
+                padding-right: calc(var(--spacing, .25rem) * 3);
+                border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+                border-radius: var(--radius-2xl, 1rem);
+                outline: none;
+
+                transition: all 0.2s ease-in-out;
+
+                &::placeholder {
+                    color: transparent;
+                }
+
+                /* ? Если есть иконка слева */
+                &:has(~ .icon) {
+                    padding-left: calc(var(--spacing, .25rem) * 11);
+                }
+
+                /* ? Если есть значение */
+                &:not(:placeholder-shown) {
+                    &~.label {
+                        top: -9px;
+                        width: fit-content;
+                        font-size: var(--text-xs, .75rem);
+                    }
+                }
+
+                /* ? При наведении */
+                &:not(:hover) {
+                    transition: all 0.6s ease-in-out;
+
+                    &~.icon {
+                        transition: all 0.6s ease-in-out;
+                    }
+                }
+
+                /* ? При наведении */
+                &:hover {
+                    border-color: var(--color-primary-200, #b3deff);
+
+                    &~.label {
+                        color: var(--color-primary-500, #0074e7);
+                    }
+
+                    &~.icon {
+                        color: var(--color-primary-500, #0074e7);
+                        border-color: var(--color-primary-200, #b3deff);
+                    }
+                }
+
+                /* ? При фокусе или активном состоянии */
+                &:focus {
+                    border-color: var(--color-primary-500, #0074e7);
+
+                    &::placeholder {
+                        color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                    }
+
+                    &~.label {
+                        top: -9px;
+
+                        width: fit-content;
+
+                        color: var(--color-primary-500, #0074e7);
+                        font-size: var(--text-xs, .75rem);
+                    }
+
+                    &~.icon {
+                        color: var(--color-primary-500, #0074e7);
+                        border-color: var(--color-primary-500, #0074e7);
+                    }
+                }
+
+                /* ? При read-only */
+                &:read-only {
+                    background-color: var(--color-gray-50, oklch(0.985 0.002 247.839));
+                    pointer-events: none;
+                }
+            }
+
+            /* ? Лейбл */
+            .label {
+                position: absolute;
+                top: calc(var(--spacing, .25rem) * 1);
+                left: calc(var(--spacing, .25rem) * 3);
+                z-index: 1;
+
+                width: fit-content;
+                max-width: calc(100% - calc(var(--spacing, .25rem) * 8));
+
+                background-color: white;
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                padding-left: calc(var(--spacing, .25rem) * 1);
+                padding-right: calc(var(--spacing, .25rem) * 1);
+
+                cursor: text;
+                transition: all 0.2s ease-in-out;
+
+                &:has(~ .icon) {
+                    left: calc(var(--spacing, .25rem) * 10);
+                }
+            }
+
+            /* ? Иконка слева */
+            .icon {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+
+                width: 2rem;
+                height: 2rem;
+
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                padding: calc(var(--spacing, .25rem) * 2.5);
+                border-right: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+                border-bottom: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+                border-bottom-right-radius: var(--radius-2xl, 1rem);
+
+                cursor: text;
+                transition: all 0.2s ease-in-out;
+
+                & svg {
+                    width: 100%;
+                    height: 100%;
+                    transition: transform 0.2s ease-in-out;
+                }
+            }
+        }
+
+
+        /* ! =============================== Hint =============================== */
+        .hint {
+            font-size: var(--text-xs, .75rem);
+            font-weight: 400;
+            line-height: var(--leading-relaxed, 1.625);
+
+            margin-top: calc(var(--spacing, .25rem) * 1);
+
+            & svg {
+                width: calc(var(--spacing, .25rem) * 3);
+                height: calc(var(--spacing, .25rem) * 3);
+                min-width: calc(var(--spacing, .25rem) * 3);
+                min-height: calc(var(--spacing, .25rem) * 3);
+
+                margin-top: calc(var(--spacing, .25rem) * 0.875);
+            }
+
+            &:has(svg) {
+                display: flex;
+                align-items: flex-start;
+                gap: calc(var(--spacing, .25rem) * 1.5);
+            }
+        }
+
+        .info {
+            color: var(--color-black, #000000);
+
+            svg {
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            }
+        }
+
+        .success {
+            color: var(--color-green-500, oklch(0.723 0.219 149.579));
+        }
+
+        .warning {
+            color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+        }
+
+        .error {
+            color: var(--color-red-500, oklch(0.637 0.237 25.331));
+        }
+
+        /* ! =============================== Fieldset =============================== */
+        .fieldset {
+            &:has(.hint.success) {
+                .textarea {
+                    textarea {
+                        border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+
+                        &~.label {
+                            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                            border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+                        }
+
+                        &~.icon {
+                            color: var(--color-green-500, oklch(0.723 0.219 149.579));
+                            border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+                        }
+
+                        &:hover,
+                        &:focus {
+                            &~.label {
+                                color: var(--color-green-500, oklch(0.723 0.219 149.579));
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:has(.hint.warning) {
+                .textarea {
+                    textarea {
+                        border-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+
+                        &~.label {
+                            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                            border-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+                        }
+
+                        &~.icon {
+                            color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+                            border-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+                        }
+
+                        &:hover,
+                        &:focus {
+                            &~.label {
+                                color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:has(.hint.error) {
+                .textarea {
+                    textarea {
+                        border-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+
+                        &~.label {
+                            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                            border-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+                        }
+
+                        &~.icon {
+                            color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                            border-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+                        }
+
+                        &:hover,
+                        &:focus {
+                            &~.label {
+                                color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/components/actions/textarea/component/hint/component.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const TextareaHintTypeIcon: {
+    info: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    success: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    warning: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    error: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};

package/components/actions/textarea/component/hint/component.constants.js

@@ -0,0 +1,9 @@
+var _a;
+import { CircleAlert, CircleCheck, CircleMinus, Info } from 'lucide-react';
+import { TextareaHintType } from './component.enums';
+export var TextareaHintTypeIcon = (_a = {},
+    _a[TextareaHintType.INFO] = Info,
+    _a[TextareaHintType.SUCCESS] = CircleCheck,
+    _a[TextareaHintType.WARNING] = CircleMinus,
+    _a[TextareaHintType.ERROR] = CircleAlert,
+    _a);

package/components/actions/textarea/component/hint/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextareaHintProps } from './component.interface';
+export declare function TextareaHint({ type, ...props }: TextareaHintProps): false | "" | 0 | 0n | React.JSX.Element | null | undefined;

package/components/actions/textarea/component/hint/component.enums.d.ts

@@ -0,0 +1,6 @@
+export declare enum TextareaHintType {
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}

package/components/actions/textarea/component/hint/component.enums.js

@@ -0,0 +1,7 @@
+export var TextareaHintType;
+(function (TextareaHintType) {
+    TextareaHintType["INFO"] = "info";
+    TextareaHintType["SUCCESS"] = "success";
+    TextareaHintType["WARNING"] = "warning";
+    TextareaHintType["ERROR"] = "error";
+})(TextareaHintType || (TextareaHintType = {}));

package/components/actions/textarea/component/hint/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { TextareaHintType } from './component.enums';
+export interface TextareaHintProps extends HTMLAttributes<HTMLParagraphElement> {
+    type?: TextareaHintType;
+}

package/components/actions/textarea/component/hint/component.interface.js

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

package/components/actions/textarea/component/hint/component.js

@@ -0,0 +1,39 @@
+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 { Info } from 'lucide-react';
+import React, { useContext } from 'react';
+import { TextareaContext } from '../component';
+import styles from '../component.module.css';
+import { TextareaHintTypeIcon } from './component.constants';
+export function TextareaHint(_a) {
+    var _b, _c, _d;
+    var type = _a.type, props = __rest(_a, ["type"]);
+    var context = useContext(TextareaContext);
+    if (!context) {
+        throw new Error('Input.Hint must be used within an Input component.');
+    }
+    var Icon = type ? TextareaHintTypeIcon[type] : Info;
+    return ((props === null || props === void 0 ? void 0 : props.children) && (React.createElement("p", __assign({}, props, { className: 'mosuk-textarea-hint' + ' ' + ((_b = styles.hint) !== null && _b !== void 0 ? _b : '') + ' ' + ((_c = styles[type !== null && type !== void 0 ? type : '']) !== null && _c !== void 0 ? _c : '') + ' ' + ((_d = props === null || props === void 0 ? void 0 : props.className) !== null && _d !== void 0 ? _d : '') }),
+        React.createElement(Icon, null), props === null || props === void 0 ? void 0 :
+        props.children)));
+}

package/components/actions/textarea/component/index.d.ts

@@ -0,0 +1,22 @@
+import { Textarea as Component } from './component';
+import type { TextareaProps } from './component.interface';
+import { TextareaHint } from './hint/component';
+import { TextareaHintType } from './hint/component.enums';
+import { TextareaHintProps } from './hint/component.interface';
+import { TextareaTextarea } from './textarea/component';
+import { TextareaTextareaProps } from './textarea/component.interface';
+export declare const Textarea: typeof Component & {
+    Textarea: typeof TextareaTextarea;
+    Hint: typeof TextareaHint & {
+        Type: typeof TextareaHintType;
+    };
+};
+export declare namespace Textarea {
+    type Props = TextareaProps;
+    namespace Textarea {
+        type Props = TextareaTextareaProps;
+    }
+    namespace Hint {
+        type Props = TextareaHintProps;
+    }
+}

package/components/actions/textarea/component/index.js

@@ -0,0 +1,10 @@
+import { Textarea as Component } from './component';
+import { TextareaHint } from './hint/component';
+import { TextareaHintType } from './hint/component.enums';
+import { TextareaTextarea } from './textarea/component';
+export var Textarea = Object.assign(Component, {
+    Textarea: TextareaTextarea,
+    Hint: Object.assign(TextareaHint, {
+        Type: TextareaHintType,
+    }),
+});

package/components/actions/textarea/component/textarea/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextareaTextareaProps } from './component.interface';
+export declare function TextareaTextarea({ icon: Icon, label, children, ...props }: TextareaTextareaProps): React.JSX.Element;

package/components/actions/textarea/component/textarea/component.interface.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject, SVGProps, TextareaHTMLAttributes } from 'react';
+export type TextareaTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    ref?: RefObject<HTMLTextAreaElement | null>;
+    icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+    label?: string;
+    children?: ReactNode;
+};

package/components/actions/textarea/component/textarea/component.interface.js

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

package/components/actions/textarea/component/textarea/component.js

@@ -0,0 +1,46 @@
+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 React, { useContext, useId } from 'react';
+import { TextareaContext } from '../component';
+import styles from '../component.module.css';
+export function TextareaTextarea(_a) {
+    var _b, _c, _d, _e, _f;
+    var Icon = _a.icon, label = _a.label, children = _a.children, props = __rest(_a, ["icon", "label", "children"]);
+    var context = useContext(TextareaContext);
+    if (!context) {
+        throw new Error('Textarea.Textarea must be used within an Textarea component.');
+    }
+    if (!(props === null || props === void 0 ? void 0 : props.id)) {
+        props.id = useId();
+    }
+    return (React.createElement("div", { className: (_b = styles.textarea) !== null && _b !== void 0 ? _b : '' },
+        React.createElement("textarea", __assign({}, props, { id: props === null || props === void 0 ? void 0 : props.id, name: (_c = props === null || props === void 0 ? void 0 : props.name) !== null && _c !== void 0 ? _c : props === null || props === void 0 ? void 0 : props.id, value: props === null || props === void 0 ? void 0 : props.value, placeholder: (_d = props === null || props === void 0 ? void 0 : props.placeholder) !== null && _d !== void 0 ? _d : label, rows: (_e = props === null || props === void 0 ? void 0 : props.rows) !== null && _e !== void 0 ? _e : 4, onInput: function (e) {
+                var t = e.currentTarget;
+                t.style.height = 'auto';
+                t.style.height = "".concat(t.scrollHeight, "px");
+            }, className: "mosuk-textarea-input ".concat((_f = props === null || props === void 0 ? void 0 : props.className) !== null && _f !== void 0 ? _f : '') })),
+        label && (React.createElement("label", { htmlFor: props === null || props === void 0 ? void 0 : props.id, className: styles.label }, label)),
+        Icon && (React.createElement("label", { htmlFor: props === null || props === void 0 ? void 0 : props.id, className: styles.icon, "aria-hidden": "true" },
+            React.createElement(Icon, null))),
+        children));
+}

package/components/actions/textarea/skeleton/component.d.ts

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

package/components/actions/textarea/skeleton/component.interface.d.ts

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

package/components/actions/textarea/skeleton/component.interface.js

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

package/components/actions/textarea/skeleton/component.js

@@ -0,0 +1,29 @@
+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 React from 'react';
+import styles from './component.module.css';
+export function TextareaSkeleton(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: 'mosuk-input-skeleton' + ' ' + ((_b = styles.fieldset) !== null && _b !== void 0 ? _b : '') + ' ' + ((_c = props === null || props === void 0 ? void 0 : props.className) !== null && _c !== void 0 ? _c : '') }), props === null || props === void 0 ? void 0 : props.children));
+}