mosuk-ui 1.0.1

package/components/actions/upload/files/component/component.module.css

@@ -0,0 +1,434 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .fieldset {
+            .input {
+                position: absolute;
+                inset: 0;
+                z-index: -1;
+
+                width: 1px;
+                height: 1px;
+
+                margin: auto;
+
+                opacity: 0;
+                pointer-events: none;
+            }
+ 
+            .dnd {
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: calc(var(--spacing, .25rem) * 4);
+
+                touch-action: none;
+            }
+
+            .label {
+                overflow: hidden;
+
+                position: relative;
+
+                aspect-ratio: 1 / 1;
+                width: 100%;
+                height: fit-content;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                background-color: rgba(255, 255, 255, 0.95);
+                backdrop-filter: blur(12px);
+
+                padding: calc(var(--spacing, 0.25rem) * 3);
+                border: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+                border-radius: var(--radius-3xl, 1.5rem);
+                outline: none;
+                box-shadow: 0 25px 50px -12px rgba(249, 250, 251, var(--tw-shadow-alpha, 0.5));
+
+                cursor: pointer;
+                transition: all 200ms ease-in-out;
+
+                svg {
+                    width: calc(var(--spacing, .25rem) * 8);
+                    height: calc(var(--spacing, .25rem) * 8);
+                    min-width: calc(var(--spacing, .25rem) * 8);
+                    min-height: calc(var(--spacing, .25rem) * 8);
+
+                    background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+                    color: var(--color-gray-700, oklch(0.373 0.034 259.733));
+
+                    padding: calc(var(--spacing, .25rem) * 2.5);
+                    border-radius: 100%;
+
+                    transition: all 200ms ease-in-out;
+                }
+
+                &:not(:hover) {
+                    transition: all 600ms ease-in-out;
+
+                    svg {
+                        transition: all 600ms ease-in-out;
+                    }
+                }
+
+                &:hover {
+                    border-color: var(--color-primary-100, #e0f2ff);
+                    box-shadow: 0 25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+
+                    svg {
+                        background-color: var(--color-primary-100, oklch(0.967 0.003 264.542));
+                        color: var(--color-primary-500, oklch(0.637 0.237 25.331));
+                    }
+                }
+            }
+
+            .element {
+                overflow: hidden;
+
+                position: relative;
+                z-index: 1;
+
+                aspect-ratio: 1 / 1;
+                width: 100%;
+                height: fit-content;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                background-color: rgba(255, 255, 255, 0.95);
+                backdrop-filter: blur(12px);
+
+                border: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+                border-radius: var(--radius-3xl, 1.5rem);
+                outline: none;
+                box-shadow: 0 25px 50px -12px rgba(249, 250, 251, var(--tw-shadow-alpha, 0.5));
+
+                cursor: pointer;
+                user-select: none;
+
+                --translate-x: 0;
+                --translate-y: 0;
+                --scale: 1;
+
+                transform: translate3d(var(--translate-x), var(--translate-y), 0) scale(var(--scale));
+                transition: all 200ms ease-in-out;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+
+                    object-fit: contain;
+                    object-position: center;
+                }
+
+                &:hover {
+                    border-color: var(--color-primary-100, #e0f2ff);
+                    box-shadow: 0 25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+                }
+
+                &.dragging {
+                    z-index: 50;
+
+                    cursor: grabbing;
+
+                    will-change: transform;
+                    transition: all 0ms ease-in-out;
+                }
+
+                .preview,
+                .skeleton,
+                .error {
+                    width: 100%;
+                    height: 100%;
+
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                .preview {
+                    .image {
+                        width: 100%;
+                        height: 100%;
+
+                        object-fit: cover;
+                        object-position: center;
+                    }
+
+                    .element {
+                        width: 40%;
+                        height: 40%;
+
+                        color: var(--color-gray-500, oklch(0.412 0.012 264.531));
+                    }
+                }
+
+                .skeleton {
+                    svg {
+                        width: 15%;
+                        height: 15%;
+
+                        color: var(--color-gray-500, oklch(0.412 0.012 264.531));
+
+                        animation: spin 1200ms linear infinite;
+                    }
+                }
+
+                .error {
+                    svg {
+                        width: 40%;
+                        height: 40%;
+
+                        color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                    }
+                }
+
+                .input {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 1;
+
+                    display: block;
+
+                    width: 100%;
+                    height: fit-content;
+
+                    background-color: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(12px);
+                    color: var(--color-gray-500, oklch(0.412 0.012 264.531));
+
+                    font-size: var(--text-xs, .75rem);
+                    font-weight: 500;
+                    text-wrap: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    padding: calc(var(--spacing, 0.25rem) * 2);
+                    border-top: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+                    outline: 0;
+
+                    transition: all 200ms ease-in-out;
+
+                    &::placeholder {
+                        color: var(--color-gray-500, oklch(0.412 0.012 264.531));
+                    }
+
+                    &:not(:hover) {
+                        transition: all 600ms ease-in-out;
+                    }
+
+                    &:hover {
+                        transition: all 200ms ease-in-out;
+                    }
+
+                    &:focus {
+                        color: var(--color-black, #000);
+                    }
+
+                    &:read-only {
+                        pointer-events: none;
+                    }
+                }
+
+                .actions {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    z-index: 1;
+
+                    width: 100%;
+                    height: fit-content;
+
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    justify-content: flex-end;
+                    gap: calc(var(--spacing, 0.25rem) * 1);
+
+                    padding: calc(var(--spacing, 0.25rem) * 2);
+
+                    .action {
+                        width: calc(var(--spacing, 0.25rem) * 6);
+                        height: calc(var(--spacing, 0.25rem) * 6);
+                        min-width: calc(var(--spacing, 0.25rem) * 6);
+                        min-height: calc(var(--spacing, 0.25rem) * 6);
+
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        background-color: rgba(255, 255, 255, 0.95);
+                        backdrop-filter: blur(12px);
+                        color: var(--color-black, #000);
+
+                        font-size: 0.75rem;
+                        text-wrap: nowrap;
+
+                        border: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+                        padding: 0.46875rem;
+                        border-radius: 100%;
+
+                        cursor: pointer;
+
+                        transition: all 200ms ease-in-out;
+
+                        & svg {
+                            width: 100%;
+                            height: 100%;
+
+                            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                            outline: 0;
+
+                            transition: all 200ms ease-in-out;
+                        }
+
+                        &:not(:hover) {
+                            transition: all 600ms ease-in-out;
+
+                            & svg {
+                                transition: all 600ms ease-in-out;
+                            }
+                        }
+
+                        &:hover {
+                            border-color: var(--color-primary-100, #e0f2ff);
+
+                            & svg {
+                                color: var(--color-primary-500, #0074e7);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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);
+
+                & 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);
+                }
+
+                &.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));
+                    }
+                }
+            }
+
+            &:has(.hint.success) {
+                .label {
+                    border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+
+                    svg {
+                        background-color: var(--color-green-100, oklch(0.973 0.071 103.193));
+                        color: var(--color-green-500, oklch(0.723 0.219 149.579));
+                    }
+
+                    &:hover,
+                    &:focus {
+                        border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+
+                        svg {
+                            background-color: var(--color-green-200, oklch(0.945 0.129 101.54));
+                            color: var(--color-green-600, oklch(0.681 0.162 75.834));
+                        }
+                    }
+                }
+            }
+
+            &:has(.hint.warning) {
+                .label {
+                    border-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+
+                    svg {
+                        background-color: var(--color-orange-100, oklch(0.954 0.038 75.164));
+                        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+                    }
+
+                    &:hover,
+                    &:focus {
+                        border-color: var(--color-orange-300, oklch(0.837 0.128 66.29));
+
+                        svg {
+                            background-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+                            color: var(--color-orange-600, oklch(0.646 0.222 41.116));
+                        }
+                    }
+                }
+            }
+
+            &:has(.hint.error) {
+                .label {
+                    border-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+
+                    svg {
+                        background-color: var(--color-red-100, oklch(0.936 0.032 17.717));
+                        color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                    }
+
+                    &:hover,
+                    &:focus {
+                        border-color: var(--color-red-300, oklch(0.808 0.114 19.571));
+
+                        svg {
+                            background-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+                            color: var(--color-red-600, oklch(0.577 0.245 27.325));
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}

package/components/actions/upload/files/component/dnd/component.d.ts

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

package/components/actions/upload/files/component/dnd/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, RefObject } from 'react';
+export interface UploadFilesDndProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: RefObject<HTMLDivElement | null>;
+}

package/components/actions/upload/files/component/dnd/component.interface.js

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

package/components/actions/upload/files/component/dnd/component.js

@@ -0,0 +1,99 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { DndContext, MeasuringStrategy, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import { restrictToWindowEdges } from '@dnd-kit/modifiers';
+import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import classNames from 'classnames';
+import React, { Children, cloneElement, isValidElement, useCallback, useContext } from 'react';
+import { UploadFilesContext } from '../component';
+import styles from '../component.module.css';
+var isInputFilesViewFile = function (child) {
+    return (isValidElement(child) &&
+        child.props !== undefined &&
+        child.props.file !== undefined);
+};
+export function UploadFilesDnd(_a) {
+    var rest = __rest(_a, []);
+    var context = useContext(UploadFilesContext);
+    if (!context) {
+        throw new Error('UploadFilesDnd должен использоваться только внутри компонента UploadFiles');
+    }
+    var files = context.files, setFiles = context.setFiles, setDraggedId = context.setDraggedId;
+    var sortedFiles = __spreadArray([], files, true).sort(function (a, b) { return a.position - b.position; });
+    var sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }), useSensor(TouchSensor, { activationConstraint: { delay: 0, tolerance: 5 } }));
+    var handleDragStart = useCallback(function (event) {
+        setDraggedId(event.active.id);
+    }, [setDraggedId]);
+    var handleDragEnd = useCallback(function (_a) {
+        var active = _a.active, over = _a.over;
+        if (!over || active.id === over.id) {
+            setDraggedId(null);
+            return;
+        }
+        // Получаем текущие индексы в отсортированном массиве
+        var sortedFilesArray = __spreadArray([], files, true).sort(function (a, b) { return a.position - b.position; });
+        var activeIndex = sortedFilesArray.findIndex(function (item) { return item.id === active.id; });
+        var overIndex = sortedFilesArray.findIndex(function (item) { return item.id === over.id; });
+        if (activeIndex === -1 || overIndex === -1) {
+            setDraggedId(null);
+            return;
+        }
+        // Создаём новую копию массива с перемещёнными элементами
+        var newItems = arrayMove(sortedFilesArray, activeIndex, overIndex);
+        // Обновляем позиции всех элементов
+        var updatedItems = newItems.map(function (item, index) { return (__assign(__assign({}, item), { position: index * 10 })); });
+        // Обновляем состояние через контекст
+        setFiles(updatedItems);
+        setDraggedId(null);
+    }, [files, setFiles, setDraggedId]);
+    if (!files || !Array.isArray(files) || files.length === 0) {
+        return (React.createElement("div", __assign({}, rest, { className: classNames('mosuk-upload-files-dnd', styles.dnd, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    }
+    var childrenArray = Children.toArray(rest === null || rest === void 0 ? void 0 : rest.children).filter(isInputFilesViewFile);
+    var otherChildren = Children.toArray(rest === null || rest === void 0 ? void 0 : rest.children).filter(function (child) { return !isInputFilesViewFile(child); });
+    return (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, autoScroll: true, modifiers: [restrictToWindowEdges], measuring: {
+            droppable: {
+                strategy: MeasuringStrategy.Always,
+            },
+        } },
+        React.createElement("div", __assign({}, rest, { className: classNames('mosuk-upload-files-dnd', styles.dnd, rest === null || rest === void 0 ? void 0 : rest.className) }),
+            React.createElement(SortableContext, { items: sortedFiles.map(function (file) { return file.id; }), strategy: verticalListSortingStrategy }, sortedFiles.map(function (file) {
+                var child = childrenArray.find(function (childEl) { var _a; return ((_a = childEl.props.file) === null || _a === void 0 ? void 0 : _a.id) === file.id; });
+                return child
+                    ? cloneElement(child, {
+                        key: file.id,
+                        file: file,
+                    })
+                    : null;
+            })),
+            otherChildren)));
+}

package/components/actions/upload/files/component/dnd/element/component.d.ts

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

package/components/actions/upload/files/component/dnd/element/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, RefObject } from 'react';
+export interface UploadFilesDndElementProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: RefObject<HTMLDivElement | null>;
+    file?: any;
+}

package/components/actions/upload/files/component/dnd/element/component.interface.js

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

package/components/actions/upload/files/component/dnd/element/component.js

@@ -0,0 +1,56 @@
+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 { useSortable } from '@dnd-kit/sortable';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { UploadFilesContext } from '../../component';
+import styles from '../../component.module.css';
+export function UploadFilesDndElement(_a) {
+    var _b;
+    var file = _a.file, rest = __rest(_a, ["file"]);
+    var context = useContext(UploadFilesContext);
+    if (!context) {
+        throw new Error('UploadFilesDndElement должен использоваться только внутри компонента UploadFiles');
+    }
+    var draggedId = context.draggedId;
+    var _c = file
+        ? useSortable({ id: file.id })
+        : {
+            attributes: {},
+            listeners: {},
+            setNodeRef: undefined,
+            transform: undefined,
+            transition: undefined,
+        }, _d = _c.attributes, attributes = _d === void 0 ? {} : _d, _e = _c.listeners, listeners = _e === void 0 ? {} : _e, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
+    var style = file
+        ? {
+            '--translate-x': transform ? "".concat(transform.x, "px") : '0',
+            '--translate-y': transform ? "".concat(transform.y, "px") : '0',
+            '--scale': (transform === null || transform === void 0 ? void 0 : transform.scaleX) || 1,
+            '--transition': transition || 'all 200ms ease-in-out',
+        }
+        : undefined;
+    return (React.createElement("div", __assign({ ref: setNodeRef !== null && setNodeRef !== void 0 ? setNodeRef : rest.ref }, attributes, listeners, rest, { className: classNames('mosuk-upload-files-dnd-element', styles.element, (_b = {},
+            _b[styles.dragging] = (file === null || file === void 0 ? void 0 : file.id) === draggedId,
+            _b), rest.className), style: style }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/upload/files/component/hint/component.d.ts

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

package/components/actions/upload/files/component/hint/component.js

@@ -0,0 +1,35 @@
+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 } from 'react';
+import { InputHint } from '../../../../input/component/hint/component';
+import { UploadFilesContext } from '../component';
+import styles from '../component.module.css';
+export function UploadFilesHint(_a) {
+    var rest = __rest(_a, []);
+    var context = useContext(UploadFilesContext);
+    if (!context) {
+        throw new Error('UploadFilesHint должен использоваться только внутри компонента UploadFiles');
+    }
+    return (React.createElement(InputHint, __assign({}, rest, { className: classNames('mosuk-upload-files-hint', styles.hint, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}