@ozen-ui/kit 0.5.0 → 0.7.0

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -1,33 +1,28 @@
 /* stylelint-disable */
-.Popover.Tooltip {
+.Tooltip {
   max-inline-size: 300px;
-  box-shadow: var(--shadow-m);
 }
-.Popover.Tooltip_variant_dark {
-      background: var(--color-background-main-inverse);
-      color: var(--color-content-primary-inverse);
-    }
-.Popover.Tooltip_variant_light {
-      background: var(--color-background-main);
-      color: var(--color-content-primary);
-    }
-.Popover.Tooltip_size_xs {
-      padding: 8px 12px;
+.Tooltip_size_xs {
+      padding: var(--space-s) var(--space-m);
 
       font: var(--typography-text-xs-font);
 
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
 
       text-transform: var(--typography-text-xs-text_transform, none);
-      border-radius: var(--border-radius-s);
     }
-.Popover.Tooltip_size_s {
-      padding: 12px 16px;
+.Tooltip_size_s {
+      padding: var(--space-m) var(--space-l);
 
       font: var(--typography-text-s-font);
 
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
 
       text-transform: var(--typography-text-s-text_transform, none);
-      border-radius: var(--border-radius-m);
+    }
+.Tooltip_variant_light {
+      color: var(--color-content-primary);
+    }
+.Tooltip_variant_dark {
+      color: var(--color-content-primary-inverse);
     }

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
-import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect, } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { Popover } from '../Popover';
-import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
+import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
 export var cnTooltip = cn('Tooltip');
 export var Tooltip = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Tooltip' });
@@ -111,8 +111,7 @@ export var Tooltip = forwardRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
-                variant: variant,
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, as: TOOLTIP_DEFAULT_TAG, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/esm/components/Tooltip/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
 export declare const TOOLTIP_DEFAULT_VARIANT = "dark";

package/__inner__/esm/components/Tooltip/constants.js

@@ -1,3 +1,5 @@
+import { Paper } from '../Paper';
+export var TOOLTIP_DEFAULT_TAG = Paper;
 export var TOOLTIP_DEFAULT_TRIGGER = 'hover';
 export var TOOLTIP_DEFAULT_SIZE = 's';
 export var TOOLTIP_DEFAULT_VARIANT = 'dark';

package/__inner__/esm/components/Tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
-import type { PopoverProps } from '../Popover';
+import type { PopoverBaseProps } from '../Popover';
+import { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
 export type TooltipSizeVariant = (typeof tooltipSizeVariant)[number];
 export declare const tooltipVariant: readonly ["light", "dark"];
@@ -39,4 +40,4 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<'div'>;
+} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<typeof TOOLTIP_DEFAULT_TAG>;

package/__inner__/esm/components/Typography/Typography.css

@@ -56,33 +56,69 @@
 .Typography_color_actionDark {
       color: var(--color-content-action-dark);
     }
+.Typography_color_actionPressed {
+      color: var(--color-content-action-pressed);
+    }
 .Typography_color_actionOn {
       color: var(--color-content-action-on);
     }
 .Typography_color_error {
       color: var(--color-content-error);
     }
+.Typography_color_errorHover {
+      color: var(--color-content-error-hover);
+    }
+.Typography_color_errorPressed {
+      color: var(--color-content-error-pressed);
+    }
 .Typography_color_errorDark {
       color: var(--color-content-error-dark);
     }
 .Typography_color_warning {
       color: var(--color-content-warning);
     }
+.Typography_color_warningHover {
+      color: var(--color-content-warning-hover);
+    }
+.Typography_color_warningPressed {
+      color: var(--color-content-warning-pressed);
+    }
 .Typography_color_warningDark {
       color: var(--color-content-warning-dark);
     }
 .Typography_color_success {
       color: var(--color-content-success);
     }
+.Typography_color_successHover {
+      color: var(--color-content-success-hover);
+    }
+.Typography_color_successPressed {
+      color: var(--color-content-success-pressed);
+    }
 .Typography_color_successDark {
       color: var(--color-content-success-dark);
     }
 .Typography_color_info {
       color: var(--color-content-info);
     }
+.Typography_color_infoHover {
+      color: var(--color-content-info-hover);
+    }
+.Typography_color_infoPressed {
+      color: var(--color-content-info-pressed);
+    }
 .Typography_color_infoDark {
       color: var(--color-content-info-dark);
     }
+.Typography_color_accentMain {
+      color: var(--color-content-accent-main);
+    }
+.Typography_color_accentPrimary {
+      color: var(--color-content-accent-primary);
+    }
+.Typography_color_accentDisabled {
+      color: var(--color-content-accent-disabled);
+    }
 .Typography_variant_heading-4xl {
       font: var(--typography-heading-4xl-font);
       letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);

package/__inner__/esm/components/Typography/Typography.d.ts

@@ -7,7 +7,7 @@ export declare const typographyDisplayVariant: readonly ["block", "inline", "inl
 export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
 export declare const typographyAlignVariant: readonly ["left", "center", "right"];
 export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
-export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionHover", "actionDark", "actionOn", "error", "errorDark", "warning", "warningDark", "success", "successDark", "info", "infoDark", "primaryInverse"];
+export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentMain", "accentPrimary", "accentDisabled"];
 export type TypographyColorVariant = (typeof typographyColorVariant)[number];
 export type TypographyBaseProps = {
     /** Вариант типографики */

package/__inner__/esm/components/Typography/Typography.js

@@ -47,18 +47,30 @@ export var typographyColorVariant = [
     'disabled',
     'ghostDisabled',
     'action',
+    'actionPressed',
     'actionHover',
     'actionDark',
     'actionOn',
     'error',
+    'errorHover',
+    'errorPressed',
     'errorDark',
     'warning',
+    'warningHover',
+    'warningPressed',
     'warningDark',
     'success',
+    'successHover',
     'successDark',
+    'successPressed',
     'info',
+    'infoHover',
+    'infoPressed',
     'infoDark',
     'primaryInverse',
+    'accentMain',
+    'accentPrimary',
+    'accentDisabled',
 ];
 export var cnTypography = cn('Typography');
 export var Typography = polymorphicComponentWithRef(function (inProps, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "React component library",
   "files": [
     "*"