@platformatic/ui-components 0.1.19 → 0.1.21

package/dist/{platformatic-ui.css → assets/index.e8f4b797.css}

@@ -1 +1 @@
-._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_1atg3_1{padding:.625rem .5rem}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_sk3z1_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_sk3z1_5{display:flex;width:100%;flex-direction:column}._stats-header_19k8x_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_19k8x_4{display:flex;align-items:center;justify-content:center;gap:1rem}._tabbed-container_129x6_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_129x6_5{margin-bottom:1rem;display:flex;height:4rem;justify-content:space-between;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_129x6_5:hover{cursor:pointer}._selected-tab_129x6_8{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-1{margin-right:.25rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.w-full{width:100%}.w-9{width:2.25rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Regular.ttf) format("truetype");font-weight:500}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Bold.ttf) format("truetype");font-weight:700}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}.bordered{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}.padded{padding:.625rem .5rem}.api-footer{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.api-status{justify-self:end}.bordered-box{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}
+._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_650jz_1{padding:.625rem .5rem}._bordered_650jz_5{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._tabbed-container_1r9tv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1r9tv_5{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_1r9tv_5:hover{cursor:pointer}._tab_1r9tv_1{margin-right:1rem;min-width:105px;text-align:center}._selected-tab_1r9tv_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_1r9tv_15{height:100vh}._borderedBox_1fd0d_1{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-2{margin-right:.5rem}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}

package/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index.fcbe6de7.js"></script>
-    <link rel="stylesheet" href="/platformatic-ui.css">
+    <script type="module" crossorigin src="/assets/index.5ac5acb7.js"></script>
+    <link rel="stylesheet" href="/assets/index.e8f4b797.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css

@@ -540,6 +540,10 @@ video {
   }
 }
 
+.relative {
+  position: relative;
+}
+
 .m-3 {
   margin: 0.75rem;
 }
@@ -559,22 +563,10 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .flex {
   display: flex;
 }
@@ -583,16 +575,8 @@ video {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-9 {
-  width: 2.25rem;
+.h-screen {
+  height: 100vh;
 }
 
 .grow {
@@ -607,26 +591,6 @@ video {
   flex-direction: column;
 }
 
-.items-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-10 {
   gap: 2.5rem;
 }
@@ -636,10 +600,6 @@ video {
        column-gap: 1rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .border {
   border-width: 1px;
 }
@@ -654,10 +614,6 @@ video {
   border-color: rgb(33 250 144 / var(--tw-border-opacity));
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -668,31 +624,33 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.font-semibold {
-  font-weight: 600;
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
 }
 
 .font-bold {
   font-weight: 700;
 }
 
-.font-light {
-  font-weight: 300;
-}
-
-.text-main-green {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(33 250 144 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .text-dark-green {
@@ -700,9 +658,9 @@ video {
   color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 
-.text-white {
+.text-main-green {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(33 250 144 / var(--tw-text-opacity));
 }
 
 .text-error-red {
@@ -710,14 +668,6 @@ video {
   color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
-@font-face {
-  font-family: 'Montserrat';
-
-  src: local('Montserrat'), url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
-
-  font-weight: 100 900;
-}
-
 :root {
   --tw-bg-opacity: 1;
   background-color: rgb(0 40 61 / var(--tw-bg-opacity));
@@ -731,8 +681,4 @@ a {
 
 input {
   background-color: transparent;
-}
-
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
 }

package/index.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import ApiSummary from './src/components/ApiSummary'
-import ApiDetails from './src/components/ApiDetail'
 import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import Box from './src/components/Box'
@@ -9,9 +7,9 @@ import Button from './src/components/Button'
 import DetailedMetric from './src/components/DetailedMetric'
 import DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
-import FrontpageBackground from './src/components/FrontpageBackground'
 import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
+import Icons from './src/components/icons'
 import Input from './src/components/Input'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
@@ -19,7 +17,6 @@ import ListElement from './src/components/ListElement'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import Playground from './src/components/Playground'
-import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
 import SimpleMetric from './src/components/SimpleMetric'
 import Status from './src/components/Status'
@@ -29,8 +26,6 @@ import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
 export {
-  ApiSummary,
-  ApiDetails,
   BorderedBox,
   BorderedText,
   Box,
@@ -38,9 +33,9 @@ export {
   DetailedMetric,
   DropDown,
   FollowUs,
-  FrontpageBackground,
   HorizontalSeparator,
   GHLoginButton,
+  Icons,
   Input,
   Layout,
   List,
@@ -48,7 +43,6 @@ export {
   LoginButton,
   Logo,
   Playground,
-  PullRequest,
   SearchBar,
   SimpleMetric,
   Status,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -27,6 +27,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-tooltip": "^4.4.3",
+    "spinners-react": "^1.0.7",
     "storybook-tailwind-foundations": "^1.1.2"
   },
   "devDependencies": {

package/src/components/ListElement.module.css

@@ -11,11 +11,11 @@
 }
 
 .title {
-  @apply flex text-light-green font-bold w-full text-left 
+  @apply flex text-light-green font-bold w-full
 }
 
 .textCol {
-  @apply flex flex-col text-white text-justify w-96
+  @apply flex flex-col text-white text-justify w-full
 }
 
 .detailSpace {

package/src/components/Loadable.jsx

@@ -0,0 +1,34 @@
+import React, { useState, cloneElement, Children } from 'react'
+import styles from './Loadable.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+export default function List ({ ...props }) {
+  // If null then loading not started, if true then loading, if false then done loading
+  const [loading, setLoading] = useState(null)
+  const startLoading = (reset = false) => {
+    // We can start only once (unless we reset)
+    if (loading === null || reset) {
+      setLoading(true)
+    }
+  }
+  const stopLoading = () => setLoading(false)
+
+  const children = Children.map(props.children, child => cloneElement(child, { startLoading, stopLoading }))
+
+  return (
+    <div className={styles.container} data-testid='loadable'>
+      {
+        loading
+          ? (
+            <>
+              <div data-testid='loadable-content' className={styles.relative}>
+                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <div className={styles.blurred}>{children}</div>
+              </div>
+            </>
+            )
+          : <>{children}</>
+      }
+    </div>
+  )
+}

package/src/components/Loadable.module.css

@@ -0,0 +1,13 @@
+
+.container {
+  @apply relative
+}
+
+.spinner {
+    @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
+}
+
+.blurred {
+  @apply blur-sm
+}
+

package/src/components/Main.jsx

@@ -1,48 +1,13 @@
 'use strict'
 
 import SearchBar from './SearchBar'
-import ApiDetails from './ApiDetail'
-import ApiSummary from './ApiSummary'
 import TabbedWindow from './TabbedWindow'
-import Prs from './PullRequest'
 import Playground from './Playground'
 import Versions from './Versions'
 import React, { useState } from 'react'
 export default function Main () {
   const [currentSearch, setCurrentSearch] = useState('')
-  const apis = [
-    {
-      id: 1,
-      name: 'api-online',
-      version: '1.2.3',
-      source: 'Platformatic DB',
-      lastDeploy: '2022-10-10',
-      graphql: true,
-      openapi: true,
-      online: true,
-      url: 'https://example.com',
-      repository: 'platformatic/example'
-    },
-    {
-      id: 2,
-      name: 'api-offline',
-      version: '1.2.3',
-      source: 'Platformatic DB',
-      lastDeploy: '2022-10-10',
-      graphql: true,
-      openapi: true,
-      online: false
-    }
-  ]
   const tabs = [
-    {
-      label: 'Overview',
-      component: () => <ApiDetails data={apis[0]} />
-    },
-    {
-      label: 'PRs',
-      component: () => <Prs />
-    },
     {
       label: 'Playground',
       component: () => <Playground />
@@ -63,7 +28,6 @@ export default function Main () {
       <TabbedWindow
         tabs={tabs}
       />
-      {apis.map((api) => { return (<ApiSummary key={api.id} data={api} />) })}
     </>
   )
 }

package/src/components/icons/index.js

@@ -0,0 +1,7 @@
+import ApiIcon from './ApiIcon'
+import ApiIconClosed from './ApiIconClosed'
+import PullRequestIcon from './PullRequestIcon'
+
+export default {
+  ApiIcon, ApiIconClosed, PullRequestIcon
+}

package/src/stories/Loadable.stories.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import Loadable from '../components/Loadable'
+import BorderedBox from '../components/BorderedBox'
+
+const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.
+`
+
+export default {
+  title: 'Platformatic/Loadable',
+  component: Loadable
+}
+
+const ContentThatLoads = ({ startLoading }) => {
+  startLoading()
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+
+export const Loading = args =>
+  <Loadable {...args}>
+    <ContentThatLoads />
+  </Loadable>
+Loading.args = {}
+
+const ContentThatLoadsAndStops = ({ startLoading, stopLoading }) => {
+  useEffect(() => {
+    startLoading()
+    const timer = setTimeout(() => {
+      stopLoading()
+    }, 2000)
+    return () => clearTimeout(timer)
+  }, [])
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+
+export const LoadsAndStops = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatLoadsAndStops />
+    </Loadable>
+  )
+}
+LoadsAndStops.args = {}
+
+export const LoadsAndStops2 = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatLoadsAndStops />
+      <ContentThatLoadsAndStops />
+    </Loadable>
+  )
+}
+LoadsAndStops2.args = {}
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const ContentThatToggle = ({ startLoading, stopLoading }) => {
+  useEffect(() => {
+    startLoading()
+    const toggle = async () => {
+      await sleep(1000)
+      stopLoading()
+      await sleep(1000)
+      startLoading(true)
+    }
+    toggle()
+  }, [])
+  return <BorderedBox>{loremIpsum}</BorderedBox>
+}
+export const Toggle = args => {
+  return (
+    <Loadable {...args}>
+      <ContentThatToggle />
+    </Loadable>
+  )
+}
+Toggle.args = {}

package/src/styles/main.css

@@ -2,12 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Montserrat';
-  src: local('Montserrat'), url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
-  font-weight: 100 900;
-}
-
 :root {
   @apply bg-main-dark-blue;
   font-family: 'Montserrat';