@rovula/ui 0.0.13 → 0.0.14

package/dist/src/theme/global.css

@@ -652,6 +652,9 @@ video {
   /* #CC3E2A */
   --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;
@@ -679,6 +682,12 @@ 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%; */
   --background: 220 100% 99%;
@@ -848,6 +857,10 @@ body {
   pointer-events: none;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -913,6 +926,10 @@ body {
   top: 50%;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1046,18 +1063,75 @@ body {
   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;
 }
@@ -1070,14 +1144,58 @@ body {
   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;
 }
@@ -1098,6 +1216,10 @@ body {
   flex: 1 1 0%;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1161,10 +1283,18 @@ body {
   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;
 }
@@ -1202,6 +1332,11 @@ body {
        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;
 }
@@ -1210,6 +1345,12 @@ body {
   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));
@@ -1252,6 +1393,12 @@ body {
   overflow-y: scroll;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1320,6 +1467,10 @@ body {
   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));
@@ -1330,6 +1481,10 @@ body {
   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));
@@ -1340,6 +1495,14 @@ body {
   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));
@@ -1389,10 +1552,23 @@ body {
   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));
@@ -1408,6 +1584,16 @@ body {
   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));
@@ -1432,6 +1618,11 @@ body {
   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));
@@ -1442,6 +1633,11 @@ body {
   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));
@@ -1495,10 +1691,26 @@ body {
   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;
 }
@@ -1507,6 +1719,10 @@ body {
   padding: 0.5rem;
 }
 
+.p-20 {
+  padding: 5rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1523,11 +1739,20 @@ body {
   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;
@@ -1543,6 +1768,11 @@ body {
   padding-right: 1.5rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .px-\[2px\] {
   padding-left: 2px;
   padding-right: 2px;
@@ -1573,6 +1803,11 @@ body {
   padding-bottom: 1rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pe-\[30px\] {
   padding-inline-end: 30px;
 }
@@ -1741,6 +1976,11 @@ body {
   font-weight: 600;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1765,6 +2005,10 @@ body {
   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));
@@ -1789,6 +2033,10 @@ body {
   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));
@@ -1834,6 +2082,11 @@ body {
   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));
@@ -1879,6 +2132,11 @@ body {
   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));
@@ -2135,23 +2393,6 @@ body {
   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));
@@ -2200,6 +2441,19 @@ body {
   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));
@@ -2210,6 +2464,11 @@ body {
   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));
@@ -2241,6 +2500,20 @@ body {
   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));
@@ -2352,10 +2625,6 @@ body {
   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;
 }

package/dist/theme/global.css

@@ -128,6 +128,10 @@
     --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;
@@ -162,6 +166,13 @@
     --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%; */

package/dist/theme/presets/colors.js

@@ -141,6 +141,34 @@ module.exports = {
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },
+        main: {
+          transparent: {
+            primary: {
+              8: "rgb(var(--main-transparent-primary) / 0.8)",
+              12: "rgb(var(--main-transparent-primary) / 0.12)",
+              16: "rgb(var(--main-transparent-primary) / 0.16)",
+              24: "rgb(var(--main-transparent-primary) / 0.24)",
+              32: "rgb(var(--main-transparent-primary) / 0.32)",
+              48: "rgb(var(--main-transparent-primary) / 0.48)",
+            },
+            secondary: {
+              8: "rgb(var(--main-transparent-secondary) / 0.8)",
+              12: "rgb(var(--main-transparent-secondary) / 0.12)",
+              16: "rgb(var(--main-transparent-secondary) / 0.16)",
+              24: "rgb(var(--main-transparent-secondary) / 0.24)",
+              32: "rgb(var(--main-transparent-secondary) / 0.32)",
+              48: "rgb(var(--main-transparent-secondary) / 0.48)",
+            },
+            tertiary: {
+              8: "rgb(var(--main-transparent-tertiary) / 0.8)",
+              12: "rgb(var(--main-transparent-tertiary) / 0.12)",
+              16: "rgb(var(--main-transparent-tertiary) / 0.16)",
+              24: "rgb(var(--main-transparent-tertiary) / 0.24)",
+              32: "rgb(var(--main-transparent-tertiary) / 0.32)",
+              48: "rgb(var(--main-transparent-tertiary) / 0.48)",
+            },
+          },
+        },
         // Component color
         input: {
           text: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -69,6 +69,7 @@
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",