koin.js 1.0.7 → 1.0.9

package/dist/styles.css

@@ -282,6 +282,10 @@
   right: 0.625rem;
 }
 
+.koin-scope .right-3 {
+  right: 0.75rem;
+}
+
 .koin-scope .right-4 {
   right: 1rem;
 }
@@ -342,6 +346,10 @@
   z-index: 60;
 }
 
+.koin-scope .z-\[9998\] {
+  z-index: 9998;
+}
+
 .koin-scope .z-\[9999\] {
   z-index: 9999;
 }
@@ -370,6 +378,11 @@
   margin-right: auto;
 }
 
+.koin-scope .my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .koin-scope .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -471,10 +484,6 @@
   height: 2.5rem;
 }
 
-.koin-scope .h-11 {
-  height: 2.75rem;
-}
-
 .koin-scope .h-12 {
   height: 3rem;
 }
@@ -523,14 +532,14 @@
   height: 20rem;
 }
 
-.koin-scope .h-9 {
-  height: 2.25rem;
-}
-
 .koin-scope .h-full {
   height: 100%;
 }
 
+.koin-scope .h-px {
+  height: 1px;
+}
+
 .koin-scope .h-screen {
   height: 100vh;
 }
@@ -563,10 +572,6 @@
   width: 2.5rem;
 }
 
-.koin-scope .w-11 {
-  width: 2.75rem;
-}
-
 .koin-scope .w-12 {
   width: 3rem;
 }
@@ -623,10 +628,6 @@
   width: 20rem;
 }
 
-.koin-scope .w-9 {
-  width: 2.25rem;
-}
-
 .koin-scope .w-\[320px\] {
   width: 320px;
 }
@@ -667,6 +668,11 @@
   min-width: 80px;
 }
 
+.koin-scope .min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
 .koin-scope .max-w-\[120px\] {
   max-width: 120px;
 }
@@ -736,11 +742,6 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.koin-scope .translate-x-\[3px\] {
-  --tw-translate-x: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .koin-scope .translate-x-full {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -751,11 +752,6 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.koin-scope .translate-y-\[3px\] {
-  --tw-translate-y: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .koin-scope .translate-y-full {
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1021,6 +1017,10 @@
   border-radius: 0.25rem;
 }
 
+.koin-scope .rounded-2xl {
+  border-radius: 1rem;
+}
+
 .koin-scope .rounded-full {
   border-radius: 9999px;
 }
@@ -1063,11 +1063,6 @@
   border-width: 4px;
 }
 
-.koin-scope .border-x {
-  border-left-width: 1px;
-  border-right-width: 1px;
-}
-
 .koin-scope .border-b {
   border-bottom-width: 1px;
 }
@@ -1121,6 +1116,15 @@
   border-color: rgb(31 41 55 / 0.5);
 }
 
+.koin-scope .border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
+}
+
+.koin-scope .border-green-400\/80 {
+  border-color: rgb(74 222 128 / 0.8);
+}
+
 .koin-scope .border-green-500\/20 {
   border-color: rgb(34 197 94 / 0.2);
 }
@@ -1134,6 +1138,10 @@
   border-color: rgb(168 85 247 / 0.5);
 }
 
+.koin-scope .border-red-400\/60 {
+  border-color: rgb(248 113 113 / 0.6);
+}
+
 .koin-scope .border-red-500\/20 {
   border-color: rgb(239 68 68 / 0.2);
 }
@@ -1146,6 +1154,10 @@
   border-color: rgb(239 68 68 / 0.5);
 }
 
+.koin-scope .border-transparent {
+  border-color: transparent;
+}
+
 .koin-scope .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
@@ -1159,6 +1171,10 @@
   border-color: rgb(255 255 255 / 0.2);
 }
 
+.koin-scope .border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
 .koin-scope .border-white\/5 {
   border-color: rgb(255 255 255 / 0.05);
 }
@@ -1167,8 +1183,8 @@
   border-color: rgb(255 255 255 / 0.5);
 }
 
-.koin-scope .border-white\/80 {
-  border-color: rgb(255 255 255 / 0.8);
+.koin-scope .border-white\/60 {
+  border-color: rgb(255 255 255 / 0.6);
 }
 
 .koin-scope .border-yellow-500\/20 {
@@ -1183,6 +1199,46 @@
   border-color: rgb(234 179 8 / 0.5);
 }
 
+.koin-scope .bg-\[\#0033CC\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 51 204 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#006600\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 102 0 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#0068B7\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 104 183 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#009944\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 153 68 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#CC0000\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 0 0 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#CCCC00\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 0 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#E60012\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 0 18 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .bg-\[\#FFD600\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 214 0 / var(--tw-bg-opacity, 1));
+}
+
 .koin-scope .bg-amber-500\/90 {
   background-color: rgb(245 158 11 / 0.9);
 }
@@ -1200,10 +1256,18 @@
   background-color: rgb(0 0 0 / 0.3);
 }
 
+.koin-scope .bg-black\/40 {
+  background-color: rgb(0 0 0 / 0.4);
+}
+
 .koin-scope .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
 
+.koin-scope .bg-black\/60 {
+  background-color: rgb(0 0 0 / 0.6);
+}
+
 .koin-scope .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1224,11 +1288,6 @@
   background-color: rgb(59 130 246 / 0.1);
 }
 
-.koin-scope .bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
-}
-
 .koin-scope .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
@@ -1281,6 +1340,10 @@
   background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
 }
 
+.koin-scope .bg-green-500\/20 {
+  background-color: rgb(34 197 94 / 0.2);
+}
+
 .koin-scope .bg-orange-500\/20 {
   background-color: rgb(249 115 22 / 0.2);
 }
@@ -1307,11 +1370,6 @@
   background-color: rgb(239 68 68 / 0.2);
 }
 
-.koin-scope .bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
-
 .koin-scope .bg-red-900\/80 {
   background-color: rgb(127 29 29 / 0.8);
 }
@@ -1341,6 +1399,10 @@
   background-color: rgb(255 255 255 / 0.05);
 }
 
+.koin-scope .bg-white\/90 {
+  background-color: rgb(255 255 255 / 0.9);
+}
+
 .koin-scope .bg-yellow-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
@@ -1501,6 +1563,11 @@
   padding-right: 1.5rem;
 }
 
+.koin-scope .px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .koin-scope .py-0\.5 {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1681,6 +1748,26 @@
   letter-spacing: 0.1em;
 }
 
+.koin-scope .text-\[\#25D998\] {
+  --tw-text-opacity: 1;
+  color: rgb(37 217 152 / var(--tw-text-opacity, 1));
+}
+
+.koin-scope .text-\[\#5599FF\] {
+  --tw-text-opacity: 1;
+  color: rgb(85 153 255 / var(--tw-text-opacity, 1));
+}
+
+.koin-scope .text-\[\#E889DD\] {
+  --tw-text-opacity: 1;
+  color: rgb(232 137 221 / var(--tw-text-opacity, 1));
+}
+
+.koin-scope .text-\[\#FF5555\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 85 85 / var(--tw-text-opacity, 1));
+}
+
 .koin-scope .text-amber-400 {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -1917,18 +2004,18 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.koin-scope .shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .koin-scope .shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.koin-scope .shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .koin-scope .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1953,6 +2040,14 @@
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.koin-scope .ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.koin-scope .ring-white\/30 {
+  --tw-ring-color: rgb(255 255 255 / 0.3);
+}
+
 .koin-scope .ring-yellow-500\/30 {
   --tw-ring-color: rgb(234 179 8 / 0.3);
 }
@@ -1971,11 +2066,26 @@
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.koin-scope .drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .koin-scope .drop-shadow-\[0_0_8px_rgba\(234\2c 179\2c 8\2c 0\.7\)\] {
   --tw-drop-shadow: drop-shadow(0 0 8px rgba(234,179,8,0.7));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.koin-scope .drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.koin-scope .drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .koin-scope .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2030,10 +2140,6 @@
   transition-duration: 150ms;
 }
 
-.koin-scope .duration-100 {
-  transition-duration: 100ms;
-}
-
 .koin-scope .duration-1000 {
   transition-duration: 1000ms;
 }
@@ -2112,6 +2218,11 @@
   background-color: rgb(31 41 55 / 0.3);
 }
 
+.koin-scope .hover\:bg-green-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
+}
+
 .koin-scope .hover\:bg-orange-500\/30:hover {
   background-color: rgb(249 115 22 / 0.3);
 }
@@ -2160,11 +2271,6 @@
   color: rgb(252 165 165 / var(--tw-text-opacity, 1));
 }
 
-.koin-scope .hover\:text-red-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
-}
-
 .koin-scope .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -2189,21 +2295,11 @@
   outline-offset: 2px;
 }
 
-.koin-scope .active\:translate-x-\[3px\]:active {
-  --tw-translate-x: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .koin-scope .active\:translate-y-0:active {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.koin-scope .active\:translate-y-\[3px\]:active {
-  --tw-translate-y: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .koin-scope .active\:scale-90:active {
   --tw-scale-x: .9;
   --tw-scale-y: .9;
@@ -2216,6 +2312,15 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.koin-scope .active\:bg-green-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.koin-scope .active\:bg-white\/20:active {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
 .koin-scope .active\:shadow-none:active {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -2425,6 +2530,27 @@
     display: none;
   }
 
+  .koin-scope .sm\:w-auto {
+    width: auto;
+  }
+
+  .koin-scope .sm\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .koin-scope .sm\:gap-3 {
+    gap: 0.75rem;
+  }
+
+  .koin-scope .sm\:border-x {
+    border-left-width: 1px;
+    border-right-width: 1px;
+  }
+
+  .koin-scope .sm\:border-white\/10 {
+    border-color: rgb(255 255 255 / 0.1);
+  }
+
   .koin-scope .sm\:px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "koin.js",
-    "version": "1.0.7",
-    "description": "The drop-in React component for browser-based retro game emulation. 27 systems. Cloud saves. Zero backend required.",
+    "version": "1.0.9",
+    "description": "The drop-in React component for browser-based retro game emulation. 28 systems. Cloud saves. Zero backend required.",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/muditjuneja/koin-deck-retro-player"
+        "url": "https://github.com/muditjuneja/koin"
     },
     "style": "dist/styles.css",
     "scripts": {