@memelabui/ui 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -707,7 +707,7 @@ var Slider = React.forwardRef(function Slider2({
     if (numMax === numMin) return 0;
     return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
   }, [numericValue, min, max]);
-  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const trackGradient = `linear-gradient(to right, rgb(var(--ml-primary, 139 92 246)) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
   const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
@@ -739,7 +739,7 @@ var Slider = React.forwardRef(function Slider2({
         "[&::-webkit-slider-thumb]:rounded-full",
         "[&::-webkit-slider-thumb]:bg-white",
         "[&::-webkit-slider-thumb]:border-2",
-        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-webkit-slider-thumb]:transition-shadow",
         "[&::-webkit-slider-thumb]:duration-150",
         // Moz thumb
@@ -748,7 +748,7 @@ var Slider = React.forwardRef(function Slider2({
         "[&::-moz-range-thumb]:rounded-full",
         "[&::-moz-range-thumb]:bg-white",
         "[&::-moz-range-thumb]:border-2",
-        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-moz-range-thumb]:transition-shadow",
         "[&::-moz-range-thumb]:duration-150",
         // Moz track — transparent so the gradient on the element shows through
@@ -2458,7 +2458,7 @@ function StageProgress({ stages, activeStage, className }) {
               ) })
             ) : isActive ? (
               // Active: primary dot with ring
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[rgb(var(--ml-primary))] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--ml-primary))]" }) })
             ) : (
               // Upcoming: hollow dim dot
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
@@ -2481,7 +2481,7 @@ function StageProgress({ stages, activeStage, className }) {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            className: "h-full rounded-full bg-gradient-to-r from-[rgb(var(--ml-accent))] to-[rgb(var(--ml-primary))] transition-[width] duration-500 ease-in-out",
             style: { width: `${fillPercent}%` },
             children: isAnimating && /* @__PURE__ */ jsxRuntime.jsx(
               "span",

package/dist/index.js

@@ -701,7 +701,7 @@ var Slider = forwardRef(function Slider2({
     if (numMax === numMin) return 0;
     return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
   }, [numericValue, min, max]);
-  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const trackGradient = `linear-gradient(to right, rgb(var(--ml-primary, 139 92 246)) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
   const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
@@ -733,7 +733,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-webkit-slider-thumb]:rounded-full",
         "[&::-webkit-slider-thumb]:bg-white",
         "[&::-webkit-slider-thumb]:border-2",
-        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-webkit-slider-thumb]:transition-shadow",
         "[&::-webkit-slider-thumb]:duration-150",
         // Moz thumb
@@ -742,7 +742,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-moz-range-thumb]:rounded-full",
         "[&::-moz-range-thumb]:bg-white",
         "[&::-moz-range-thumb]:border-2",
-        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-moz-range-thumb]:transition-shadow",
         "[&::-moz-range-thumb]:duration-150",
         // Moz track — transparent so the gradient on the element shows through
@@ -2452,7 +2452,7 @@ function StageProgress({ stages, activeStage, className }) {
               ) })
             ) : isActive ? (
               // Active: primary dot with ring
-              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[rgb(var(--ml-primary))] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--ml-primary))]" }) })
             ) : (
               // Upcoming: hollow dim dot
               /* @__PURE__ */ jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
@@ -2475,7 +2475,7 @@ function StageProgress({ stages, activeStage, className }) {
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            className: "h-full rounded-full bg-gradient-to-r from-[rgb(var(--ml-accent))] to-[rgb(var(--ml-primary))] transition-[width] duration-500 ease-in-out",
             style: { width: `${fillPercent}%` },
             children: isAnimating && /* @__PURE__ */ jsx(
               "span",

package/dist/preset/index.cjs

@@ -1,37 +1,38 @@
 'use strict';
 
 // src/preset/index.ts
+var rgb = (cssVar) => `rgb(var(${cssVar}) / <alpha-value>)`;
 var memelabPreset = {
   darkMode: "class",
   theme: {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "var(--ml-bg)",
-          0: "var(--ml-surface-0)",
-          50: "var(--ml-surface-50)",
-          100: "var(--ml-surface-100)",
-          200: "var(--ml-surface-200)",
-          300: "var(--ml-surface-300)",
-          400: "var(--ml-surface-400)"
+          DEFAULT: rgb("--ml-bg"),
+          0: rgb("--ml-surface-0"),
+          50: rgb("--ml-surface-50"),
+          100: rgb("--ml-surface-100"),
+          200: rgb("--ml-surface-200"),
+          300: rgb("--ml-surface-300"),
+          400: rgb("--ml-surface-400")
         },
         primary: {
-          DEFAULT: "var(--ml-primary)",
-          light: "var(--ml-primary-light)",
-          dark: "var(--ml-primary-dark)"
+          DEFAULT: rgb("--ml-primary"),
+          light: rgb("--ml-primary-light"),
+          dark: rgb("--ml-primary-dark")
         },
         accent: {
-          DEFAULT: "var(--ml-accent)",
-          light: "var(--ml-accent-light)",
-          dark: "var(--ml-accent-dark)"
+          DEFAULT: rgb("--ml-accent"),
+          light: rgb("--ml-accent-light"),
+          dark: rgb("--ml-accent-dark")
         },
         glow: {
-          purple: "var(--ml-glow-purple)",
-          pink: "var(--ml-glow-pink)"
+          purple: rgb("--ml-glow-purple"),
+          pink: rgb("--ml-glow-pink")
         },
-        success: "var(--ml-success)",
-        warning: "var(--ml-warning)",
-        danger: "var(--ml-danger)"
+        success: rgb("--ml-success"),
+        warning: rgb("--ml-warning"),
+        danger: rgb("--ml-danger")
       },
       fontFamily: {
         sans: ["var(--ml-font-sans)"]

package/dist/preset/index.js

@@ -1,35 +1,36 @@
 // src/preset/index.ts
+var rgb = (cssVar) => `rgb(var(${cssVar}) / <alpha-value>)`;
 var memelabPreset = {
   darkMode: "class",
   theme: {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "var(--ml-bg)",
-          0: "var(--ml-surface-0)",
-          50: "var(--ml-surface-50)",
-          100: "var(--ml-surface-100)",
-          200: "var(--ml-surface-200)",
-          300: "var(--ml-surface-300)",
-          400: "var(--ml-surface-400)"
+          DEFAULT: rgb("--ml-bg"),
+          0: rgb("--ml-surface-0"),
+          50: rgb("--ml-surface-50"),
+          100: rgb("--ml-surface-100"),
+          200: rgb("--ml-surface-200"),
+          300: rgb("--ml-surface-300"),
+          400: rgb("--ml-surface-400")
         },
         primary: {
-          DEFAULT: "var(--ml-primary)",
-          light: "var(--ml-primary-light)",
-          dark: "var(--ml-primary-dark)"
+          DEFAULT: rgb("--ml-primary"),
+          light: rgb("--ml-primary-light"),
+          dark: rgb("--ml-primary-dark")
         },
         accent: {
-          DEFAULT: "var(--ml-accent)",
-          light: "var(--ml-accent-light)",
-          dark: "var(--ml-accent-dark)"
+          DEFAULT: rgb("--ml-accent"),
+          light: rgb("--ml-accent-light"),
+          dark: rgb("--ml-accent-dark")
         },
         glow: {
-          purple: "var(--ml-glow-purple)",
-          pink: "var(--ml-glow-pink)"
+          purple: rgb("--ml-glow-purple"),
+          pink: rgb("--ml-glow-pink")
         },
-        success: "var(--ml-success)",
-        warning: "var(--ml-warning)",
-        danger: "var(--ml-danger)"
+        success: rgb("--ml-success"),
+        warning: rgb("--ml-warning"),
+        danger: rgb("--ml-danger")
       },
       fontFamily: {
         sans: ["var(--ml-font-sans)"]

package/dist/styles/index.css

@@ -1,15 +1,15 @@
 :root {
   /* ---- Background ---- */
-  --ml-bg: #0a0a0f;
-  --ml-fg: #f9fafb;
+  --ml-bg: 10 10 15;
+  --ml-fg: 249 250 251;
 
   /* ---- Surface scale ---- */
-  --ml-surface-0: #0a0a0f;
-  --ml-surface-50: #0f0f18;
-  --ml-surface-100: #141420;
-  --ml-surface-200: #1a1a2e;
-  --ml-surface-300: #24243a;
-  --ml-surface-400: #2a2a4a;
+  --ml-surface-0: 10 10 15;
+  --ml-surface-50: 15 15 24;
+  --ml-surface-100: 20 20 32;
+  --ml-surface-200: 26 26 46;
+  --ml-surface-300: 36 36 58;
+  --ml-surface-400: 42 42 74;
 
   /* ---- Glass ---- */
   --ml-glass-bg: rgba(255, 255, 255, 0.05);
@@ -19,23 +19,23 @@
   --ml-glass-blur: 16px;
 
   /* ---- Primary palette ---- */
-  --ml-primary: #8b5cf6;
-  --ml-primary-light: #a78bfa;
-  --ml-primary-dark: #7c3aed;
+  --ml-primary: 139 92 246;
+  --ml-primary-light: 167 139 250;
+  --ml-primary-dark: 124 58 237;
 
   /* ---- Accent (gradient source) ---- */
-  --ml-accent: #667eea;
-  --ml-accent-light: #8b9cf7;
-  --ml-accent-dark: #4c5fd4;
+  --ml-accent: 102 126 234;
+  --ml-accent-light: 139 156 247;
+  --ml-accent-dark: 76 95 212;
 
   /* ---- Glow ---- */
-  --ml-glow-purple: #764ba2;
-  --ml-glow-pink: #f093fb;
+  --ml-glow-purple: 118 75 162;
+  --ml-glow-pink: 240 147 251;
 
   /* ---- Semantic ---- */
-  --ml-success: #10b981;
-  --ml-warning: #f59e0b;
-  --ml-danger: #f43f5e;
+  --ml-success: 16 185 129;
+  --ml-warning: 245 158 11;
+  --ml-danger: 244 63 94;
 
   /* ---- Typography ---- */
   --ml-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -589,8 +589,8 @@ video {
   display: none;
 }
 body {
-    background-color: var(--ml-bg, #0a0a0f);
-    color: var(--ml-fg, #f9fafb);
+    background-color: rgb(var(--ml-bg, 10 10 15));
+    color: rgb(var(--ml-fg, 249 250 251));
     font-family: var(--ml-font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -600,17 +600,17 @@ body {
     width: 6px;
   }
 ::-webkit-scrollbar-track {
-    background: var(--ml-surface-50, #0f0f18);
+    background: rgb(var(--ml-surface-50, 15 15 24));
   }
 ::-webkit-scrollbar-thumb {
-    background: var(--ml-surface-300, #24243a);
+    background: rgb(var(--ml-surface-300, 36 36 58));
     border-radius: 9999px;
   }
 /* Global focus-visible */
 :where(a, button, input, select, textarea, [role='button'], [role='menuitem'], [role='tab']):focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 2px var(--ml-primary, #8b5cf6),
+      0 0 0 2px rgb(var(--ml-primary, 139 92 246)),
       0 0 0 4px transparent;
   }
 /* Dark select */
@@ -619,8 +619,8 @@ select {
   }
 select option,
   select optgroup {
-    background-color: var(--ml-surface-50, #0f0f18);
-    color: var(--ml-fg, #f9fafb);
+    background-color: rgb(var(--ml-surface-50, 15 15 24));
+    color: rgb(var(--ml-fg, 249 250 251));
   }
 /* Accessibility: link underline offset */
 a {
@@ -691,9 +691,9 @@ a {
 .animated-gradient {
     background: linear-gradient(
       270deg,
-      var(--ml-accent, #667eea),
-      var(--ml-glow-purple, #764ba2),
-      var(--ml-glow-pink, #f093fb)
+      rgb(var(--ml-accent, 102 126 234)),
+      rgb(var(--ml-glow-purple, 118 75 162)),
+      rgb(var(--ml-glow-pink, 240 147 251))
     );
     background-size: 400% 400%;
     animation: ml-gradient 15s ease infinite;
@@ -708,10 +708,10 @@ a {
     pointer-events: none;
   }
 .orb-purple {
-    background: var(--ml-glow-purple, #764ba2);
+    background: rgb(var(--ml-glow-purple, 118 75 162));
   }
 .orb-blue {
-    background: var(--ml-accent, #667eea);
+    background: rgb(var(--ml-accent, 102 126 234));
   }
 /* iOS safe-area */
 .pb-safe {
@@ -1501,7 +1501,11 @@ a {
   border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
 }
 .border-primary {
-  border-color: var(--ml-primary);
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
+}
+.border-primary\/30 {
+  border-color: rgb(var(--ml-primary) / 0.3);
 }
 .border-rose-500 {
   --tw-border-opacity: 1;
@@ -1526,14 +1530,21 @@ a {
   border-color: rgb(255 255 255 / 0.06);
 }
 .border-t-primary {
-  border-top-color: var(--ml-primary);
+  --tw-border-opacity: 1;
+  border-top-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
 }
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
-.bg-\[var\(--ml-primary\)\] {
-  background-color: var(--ml-primary);
+.bg-\[rgb\(var\(--ml-primary\)\)\] {
+  background-color: rgb(var(--ml-primary));
+}
+.bg-accent\/15 {
+  background-color: rgb(var(--ml-accent) / 0.15);
+}
+.bg-accent\/\[0\.10\] {
+  background-color: rgb(var(--ml-accent) / 0.10);
 }
 .bg-amber-400 {
   --tw-bg-opacity: 1;
@@ -1578,7 +1589,17 @@ a {
   background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
 }
 .bg-primary {
-  background-color: var(--ml-primary);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-primary) / var(--tw-bg-opacity, 1));
+}
+.bg-primary\/10 {
+  background-color: rgb(var(--ml-primary) / 0.1);
+}
+.bg-primary\/15 {
+  background-color: rgb(var(--ml-primary) / 0.15);
+}
+.bg-primary\/20 {
+  background-color: rgb(var(--ml-primary) / 0.2);
 }
 .bg-purple-500\/\[0\.12\] {
   background-color: rgb(168 85 247 / 0.12);
@@ -1602,13 +1623,25 @@ a {
   background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
 }
 .bg-surface {
-  background-color: var(--ml-bg);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-bg) / var(--tw-bg-opacity, 1));
 }
 .bg-surface-100 {
-  background-color: var(--ml-surface-100);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-surface-100) / var(--tw-bg-opacity, 1));
+}
+.bg-surface-100\/95 {
+  background-color: rgb(var(--ml-surface-100) / 0.95);
 }
 .bg-surface-300 {
-  background-color: var(--ml-surface-300);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-surface-300) / var(--tw-bg-opacity, 1));
+}
+.bg-surface-50\/80 {
+  background-color: rgb(var(--ml-surface-50) / 0.8);
+}
+.bg-surface-50\/90 {
+  background-color: rgb(var(--ml-surface-50) / 0.9);
 }
 .bg-transparent {
   background-color: transparent;
@@ -1639,14 +1672,14 @@ a {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.from-\[var\(--ml-accent\)\] {
-  --tw-gradient-from: var(--ml-accent) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+.from-\[rgb\(var\(--ml-accent\)\)\] {
+  --tw-gradient-from: rgb(var(--ml-accent)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--ml-accent) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-primary {
-  --tw-gradient-from: var(--ml-primary) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-from: rgb(var(--ml-primary) / 1) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--ml-primary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-transparent {
@@ -1663,11 +1696,11 @@ a {
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.to-\[var\(--ml-primary\)\] {
-  --tw-gradient-to: var(--ml-primary) var(--tw-gradient-to-position);
+.to-\[rgb\(var\(--ml-primary\)\)\] {
+  --tw-gradient-to: rgb(var(--ml-primary)) var(--tw-gradient-to-position);
 }
 .to-accent {
-  --tw-gradient-to: var(--ml-accent) var(--tw-gradient-to-position);
+  --tw-gradient-to: rgb(var(--ml-accent) / 1) var(--tw-gradient-to-position);
 }
 .to-purple-600 {
   --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
@@ -1869,7 +1902,8 @@ a {
   letter-spacing: 0.05em;
 }
 .text-accent-light {
-  color: var(--ml-accent-light);
+  --tw-text-opacity: 1;
+  color: rgb(var(--ml-accent-light) / var(--tw-text-opacity, 1));
 }
 .text-amber-400 {
   --tw-text-opacity: 1;
@@ -1892,7 +1926,8 @@ a {
   color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
 .text-primary {
-  color: var(--ml-primary);
+  --tw-text-opacity: 1;
+  color: rgb(var(--ml-primary) / var(--tw-text-opacity, 1));
 }
 .text-red-400 {
   --tw-text-opacity: 1;
@@ -2038,8 +2073,11 @@ a {
   --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);
 }
-.ring-\[var\(--ml-primary\)\] {
-  --tw-ring-color: var(--ml-primary);
+.ring-\[rgb\(var\(--ml-primary\)\)\] {
+  --tw-ring-color: rgb(var(--ml-primary));
+}
+.ring-accent\/20 {
+  --tw-ring-color: rgb(var(--ml-accent) / 0.2);
 }
 .ring-amber-500\/20 {
   --tw-ring-color: rgb(245 158 11 / 0.2);
@@ -2047,6 +2085,12 @@ a {
 .ring-emerald-500\/20 {
   --tw-ring-color: rgb(16 185 129 / 0.2);
 }
+.ring-primary\/20 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.2);
+}
+.ring-primary\/40 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .ring-rose-500\/20 {
   --tw-ring-color: rgb(244 63 94 / 0.2);
 }
@@ -2178,6 +2222,9 @@ a {
   --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-within\:ring-primary\/40:focus-within {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .focus-within\:ring-rose-500\/40:focus-within {
   --tw-ring-color: rgb(244 63 94 / 0.4);
 }
@@ -2191,6 +2238,9 @@ a {
   --tw-scale-y: 1.02;
   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));
 }
+.hover\:border-primary\/50:hover {
+  border-color: rgb(var(--ml-primary) / 0.5);
+}
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
@@ -2289,7 +2339,14 @@ a {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .focus-visible\:ring-primary:focus-visible {
-  --tw-ring-color: var(--ml-primary);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--ml-primary) / var(--tw-ring-opacity, 1));
+}
+.focus-visible\:ring-primary\/40:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
+.focus-visible\:ring-primary\/60:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.6);
 }
 .focus-visible\:ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
@@ -2298,7 +2355,7 @@ a {
   --tw-ring-offset-width: 2px;
 }
 .focus-visible\:ring-offset-surface:focus-visible {
-  --tw-ring-offset-color: var(--ml-bg);
+  --tw-ring-offset-color: rgb(var(--ml-bg) / 1);
 }
 .focus-visible\:ring-offset-transparent:focus-visible {
   --tw-ring-offset-color: transparent;
@@ -2326,6 +2383,9 @@ a {
   --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);
 }
+.peer:focus-visible ~ .peer-focus-visible\:ring-primary\/40 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2393,8 +2453,8 @@ a {
 .\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb {
   border-width: 2px;
 }
-.\[\&\:\:-moz-range-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-moz-range-thumb {
-  border-color: var(--ml-primary,#8b5cf6);
+.\[\&\:\:-moz-range-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-moz-range-thumb {
+  border-color: rgb(var(--ml-primary,139 92 246));
 }
 .\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb {
   --tw-bg-opacity: 1;
@@ -2414,6 +2474,9 @@ a {
   --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\:\[\&\:\:-moz-range-thumb\]\:ring-primary\/40::-moz-range-thumb:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
   border-radius: 9999px;
 }
@@ -2436,8 +2499,8 @@ a {
 .\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb {
   border-width: 2px;
 }
-.\[\&\:\:-webkit-slider-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-webkit-slider-thumb {
-  border-color: var(--ml-primary,#8b5cf6);
+.\[\&\:\:-webkit-slider-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-webkit-slider-thumb {
+  border-color: rgb(var(--ml-primary,139 92 246));
 }
 .\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb {
   --tw-bg-opacity: 1;
@@ -2457,9 +2520,12 @@ a {
   --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\:\[\&\:\:-webkit-slider-thumb\]\:ring-primary\/40::-webkit-slider-thumb:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2::-webkit-slider-thumb:focus-visible {
   --tw-ring-offset-width: 2px;
 }
 .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-surface::-webkit-slider-thumb:focus-visible {
-  --tw-ring-offset-color: var(--ml-bg);
+  --tw-ring-offset-color: rgb(var(--ml-bg) / 1);
 }

package/package.json

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