mosuk-ui 1.0.2 → 1.0.4

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mosuk-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "mosuk",
   "license": "MIT",
   "private": false,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-beta.7",
+    "@base-ui/react": "^1.3.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -24,7 +24,8 @@
   "peerDependencies": {
     "next": "^15.3.4 || ^16.0.0-beta.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "framer-motion": "^12.34.3"
   },
   "devDependencies": {
     "@yandex/ymaps3-types": "^1.0.17595433"
@@ -160,6 +161,11 @@
         "default": "./components/actions/toggle/component/index.js"
       }
     },
+    "./components/actions/toggle/skeleton": {
+      "import": {
+        "default": "./components/actions/toggle/skeleton/index.js"
+      }
+    },
     "./components/actions/upload/component": {
       "import": {
         "default": "./components/actions/upload/component/index.js"
@@ -395,14 +401,14 @@
         "default": "./components/overlays/alert/component/index.js"
       }
     },
-    "./components/overlays/dialogs/dialog/(images)": {
+    "./components/overlays/dialog/component": {
       "import": {
-        "default": "./components/overlays/dialogs/dialog/(images)/index.js"
+        "default": "./components/overlays/dialog/component/index.js"
       }
     },
-    "./components/overlays/dialogs/dialog/component": {
+    "./components/overlays/drawer/component": {
       "import": {
-        "default": "./components/overlays/dialogs/dialog/component/index.js"
+        "default": "./components/overlays/drawer/component/index.js"
       }
     },
     "./components/overlays/dropdown/(pagination)/sort/component": {
@@ -415,6 +421,11 @@
         "default": "./components/overlays/dropdown/component/index.js"
       }
     },
+    "./components/overlays/observer/component": {
+      "import": {
+        "default": "./components/overlays/observer/component/index.js"
+      }
+    },
     "./components/texts/a/component": {
       "import": {
         "default": "./components/texts/a/component/index.js"
@@ -430,6 +441,16 @@
         "default": "./components/texts/counter/component/index.js"
       }
     },
+    "./components/texts/data/component": {
+      "import": {
+        "default": "./components/texts/data/component/index.js"
+      }
+    },
+    "./components/texts/data/skeleton": {
+      "import": {
+        "default": "./components/texts/data/skeleton/index.js"
+      }
+    },
     "./components/texts/h1/component": {
       "import": {
         "default": "./components/texts/h1/component/index.js"

package/providers/alerts/context/context.interface.d.ts

@@ -1,4 +1,4 @@
-import { Toast } from '@base-ui-components/react/toast';
+import { Toast } from '@base-ui/react/toast';
 import { ReactNode } from 'react';
 export interface AlertsContextProps {
     manager: ReturnType<typeof Toast.createToastManager> | null;

package/providers/alerts/list/component.js

@@ -1,4 +1,4 @@
-import { Toast } from '@base-ui-components/react/toast';
+import { Toast } from '@base-ui/react/toast';
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import { Alert } from '../../../components/overlays/alert/component/component';

package/providers/alerts/provider.js

@@ -1,4 +1,4 @@
-import { Toast } from '@base-ui-components/react/toast';
+import { Toast } from '@base-ui/react/toast';
 import React, { useEffect } from 'react';
 import { alertsService } from '../../services/alerts';
 import { AlertsContext } from './context/context';

package/providers/yandex/maps/context/context.d.ts

@@ -1,2 +1,2 @@
-import { YandexMapsContextProps } from './context.interface';
-export declare const YandexMapsContext: import("react").Context<YandexMapsContextProps | null>;
+import { YandexMapContextProps } from './context.interface';
+export declare const YandexMapContext: import("react").Context<YandexMapContextProps | null>;

package/providers/yandex/maps/context/context.interface.d.ts

@@ -1,5 +1,5 @@
 import { ReactifiedModule } from '@yandex/ymaps3-types/reactify';
-export interface YandexMapsContextProps {
+export interface YandexMapContextProps {
     api: ReactifiedModule<typeof ymaps3> | null;
     isLoading: boolean;
     error: string | null;

package/providers/yandex/maps/context/context.js

@@ -1,2 +1,2 @@
 import { createContext } from 'react';
-export var YandexMapsContext = createContext(null);
+export var YandexMapContext = createContext(null);

package/providers/yandex/maps/index.d.ts

@@ -1,5 +1,5 @@
-import { YandexMapsProviderProps } from './provider.interface';
-export declare const YandexMapsProvider: (props: YandexMapsProviderProps) => import("react").FunctionComponentElement<YandexMapsProviderProps>;
-export declare namespace YandexMapsProvider {
-    type Props = YandexMapsProviderProps;
+import { YandexMapProviderProps } from './provider.interface';
+export declare const YandexMapProvider: (props: YandexMapProviderProps) => import("react").FunctionComponentElement<YandexMapProviderProps>;
+export declare namespace YandexMapProvider {
+    type Props = YandexMapProviderProps;
 }

package/providers/yandex/maps/index.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { YandexMapsProvider as BaseYandexMapsProvider } from './provider';
-export var YandexMapsProvider = function (props) {
-    return createElement(BaseYandexMapsProvider, props);
+import { YandexMapProvider as BaseYandexMapProvider } from './provider';
+export var YandexMapProvider = function (props) {
+    return createElement(BaseYandexMapProvider, props);
 };

package/providers/yandex/maps/provider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { YandexMapsProviderProps } from './provider.interface';
+import { YandexMapProviderProps } from './provider.interface';
 declare global {
     interface Window {
         ymaps3: typeof ymaps3;
     }
 }
-export declare const YandexMapsProvider: ({ apiKey, children }: YandexMapsProviderProps) => React.JSX.Element;
+export declare const YandexMapProvider: ({ apiKey, children, }: YandexMapProviderProps) => React.JSX.Element;

package/providers/yandex/maps/provider.interface.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export interface YandexMapsProviderProps {
+export interface YandexMapProviderProps {
     apiKey: string;
     children: ReactNode;
 }

package/providers/yandex/maps/provider.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { YandexMapsContext } from './context/context';
+import { YandexMapContext } from './context/context';
 var isBot = function () {
     if (typeof window === 'undefined')
         return true;
@@ -44,7 +44,7 @@ var isBot = function () {
     var botPatterns = ['googlebot', 'yandexbot'];
     return botPatterns.some(function (pattern) { return userAgent.includes(pattern); });
 };
-export var YandexMapsProvider = function (_a) {
+export var YandexMapProvider = function (_a) {
     var apiKey = _a.apiKey, children = _a.children;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(null), error = _c[0], setError = _c[1];
@@ -115,7 +115,9 @@ export var YandexMapsProvider = function (_a) {
     }, [apiKey, initializeApi]);
     useEffect(function () {
         // Если API уже загружен
-        if (typeof window !== 'undefined' && window.ymaps3 && !scriptInjectedRef.current) {
+        if (typeof window !== 'undefined' &&
+            window.ymaps3 &&
+            !scriptInjectedRef.current) {
             scriptInjectedRef.current = true;
             initializeApi();
             return;
@@ -132,5 +134,5 @@ export var YandexMapsProvider = function (_a) {
         isLoading: isLoading,
         error: error,
     };
-    return (React.createElement(YandexMapsContext.Provider, { value: contextValue }, children));
+    return (React.createElement(YandexMapContext.Provider, { value: contextValue }, children));
 };

package/styles/libs/style.css

@@ -0,0 +1 @@
+@import './swiper/style.css';

package/styles/libs/swiper/style.css

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

package/styles/style.css

@@ -0,0 +1,3 @@
+@import './libs/style.css';
+@import './theme/style.css';
+@import './utilities/style.css';

package/styles/theme/html/style.css

@@ -3,23 +3,24 @@
         background-color: #ffffff;
 
         ::-webkit-scrollbar {
-            width: calc(var(--spacing, .25rem) * 2);
+            width: calc(var(--spacing, .25rem) * 1.5);
         }
 
         ::-webkit-scrollbar-track {
-            background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-            border-radius: var(--radius-2xl, 1rem);
+            background-color: transparent;
+            border-radius: calc(infinity * 1px);
         }
 
         ::-webkit-scrollbar-thumb {
-            background-color: var(--color-gray-300, oklch(0.872 0.01 258.338));
-            border-radius: var(--radius-2xl, 1rem);
+            background-color: var(--color-gray-300);
+            border-radius: calc(infinity * 1px);
         }
 
         ::-webkit-scrollbar-thumb:hover {
-            background-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
+            background-color: var(--color-gray-400);
         }
 
+        scrollbar-width: thin;
         scroll-behavior: smooth;
     }
-}
+}

package/styles/theme/style.css

@@ -0,0 +1 @@
+@import './html/style.css';

package/styles/utilities/actions/button/[color]/fill.css

@@ -0,0 +1,393 @@
+@utility button-fill-gray-100 {
+    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));
+
+    border: none;
+
+    svg {
+        color: var(--color-gray-700, oklch(0.373 0.034 259.733));
+    }
+}
+
+@utility button-fill-gray-200 {
+    background-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
+    color: var(--color-gray-900, oklch(0.21 0.034 264.665));
+
+    border: none;
+
+    svg {
+        color: var(--color-gray-900, oklch(0.21 0.034 264.665));
+    }
+}
+
+@utility button-fill-gray-300 {
+    background-color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+    color: var(--color-black, #000);
+
+    border: none;
+
+    svg {
+        color: var(--color-black, #000);
+    }
+}
+
+@utility button-fill-gray-400 {
+    background-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-gray-500 {
+    background-color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-gray-600 {
+    background-color: var(--color-gray-600, oklch(0.446 0.03 256.802));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-red-100 {
+    background-color: var(--color-red-100, oklch(0.982 0.018 155.826));
+    color: var(--color-red-500, oklch(0.637 0.237 25.331));
+
+    border: none;
+
+    svg {
+        color: var(--color-red-500, oklch(0.637 0.237 25.331));
+    }
+}
+
+@utility button-fill-red-200 {
+    background-color: var(--color-red-200, oklch(0.962 0.044 156.743));
+    color: var(--color-red-700, oklch(0.527 0.154 150.069));
+
+    border: none;
+
+    svg {
+        color: var(--color-red-700, oklch(0.527 0.154 150.069));
+    }
+}
+
+@utility button-fill-red-300 {
+    background-color: var(--color-red-300, oklch(0.925 0.084 155.995));
+    color: var(--color-red-900, oklch(0.393 0.095 152.535));
+
+    border: none;
+
+    svg {
+        color: var(--color-red-900, oklch(0.393 0.095 152.535));
+    }
+}
+
+@utility button-fill-red-400 {
+    background-color: var(--color-red-400, oklch(0.871 0.15 154.449));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-red-500 {
+    background-color: var(--color-red-500, oklch(0.814 0.167 152.444));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-red-600 {
+    background-color: var(--color-red-600, oklch(0.745 0.134 151.244));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-orange-100 {
+    background-color: var(--color-orange-100, oklch(0.973 0.071 103.193));
+    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+
+    border: none;
+
+    svg {
+        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+    }
+}
+
+@utility button-fill-orange-200 {
+    background-color: var(--color-orange-200, oklch(0.945 0.129 101.54));
+    color: var(--color-orange-700, oklch(0.554 0.135 66.442));
+
+    border: none;
+
+    svg {
+        color: var(--color-orange-700, oklch(0.554 0.135 66.442));
+    }
+}
+
+@utility button-fill-orange-300 {
+    background-color: var(--color-orange-300, oklch(0.905 0.182 98.111));
+    color: var(--color-orange-900, oklch(0.421 0.095 57.708));
+
+    border: none;
+
+    svg {
+        color: var(--color-orange-900, oklch(0.421 0.095 57.708));
+    }
+}
+
+@utility button-fill-orange-400 {
+    background-color: var(--color-orange-400, oklch(0.852 0.199 91.936));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-orange-500 {
+    background-color: var(--color-orange-500, oklch(0.795 0.184 86.047));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-orange-600 {
+    background-color: var(--color-orange-600, oklch(0.681 0.162 75.834));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-yellow-100 {
+    background-color: var(--color-yellow-100, oklch(0.973 0.071 103.193));
+    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
+
+    border: none;
+
+    svg {
+        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
+    }
+}
+
+@utility button-fill-yellow-200 {
+    background-color: var(--color-yellow-200, oklch(0.945 0.129 101.54));
+    color: var(--color-yellow-700, oklch(0.554 0.135 66.442));
+
+    border: none;
+
+    svg {
+        color: var(--color-yellow-700, oklch(0.554 0.135 66.442));
+    }
+}
+
+@utility button-fill-yellow-300 {
+    background-color: var(--color-yellow-300, oklch(0.905 0.182 98.111));
+    color: var(--color-yellow-900, oklch(0.421 0.095 57.708));
+
+    border: none;
+
+    svg {
+        color: var(--color-yellow-900, oklch(0.421 0.095 57.708));
+    }
+}
+
+@utility button-fill-yellow-400 {
+    background-color: var(--color-yellow-400, oklch(0.852 0.199 91.936));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-yellow-500 {
+    background-color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-yellow-600 {
+    background-color: var(--color-yellow-600, oklch(0.681 0.162 75.834));
+    color: var(--color-white, #fff);
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-green-100 {
+    background-color: var(--color-green-100, oklch(0.982 0.018 155.826));
+    color: var(--color-green-500, oklch(0.637 0.237 25.331));
+
+    border: none;
+
+    svg {
+        color: var(--color-green-500, oklch(0.637 0.237 25.331));
+    }
+}
+
+@utility button-fill-green-200 {
+    background-color: var(--color-green-200, oklch(0.962 0.044 156.743));
+    color: var(--color-green-700, oklch(0.527 0.154 150.069));
+
+    border: none;
+
+    svg {
+        color: var(--color-green-700, oklch(0.527 0.154 150.069));
+    }
+}
+
+@utility button-fill-green-300 {
+    background-color: var(--color-green-300, oklch(0.925 0.084 155.995));
+    color: var(--color-green-900, oklch(0.393 0.095 152.535));
+
+    border: none;
+
+    svg {
+        color: var(--color-green-900, oklch(0.393 0.095 152.535));
+    }
+}
+
+@utility button-fill-green-400 {
+    background-color: var(--color-green-400, oklch(0.871 0.15 154.449));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-green-500 {
+    background-color: var(--color-green-500, oklch(0.814 0.167 152.444));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-green-600 {
+    background-color: var(--color-green-600, oklch(0.745 0.134 151.244));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-primary-100 {
+    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));
+
+    border: none;
+
+    svg {
+        color: var(--color-primary-500, oklch(0.637 0.237 25.331));
+    }
+}
+
+@utility button-fill-primary-200 {
+    background-color: var(--color-primary-200, oklch(0.928 0.006 264.531));
+    color: var(--color-primary-700, oklch(0.527 0.154 150.069));
+
+    border: none;
+
+    svg {
+        color: var(--color-primary-700, oklch(0.527 0.154 150.069));
+    }
+}
+
+@utility button-fill-primary-300 {
+    background-color: var(--color-primary-300, oklch(0.872 0.01 258.338));
+    color: var(--color-primary-900, oklch(0.393 0.095 152.535));
+
+    border: none;
+
+    svg {
+        color: var(--color-primary-900, oklch(0.393 0.095 152.535));
+    }
+}
+
+@utility button-fill-primary-400 {
+    background-color: var(--color-primary-400, oklch(0.707 0.022 261.325));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-primary-500 {
+    background-color: var(--color-primary-500, oklch(0.551 0.027 264.364));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}
+
+@utility button-fill-primary-600 {
+    background-color: var(--color-primary-600, oklch(0.446 0.03 256.802));
+    color: var(--color-white, #fff);
+
+    border: none;
+
+    svg {
+        color: var(--color-white, #fff);
+    }
+}