@fakhrirafiki/theme-engine 0.4.18 → 0.4.19

package/dist/index.js

@@ -4742,27 +4742,9 @@ var ThemeToggle = (0, import_react3.forwardRef)(
       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 = () => {
@@ -4784,6 +4766,8 @@ var ThemeToggle = (0, import_react3.forwardRef)(
         ref,
         className: baseClasses,
         onClick: handleClick,
+        "data-size": size,
+        "data-variant": variant,
         "data-mode": resolvedMode,
         "data-theme": resolvedMode,
         "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,

package/dist/index.mjs

@@ -4698,27 +4698,9 @@ var ThemeToggle = forwardRef(
       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 = () => {
@@ -4740,6 +4722,8 @@ var ThemeToggle = forwardRef(
         ref,
         className: baseClasses,
         onClick: handleClick,
+        "data-size": size,
+        "data-variant": variant,
         "data-mode": resolvedMode,
         "data-theme": resolvedMode,
         "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.18",
+  "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",