@ozen-ui/kit 0.52.0 → 0.54.0

package/__inner__/cjs/components/TagNext/Tag.css

@@ -0,0 +1,244 @@
+/* stylelint-disable */
+.TagNext {
+  border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
+  gap: var(--tag-gap);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
+}
+.TagNext > svg {
+    flex-shrink: 0;
+  }
+.TagNext_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --tag-padding: 0 4px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --tag-padding: 4px 8px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_interactive:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.TagNext_interactive:focus {
+      box-shadow: var(--shadow-outline-focused);
+    }
+/** primary & neutral */
+.TagNext_variant_primary.TagNext_color_neutral {
+    background-color: var(--color-background-action-secondary);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-action-secondary-pressed);
+    }
+/** primary & action */
+.TagNext_variant_primary.TagNext_color_action {
+    background-color: var(--color-background-action);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-hover);
+    }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-pressed);
+    }
+/** primary & error */
+.TagNext_variant_primary.TagNext_color_error {
+    background-color: var(--color-background-error);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-hover);
+    }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-pressed);
+    }
+/** primary & warning */
+.TagNext_variant_primary.TagNext_color_warning {
+    background-color: var(--color-background-warning);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-hover);
+    }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-pressed);
+    }
+/** primary & success */
+.TagNext_variant_primary.TagNext_color_success {
+    background-color: var(--color-background-success);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-hover);
+    }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-pressed);
+    }
+/** primary & info */
+.TagNext_variant_primary.TagNext_color_info {
+    background-color: var(--color-background-info);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-hover);
+    }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-pressed);
+    }
+/** secondary & neutral */
+.TagNext_variant_secondary.TagNext_color_neutral {
+    background-color: var(--color-background-secondary);
+    color: var(--color-content-primary);
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+/** secondary & action */
+.TagNext_variant_secondary.TagNext_color_action {
+    background-color: var(--color-background-action-light);
+    color: var(--color-content-action-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-light-pressed);
+    }
+/** secondary & error */
+.TagNext_variant_secondary.TagNext_color_error {
+    background-color: var(--color-background-error-light);
+    color: var(--color-content-error-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-light-pressed);
+    }
+/** secondary & warning */
+.TagNext_variant_secondary.TagNext_color_warning {
+    background-color: var(--color-background-warning-light);
+    color: var(--color-content-warning-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-light-pressed);
+    }
+/** secondary & success */
+.TagNext_variant_secondary.TagNext_color_success {
+    background-color: var(--color-background-success-light);
+    color: var(--color-content-success-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-light-pressed);
+    }
+/** secondary & info */
+.TagNext_variant_secondary.TagNext_color_info {
+    background-color: var(--color-background-info-light);
+    color: var(--color-content-info-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-light-pressed);
+    }
+.TagNext-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }

package/__inner__/cjs/components/TagNext/Tag.d.ts

@@ -0,0 +1,33 @@
+import './Tag.css';
+import type { ElementType } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { type RenderContentType } from '../../utils/renderContent';
+export declare const tagVariant: readonly ["primary", "secondary"];
+export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
+export type TagVariant = (typeof tagVariant)[number];
+export type TagColor = (typeof tagColorVariant)[number];
+export type TagIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+export declare const cnTag: import("@bem-react/classname").ClassNameFormatter;
+type TagBaseProps = {
+    /** Текст лейбла внутри тега */
+    label: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Вариант компонента */
+    variant?: TagVariant;
+    /** Цвет компонента */
+    color?: TagColor;
+    /** Если {true} делает компонент интерактивным */
+    interactive?: boolean;
+    /** Иконка слева */
+    iconLeft?: TagIcon;
+    /** Иконка справа */
+    iconRight?: TagIcon;
+};
+export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export declare const Tag: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TagBaseProps, "div">;
+export {};

package/__inner__/cjs/components/TagNext/Tag.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = exports.cnTag = exports.tagColorVariant = exports.tagVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Tag.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
+var constants_1 = require("./constants");
+exports.tagVariant = ['primary', 'secondary'];
+exports.tagColorVariant = [
+    'neutral',
+    'action',
+    'error',
+    'warning',
+    'success',
+    'info',
+];
+exports.cnTag = (0, classname_1.cn)('TagNext');
+exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'TagNext' });
+    var _a = props.variant, variant = _a === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.TAG_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.TAG_DEFAULT_AS : _c, _d = props.color, color = _d === void 0 ? constants_1.TAG_DEFAULT_COLOR : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = tslib_1.__rest(props, ["variant", "size", "as", "color", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+            },
+        });
+    };
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnTag)({ variant: variant, color: color, size: size, interactive: interactive }, [className]) }, other, { ref: ref }),
+        renderIcon(iconLeft),
+        react_1.default.createElement("span", { className: (0, exports.cnTag)('Label') }, label),
+        renderIcon(iconRight)));
+});
+exports.Tag.displayName = 'Tag';

package/__inner__/cjs/components/TagNext/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_VARIANT = "secondary";
+export declare const TAG_DEFAULT_COLOR = "action";
+export declare const TAG_DEFAULT_SIZE = "m";

package/__inner__/cjs/components/TagNext/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAG_DEFAULT_SIZE = exports.TAG_DEFAULT_COLOR = exports.TAG_DEFAULT_VARIANT = exports.TAG_DEFAULT_AS = void 0;
+exports.TAG_DEFAULT_AS = 'div';
+exports.TAG_DEFAULT_VARIANT = 'secondary';
+exports.TAG_DEFAULT_COLOR = 'action';
+exports.TAG_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/TagNext/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/__inner__/cjs/components/TagNext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Tag"), exports);

package/__inner__/cjs/components/Textarea/types.d.ts

@@ -42,6 +42,8 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
     maxLength?: number;
     /** Количество колонок */

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_vipDark.css

@@ -0,0 +1,172 @@
+.Theme_color_vipDark {
+  --color-content-action-on: #fff;
+  --color-content-secondary: #aeb1c4;
+  --color-content-primary: #fff;
+  --color-content-tertiary: #7e8194;
+  --color-content-disabled: #636574;
+  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-content-action: #d4aa6b;
+  --color-content-action-hover: #ad8b59;
+  --color-content-action-pressed: #866c47;
+  --color-content-action-dark: #eeddc4;
+  --color-content-action-secondary: #9a9eb5;
+  --color-content-action-secondary-hover: #7e8194;
+  --color-content-action-secondary-pressed: #636574;
+  --color-content-action-secondary-dark: #d7d8e1;
+  --color-background-main: #1e1d22;
+  --color-content-error: #f664af;
+  --color-content-error-hover: #c85390;
+  --color-content-error-pressed: #9a4270;
+  --color-content-error-dark: #fbc1df;
+  --color-content-warning: #ff7f50;
+  --color-content-warning-hover: #cf6944;
+  --color-content-warning-pressed: #9f5237;
+  --color-content-warning-dark: #ffccb9;
+  --color-content-success: #0b0;
+  --color-content-success-hover: #039904;
+  --color-content-success-pressed: #067607;
+  --color-content-success-dark: #99e499;
+  --color-content-info: #023dff;
+  --color-content-info-hover: #0534d0;
+  --color-content-info-pressed: #082ba0;
+  --color-content-info-dark: #9ab1ff;
+  --color-content-primary-inverse: #1e1d22;
+  --color-background-main-inverse: #d9dade;
+  --color-content-accent-secondary: #989aa5;
+  --color-accent-main: #14151b;
+  --color-content-accent-primary: #c7c8ce;
+  --color-accent-primary: #1b1c24;
+  --color-content-accent-disabled: #7b7e8c;
+  --color-background-main-hover: #2c2c33;
+  --color-background-main-pressed: #474853;
+  --color-background-primary: #17161a;
+  --color-background-primary-hover: #1e1d22;
+  --color-background-primary-pressed: #2c2c33;
+  --color-background-secondary: #2c2c33;
+  --color-background-secondary-hover: #474853;
+  --color-background-secondary-pressed: #636574;
+  --color-background-tertiary: #474853;
+  --color-background-tertiary-hover: #636574;
+  --color-background-tertiary-pressed: #7e8194;
+  --color-background-disabled: #2c2c33;
+  --color-background-action: #ad8b59;
+  --color-background-action-hover: #d4aa6b;
+  --color-background-action-pressed: #db8;
+  --color-background-action-active-disabled: #5f4d36;
+  --color-background-action-light: #2d261f;
+  --color-background-action-light-hover: #372e24;
+  --color-background-action-light-pressed: #5f4d36;
+  --color-background-accent-action-light: #5f4d36;
+  --color-background-accent-action-light-hover: #866c47;
+  --color-background-accent-action-light-pressed: #ad8b59;
+  --color-background-action-secondary: #7e8194;
+  --color-background-action-secondary-hover: #9a9eb5;
+  --color-background-action-secondary-pressed: #aeb1c4;
+  --color-background-action-secondary-active-disabled: #636574;
+  --color-background-action-secondary-light: #2c2c33;
+  --color-background-action-secondary-light-hover: #474853;
+  --color-background-action-secondary-light-pressed: #636574;
+  --color-background-accent-action-secondary-light: #2c2c33;
+  --color-background-accent-action-secondary-light-hover: #474853;
+  --color-background-accent-action-secondary-light-pressed: #636574;
+  --color-background-error: #c85390;
+  --color-background-error-hover: #f664af;
+  --color-background-error-pressed: #f883bf;
+  --color-background-error-light: #321c2a;
+  --color-background-error-light-hover: #3e2031;
+  --color-background-error-light-pressed: #6c3151;
+  --color-background-accent-error-light: #6c3151;
+  --color-background-accent-error-light-hover: #9a4270;
+  --color-background-accent-error-light-pressed: #c85390;
+  --color-background-warning: #cf6944;
+  --color-background-warning-hover: #ff7f50;
+  --color-background-warning-pressed: #ff9973;
+  --color-background-warning-light: #34201b;
+  --color-background-warning-light-hover: #40251e;
+  --color-background-warning-light-pressed: #703c2b;
+  --color-background-accent-warning-light: #703c2b;
+  --color-background-accent-warning-light-hover: #9f5237;
+  --color-background-accent-warning-light-pressed: #cf6944;
+  --color-background-success: #039904;
+  --color-background-success-hover: #0b0;
+  --color-background-success-pressed: #33c933;
+  --color-background-success-light: #0e290f;
+  --color-background-success-light-hover: #0d310e;
+  --color-background-success-light-pressed: #0a540b;
+  --color-background-accent-success-light: #0a540b;
+  --color-background-accent-success-light-hover: #067607;
+  --color-background-accent-success-light-pressed: #039904;
+  --color-background-info: #0534d0;
+  --color-background-info-hover: #023dff;
+  --color-background-info-pressed: #3564ff;
+  --color-background-info-light: #0e1636;
+  --color-background-info-light-hover: #0d1841;
+  --color-background-info-light-pressed: #0a2171;
+  --color-background-accent-info-light: #0a2171;
+  --color-background-accent-info-light-hover: #082ba0;
+  --color-background-accent-info-light-pressed: #0534d0;
+  --color-background-overlay: rgb(0 0 0 / 60%);
+  --color-background-ghost: rgb(255 255 255 / 10%);
+  --color-background-ghost-hover: rgb(255 255 255 / 20%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 30%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-main: #474853;
+  --color-border-main-hover: #636574;
+  --color-border-main-pressed: #7e8194;
+  --color-border-secondary: #2c2c33;
+  --color-border-secondary-hover: #474853;
+  --color-border-secondary-pressed: #636574;
+  --color-border-disabled: #474853;
+  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-focused: #372e24;
+  --color-border-action: #ad8b59;
+  --color-border-action-hover: #866c47;
+  --color-border-action-pressed: #5f4d36;
+  --color-border-action-secondary: #d7d8e1;
+  --color-border-action-secondary-hover: #c2c5d3;
+  --color-border-action-secondary-pressed: #aeb1c4;
+  --color-border-error: #c85390;
+  --color-border-warning: #cf6944;
+  --color-border-success: #039904;
+  --color-border-info: #0534d0;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #989aa5;
+  --color-border-accent-disabled: #5f6374;
+  --color-border-accent-focused: #372e24;
+  --color-accent-main-hover: #1b1c24;
+  --color-accent-main-pressed: #252732;
+  --color-accent-primary-hover: #252732;
+  --color-accent-primary-pressed: #2f3240;
+  --color-accent-secondary: #252732;
+  --color-accent-secondary-hover: #2f3240;
+  --color-accent-secondary-pressed: #393c4d;
+  --color-accent-tertiary: #2f3240;
+  --color-accent-tertiary-hover: #393c4d;
+  --color-accent-tertiary-pressed: #43475b;
+  --color-accent-disabled: #2f3240;
+  --color-accent-main-inverse: #c7c8ce;
+  --color-additional-a1: #067607;
+  --color-additional-a2: #0b0;
+  --color-additional-a3: #99e499;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f6d24;
+  --color-additional-e2: #ffac30;
+  --color-additional-e3: #ffdeac;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9f3b3d;
+  --color-additional-g2: #ff5959;
+  --color-additional-g3: #ffbdbd;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
+}