@inceptionbg/iui 2.0.4 → 2.0.6

package/src/styles/common/helpers/_display.scss

@@ -0,0 +1,85 @@
+@use '../../variables/bp';
+
+.hidden {
+  display: none !important;
+}
+.block {
+  display: block !important;
+}
+.relative {
+  position: relative !important;
+}
+
+.flex {
+  display: flex;
+  &.column {
+    flex-direction: column;
+  }
+  &.center {
+    align-items: center;
+    justify-content: center;
+  }
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}
+.inline-flex {
+  display: inline-flex;
+}
+.flex-grow {
+  flex-grow: 1 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-3 {
+  gap: 1rem;
+}
+.gap-4 {
+  gap: 1.5rem;
+}
+.gap-5 {
+  gap: 3rem;
+}
+.gap-form {
+  gap: 16px 8px;
+}
+
+.grid {
+  display: grid;
+  &.auto-1 {
+    grid-template-columns: auto 1fr;
+  }
+  &.fr-2 {
+    grid-template-columns: repeat(2, 1fr);
+
+    @media #{bp.$mobile} {
+      grid-template-columns: 1fr;
+    }
+  }
+  &.fr-3 {
+    grid-template-columns: repeat(3, 1fr);
+
+    @media #{bp.$mobile} {
+      grid-template-columns: 1fr;
+    }
+  }
+  &.fr-4 {
+    grid-template-columns: repeat(4, 1fr);
+
+    @media #{bp.$mobile} {
+      grid-template-columns: 1fr;
+    }
+  }
+  &.fr-5 {
+    grid-template-columns: repeat(5, 1fr);
+
+    @media #{bp.$mobile} {
+      grid-template-columns: 1fr;
+    }
+  }
+}

package/src/styles/common/helpers/_size.scss

@@ -0,0 +1,25 @@
+.full-screen {
+  height: 100dvh !important;
+  width: 100vw !important;
+}
+.full-width {
+  width: 100% !important;
+}
+.half-width {
+  width: 50% !important;
+}
+.width-fit {
+  width: fit-content !important;
+}
+.w-300 {
+  width: 300px !important;
+}
+
+.full-height {
+  height: 100% !important;
+}
+
+.icon24 {
+  height: 24px !important;
+  width: 24px !important;
+}

package/src/styles/common/maps/_align.scss

@@ -0,0 +1,21 @@
+$aligns: (center, left, right);
+$justifies: (
+  around: space-around,
+  between: space-between,
+  evenly: space-evenly,
+);
+
+@each $key in $aligns {
+  .align-#{$key} {
+    align-items: $key !important;
+  }
+  .justify-#{$key} {
+    justify-content: $key !important;
+  }
+}
+
+@each $key, $value in $justifies {
+  .justify-#{$key} {
+    justify-content: $value !important;
+  }
+}

package/src/styles/common/maps/_info-types.scss

@@ -0,0 +1 @@
+$info-types: (success, info, warning, danger);

package/src/styles/common/maps/_spacing.scss

@@ -0,0 +1,78 @@
+// Margin and Padding
+$spacers: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.5rem,
+  5: 3rem,
+);
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $length in $spacers {
+    .#{$abbrev}-#{$size} {
+      #{$prop}: $length !important;
+    }
+    .#{$abbrev}t-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-top: $length !important;
+    }
+    .#{$abbrev}r-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-right: $length !important;
+    }
+    .#{$abbrev}b-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-bottom: $length !important;
+    }
+    .#{$abbrev}l-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-left: $length !important;
+    }
+  }
+}
+
+// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+@each $size, $length in $spacers {
+  @if $size != 0 {
+    .m-n#{$size} {
+      margin: -$length !important;
+    }
+    .mt-n#{$size},
+    .my-n#{$size} {
+      margin-top: -$length !important;
+    }
+    .mr-n#{$size},
+    .mx-n#{$size} {
+      margin-right: -$length !important;
+    }
+    .mb-n#{$size},
+    .my-n#{$size} {
+      margin-bottom: -$length !important;
+    }
+    .ml-n#{$size},
+    .mx-n#{$size} {
+      margin-left: -$length !important;
+    }
+  }
+}
+
+// Some special margin utils
+.m-auto {
+  margin: auto !important;
+}
+.mt-auto,
+.my-auto {
+  margin-top: auto !important;
+}
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+.mb-auto,
+.my-auto {
+  margin-bottom: auto !important;
+}
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}

package/src/styles/common/maps/_text.scss

@@ -0,0 +1,14 @@
+$aligns: (center, left, right, justify);
+$fs: (10, 12, 13, 15, 16, 18, 32);
+
+@each $key in $aligns {
+  .text-#{$key} {
+    text-align: $key !important;
+  }
+}
+
+@each $key in $fs {
+  .fs-#{$key} {
+    font-size: #{$key}px !important;
+  }
+}

package/src/styles/components/_accordions.scss

@@ -0,0 +1,46 @@
+.iui-accordions {
+  display: flex;
+  flex-direction: column;
+}
+.iui-accordion {
+  background: var(--white);
+  box-shadow: var(--container-shadow);
+  border-radius: var(--container-radius);
+  margin: 3px 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 13px;
+  &.compact {
+    border-radius: unset;
+    margin: unset;
+    &:first-child {
+      border-top-left-radius: var(--container-radius);
+      border-top-right-radius: var(--container-radius);
+    }
+    &:last-child {
+      border-bottom-left-radius: var(--container-radius);
+      border-bottom-right-radius: var(--container-radius);
+    }
+  }
+  .summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+    font-weight: 500;
+    margin-bottom: 1px;
+    padding: 0 16px;
+    min-height: 48px;
+  }
+  .iui-icon {
+    color: var(--primary-light);
+    max-width: 20px;
+    margin-right: 16px;
+    margin-bottom: 0;
+    font-size: 20px;
+  }
+  .collapse-icon {
+    color: #333;
+    height: 12px;
+    width: 14px;
+  }
+}

package/src/styles/components/_alert.scss

@@ -0,0 +1,23 @@
+@use '../common/maps/info-types' as *;
+
+.iui-alert {
+  border-radius: var(--container-radius);
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  font-size: 13px;
+  svg {
+    height: 20px;
+    width: 20px;
+    margin-right: 12px;
+  }
+
+  @each $key in $info-types {
+    &.#{$key} {
+      background-color: var(--#{$key}-100);
+      svg {
+        color: var(--#{$key});
+      }
+    }
+  }
+}

package/src/styles/components/_badge.scss

@@ -0,0 +1,76 @@
+.iui-badge-parent {
+  position: relative;
+  display: inline-block;
+}
+.iui-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  border-radius: 100%;
+  &.primary {
+    color: var(--text-inverse);
+    border: 2px solid white;
+    background-color: var(--primary);
+  }
+  // SIZES
+  &.s {
+    font-size: 10px;
+    height: 18px;
+    width: 18px;
+  }
+  &.m {
+    font-size: 11px;
+    height: 21px;
+    width: 21px;
+  }
+}
+
+.iui-pill-badge {
+  padding: 5px 11px;
+  border-radius: 20px;
+  width: fit-content;
+  font-size: 12px;
+  &.success {
+    background-color: var(--success-200);
+  }
+  &.info {
+    background-color: var(--info-200);
+  }
+  &.warning {
+    background-color: var(--warning-200);
+  }
+  &.danger {
+    background-color: var(--danger-200);
+  }
+  &.gray {
+    background-color: var(--neutral-200);
+  }
+}
+
+.iui-dot-badge {
+  min-width: 13px;
+  max-width: 13px;
+  min-height: 13px;
+  max-height: 13px;
+  border-radius: 50%;
+  &.success {
+    background-color: var(--success);
+  }
+  &.info {
+    background-color: var(--info);
+  }
+  &.warning {
+    background-color: var(--warning);
+  }
+  &.danger {
+    background-color: var(--danger);
+  }
+  &.gray {
+    background-color: var(--neutral-400);
+  }
+}

package/src/styles/components/_button.scss

@@ -0,0 +1,138 @@
+@use 'sass:map';
+
+$btn-colors: (primary, neutral, danger);
+
+.iui-btn {
+  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;
+
+  @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);
+      }
+      &:not(:disabled) {
+        &:focus-visible {
+          box-shadow: 0px 0px 1px 3px var(--#{$key}-200);
+        }
+        &:hover,
+        &:active,
+        &.active {
+          &.solid {
+            border-color: var(--#{$key}-600);
+            background-color: var(--#{$key}-600);
+          }
+          &:not(.solid) {
+            // color: var(--#{$key}-700);
+            background-color: var(--#{$key}-100);
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.simple) {
+    border: 1px solid var(--neutral-300);
+  }
+  &.solid {
+    color: var(--text-inverse);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  &:not(:disabled):active {
+    transform: translateY(2px);
+  }
+}
+
+///// 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;
+
+  // Sizes
+  @each $size, $vars in $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);
+      }
+      svg {
+        height: map.get($vars, svg);
+        width: map.get($vars, svg);
+      }
+    }
+  }
+}
+
+///// 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 {
+    &.#{$size} {
+      min-height: map.get($vars, size);
+      min-width: map.get($vars, size);
+      height: map.get($vars, size);
+      width: map.get($vars, size);
+      svg {
+        height: map.get($vars, svg);
+        width: map.get($vars, svg);
+      }
+    }
+  }
+}

package/src/styles/components/_card.scss

@@ -0,0 +1,24 @@
+.iui-card {
+  box-shadow: var(--container-shadow);
+  border-radius: var(--container-radius);
+  background: var(--white);
+  & > .content {
+    &.s {
+      padding: 10px;
+    }
+    &.l {
+      padding: 40px 30px;
+    }
+  }
+}
+
+.iui-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  padding-left: 15px;
+  margin: 0 10px;
+  height: 45px;
+  border-bottom: 1px solid var(--neutral-700);
+}

package/src/styles/components/_dialog.scss

@@ -0,0 +1,111 @@
+@use '../variables/bp';
+@use '../common/maps/info-types' as *;
+
+$dialog-sizes: (
+  m: 400px,
+  l: 750px,
+  xl: 1200px,
+);
+
+.iui-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  background-color: var(--neutral-t);
+  animation: fade-in 200ms forwards;
+  backdrop-filter: blur(8px);
+  &.closing {
+    animation: fade-out 200ms forwards;
+    display: flex;
+  }
+}
+
+.iui-dialog-container {
+  background-color: var(--white);
+  border-radius: 16px;
+  min-width: 400px;
+  max-width: 98vw;
+  animation: scale-in 200ms forwards;
+  overflow: hidden;
+  .iui-dialog-header {
+    display: flex;
+    gap: 16px;
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .iui-dialog-desc {
+      margin-top: 8px;
+      color: var(--text);
+      word-break: break-word;
+      white-space: pre-line;
+    }
+    .iui-dialog-title {
+      display: flex;
+      gap: 16px;
+      width: 100%;
+      justify-content: space-between;
+      align-items: baseline;
+      .close-icon {
+        margin: -14px;
+      }
+    }
+  }
+
+  @each $key, $value in $dialog-sizes {
+    &.#{$key} {
+      width: $value;
+    }
+  }
+  .dialog-type-icon {
+    min-height: 24px;
+    min-width: 24px;
+    padding: 12px;
+    border-radius: 24px;
+    @each $key in $info-types {
+      &.#{$key} {
+        color: var(--#{$key});
+        background-color: var(--#{$key}-100);
+      }
+    }
+  }
+}
+
+.iui-dialog-content {
+  max-height: 80vh;
+  padding: 24px;
+  &:not(.no-overflow) {
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+}
+
+.iui-dialog-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: right;
+  padding: 24px;
+  border-top: var(--border);
+}
+
+@media #{bp.$mobile} {
+  .iui-dialog-container {
+    height: 100dvh;
+    width: 100vw !important;
+    max-width: 100vw;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .iui-dialog-content {
+      padding: 16px;
+    }
+    .iui-dialog-actions {
+      padding: 16px;
+      flex-direction: column-reverse;
+    }
+  }
+}

package/src/styles/components/_form.scss

@@ -0,0 +1,8 @@
+.iui-form-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}