@inceptionbg/iui 2.0.11 → 2.0.13

package/src/styles/components/_button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../common/maps/buttonMaps' as buttonMaps;
 
 $btn-colors: (primary, neutral, danger);
 
@@ -6,19 +7,19 @@ $btn-colors: (primary, neutral, danger);
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 8px;
   border-radius: 100px;
   cursor: pointer;
   user-select: none;
   background: none;
-  transition: border-color 250ms, background-color 250ms;
+  transition:
+    border-color 250ms,
+    background-color 250ms;
 
   @each $key in $btn-colors {
     &.#{$key} {
       color: var(--#{$key}-600);
       &.solid {
         background-color: var(--#{$key});
-        border-color: var(--#{$key});
       }
       &.outlined {
         border-color: var(--#{$key}-600);
@@ -43,12 +44,12 @@ $btn-colors: (primary, neutral, danger);
     }
   }
 
-  &:not(.simple) {
-    border: 1px solid var(--neutral-300);
-  }
   &.solid {
     color: var(--text-inverse);
   }
+  &.outlined {
+    border: 1px solid var(--neutral-300);
+  }
   &:disabled {
     opacity: 0.5;
     cursor: default;
@@ -59,45 +60,19 @@ $btn-colors: (primary, neutral, danger);
 }
 
 ///// Text Button /////
-$text-button-sizes: (
-  xs: (
-    font-size: 10px,
-    svg: 12px,
-    padding: 4px 10px,
-    gap: 6px,
-  ),
-  s: (
-    font-size: 12px,
-    svg: 14px,
-    padding: 6px 12px,
-  ),
-  m: (
-    font-size: 14px,
-    svg: 16px,
-    padding: 8px 14px,
-  ),
-  l: (
-    font-size: 16px,
-    svg: 20px,
-    padding: 12px 18px,
-  ),
-);
 
 .iui-text-btn {
-  // letter-spacing: 0.4px;
   font-weight: 600;
   white-space: nowrap;
+  gap: 8px;
 
   // Sizes
-  @each $size, $vars in $text-button-sizes {
+  @each $size, $vars in buttonMaps.$text-button-sizes {
     &.#{$size} {
       font-size: map.get($vars, font-size);
       padding: map.get($vars, padding);
       gap: map.get($vars, gap);
-
-      @if map.has-key($vars, height) {
-        height: map.get($vars, height);
-      }
+      height: map.get($vars, height);
       svg {
         height: map.get($vars, svg);
         width: map.get($vars, svg);
@@ -107,23 +82,9 @@ $text-button-sizes: (
 }
 
 ///// Icon Button /////
-$icon-button-sizes: (
-  s: (
-    size: 32px,
-    svg: 16px,
-  ),
-  m: (
-    size: 40px,
-    svg: 20px,
-  ),
-  l: (
-    size: 44px,
-    svg: 24px,
-  ),
-);
 
 .iui-icon-btn {
-  @each $size, $vars in $icon-button-sizes {
+  @each $size, $vars in buttonMaps.$icon-button-sizes {
     &.#{$size} {
       min-height: map.get($vars, size);
       min-width: map.get($vars, size);

package/src/styles/components/_buttonSplit.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../common/maps/buttonMaps' as buttonMaps;
+
+.iui-split-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  transition:
+    border-color 250ms,
+    background-color 250ms;
+  .iui-btn-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    white-space: nowrap;
+    gap: 8px;
+  }
+  .btn-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 2px solid var(--neutral-200);
+  }
+
+  &.solid {
+    background-color: var(--primary);
+    color: var(--text-inverse);
+    &:not(:disabled) {
+      .iui-btn-content,
+      .btn-actions {
+        &:hover,
+        &:active,
+        &.active {
+          background-color: var(--primary-600);
+        }
+      }
+      &:focus-visible {
+        box-shadow: 0px 0px 1px 3px var(--primary-200);
+      }
+    }
+  }
+  &.outlined {
+    border: 1px solid var(--neutral-300);
+    &:not(:disabled) {
+      .iui-btn-content,
+      .btn-actions {
+        &:hover,
+        &:active,
+        &.active {
+          background-color: var(--neutral-100);
+        }
+      }
+      &:focus-visible {
+        box-shadow: 0px 0px 1px 3px var(--neutral-200);
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  &:not(:disabled):active {
+    transform: translateY(2px);
+  }
+  // Sizes
+  @each $size, $vars in buttonMaps.$text-button-sizes {
+    &.#{$size} {
+      .iui-btn-content {
+        font-size: map.get($vars, font-size);
+        padding: map.get($vars, padding);
+        gap: map.get($vars, gap);
+        height: map.get($vars, height);
+      }
+      .btn-actions {
+        height: map.get($vars, height);
+        width: map.get($vars, height);
+      }
+      svg {
+        height: map.get($vars, svg);
+        width: map.get($vars, svg);
+      }
+    }
+  }
+}

package/src/styles/components/_header.scss

@@ -21,6 +21,7 @@
   }
 }
 
+///// Modules /////
 .module-name {
   display: flex;
   align-items: center;
@@ -32,15 +33,25 @@
     background-color: var(--neutral-hover);
   }
 }
-.module-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  .menu-item-label {
-    font-weight: 600;
+.modules-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 8px !important;
+  @media #{bp.$mobile} {
+    grid-template-columns: 1fr;
+  }
+  .module-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    .menu-item-label {
+      font-weight: 600;
+      white-space: pre-line;
+      text-align: center;
+    }
   }
 }
 .module-item .menu-item-icon,
@@ -59,6 +70,7 @@
   }
 }
 
+///// User Box /////
 .user-box {
   display: flex;
   align-items: center;

package/src/styles/components/_list.scss

@@ -0,0 +1,41 @@
+.iui-list {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .iui-list-item {
+    border: var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    p {
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .iui-list-item-desc {
+      display: flex;
+      line-height: 1.5;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--neutral);
+      margin-top: 4px;
+      white-space: pre-line;
+    }
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    &:not(.disabled) {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--neutral-hover);
+      }
+      &.active {
+        background-color: var(--primary);
+        color: var(--text-inverse);
+        .iui-list-item-desc {
+          color: var(--neutral-300);
+        }
+      }
+    }
+  }
+}

package/src/styles/components/_loader.scss

@@ -35,8 +35,10 @@
 }
 
 .empty-loader {
-  height: 60px;
   width: 100%;
+  .loader {
+    min-height: fit-content;
+  }
 }
 
 .full-page-loader {

package/src/styles/components/_menu.scss

@@ -22,6 +22,24 @@
 }
 
 .iui-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  user-select: none;
+  .menu-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text);
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+  .menu-item-label {
+    width: 100%;
+  }
   &.clickable:hover:not(:disabled):not(.disabled):not(.active) {
     background-color: var(--neutral-hover);
   }
@@ -29,30 +47,13 @@
     transition: none;
     background-color: var(--primary);
     color: var(--text-inverse);
-    .menu-item-content .menu-item-icon {
+    .menu-item-icon {
       color: var(--text-inverse);
     }
   }
   &.with-devider:not(:last-child) {
     border-bottom: var(--border);
   }
-  .menu-item-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    user-select: none;
-    .menu-item-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text);
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-    }
-  }
   .menu-item-badge {
     top: -3px;
     right: -3px;

package/src/styles/components/_print.scss

@@ -1,14 +1,6 @@
-.iui-print-dialog {
-  position: absolute;
-  z-index: 2000;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  min-height: 100vh;
-  width: 100%;
-  animation: fade-in 200ms forwards;
-  & > .content {
+.iui-print {
+  padding: 0 !important;
+  & > .print-content {
     background: #fefefe;
     padding: 10px 50px 60px 50px;
     p,
@@ -24,46 +16,17 @@
       margin-bottom: 5px;
     }
   }
-  @media print {
-    .content {
-      padding: 0;
-    }
-  }
-}
-.iui-print-actions {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 50px;
-  background-color: #fefefe;
-  box-shadow: var(--container-shadow);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .print-table {
-  @media print and (orientation: landscape) {
-    width: 842pt;
-  }
-  @media print and (orientation: portrait) {
-    width: 595pt;
-  }
-  // font-size: 10pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
   thead tr {
     background: #f1f1f1;
   }
-  th {
-    padding: 5px;
-    border: 1px solid silver;
-    p {
-      // font-size: 10pt;
-      padding: 4px 8px !important;
-    }
-  }
+  th,
   td {
-    padding: 3px;
+    padding: 4px;
     border: 1px solid silver;
   }
 }
@@ -72,14 +35,41 @@
   @page {
     margin: 6.5mm;
   }
+
+  @media (orientation: landscape) {
+    .iui-print {
+      width: 842pt;
+    }
+  }
+  @media (orientation: portrait) {
+    .iui-print {
+      width: 595pt;
+    }
+  }
+  .pullover {
+    position: static !important;
+    overflow: visible !important;
+  }
+  .iui-print {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    background: white !important;
+    overflow: visible !important;
+    .print-content {
+      padding: 0 !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
   #root,
   .no-print {
-    display: none;
+    display: none !important;
   }
   body {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-    //   overflow: visible !important;
+    overflow: visible !important;
   }
   tbody td {
     white-space: pre-wrap !important;

package/src/styles/components/_progressBar.scss

@@ -0,0 +1,83 @@
+.progress-bar-container {
+  width: 100%;
+  max-width: 400px;
+  margin: auto;
+}
+
+.progress-label {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: var(--text);
+}
+
+.progress-bar-bg {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  background: var(--neutral-200);
+  border-radius: 16px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-bar-fill {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 100%);
+  transition: width 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  overflow: hidden;
+
+  // Subtle shimmer animation to show activity
+  &.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 80%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      transparent 100%
+    );
+    animation: shimmer 2s ease-in-out infinite;
+  }
+}
+
+.progress-bar-text {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--text);
+  border-radius: 32px;
+  padding: 0 8px;
+  pointer-events: none;
+  z-index: 1;
+  position: relative;
+
+  // White text overlay that shows only where progress bar is
+  &::after {
+    content: var(--progress-text, '');
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    clip-path: polygon(
+      0 0,
+      var(--progress-clip, 0%) 0%,
+      var(--progress-clip, 0%) 100%,
+      0 100%
+    );
+    transition: clip-path 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  }
+}

package/src/styles/components/_table.scss

@@ -2,19 +2,19 @@
 
 table {
   border-spacing: 0px;
-  border-collapse: collapse;
+  // border-collapse: collapse;
 }
 .iui-table {
   //// Header ////
   thead {
     z-index: 2;
-    background-color: var(--primary-100);
+    background-color: var(--neutral-100);
+    tr:first-child th {
+      border-top: var(--borderlight);
+    }
   }
   th {
     padding: 4px 12px;
-    border-left: var(--border);
-    border-right: var(--border);
-
     font-weight: bold;
     p {
       font-size: 12px;
@@ -33,22 +33,13 @@ table {
     top: 0;
     z-index: 1;
   }
-  .border-row {
-    background-color: var(--border-color);
-    height: 1px;
-    padding: 0;
-  }
 
   //// Body ////
-  // tbody.no-last-border tr:last-child td {
-  //   border: none;
-  // }
   // Row
   tr {
     scroll-snap-align: start;
   }
   tbody tr {
-    // border-bottom: var(--border);
     &.clickable:hover,
     &.selected {
       background-color: rgba(0, 0, 0, 0.05);
@@ -64,18 +55,14 @@ table {
   // Cell
   th,
   td {
-    // 1px solid #f2f4f7;
+    border-bottom: var(--border-light);
     // Cell colors
     &.secondary {
       background-color: rgba(0, 0, 0, 0.04);
-      // border-bottom: 1px solid #d3d3d3;
     }
   }
   td {
-    border: var(--border);
-    border-top: none;
     font-size: 14px;
-    box-sizing: border-box;
     height: 48px;
     padding: 6px 12px;
     &.s {
@@ -96,7 +83,6 @@ table {
     align-items: center;
     justify-content: center;
     padding: 0 4px;
-    // gap: 8px;
   }
 
   //// Footer ////
@@ -106,7 +92,6 @@ table {
     width: 100%;
     padding: 8px;
     font-size: var(--fs-m);
-    box-sizing: border-box;
     .pagination {
       display: flex;
       align-items: center;
@@ -149,6 +134,13 @@ table {
   }
 
   @media #{bp.$landscape} {
+    td,
+    th {
+      border-right: var(--border-light);
+      &:first-child:not(.not-first-cell) {
+        border-left: var(--border-light);
+      }
+    }
     .select-col,
     .actions-col {
       padding: 0;
@@ -168,7 +160,6 @@ table {
     }
     tr {
       padding-bottom: 20px;
-      border-top: var(--border);
     }
     td {
       display: flex;
@@ -210,6 +201,9 @@ table {
   }
 }
 
+.table-sort-item {
+  flex-direction: row-reverse;
+}
 // .dual-list-container {
 //   .dual-list-content {
 //     display: grid;
@@ -217,7 +211,7 @@ table {
 //     gap: 12px;
 //   }
 //   .list-box {
-//     border: var(--border);
+//     border: var(--border-light);
 //     border-radius: 16px;
 //     padding: 10px;
 //     user-select: none;

package/src/styles/variables/_variables.scss

@@ -82,6 +82,7 @@
   /////// OTHER ////////
   --header-height: 60px;
   --border: 1px solid var(--border-color);
+  --border-light: 1px solid var(--neutral-200);
   --sidebar-width: 260px;
   --sidebar-collapsed-width: 54px;