@ozen-ui/kit 0.42.0 → 0.44.0

package/__inner__/esm/components/Segment/Segment.css

@@ -1,23 +1,26 @@
 /* stylelint-disable */
 .Segment {
-  --segment-border-radius: var(--border-radius-s);
+  --segment-padding: var(--control-padding-3xs);
   background-color: var(--segment-background-color);
   border-radius: var(--segment-border-radius);
-  box-sizing: border-box;
+  block-size: var(--segment-height);
+  padding: var(--segment-padding);
   margin: 0;
   border: none;
   display: flex;
+  white-space: nowrap;
+  box-sizing: border-box;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
-  padding: 2px;
-  gap: 3px;
-  white-space: nowrap;
 }
 .Segment_size_2xs {
       font: var(--typography-text-2xs-font);
       letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
       text-transform: var(--typography-text-2xs-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-l);
+      --segment-item-border-radius: var(--border-radius-m);
+      --segment-height: var(--control-height-2xs);
       --segment-item-padding-vertical: 6px;
       --segment-item-padding-horizontal: 12px;
     }
@@ -26,6 +29,9 @@
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-l);
+      --segment-item-border-radius: var(--border-radius-m);
+      --segment-height: var(--control-height-xs);
       --segment-item-padding-vertical: 10px;
       --segment-item-padding-horizontal: 12px;
     }
@@ -34,6 +40,9 @@
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-s);
       --segment-item-padding-vertical: 12px;
       --segment-item-padding-horizontal: 16px;
     }
@@ -42,6 +51,9 @@
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-m);
       --segment-item-padding-vertical: 14px;
       --segment-item-padding-horizontal: 20px;
     }
@@ -50,6 +62,9 @@
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-l);
       --segment-item-padding-vertical: 16px;
       --segment-item-padding-horizontal: 24px;
     }

package/__inner__/esm/components/Segment/components/SegmentItem.css

@@ -1,37 +1,37 @@
 .SegmentItem {
   --segment-item-delimeter-opacity: 1;
   --segment-item-background-color: transparent;
-  --segment-item-border-radius: var(--border-radius-xs);
   --segment-item-text-color: var(--color-content-primary);
   --segment-item-text-color-hover: var(--color-content-secondary);
   --segment-item-gap: var(--spacing-2xs);
   gap: var(--segment-item-gap);
+  color: var(--segment-item-text-color);
   padding: var(--segment-item-padding-vertical)
     var(--segment-item-padding-horizontal);
-  background-color: var(--segment-item-background-color);
   border-radius: var(--segment-item-border-radius);
-  color: var(--segment-item-text-color);
+  background-color: var(--segment-item-background-color);
   transition:
     background-color var(--transition-default),
     color var(--transition-default),
     box-shadow var(--transition-default);
-  display: flex;
-  align-items: center;
-  position: relative;
+  block-size: calc(var(--segment-height) - 2 * var(--segment-padding));
   border: none;
-  cursor: pointer;
   outline: none;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  align-items: center;
+  box-sizing: border-box;
 }
 
   .SegmentItem::after {
-    opacity: var(--segment-item-delimeter-opacity);
-    background-color: var(--color-background-tertiary);
-    inset: var(--segment-item-padding-vertical) 0;
-    transition: opacity var(--transition-default);
     content: '';
     position: absolute;
-    inline-size: 1px;
-    inset-inline-start: -2px;
+    inline-size: var(--border-width-s);
+    inset: var(--segment-item-padding-vertical) 0;
+    transition: opacity var(--transition-default);
+    opacity: var(--segment-item-delimeter-opacity);
+    background-color: var(--color-background-tertiary);
   }
 
   .SegmentItem_selected {
@@ -64,6 +64,9 @@
   }
 
   .SegmentItem-Radio {
+    inset: 0;
+    margin: 0;
+    padding: 0;
     opacity: 0;
     position: absolute;
     pointer-events: none;
@@ -78,7 +81,7 @@
     }
 
   .SegmentItem-Box {
-    position: absolute;
     inset: 0;
+    position: absolute;
     border-radius: var(--segment-item-border-radius);
   }

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.css

@@ -1,53 +1,17 @@
-.ScrollButton {
-    position: absolute;
-    display: inline-flex;
-    align-items: center;
-    padding: 12px;
-    box-sizing: border-box;
-    z-index: 2;
-    border: none;
-    cursor: pointer;
-    color: var(--color-content-primary);
-    box-shadow: var(--shadow-m);
-    border-radius: 4px; 
-    background-color: var(--color-background-main);
-    transition: opacity var(--transition-default), box-shadow var(--transition-default);
+.IconButtonNext.ScrollButton {
+  position: absolute;
+  z-index: calc(var(--z-index-absolute) + 1);
 }
 
-    .ScrollButton_direction_left {
-        inset-inline-start: 0;
-    }
+  .IconButtonNext.ScrollButton_direction_left {
+    inset-inline-start: 0;
+  }
 
-    .ScrollButton_direction_right {
-        inset-inline-end: 0;
-    }
+  .IconButtonNext.ScrollButton_direction_right {
+    inset-inline-end: 0;
+  }
 
-    .ScrollButton_size_m, .ScrollButton_size_l {
-            padding: 12px;
-        }
-
-    .ScrollButton_size_s, .ScrollButton_size_xs {
-            padding: 8px;
-        }
-
-    .ScrollButton:focus {
-        outline: 0;
-        box-shadow: var(--shadow-outline-focused);
-    }
-
-    .ScrollButton:focus:not(:focus-visible) {
-        box-shadow: var(--shadow-m);
-    }
-
-    .ScrollButton:hover {
-        box-shadow: var(--shadow-l);
-    }
-
-    .ScrollButton:active {
-        box-shadow: var(--shadow-s);
-    }
-
-    .ScrollButton_invisible {
-        pointer-events: none;
-        opacity: 0;
-    }
+  .IconButtonNext.ScrollButton_invisible {
+    pointer-events: none;
+    opacity: 0;
+  }

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.d.ts

@@ -1,11 +1,11 @@
 import './ScrollButton.css';
 import React from 'react';
-import type { Ref, ButtonHTMLAttributes } from 'react';
+import type { Ref } from 'react';
+import type { IconButtonProps } from '../../../IconButtonNext';
 import type { TabsSizeVariant } from '../../types';
 export declare const scrollButtonDirectionVariant: readonly ["left", "right"];
 export type ScrollButtonDirectionVariant = (typeof scrollButtonDirectionVariant)[number];
-type ButtonElProps = ButtonHTMLAttributes<HTMLButtonElement>;
-interface ScrollButtonProps extends ButtonElProps {
+interface ScrollButtonProps extends Partial<IconButtonProps> {
     direction: ScrollButtonDirectionVariant;
     invisible: boolean;
     children?: never;

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.js

@@ -3,6 +3,7 @@ import './ScrollButton.css';
 import React, { useMemo } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@ozen-ui/icons';
 import { cn } from '../../../../utils/classname';
+import { IconButton } from '../../../IconButtonNext';
 export var scrollButtonDirectionVariant = ['left', 'right'];
 export var cnScrollButton = cn('ScrollButton');
 export var iconByDirection = {
@@ -18,7 +19,6 @@ export var ScrollButton = React.forwardRef(function (_a, ref) {
     var ariaLabel = useMemo(function () { return ariaLabelByDirection[direction]; }, [direction]);
     var Icon = useMemo(function () { return iconByDirection[direction]; }, [direction]);
     var tabIndex = invisible ? -1 : 0;
-    return (React.createElement("button", __assign({ className: cnScrollButton({ invisible: invisible, direction: direction, size: size }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, ref: ref }, other),
-        React.createElement(Icon, { size: "s" })));
+    return (React.createElement(IconButton, __assign({ variant: "floating", size: size, icon: React.createElement(Icon, { size: "s" }), className: cnScrollButton({ invisible: invisible, direction: direction }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, compressed: true, ref: ref }, other)));
 });
 ScrollButton.displayName = 'ScrollButton';

package/__inner__/esm/components/Tabs/components/Tab/Tab.css

@@ -7,7 +7,7 @@
   max-inline-size: 360px;
   min-inline-size: 90px;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--tab-border-radius);
   color: var(--color-content-secondary);
   font-style: normal;
   text-decoration: none;
@@ -34,7 +34,7 @@
   }
 .Tab_active {
     cursor: auto;
-    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
+    border-radius: var(--tab-border-radius);
   }
 .Tab > svg {
     flex-shrink: 0;
@@ -94,15 +94,19 @@
         text-transform: var(--typography-text-m-text_transform, none);
       }
 .Tab_size_xs {
+    --tab-border-radius: var(--border-radius-m);
     padding: 12px;
   }
 .Tab_size_s {
+    --tab-border-radius: var(--border-radius-l);
     padding: 14px 16px;
   }
 .Tab_size_m {
+    --tab-border-radius: var(--border-radius-l);
     padding: 16px 20px;
   }
 .Tab_size_l {
+    --tab-border-radius: var(--border-radius-l);
     padding: 18px 24px;
   }
 .Tab_onlyIcon.Tab_size_2xs {

package/__inner__/esm/components/Tag/Tag.css

@@ -1,13 +1,13 @@
 /* stylelint-disable */
 .Tag {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--border-radius-xs);
-  padding: var(--tag-padding);
-  gap: var(--spacing-3xs);
-  outline: none;
   border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
   text-decoration: none;
+  gap: var(--spacing-3xs);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
   transition:
     box-shadow var(--transition-default),
     background-color var(--transition-default),
@@ -19,6 +19,7 @@
       text-transform: var(--typography-text-3xs-text_transform, none);
 
       --tag-padding: 0 4px;
+      --tag-border-radius: var(--border-radius-s);
     }
 .Tag_size_xs {
       font: var(--typography-text-xs-font);
@@ -26,6 +27,7 @@
       text-transform: var(--typography-text-xs-text_transform, none);
 
       --tag-padding: 4px 8px;
+      --tag-border-radius: var(--border-radius-s);
     }
 .Tag_size_s {
       font: var(--typography-text-s-font);
@@ -33,6 +35,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --tag-padding: 6px 12px;
+      --tag-border-radius: var(--border-radius-m);
     }
 .Tag_variant_neutral {
       background-color: var(--color-background-secondary);

package/__inner__/esm/components/ThemeProvider/_borderRadius/Theme_borderRadius_ozenDefault.css

@@ -1,6 +1,7 @@
 .Theme_borderRadius_ozenDefault {
   --border-radius-l: 12px;
   --border-radius-xl: 16px;
+  --border-radius-2xl: 24px;
   --border-radius-m: 8px;
   --border-radius-s: 6px;
   --border-radius-xs: 4px;

package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts

@@ -1,5 +1,5 @@
 export declare const color: readonly ["--color-content-primary", "--color-content-secondary", "--color-content-tertiary", "--color-content-disabled", "--color-content-ghost-disabled", "--color-content-action", "--color-content-action-hover", "--color-content-action-pressed", "--color-content-action-dark", "--color-content-action-secondary", "--color-content-action-secondary-hover", "--color-content-action-secondary-pressed", "--color-content-action-secondary-dark", "--color-content-action-on", "--color-content-error", "--color-content-error-hover", "--color-content-error-pressed", "--color-content-error-dark", "--color-content-warning", "--color-content-warning-hover", "--color-content-warning-pressed", "--color-content-warning-dark", "--color-content-success", "--color-content-success-hover", "--color-content-success-pressed", "--color-content-success-dark", "--color-content-info", "--color-content-info-hover", "--color-content-info-pressed", "--color-content-info-dark", "--color-content-primary-inverse", "--color-content-accent-secondary", "--color-accent-main", "--color-content-accent-primary", "--color-accent-primary", "--color-content-accent-disabled", "--color-background-main", "--color-background-main-hover", "--color-background-main-pressed", "--color-background-primary", "--color-background-primary-hover", "--color-background-primary-pressed", "--color-background-secondary", "--color-background-secondary-hover", "--color-background-secondary-pressed", "--color-background-tertiary", "--color-background-tertiary-hover", "--color-background-tertiary-pressed", "--color-background-disabled", "--color-background-action", "--color-background-action-hover", "--color-background-action-pressed", "--color-background-action-active-disabled", "--color-background-action-light", "--color-background-action-light-hover", "--color-background-action-light-pressed", "--color-background-accent-action-light", "--color-background-accent-action-light-hover", "--color-background-accent-action-light-pressed", "--color-background-action-secondary", "--color-background-action-secondary-hover", "--color-background-action-secondary-pressed", "--color-background-action-secondary-active-disabled", "--color-background-action-secondary-light", "--color-background-action-secondary-light-hover", "--color-background-action-secondary-light-pressed", "--color-background-accent-action-secondary-light", "--color-background-accent-action-secondary-light-hover", "--color-background-accent-action-secondary-light-pressed", "--color-background-error", "--color-background-error-hover", "--color-background-error-pressed", "--color-background-error-light", "--color-background-error-light-hover", "--color-background-error-light-pressed", "--color-background-accent-error-light", "--color-background-accent-error-light-hover", "--color-background-accent-error-light-pressed", "--color-background-warning", "--color-background-warning-hover", "--color-background-warning-pressed", "--color-background-warning-light", "--color-background-warning-light-hover", "--color-background-warning-light-pressed", "--color-background-accent-warning-light", "--color-background-accent-warning-light-hover", "--color-background-accent-warning-light-pressed", "--color-background-success", "--color-background-success-hover", "--color-background-success-pressed", "--color-background-success-light", "--color-background-success-light-hover", "--color-background-success-light-pressed", "--color-background-accent-success-light", "--color-background-accent-success-light-hover", "--color-background-accent-success-light-pressed", "--color-background-info", "--color-background-info-hover", "--color-background-info-pressed", "--color-background-info-light", "--color-background-info-light-hover", "--color-background-info-light-pressed", "--color-background-accent-info-light", "--color-background-accent-info-light-hover", "--color-background-accent-info-light-pressed", "--color-background-main-inverse", "--color-background-overlay", "--color-background-ghost", "--color-background-ghost-hover", "--color-background-ghost-pressed", "--color-background-ghost-disabled", "--color-border-main", "--color-border-main-hover", "--color-border-main-pressed", "--color-border-secondary", "--color-border-secondary-hover", "--color-border-secondary-pressed", "--color-border-disabled", "--color-border-ghost-disabled", "--color-border-focused", "--color-border-action", "--color-border-action-hover", "--color-border-action-pressed", "--color-border-action-secondary", "--color-border-action-secondary-hover", "--color-border-action-secondary-pressed", "--color-border-error", "--color-border-warning", "--color-border-success", "--color-border-info", "--color-border-main-on", "--color-border-accent-main", "--color-border-accent-disabled", "--color-border-accent-focused", "--color-accent-main-hover", "--color-accent-main-pressed", "--color-accent-primary-hover", "--color-accent-primary-pressed", "--color-accent-secondary", "--color-accent-secondary-hover", "--color-accent-secondary-pressed", "--color-accent-tertiary", "--color-accent-tertiary-hover", "--color-accent-tertiary-pressed", "--color-accent-disabled", "--color-accent-main-inverse", "--color-additional-a1", "--color-additional-a2", "--color-additional-a3", "--color-additional-b1", "--color-additional-b2", "--color-additional-b3", "--color-additional-c1", "--color-additional-c2", "--color-additional-c3", "--color-additional-d1", "--color-additional-d2", "--color-additional-d3", "--color-additional-e1", "--color-additional-e2", "--color-additional-e3", "--color-additional-f1", "--color-additional-f2", "--color-additional-f3", "--color-additional-g1", "--color-additional-g2", "--color-additional-g3", "--color-additional-h1", "--color-additional-h2", "--color-additional-h3"];
-export declare const borderRadius: readonly ["--border-radius-l", "--border-radius-xl", "--border-radius-m", "--border-radius-s", "--border-radius-xs", "--border-radius-2xs"];
+export declare const borderRadius: readonly ["--border-radius-l", "--border-radius-xl", "--border-radius-2xl", "--border-radius-m", "--border-radius-s", "--border-radius-xs", "--border-radius-2xs"];
 export declare const borderWidth: readonly ["--border-width-s", "--border-width-m"];
 export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"];
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];

package/__inner__/esm/components/ThemeProvider/themes/helper.js

@@ -173,6 +173,7 @@ export var color = [
 export var borderRadius = [
     '--border-radius-l',
     '--border-radius-xl',
+    '--border-radius-2xl',
     '--border-radius-m',
     '--border-radius-s',
     '--border-radius-xs',

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

@@ -112,7 +112,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, 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: {
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size === 'xs' ? 's' : 'l' }, 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/locale/locale.js

@@ -1,6 +1,9 @@
 import { NEXT, PAGE, PREVIOUS } from '../components/Pagination/constants';
 export var ruRU = {
     defaultProps: {
+        Alert: {
+            closeText: 'Закрыть',
+        },
         Autocomplete: {
             noOptionsText: 'Ничего не найдено',
             closeText: 'Закрыть',
@@ -52,6 +55,9 @@ export var ruRU = {
 };
 export var kkKZ = {
     defaultProps: {
+        Alert: {
+            closeText: 'Жабу',
+        },
         Autocomplete: {
             noOptionsText: 'Ештеңе табылған жоқ',
             closeText: 'Жабу',
@@ -103,6 +109,9 @@ export var kkKZ = {
 };
 export var enUS = {
     defaultProps: {
+        Alert: {
+            closeText: 'Close',
+        },
         Autocomplete: {
             noOptionsText: 'No options',
             closeText: 'Close',

package/__inner__/esm/utils/getPaperSizeToFormElement.d.ts

@@ -0,0 +1,3 @@
+import type { PaperProps } from '../components/Paper';
+import type { FormElementSizeVariant } from '../types/FormElementSizeVariant';
+export declare const getPaperSizeToFormElement: (size: FormElementSizeVariant) => PaperProps['radius'];

package/__inner__/esm/utils/getPaperSizeToFormElement.js

@@ -0,0 +1,8 @@
+var matchPaperSizeToFormElement = {
+    '2xs': 's',
+    xs: 's',
+    s: 'l',
+    m: 'l',
+    l: 'l',
+};
+export var getPaperSizeToFormElement = function (size) { return matchPaperSizeToFormElement === null || matchPaperSizeToFormElement === void 0 ? void 0 : matchPaperSizeToFormElement[size]; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "React component library",
   "files": [
     "*"
@@ -27,9 +27,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.42.0",
-    "@ozen-ui/logger": "0.42.0",
-    "@ozen-ui/icons": "0.42.0"
+    "@ozen-ui/fonts": "0.44.0",
+    "@ozen-ui/logger": "0.44.0",
+    "@ozen-ui/icons": "0.44.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",