fullstacked 0.12.0-1200 → 0.12.0-1203

package/fullstacked_modules/@fullstacked/ui/icons/Package.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7 6.66375C21.68 6.59375 21.65 6.52375 21.61 6.45375C21.57 6.37375 21.51 6.30375 21.45 6.24375C21.2 5.90375 20.88 5.61375 20.51 5.39375L13.51 1.39375C12.6 0.863751 11.41 0.873751 10.51 1.39375L7.56 3.07375L15.95 7.91375C16.91 8.46375 17.51 9.50375 17.51 10.6138V13.6838C17.51 14.2338 17.06 14.6838 16.51 14.6838C15.96 14.6838 15.51 14.2338 15.51 13.6838V10.6138C15.51 10.2138 15.3 9.84375 14.95 9.64375L5.55 4.23375L3.51 5.40375C3.14 5.61375 2.82 5.90375 2.57 6.25375C2.51 6.31375 2.46 6.38375 2.41 6.46375C2.37 6.53375 2.34 6.59375 2.32 6.66375C2.11 7.07375 2.01 7.53375 2 8.00375V16.0038C2 16.5338 2.14 17.0438 2.4 17.5038C2.66 17.9538 3.04 18.3338 3.5 18.6038L10.5 22.6038C10.82 22.7838 11.17 22.9138 11.52 22.9638C11.66 23.0438 11.82 23.0838 12 23.0838C12.18 23.0838 12.33 23.0438 12.48 22.9638C12.84 22.9038 13.19 22.7838 13.5 22.6038L20.5 18.6038C20.96 18.3438 21.34 17.9638 21.6 17.5038C21.86 17.0438 22 16.5338 22 16.0038V7.99375C22 7.53375 21.89 7.07375 21.69 6.66375H21.7Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Peers.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.91628 21.3257C1.41233 21.3257 1 20.9134 1 20.4094V18.5768C1 17.3582 1.47647 16.2037 2.33778 15.3332C3.19908 14.4719 4.3536 13.9954 5.58142 13.9954H12.9117C14.1395 13.9954 15.2849 14.4719 16.1554 15.3332C17.0167 16.2037 17.4931 17.349 17.4931 18.5768V20.4094C17.4931 20.9134 17.0808 21.3257 16.5768 21.3257H1.91628ZM9.24656 12.1628C6.71762 12.1628 4.66514 10.1104 4.66514 7.58142C4.66514 5.05248 6.71762 3 9.24656 3C11.7755 3 13.828 5.05248 13.828 7.58142C13.828 10.1104 11.7755 12.1628 9.24656 12.1628ZM14.3594 11.4481C14.3136 11.5214 14.277 11.6131 14.277 11.7047C14.277 11.9613 14.4785 12.1628 14.7351 12.1628C17.2641 12.1628 19.3165 10.1104 19.3165 7.58142C19.3165 5.05248 17.2732 3 14.7443 3C14.4877 3 14.2861 3.20158 14.2861 3.45814C14.2861 3.54977 14.3136 3.6414 14.3686 3.7147C15.1841 4.78676 15.6697 6.13369 15.6697 7.58142C15.6697 9.02915 15.1841 10.3761 14.3686 11.4481H14.3594ZM19.2982 20.7851C19.2982 20.7851 19.2982 20.8401 19.2982 20.8676C19.2982 21.1241 19.4998 21.3257 19.7563 21.3257H19.7472H22.0837C22.5877 21.3257 23 20.9134 23 20.4094V18.5768C23 17.3582 22.5235 16.2037 21.6622 15.3332C20.8009 14.4719 19.6464 13.9954 18.4186 13.9954C18.162 13.9954 17.9604 14.197 17.9604 14.4536C17.9604 14.5544 17.9971 14.646 18.0521 14.7193C18.8859 15.828 19.3349 17.1658 19.3349 18.5768V20.4094C19.3349 20.5377 19.3257 20.666 19.3074 20.7851H19.2982Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22.0034C4.83 22.0034 4.67 21.9634 4.52 21.8834C4.2 21.7034 4 21.3734 4 21.0034V3.00339C4 2.63339 4.2 2.30339 4.52 2.12339C4.84 1.94339 5.23 1.96339 5.54 2.16339L19.54 11.1634C19.83 11.3434 20 11.6634 20 12.0034C20 12.3434 19.83 12.6634 19.54 12.8434L5.54 21.8434C5.38 21.9534 5.19 22.0034 5 22.0034Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C11.45 22 11 21.55 11 21V13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H11V3C11 2.45 11.45 2 12 2C12.55 2 13 2.45 13 3V11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13H13V21C13 21.55 12.55 22 12 22Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Revert.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.01 21.9958C11.05 21.9958 9.09 21.4058 7.46 20.3158C5.67 19.1258 4.29 17.3458 3.57 15.3158C3.39 14.7958 3.66 14.2258 4.18 14.0358C4.7 13.8558 5.27 14.1258 5.46 14.6458C6.03 16.2758 7.14 17.6958 8.57 18.6458C10 19.5958 11.75 20.0758 13.46 19.9758C15.18 19.8758 16.85 19.2058 18.17 18.0958C19.49 16.9858 20.42 15.4458 20.8 13.7658C21.18 12.0858 21.01 10.2958 20.3 8.72584C19.59 7.15584 18.38 5.82584 16.87 4.99584C15.36 4.16584 13.59 3.83584 11.88 4.07584C10.17 4.31584 8.56 5.11584 7.34 6.33584L4.52 8.98584H8C8.55 8.98584 9 9.43584 9 9.98584C9 10.5358 8.55 10.9858 8 10.9858H1.99C1.85 10.9858 1.72 10.9558 1.6 10.9058C1.49 10.8558 1.38 10.7858 1.29 10.6958C1.27 10.6758 1.25 10.6558 1.24 10.6358H1.23C1.16 10.5558 1.11 10.4658 1.07 10.3758C1.02 10.2558 1 10.1358 1 9.99584V3.98584C1 3.43584 1.45 2.98584 2 2.98584C2.55 2.98584 3 3.43584 3 3.98584V7.67584L5.96 4.89584C7.46 3.39584 9.47 2.39584 11.6 2.09584C13.73 1.79584 15.95 2.20584 17.83 3.24584C19.72 4.28584 21.24 5.94584 22.12 7.91584C23 9.88584 23.22 12.1258 22.74 14.2258C22.26 16.3258 21.09 18.2458 19.45 19.6458C17.81 21.0358 15.72 21.8758 13.57 21.9958C13.38 22.0058 13.19 22.0158 13.01 22.0158V21.9958Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Settings.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4105 10.5913C22.0309 10.2116 21.5313 10.0018 21.0018 10.0018H20.832C20.5123 10.0018 20.1926 9.90191 19.9328 9.73206C19.663 9.55223 19.4532 9.30245 19.3233 9.00272V8.9228C19.1935 8.62307 19.1535 8.28338 19.2134 7.96367C19.2734 7.64396 19.4233 7.34423 19.653 7.10445L19.713 7.0445C19.9028 6.85468 20.0427 6.63488 20.1426 6.39509C20.2425 6.15531 20.2925 5.89555 20.2925 5.62579C20.2925 5.35604 20.2425 5.10627 20.1426 4.85649C20.0427 4.61671 19.8928 4.39691 19.713 4.20708C19.5232 4.01726 19.3034 3.87738 19.0636 3.77747C18.8238 3.67757 18.564 3.62761 18.2943 3.62761C18.0245 3.62761 17.7747 3.67757 17.525 3.77747C17.2752 3.87738 17.0654 4.02725 16.8756 4.20708L16.8156 4.26703C16.5758 4.49682 16.2861 4.65668 15.9564 4.70663C15.6267 4.75658 15.297 4.72661 14.9973 4.59673C14.6975 4.46685 14.4478 4.25704 14.2679 3.98728C14.0881 3.71753 13.9982 3.40781 13.9982 3.0881V2.99818C13.9982 2.46866 13.7884 1.95913 13.4087 1.58946C13.0291 1.2198 12.5295 1 12 1C11.4705 1 10.9609 1.20981 10.5913 1.58946C10.2116 1.96912 10.0018 2.46866 10.0018 2.99818V3.16803C10.0018 3.48774 9.90191 3.80745 9.73206 4.06721C9.56222 4.32698 9.30245 4.54678 9.00272 4.67666H8.9228C8.62307 4.80654 8.28338 4.8465 7.96367 4.78656C7.64396 4.72661 7.34423 4.57675 7.10445 4.34696L7.0445 4.28701C6.85468 4.09718 6.63488 3.95731 6.39509 3.8574C6.15531 3.75749 5.89555 3.70754 5.62579 3.70754C5.35604 3.70754 5.10627 3.75749 4.85649 3.8574C4.60672 3.95731 4.39691 4.10718 4.20708 4.28701C4.01726 4.47684 3.87738 4.69664 3.77747 4.93642C3.67757 5.1762 3.62761 5.43597 3.62761 5.70572C3.62761 5.97548 3.67757 6.22525 3.77747 6.47502C3.87738 6.7248 4.02725 6.9346 4.20708 7.12443L4.26703 7.18438C4.49682 7.42416 4.65668 7.72389 4.70663 8.0436C4.76658 8.36331 4.72661 8.703 4.59673 9.00272C4.48683 9.31244 4.27702 9.5822 4.00727 9.77203C3.73751 9.96185 3.4178 10.0718 3.0881 10.0817H2.99818C2.46866 10.0817 1.95913 10.2916 1.58946 10.6712C1.2198 11.0509 1 11.5504 1 12.0799C1 12.6094 1.20981 13.119 1.58946 13.4886C1.96912 13.8583 2.46866 14.0781 2.99818 14.0781H3.16803C3.48774 14.0781 3.80745 14.178 4.06721 14.3479C4.33697 14.5277 4.54678 14.7775 4.67666 15.0772C4.80654 15.3769 4.8465 15.7166 4.78656 16.0363C4.72661 16.356 4.57675 16.6558 4.34696 16.8955L4.28701 16.9555C4.09718 17.1453 3.95731 17.3651 3.8574 17.6049C3.75749 17.8447 3.70754 18.1044 3.70754 18.3742C3.70754 18.644 3.75749 18.8937 3.8574 19.1435C3.95731 19.3933 4.10718 19.6031 4.28701 19.7929C4.47684 19.9827 4.69664 20.1226 4.93642 20.2225C5.1762 20.3224 5.43597 20.3724 5.70572 20.3724C5.97548 20.3724 6.22525 20.3224 6.47502 20.2225C6.7148 20.1226 6.9346 19.9728 7.12443 19.7929L7.18438 19.733C7.42416 19.5032 7.72389 19.3433 8.0436 19.2934C8.36331 19.2334 8.703 19.2734 9.00272 19.4033C9.31244 19.5132 9.5822 19.723 9.77203 19.9927C9.96185 20.2625 10.0718 20.5822 10.0817 20.9119V21.0018C10.0817 21.5313 10.2916 22.0409 10.6712 22.4105C11.0509 22.7902 11.5504 23 12.0799 23C12.6094 23 13.119 22.7902 13.4886 22.4105C13.8583 22.0309 14.0781 21.5313 14.0781 21.0018V20.832C14.0781 20.5123 14.178 20.1926 14.3479 19.9328C14.5177 19.673 14.7775 19.4532 15.0772 19.3233C15.3769 19.1935 15.7166 19.1535 16.0363 19.2134C16.356 19.2734 16.6558 19.4233 16.8955 19.653L16.9555 19.713C17.1453 19.9028 17.3651 20.0427 17.6049 20.1426C17.8447 20.2425 18.1045 20.2925 18.3742 20.2925C18.644 20.2925 18.8937 20.2425 19.1435 20.1426C19.3833 20.0427 19.6031 19.8928 19.7929 19.713C19.9827 19.5232 20.1226 19.3034 20.2225 19.0636C20.3224 18.8238 20.3724 18.564 20.3724 18.2943C20.3724 18.0245 20.3224 17.7747 20.2225 17.525C20.1226 17.2852 19.9728 17.0654 19.7929 16.8756L19.733 16.8156C19.5032 16.5758 19.3433 16.2761 19.2934 15.9564C19.2434 15.6367 19.2734 15.297 19.4033 14.9973C19.5331 14.6975 19.743 14.4478 20.0127 14.2679C20.2825 14.0881 20.5922 13.9982 20.9119 13.9982H21.0018C21.5313 13.9982 22.0409 13.7884 22.4105 13.4087C22.7902 13.0291 23 12.5295 23 12C23 11.4705 22.7902 10.9609 22.4105 10.5913ZM12.01 14.9973C10.3515 14.9973 9.01272 13.6585 9.01272 12C9.01272 10.3415 10.3515 9.00272 12.01 9.00272C13.6685 9.00272 15.0073 10.3415 15.0073 12C15.0073 13.6585 13.6685 14.9973 12.01 14.9973Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Side Panel.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 22H5C3.35 22 2 20.65 2 19V5C2 3.35 3.35 2 5 2H19C20.65 2 22 3.35 22 5V19C22 20.65 20.65 22 19 22ZM10 20H19C19.55 20 20 19.55 20 19V5C20 4.45 19.55 4 19 4H10V20Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Terminal.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 1H1.5C0.67 1 0 1.67 0 2.5V20.5C0 21.33 0.67 22 1.5 22H21.5C22.33 22 23 21.33 23 20.5V2.5C23 1.67 22.33 1 21.5 1ZM3.98 16.85C3.72 16.85 3.47 16.75 3.27 16.56C2.88 16.17 2.88 15.54 3.27 15.15L7.45 10.97L3.28 6.79C2.89 6.4 2.89 5.77 3.28 5.38C3.67 4.99 4.3 4.99 4.69 5.38L9.58 10.27C9.77 10.46 9.87 10.71 9.87 10.98C9.87 11.25 9.76 11.5 9.58 11.69L4.69 16.58C4.49 16.78 4.24 16.87 3.98 16.87V16.85ZM17.01 18.48H10.49C9.94 18.48 9.49 18.03 9.49 17.48C9.49 16.93 9.94 16.48 10.49 16.48H17.01C17.56 16.48 18.01 16.93 18.01 17.48C18.01 18.03 17.56 18.48 17.01 18.48Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Trash.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9V20C20 20.8 19.69 21.55 19.12 22.12C18.55 22.69 17.8 23 17 23H7C6.2 23 5.44 22.69 4.88 22.12C4.31 21.55 4 20.8 4 20V9H20ZM21 5H17V4C17 3.2 16.69 2.45 16.12 1.88C15.55 1.31 14.8 1 14 1H10C9.2 1 8.44 1.31 7.88 1.88C7.31 2.45 7 3.2 7 4V5H3C2.45 5 2 5.45 2 6C2 6.55 2.45 7 3 7H21C21.55 7 22 6.55 22 6C22 5.45 21.55 5 21 5Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/TypeScript.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4492 1.5H3.55078C2.41875 1.5 1.5 2.41875 1.5 3.55078V20.4492C1.5 21.5812 2.41875 22.5 3.55078 22.5H20.4492C21.5812 22.5 22.5 21.5812 22.5 20.4492V3.55078C22.5 2.41875 21.5812 1.5 20.4492 1.5ZM13.6817 13.1525H11.0485V20.6543H8.96077V13.1525H6.33984V11.4668H13.6817V13.1525ZM20.4861 19.3254C20.2934 19.674 20.0267 19.9571 19.6945 20.1744C19.3623 20.3918 18.9727 20.5436 18.5297 20.6379C18.0867 20.7323 17.6192 20.7773 17.1269 20.7773C16.6225 20.7773 16.1426 20.7363 15.6873 20.6502C15.2321 20.564 14.8383 20.4369 14.5019 20.2646V18.2098C14.8752 18.5215 15.2771 18.7552 15.716 18.9111C16.1508 19.067 16.5937 19.145 17.0367 19.145C17.2992 19.145 17.5248 19.1203 17.7217 19.0752C17.9144 19.0301 18.0785 18.9644 18.2098 18.8783C18.341 18.7963 18.4394 18.6979 18.501 18.583C18.5666 18.4681 18.5953 18.3451 18.5953 18.2139C18.5953 18.0334 18.542 17.8734 18.4394 17.734C18.3369 17.5945 18.1975 17.4633 18.017 17.3443C17.8406 17.2254 17.6273 17.1106 17.3854 16.9998C17.1433 16.889 16.8767 16.7742 16.5979 16.6594C15.8801 16.36 15.3427 15.995 14.99 15.5602C14.6373 15.1295 14.4609 14.6045 14.4609 13.9934C14.4609 13.5135 14.5553 13.1033 14.7481 12.7588C14.9408 12.4142 15.2033 12.1312 15.5356 11.9098C15.8678 11.6883 16.2533 11.5242 16.6881 11.4176C17.1229 11.311 17.5863 11.2617 18.0744 11.2617C18.5543 11.2617 18.9767 11.2904 19.35 11.3479C19.7191 11.4052 20.0596 11.4955 20.3754 11.6144V13.534C20.2195 13.4273 20.0514 13.333 19.8709 13.251C19.6904 13.1689 19.5017 13.1033 19.309 13.05C19.1162 12.9967 18.9235 12.9556 18.7348 12.931C18.5461 12.9065 18.3615 12.8941 18.1933 12.8941C17.9596 12.8941 17.7422 12.9146 17.5494 12.9598C17.3567 13.0048 17.1925 13.0664 17.0613 13.1484C16.93 13.2305 16.8275 13.3289 16.7537 13.4396C16.6799 13.5545 16.643 13.6817 16.643 13.8211C16.643 13.9769 16.684 14.1123 16.766 14.2354C16.8481 14.3584 16.9629 14.4733 17.1146 14.5799C17.2664 14.6906 17.4469 14.7973 17.6602 14.8998C17.8734 15.0064 18.1154 15.1131 18.3861 15.2238C18.7552 15.3797 19.0834 15.5396 19.3787 15.716C19.67 15.8883 19.9242 16.0852 20.1334 16.3025C20.3426 16.5199 20.5025 16.7702 20.6133 17.049C20.724 17.3279 20.7773 17.6602 20.7773 18.0293C20.7773 18.5461 20.6789 18.9767 20.4861 19.3254Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Upload.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 15V19C22 19.8 21.69 20.55 21.12 21.12C20.55 21.69 19.8 22 19 22H5C4.2 22 3.45 21.69 2.88 21.12C2.31 20.55 2 19.8 2 19V15C2 14.45 2.45 14 3 14H6.76L9.88 17.12C10.17 17.41 10.5 17.62 10.86 17.77C11.21 17.92 11.59 17.99 11.99 17.99C12.4 17.99 12.79 17.91 13.15 17.76C13.51 17.61 13.84 17.4 14.12 17.11L17.24 13.99H21C21.55 13.99 22 14.44 22 14.99V15ZM12 16C12.13 16 12.26 15.97 12.38 15.92C12.5 15.87 12.61 15.8 12.71 15.7L17.71 10.7C18.1 10.31 18.1 9.68 17.71 9.29C17.32 8.9 16.69 8.9 16.3 9.29L13.01 12.58V3C13.01 2.45 12.56 2 12.01 2C11.46 2 11.01 2.45 11.01 3V12.59L7.72 9.3C7.33 8.91 6.7 8.91 6.31 9.3C5.92 9.69 5.92 10.32 6.31 10.71L11.31 15.71C11.41 15.81 11.52 15.88 11.64 15.93C11.76 15.98 11.88 16 12.02 16.01L12 16Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/User.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 22C3.45 22 3 21.55 3 21V19C3 17.66 3.52 16.41 4.46 15.46C5.4 14.52 6.66 14 8 14H16C17.34 14 18.59 14.52 19.54 15.46C20.48 16.4 21 17.66 21 19V21C21 21.55 20.55 22 20 22H4ZM12 12C9.24 12 7 9.76 7 7C7 4.24 9.24 2 12 2C14.76 2 17 4.24 17 7C17 9.76 14.76 12 12 12Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/icons/Warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1C5.93 1 1 5.93 1 12C1 18.07 5.93 23 12 23C18.07 23 23 18.07 23 12C23 5.93 18.07 1 12 1ZM11 8C11 7.45 11.45 7 12 7C12.55 7 13 7.45 13 8V12C13 12.55 12.55 13 12 13C11.45 13 11 12.55 11 12V8ZM12.01 17C11.46 17 11.01 16.55 11.01 16C11.01 15.45 11.45 15 12.01 15C12.56 15 13.01 15.45 13.01 16C13.01 16.55 12.56 17 12.01 17Z" fill="currentColor"/>
+</svg>

package/fullstacked_modules/@fullstacked/ui/inputs/checkbox/index.ts

@@ -0,0 +1,28 @@
+import { startObserverInterval } from "../observer";
+
+export function InputCheckbox() {
+    startObserverInterval();
+
+    const container = document.createElement("div");
+    container.classList.add("input-checkbox");
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+
+    input.addEventListener("change", () => {
+        if (input.checked) container.classList.add("checked");
+        else container.classList.remove("checked");
+    });
+
+    const overrideUI = document.createElement("div");
+    overrideUI.onclick = () => input.click();
+
+    overrideUI.innerHTML = "<div></div>";
+
+    container.append(input, overrideUI);
+
+    return {
+        container,
+        input,
+    };
+}

package/fullstacked_modules/@fullstacked/ui/inputs/file/index.ts

@@ -0,0 +1,48 @@
+import { Button } from "../../primitives/button";
+import { startObserverInterval } from "../observer";
+import { InputOpts } from "../text";
+
+export function InputFile(opts?: Partial<InputOpts>) {
+    startObserverInterval();
+
+    const container = document.createElement("div");
+    container.classList.add("input-file");
+
+    if (opts?.label) {
+        container.innerHTML = `<label>${opts.label}</label>`;
+    }
+
+    const input = document.createElement("input");
+    input.type = "file";
+
+    container.append(input);
+
+    const overrideUI = document.createElement("div");
+
+    const fileName = document.createElement("span");
+    fileName.innerText = "No file chosen";
+
+    input.addEventListener("change", () => {
+        const file = input.files[0];
+        fileName.innerText = file?.name || "No file chosen";
+    });
+
+    const button = Button({
+        iconRight: "File",
+        text: "Select",
+    });
+
+    button.onclick = (e) => {
+        e.preventDefault();
+        input.click();
+    };
+
+    overrideUI.append(fileName, button);
+
+    container.append(overrideUI);
+
+    return {
+        container,
+        input,
+    };
+}

package/fullstacked_modules/@fullstacked/ui/inputs/inputs.scss

@@ -0,0 +1,204 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=158-3127
+*/
+@use "../values/colors.scss";
+@use "../values/spacing.scss";
+@use "../values/typography.scss";
+
+@mixin hide-input {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+}
+
+select,
+input,
+.input-predictive > div {
+    font-family: typography.$fonts;
+    background-color: colors.$light;
+    color: colors.$dark;
+    border: 0;
+    border-radius: spacing.$x-small;
+    font-size: typography.$medium;
+    padding: 6px;
+    outline-offset: 0px;
+    width: 100%;
+
+    &:focus {
+        outline: 2px solid colors.$blue;
+    }
+}
+
+.input-text,
+.input-file,
+.input-switch,
+.input-predictive,
+.input-select {
+    display: inline-flex;
+    flex-direction: column;
+    gap: spacing.$x-small;
+    font-family: typography.$fonts;
+    color: colors.$light;
+    width: 100%;
+
+    label > span {
+        font-weight: normal;
+    }
+}
+
+.input-file {
+    input {
+        @include hide-input;
+    }
+
+    > div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: spacing.$small;
+    }
+}
+
+$handle-size: 22px;
+
+$outer-size: $handle-size * 2 + 8;
+.input-switch {
+    input {
+        @include hide-input;
+    }
+
+    > div {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        user-select: none;
+        -webkit-user-select: none;
+
+        > div {
+            height: spacing.$large;
+            width: $outer-size;
+            background-color: colors.$gray;
+            padding: 4px;
+            border-radius: calc($outer-size / 2);
+            transition: 0.2s background-color;
+            cursor: pointer;
+
+            > div {
+                height: $handle-size;
+                width: $handle-size;
+                background-color: colors.$light;
+                border-radius: calc($handle-size / 2);
+                margin-left: 0;
+                transition: 0.2s margin-left;
+            }
+        }
+    }
+
+    &.checked {
+        > div {
+            > div {
+                background-color: colors.$blue;
+                > div {
+                    margin-left: $handle-size;
+                }
+            }
+        }
+    }
+}
+
+$input-radio-size: 18px;
+.input-radio,
+.input-checkbox {
+    input {
+        @include hide-input;
+    }
+
+    > div {
+        height: $input-radio-size;
+        width: $input-radio-size;
+        border-radius: 50%;
+        background-color: colors.$light;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        user-select: none;
+        -webkit-user-select: none;
+
+        cursor: pointer;
+
+        > div {
+            height: $input-radio-size - 6px;
+            width: $input-radio-size - 6px;
+            border-radius: 50%;
+        }
+    }
+
+    &.checked {
+        > div > div {
+            background-color: colors.$blue;
+        }
+    }
+}
+
+.input-checkbox {
+    > div {
+        border-radius: spacing.$x-small;
+        > div {
+            border-radius: 3px;
+        }
+    }
+}
+
+.input-predictive {
+    > div {
+        > span {
+            color: colors.$gray;
+        }
+    }
+}
+
+.input-select {
+    .select-container {
+        position: relative;
+        width: 100%;
+        > div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+            top: 3px;
+            right: 3px;
+            height: 24px;
+            width: 24px;
+            position: absolute;
+            background-color: colors.$blue;
+            border-radius: spacing.$x-small;
+            .icon {
+                height: 16px;
+                width: 16px;
+                transform: rotate(-90deg);
+            }
+        }
+        > select {
+            -webkit-appearance: none;
+            cursor: pointer;
+            width: 100%;
+            height: 30px;
+            font-size: typography.$small;
+            box-shadow: none;
+            color: colors.$dark;
+            &.invalid {
+                color: colors.$gray;
+            }
+        }
+    }
+}

package/fullstacked_modules/@fullstacked/ui/inputs/observer.ts

@@ -0,0 +1,36 @@
+// input observer
+const updateOverriddenInputs = () => {
+    const inputsChecked = document.querySelectorAll<HTMLInputElement>(
+        "input[type=checkbox], input[type=radio]",
+    );
+    inputsChecked.forEach((input) => {
+        const parent = input.parentElement;
+        if (input.checked) parent.classList.add("checked");
+        else parent.classList.remove("checked");
+    });
+
+    const inputsFile =
+        document.querySelectorAll<HTMLInputElement>("input[type=file]");
+    inputsFile.forEach((inputFile) => {
+        const file = inputFile.files[0];
+        const fileName = inputFile.nextElementSibling
+            ?.children?.[0] as HTMLSpanElement;
+        if (!fileName) return;
+        fileName.innerText = file?.name || "No file chosen";
+    });
+
+    const inputsSelect = document.querySelectorAll<HTMLSelectElement>("select");
+    inputsSelect.forEach((inputSelect) => {
+        if (inputSelect.selectedIndex) {
+            inputSelect.classList.remove("invalid");
+        } else {
+            inputSelect.classList.add("invalid");
+        }
+    });
+};
+
+let interval: ReturnType<typeof setInterval> = null;
+export function startObserverInterval() {
+    if (interval) return;
+    interval = setInterval(updateOverriddenInputs, 100);
+}

package/fullstacked_modules/@fullstacked/ui/inputs/predictive/index.ts

@@ -0,0 +1,195 @@
+type InputPredictiveOpts = {
+    label: string;
+    onChange: (value: string) => string[] | Promise<string[]>;
+};
+
+const SPACE = String.fromCharCode(160);
+
+export function InputPredictive(opts: Partial<InputPredictiveOpts>) {
+    const container = document.createElement("div");
+    container.classList.add("input-predictive");
+
+    if (opts?.label) {
+        container.innerHTML = `<label>${opts.label}</label>`;
+    }
+
+    const input = document.createElement("div");
+    input.contentEditable = "true";
+    input.autocapitalize = "off";
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("autocorrect", "off");
+
+    let prediction: HTMLSpanElement = document.createElement("span");
+    prediction.contentEditable = "false";
+    input.append(prediction);
+
+    const spaceRegex = new RegExp(SPACE, "g");
+
+    let predictions: string[] = [];
+    let predictionIndex = 0;
+
+    const prevPrediction = () => {
+        if (predictionIndex === 0) {
+            return;
+        }
+        predictionIndex -= 1;
+        prediction.innerText = predictions.at(predictionIndex);
+    };
+
+    const nextPrediction = () => {
+        if (predictionIndex === predictions.length - 1) {
+            return;
+        }
+        predictionIndex += 1;
+        prediction.innerText = predictions.at(predictionIndex);
+    };
+
+    const predict = async () => {
+        Array.from(input.children).forEach((child) => {
+            if (child.innerHTML === "" || child instanceof HTMLBRElement) {
+                child.remove();
+            }
+        });
+
+        if (prediction.getBoundingClientRect().height == 0) {
+            input.append(prediction);
+        }
+
+        let value = input.innerText.replace(spaceRegex, " ");
+
+        const prevP = prediction.innerText;
+        if (prevP) {
+            value = value.slice(0, 0 - prevP.length);
+        }
+
+        const onChangeResult = opts?.onChange?.(value);
+
+        if (onChangeResult instanceof Promise) {
+            predictions = await onChangeResult
+        } else {
+            predictions = onChangeResult
+        }
+
+        predictions = predictions.map(p => p.replace(/ /g, SPACE))
+
+        if (predictions.length) {
+            predictionIndex = 0;
+            prediction.innerText = predictions.at(predictionIndex);
+        } else {
+            prediction.innerText = "";
+        }
+    };
+
+    const replaceCursor = () => {
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (input.childNodes?.[0]) {
+            range.setStart(input.childNodes[0], getValue().length);
+        } else {
+            range.setStart(input, 0);
+        }
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+
+    const getCursorPos = () => {
+        const sel = window.getSelection();
+        return sel.anchorOffset;
+    }
+
+    const applyPrediction = () => {
+        const p = prediction?.innerText || "";
+        if (p) {
+            prediction.innerText = "";
+            input.innerText += p;
+            replaceCursor();
+        }
+    };
+
+    prediction.onclick = () => {
+        applyPrediction();
+    };
+    input.onpaste = () => {
+        prediction.innerText = "";
+        setTimeout(() => {
+            input.innerText = input.innerText;
+            predict();
+        });
+    };
+
+    input.onblur = () => {
+        prediction.remove();
+    };
+    input.onfocus = () => {
+        predict();
+
+        let value = input.innerText;
+        const prevP = prediction.innerText;
+        if (prevP) {
+            value = value.slice(0, 0 - prevP.length);
+        }
+
+        if (value) {
+            setTimeout(replaceCursor);
+        }
+    };
+    input.onkeyup = (e) => {
+        const { key } = e;
+        if (key === "ArrowUp" || key === "ArrowDown") {
+            return;
+        }
+        predict();
+    };
+
+    input.onkeydown = (e: KeyboardEvent) => {
+        const { key } = e;
+
+        if (key === "ArrowUp" || key === "ArrowDown") {
+            e.preventDefault();
+            return key === "ArrowUp" ? prevPrediction() : nextPrediction();
+        }
+
+        const prevP = prediction.innerText;
+        if (e.key === "Tab") {
+            e.preventDefault();
+
+            if (prediction.innerText != "") {
+                applyPrediction();
+            } else if (input.innerText && input.innerText.at(-1) !== SPACE) {
+                input.innerText += SPACE;
+                replaceCursor();
+            }
+
+        } else if (
+            e.key === "ArrowRight" && 
+            prediction.innerText &&
+            getCursorPos() === getValue().length
+        ) {
+            e.preventDefault();
+            applyPrediction();
+        } else if (prevP && key == prevP.at(0)) {
+            prediction.innerText = prediction.innerText.slice(1);
+        } else {
+            prediction.innerText = "";
+        }
+    };
+
+    const getValue = () => {
+        const clone = input.cloneNode(true) as HTMLDivElement;
+        clone.querySelector("span")?.remove();
+        return clone.innerText.replace(spaceRegex, " ");
+    }
+
+    container.append(input);
+
+    return {
+        container,
+        input,
+        getValue,
+        clear: () => {
+            input.innerText = ""
+            replaceCursor();
+        }
+    };
+}

package/fullstacked_modules/@fullstacked/ui/inputs/radio/index.ts

@@ -0,0 +1,28 @@
+import { startObserverInterval } from "../observer";
+
+export function InputRadio() {
+    startObserverInterval();
+    
+    const container = document.createElement("div");
+    container.classList.add("input-radio");
+
+    const input = document.createElement("input");
+    input.type = "radio";
+
+    input.addEventListener("change", () => {
+        if (input.checked) container.classList.add("checked");
+        else container.classList.remove("checked");
+    });
+
+    const overrideUI = document.createElement("div");
+    overrideUI.onclick = () => input.click();
+
+    overrideUI.innerHTML = "<div></div>";
+
+    container.append(input, overrideUI);
+
+    return {
+        container,
+        input
+    };
+}