@fakhrirafiki/theme-engine 0.4.17 → 0.4.18

package/dist/index.js

@@ -4715,10 +4715,29 @@ var MoonIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
   }
 );
+var SystemIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "theme-toggle-icon",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+    ]
+  }
+);
 var ThemeToggle = (0, import_react3.forwardRef)(
   ({ className, size = "md", variant = "default", children, ...props }, ref) => {
     const { mode, resolvedMode, toggleMode } = useTheme();
-    const nextResolvedMode = resolvedMode === "light" ? "dark" : "light";
     const handleClick = (event) => {
       const { clientX: x, clientY: y } = event;
       toggleMode({ x, y });
@@ -4748,7 +4767,16 @@ var ThemeToggle = (0, import_react3.forwardRef)(
     );
     const renderIcon = () => {
       if (children) return children;
-      return nextResolvedMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SunIcon, {});
+      switch (mode) {
+        case "light":
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SunIcon, {});
+        case "dark":
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonIcon, {});
+        case "system":
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SystemIcon, {});
+        default:
+          return resolvedMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SunIcon, {});
+      }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
@@ -4756,10 +4784,10 @@ var ThemeToggle = (0, import_react3.forwardRef)(
         ref,
         className: baseClasses,
         onClick: handleClick,
-        "data-mode": mode,
+        "data-mode": resolvedMode,
         "data-theme": resolvedMode,
-        "aria-label": `Switch to ${nextResolvedMode} mode`,
-        title: `Switch to ${nextResolvedMode} mode`,
+        "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
+        title: `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
         ...props,
         children: renderIcon()
       }

package/dist/index.mjs

@@ -4671,10 +4671,29 @@ var MoonIcon = () => /* @__PURE__ */ jsx3(
     children: /* @__PURE__ */ jsx3("path", { d: "m12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
   }
 );
+var SystemIcon = () => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "theme-toggle-icon",
+    children: [
+      /* @__PURE__ */ jsx3("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+      /* @__PURE__ */ jsx3("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+      /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+    ]
+  }
+);
 var ThemeToggle = forwardRef(
   ({ className, size = "md", variant = "default", children, ...props }, ref) => {
     const { mode, resolvedMode, toggleMode } = useTheme();
-    const nextResolvedMode = resolvedMode === "light" ? "dark" : "light";
     const handleClick = (event) => {
       const { clientX: x, clientY: y } = event;
       toggleMode({ x, y });
@@ -4704,7 +4723,16 @@ var ThemeToggle = forwardRef(
     );
     const renderIcon = () => {
       if (children) return children;
-      return nextResolvedMode === "dark" ? /* @__PURE__ */ jsx3(MoonIcon, {}) : /* @__PURE__ */ jsx3(SunIcon, {});
+      switch (mode) {
+        case "light":
+          return /* @__PURE__ */ jsx3(SunIcon, {});
+        case "dark":
+          return /* @__PURE__ */ jsx3(MoonIcon, {});
+        case "system":
+          return /* @__PURE__ */ jsx3(SystemIcon, {});
+        default:
+          return resolvedMode === "dark" ? /* @__PURE__ */ jsx3(MoonIcon, {}) : /* @__PURE__ */ jsx3(SunIcon, {});
+      }
     };
     return /* @__PURE__ */ jsx3(
       "button",
@@ -4712,10 +4740,10 @@ var ThemeToggle = forwardRef(
         ref,
         className: baseClasses,
         onClick: handleClick,
-        "data-mode": mode,
+        "data-mode": resolvedMode,
         "data-theme": resolvedMode,
-        "aria-label": `Switch to ${nextResolvedMode} mode`,
-        title: `Switch to ${nextResolvedMode} mode`,
+        "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
+        title: `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
         ...props,
         children: renderIcon()
       }

package/dist/styles/components.css

@@ -31,14 +31,6 @@
   color: hsl(var(--foreground));
 }
 
-.theme-toggle[data-theme="light"] .theme-toggle-icon {
-  rotate: 180deg;
-}
-
-.theme-toggle[data-theme="dark"] .theme-toggle-icon {
-  rotate: 0deg;
-}
-
 /* ThemePresetButtons: lightweight CSS-based animations and hover affordances */
 
 /* ThemePresetButtons: base button styling (no Tailwind required) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",