mosuk-ui 1.0.9 → 1.11.0

package/components/actions/input/(otp)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpProps } from './component.interface';
+export declare function InputOtp<C extends ElementType = 'div'>({ as, children, length, ...rest }: InputOtpProps<C>): React.JSX.Element;

package/components/actions/input/(otp)/component/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { OTPFieldPreview as BaseOTPField } from '@base-ui/react/otp-field';
+export type InputOtpProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'> & Omit<BaseOTPField.Root.Props, 'className' | 'style'>;

package/components/{display/image/(images)/skeleton → actions/input/(otp)/component}/component.js

@@ -20,16 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Image as ImageIcon } from 'lucide-react';
-import React from 'react';
+import classNames from 'classnames';
+import React, { useId } from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
 import styles from './component.module.css';
-export function ImagesSkeleton(_a) {
+export function InputOtp(_a) {
     var _b;
-    var props = __rest(_a, []);
-    return (React.createElement("div", __assign({}, props, { className: "mosuk-image-skeleton ".concat(styles.image, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
-}
-export function ImagesSkeletonImage(_a) {
-    var _b;
-    var props = __rest(_a, []);
-    return React.createElement(ImageIcon, __assign({}, props, { ref: props === null || props === void 0 ? void 0 : props.ref, className: "".concat(styles.icon, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }));
+    var as = _a.as, children = _a.children, length = _a.length, rest = __rest(_a, ["as", "children", "length"]);
+    var Component = (as || OTPField.Root);
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    return (React.createElement(Component, __assign({}, rest, { id: id, length: length, className: classNames(styles.root, 'mosuk-input-otp', rest === null || rest === void 0 ? void 0 : rest.className) }), children));
 }

package/components/actions/input/(otp)/component/component.module.css

@@ -0,0 +1,49 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .root {
+            display: flex;
+            width: 100%;
+            gap: var(--spacing-2, calc(var(--spacing, 0.25rem) * 2));
+        }
+
+        .input {
+            box-sizing: border-box;
+            margin: 0;
+            height: var(--spacing-11, calc(var(--spacing, 0.25rem) * 11));
+            width: var(--spacing-10, calc(var(--spacing, 0.25rem) * 10));
+            border-radius: var(--radius-lg, calc(var(--spacing, 0.25rem) * 2));
+            border: 1px solid var(--color-gray-300, rgb(209 213 219));
+            background-color: transparent;
+            text-align: center;
+            font-family: inherit;
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+            color: var(--color-black, #000);
+            outline: none;
+            transition: all 200ms ease-in-out;
+
+            &::placeholder {
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            }
+
+            &:focus {
+                outline: none;
+                border-color: var(--color-blue-500, oklch(0.623 0.214 259.815));
+            }
+
+            &:read-only {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+
+        .separator {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+        }
+    }
+}

package/components/actions/input/(otp)/component/field/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { OTPFieldInputProps } from "@base-ui/react";
+export interface InputOtpFieldProps extends OTPFieldInputProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpField({ index, length, className, ...rest }: InputOtpFieldProps): React.JSX.Element;

package/components/actions/input/(otp)/component/field/component.js

@@ -0,0 +1,30 @@
+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 { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpField(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Input, __assign({ className: classNames(styles.input, 'mosuk-input-otp-field', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/component/index.d.ts

@@ -0,0 +1,13 @@
+import { InputOtp as Component } from './component';
+import { InputOtpProps as ComponentProps } from './component.interface';
+import { InputOtpField, InputOtpFieldProps } from './field/component';
+import { InputOtpSeparator, InputOtpSeparatorProps } from './separator/component';
+export declare const InputOtp: typeof Component & {
+    Field: typeof InputOtpField;
+    Separator: typeof InputOtpSeparator;
+};
+export declare namespace InputOtp {
+    type Props = ComponentProps;
+    type FieldProps = InputOtpFieldProps;
+    type SeparatorProps = InputOtpSeparatorProps;
+}

package/components/actions/input/(otp)/component/index.js

@@ -0,0 +1,7 @@
+import { InputOtp as Component } from './component';
+import { InputOtpField } from './field/component';
+import { InputOtpSeparator } from './separator/component';
+export var InputOtp = Object.assign(Component, {
+    Field: InputOtpField,
+    Separator: InputOtpSeparator,
+});

package/components/actions/input/(otp)/component/separator/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SeparatorProps } from "@base-ui/react";
+export interface InputOtpSeparatorProps extends SeparatorProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpSeparator({ index, length, className, ...rest }: InputOtpSeparatorProps): React.JSX.Element;

package/components/actions/input/(otp)/component/separator/component.js

@@ -0,0 +1,30 @@
+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 { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpSeparator(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Separator, __assign({ className: classNames(styles.separator, 'mosuk-input-otp-separator', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpSkeletonProps } from './component.interface';
+export declare function InputOtpSkeleton<C extends ElementType = 'div'>({ as, slots, children, ...rest }: InputOtpSkeletonProps<C>): React.JSX.Element;

package/components/actions/input/(otp)/skeleton/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type InputOtpSkeletonProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+    slots?: number;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/{display/image/(images)/component/image → actions/input/(otp)/skeleton}/component.js

@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
-import { Image } from '../../../component/components/component';
-export function ImagesImage(_a) {
-    var rest = __rest(_a, []);
-    return (React.createElement(Image, __assign({}, rest, { className: classNames('images-image', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+import styles from './component.module.css';
+export function InputOtpSkeleton(_a) {
+    var as = _a.as, _b = _a.slots, slots = _b === void 0 ? 6 : _b, children = _a.children, rest = __rest(_a, ["as", "slots", "children"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-input-otp-skeleton', styles.otp, rest === null || rest === void 0 ? void 0 : rest.className) }), children));
 }

package/components/actions/input/(otp)/skeleton/component.module.css

@@ -0,0 +1,18 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .otp {
+            display: flex;
+            gap: calc(var(--spacing, .25rem) * 2);
+            width: 100%;
+        }
+
+        .slot {
+            width: calc(var(--spacing, .25rem) * 10);
+            height: calc(var(--spacing, .25rem) * 10);
+            min-width: calc(var(--spacing, .25rem) * 10);
+            min-height: calc(var(--spacing, .25rem) * 10);
+
+            border-radius: calc(var(--spacing, .25rem) * 2);
+        }
+    }
+}

package/components/actions/input/(otp)/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+import { InputOtpSkeleton as Component } from './component';
+import { InputOtpSkeletonProps as ComponentProps } from './component.interface';
+export declare const InputOtpSkeleton: typeof Component;
+export declare namespace InputOtpSkeleton {
+    type Props = ComponentProps;
+}

package/components/actions/input/(otp)/skeleton/index.js

@@ -0,0 +1,2 @@
+import { InputOtpSkeleton as Component } from './component';
+export var InputOtpSkeleton = Object.assign(Component, {});

package/components/texts/counter/component/component.js

@@ -30,7 +30,9 @@ export var Counter = forwardRef(function (props, externalRef) {
     // Преобразуем children в число
     var targetValue = typeof children === 'number'
         ? children
-        : parseFloat(String(children).replace(/[^\d.,-]/g, '').replace(/,/g, '.')) || 0;
+        : parseFloat(String(children)
+            .replace(/[^\d.,-]/g, '')
+            .replace(/,/g, '.')) || 0;
     // Определяем количество десятичных знаков в исходном числе
     var getDecimalPlaces = function (num) {
         var match = String(num).match(/(?:\.(\d+))?$/);
@@ -41,8 +43,43 @@ export var Counter = forwardRef(function (props, externalRef) {
         var element = ref.current;
         if (!element)
             return;
-        var rafId;
+        var rafId = 0;
         var isActive = true;
+        var finished = false;
+        var formatter = new Intl.NumberFormat('ru-RU', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: maxDigits,
+        });
+        var tolerance = maxDigits > 0
+            ? 0.5 * Math.pow(10, -maxDigits)
+            : Math.max(1e-6, Math.abs(targetValue) * 1e-9);
+        var applyFinal = function () {
+            if (!element)
+                return;
+            element.textContent = formatter.format(targetValue);
+        };
+        var stopRaf = function () {
+            if (rafId !== 0) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+        };
+        var complete = function () {
+            if (!isActive || finished)
+                return;
+            finished = true;
+            stopRaf();
+            applyFinal();
+        };
+        var onTransitionEnd = function (event) {
+            if (event.target !== element)
+                return;
+            // Registered custom property: Chromium reports "--value"
+            if (event.propertyName !== '--value')
+                return;
+            complete();
+        };
+        element.addEventListener('transitionend', onTransitionEnd);
         // Небольшая задержка для запуска transition
         requestAnimationFrame(function () {
             if (!element || !isActive)
@@ -51,23 +88,25 @@ export var Counter = forwardRef(function (props, externalRef) {
             element.style.setProperty('--value', String(targetValue));
         });
         var animate = function () {
-            if (!isActive || !element)
+            if (!isActive || !element || finished)
                 return;
             try {
-                var currentValue = parseFloat(getComputedStyle(element).getPropertyValue('--value')) || 0;
-                element.textContent = new Intl.NumberFormat('ru-RU', {
-                    minimumFractionDigits: 0,
-                    maximumFractionDigits: maxDigits,
-                }).format(currentValue);
+                var currentValue = parseFloat(getComputedStyle(element).getPropertyValue('--value')) ||
+                    0;
+                element.textContent = formatter.format(currentValue);
+                if (Math.abs(currentValue - targetValue) <= tolerance) {
+                    complete();
+                    return;
+                }
             }
             catch (_a) { }
-            if (isActive)
-                rafId = requestAnimationFrame(animate);
+            rafId = requestAnimationFrame(animate);
         };
         rafId = requestAnimationFrame(animate);
         return function () {
             isActive = false;
-            cancelAnimationFrame(rafId);
+            stopRaf();
+            element.removeEventListener('transitionend', onTransitionEnd);
         };
     }, [targetValue, maxDigits]);
     // Объединяем refs
@@ -81,5 +120,9 @@ export var Counter = forwardRef(function (props, externalRef) {
             }
         }
     }, [externalRef]);
-    return (React.createElement(Component, __assign({}, rest, { ref: ref, className: classNames(styles.counter, className), style: __assign({ '--value': 0 }, style) }), "0"));
+    return (React.createElement(Component, __assign({}, rest, { ref: ref, className: classNames(styles.counter, className), 
+        // Не задаём --value через React: при каждом ре-рендере это сбрасывало бы
+        // переменную и срывало transition, из‑за чего RAF никогда не останавливался.
+        // Начальное значение задаётся в CSS (@property --value initial-value: 0).
+        style: style }), "0"));
 });

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "mosuk-ui",
-  "version": "1.0.9",
+  "version": "1.11.0",
   "author": "mosuk",
   "license": "MIT",
   "private": false,
   "type": "module",
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
+    "@base-ui/react": "^1.4.1",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@dnd-kit/modifiers": "^9.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lucide-react": "latest",
-    "mosuk-utilities": "^1.0.0",
     "mosuk-icons": "^1.0.5",
+    "mosuk-utilities": "^1.0.0",
     "react-hook-form": "^7.56.4",
     "react-imask": "^7.6.1",
     "react-textarea-autosize": "^8.5.9",
@@ -23,10 +23,10 @@
     "swr": "^2.3.8"
   },
   "peerDependencies": {
+    "framer-motion": "^12.34.3",
     "next": "^15.3.4 || ^16.0.0-beta.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "framer-motion": "^12.34.3"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@yandex/ymaps3-types": "^1.0.17595433"
@@ -87,6 +87,16 @@
         "default": "./components/actions/input/(mask)/skeleton/index.js"
       }
     },
+    "./components/actions/input/(otp)/component": {
+      "import": {
+        "default": "./components/actions/input/(otp)/component/index.js"
+      }
+    },
+    "./components/actions/input/(otp)/skeleton": {
+      "import": {
+        "default": "./components/actions/input/(otp)/skeleton/index.js"
+      }
+    },
     "./components/actions/input/(search)/component": {
       "import": {
         "default": "./components/actions/input/(search)/component/index.js"
@@ -257,16 +267,6 @@
         "default": "./components/display/file/skeleton/index.js"
       }
     },
-    "./components/display/image/(images)/component": {
-      "import": {
-        "default": "./components/display/image/(images)/component/index.js"
-      }
-    },
-    "./components/display/image/(images)/skeleton": {
-      "import": {
-        "default": "./components/display/image/(images)/skeleton/index.js"
-      }
-    },
     "./components/display/image/component": {
       "import": {
         "default": "./components/display/image/component/index.js"