koin.js 1.0.8 → 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;
 }
@@ -480,10 +484,6 @@
   height: 2.5rem;
 }
 
-.koin-scope .h-11 {
-  height: 2.75rem;
-}
-
 .koin-scope .h-12 {
   height: 3rem;
 }
@@ -532,10 +532,6 @@
   height: 20rem;
 }
 
-.koin-scope .h-9 {
-  height: 2.25rem;
-}
-
 .koin-scope .h-full {
   height: 100%;
 }
@@ -576,10 +572,6 @@
   width: 2.5rem;
 }
 
-.koin-scope .w-11 {
-  width: 2.75rem;
-}
-
 .koin-scope .w-12 {
   width: 3rem;
 }
@@ -636,10 +628,6 @@
   width: 20rem;
 }
 
-.koin-scope .w-9 {
-  width: 2.25rem;
-}
-
 .koin-scope .w-\[320px\] {
   width: 320px;
 }
@@ -754,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));
@@ -769,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));
@@ -1039,6 +1017,10 @@
   border-radius: 0.25rem;
 }
 
+.koin-scope .rounded-2xl {
+  border-radius: 1rem;
+}
+
 .koin-scope .rounded-full {
   border-radius: 9999px;
 }
@@ -1134,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);
 }
@@ -1147,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);
 }
@@ -1176,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);
 }
@@ -1184,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 {
@@ -1200,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);
 }
@@ -1217,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);
 }
@@ -1241,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));
@@ -1298,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);
 }
@@ -1324,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);
 }
@@ -1358,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));
@@ -1703,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));
@@ -1939,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);
@@ -1979,6 +2044,10 @@
   --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);
 }
@@ -1997,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);
@@ -2056,10 +2140,6 @@
   transition-duration: 150ms;
 }
 
-.koin-scope .duration-100 {
-  transition-duration: 100ms;
-}
-
 .koin-scope .duration-1000 {
   transition-duration: 1000ms;
 }
@@ -2138,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);
 }
@@ -2210,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;
@@ -2237,6 +2312,11 @@
   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);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "koin.js",
-    "version": "1.0.8",
+    "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",