@blakesteve/roster 1.1.20 → 1.1.22

package/dist/roster.es.js

@@ -12840,77 +12840,69 @@ const vw = (e) => {
     }, 1e3);
     return () => clearInterval(a);
   }, [e]), r;
-}, Al = ce("font-semibold uppercase tracking-wider mb-4", {
-  variants: {
-    size: {
-      xs: "text-sm",
-      sm: "text-base",
-      md: "text-lg",
-      lg: "text-xl",
-      xl: "text-2xl"
+}, Al = ce(
+  "font-semibold uppercase tracking-wider mb-4 transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "text-sm",
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl",
+        xl: "text-2xl"
+      }
     },
-    themeMode: {
-      light: "text-gray-900",
-      dark: "text-gray-100"
+    defaultVariants: {
+      size: "md"
     }
-  },
-  defaultVariants: {
-    size: "md",
-    themeMode: "light"
   }
-}), bw = ce(
-  "font-mono bg-clip-text text-transparent animate-pulse",
+), bw = ce(
+  "font-mono bg-clip-text transition-all",
   {
     variants: {
+      variant: {
+        gradient: "text-transparent animate-pulse bg-gradient-to-br from-primary-700 via-accent-600 to-primary-700 dark:from-primary-400 dark:via-accent-300 dark:to-primary-400 drop-shadow-sm dark:drop-shadow-md",
+        primary: "text-primary-600 dark:text-primary-400",
+        neutral: "text-gray-900 dark:text-gray-100"
+      },
       size: {
         xs: "text-2xl",
         sm: "text-3xl",
         md: "text-4xl",
         lg: "text-5xl",
         xl: "text-6xl"
-      },
-      themeMode: {
-        light: "bg-gradient-to-br from-primary-700 via-accent-600 to-primary-700 drop-shadow-sm",
-        dark: "bg-gradient-to-br from-primary-400 via-accent-300 to-primary-400 drop-shadow-md"
       }
     },
     defaultVariants: {
-      size: "md",
-      themeMode: "light"
+      variant: "gradient",
+      size: "md"
     }
   }
-), yw = ce("uppercase tracking-widest mt-1", {
-  variants: {
-    size: {
-      xs: "text-[10px]",
-      sm: "text-xs",
-      md: "text-xs",
-      lg: "text-sm",
-      xl: "text-sm"
+), yw = ce(
+  "uppercase tracking-widest mt-1 transition-colors text-gray-500 dark:text-gray-400",
+  {
+    variants: {
+      size: {
+        xs: "text-[10px]",
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-sm",
+        xl: "text-sm"
+      }
     },
-    themeMode: {
-      light: "text-gray-600",
-      dark: "text-gray-400"
+    defaultVariants: {
+      size: "md"
     }
-  },
-  defaultVariants: {
-    size: "md",
-    themeMode: "light"
-  }
-}), An = ({
-  value: e,
-  label: t,
-  size: r,
-  themeMode: n
-}) => /* @__PURE__ */ h.jsxs("div", { className: "flex flex-col items-center", children: [
-  /* @__PURE__ */ h.jsx("span", { className: _(bw({ size: r, themeMode: n })), children: String(e).padStart(2, "0") }),
-  /* @__PURE__ */ h.jsx("span", { className: _(yw({ size: r, themeMode: n })), children: t })
+  }
+), An = ({ value: e, label: t, size: r, variant: n }) => /* @__PURE__ */ h.jsxs("div", { className: "flex flex-col items-center", children: [
+  /* @__PURE__ */ h.jsx("span", { className: _(bw({ size: r, variant: n })), children: String(e).padStart(2, "0") }),
+  /* @__PURE__ */ h.jsx("span", { className: _(yw({ size: r })), children: t })
 ] }), xw = $.forwardRef(
   ({
     targetDate: e,
     title: t,
     size: r,
-    themeMode: n = "light",
+    variant: n = "gradient",
     className: a,
     completionText: o,
     ...i
@@ -12920,18 +12912,24 @@ const vw = (e) => {
       "div",
       {
         ref: s,
-        className: _("font-bold w-full text-center", a),
+        className: _(
+          "font-bold w-full text-center text-gray-900 dark:text-gray-100",
+          a
+        ),
         ...i,
-        children: /* @__PURE__ */ h.jsx("h3", { className: _(Al({ size: r, themeMode: n }), "mb-0"), children: o })
+        children: /* @__PURE__ */ h.jsx("h3", { className: _(Al({ size: r }), "mb-0"), children: o })
       }
     ) : null : /* @__PURE__ */ h.jsxs(
       "div",
       {
         ref: s,
-        className: _("font-bold w-full text-center", a),
+        className: _(
+          "font-bold w-full text-center text-gray-900 dark:text-gray-100",
+          a
+        ),
         ...i,
         children: [
-          t && /* @__PURE__ */ h.jsx("h3", { className: _(Al({ size: r, themeMode: n })), children: t }),
+          t && /* @__PURE__ */ h.jsx("h3", { className: _(Al({ size: r })), children: t }),
           /* @__PURE__ */ h.jsxs("div", { className: "flex justify-center gap-4 sm:gap-6 md:gap-8", children: [
             /* @__PURE__ */ h.jsx(
               An,
@@ -12939,7 +12937,7 @@ const vw = (e) => {
                 value: l,
                 label: "Days",
                 size: r,
-                themeMode: n
+                variant: n
               }
             ),
             /* @__PURE__ */ h.jsx(
@@ -12948,7 +12946,7 @@ const vw = (e) => {
                 value: u,
                 label: "Hours",
                 size: r,
-                themeMode: n
+                variant: n
               }
             ),
             /* @__PURE__ */ h.jsx(
@@ -12957,7 +12955,7 @@ const vw = (e) => {
                 value: c,
                 label: "Minutes",
                 size: r,
-                themeMode: n
+                variant: n
               }
             ),
             /* @__PURE__ */ h.jsx(
@@ -12966,7 +12964,7 @@ const vw = (e) => {
                 value: f,
                 label: "Seconds",
                 size: r,
-                themeMode: n
+                variant: n
               }
             )
           ] })
@@ -13125,13 +13123,15 @@ const Rw = ce(
   {
     variants: {
       variant: {
-        // Slate: A solid mid-dark gray in light mode, drops to a deep, moody gray in dark mode
+        // White in light mode, deep gray-950 in dark mode.
+        default: "bg-white border-gray-200 text-gray-900 dark:bg-gray-950 dark:border-gray-800 dark:text-gray-100",
+        // Slate: A solid mid-dark gray in light mode, drops to a moody gray in dark mode
         slate: "bg-gray-700 border-gray-600 text-gray-100 dark:bg-gray-900 dark:border-gray-800",
         // Primary: Bold brand color in light mode, deep rich brand color in dark mode
         primary: "bg-primary-700 border-primary-600 text-white dark:bg-primary-950 dark:border-primary-900",
         // White: Crisp white in light mode, elevated surface gray in dark mode
         white: "bg-white border-gray-200 text-gray-900 dark:bg-gray-600 dark:border-gray-700 dark:text-gray-100",
-        // Transparent: Stays invisible, adapts text for standard readability if no image is behind it
+        // Transparent: Stays invisible, adapts text for standard readability
         transparent: "bg-transparent border-transparent text-gray-900 dark:text-white"
       },
       position: {
@@ -13141,7 +13141,7 @@ const Rw = ce(
       }
     },
     defaultVariants: {
-      variant: "slate",
+      variant: "default",
       position: "sticky"
     }
   }
@@ -13156,13 +13156,13 @@ const Rw = ce(
   onInboxClick: s,
   onThemeToggle: l,
   className: u,
-  variant: c = "slate",
+  variant: c = "default",
   position: f = "sticky",
   themeMode: g,
   notificationVariant: d = "error",
   ...m
 }) => {
-  const p = (o?.notificationCount || 0) > 0, b = (g ?? (c === "white" ? "light" : "dark")) === "dark", x = c === "slate" || c === "primary" || c === "white" && b || c === "transparent" && b, y = {
+  const p = (o?.notificationCount || 0) > 0, b = (g ?? (c === "white" || c === "default" ? "light" : "dark")) === "dark", x = c === "slate" || c === "primary" || c === "default" && b || c === "white" && b || c === "transparent" && b, y = {
     brand: x ? "text-white dark:text-white hover:text-gray-200 dark:hover:text-gray-200" : "text-gray-900 dark:text-gray-900 hover:text-gray-600 dark:hover:text-gray-600",
     linkBase: x ? "text-gray-300 dark:text-gray-300 hover:text-white dark:hover:text-white" : "text-gray-600 dark:text-gray-600 hover:text-gray-900 dark:hover:text-gray-900",
     linkActive: x ? "text-primary-400 dark:text-primary-400 font-semibold hover:text-primary-300 dark:hover:text-primary-300" : "text-primary-600 dark:text-primary-600 font-semibold hover:text-primary-700 dark:hover:text-primary-700",