mosuk-ui 1.0.1

package/services/storage/local/service.js

@@ -0,0 +1,70 @@
+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 isBrowser = typeof window !== 'undefined' && typeof localStorage !== 'undefined';
+var StorageLocalService = /** @class */ (function () {
+    function StorageLocalService() {
+    }
+    StorageLocalService.getInstance = function () {
+        if (!StorageLocalService.instance) {
+            StorageLocalService.instance = new StorageLocalService();
+        }
+        return StorageLocalService.instance;
+    };
+    StorageLocalService.prototype.create = function (key, value) {
+        if (!isBrowser)
+            return;
+        var stringValue = typeof value === 'string' ? value : JSON.stringify(value);
+        localStorage.setItem(key, stringValue);
+    };
+    StorageLocalService.prototype.read = function (key) {
+        if (!isBrowser)
+            return null;
+        var raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        // Сначала пытаемся JSON (для объектов/массивов)
+        try {
+            return JSON.parse(raw);
+        }
+        catch (_a) {
+            // Число (включая отрицательные и дробные)
+            if (/^-?\d+(\.\d+)?$/.test(raw)) {
+                return Number(raw);
+            }
+            // Булево
+            if (raw === 'true' || raw === 'false') {
+                return (raw === 'true');
+            }
+            // Строка
+            return raw;
+        }
+    };
+    StorageLocalService.prototype.update = function (key, value) {
+        if (!isBrowser)
+            return;
+        var data = this.read(key);
+        if (data && typeof data === 'object' && typeof value === 'object') {
+            this.create(key, __assign(__assign({}, data), value));
+        }
+        else {
+            this.create(key, value);
+        }
+    };
+    StorageLocalService.prototype.delete = function (key) {
+        if (!isBrowser)
+            return;
+        localStorage.removeItem(key);
+    };
+    return StorageLocalService;
+}());
+export { StorageLocalService };
+export var storageLocalService = StorageLocalService.getInstance();

package/styles/base/swiper/style.css

@@ -0,0 +1,9 @@
+@layer theme {    
+    @import 'swiper/css';  
+    @import 'swiper/css/navigation';    
+    @import 'swiper/css/pagination';
+
+    :root {
+        --swiper-theme-color: var(--color-primary-500, #0074e7);
+    }
+}

package/styles/theme/html/style.css

@@ -0,0 +1,23 @@
+@layer theme {
+    html {
+        background-color: #ffffff;
+
+        ::-webkit-scrollbar {
+            width: calc(var(--spacing, .25rem) * 2);
+        }
+
+        ::-webkit-scrollbar-track {
+            background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            border-radius: var(--radius-2xl, 1rem);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+            border-radius: var(--radius-2xl, 1rem);
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
+        }
+    }
+}

package/styles/theme/swiper/navigation/style.css

@@ -0,0 +1,79 @@
+@layer base {
+    :root {        
+        --swiper-navigation-color: var(--color-gray-700, oklch(0.373 0.034 259.733));
+        --swiper-navigation-top-offset: calc(50% + calc(var(--spacing, .25rem) * -4));
+        --swiper-navigation-sides-offset: calc(var(--spacing, 0.25rem) * -4);
+        --swiper-navigation-size: var(--text-2xs, .625rem);
+    } 
+    
+    html, body {
+        overflow-x: clip;
+    }
+     
+    .swiper {
+        overflow: visible;        
+        width: 100%;        
+
+        .swiper-button-prev,
+        .swiper-button-next {
+            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));
+
+            padding: calc(var(--spacing, .25rem) * 2.5);
+            border-radius: calc(infinity * 1px);
+            outline: none;
+
+            transition: all 200ms ease-in-out;
+
+            svg {
+                display: none;
+            }
+
+            &::after {                               
+                transition: all 200ms ease-in-out;
+            }
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+
+                &::after {
+                    transition: all 600ms ease-in-out;
+                }
+            }
+
+            &:hover {
+                background-color: var(--color-primary-100, #e0f2ff);                
+
+                &::after {
+                    color: var(--color-primary-500, #0074e7);
+                }
+            }
+        }
+
+        .swiper-button-disabled {
+            opacity: 0.5;
+        }
+    }
+
+    @media (max-width: 767px) {
+        .swiper-horizontal {
+            .swiper-button-prev,
+            .swiper-button-next {
+                display: none;
+            }
+        }
+    }
+
+    @media (min-width: 768px) {
+        .swiper-horizontal {
+            .swiper-button-prev,
+            .swiper-button-next {
+                display: flex;
+            }
+        }
+    }
+}

package/styles/theme/swiper/pagination/style.css

@@ -0,0 +1,65 @@
+@layer base {
+    :root {
+        --swiper-pagination-color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+        --swiper-pagination-bullet-opacity: 1;
+
+        --swiper-pagination-bullet-inactive-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
+        --swiper-pagination-bullet-inactive-opacity: 1;
+
+        --swiper-pagination-top: auto;
+        --swiper-pagination-bottom: calc(var(--spacing, .25rem) * 2);
+
+        --swiper-pagination-left: auto;
+        --swiper-pagination-right: auto;
+
+        --swiper-pagination-fraction-color: inherit;
+
+        --swiper-pagination-progressbar-bg-color: red;
+        --swiper-pagination-progressbar-size: calc(var(--spacing, 0.25rem) * 2);
+
+        --swiper-pagination-bullet-size: calc(var(--spacing, 0.25rem) * 1);
+        --swiper-pagination-bullet-width: calc(var(--spacing, 0.25rem) * 1);
+        --swiper-pagination-bullet-height: calc(var(--spacing, 0.25rem) * 1);
+
+        --swiper-pagination-bullet-horizontal-gap: calc(var(--spacing, 0.25rem) * 2);
+        --swiper-pagination-bullet-vertical-gap: calc(var(--spacing, 0.25rem) * 2);
+    }
+
+    .swiper {
+        .swiper-pagination {
+            left: auto;
+            right: auto;
+
+            width: fit-content;
+            height: fit-content;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: calc(var(--spacing, .25rem) * 0.75);
+
+            padding: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
+
+            background-color: rgba(255, 255, 255, 0.5);
+            backdrop-filter: blur(12px);
+
+            border-radius: calc(infinity * 1px);
+
+            .swiper-pagination-bullet {
+                border-radius: calc(infinity * 1px);
+
+                transform: scale(1);
+                transition: all 200ms ease-in-out;
+            }
+
+            .swiper-pagination-bullet-active {
+                width: calc(var(--spacing, 0.25rem) * 3);
+            }
+
+            &:empty,
+            &:has(.swiper-pagination-bullet:only-child) {
+                display: none;
+            }
+        }
+    }
+}

package/styles/theme/swiper/style.css

@@ -0,0 +1,2 @@
+@import './navigation/style.css';
+@import './pagination/style.css';