@fakhrirafiki/theme-engine 0.2.0 → 0.2.2

package/README.md

@@ -390,6 +390,22 @@ function CustomControls() {
     </button>
   )
 }
+
+// Or apply a preset by ID (from built-in or custom presets)
+function QuickPresetSwitcher() {
+  const { setThemePresetById } = useTheme()
+
+  return (
+    <div>
+      <button onClick={() => setThemePresetById('modern-minimal')}>
+        Modern Minimal
+      </button>
+      <button onClick={() => setThemePresetById('tiket-ngobrol')}>
+        Ngobrol Blue
+      </button>
+    </div>
+  )
+}
 ```
 
 ## 🔄 Migration Guide
@@ -563,4 +579,4 @@ This architecture ensures seamless coordination between appearance modes and col
 
 ## 📄 License
 
-MIT License - see the monorepo root for details.
+MIT License - see the monorepo root for details.

package/dist/index.d.mts

@@ -336,6 +336,8 @@ interface UnifiedThemeContextValue {
     } | null;
     /** Apply a new color preset */
     applyPreset: (preset: ThemePreset) => void;
+    /** Apply a preset by its ID from the available preset collection */
+    setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
     /** Available presets (merged built-in + custom) */

package/dist/index.d.ts

@@ -336,6 +336,8 @@ interface UnifiedThemeContextValue {
     } | null;
     /** Apply a new color preset */
     applyPreset: (preset: ThemePreset) => void;
+    /** Apply a preset by its ID from the available preset collection */
+    setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
     /** Available presets (merged built-in + custom) */

package/dist/index.js

@@ -3892,6 +3892,24 @@ function ThemeProvider({
       applyPresetColors(preset.colors, resolvedMode);
     }
   }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
+  const setThemePresetById = (0, import_react.useCallback)((presetId) => {
+    const preset = getAvailablePresetById(presetId);
+    if (!preset) {
+      if (typeof window !== "undefined") {
+        console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+      }
+      return;
+    }
+    const presetData = {
+      id: presetId,
+      name: preset.label,
+      colors: {
+        light: preset.styles.light,
+        dark: preset.styles.dark
+      }
+    };
+    applyPreset(presetData);
+  }, [getAvailablePresetById, applyPreset]);
   const clearPreset = (0, import_react.useCallback)(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3946,6 +3964,7 @@ function ThemeProvider({
     toggleMode: handleModeToggle,
     currentPreset,
     applyPreset,
+    setThemePresetById,
     clearPreset,
     availablePresets,
     builtInPresets,

package/dist/index.mjs

@@ -3851,6 +3851,24 @@ function ThemeProvider({
       applyPresetColors(preset.colors, resolvedMode);
     }
   }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
+  const setThemePresetById = useCallback((presetId) => {
+    const preset = getAvailablePresetById(presetId);
+    if (!preset) {
+      if (typeof window !== "undefined") {
+        console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+      }
+      return;
+    }
+    const presetData = {
+      id: presetId,
+      name: preset.label,
+      colors: {
+        light: preset.styles.light,
+        dark: preset.styles.dark
+      }
+    };
+    applyPreset(presetData);
+  }, [getAvailablePresetById, applyPreset]);
   const clearPreset = useCallback(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3905,6 +3923,7 @@ function ThemeProvider({
     toggleMode: handleModeToggle,
     currentPreset,
     applyPreset,
+    setThemePresetById,
     clearPreset,
     availablePresets,
     builtInPresets,

package/dist/styles/tailwind.css

@@ -44,6 +44,22 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Semantic accent colors for status and feedback */
+  --color-accent-info: var(--accent-info);
+  --color-accent-info-foreground: var(--accent-info-foreground);
+  --color-accent-success: var(--accent-success);
+  --color-accent-success-foreground: var(--accent-success-foreground);
+  --color-accent-warning: var(--accent-warning);
+  --color-accent-warning-foreground: var(--accent-warning-foreground);
+  --color-accent-danger: var(--accent-danger);
+  --color-accent-danger-foreground: var(--accent-danger-foreground);
+  --color-accent-brand: var(--accent-brand);
+  --color-accent-brand-foreground: var(--accent-brand-foreground);
+  --color-accent-feature: var(--accent-feature);
+  --color-accent-feature-foreground: var(--accent-feature-foreground);
+  --color-accent-highlight: var(--accent-highlight);
+  --color-accent-highlight-foreground: var(--accent-highlight-foreground);
+
   /* Dynamic border radius system */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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",
@@ -57,7 +57,7 @@
     "dark-mode",
     "light-mode",
     "react",
-    "typescript", 
+    "typescript",
     "transitions",
     "shadcn",
     "tailwind",
@@ -70,6 +70,6 @@
     "accent-colors",
     "semantic-colors"
   ],
-  "author": "NgobrolLink Team",
+  "author": "Tiket Ngobrol Team",
   "license": "MIT"
-}
+}