@fakhrirafiki/theme-engine 0.4.15 → 0.4.18

package/README.md

@@ -8,6 +8,9 @@ Theme system for **Next.js (App Router)**: mode (`light | dark | system`) + them
 ![npm downloads](https://img.shields.io/npm/dm/@fakhrirafiki/theme-engine)
 ![license](https://img.shields.io/npm/l/@fakhrirafiki/theme-engine)
 
+Live demo: https://theme-engine-example.vercel.app/
+Example repo: https://github.com/fakhrirafiki/theme-engine-example
+
 ## ✨ Why use this?
 
 - ⚡ **Fast setup**: 1 CSS import + 1 provider
@@ -407,7 +410,7 @@ export function ThemePresetSelect({
 
               {isActive && (
                 <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-foreground">
-                  Aktif
+                  Active
                 </span>
               )}
             </span>
@@ -415,7 +418,7 @@ export function ThemePresetSelect({
         );
       })}
 
-      {presets.length === 0 && <p className="text-xs text-muted-foreground">Belum ada tema yang tersedia.</p>}
+      {presets.length === 0 && <p className="text-xs text-muted-foreground">No themes available yet.</p>}
     </div>
   );
 }
@@ -503,6 +506,14 @@ Note: the thrown error string might mention `useTheme` because `useThemeEngine()
 
 Ensure your `globals.css` imports `@fakhrirafiki/theme-engine/styles` (and Tailwind v4 is configured if you rely on Tailwind utilities).
 
+### Turbopack: “module factory is not available” (HMR) after upgrading
+
+This is a Next.js Turbopack dev/HMR issue that can happen after updating dependencies in `node_modules` (or when using a locally linked package that rebuilds `dist/` while `next dev` is running).
+
+- Restart `next dev` (often enough).
+- If it persists: delete `.next/` and restart.
+- Workaround: run dev server with webpack: `next dev --webpack`
+
 ---
 
 ## License

package/dist/styles/components.css

@@ -26,18 +26,11 @@
 
 /* Icon transition for theme toggle */
 .theme-toggle-icon {
+  display: block;
   transition: all 0.3s ease-in-out;
   color: hsl(var(--foreground));
 }
 
-.theme-toggle[data-theme="light"] .theme-toggle-icon {
-  rotate: 0deg;
-}
-
-.theme-toggle[data-theme="dark"] .theme-toggle-icon {
-  rotate: 180deg;
-}
-
 /* ThemePresetButtons: lightweight CSS-based animations and hover affordances */
 
 /* ThemePresetButtons: base button styling (no Tailwind required) */
@@ -59,10 +52,7 @@
   box-shadow: 0 1px 0 hsl(var(--border) / 0.35);
   cursor: pointer;
 
-  transition:
-    transform 0.2s ease-out,
-    background-color 0.2s ease-out,
-    border-color 0.2s ease-out,
+  transition: transform 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out,
     box-shadow 0.2s ease-out;
 }
 
@@ -111,9 +101,7 @@
   z-index: 20;
   background: hsl(var(--card) / 0.95);
   border-color: hsl(var(--primary) / 0.2);
-  box-shadow:
-    0 10px 25px hsl(0 0% 0% / 0.12),
-    0 0 0 1px hsl(var(--border) / 0.35);
+  box-shadow: 0 10px 25px hsl(0 0% 0% / 0.12), 0 0 0 1px hsl(var(--border) / 0.35);
 }
 
 /* Color boxes within preset buttons - fallback only */
@@ -192,7 +180,7 @@
   .theme-preset-button {
     min-width: 120px;
   }
-  
+
   .color-palette-grid {
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   }
@@ -204,7 +192,7 @@
   .theme-preset-button {
     border-width: 2px;
   }
-  
+
   .theme-color-box {
     border-width: 2px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.15",
+  "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",
@@ -37,7 +37,7 @@
     "type": "git",
     "url": "git+https://github.com/fakhrirafiki/theme-engine.git"
   },
-  "homepage": "https://github.com/fakhrirafiki/theme-engine",
+  "homepage": "https://theme-engine-example.vercel.app/",
   "bugs": {
     "url": "https://github.com/fakhrirafiki/theme-engine/issues"
   },