mosuk-ui 1.0.1

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

@@ -0,0 +1,294 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .input {
+            position: relative;
+            z-index: 0;
+
+            width: 100%;
+            display: block;
+
+            input {
+                position: relative;
+                z-index: 1;
+
+                width: 100%;
+                height: calc(var(--spacing, .25rem) * 8);
+
+                background-color: white;
+                color: black;
+
+                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: calc(infinity * 1px);
+                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: calc(var(--spacing, .25rem) * 8);
+                height: calc(var(--spacing, .25rem) * 8);
+                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));
+
+                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);
+
+            color: var(--color-black, #000000);
+
+            margin-top: calc(var(--spacing, .25rem) * 2);
+            margin-left: calc(var(--spacing, .25rem) * 1);
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 0.6s ease-in-out;
+            }
+
+            & 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);
+
+                color: var(--color-primary-500, #0074e7);
+
+                margin-top: calc(var(--spacing, .25rem) * 0.75);
+            }
+
+            &: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-primary-500, #0074e7);
+                }
+            }
+
+            &.success {
+                color: var(--color-green-500, oklch(0.723 0.219 149.579));
+
+                svg {
+                    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));
+
+                svg {
+                    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));
+
+                svg {
+                    color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                }
+            }
+        }
+
+        /* ! =============================== Fieldset =============================== */
+        .fieldset {
+            &:has(.hint.success) {
+                .input {
+                    input {
+                        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) {
+                .input {
+                    input {
+                        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) {
+                .input {
+                    input {
+                        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/input/component/hint/component.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const InputHintTypeIcon: {
+    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/input/component/hint/component.constants.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+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 { Info } from 'lucide-react';
+import React, { useContext } from 'react';
+import { InputContext } from '../component';
+import styles from '../component.module.css';
+import { InputHintTypeIcon } from './component.constants';
+import { InputHintType } from './component.enums';
+export function InputHint(_a) {
+    var _b;
+    var type = _a.type, rest = __rest(_a, ["type"]);
+    var context = useContext(InputContext);
+    if (!context) {
+        throw new Error('Input.Hint must be used within an Input component.');
+    }
+    var Icon = type ? InputHintTypeIcon[type] : Info;
+    return ((rest === null || rest === void 0 ? void 0 : rest.children) && (React.createElement("p", __assign({}, rest, { className: classNames(classNames('mosuk-input-hint', styles.hint, (_b = {},
+            _b[styles[type !== null && type !== void 0 ? type : InputHintType.INFO]] = type,
+            _b)), rest === null || rest === void 0 ? void 0 : rest.className) }),
+        React.createElement(Icon, null), rest === null || rest === void 0 ? void 0 :
+        rest.children)));
+}

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

@@ -0,0 +1,22 @@
+import { Input as Component } from './component';
+import type { InputProps } from './component.interface';
+import { InputHint } from './hint/component';
+import { InputHintType } from './hint/component.enums';
+import { InputHintProps } from './hint/component.interface';
+import { InputInput } from './input/component';
+import { InputInputProps } from './input/component.interface';
+export declare const Input: typeof Component & {
+    Input: typeof InputInput;
+    Hint: typeof InputHint & {
+        Type: typeof InputHintType;
+    };
+};
+export declare namespace Input {
+    type Props = InputProps;
+    namespace Input {
+        type Props = InputInputProps;
+    }
+    namespace Hint {
+        type Props = InputHintProps;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { Input as Component } from './component';
+import { InputHint } from './hint/component';
+import { InputHintType } from './hint/component.enums';
+import { InputInput } from './input/component';
+export var Input = Object.assign(Component, {
+    Input: InputInput,
+    Hint: Object.assign(InputHint, {
+        Type: InputHintType,
+    }),
+});

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+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, { useContext, useId } from 'react';
+import { InputContext } from '../component';
+import styles from '../component.module.css';
+export function InputInput(_a) {
+    var _b, _c, _d;
+    var ref = _a.ref, Icon = _a.icon, label = _a.label, children = _a.children, rest = __rest(_a, ["ref", "icon", "label", "children"]);
+    var context = useContext(InputContext);
+    if (!context) {
+        throw new Error('Input.Input must be used within an Input component.');
+    }
+    if (!(rest === null || rest === void 0 ? void 0 : rest.id)) {
+        rest.id = useId();
+    }
+    return (React.createElement("div", { className: classNames('mosuk-input-input', styles.input, rest === null || rest === void 0 ? void 0 : rest.className) },
+        React.createElement("input", __assign({}, rest, { ref: ref, id: rest.id, name: (_b = rest.name) !== null && _b !== void 0 ? _b : rest.id, placeholder: (_c = rest.placeholder) !== null && _c !== void 0 ? _c : label, className: (_d = rest.className) !== null && _d !== void 0 ? _d : '' })),
+        label && (React.createElement("label", { htmlFor: rest === null || rest === void 0 ? void 0 : rest.id, className: classNames(styles.label, rest === null || rest === void 0 ? void 0 : rest.className) }, label)),
+        Icon && (React.createElement("label", { htmlFor: rest === null || rest === void 0 ? void 0 : rest.id, className: classNames(styles.icon, rest === null || rest === void 0 ? void 0 : rest.className), "aria-hidden": "true" },
+            React.createElement(Icon, null))),
+        children));
+}

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

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

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

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

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

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

package/components/actions/input/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 classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function InputSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement("div", __assign({}, rest, { className: classNames('mosuk-input-skeleton', styles.fieldset, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/input/skeleton/component.module.css

@@ -0,0 +1,97 @@
+@layer mosuk-ui {
+    @layer index-11 {
+
+        /*!  ==== Input ==== */
+        .input {
+            position: relative;
+            z-index: 0;
+
+            width: 100%;
+            height: calc(var(--spacing, .25rem) * 8);
+            min-height: calc(var(--spacing, .25rem) * 8);
+
+            .icon {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+
+                width: calc(var(--spacing, .25rem) * 8);
+                min-width: calc(var(--spacing, .25rem) * 8);
+                height: calc(var(--spacing, .25rem) * 8);
+                min-height: calc(var(--spacing, .25rem) * 8);
+
+                border-right: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            }
+
+            .field {
+                width: 100%;
+                height: 100%;
+
+                border-radius: calc(infinity * 1px);
+            }
+        }
+
+        /*!  ==== Hint ==== */
+        .hint {
+            margin-top: calc(var(--spacing, .25rem) * 2);
+
+            .icon {
+                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);
+            }
+
+            &:has(.icon) {
+                display: flex;
+                align-items: center;
+                gap: calc(var(--spacing, .25rem) * 1.5);
+            }
+
+            .text {
+                width: 100%;
+
+                height: calc(var(--spacing, .25rem) * 3);
+                min-height: calc(var(--spacing, .25rem) * 3);
+
+                border-radius: var(--radius-md, 0.375rem);
+            }
+        }
+
+        /*!  ==== Fieldset ==== */
+        .fieldset {
+            .hint {
+                &:nth-child(1n) {
+                    .text {
+                        width: 60%;
+                    }
+                }
+
+                &:nth-child(2n) {
+                    .text {
+                        width: 50%;
+                    }
+                }
+
+                &:nth-child(3n) {
+                    .text {
+                        width: 70%;
+                    }
+                }
+
+                &:nth-child(4n) {
+                    .text {
+                        width: 50%;
+                    }
+                }
+
+                &:nth-child(5n) {
+                    .text {
+                        width: 40%;
+                    }
+                }
+            }
+        }
+    }
+}

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

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

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

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

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

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

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