@fakhrirafiki/theme-engine 0.4.2 → 0.4.3

package/dist/index.js

@@ -4636,6 +4636,7 @@ var PresetButton = ({
   renderColorBox
 }) => {
   const colors = preset.colors[mode];
+  const label = preset.name.replace(/-/g, " ");
   if (renderPreset) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -4647,23 +4648,23 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
     {
+      type: "button",
       className: (0, import_clsx2.clsx)(
         "theme-preset-button",
-        "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
-        "flex w-full h-full items-center justify-center relative transition-all duration-200",
-        "hover:shadow-lg hover:border-primary/20 px-4 py-3",
-        isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
+        isSelected && "theme-preset-button--selected"
       ),
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2.5 text-center", children: [
-        layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
+      "aria-pressed": isSelected,
+      title: label,
+      children: [
+        layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "theme-preset-button__colors", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
           (color, index) => renderColorBox ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderColorBox(color, index) }, index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBox, { color }, index)
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
-      ] })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "theme-preset-button__text", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "theme-preset-button__label", children: label }) })
+      ]
     }
   ) });
 };
@@ -4747,41 +4748,45 @@ var ThemePresetButtons = ({
     try {
       setLoading(true);
       setError(null);
-      let allPresets = [];
+      const builtInPresetList = [];
+      const customPresetList = [];
       if (showBuiltIn) {
-        const builtInPresetList = Object.entries(builtInPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "built-in"
-          }
-        }));
-        allPresets.push(...builtInPresetList);
+        builtInPresetList.push(
+          ...Object.entries(builtInPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "built-in"
+            }
+          }))
+        );
       }
       if (showCustom) {
-        const customPresetList = Object.entries(customPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "custom"
-          }
-        }));
-        allPresets.push(...customPresetList);
+        customPresetList.push(
+          ...Object.entries(customPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "custom"
+            }
+          }))
+        );
       }
+      let allPresets = [...customPresetList, ...builtInPresetList];
       if (categories && categories.length > 0) {
         allPresets = allPresets.filter(
           (preset) => categories.includes(preset.metadata?.category || "unknown")

package/dist/index.mjs

@@ -4593,6 +4593,7 @@ var PresetButton = ({
   renderColorBox
 }) => {
   const colors = preset.colors[mode];
+  const label = preset.name.replace(/-/g, " ");
   if (renderPreset) {
     return /* @__PURE__ */ jsx4(
       "div",
@@ -4604,23 +4605,23 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ jsx4(
-    "div",
+  return /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ jsxs3(
+    "button",
     {
+      type: "button",
       className: clsx2(
         "theme-preset-button",
-        "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
-        "flex w-full h-full items-center justify-center relative transition-all duration-200",
-        "hover:shadow-lg hover:border-primary/20 px-4 py-3",
-        isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
+        isSelected && "theme-preset-button--selected"
       ),
       onClick,
-      children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2.5 text-center", children: [
-        layout.showColorBoxes && /* @__PURE__ */ jsx4("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
+      "aria-pressed": isSelected,
+      title: label,
+      children: [
+        layout.showColorBoxes && /* @__PURE__ */ jsx4("div", { className: "theme-preset-button__colors", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
           (color, index) => renderColorBox ? /* @__PURE__ */ jsx4("span", { children: renderColorBox(color, index) }, index) : /* @__PURE__ */ jsx4(ColorBox, { color }, index)
         ) }),
-        /* @__PURE__ */ jsx4("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
-      ] })
+        /* @__PURE__ */ jsx4("div", { className: "theme-preset-button__text", children: /* @__PURE__ */ jsx4("span", { className: "theme-preset-button__label", children: label }) })
+      ]
     }
   ) });
 };
@@ -4704,41 +4705,45 @@ var ThemePresetButtons = ({
     try {
       setLoading(true);
       setError(null);
-      let allPresets = [];
+      const builtInPresetList = [];
+      const customPresetList = [];
       if (showBuiltIn) {
-        const builtInPresetList = Object.entries(builtInPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "built-in"
-          }
-        }));
-        allPresets.push(...builtInPresetList);
+        builtInPresetList.push(
+          ...Object.entries(builtInPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "built-in"
+            }
+          }))
+        );
       }
       if (showCustom) {
-        const customPresetList = Object.entries(customPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "custom"
-          }
-        }));
-        allPresets.push(...customPresetList);
+        customPresetList.push(
+          ...Object.entries(customPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "custom"
+            }
+          }))
+        );
       }
+      let allPresets = [...customPresetList, ...builtInPresetList];
       if (categories && categories.length > 0) {
         allPresets = allPresets.filter(
           (preset) => categories.includes(preset.metadata?.category || "unknown")

package/dist/styles/components.css

@@ -40,14 +40,80 @@
 
 /* ThemePresetButtons: lightweight CSS-based animations and hover affordances */
 
-/* ThemePresetButtons: hover affordance without motion library */
+/* ThemePresetButtons: base button styling (no Tailwind required) */
 .theme-preset-button {
-  transition: transform 0.2s ease-out;
+  width: 100%;
+  height: 56px;
+  padding: 0.75rem 0.875rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.625rem;
+
+  border-radius: calc(var(--radius) + 0.25rem);
+  border: 1px solid hsl(var(--border) / 0.75);
+  background: hsl(var(--card) / 0.85);
+  color: hsl(var(--foreground));
+
+  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,
+    box-shadow 0.2s ease-out;
+}
+
+.theme-preset-button:focus-visible {
+  outline: 2px solid hsl(var(--ring) / 0.75);
+  outline-offset: 2px;
+}
+
+.theme-preset-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.theme-preset-button--selected {
+  background: hsl(var(--primary) / 0.06);
+  border-color: hsl(var(--primary) / 0.35);
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
+}
+
+.theme-preset-button__colors {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.theme-preset-button__text {
+  min-width: 0;
+  flex: 1;
+}
+
+.theme-preset-button__label {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+
+  line-height: 1.1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-transform: capitalize;
 }
 
 .theme-preset-button:hover {
-  transform: translateY(-3px) scale(1.02);
+  transform: translateY(-2px) scale(1.01);
   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);
 }
 
 /* Color boxes within preset buttons - fallback only */
@@ -55,11 +121,12 @@
   width: 12px;
   height: 12px;
   border-radius: calc(var(--radius) - 4px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--border) / 0.75);
+  box-shadow: 0 1px 0 hsl(var(--border) / 0.3);
 }
 
 .dark .theme-color-box {
-  border-color: rgba(255, 255, 255, 0.1);
+  border-color: hsl(var(--border) / 0.4);
 }
 
 /* Theme status card - for debugging and demos */

package/package.json

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