@fakhrirafiki/theme-engine 0.4.17 → 0.4.19

package/dist/index.js

@@ -4715,40 +4715,50 @@ 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 });
     };
-    const sizeClasses = {
-      sm: "h-8 w-8 p-1.5",
-      md: "h-9 w-9 p-2",
-      lg: "h-10 w-10 p-2.5"
-    };
-    const variantClasses = {
-      default: "bg-background border border-input hover:bg-accent hover:text-accent-foreground",
-      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      ghost: "hover:bg-accent hover:text-accent-foreground"
-    };
     const baseClasses = (0, import_clsx.clsx)(
       // Base button styles
       "theme-toggle",
-      "inline-flex items-center justify-center",
-      "rounded-md text-sm font-medium",
-      "ring-offset-background transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:pointer-events-none disabled:opacity-50",
-      // Size and variant
-      sizeClasses[size],
-      variantClasses[variant],
       className
     );
     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 +4766,12 @@ var ThemeToggle = (0, import_react3.forwardRef)(
         ref,
         className: baseClasses,
         onClick: handleClick,
-        "data-mode": mode,
+        "data-size": size,
+        "data-variant": variant,
+        "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,40 +4671,50 @@ 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 });
     };
-    const sizeClasses = {
-      sm: "h-8 w-8 p-1.5",
-      md: "h-9 w-9 p-2",
-      lg: "h-10 w-10 p-2.5"
-    };
-    const variantClasses = {
-      default: "bg-background border border-input hover:bg-accent hover:text-accent-foreground",
-      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      ghost: "hover:bg-accent hover:text-accent-foreground"
-    };
     const baseClasses = clsx(
       // Base button styles
       "theme-toggle",
-      "inline-flex items-center justify-center",
-      "rounded-md text-sm font-medium",
-      "ring-offset-background transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:pointer-events-none disabled:opacity-50",
-      // Size and variant
-      sizeClasses[size],
-      variantClasses[variant],
       className
     );
     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 +4722,12 @@ var ThemeToggle = forwardRef(
         ref,
         className: baseClasses,
         onClick: handleClick,
-        "data-mode": mode,
+        "data-size": size,
+        "data-variant": variant,
+        "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

@@ -8,6 +8,44 @@
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--radius) + 0.125rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.theme-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.theme-toggle[data-size="sm"] {
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+}
+
+.theme-toggle[data-size="md"] {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0.5rem;
+}
+
+.theme-toggle[data-size="lg"] {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem;
+}
+
+.theme-toggle[data-variant="ghost"] {
+  border-color: transparent;
+  background-color: transparent;
 }
 
 .theme-toggle:hover {
@@ -31,14 +69,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.19",
   "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",