@oliasoft-open-source/react-ui-library 4.0.0-beta-14 → 4.0.0-beta-17

package/dist/global.css

@@ -567,8 +567,8 @@ a {
   --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.1);
   --shadow-layer: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
   --color-text: var(--color-neutral-900);
-  --color-text-muted: var(--color-neutral-550);
-  --color-text-faint: var(--color-neutral-300);
+  --color-text-muted: var(--color-neutral-650);
+  --color-text-faint: var(--color-neutral-400);
   --color-text-error: var(--color-error-650);
   --color-text-warning: var(--color-warning-650);
   --color-text-success: var(--color-success-650);
@@ -601,8 +601,8 @@ a {
 
 html[data-theme='dark'] {
   color-scheme: dark;
-  --color-text: var(--color-neutral-150);
-  --color-text-muted: var(--color-neutral-400);
+  --color-text: var(--color-neutral-100);
+  --color-text-muted: var(--color-neutral-350);
   --color-text-faint: var(--color-neutral-600);
   --color-text-primary: var(--color-primary-450);
   --color-text-primary-active: var(--color-primary-350);
@@ -700,6 +700,11 @@ body {
   line-height: 1.4285em;
   font-family: var(--font-family);
   font-size: var(--font-size);
+  font-variant-numeric: tabular-nums;
+}
+
+* {
+  font-variant-numeric: tabular-nums;
 }
 
 .dark {
@@ -9468,22 +9473,22 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
 ._disabledPointerEvents_1mfuf_203 {
   pointer-events: none;
 }
-._clickableRow_1sqxy_1 {
+._clickableRow_vlcbs_1 {
   cursor: pointer;
 }
-._hoverableRow_1sqxy_4:not(._rowActive_1sqxy_4):hover,
-._clickableRow_1sqxy_1:not(._rowActive_1sqxy_4):hover {
+._hoverableRow_vlcbs_4:not(._rowActive_vlcbs_4):hover,
+._clickableRow_vlcbs_1:not(._rowActive_vlcbs_4):hover {
   background-color: var(--color-background-listitem-hover) !important;
 }
-._expandableRow_1sqxy_8._flush_1sqxy_8 {
+._expandableRow_vlcbs_8._flush_vlcbs_8 {
   padding: 0 !important;
   height: auto !important;
 }
-._rowActive_1sqxy_4 {
+._rowActive_vlcbs_4 {
   position: relative;
   background-color: var(--color-background-listitem-active) !important;
 }
-._rowActive_1sqxy_4:after {
+._rowActive_vlcbs_4:after {
   content: '';
   position: absolute;
   left: 0;
@@ -9495,26 +9500,24 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   transition: background 0.3s;
   background: var(--color-background-primary);
 }
-._dragIconCell_1sqxy_28 {
+._dragIconCell_vlcbs_28 {
   width: var(--size);
   min-width: var(--size);
   position: relative;
 }
-._dragIcon_1sqxy_28 {
+._dragIcon_vlcbs_28 {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   inset: 0;
+  color: var(--color-text-faint);
 }
-._dragIcon_1sqxy_28 path {
-  stroke: var(--color-text-faint);
-}
-._dragIcon_1sqxy_28:hover path {
-  stroke: var(--color-text-primary-hover);
+._dragIcon_vlcbs_28:hover {
+  color: var(--color-text-primary-hover);
 }
-._dragIcon_1sqxy_28:active path {
-  stroke: var(--color-text-primary-active);
+._dragIcon_vlcbs_28:active {
+  color: var(--color-text-primary-active);
 }
 ._tabs_b0egn_1 {
   display: flex;
@@ -10434,7 +10437,7 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   --color-background-toggle: rgba(255, 255, 255, 0.2);
   --color-background-toggle-hover: rgba(255, 255, 255, 0.3);
 }
-._toggle_2zca0_9 {
+._toggle_1ia7o_9 {
   --size-toggle: var(--size-xs);
   position: relative;
   display: inline-flex;
@@ -10450,12 +10453,12 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   min-width: var(--size-toggle);
   margin: calc((var(--size) - var(--size-toggle)) / 2) 0;
 }
-._toggle_2zca0_9._small_2zca0_25 {
+._toggle_1ia7o_9._small_1ia7o_25 {
   --size-toggle: calc(var(--size-xs) - 4px);
   margin: calc((var(--size-sm) - var(--size-toggle)) / 2) 0;
   font-size: var(--font-size-sm);
 }
-._toggle_2zca0_9 input {
+._toggle_1ia7o_9 input {
   width: calc(var(--size-toggle) * 2);
   height: var(--size-toggle);
   cursor: pointer;
@@ -10472,7 +10475,7 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   line-height: 1.15;
   margin: 0;
 }
-._toggle_2zca0_9 label {
+._toggle_1ia7o_9 label {
   min-height: var(--size-toggle);
   padding-left: calc((var(--size-toggle) * 2) + var(--spacing-xs));
   transition: color 0.1s ease;
@@ -10481,13 +10484,16 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   display: block;
   outline: 0;
 }
-._toggle_2zca0_9 label:before,
-._toggle_2zca0_9 label:after {
+._toggle_1ia7o_9 label:empty {
+  padding-left: calc(var(--size-toggle) * 2);
+}
+._toggle_1ia7o_9 label:before,
+._toggle_1ia7o_9 label:after {
   display: block;
   position: absolute;
   content: '';
 }
-._toggle_2zca0_9 label:before {
+._toggle_1ia7o_9 label:before {
   height: var(--size-toggle);
   border-radius: calc(var(--size-toggle) / 2);
   z-index: 1;
@@ -10499,43 +10505,44 @@ tbody ._staticCell_1mfuf_116 ._staticCellContent_1mfuf_119 {
   top: 0;
   transition: background 0.3s ease, border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
 }
-._toggle_2zca0_9 label:after {
+._toggle_1ia7o_9 label:after {
   height: calc(var(--size-toggle) - 4px);
   width: calc(var(--size-toggle) - 4px);
   border-radius: 50%;
   left: 2px;
-  top: 2px;
+  top: 50%;
+  transform: translateY(-50%);
   box-shadow: var(--shadow-button);
   background: white;
   opacity: 1;
   z-index: 2;
   transition: background 0.3s ease, left 0.3s ease;
 }
-._toggle_2zca0_9 input:hover ~ label:before {
+._toggle_1ia7o_9 input:hover ~ label:before {
   background: var(--color-background-toggle-hover);
 }
-._toggle_2zca0_9 input:checked ~ label:before {
+._toggle_1ia7o_9 input:checked ~ label:before {
   border-color: rgba(34, 36, 38, 0.35);
   background-color: var(--color-background-button-primary);
 }
-._toggle_2zca0_9 input:checked ~ label:after {
+._toggle_1ia7o_9 input:checked ~ label:after {
   left: calc(var(--size-toggle) + 2px);
 }
-._toggle_2zca0_9 input:checked:hover ~ label:before {
+._toggle_1ia7o_9 input:checked:hover ~ label:before {
   background-color: var(--color-background-button-primary-hover);
 }
-._toggle_2zca0_9._disabled_2zca0_99 {
+._toggle_1ia7o_9._disabled_1ia7o_103 {
   cursor: default;
   pointer-events: none;
   color: var(--color-text-muted);
 }
-._toggle_2zca0_9._disabled_2zca0_99 label:before {
+._toggle_1ia7o_9._disabled_1ia7o_103 label:before {
   background-color: var(--color-background-disabled);
 }
-._toggle_2zca0_9._disabled_2zca0_99 input:checked ~ label:before {
+._toggle_1ia7o_9._disabled_1ia7o_103 input:checked ~ label:before {
   background-color: var(--color-text-faint);
 }
-._noMargin_2zca0_110 {
+._noMargin_1ia7o_114 {
   margin: 0;
 }
 :root {

package/dist/index.js

@@ -2795,6 +2795,15 @@ function TbItalic(props) {
 function TbKey(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z" } }, { "tag": "path", "attr": { "d": "M15 9h.01" } }] })(props);
 }
+function TbLayoutColumns(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" } }, { "tag": "path", "attr": { "d": "M12 4l0 16" } }] })(props);
+}
+function TbLayoutGrid(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" } }, { "tag": "path", "attr": { "d": "M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" } }, { "tag": "path", "attr": { "d": "M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" } }, { "tag": "path", "attr": { "d": "M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" } }] })(props);
+}
+function TbLayoutRows(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" } }, { "tag": "path", "attr": { "d": "M4 12l16 0" } }] })(props);
+}
 function TbLinkOff(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M9 15l3 -3m2 -2l1 -1" } }, { "tag": "path", "attr": { "d": "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" } }, { "tag": "path", "attr": { "d": "M3 3l18 18" } }, { "tag": "path", "attr": { "d": "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" } }] })(props);
 }
@@ -2900,6 +2909,9 @@ function TbSortAscending(props) {
 function TbSortDescending(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M4 6l9 0" } }, { "tag": "path", "attr": { "d": "M4 12l7 0" } }, { "tag": "path", "attr": { "d": "M4 18l7 0" } }, { "tag": "path", "attr": { "d": "M15 15l3 3l3 -3" } }, { "tag": "path", "attr": { "d": "M18 6l0 12" } }] })(props);
 }
+function TbSquare(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" } }] })(props);
+}
 function TbStar(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" } }] })(props);
 }
@@ -2927,18 +2939,6 @@ function TbUsers(props) {
 function TbX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 6l-12 12" } }, { "tag": "path", "attr": { "d": "M6 6l12 12" } }] })(props);
 }
-function RiLayoutColumnLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M11 5H5V19H11V5ZM13 5V19H19V5H13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z" } }] })(props);
-}
-function RiLayoutGridLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM11 13H4V19H11V13ZM20 13H13V19H20V13ZM11 5H4V11H11V5ZM20 5H13V11H20V5Z" } }] })(props);
-}
-function RiLayoutRowLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11V5H5V11H19ZM19 13H5V19H19V13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z" } }] })(props);
-}
-function RiSquareLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z" } }] })(props);
-}
 function AiOutlineMinusSquare(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" } }, { "tag": "path", "attr": { "d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" } }] })(props);
 }
@@ -3081,16 +3081,16 @@ const NamedIcon = ({ icon: icon2 }) => {
       return /* @__PURE__ */ jsxRuntime.exports.jsx(TbDeviceLaptop, {});
     case "layout columns":
     case "columns":
-      return /* @__PURE__ */ jsxRuntime.exports.jsx(RiLayoutColumnLine, {});
+      return /* @__PURE__ */ jsxRuntime.exports.jsx(TbLayoutColumns, {});
     case "layout grid":
     case "grid":
-      return /* @__PURE__ */ jsxRuntime.exports.jsx(RiLayoutGridLine, {});
+      return /* @__PURE__ */ jsxRuntime.exports.jsx(TbLayoutGrid, {});
     case "layout rows":
     case "rows":
-      return /* @__PURE__ */ jsxRuntime.exports.jsx(RiLayoutRowLine, {});
+      return /* @__PURE__ */ jsxRuntime.exports.jsx(TbLayoutRows, {});
     case "layout single":
     case "square":
-      return /* @__PURE__ */ jsxRuntime.exports.jsx(RiSquareLine, {});
+      return /* @__PURE__ */ jsxRuntime.exports.jsx(TbSquare, {});
     case "link":
       return /* @__PURE__ */ jsxRuntime.exports.jsx(TbLink, {});
     case "list":
@@ -60420,13 +60420,13 @@ Cell.propTypes = {
   cell: cellShape,
   testId: propTypes$1.exports.string
 };
-const clickableRow = "_clickableRow_1sqxy_1";
-const hoverableRow = "_hoverableRow_1sqxy_4";
-const rowActive = "_rowActive_1sqxy_4";
-const expandableRow = "_expandableRow_1sqxy_8";
-const flush2 = "_flush_1sqxy_8";
-const dragIconCell = "_dragIconCell_1sqxy_28";
-const dragIcon = "_dragIcon_1sqxy_28";
+const clickableRow = "_clickableRow_vlcbs_1";
+const hoverableRow = "_hoverableRow_vlcbs_4";
+const rowActive = "_rowActive_vlcbs_4";
+const expandableRow = "_expandableRow_vlcbs_8";
+const flush2 = "_flush_vlcbs_8";
+const dragIconCell = "_dragIconCell_vlcbs_28";
+const dragIcon = "_dragIcon_vlcbs_28";
 const styles$6 = {
   clickableRow,
   hoverableRow,
@@ -62369,10 +62369,10 @@ const toast = ({ id: id2, message: message2, autoClose = 6e3, onClose }) => {
     type: toastType
   });
 };
-const toggle$1 = "_toggle_2zca0_9";
-const small = "_small_2zca0_25";
-const disabled = "_disabled_2zca0_99";
-const noMargin = "_noMargin_2zca0_110";
+const toggle$1 = "_toggle_1ia7o_9";
+const small = "_small_1ia7o_25";
+const disabled = "_disabled_1ia7o_103";
+const noMargin = "_noMargin_1ia7o_114";
 const styles$3 = {
   toggle: toggle$1,
   small,