@rovula/ui 0.0.13 → 0.0.15

package/dist/cjs/bundle.css

@@ -517,6 +517,10 @@ video {
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 
+    --main-transparent-primary: 1 1 68;
+    --main-transparent-secondary: 234 241 255;
+    --main-transparent-tertiary: 47 78 255;
+
     /* Button */
     --btn-rounded-sm: 10px;
     --btn-rounded-md: 12px;
@@ -551,6 +555,13 @@ video {
     --popup-overlay: 0 0 0;
     --popup-overlay-alpha: 0.48;
     --popup-rounded: 24px;
+
+    /* Navbar */
+    --navbar-height: 58px;
+    --navbar-bg-color: var(--primary-default);
+    --navbar-text-color: var(--primary-foreground);
+    --navbar-border-color: var(--primary-foreground);
+    --navbar-gap: 16px;
   
     /* TODO for shadcn, wait for refactor */
     /* --background: 0 0% 100%; */
@@ -725,6 +736,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.static {
+  position: static;
+}
 .fixed {
   position: fixed;
 }
@@ -774,6 +788,9 @@ video {
 .top-\[50\%\] {
   top: 50%;
 }
+.z-0 {
+  z-index: 0;
+}
 .z-10 {
   z-index: 10;
 }
@@ -876,15 +893,58 @@ video {
 .h-4 {
   height: 1rem;
 }
+.h-\[18px\] {
+  height: 18px;
+}
+.h-\[24px\] {
+  height: 24px;
+}
+.h-\[30px\] {
+  height: 30px;
+}
+.h-\[32px\] {
+  height: 32px;
+}
+.h-\[38px\] {
+  height: 38px;
+}
+.h-\[40px\] {
+  height: 40px;
+}
+.h-\[48px\] {
+  height: 48px;
+}
 .h-\[54px\] {
   height: 54px;
 }
+.h-\[56px\] {
+  height: 56px;
+}
+.h-\[64px\] {
+  height: 64px;
+}
+.h-\[var\(--navbar-height\)\] {
+  height: var(--navbar-height);
+}
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .h-full {
   height: 100%;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-60 {
   max-height: 15rem;
 }
+.w-1\/2 {
+  width: 50%;
+}
+.w-10 {
+  width: 2.5rem;
+}
 .w-4 {
   width: 1rem;
 }
@@ -894,12 +954,45 @@ video {
 .w-\[100px\] {
   width: 100px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[200px\] {
   width: 200px;
 }
+.w-\[20px\] {
+  width: 20px;
+}
+.w-\[24px\] {
+  width: 24px;
+}
+.w-\[30px\] {
+  width: 30px;
+}
+.w-\[32px\] {
+  width: 32px;
+}
+.w-\[38px\] {
+  width: 38px;
+}
 .w-\[400px\] {
   width: 400px;
 }
+.w-\[40px\] {
+  width: 40px;
+}
+.w-\[46px\] {
+  width: 46px;
+}
+.w-\[48px\] {
+  width: 48px;
+}
+.w-\[56px\] {
+  width: 56px;
+}
+.w-\[64px\] {
+  width: 64px;
+}
 .w-auto {
   width: auto;
 }
@@ -915,6 +1008,9 @@ video {
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -964,9 +1060,15 @@ video {
 .flex-col-reverse {
   flex-direction: column-reverse;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -995,12 +1097,21 @@ video {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
 }
+.gap-x-\[var\(--navbar-gap\)\] {
+  -moz-column-gap: var(--navbar-gap);
+       column-gap: var(--navbar-gap);
+}
 .gap-y-4 {
   row-gap: 1rem;
 }
 .gap-y-6 {
   row-gap: 1.5rem;
 }
+.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1034,6 +1145,11 @@ video {
 .overflow-y-scroll {
   overflow-y: scroll;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1085,6 +1201,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-solid {
+  border-style: solid;
+}
 .border-error {
   --tw-border-opacity: 1;
   border-color: rgb(var(--error-100) / var(--tw-border-opacity));
@@ -1093,6 +1212,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.border-grey2-500\/\[\.32\] {
+  border-color: rgb(var(--grey2-500) / .32);
+}
 .border-info {
   --tw-border-opacity: 1;
   border-color: rgb(var(--info-default) / var(--tw-border-opacity));
@@ -1101,6 +1223,12 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
 }
+.border-main-transparent-primary-48 {
+  border-color: rgb(var(--main-transparent-primary) / 0.48);
+}
+.border-main-transparent-secondary-32 {
+  border-color: rgb(var(--main-transparent-secondary) / 0.32);
+}
 .border-primary {
   --tw-border-opacity: 1;
   border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
@@ -1140,9 +1268,19 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(var(--warning-default) / var(--tw-border-opacity));
 }
+.border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
+  border-bottom-color: rgb(var(--navbar-border-color));
+}
+.bg-\[rgb\(var\(--navbar-bg-color\)\)\] {
+  background-color: rgb(var(--navbar-bg-color));
+}
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .bg-error {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
@@ -1155,6 +1293,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--grey2-300) / var(--tw-bg-opacity));
 }
+.bg-grey2-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--grey2-500) / var(--tw-bg-opacity));
+}
+.bg-grey2-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--grey2-700) / var(--tw-bg-opacity));
+}
 .bg-info {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
@@ -1174,6 +1320,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
 }
+.bg-primary-120 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--primary-120) / var(--tw-bg-opacity));
+}
 .bg-secondary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--secondary-100) / var(--tw-bg-opacity));
@@ -1182,6 +1332,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--secondary-110) / var(--tw-bg-opacity));
 }
+.bg-secondary-20 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--secondary-20) / var(--tw-bg-opacity));
+}
 .bg-secondary-80 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--secondary-80) / var(--tw-bg-opacity));
@@ -1223,15 +1377,30 @@ video {
 .fill-input-text-disabled {
   fill: rgb(var(--input-disabled-text-color) / 1);
 }
+.fill-red-500 {
+  fill: #ef4444;
+}
 .fill-secondary-110 {
   fill: rgb(var(--secondary-110) / 1);
 }
+.fill-secondary-70 {
+  fill: rgb(var(--secondary-70) / 1);
+}
+.fill-secondary-foreground {
+  fill: rgb(var(--secondary-foreground) / 1);
+}
+.fill-textcolor-medium {
+  fill: rgb(var(--text-default-medium) / 1);
+}
 .p-1 {
   padding: 0.25rem;
 }
 .p-2 {
   padding: 0.5rem;
 }
+.p-20 {
+  padding: 5rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -1244,10 +1413,17 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.p-\[2px\] {
+  padding: 2px;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1260,6 +1436,10 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .px-\[2px\] {
   padding-left: 2px;
   padding-right: 2px;
@@ -1284,6 +1464,10 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .pe-\[30px\] {
   padding-inline-end: 30px;
 }
@@ -1421,6 +1605,10 @@ video {
   line-height: 22px;
   font-weight: 600;
 }
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .font-bold {
   font-weight: 700;
 }
@@ -1439,6 +1627,9 @@ video {
 .tracking-tight {
   letter-spacing: -0.025em;
 }
+.text-\[rgb\(var\(--navbar-text-color\)\)\] {
+  color: rgb(var(--navbar-text-color));
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1458,6 +1649,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
+.text-grey2-500\/\[\.32\] {
+  color: rgb(var(--grey2-500) / .32);
+}
 .text-info {
   --tw-text-opacity: 1;
   color: rgb(var(--info-default) / var(--tw-text-opacity));
@@ -1494,6 +1688,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-130) / var(--tw-text-opacity));
 }
+.text-secondary-70 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--secondary-70) / var(--tw-text-opacity));
+}
 .text-secondary-foreground {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-foreground) / var(--tw-text-opacity));
@@ -1530,6 +1728,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(var(--text-grey-medium) / var(--tw-text-opacity));
 }
+.text-textcolor-medium {
+  --tw-text-opacity: 1;
+  color: rgb(var(--text-default-medium) / var(--tw-text-opacity));
+}
 .text-warning {
   --tw-text-opacity: 1;
   color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1738,19 +1940,6 @@ video {
   line-height: 10px;
   font-weight: 400;
 }
-.file\:border-0::file-selector-button {
-  border-width: 0px;
-}
-.file\:bg-transparent::file-selector-button {
-  background-color: transparent;
-}
-.file\:text-sm::file-selector-button {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.file\:font-medium::file-selector-button {
-  font-weight: 500;
-}
 .placeholder\:text-input-text-disabled::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
@@ -1789,6 +1978,16 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-100)) / var(--tw-bg-opacity));
 }
+.hover\:bg-main-transparent-primary-8:hover {
+  background-color: rgb(var(--main-transparent-primary) / 0.8);
+}
+.hover\:bg-main-transparent-secondary-8:hover {
+  background-color: rgb(var(--main-transparent-secondary) / 0.8);
+}
+.hover\:bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--primary-100) / var(--tw-bg-opacity));
+}
 .hover\:bg-primary-80:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--primary-80) / var(--tw-bg-opacity));
@@ -1797,6 +1996,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--secondary-120) / var(--tw-bg-opacity));
 }
+.hover\:bg-secondary-5:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--secondary-5) / var(--tw-bg-opacity));
+}
 .hover\:bg-success-120:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--success-120)) / var(--tw-bg-opacity));
@@ -1821,6 +2024,17 @@ video {
 .hover\:fill-input-text:hover {
   fill: rgb(var(--input-default-text-color) / 1);
 }
+.hover\:fill-secondary-5:hover {
+  fill: rgb(var(--secondary-5) / 1);
+}
+.hover\:text-primary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--primary-default) / var(--tw-text-opacity));
+}
+.hover\:text-secondary-5:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--secondary-5) / var(--tw-text-opacity));
+}
 .hover\:text-textcolor-dark:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--text-default-dark) / var(--tw-text-opacity));
@@ -1908,9 +2122,6 @@ video {
 .disabled\:fill-secondary-110:disabled {
   fill: rgb(var(--secondary-110) / 1);
 }
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
-}
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
   top: 0.5rem;
 }