@4alldigital/foundation-ui--core 3.14.0 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -38,5 +38,5 @@
   "devDependencies": {
     "@types/he": "^1.2.3"
   },
-  "gitHead": "908725ee8d27e0055f3c05c987402111e524341e"
+  "gitHead": "7c02101d1542e447b86540d31d4846384b407774"
 }

package/src/components/DarkModeToggle/DarkModeToggle.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import { useThemeContext } from "../../context/Theme";
+
+export interface DarkModeToggleProps {
+  variant?: "icon" | "label" | "full";
+  className?: string;
+}
+
+const SunIcon = () => (
+  <>
+    <circle cx="12" cy="12" r="5" />
+    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+  </>
+);
+
+const MoonIcon = () => <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />;
+
+const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ variant = "full", className }) => {
+  const { isDarkTheme, toggleTheme } = useThemeContext();
+
+  const label = isDarkTheme ? "Light Mode" : "Dark Mode";
+
+  if (variant === "icon") {
+    return (
+      <button
+        onClick={toggleTheme}
+        aria-label={isDarkTheme ? "Switch to light mode" : "Switch to dark mode"}
+        className={className || "p-2 rounded-lg transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"}
+      >
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          {isDarkTheme ? <SunIcon /> : <MoonIcon />}
+        </svg>
+      </button>
+    );
+  }
+
+  if (variant === "label") {
+    return (
+      <button
+        onClick={toggleTheme}
+        aria-label={isDarkTheme ? "Switch to light mode" : "Switch to dark mode"}
+        className={className || "text-[0.85rem] font-medium transition-colors hover:opacity-80"}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      aria-label={isDarkTheme ? "Switch to light mode" : "Switch to dark mode"}
+      className={
+        className ||
+        "flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-[0.85rem] font-medium transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+      }
+    >
+      <span>{label}</span>
+      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+        {isDarkTheme ? <SunIcon /> : <MoonIcon />}
+      </svg>
+    </button>
+  );
+};
+
+export default DarkModeToggle;

package/src/components/DarkModeToggle/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./DarkModeToggle";
+export type { DarkModeToggleProps } from "./DarkModeToggle";

package/src/components/Header/Header.tsx

@@ -94,13 +94,6 @@ const Header = ({
           </div>
           {/* <!-- tablet/desktop --> */}
           <div className="hidden md:flex items-center justify-center gap-2">
-            {theme?.toggleTheme && (
-              <Button
-                onClick={theme.toggleTheme}
-                icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
-                ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
-              />
-            )}
             {!context?.app?.isAuthenticated && context?.app?.loginCallback && (
               <div className="w-32 flex justify-end">
                 <Button rounded onClick={context?.app?.loginCallback}>{T.UI.LOGIN}</Button>
@@ -196,22 +189,6 @@ const Header = ({
 
             {/* Footer */}
             <div className="px-5 py-5 border-t border-black/[0.06] dark:border-white/[0.08]">
-              {/* Dark mode toggle */}
-              {theme?.toggleTheme && (
-                <button
-                  onClick={theme.toggleTheme}
-                  className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 mb-3 text-[0.85rem] font-medium text-body-text/70 dark:text-body-text-dark/70 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
-                >
-                  <span>{theme.isDarkTheme ? 'Light Mode' : 'Dark Mode'}</span>
-                  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-                    {theme.isDarkTheme ? (
-                      <><circle cx="12" cy="12" r="5" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /></>
-                    ) : (
-                      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-                    )}
-                  </svg>
-                </button>
-              )}
               {/* Auth action */}
               {context?.app?.isAuthenticated ? (
                 <button

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { default as Chip } from './Chip';
 export { default as Calendar } from './Calendar';
 export { default as Collapsible } from './Collapsible';
 export { default as Copy } from './Copy';
+export { default as DarkModeToggle } from './DarkModeToggle';
 export { default as FileUpload } from './FileUpload';
 export { default as Heading } from './Heading';
 export { default as Hr } from './Hr';