mosuk-ui 1.0.10 → 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/actions/input/(otp)/component/component.interface.js

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

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

@@ -0,0 +1,33 @@
+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, { useId } from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from './component.module.css';
+export function InputOtp(_a) {
+    var _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/actions/input/(otp)/skeleton/component.interface.js

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

package/components/actions/input/(otp)/skeleton/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 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.10",
+  "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"

package/styles/components/actions/button/[size]/style.css

@@ -1,281 +1,27 @@
-@utility button-3xs {
-    height: calc(var(--spacing, 0.25rem) * 4);
+@utility button-* {
+    height: calc(var(--spacing, 0.25rem) * --value(integer));
 
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.125);
+    gap: calc(var(--spacing, 0.25rem) * 0.25 * --value(integer));
 
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2);
-    padding-right: calc(var(--spacing, 0.25rem) * 2);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2);
-        height: calc(var(--spacing, 0.25rem) * 2);
-        min-width: calc(var(--spacing, 0.25rem) * 2);
-        min-height: calc(var(--spacing, 0.25rem) * 2);
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-2xs {
-    height: calc(var(--spacing, 0.25rem) * 5);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.25);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.5);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2);
-        height: calc(var(--spacing, 0.25rem) * 2);
-        min-width: calc(var(--spacing, 0.25rem) * 2);
-        min-height: calc(var(--spacing, 0.25rem) * 2);
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-xs {
-    height: calc(var(--spacing, 0.25rem) * 6);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.5);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.75);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.75);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2.5);
-        height: calc(var(--spacing, 0.25rem) * 2.5);
-        min-width: calc(var(--spacing, 0.25rem) * 2.5);
-        min-height: calc(var(--spacing, 0.25rem) * 2.5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-sm {
-    height: calc(var(--spacing, 0.25rem) * 7);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.75);
-
-    font-size: var(--text-2xs, 0.625rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 3);
-    padding-right: calc(var(--spacing, 0.25rem) * 3);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 3);
-        height: calc(var(--spacing, 0.25rem) * 3);
-        min-width: calc(var(--spacing, 0.25rem) * 3);
-        min-height: calc(var(--spacing, 0.25rem) * 3);
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-base {
-    height: calc(var(--spacing, 0.25rem) * 8);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: var(--text-xs, 0.75rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 4);
-    padding-right: calc(var(--spacing, 0.25rem) * 4);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 3.5);
-        height: calc(var(--spacing, 0.25rem) * 3.5);
-        min-width: calc(var(--spacing, 0.25rem) * 3.5);
-        min-height: calc(var(--spacing, 0.25rem) * 3.5);
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-md {
-    height: calc(var(--spacing, 0.25rem) * 9);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: 0.7875rem;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 5);
-    padding-right: calc(var(--spacing, 0.25rem) * 5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 4);
-        height: calc(var(--spacing, 0.25rem) * 4);
-        min-width: calc(var(--spacing, 0.25rem) * 4);
-        min-height: calc(var(--spacing, 0.25rem) * 4);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-lg {
-    height: calc(var(--spacing, 0.25rem) * 10);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: var(--text-sm, 0.875rem);
-    font-weight: 500;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 5);
-    padding-right: calc(var(--spacing, 0.25rem) * 5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 4.5);
-        height: calc(var(--spacing, 0.25rem) * 4.5);
-        min-width: calc(var(--spacing, 0.25rem) * 4.5);
-        min-height: calc(var(--spacing, 0.25rem) * 4.5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-xl {
-    height: calc(var(--spacing, 0.25rem) * 11);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2.5);
-
-    font-size: var(--text-sm, 0.875rem);
-    font-weight: 500;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 6);
-    padding-right: calc(var(--spacing, 0.25rem) * 6);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 5);
-        height: calc(var(--spacing, 0.25rem) * 5);
-        min-width: calc(var(--spacing, 0.25rem) * 5);
-        min-height: calc(var(--spacing, 0.25rem) * 5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility button-2xl {
-    height: calc(var(--spacing, 0.25rem) * 12);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2.5);
-
-    font-size: var(--text-base, 1rem);
+    font-size: calc(var(--spacing, 0.25rem) * 0.375 * --value(integer));
     font-weight: 500;
     text-wrap: nowrap;
 
-    padding-left: calc(var(--spacing, 0.25rem) * 6);
-    padding-right: calc(var(--spacing, 0.25rem) * 6);
+    padding-left: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+    padding-right: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
     border-radius: calc(infinity * 1px);
     outline: none;
 
-    cursor: pointer;
-
     transition: all 200ms ease-in-out;
 
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 5.5);
-        height: calc(var(--spacing, 0.25rem) * 5.5);
-        min-width: calc(var(--spacing, 0.25rem) * 5.5);
-        min-height: calc(var(--spacing, 0.25rem) * 5.5);
-
-        margin-bottom: 1px;
+    & :where(svg) {
+        width: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        height: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        min-width: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        min-height: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
 
         transition: all 200ms ease-in-out;
     }

package/styles/components/actions/icon/[size]/style.css

@@ -1,306 +1,28 @@
-@utility icon-4xs {
-    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);
+@utility icon-* {
+    width: calc(var(--spacing, 0.25rem) * --value(integer));
+    height: calc(var(--spacing, 0.25rem) * --value(integer));
+    min-width: calc(var(--spacing, 0.25rem) * --value(integer));
+    min-height: calc(var(--spacing, 0.25rem) * --value(integer));
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
-    padding: calc(var(--spacing, .25rem) * 0.85);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-3xs {
-    width: calc(var(--spacing, .25rem) * 4);
-    height: calc(var(--spacing, .25rem) * 4);
-    min-width: calc(var(--spacing, .25rem) * 4);
-    min-height: calc(var(--spacing, .25rem) * 4);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 1);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-2xs, 0.625rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-2xs {
-    width: calc(var(--spacing, .25rem) * 5);
-    height: calc(var(--spacing, .25rem) * 5);
-    min-width: calc(var(--spacing, .25rem) * 5);
-    min-height: calc(var(--spacing, .25rem) * 5);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 1.5);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-xs, 0.75rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-xs {
-    width: calc(var(--spacing, .25rem) * 6);
-    height: calc(var(--spacing, .25rem) * 6);
-    min-width: calc(var(--spacing, .25rem) * 6);
-    min-height: calc(var(--spacing, .25rem) * 6);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 1.75);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-sm, 0.875rem);
+    font-size: calc(var(--spacing, 0.25rem) * 0.375 * --value(integer));
+    font-weight: 500;
     text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
 
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-sm {
-    width: calc(var(--spacing, .25rem) * 7);
-    height: calc(var(--spacing, .25rem) * 7);
-    min-width: calc(var(--spacing, .25rem) * 7);
-    min-height: calc(var(--spacing, .25rem) * 7);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 2);
+    padding: calc(var(--spacing, 0.25rem) * 0.275 * --value(integer));
     border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-sm, 0.875rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
+    outline: none;
 
     transition: all 200ms ease-in-out;
 
-    & svg {
+    & :where(svg) {
         width: 100%;
         height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-base {
-    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);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 2.25);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-base, 1rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-md {
-    width: calc(var(--spacing, .25rem) * 9);
-    height: calc(var(--spacing, .25rem) * 9);
-    min-width: calc(var(--spacing, .25rem) * 9);
-    min-height: calc(var(--spacing, .25rem) * 9);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 2.5);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-base, 1rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-lg {
-    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);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 3);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-lg, 1.125rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-xl {
-    width: calc(var(--spacing, .25rem) * 12);
-    height: calc(var(--spacing, .25rem) * 12);
-    min-width: calc(var(--spacing, .25rem) * 12);
-    min-height: calc(var(--spacing, .25rem) * 12);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 3.5);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-lg, 1.125rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
-
-        transition: all 200ms ease-in-out;
-    }
-}
-
-@utility icon-2xl {
-    width: calc(var(--spacing, .25rem) * 14);
-    height: calc(var(--spacing, .25rem) * 14);
-    min-width: calc(var(--spacing, .25rem) * 14);
-    min-height: calc(var(--spacing, .25rem) * 14);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: calc(var(--spacing, .25rem) * 4);
-    border-radius: calc(infinity * 1px);
-
-    font-size: var(--text-xl, 1.25rem);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: 100%;
-        height: 100%;
-
-        outline: none;
+        min-width: 100%;
+        min-height: 100%;
 
         transition: all 200ms ease-in-out;
     }

package/styles/components/actions/input/[size]/style.css

@@ -1,86 +1,28 @@
-@utility input-2xs {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 5);
+@utility input-* {
+    height: calc(var(--spacing, 0.25rem) * --value(integer));
 
-    display: block;
-
-    font-size: var(--text-3xs, 0.5rem);
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.5);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-}
-
-@utility input-xs {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 6);
-
-    display: block;
-
-    font-size: var(--text-3xs, 0.5rem);
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.75);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.75);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-}
-
-
-@utility input-sm {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 7);
-
-    display: block;
-
-    font-size: var(--text-2xs, 0.625rem);
-
-    padding-left: calc(var(--spacing, 0.25rem) * 3);
-    padding-right: calc(var(--spacing, 0.25rem) * 3);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-}
-
-@utility input-base {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 8);
-
-    display: block;
-
-    font-size: var(--text-base, 1rem);
-
-    padding-left: calc(var(--spacing, 0.25rem) * 3.5);
-    padding-right: calc(var(--spacing, 0.25rem) * 3.5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-}
-
-@utility input-md {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 9);
-
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem) * 0.25 * --value(integer));
 
     font-size: var(--text-base, 1rem);
+    font-weight: 500;
+    text-wrap: nowrap;
 
-    padding-left: calc(var(--spacing, 0.25rem) * 4);
-    padding-right: calc(var(--spacing, 0.25rem) * 4);
+    padding-left: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+    padding-right: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
     border-radius: calc(infinity * 1px);
     outline: none;
-}
 
-@utility input-lg {
-    width: 100%;
-    height: calc(var(--spacing, 0.25rem) * 10);
+    transition: all 200ms ease-in-out;
 
-    display: block;
-
-    font-size: var(--text-base, 1rem);
-    font-weight: 500;
-    text-wrap: nowrap;
+    & :where(svg) {
+        width: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        height: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        min-width: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
+        min-height: calc(var(--spacing, 0.25rem) * 0.5 * --value(integer));
 
-    padding-left: calc(var(--spacing, 0.25rem) * 4);
-    padding-right: calc(var(--spacing, 0.25rem) * 4);
-    border-radius: calc(infinity * 1px);
-    outline: none;
+        transition: all 200ms ease-in-out;
+    }
 }

package/styles/utilities/action/fill/style.css

@@ -4,7 +4,5 @@
     color: white;
 
     border: none;
-    box-shadow:
-        inset 3px 3px 7px -1px color-mix(in oklab, --value(--color-*, [color]) 90%, white),
-        inset -6px -6px 14px -4px color-mix(in oklab, --value(--color-*, [color]) 90%, white);
+    box-shadow: transparent;
 }

package/styles/utilities/action/glass/style.css

@@ -4,8 +4,6 @@
     color: --value(--color-*, [color]);
 
     border: none;
-    /* Два inset: акцент у верхнего левого и нижнего правого угла; по центру и по другой диагонали слабее за счёт размытия и отсутствия перекрытия */
-    /* Два inset: акцент у верхнего левого и нижнего правого угла; по центру и по другой диагонали слабее за счёт размытия и отсутствия перекрытия */
     box-shadow:
         inset 6px 6px 14px -4px color-mix(in oklab, --value(--color-*, [color]) 28%, transparent),
         inset -6px -6px 14px -4px color-mix(in oklab, --value(--color-*, [color]) 28%, transparent);

package/styles/utilities/action/outline/style.css

@@ -3,4 +3,5 @@
     color: --value(--color-*, [color]);
 
     border: 1px solid --value(--color-*, [color]);
+    box-shadow: transparent;
 }

package/styles/utilities/action/style.css

@@ -1,4 +1,3 @@
 @import './fill/style.css';
 @import './glass/style.css';
-@import './outline/style.css';
-@import './transparent/style.css';
+@import './outline/style.css';

package/styles/utilities/action/transparent/style.css

@@ -1,5 +0,0 @@
-@utility action-transparent-* {
-    background-color: transparent;
-
-    color: --value(--color-*, [color]);
-}