@blakesteve/roster 1.1.26 → 1.1.28

package/dist/roster.es.js

@@ -7837,7 +7837,7 @@ function _(...e) {
   return Av(zl(e));
 }
 const Ov = ce(
-  "relative inline-flex items-center justify-center overflow-hidden font-semibold border transition-colors focus:outline-hidden select-none shrink-0",
+  "relative inline-flex items-center justify-center overflow-hidden font-semibold border transition-colors focus:outline-none select-none shrink-0 shadow-sm",
   {
     variants: {
       size: {
@@ -7848,14 +7848,14 @@ const Ov = ce(
         xl: "h-16 w-16 text-xl"
       },
       colorScheme: {
-        primary: "bg-primary-100 text-primary-700 border-primary-200",
-        orange: "bg-orange-100 text-orange-700 border-orange-200",
-        teal: "bg-teal-100 text-teal-700 border-teal-200",
-        purple: "bg-purple-100 text-purple-700 border-purple-200",
-        amber: "bg-amber-100 text-amber-700 border-amber-200",
-        success: "bg-success-100 text-success-700 border-success-200",
-        error: "bg-error-100 text-error-700 border-error-200",
-        neutral: "bg-gray-100 text-gray-700 border-gray-200"
+        primary: "bg-primary-50 border-primary-200 text-primary-700 dark:bg-primary-900/30 dark:border-primary-800/50 dark:text-primary-300",
+        orange: "bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-900/30 dark:border-orange-800/50 dark:text-orange-300",
+        teal: "bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-900/30 dark:border-teal-800/50 dark:text-teal-300",
+        purple: "bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-900/30 dark:border-purple-800/50 dark:text-purple-300",
+        amber: "bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-900/30 dark:border-amber-800/50 dark:text-amber-300",
+        success: "bg-success-50 border-success-200 text-success-700 dark:bg-success-900/30 dark:border-success-800/50 dark:text-success-300",
+        error: "bg-error-50 border-error-200 text-error-700 dark:bg-error-900/30 dark:border-error-800/50 dark:text-error-300",
+        neutral: "bg-gray-100 border-gray-200 text-gray-700 dark:bg-gray-800/50 dark:border-gray-700/50 dark:text-gray-300"
       },
       shape: {
         circle: "rounded-full",
@@ -7898,13 +7898,21 @@ const Ov = ce(
       }
     );
     return s ? /* @__PURE__ */ h.jsxs($c, { className: "relative inline-flex", children: [
-      /* @__PURE__ */ h.jsx(Qn, { as: "div", className: "outline-none cursor-pointer", children: d }),
+      /* @__PURE__ */ h.jsx(
+        Qn,
+        {
+          as: "div",
+          className: "outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-full",
+          children: d
+        }
+      ),
       /* @__PURE__ */ h.jsx(
         Ci,
         {
           anchor: "bottom",
           className: _(
-            "z-50 mt-2 rounded-md bg-gray-800 px-3 py-1.5 text-xs text-white shadow-md ring-1 ring-white/10",
+            "z-50 mt-2 rounded-md px-3 py-1.5 text-xs font-medium shadow-xl backdrop-blur-md ring-1",
+            "bg-gray-900/95 text-white ring-black/5 dark:bg-gray-100/95 dark:text-gray-900 dark:ring-white/20",
             "transition duration-200 ease-in-out data-closed:opacity-0 data-closed:translate-y-1"
           ),
           children: s
@@ -8028,7 +8036,8 @@ const Tv = ce("animate-spin rounded-full transition-colors", {
       primary: "border-primary-600 dark:border-primary-500",
       neutral: "border-gray-600 dark:border-gray-400",
       danger: "border-error-600 dark:border-error-500",
-      white: "border-white"
+      white: "border-white",
+      current: "border-current"
     },
     size: {
       sm: "h-4 w-4 border-2",
@@ -8095,50 +8104,50 @@ const Tv = ce("animate-spin rounded-full transition-colors", {
     },
     compoundVariants: [
       // --- SOLID VARIANTS (Bold Backgrounds) ---
-      { variant: "solid", colorScheme: "primary", className: "bg-primary-600 text-white hover:bg-primary-700" },
-      { variant: "solid", colorScheme: "orange", className: "bg-orange-500 text-white hover:bg-orange-600" },
-      { variant: "solid", colorScheme: "teal", className: "bg-teal-500 text-white hover:bg-teal-600" },
-      { variant: "solid", colorScheme: "purple", className: "bg-purple-500 text-white hover:bg-purple-600" },
-      { variant: "solid", colorScheme: "amber", className: "bg-amber-400 text-black hover:bg-amber-500" },
-      { variant: "solid", colorScheme: "success", className: "bg-success-600 text-white hover:bg-success-700" },
-      { variant: "solid", colorScheme: "error", className: "bg-error-600 text-white hover:bg-error-700" },
-      { variant: "solid", colorScheme: "neutral", className: "bg-gray-600 text-white hover:bg-gray-700" },
-      // --- SOFT VARIANTS (Transparent Background Tints + Adaptive Text) ---
-      { variant: "soft", colorScheme: "primary", className: "bg-primary-500/15 text-primary-700 dark:text-primary-300 hover:bg-primary-500/25" },
-      { variant: "soft", colorScheme: "orange", className: "bg-orange-500/15 text-orange-700 dark:text-orange-300 hover:bg-orange-500/25" },
-      { variant: "soft", colorScheme: "teal", className: "bg-teal-500/15 text-teal-700 dark:text-teal-300 hover:bg-teal-500/25" },
-      { variant: "soft", colorScheme: "purple", className: "bg-purple-500/15 text-purple-700 dark:text-purple-300 hover:bg-purple-500/25" },
-      { variant: "soft", colorScheme: "amber", className: "bg-amber-500/15 text-amber-700 dark:text-amber-300 hover:bg-amber-500/25" },
-      { variant: "soft", colorScheme: "success", className: "bg-success-500/15 text-success-700 dark:text-success-300 hover:bg-success-500/25" },
-      { variant: "soft", colorScheme: "error", className: "bg-error-500/15 text-error-700 dark:text-error-300 hover:bg-error-500/25" },
-      { variant: "soft", colorScheme: "neutral", className: "bg-gray-500/15 text-gray-700 dark:text-gray-300 hover:bg-gray-500/25" },
+      { variant: "solid", colorScheme: "primary", className: "bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-600 dark:hover:bg-primary-500" },
+      { variant: "solid", colorScheme: "orange", className: "bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-600 dark:hover:bg-orange-500" },
+      { variant: "solid", colorScheme: "teal", className: "bg-teal-600 text-white hover:bg-teal-700 dark:bg-teal-600 dark:hover:bg-teal-500" },
+      { variant: "solid", colorScheme: "purple", className: "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-500" },
+      { variant: "solid", colorScheme: "amber", className: "bg-amber-400 text-black hover:bg-amber-500 dark:bg-amber-500 dark:hover:bg-amber-400 dark:text-gray-900" },
+      { variant: "solid", colorScheme: "success", className: "bg-success-600 text-white hover:bg-success-700 dark:bg-success-600 dark:hover:bg-success-500" },
+      { variant: "solid", colorScheme: "error", className: "bg-error-600 text-white hover:bg-error-700 dark:bg-error-600 dark:hover:bg-error-500" },
+      { variant: "solid", colorScheme: "neutral", className: "bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500" },
+      // --- SOFT VARIANTS (Crisp Light Mode, Translucent Dark Mode) ---
+      { variant: "soft", colorScheme: "primary", className: "bg-primary-50 text-primary-700 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/60" },
+      { variant: "soft", colorScheme: "orange", className: "bg-orange-50 text-orange-700 hover:bg-orange-100 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50" },
+      { variant: "soft", colorScheme: "teal", className: "bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:bg-teal-900/50" },
+      { variant: "soft", colorScheme: "purple", className: "bg-purple-50 text-purple-700 hover:bg-purple-100 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50" },
+      { variant: "soft", colorScheme: "amber", className: "bg-amber-50 text-amber-800 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50" },
+      { variant: "soft", colorScheme: "success", className: "bg-success-50 text-success-700 hover:bg-success-100 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/50" },
+      { variant: "soft", colorScheme: "error", className: "bg-error-50 text-error-700 hover:bg-error-100 dark:bg-error-900/30 dark:text-error-300 dark:hover:bg-error-900/50" },
+      { variant: "soft", colorScheme: "neutral", className: "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800" },
       // --- OUTLINE VARIANTS (Borders + Colored Adaptive Text + Transparent Hover) ---
-      { variant: "outline", colorScheme: "primary", className: "border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-500/10" },
-      { variant: "outline", colorScheme: "orange", className: "border-orange-500 text-orange-600 dark:text-orange-400 hover:bg-orange-500/10" },
-      { variant: "outline", colorScheme: "teal", className: "border-teal-500 text-teal-600 dark:text-teal-400 hover:bg-teal-500/10" },
-      { variant: "outline", colorScheme: "purple", className: "border-purple-500 text-purple-600 dark:text-purple-400 hover:bg-purple-500/10" },
-      { variant: "outline", colorScheme: "amber", className: "border-amber-500 text-amber-600 dark:text-amber-400 hover:bg-amber-500/10" },
-      { variant: "outline", colorScheme: "success", className: "border-success-500 text-success-600 dark:text-success-400 hover:bg-success-500/10" },
-      { variant: "outline", colorScheme: "error", className: "border-error-500 text-error-600 dark:text-error-400 hover:bg-error-500/10" },
-      { variant: "outline", colorScheme: "neutral", className: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-500/10" },
+      { variant: "outline", colorScheme: "primary", className: "border-primary-600 text-primary-600 hover:bg-primary-50 dark:border-primary-500 dark:text-primary-400 dark:hover:bg-primary-500/10" },
+      { variant: "outline", colorScheme: "orange", className: "border-orange-600 text-orange-600 hover:bg-orange-50 dark:border-orange-500 dark:text-orange-400 dark:hover:bg-orange-500/10" },
+      { variant: "outline", colorScheme: "teal", className: "border-teal-600 text-teal-600 hover:bg-teal-50 dark:border-teal-500 dark:text-teal-400 dark:hover:bg-teal-500/10" },
+      { variant: "outline", colorScheme: "purple", className: "border-purple-600 text-purple-600 hover:bg-purple-50 dark:border-purple-500 dark:text-purple-400 dark:hover:bg-purple-500/10" },
+      { variant: "outline", colorScheme: "amber", className: "border-amber-600 text-amber-600 hover:bg-amber-50 dark:border-amber-500 dark:text-amber-400 dark:hover:bg-amber-500/10" },
+      { variant: "outline", colorScheme: "success", className: "border-success-600 text-success-600 hover:bg-success-50 dark:border-success-500 dark:text-success-400 dark:hover:bg-success-500/10" },
+      { variant: "outline", colorScheme: "error", className: "border-error-600 text-error-600 hover:bg-error-50 dark:border-error-500 dark:text-error-400 dark:hover:bg-error-500/10" },
+      { variant: "outline", colorScheme: "neutral", className: "border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800/50" },
       // --- GHOST VARIANTS (Adaptive Text + Transparent Hover) ---
-      { variant: "ghost", colorScheme: "primary", className: "text-primary-600 dark:text-primary-400 hover:bg-primary-500/10" },
-      { variant: "ghost", colorScheme: "orange", className: "text-orange-600 dark:text-orange-400 hover:bg-orange-500/10" },
-      { variant: "ghost", colorScheme: "teal", className: "text-teal-600 dark:text-teal-400 hover:bg-teal-500/10" },
-      { variant: "ghost", colorScheme: "purple", className: "text-purple-600 dark:text-purple-400 hover:bg-purple-500/10" },
-      { variant: "ghost", colorScheme: "amber", className: "text-amber-600 dark:text-amber-400 hover:bg-amber-500/10" },
-      { variant: "ghost", colorScheme: "success", className: "text-success-600 dark:text-success-400 hover:bg-success-500/10" },
-      { variant: "ghost", colorScheme: "error", className: "text-error-600 dark:text-error-400 hover:bg-error-500/10" },
-      { variant: "ghost", colorScheme: "neutral", className: "text-gray-600 dark:text-gray-400 hover:bg-gray-500/10" },
+      { variant: "ghost", colorScheme: "primary", className: "text-primary-600 hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-500/10" },
+      { variant: "ghost", colorScheme: "orange", className: "text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-500/10" },
+      { variant: "ghost", colorScheme: "teal", className: "text-teal-600 hover:bg-teal-100 dark:text-teal-400 dark:hover:bg-teal-500/10" },
+      { variant: "ghost", colorScheme: "purple", className: "text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-500/10" },
+      { variant: "ghost", colorScheme: "amber", className: "text-amber-600 hover:bg-amber-100 dark:text-amber-400 dark:hover:bg-amber-500/10" },
+      { variant: "ghost", colorScheme: "success", className: "text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-500/10" },
+      { variant: "ghost", colorScheme: "error", className: "text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-500/10" },
+      { variant: "ghost", colorScheme: "neutral", className: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800/50" },
       // --- LINK VARIANTS (Adaptive Text Only + Underline) ---
-      { variant: "link", colorScheme: "primary", className: "text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300" },
-      { variant: "link", colorScheme: "orange", className: "text-orange-600 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-300" },
-      { variant: "link", colorScheme: "teal", className: "text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300" },
-      { variant: "link", colorScheme: "purple", className: "text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300" },
-      { variant: "link", colorScheme: "amber", className: "text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300" },
-      { variant: "link", colorScheme: "success", className: "text-success-600 dark:text-success-400 hover:text-success-700 dark:hover:text-success-300" },
-      { variant: "link", colorScheme: "error", className: "text-error-600 dark:text-error-400 hover:text-error-700 dark:hover:text-error-300" },
-      { variant: "link", colorScheme: "neutral", className: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" }
+      { variant: "link", colorScheme: "primary", className: "text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300" },
+      { variant: "link", colorScheme: "orange", className: "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300" },
+      { variant: "link", colorScheme: "teal", className: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300" },
+      { variant: "link", colorScheme: "purple", className: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300" },
+      { variant: "link", colorScheme: "amber", className: "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300" },
+      { variant: "link", colorScheme: "success", className: "text-success-600 hover:text-success-700 dark:text-success-400 dark:hover:text-success-300" },
+      { variant: "link", colorScheme: "error", className: "text-error-600 hover:text-error-700 dark:text-error-400 dark:hover:text-error-300" },
+      { variant: "link", colorScheme: "neutral", className: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" }
     ],
     defaultVariants: {
       colorScheme: "primary",
@@ -8171,7 +8180,7 @@ const Tv = ce("animate-spin rounded-full transition-colors", {
         disabled: f,
         ...u,
         children: [
-          a && /* @__PURE__ */ h.jsx("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ h.jsx(Mv, { size: "sm", className: "text-current" }) }),
+          a && /* @__PURE__ */ h.jsx("span", { className: "mr-2 flex shrink-0 items-center", children: /* @__PURE__ */ h.jsx(Mv, { size: "sm", variant: "current" }) }),
           !a && o && /* @__PURE__ */ h.jsx("span", { className: "mr-2 inline-flex shrink-0 items-center", children: o }),
           l,
           !a && i && /* @__PURE__ */ h.jsx("span", { className: "ml-2 inline-flex shrink-0 items-center", children: i })