@ozen-ui/kit 0.50.3 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,31 +1,31 @@
1
1
  /* stylelint-disable */
2
2
  .Tooltip {
3
3
  max-inline-size: 300px;
4
- color: var(--color-content-primary);
5
4
  }
5
+ .Tooltip-Content {
6
+ color: var(--color-content-primary);
7
+ }
8
+ .Tooltip-Content_size_xs {
9
+ font: var(--typography-text-xs-font);
10
+ letter-spacing: var(--typography-text-xs-letter_spacing, 0);
11
+ text-transform: var(--typography-text-xs-text_transform, none);
12
+ }
13
+ .Tooltip-Content_size_s {
14
+ font: var(--typography-text-s-font);
15
+ letter-spacing: var(--typography-text-s-letter_spacing, 0);
16
+ text-transform: var(--typography-text-s-text_transform, none);
17
+ }
18
+ .Tooltip-Content_variant_dark,
19
+ .Tooltip-Content_inverse {
20
+ color: var(--color-content-primary-inverse);
21
+ }
6
22
  .Tooltip_size_xs {
7
23
  min-inline-size: 28px;
8
24
  min-block-size: 28px;
9
25
  padding: var(--spacing-2xs) var(--spacing-xs);
10
-
11
- font: var(--typography-text-xs-font);
12
-
13
- letter-spacing: var(--typography-text-xs-letter_spacing, 0);
14
-
15
- text-transform: var(--typography-text-xs-text_transform, none);
16
26
  }
17
27
  .Tooltip_size_s {
18
28
  min-inline-size: 40px;
19
29
  min-block-size: 40px;
20
30
  padding: var(--spacing-xs) var(--spacing-s);
21
-
22
- font: var(--typography-text-s-font);
23
-
24
- letter-spacing: var(--typography-text-s-letter_spacing, 0);
25
-
26
- text-transform: var(--typography-text-s-text_transform, none);
27
31
  }
28
- .Tooltip_variant_dark,
29
- .Tooltip_inverse {
30
- color: var(--color-content-primary-inverse);
31
- }
@@ -134,6 +134,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
134
134
  react_1.default.cloneElement(resolveChildren, composeChildrenProps),
135
135
  react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState, onClose: closeWithDelay, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
136
136
  size: size,
137
- }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
137
+ }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }),
138
+ react_1.default.createElement("div", { className: (0, exports.cnTooltip)('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
138
139
  });
139
140
  exports.Tooltip.displayName = 'Tooltip';
@@ -29,6 +29,9 @@
29
29
  .Typography_align_initial {
30
30
  text-align: initial;
31
31
  }
32
+ .Typography_align_inherit {
33
+ text-align: inherit;
34
+ }
32
35
  .Typography_color_primary {
33
36
  color: var(--color-content-primary);
34
37
  }
@@ -119,6 +122,9 @@
119
122
  .Typography_color_accentDisabled {
120
123
  color: var(--color-content-accent-disabled);
121
124
  }
125
+ .Typography_color_inherit {
126
+ color: inherit;
127
+ }
122
128
  .Typography_variant_heading-4xl {
123
129
  font: var(--typography-heading-4xl-font);
124
130
  letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);
@@ -327,6 +333,11 @@
327
333
  .Typography_variant_caption-3xs_1.Typography_defaultMargin {
328
334
  margin-block-end: var(--spacing-3xs);
329
335
  }
336
+ .Typography_variant_inherit {
337
+ font: inherit;
338
+ letter-spacing: inherit;
339
+ text-transform: inherit;
340
+ }
330
341
  .Typography_link {
331
342
  color: var(--color-content-action);
332
343
  }
@@ -1,13 +1,13 @@
1
1
  import './Typography.css';
2
2
  import type { ElementType, ReactNode } from 'react';
3
3
  import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
4
- export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1"];
4
+ export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
5
5
  export type TypographyVariant = (typeof typographyVariant)[number];
6
6
  export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
7
7
  export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
8
- export declare const typographyAlignVariant: readonly ["left", "center", "right"];
8
+ export declare const typographyAlignVariant: readonly ["left", "center", "right", "initial", "inherit"];
9
9
  export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
10
- 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", "accentPrimary", "accentSecondary", "accentDisabled"];
10
+ 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", "accentPrimary", "accentSecondary", "accentDisabled", "inherit"];
11
11
  export type TypographyColorVariant = (typeof typographyColorVariant)[number];
12
12
  export type TypographyBaseProps = {
13
13
  /** Вариант типографики */
@@ -36,13 +36,20 @@ exports.typographyVariant = [
36
36
  'text-3xs_1',
37
37
  'caption-3xs',
38
38
  'caption-3xs_1',
39
+ 'inherit',
39
40
  ];
40
41
  exports.typographyDisplayVariant = [
41
42
  'block',
42
43
  'inline',
43
44
  'inlineBlock',
44
45
  ];
45
- exports.typographyAlignVariant = ['left', 'center', 'right'];
46
+ exports.typographyAlignVariant = [
47
+ 'left',
48
+ 'center',
49
+ 'right',
50
+ 'initial',
51
+ 'inherit',
52
+ ];
46
53
  exports.typographyColorVariant = [
47
54
  'primary',
48
55
  'secondary',
@@ -74,6 +81,7 @@ exports.typographyColorVariant = [
74
81
  'accentPrimary',
75
82
  'accentSecondary',
76
83
  'accentDisabled',
84
+ 'inherit',
77
85
  ];
78
86
  exports.cnTypography = (0, classname_1.cn)('Typography');
79
87
  exports.Typography = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
@@ -28,4 +28,5 @@ exports.matchVariantToTag = {
28
28
  'text-3xs_1': 'p',
29
29
  'caption-3xs': 'span',
30
30
  'caption-3xs_1': 'span',
31
+ inherit: 'p',
31
32
  };
@@ -1,3 +1,4 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
1
2
  export type UseBooleanControllers = {
2
3
  /** Установить значение в {true} */
3
4
  on: () => void;
@@ -5,6 +6,8 @@ export type UseBooleanControllers = {
5
6
  off: () => void;
6
7
  /** Перевести значение в противоположное состояние */
7
8
  toggle: () => void;
9
+ /** Перевести значение в собственное состояние */
10
+ set: Dispatch<SetStateAction<boolean>>;
8
11
  };
9
12
  export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
10
13
  export declare function useBoolean(
@@ -11,6 +11,6 @@ defaultValue) {
11
11
  var on = (0, react_1.useCallback)(function () { return setValue(true); }, []);
12
12
  var off = (0, react_1.useCallback)(function () { return setValue(false); }, []);
13
13
  var toggle = (0, react_1.useCallback)(function () { return setValue(function (value) { return !value; }); }, []);
14
- return [value, { on: on, off: off, toggle: toggle }];
14
+ return [value, { on: on, off: off, toggle: toggle, set: setValue }];
15
15
  }
16
16
  exports.useBoolean = useBoolean;
@@ -1,31 +1,31 @@
1
1
  /* stylelint-disable */
2
2
  .Tooltip {
3
3
  max-inline-size: 300px;
4
- color: var(--color-content-primary);
5
4
  }
5
+ .Tooltip-Content {
6
+ color: var(--color-content-primary);
7
+ }
8
+ .Tooltip-Content_size_xs {
9
+ font: var(--typography-text-xs-font);
10
+ letter-spacing: var(--typography-text-xs-letter_spacing, 0);
11
+ text-transform: var(--typography-text-xs-text_transform, none);
12
+ }
13
+ .Tooltip-Content_size_s {
14
+ font: var(--typography-text-s-font);
15
+ letter-spacing: var(--typography-text-s-letter_spacing, 0);
16
+ text-transform: var(--typography-text-s-text_transform, none);
17
+ }
18
+ .Tooltip-Content_variant_dark,
19
+ .Tooltip-Content_inverse {
20
+ color: var(--color-content-primary-inverse);
21
+ }
6
22
  .Tooltip_size_xs {
7
23
  min-inline-size: 28px;
8
24
  min-block-size: 28px;
9
25
  padding: var(--spacing-2xs) var(--spacing-xs);
10
-
11
- font: var(--typography-text-xs-font);
12
-
13
- letter-spacing: var(--typography-text-xs-letter_spacing, 0);
14
-
15
- text-transform: var(--typography-text-xs-text_transform, none);
16
26
  }
17
27
  .Tooltip_size_s {
18
28
  min-inline-size: 40px;
19
29
  min-block-size: 40px;
20
30
  padding: var(--spacing-xs) var(--spacing-s);
21
-
22
- font: var(--typography-text-s-font);
23
-
24
- letter-spacing: var(--typography-text-s-letter_spacing, 0);
25
-
26
- text-transform: var(--typography-text-s-text_transform, none);
27
31
  }
28
- .Tooltip_variant_dark,
29
- .Tooltip_inverse {
30
- color: var(--color-content-primary-inverse);
31
- }
@@ -131,6 +131,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
131
131
  React.cloneElement(resolveChildren, composeChildrenProps),
132
132
  React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState, onClose: closeWithDelay, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
133
133
  size: size,
134
- }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
134
+ }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }),
135
+ React.createElement("div", { className: cnTooltip('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
135
136
  });
136
137
  Tooltip.displayName = 'Tooltip';
@@ -29,6 +29,9 @@
29
29
  .Typography_align_initial {
30
30
  text-align: initial;
31
31
  }
32
+ .Typography_align_inherit {
33
+ text-align: inherit;
34
+ }
32
35
  .Typography_color_primary {
33
36
  color: var(--color-content-primary);
34
37
  }
@@ -119,6 +122,9 @@
119
122
  .Typography_color_accentDisabled {
120
123
  color: var(--color-content-accent-disabled);
121
124
  }
125
+ .Typography_color_inherit {
126
+ color: inherit;
127
+ }
122
128
  .Typography_variant_heading-4xl {
123
129
  font: var(--typography-heading-4xl-font);
124
130
  letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);
@@ -327,6 +333,11 @@
327
333
  .Typography_variant_caption-3xs_1.Typography_defaultMargin {
328
334
  margin-block-end: var(--spacing-3xs);
329
335
  }
336
+ .Typography_variant_inherit {
337
+ font: inherit;
338
+ letter-spacing: inherit;
339
+ text-transform: inherit;
340
+ }
330
341
  .Typography_link {
331
342
  color: var(--color-content-action);
332
343
  }
@@ -1,13 +1,13 @@
1
1
  import './Typography.css';
2
2
  import type { ElementType, ReactNode } from 'react';
3
3
  import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
4
- export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1"];
4
+ export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
5
5
  export type TypographyVariant = (typeof typographyVariant)[number];
6
6
  export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
7
7
  export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
8
- export declare const typographyAlignVariant: readonly ["left", "center", "right"];
8
+ export declare const typographyAlignVariant: readonly ["left", "center", "right", "initial", "inherit"];
9
9
  export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
10
- 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", "accentPrimary", "accentSecondary", "accentDisabled"];
10
+ 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", "accentPrimary", "accentSecondary", "accentDisabled", "inherit"];
11
11
  export type TypographyColorVariant = (typeof typographyColorVariant)[number];
12
12
  export type TypographyBaseProps = {
13
13
  /** Вариант типографики */
@@ -33,13 +33,20 @@ export var typographyVariant = [
33
33
  'text-3xs_1',
34
34
  'caption-3xs',
35
35
  'caption-3xs_1',
36
+ 'inherit',
36
37
  ];
37
38
  export var typographyDisplayVariant = [
38
39
  'block',
39
40
  'inline',
40
41
  'inlineBlock',
41
42
  ];
42
- export var typographyAlignVariant = ['left', 'center', 'right'];
43
+ export var typographyAlignVariant = [
44
+ 'left',
45
+ 'center',
46
+ 'right',
47
+ 'initial',
48
+ 'inherit',
49
+ ];
43
50
  export var typographyColorVariant = [
44
51
  'primary',
45
52
  'secondary',
@@ -71,6 +78,7 @@ export var typographyColorVariant = [
71
78
  'accentPrimary',
72
79
  'accentSecondary',
73
80
  'accentDisabled',
81
+ 'inherit',
74
82
  ];
75
83
  export var cnTypography = cn('Typography');
76
84
  export var Typography = polymorphicComponentWithRef(function (inProps, ref) {
@@ -25,4 +25,5 @@ export var matchVariantToTag = {
25
25
  'text-3xs_1': 'p',
26
26
  'caption-3xs': 'span',
27
27
  'caption-3xs_1': 'span',
28
+ inherit: 'p',
28
29
  };
@@ -1,3 +1,4 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
1
2
  export type UseBooleanControllers = {
2
3
  /** Установить значение в {true} */
3
4
  on: () => void;
@@ -5,6 +6,8 @@ export type UseBooleanControllers = {
5
6
  off: () => void;
6
7
  /** Перевести значение в противоположное состояние */
7
8
  toggle: () => void;
9
+ /** Перевести значение в собственное состояние */
10
+ set: Dispatch<SetStateAction<boolean>>;
8
11
  };
9
12
  export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
10
13
  export declare function useBoolean(
@@ -8,5 +8,5 @@ defaultValue) {
8
8
  var on = useCallback(function () { return setValue(true); }, []);
9
9
  var off = useCallback(function () { return setValue(false); }, []);
10
10
  var toggle = useCallback(function () { return setValue(function (value) { return !value; }); }, []);
11
- return [value, { on: on, off: off, toggle: toggle }];
11
+ return [value, { on: on, off: off, toggle: toggle, set: setValue }];
12
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.50.3",
3
+ "version": "0.51.0",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"
@@ -28,9 +28,9 @@
28
28
  "react-popper": "^2.3.0",
29
29
  "react-transition-group": "^4.4.5",
30
30
  "tslib": "^2.6.2",
31
- "@ozen-ui/fonts": "0.50.3",
32
- "@ozen-ui/icons": "0.50.3",
33
- "@ozen-ui/logger": "0.50.3"
31
+ "@ozen-ui/fonts": "0.51.0",
32
+ "@ozen-ui/icons": "0.51.0",
33
+ "@ozen-ui/logger": "0.51.0"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=17.0.2 <19.0.0",
@@ -1,5 +0,0 @@
1
- {
2
- "main": "../__inner__/cjs/components/CalendarRange/index.js",
3
- "module": "../__inner__/esm/components/CalendarRange/index.js",
4
- "types": "../__inner__/esm/components/CalendarRange/index.d.ts"
5
- }