@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/components/layout/layout.css

@@ -59,13 +59,13 @@
       position: absolute;
       top: calc(2.5rem - (1.75rem / 2));
       right: -0.875rem;
-      background-color: var(--white);
+      background-color: var(--white-100);
       width: 1.75rem;
       height: 1.75rem;
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--radius-4);
       color: var(--gray-400);
       cursor: pointer;
-      box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+      box-shadow: 0 0 10px -5px var(--black-30);
       z-index: 1;
     }
 
@@ -81,7 +81,7 @@
         position: absolute;
         top: 100%;
         content: "";
-        background-color: rgba(var(--black-rgb), 0.1);
+        background-color: var(--black-10);
         width: 100%;
         height: 1px;
       }
@@ -107,7 +107,7 @@
       top: 0;
       background-color: rgba(var(--white-rgb), 0.5);
       backdrop-filter: blur(5px);
-      box-shadow: 0 10px 10px -15px rgba(var(--black-rgb), 0.25);
+      box-shadow: 0 10px 10px -15px var(--black-30);
       z-index: 10;
 
       > .actions {

package/dist/assets/css/components/navigation/menu/styles.css

@@ -72,7 +72,7 @@
           align-items: center;
           min-width: 2rem;
           min-height: 2rem;
-          border-radius: var(--border-radius-pill);
+          border-radius: var(--radius-full);
 
           svg {
             color: var(--light);
@@ -86,8 +86,8 @@
             border: dashed 2px transparent;
             border-top-color: var(--light);
             border-right-color: var(--light);
-            border-left-color: rgba(var(--black-rgb), 0.1);
-            border-bottom-color: rgba(var(--black-rgb), 0.1);
+            border-left-color: var(--black-10);
+            border-bottom-color: var(--black-10);
             transform: rotate(45deg);
           }
         }
@@ -119,10 +119,10 @@
             border-right-style: solid;
             border-bottom-style: dashed;
             border-left-style: dashed;
-            border-top-color: rgba(var(--black-rgb), 0.5);
-            border-right-color: rgba(var(--black-rgb), 0.5);
-            border-left-color: rgba(var(--black-rgb), 0.1);
-            border-bottom-color: rgba(var(--black-rgb), 0.1);
+            border-top-color: var(--black-50);
+            border-right-color: var(--black-50);
+            border-left-color: var(--black-10);
+            border-bottom-color: var(--black-10);
             transform: rotate(45deg);
             transition: transform 200ms ease-in-out;
           }
@@ -143,10 +143,10 @@
         .icon {
           background-color: var(--selected-icon-bg-color);
           box-shadow: 0 0 0 5px var(--selected-icon-bg-color-rgb);
-          color: var(--white);
+          color: var(--white-100);
 
           svg {
-            color: var(--white);
+            color: var(--white-100);
           }
         }
 
@@ -154,8 +154,8 @@
           border: solid 2px transparent;
           border-top-color: var(--light);
           border-right-color: var(--light);
-          border-left-color: rgba(var(--black-rgb), 0.1);
-          border-bottom-color: rgba(var(--black-rgb), 0.1);
+          border-left-color: var(--black-10);
+          border-bottom-color: var(--black-10);
         }
       }
     }

package/dist/assets/css/components/navigation/pagination/styles.css

@@ -19,7 +19,7 @@
       align-items: center;
       min-width: 1.75rem;
       height: 100%;
-      border-radius: var(--border-radius-pill);
+      border-radius: var(--radius-full);
       box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.1);
       transform: scale(1);
       color: var(--gray-700);
@@ -34,7 +34,7 @@
       &:is(.selection-page) {
         background-color: var(--primary);
         box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.1);
-        color: var(--white);
+        color: var(--white-100);
         font-size: 0.9rem;
         transform: scale(1.15);
         transition:
@@ -59,7 +59,12 @@
         margin-left: 1rem;
       }
 
-      &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+      &:is(
+        :nth-child(1),
+        :nth-child(2),
+        :nth-last-child(1),
+        :nth-last-child(2)
+      ) {
         > span {
           position: relative;
           top: -2px;
@@ -109,7 +114,12 @@
           margin-left: 0.5rem;
         }
 
-        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+        &:is(
+          :nth-child(1),
+          :nth-child(2),
+          :nth-last-child(1),
+          :nth-last-child(2)
+        ) {
           > span {
           }
         }
@@ -150,7 +160,12 @@
           margin-left: 0.5rem;
         }
 
-        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
+        &:is(
+          :nth-child(1),
+          :nth-child(2),
+          :nth-last-child(1),
+          :nth-last-child(2)
+        ) {
           > span {
           }
         }

package/dist/assets/css/components/navigation/steps/styles.css

@@ -31,7 +31,7 @@
   content: "";
   width: 70%;
   height: 4px;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
 }
 .ar-steps > .steps > .item:not(:last-child) > .item-icon.pending::after {
   background-color: var(--gray-300);
@@ -51,12 +51,12 @@
   align-items: center;
   width: 2.5rem;
   height: 2.5rem;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
 }
 
 .ar-steps > .steps > .item > .item-icon > .pending {
   position: relative;
-  background-color: var(--white);
+  background-color: var(--white-100);
   border: solid 1px var(--gray-500);
 }
 .ar-steps > .steps > .item > .item-icon > .pending::before {
@@ -77,13 +77,13 @@
   background-color: var(--primary);
   width: 3.5px;
   height: 3.5px;
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
 }
 
 .ar-steps > .steps > .item > .item-icon > .in-progress {
   background-color: var(--primary);
   box-shadow:
-    0 0 0 4px var(--white),
+    0 0 0 4px var(--white-100),
     0 0 0 5px rgba(var(--primary-rgb), 0.5);
 }
 .ar-steps > .steps > .item > .item-icon > .in-progress::before {
@@ -97,7 +97,7 @@
   border-right-color: rgba(var(--white-rgb), 0.75);
   border-bottom-color: rgba(var(--white-rgb), 0.25);
   border-left-color: rgba(var(--white-rgb), 0.1);
-  border-radius: var(--border-radius-pill);
+  border-radius: var(--radius-full);
   animation: in-progress 1s linear 0s infinite normal both;
 }
 
@@ -112,9 +112,9 @@
   width: 1rem;
   height: 0.55rem;
   border: solid 2.5px transparent;
-  border-left-color: var(--white);
-  border-bottom-color: var(--white);
-  border-bottom-left-radius: var(--border-radius-sm);
+  border-left-color: var(--white-100);
+  border-bottom-color: var(--white-100);
+  border-bottom-left-radius: var(--radius-4);
   transform: rotate(-45deg) translate(1px, -1px);
 }
 

package/dist/assets/css/components/navigation/wizard/styles.css

@@ -0,0 +1,116 @@
+.har-wizard {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--gray-100);
+  width: 100%;
+  height: 100dvh;
+  padding: var(--space-12);
+  border-radius: var(--radius-20);
+  box-shadow: 0 20px 60px var(--black-30);
+  overflow: hidden;
+
+  > .side-bar {
+    width: 260px;
+    flex-shrink: 0;
+    padding: var(--space-28) var(--space-24);
+    display: flex;
+    flex-direction: column;
+
+    .divider {
+      border-top: dashed var(--stroke-1-5) var(--gray-300);
+    }
+
+    .steps {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-8);
+
+      .step-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--space-8);
+        padding: var(--space-8);
+        border-radius: var(--radius-8);
+
+        &.current {
+          background-color: var(--white-100);
+          box-shadow: 0 5px 15px -5px var(--black-20);
+        }
+
+        > span {
+          display: inline-flex;
+
+          &:last-child {
+            margin-left: auto;
+          }
+        }
+      }
+    }
+  }
+
+  > .panel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--space-16);
+    background-color: var(--white-100);
+    border: solid var(--stroke-1) var(--gray-200);
+    border-radius: var(--radius-12);
+
+    > .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-16) var(--space-32);
+      border-bottom: solid var(--stroke-1) var(--gray-200);
+
+      > .header-right {
+        display: flex;
+        align-items: center;
+        gap: var(--space-12);
+
+        > .progress {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: var(--space-8);
+          color: var(--gray-400);
+          font-size: 14px;
+
+          > .track {
+            width: 80px;
+            height: 6px;
+            background: var(--gray-300);
+            border-radius: var(--radius-4);
+            overflow: hidden;
+
+            > .fill {
+              width: 66%;
+              height: 100%;
+              background: var(--blue-500);
+              border-radius: var(--radius-4);
+              transition: width 250ms ease-in-out;
+            }
+          }
+        }
+      }
+    }
+
+    > .content {
+      padding: var(--space-16) var(--space-32);
+      overflow-y: auto;
+    }
+
+    > .footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      margin-top: auto;
+      padding: var(--space-16) var(--space-32);
+      border-top: solid var(--stroke-1) var(--gray-200);
+    }
+  }
+}

package/dist/assets/css/core/animation.css

@@ -161,4 +161,4 @@
   }
 }
 /* #endregion */
-/* Animation -> LIGHT */
+/* Animation -> LIGHT */

package/dist/assets/css/core/color-palette.css

@@ -1,111 +1,145 @@
 :root {
-  --blue-100: #cfe2ff;
-  --blue-200: #9ec5fe;
-  --blue-300: #6ea8fe;
-  --blue-400: #3d8bfd;
-  --blue-500: #0d6efd;
-  --blue-600: #0a58ca;
-  --blue-700: #084298;
-  --blue-800: #052c65;
-  --blue-900: #031633;
+  --white-10: rgba(255, 255, 255, 0.1);
+  --white-20: rgba(255, 255, 255, 0.2);
+  --white-30: rgba(255, 255, 255, 0.3);
+  --white-40: rgba(255, 255, 255, 0.4);
+  --white-50: rgba(255, 255, 255, 0.5);
+  --white-60: rgba(255, 255, 255, 0.6);
+  --white-70: rgba(255, 255, 255, 0.7);
+  --white-80: rgba(255, 255, 255, 0.8);
+  --white-90: rgba(255, 255, 255, 0.9);
+  --white-100: rgba(255, 255, 255, 1);
 
-  --purple-100: #e2d9f3;
-  --purple-200: #c5b3e6;
-  --purple-300: #a98eda;
-  --purple-400: #8c68cd;
-  --purple-500: #6f42c1;
-  --purple-600: #59359a;
-  --purple-700: #432874;
-  --purple-800: #2c1a4d;
-  --purple-900: #160d27;
+  --black-10: rgba(0, 0, 0, 0.1);
+  --black-20: rgba(0, 0, 0, 0.2);
+  --black-30: rgba(0, 0, 0, 0.3);
+  --black-40: rgba(0, 0, 0, 0.4);
+  --black-50: rgba(0, 0, 0, 0.5);
+  --black-60: rgba(0, 0, 0, 0.6);
+  --black-70: rgba(0, 0, 0, 0.7);
+  --black-80: rgba(0, 0, 0, 0.8);
+  --black-90: rgba(0, 0, 0, 0.9);
+  --black-100: rgba(0, 0, 0, 1);
+}
+
+:root {
+  --blue-50: #eff5ff;
+  --blue-100: #dbe8fe;
+  --blue-200: #bfd7fe;
+  --blue-300: #93bbfd;
+  --blue-400: #609afa;
+  --blue-500: #3b82f6;
+  --blue-600: #2570eb;
+  --blue-700: #1d64d8;
+  --blue-800: #1e55af;
+  --blue-900: #1e478a;
+  --blue-950: #172e54;
 
-  --pink-100: #f7d6e6;
-  --pink-200: #efadce;
-  --pink-300: #e685b5;
-  --pink-400: #de5c9d;
-  --pink-500: #d63384;
-  --pink-600: #ab296a;
-  --pink-700: #801f4f;
-  --pink-800: #561435;
-  --pink-900: #2b0a1a;
+  --purple-50: #faf5ff;
+  --purple-100: #f4e8ff;
+  --purple-200: #ebd5ff;
+  --purple-300: #dab4fe;
+  --purple-400: #c184fc;
+  --purple-500: #a855f7;
+  --purple-600: #9133ea;
+  --purple-700: #7a22ce;
+  --purple-800: #6621a8;
+  --purple-900: #531c87;
+  --purple-950: #370764;
 
-  --red-100: #f8d7da;
-  --red-200: #f1aeb5;
-  --red-300: #ea868f;
-  --red-400: #e35d6a;
-  --red-500: #dc3545;
-  --red-600: #b02a37;
-  --red-700: #842029;
-  --red-800: #58151c;
-  --red-900: #2c0b0e;
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b7;
+  --pink-500: #eb3d94;
+  --pink-600: #db2778;
+  --pink-700: #be185e;
+  --pink-800: #9d174e;
+  --pink-900: #831844;
+  --pink-950: #500724;
 
-  --orange-100: #ffe5d0;
-  --orange-200: #fecba1;
-  --orange-300: #feb272;
-  --orange-400: #fd9843;
-  --orange-500: #fd7e14;
-  --orange-600: #ca6510;
-  --orange-700: #984c0c;
-  --orange-800: #653208;
-  --orange-900: #331904;
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+  --red-950: #450a0a;
 
-  --yellow-100: #fff3cd;
-  --yellow-200: #ffe69c;
-  --yellow-300: #ffda6a;
-  --yellow-400: #ffcd39;
-  --yellow-500: #ffc107;
-  --yellow-600: #cc9a06;
-  --yellow-700: #997404;
-  --yellow-800: #664d03;
-  --yellow-900: #332701;
+  --orange-50: #fff4ed;
+  --orange-100: #ffe6d5;
+  --orange-200: #feccaa;
+  --orange-300: #fdac74;
+  --orange-400: #fb8a3c;
+  --orange-500: #f97316;
+  --orange-600: #ea670c;
+  --orange-700: #c2570c;
+  --orange-800: #9a4a12;
+  --orange-900: #7c3d12;
+  --orange-950: #432007;
 
-  --green-100: #d1e7dd;
-  --green-200: #a3cfbb;
-  --green-300: #75b798;
-  --green-400: #479f76;
-  --green-500: #198754;
-  --green-600: #146c43;
-  --green-700: #0f5132;
-  --green-800: #0a3622;
-  --green-900: #051b11;
+  --yellow-50: #fef9e8;
+  --yellow-100: #fef0c3;
+  --yellow-200: #fee28a;
+  --yellow-300: #fdd147;
+  --yellow-400: #fac215;
+  --yellow-500: #eab308;
+  --yellow-600: #ca9a04;
+  --yellow-700: #8e6d06;
+  --yellow-800: #85680e;
+  --yellow-900: #715a12;
+  --yellow-950: #423306;
 
-  --teal-100: #d2f4ea;
-  --teal-200: #a6e9d5;
-  --teal-300: #79dfc1;
-  --teal-400: #4dd4ac;
-  --teal-500: #20c997;
-  --teal-600: #1aa179;
-  --teal-700: #13795b;
-  --teal-800: #0d503c;
-  --teal-900: #06281e;
+  --green-50: #ecfdf7;
+  --green-100: #d1faec;
+  --green-200: #a7f3da;
+  --green-300: #6ee7bf;
+  --green-400: #34d39e;
+  --green-500: #10b981;
+  --green-600: #058a5e;
+  --green-700: #047852;
+  --green-800: #065f42;
+  --green-900: #064e36;
+  --green-950: #022c1e;
 
-  --cyan-100: #cff4fc;
-  --cyan-200: #9eeaf9;
-  --cyan-300: #6edff6;
-  --cyan-400: #3dd5f3;
-  --cyan-500: #0dcaf0;
-  --cyan-600: #0aa2c0;
-  --cyan-700: #087990;
-  --cyan-800: #055160;
-  --cyan-900: #032830;
+  --teal-50: #f0fdfc;
+  --teal-100: #ccfbf6;
+  --teal-200: #99f6ec;
+  --teal-300: #5eeadb;
+  --teal-400: #2dd4c2;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9485;
+  --teal-700: #0f766b;
+  --teal-800: #115e56;
+  --teal-900: #134e48;
+  --teal-950: #042f2a;
 
+  --cyan-50: #ecfcff;
+  --cyan-100: #cff7fe;
+  --cyan-200: #a5effc;
+  --cyan-300: #67e4f9;
+  --cyan-400: #22d0ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0899b2;
+  --cyan-700: #0e7d90;
+  --cyan-800: #156775;
+  --cyan-900: #165863;
+  --cyan-950: #083b44;
+
+  --gray-50: #f9fafb;
   --gray-100: #f3f4f6;
   --gray-200: #e5e7eb;
   --gray-300: #d1d5db;
   --gray-400: #9ca3af;
   --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #1f2937;
-  --gray-900: #111827;
-
-  --light-100: #fbfbfc;
-  --light-200: #f7f8f9;
-  --light-300: #f0f2f4;
-  --light-400: #e1e5e9;
-  --light-500: #d1d7dd;
-  --light-600: #b8c1ca;
-  --light-700: #9eaab6;
-  --light-800: #7e8e9d;
-  --light-900: #647688;
+  --gray-600: #525252;
+  --gray-700: #404040;
+  --gray-800: #262626;
+  --gray-900: #171717;
+  --gray-950: #0a0a0a;
 }

package/dist/assets/css/core/har-core.css

@@ -0,0 +1,53 @@
+@import url("./color-palette.css");
+@import url("./radius.css");
+@import url("./space.css");
+@import url("./stroke.css");
+@import url("./utils.css");
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "JetBrainsMono-Bold";
+  src: url("../../../assets/fonts/JetBrainsMono-Bold.ttf");
+}
+
+@font-face {
+  font-family: "JetBrainsMono-Regular";
+  src: url("../../../assets/fonts/JetBrainsMono-Regular.ttf");
+}
+
+/* #region Height */
+:root {
+  --input-height: 2.25rem;
+}
+/* #endregion */
+/* Height */
+
+/* #region Fonts */
+:root {
+  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --jetBrainsMonoBold: "JetBrainsMono-Bold";
+  --jetBrainsMonoRegular: "JetBrainsMono-Regular";
+}
+/* #endregion */
+/* Fonts */
+
+/* #region Box Shadow */
+:root {
+  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
+}
+/* #endregion */
+/* Box Shadow */
+
+.har-validation-text {
+  color: var(--red-500);
+  font-family: var(--system);
+  font-size: 0.8rem;
+  font-weight: 400;
+}

package/dist/assets/css/core/radius.css

@@ -0,0 +1,12 @@
+:root {
+  --radius-0: 0px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-40: 40px;
+  --radius-full: 999px;
+}

package/dist/assets/css/core/space.css

@@ -0,0 +1,27 @@
+:root {
+  --space-0: 0px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-28: 28px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-40: 40px;
+  --space-44: 44px;
+  --space-48: 48px;
+  --space-52: 52px;
+  --space-56: 56px;
+  --space-60: 60px;
+  --space-64: 64px;
+  --space-68: 68px;
+  --space-72: 72px;
+  --space-80: 80px;
+  --space-120: 120px;
+  --space-320: 320px;
+}

package/dist/assets/css/core/stroke.css

@@ -0,0 +1,10 @@
+:root {
+  --stroke-0: 0;
+  --stroke-0-5: 0.5px;
+  --stroke-0-75: 0.75px;
+  --stroke-1: 1px;
+  --stroke-1-5: 1.5px;
+  --stroke-2: 2px;
+  --stroke-3: 3px;
+  --stroke-4: 4px;
+}