@memelabui/ui 0.5.1 → 0.6.1

package/dist/styles/index.css

@@ -687,6 +687,17 @@ a {
     );
   }
 /* Gradient text */
+.text-gradient {
+    background: linear-gradient(
+      135deg,
+      rgb(var(--ml-accent, 102 126 234)) 0%,
+      rgb(var(--ml-glow-purple, 118 75 162)) 50%,
+      rgb(var(--ml-glow-pink, 240 147 251)) 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
 /* Animated gradient background */
 .animated-gradient {
     background: linear-gradient(
@@ -718,6 +729,13 @@ a {
     padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   }
 /* Hide scrollbar */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 /* Soft link */
 .sr-only {
   position: absolute;
@@ -757,6 +775,14 @@ a {
 .inset-0 {
   inset: 0px;
 }
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .-left-32 {
   left: -8rem;
 }
@@ -945,6 +971,15 @@ a {
 .h-1\.5 {
   height: 0.375rem;
 }
+.h-1\/2 {
+  height: 50%;
+}
+.h-1\/3 {
+  height: 33.333333%;
+}
+.h-1\/4 {
+  height: 25%;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -969,6 +1004,9 @@ a {
 .h-20 {
   height: 5rem;
 }
+.h-28 {
+  height: 7rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -981,6 +1019,9 @@ a {
 .h-4 {
   height: 1rem;
 }
+.h-40 {
+  height: 10rem;
+}
 .h-5 {
   height: 1.25rem;
 }
@@ -1017,6 +1058,15 @@ a {
 .h-full {
   height: 100%;
 }
+.h-screen {
+  height: 100vh;
+}
+.max-h-60 {
+  max-height: 15rem;
+}
+.min-h-\[320px\] {
+  min-height: 320px;
+}
 .min-h-\[42px\] {
   min-height: 42px;
 }
@@ -1077,6 +1127,9 @@ a {
 .w-5\/6 {
   width: 83.333333%;
 }
+.w-56 {
+  width: 14rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -1098,9 +1151,15 @@ a {
 .w-9 {
   width: 2.25rem;
 }
+.w-96 {
+  width: 24rem;
+}
 .w-\[300px\] {
   width: 300px;
 }
+.w-\[360px\] {
+  width: 360px;
+}
 .w-\[3px\] {
   width: 3px;
 }
@@ -1113,6 +1172,9 @@ a {
 .w-\[600px\] {
   width: 600px;
 }
+.w-\[900px\] {
+  width: 900px;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -1120,9 +1182,15 @@ a {
 .w-full {
   width: 100%;
 }
+.w-screen {
+  width: 100vw;
+}
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-52 {
+  min-width: 13rem;
+}
 .min-w-\[10rem\] {
   min-width: 10rem;
 }
@@ -1132,6 +1200,9 @@ a {
 .min-w-\[16px\] {
   min-width: 16px;
 }
+.min-w-\[180px\] {
+  min-width: 180px;
+}
 .min-w-\[18px\] {
   min-width: 18px;
 }
@@ -1165,9 +1236,15 @@ a {
 .max-w-full {
   max-width: 100%;
 }
+.max-w-lg {
+  max-width: 32rem;
+}
 .max-w-md {
   max-width: 28rem;
 }
+.max-w-xl {
+  max-width: 36rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1193,6 +1270,10 @@ a {
   --tw-translate-y: -50%;
   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));
 }
+.-translate-y-2 {
+  --tw-translate-y: -0.5rem;
+  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));
+}
 .translate-x-0 {
   --tw-translate-x: 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));
@@ -1209,10 +1290,22 @@ a {
   --tw-translate-x: 2rem;
   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));
 }
+.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));
+}
 .translate-y-0 {
   --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));
 }
+.translate-y-2 {
+  --tw-translate-y: 0.5rem;
+  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));
+}
+.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));
+}
 .-rotate-90 {
   --tw-rotate: -90deg;
   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));
@@ -1229,6 +1322,11 @@ a {
   --tw-skew-x: -20deg;
   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));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -1357,6 +1455,15 @@ a {
 .items-center {
   align-items: center;
 }
+.items-baseline {
+  align-items: baseline;
+}
+.items-stretch {
+  align-items: stretch;
+}
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1366,6 +1473,15 @@ a {
 .justify-between {
   justify-content: space-between;
 }
+.justify-around {
+  justify-content: space-around;
+}
+.justify-evenly {
+  justify-content: space-evenly;
+}
+.gap-0 {
+  gap: 0px;
+}
 .gap-0\.5 {
   gap: 0.125rem;
 }
@@ -1375,6 +1491,12 @@ a {
 .gap-1\.5 {
   gap: 0.375rem;
 }
+.gap-10 {
+  gap: 2.5rem;
+}
+.gap-12 {
+  gap: 3rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1387,6 +1509,15 @@ a {
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
+.gap-6 {
+  gap: 1.5rem;
+}
+.gap-8 {
+  gap: 2rem;
+}
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1431,12 +1562,24 @@ a {
 .self-stretch {
   align-self: stretch;
 }
+.overflow-auto {
+  overflow: auto;
+}
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1567,6 +1710,9 @@ a {
 .bg-black\/25 {
   background-color: rgb(0 0 0 / 0.25);
 }
+.bg-black\/40 {
+  background-color: rgb(0 0 0 / 0.4);
+}
 .bg-emerald-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
@@ -1637,6 +1783,10 @@ a {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--ml-surface-300) / var(--tw-bg-opacity, 1));
 }
+.bg-surface-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-surface-50) / var(--tw-bg-opacity, 1));
+}
 .bg-surface-50\/80 {
   background-color: rgb(var(--ml-surface-50) / 0.8);
 }
@@ -1727,9 +1877,15 @@ a {
 .p-2\.5 {
   padding: 0.625rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
+.p-5 {
+  padding: 1.25rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
@@ -1879,6 +2035,9 @@ a {
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -1898,6 +2057,9 @@ a {
 .leading-snug {
   line-height: 1.375;
 }
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -1929,6 +2091,10 @@ a {
   --tw-text-opacity: 1;
   color: rgb(var(--ml-primary) / var(--tw-text-opacity, 1));
 }
+.text-primary-light {
+  --tw-text-opacity: 1;
+  color: rgb(var(--ml-primary-light) / var(--tw-text-opacity, 1));
+}
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
@@ -2017,6 +2183,11 @@ a {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-glow {
   --tw-shadow: var(--ml-shadow-glow);
   --tw-shadow-colored: var(--ml-shadow-glow);
@@ -2088,6 +2259,9 @@ a {
 .ring-primary\/20 {
   --tw-ring-color: rgb(var(--ml-primary) / 0.2);
 }
+.ring-primary\/30 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.3);
+}
 .ring-primary\/40 {
   --tw-ring-color: rgb(var(--ml-primary) / 0.4);
 }
@@ -2097,6 +2271,9 @@ a {
 .ring-rose-500\/40 {
   --tw-ring-color: rgb(244 63 94 / 0.4);
 }
+.ring-rose-500\/50 {
+  --tw-ring-color: rgb(244 63 94 / 0.5);
+}
 .ring-white\/10 {
   --tw-ring-color: rgb(255 255 255 / 0.1);
 }
@@ -2291,6 +2468,9 @@ a {
 .hover\:text-white\/50:hover {
   color: rgb(255 255 255 / 0.5);
 }
+.hover\:text-white\/60:hover {
+  color: rgb(255 255 255 / 0.6);
+}
 .hover\:text-white\/70:hover {
   color: rgb(255 255 255 / 0.7);
 }
@@ -2333,15 +2513,26 @@ a {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:ring-1:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus-visible\:ring-inset:focus-visible {
+  --tw-ring-inset: inset;
+}
 .focus-visible\:ring-primary:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(var(--ml-primary) / var(--tw-ring-opacity, 1));
 }
+.focus-visible\:ring-primary\/30:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.3);
+}
 .focus-visible\:ring-primary\/40:focus-visible {
   --tw-ring-color: rgb(var(--ml-primary) / 0.4);
 }
@@ -2429,6 +2620,10 @@ a {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 @media (min-width: 768px) {
   .md\:grid-cols-2 {
@@ -2483,6 +2678,24 @@ a {
 .\[\&\:\:-moz-range-track\]\:bg-transparent::-moz-range-track {
   background-color: transparent;
 }
+.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+}
+.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/15::-webkit-scrollbar-thumb {
+  background-color: rgb(255 255 255 / 0.15);
+}
+.hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/25::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(255 255 255 / 0.25);
+}
+.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.\[\&\:\:-webkit-scrollbar\]\:h-1\.5::-webkit-scrollbar {
+  height: 0.375rem;
+}
+.\[\&\:\:-webkit-scrollbar\]\:w-1\.5::-webkit-scrollbar {
+  width: 0.375rem;
+}
 .\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb {
   height: 1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memelabui/ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "MemeLab shared UI component library — React + Tailwind + Glassmorphism",
   "type": "module",
   "sideEffects": [