@oliasoft-open-source/react-ui-library 4.0.0-beta-44 → 4.0.0-beta-45

package/dist/global.css

@@ -1571,17 +1571,17 @@ html[data-theme='dark'] {
   margin-top: -2px;
   margin-bottom: -2px;
 }
-._wrapper_19hcn_1 {
+._wrapper_nwprz_1 {
   display: inline-flex;
   position: relative;
 }
-._badge_19hcn_5 {
+._badge_nwprz_5 {
   --size-badge: var(--line-height);
   background: var(--color-background-primary);
   display: inline-block;
   position: static;
 }
-._badge_19hcn_5._label_19hcn_11 {
+._badge_nwprz_5._label_nwprz_11 {
   line-height: var(--size-badge);
   min-width: var(--size-badge);
   padding: 0 var(--padding-xxs);
@@ -1593,23 +1593,23 @@ html[data-theme='dark'] {
   font-weight: bold;
   letter-spacing: normal;
 }
-._badge_19hcn_5._label_19hcn_11._dark_19hcn_23 {
+._badge_nwprz_5._label_nwprz_11._dark_nwprz_23 {
   color: #fff;
 }
-._badge_19hcn_5._label_19hcn_11._light_19hcn_26 {
+._badge_nwprz_5._label_nwprz_11._light_nwprz_26 {
   color: rgba(0, 0, 0, 0.6);
 }
-._badge_19hcn_5._small_19hcn_29 {
-  --size-badge: var(--size-xs);
-  font-size: var(--font-size-xs);
+._badge_nwprz_5._small_nwprz_29 {
+  --size-badge: var(--font-size-sm);
+  font-size: calc(var(--size-badge) * 0.8);
 }
-._badge_19hcn_5._dot_19hcn_33 {
+._badge_nwprz_5._dot_nwprz_33 {
   width: 6px;
   height: 6px;
   border-radius: 100%;
   min-width: 0;
 }
-._badge_19hcn_5._hasChildren_19hcn_39 {
+._badge_nwprz_5._hasChildren_nwprz_39 {
   position: absolute;
   right: 0;
   top: 0;
@@ -1840,80 +1840,80 @@ html[data-theme='dark'] {
 ._footer_ch65x_47 button:not(:last-child) {
   margin-right: var(--padding-sm);
 }
-._inputInTable_1v4te_1 {
+._inputInTable_11j5h_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1v4te_1:not(:hover) {
+._inputInTable_11j5h_1:not(:hover) {
   border-color: transparent;
 }
-._inputInTable_1v4te_1:not(:focus) {
+._inputInTable_11j5h_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1v4te_13 {
+._inputHover_11j5h_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1v4te_18 {
+._inputFocus_11j5h_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1v4te_25,
-._inputWarning_1v4te_26 {
+._inputError_11j5h_25,
+._inputWarning_11j5h_26 {
   position: relative;
 }
-._inputError_1v4te_25 {
+._inputError_11j5h_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
 }
-._inputError_1v4te_25:hover {
+._inputError_11j5h_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1v4te_25:focus {
+._inputError_11j5h_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1v4te_26 {
+._inputWarning_11j5h_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);
 }
-._inputWarning_1v4te_26:hover {
+._inputWarning_11j5h_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1v4te_26:focus {
+._inputWarning_11j5h_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1v4te_61 {
+._inputDisabled_11j5h_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1v4te_67 {
+._hideScrollbars_11j5h_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1v4te_67::-webkit-scrollbar {
+._hideScrollbars_11j5h_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -1931,37 +1931,37 @@ html[data-theme='dark'] {
   --color-border-drawer-tab: var(--color-primary-750);
   --color-background-drawer-handle-hover: rgba(255, 255, 255, 0.1);
 }
-._inline_1v4te_92 {
+._inline_11j5h_92 {
   position: relative;
 }
-._inline_1v4te_92._left_1v4te_95 {
+._inline_11j5h_92._left_11j5h_95 {
   order: -1;
 }
-._inline_1v4te_92._right_1v4te_98 {
+._inline_11j5h_92._right_11j5h_98 {
   order: 9999;
 }
-._fixed_1v4te_101 {
+._fixed_11j5h_101 {
   position: fixed;
   top: 0;
   bottom: 0;
   z-index: var(--zindex-drawer);
 }
-._fixed_1v4te_101._left_1v4te_95 {
+._fixed_11j5h_101._left_11j5h_95 {
   left: 0;
 }
-._fixed_1v4te_101._right_1v4te_98 {
+._fixed_11j5h_101._right_11j5h_98 {
   right: 0;
 }
-._left_1v4te_95 ._border_1v4te_113 {
+._left_11j5h_95 ._border_11j5h_113 {
   border-right: 1px solid var(--color-border);
 }
-._right_1v4te_98 ._border_1v4te_113 {
+._right_11j5h_98 ._border_11j5h_113 {
   border-left: 1px solid var(--color-border);
 }
-._shadow_1v4te_119 {
+._shadow_11j5h_119 {
   box-shadow: var(--shadow-layer);
 }
-._drawerContent_1v4te_122 {
+._drawerContent_11j5h_122 {
   overflow-x: hidden;
   overflow-y: auto;
   max-height: 100%;
@@ -1973,40 +1973,40 @@ html[data-theme='dark'] {
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._isResizing_1v4te_134 ._drawerContent_1v4te_122 {
+._isResizing_11j5h_134 ._drawerContent_11j5h_122 {
   transition: none;
 }
 @media print {
-  ._drawerContent_1v4te_122 {
+  ._drawerContent_11j5h_122 {
     background: transparent !important;
   }
 }
-._drawerContent_1v4te_122::-webkit-scrollbar {
+._drawerContent_11j5h_122::-webkit-scrollbar {
   display: none;
 }
-._toggleButton_1v4te_145 {
+._toggleButton_11j5h_145 {
   transition: transform 0.4s;
   display: inline-block;
   transform: rotate(180deg);
   position: absolute;
   z-index: calc(var(--zindex-drawer) + 3);
 }
-._left_1v4te_95 ._toggleButton_1v4te_145 {
+._left_11j5h_95 ._toggleButton_11j5h_145 {
   right: calc(var(--size) / -2);
 }
-._right_1v4te_98 ._toggleButton_1v4te_145 {
+._right_11j5h_98 ._toggleButton_11j5h_145 {
   left: calc(var(--size) / -2);
 }
-._toggleButton_1v4te_145._top_1v4te_158 {
+._toggleButton_11j5h_145._top_11j5h_158 {
   top: var(--padding);
 }
-._toggleButton_1v4te_145._bottom_1v4te_161 {
+._toggleButton_11j5h_145._bottom_11j5h_161 {
   bottom: var(--padding);
 }
-._toggleButton_1v4te_145._toggleButtonOpen_1v4te_164 {
+._toggleButton_11j5h_145._toggleButtonOpen_11j5h_164 {
   transform: rotate(0deg);
 }
-._tabs_1v4te_167 {
+._tabs_11j5h_167 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2016,13 +2016,13 @@ html[data-theme='dark'] {
   border-left: 1px solid var(--color-border);
   border-right: 1px solid var(--color-border);
 }
-._left_1v4te_95 ._tabs_1v4te_167 {
+._left_11j5h_95 ._tabs_11j5h_167 {
   right: 0;
 }
-._right_1v4te_98 ._tabs_1v4te_167 {
+._right_11j5h_98 ._tabs_11j5h_167 {
   left: 0;
 }
-._tabs_1v4te_167 ._tab_1v4te_167 {
+._tabs_11j5h_167 ._tab_11j5h_167 {
   font-size: var(--size-sm);
   height: var(--size-drawer-tabs);
   width: var(--size-drawer-tabs);
@@ -2034,39 +2034,42 @@ html[data-theme='dark'] {
   transition: color 0.3s, background-color 0.3s;
   border: 1px solid var(--color-border-drawer-tab);
 }
-._left_1v4te_95 ._tabs_1v4te_167 ._tab_1v4te_167 {
+._left_11j5h_95 ._tabs_11j5h_167 ._tab_11j5h_167 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._left_1v4te_95 ._tabs_1v4te_167 ._tab_1v4te_167._active_1v4te_199 {
+._left_11j5h_95 ._tabs_11j5h_167 ._tab_11j5h_167._active_11j5h_199 {
   border-left-color: transparent;
 }
-._right_1v4te_98 ._tabs_1v4te_167 ._tab_1v4te_167 {
+._right_11j5h_98 ._tabs_11j5h_167 ._tab_11j5h_167 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._right_1v4te_98 ._tabs_1v4te_167 ._tab_1v4te_167._active_1v4te_199 {
+._right_11j5h_98 ._tabs_11j5h_167 ._tab_11j5h_167._active_11j5h_199 {
   border-right-color: transparent;
 }
-._tabs_1v4te_167 ._tab_1v4te_167:not(._active_1v4te_199) {
+._tabs_11j5h_167 ._tab_11j5h_167:not(._active_11j5h_199) {
   color: var(--color-text-primary);
   background-color: var(--color-background-drawer-tab) !important;
 }
-._tabs_1v4te_167 ._tab_1v4te_167:not(._active_1v4te_199):hover {
+._tabs_11j5h_167 ._tab_11j5h_167:not(._active_11j5h_199):hover {
   color: var(--color-text);
   background-color: var(--color-background-drawer-tab-hover) !important;
 }
-._tabs_1v4te_167 ._tab_1v4te_167._active_1v4te_199 {
+._tabs_11j5h_167 ._tab_11j5h_167._active_11j5h_199 {
   color: var(--color-text);
   border-color: var(--color-border);
 }
-._left_1v4te_95 ._tabsContent_1v4te_221 {
+._tabs_11j5h_167 ._tab_11j5h_167 svg {
+  stroke-width: 1.125;
+}
+._left_11j5h_95 ._tabsContent_11j5h_224 {
   padding-right: calc(var(--size-drawer-tabs) - 1px);
 }
-._right_1v4te_98 ._tabsContent_1v4te_221 {
+._right_11j5h_98 ._tabsContent_11j5h_224 {
   padding-left: calc(var(--size-drawer-tabs) - 1px);
 }
-._resizeHandle_1v4te_227 {
+._resizeHandle_11j5h_230 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2079,18 +2082,18 @@ html[data-theme='dark'] {
   font-size: var(--font-size-sm);
   transition: all 0.2s;
 }
-._resizeHandle_1v4te_227:hover {
+._resizeHandle_11j5h_230:hover {
   background: var(--color-background-drawer-handle-hover);
   color: var(--color-text-primary);
 }
-._resizeHandle_1v4te_227:active {
+._resizeHandle_11j5h_230:active {
   background: var(--color-text-primary);
   color: white;
 }
-._left_1v4te_95 ._resizeHandle_1v4te_227 {
+._left_11j5h_95 ._resizeHandle_11j5h_230 {
   right: 0;
 }
-._right_1v4te_98 ._resizeHandle_1v4te_227 {
+._right_11j5h_98 ._resizeHandle_11j5h_230 {
   left: 0;
 }
 ._empty_fe425_1 {

package/dist/index.d.ts

@@ -274,7 +274,6 @@ export declare enum IconType {
     LIBRARY = "library",
     ADD = "add",
     DRAG = "drag",
-    DRAG_HORIZONTAL = "drag horizontal",
     HELP = "help",
     NOTIFICATION = "notification",
     MENU = "menu",
@@ -1598,7 +1597,7 @@ export declare enum Theme {
     INHERIT = "inherit"
 }
 
-export declare type TIconType = 'library' | 'add' | 'drag' | 'drag horizontal' | 'help' | 'notification' | 'menu' | 'edit' | 'fast forward' | 'indent' | 'star' | 'list' | 'settings' | 'check' | 'lock' | 'unlock' | 'close' | 'success' | 'warning' | 'error' | 'info' | 'left' | 'collapse' | 'expand' | 'sort ascending' | 'sort descending' | 'fast backward' | 'chevron down' | 'chevron right' | 'chevron left' | 'chevron double left' | 'chevron double right';
+export declare type TIconType = 'library' | 'add' | 'drag' | 'help' | 'notification' | 'menu' | 'edit' | 'fast forward' | 'indent' | 'star' | 'list' | 'settings' | 'check' | 'lock' | 'unlock' | 'close' | 'success' | 'warning' | 'error' | 'info' | 'left' | 'collapse' | 'expand' | 'sort ascending' | 'sort descending' | 'fast backward' | 'chevron down' | 'chevron right' | 'chevron left' | 'chevron double left' | 'chevron double right';
 
 export declare type TInputReaderMethods = 'readAsText' | 'readAsArrayBuffer' | 'readAsDataURL' | 'readAsBinaryString';
 

package/dist/index.html

@@ -1 +1 @@
-<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-e556125a.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-8f561368.css"></head><body><div id="content"></div></body>
+<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-5b854130.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-d9ac4c76.css"></head><body><div id="content"></div></body>

package/dist/index.js

@@ -1102,7 +1102,6 @@ var IconType = /* @__PURE__ */ ((IconType2) => {
   IconType2["LIBRARY"] = "library";
   IconType2["ADD"] = "add";
   IconType2["DRAG"] = "drag";
-  IconType2["DRAG_HORIZONTAL"] = "drag horizontal";
   IconType2["HELP"] = "help";
   IconType2["NOTIFICATION"] = "notification";
   IconType2["MENU"] = "menu";
@@ -11829,14 +11828,14 @@ const isStringNumberOrNode = (value) => {
 const getType = (item2) => {
   return Array.isArray(item2) ? "array" : typeof item2;
 };
-const wrapper$3 = "_wrapper_19hcn_1";
-const badge = "_badge_19hcn_5";
-const label$9 = "_label_19hcn_11";
-const dark = "_dark_19hcn_23";
-const light = "_light_19hcn_26";
-const small$b = "_small_19hcn_29";
-const dot = "_dot_19hcn_33";
-const hasChildren = "_hasChildren_19hcn_39";
+const wrapper$3 = "_wrapper_nwprz_1";
+const badge = "_badge_nwprz_5";
+const label$9 = "_label_nwprz_11";
+const dark = "_dark_nwprz_23";
+const light = "_light_nwprz_26";
+const small$b = "_small_nwprz_29";
+const dot = "_dot_nwprz_33";
+const hasChildren = "_hasChildren_nwprz_39";
 const styles$J = {
   wrapper: wrapper$3,
   badge,
@@ -14064,30 +14063,30 @@ const Dialog = ({ dialog: dialog2 }) => {
     }
   );
 };
-const inputInTable$a = "_inputInTable_1v4te_1";
-const inputHover$a = "_inputHover_1v4te_13";
-const inputFocus$a = "_inputFocus_1v4te_18";
-const inputError$a = "_inputError_1v4te_25";
-const inputWarning$a = "_inputWarning_1v4te_26";
-const inputDisabled$a = "_inputDisabled_1v4te_61";
-const hideScrollbars$a = "_hideScrollbars_1v4te_67";
-const inline$2 = "_inline_1v4te_92";
-const left$2 = "_left_1v4te_95";
-const right$6 = "_right_1v4te_98";
-const fixed$1 = "_fixed_1v4te_101";
-const border$1 = "_border_1v4te_113";
-const shadow = "_shadow_1v4te_119";
-const drawerContent = "_drawerContent_1v4te_122";
-const isResizing = "_isResizing_1v4te_134";
-const toggleButton = "_toggleButton_1v4te_145";
-const top = "_top_1v4te_158";
-const bottom = "_bottom_1v4te_161";
-const toggleButtonOpen = "_toggleButtonOpen_1v4te_164";
-const tabs$1 = "_tabs_1v4te_167";
-const tab$1 = "_tab_1v4te_167";
-const active$4 = "_active_1v4te_199";
-const tabsContent = "_tabsContent_1v4te_221";
-const resizeHandle = "_resizeHandle_1v4te_227";
+const inputInTable$a = "_inputInTable_11j5h_1";
+const inputHover$a = "_inputHover_11j5h_13";
+const inputFocus$a = "_inputFocus_11j5h_18";
+const inputError$a = "_inputError_11j5h_25";
+const inputWarning$a = "_inputWarning_11j5h_26";
+const inputDisabled$a = "_inputDisabled_11j5h_61";
+const hideScrollbars$a = "_hideScrollbars_11j5h_67";
+const inline$2 = "_inline_11j5h_92";
+const left$2 = "_left_11j5h_95";
+const right$6 = "_right_11j5h_98";
+const fixed$1 = "_fixed_11j5h_101";
+const border$1 = "_border_11j5h_113";
+const shadow = "_shadow_11j5h_119";
+const drawerContent = "_drawerContent_11j5h_122";
+const isResizing = "_isResizing_11j5h_134";
+const toggleButton = "_toggleButton_11j5h_145";
+const top = "_top_11j5h_158";
+const bottom = "_bottom_11j5h_161";
+const toggleButtonOpen = "_toggleButtonOpen_11j5h_164";
+const tabs$1 = "_tabs_11j5h_167";
+const tab$1 = "_tab_11j5h_167";
+const active$4 = "_active_11j5h_199";
+const tabsContent = "_tabsContent_11j5h_224";
+const resizeHandle = "_resizeHandle_11j5h_230";
 const styles$B = {
   inputInTable: inputInTable$a,
   inputHover: inputHover$a,
@@ -14117,7 +14116,7 @@ const styles$B = {
 const TabBadge = ({ badge: badge2, children }) => {
   if (!badge2)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: badge2.toString(), children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, margin: 4, title: badge2.toString(), children });
 };
 const DrawerTabs = ({
   tabs: tabs2,
@@ -16136,12 +16135,12 @@ reactResizable.exports = function() {
 };
 var Resizable = reactResizable.exports.Resizable = Resizable$2.default;
 reactResizable.exports.ResizableBox = ResizableBox$1.default;
-const TABS_WIDTH = 37;
+const TABS_WIDTH = 35;
 const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = forwardRef(
   (props, ref2) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$B.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG_HORIZONTAL }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$B.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({