uni-theme-select 1.0.2 → 1.0.4

package/dist/index.js

@@ -121,25 +121,45 @@ var ThemeStore = class {
 };
 var themeStore = new ThemeStore();
 
-// src/coreFunctions.ts
-var colorFields = [
+// src/constants.ts
+var fontOptions = [
+  // Modern Sans
+  { name: "Inter", value: "'Inter', sans-serif" },
+  { name: "Space Grotesk", value: "'Space Grotesk', sans-serif" },
+  { name: "Manrope", value: "'Manrope', sans-serif" },
+  // Serif
+  { name: "Merriweather", value: "'Merriweather', serif" },
+  { name: "Libre Baskerville", value: "'Libre Baskerville', serif" },
+  { name: "Cormorant Garamond", value: "'Cormorant Garamond', serif" },
+  // Slab
+  { name: "Roboto Slab", value: "'Roboto Slab', serif" },
+  { name: "Arvo", value: "'Arvo', serif" },
+  // Display / Branding
+  { name: "Abril Fatface", value: "'Abril Fatface', cursive" },
+  { name: "Righteous", value: "'Righteous', cursive" },
+  { name: "Fantasy", value: "fantasy" },
+  { name: "Monospace", value: "monospace" }
+];
+var formFields = [
   { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
   { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
   { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
-  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
+  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
   { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
   { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
-  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
+  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
-  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
-  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
+  { id: "font-family", label: "Font Family", defaultValue: "", type: "select", options: fontOptions, class: "font-family-input" },
+  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
-  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text" },
-  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
+  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
+  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
-  { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text" }
+  { id: "secondary-font-weight", label: "Secondary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
 ];
+
+// src/coreFunctions.ts
 function injectStyles() {
   if (document.getElementById("uni-theme-style")) return;
   const style = document.createElement("style");
@@ -195,6 +215,8 @@ function injectStyles() {
 
         #uni-theme-root.opened #uni-theme-panel{
             right: 0;
+            overflow: scroll;
+            max-height: 600px;
         }
 
         #uni-theme-root.opened #uni-theme-toggle{
@@ -225,6 +247,7 @@ function injectStyles() {
             justify-content: space-between;
             margin-bottom: 14px;
             gap: 12px;
+            text-align: left;
         }
 
         .uni-input-group label {
@@ -234,12 +257,19 @@ function injectStyles() {
         }
 
         .uni-input {
-            width: 36px;
-            height: 36px;
+            width: 30px;
+            height: 30px;
             border: 2px solid #ddd;
             cursor: pointer;
             padding: 0;
         }
+        .font-family-input{
+            width: 100px;
+        }
+        .uni-text-input{
+            width: 50px;
+            height: 19px;
+        }
         .radius-50{
             border-radius:50%
         }
@@ -275,34 +305,64 @@ function setTheme(name, customProps = {}) {
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
+  const selectThemes = document.createElement("select");
+  selectThemes.id = "available-themes";
+  selectThemes.innerHTML = `
+        <option value="">Select theme</option>
+        <option value="beige">Beige</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+        <option value="custom">Custom</option>
+    `;
+  panel.appendChild(selectThemes);
+  const customThemePanel = document.createElement("div");
+  customThemePanel.id = "csutom-theme-panel";
+  customThemePanel.style.display = "none";
   const title = document.createElement("h3");
   title.textContent = "Select Custom Theme";
-  panel.appendChild(title);
-  colorFields.forEach((field) => {
+  customThemePanel.appendChild(title);
+  formFields.forEach((field) => {
     const group = document.createElement("div");
     group.className = "uni-input-group";
     const label = document.createElement("label");
     label.textContent = field.label;
-    const input = document.createElement("input");
-    input.type = field.type;
-    input.name = field.id;
-    input.className = `uni-input ${field.class}`;
-    input.id = `uni-theme-${field.id}`;
-    input.value = field.defaultValue;
     group.appendChild(label);
-    group.appendChild(input);
-    if (field.units && field.units.length > 0) {
-      const inputUnits = document.createElement("select");
-      field.units.forEach((unit) => {
-        const option = document.createElement("option");
-        option.value = unit;
-        option.textContent = unit;
-        inputUnits.appendChild(option);
+    if (field.options && field.options.length > 0) {
+      const inputSelect = document.createElement("select");
+      inputSelect.name = field.id;
+      inputSelect.className = `uni-input ${field.class}`;
+      inputSelect.id = `uni-theme-${field.id}`;
+      inputSelect.value = field.defaultValue;
+      field.options.forEach((option) => {
+        const op = document.createElement("option");
+        op.value = option.value;
+        op.textContent = option.name;
+        inputSelect.appendChild(op);
       });
-      group.appendChild(inputUnits);
+      group.appendChild(inputSelect);
+    } else {
+      const input = document.createElement("input");
+      input.type = field.type;
+      input.name = field.id;
+      input.className = `uni-input ${field.class}`;
+      input.id = `uni-theme-${field.id}`;
+      input.value = field.defaultValue;
+      group.appendChild(input);
+      if (field.units && field.units.length > 0) {
+        const inputUnits = document.createElement("select");
+        inputUnits.disabled = true;
+        field.units.forEach((unit) => {
+          const option = document.createElement("option");
+          option.value = unit;
+          option.textContent = unit;
+          inputUnits.appendChild(option);
+        });
+        group.appendChild(inputUnits);
+      }
     }
-    panel.appendChild(group);
+    customThemePanel.appendChild(group);
   });
+  panel.appendChild(customThemePanel);
   container.appendChild(panel);
 }
 function injectHTML(options = {}) {
@@ -336,8 +396,34 @@ function initThemeElements() {
       setTheme(currentTheme.themeName, currentTheme.properties);
     });
   });
+  const availableThemes = document.getElementById("available-themes");
+  availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
+    var _a;
+    const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
+    const props = themes.find((item) => item.name == selectedTheme);
+    setTheme(selectedTheme, props == null ? void 0 : props.properties);
+  });
+  const fontSelect = document.getElementById("uni-theme-font-family");
+  fontSelect == null ? void 0 : fontSelect.addEventListener("change", (e) => {
+    var _a;
+    const selectedFont = (_a = e.target) == null ? void 0 : _a.value;
+    if (!selectedFont) return;
+    loadGoogleFonts(selectedFont);
+    document.body.style.fontFamily = selectedFont;
+    localStorage.setItem("selectFont", selectedFont);
+  });
   return { themeToggler, themePanel };
 }
+var loadGoogleFonts = (font) => {
+  const linkId = "dynamic-font-link";
+  const existingLink = document.getElementById(linkId);
+  if (existingLink) existingLink.remove();
+  const linkHTML = document.createElement("link");
+  linkHTML.id = linkId;
+  linkHTML.rel = "stylesheet";
+  linkHTML.href = `https://fonts.googleapis.com/css2/?faimly=${font.replace(/ /g, "+")}wght@400;500;600;700&display=swap`;
+  document.head.appendChild(linkHTML);
+};
 
 // src/themeManager.ts
 function getAvailableThemes() {
@@ -352,6 +438,21 @@ function loadSavedTheme() {
   } else {
     setTheme(parsed.name);
   }
+  window.addEventListener("DOMContentLoaded", () => {
+    const savedFont = localStorage.getItem("selectedFont");
+    if (savedFont) {
+      loadGoogleFonts(savedFont);
+      const fontObj = fontOptions.find((f) => f.name === savedFont);
+      if (fontObj) {
+        document.body.style.fontFamily = fontObj.value;
+        const fontSelector = document.querySelector(
+          "#uni-theme-font-family"
+        );
+        if (!fontSelector) return;
+        fontSelector.value = fontObj.value;
+      }
+    }
+  });
 }
 function mountToggleTheme(options = {}) {
   injectStyles();

package/dist/index.mjs

@@ -81,25 +81,45 @@ var ThemeStore = class {
 };
 var themeStore = new ThemeStore();
 
-// src/coreFunctions.ts
-var colorFields = [
+// src/constants.ts
+var fontOptions = [
+  // Modern Sans
+  { name: "Inter", value: "'Inter', sans-serif" },
+  { name: "Space Grotesk", value: "'Space Grotesk', sans-serif" },
+  { name: "Manrope", value: "'Manrope', sans-serif" },
+  // Serif
+  { name: "Merriweather", value: "'Merriweather', serif" },
+  { name: "Libre Baskerville", value: "'Libre Baskerville', serif" },
+  { name: "Cormorant Garamond", value: "'Cormorant Garamond', serif" },
+  // Slab
+  { name: "Roboto Slab", value: "'Roboto Slab', serif" },
+  { name: "Arvo", value: "'Arvo', serif" },
+  // Display / Branding
+  { name: "Abril Fatface", value: "'Abril Fatface', cursive" },
+  { name: "Righteous", value: "'Righteous', cursive" },
+  { name: "Fantasy", value: "fantasy" },
+  { name: "Monospace", value: "monospace" }
+];
+var formFields = [
   { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
   { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
   { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
-  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
+  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
   { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
   { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
-  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
+  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
-  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
-  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
+  { id: "font-family", label: "Font Family", defaultValue: "", type: "select", options: fontOptions, class: "font-family-input" },
+  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
-  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text" },
-  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
+  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
+  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
   { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
-  { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text" }
+  { id: "secondary-font-weight", label: "Secondary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
 ];
+
+// src/coreFunctions.ts
 function injectStyles() {
   if (document.getElementById("uni-theme-style")) return;
   const style = document.createElement("style");
@@ -155,6 +175,8 @@ function injectStyles() {
 
         #uni-theme-root.opened #uni-theme-panel{
             right: 0;
+            overflow: scroll;
+            max-height: 600px;
         }
 
         #uni-theme-root.opened #uni-theme-toggle{
@@ -185,6 +207,7 @@ function injectStyles() {
             justify-content: space-between;
             margin-bottom: 14px;
             gap: 12px;
+            text-align: left;
         }
 
         .uni-input-group label {
@@ -194,12 +217,19 @@ function injectStyles() {
         }
 
         .uni-input {
-            width: 36px;
-            height: 36px;
+            width: 30px;
+            height: 30px;
             border: 2px solid #ddd;
             cursor: pointer;
             padding: 0;
         }
+        .font-family-input{
+            width: 100px;
+        }
+        .uni-text-input{
+            width: 50px;
+            height: 19px;
+        }
         .radius-50{
             border-radius:50%
         }
@@ -235,34 +265,64 @@ function setTheme(name, customProps = {}) {
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
+  const selectThemes = document.createElement("select");
+  selectThemes.id = "available-themes";
+  selectThemes.innerHTML = `
+        <option value="">Select theme</option>
+        <option value="beige">Beige</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+        <option value="custom">Custom</option>
+    `;
+  panel.appendChild(selectThemes);
+  const customThemePanel = document.createElement("div");
+  customThemePanel.id = "csutom-theme-panel";
+  customThemePanel.style.display = "none";
   const title = document.createElement("h3");
   title.textContent = "Select Custom Theme";
-  panel.appendChild(title);
-  colorFields.forEach((field) => {
+  customThemePanel.appendChild(title);
+  formFields.forEach((field) => {
     const group = document.createElement("div");
     group.className = "uni-input-group";
     const label = document.createElement("label");
     label.textContent = field.label;
-    const input = document.createElement("input");
-    input.type = field.type;
-    input.name = field.id;
-    input.className = `uni-input ${field.class}`;
-    input.id = `uni-theme-${field.id}`;
-    input.value = field.defaultValue;
     group.appendChild(label);
-    group.appendChild(input);
-    if (field.units && field.units.length > 0) {
-      const inputUnits = document.createElement("select");
-      field.units.forEach((unit) => {
-        const option = document.createElement("option");
-        option.value = unit;
-        option.textContent = unit;
-        inputUnits.appendChild(option);
+    if (field.options && field.options.length > 0) {
+      const inputSelect = document.createElement("select");
+      inputSelect.name = field.id;
+      inputSelect.className = `uni-input ${field.class}`;
+      inputSelect.id = `uni-theme-${field.id}`;
+      inputSelect.value = field.defaultValue;
+      field.options.forEach((option) => {
+        const op = document.createElement("option");
+        op.value = option.value;
+        op.textContent = option.name;
+        inputSelect.appendChild(op);
       });
-      group.appendChild(inputUnits);
+      group.appendChild(inputSelect);
+    } else {
+      const input = document.createElement("input");
+      input.type = field.type;
+      input.name = field.id;
+      input.className = `uni-input ${field.class}`;
+      input.id = `uni-theme-${field.id}`;
+      input.value = field.defaultValue;
+      group.appendChild(input);
+      if (field.units && field.units.length > 0) {
+        const inputUnits = document.createElement("select");
+        inputUnits.disabled = true;
+        field.units.forEach((unit) => {
+          const option = document.createElement("option");
+          option.value = unit;
+          option.textContent = unit;
+          inputUnits.appendChild(option);
+        });
+        group.appendChild(inputUnits);
+      }
     }
-    panel.appendChild(group);
+    customThemePanel.appendChild(group);
   });
+  panel.appendChild(customThemePanel);
   container.appendChild(panel);
 }
 function injectHTML(options = {}) {
@@ -296,8 +356,34 @@ function initThemeElements() {
       setTheme(currentTheme.themeName, currentTheme.properties);
     });
   });
+  const availableThemes = document.getElementById("available-themes");
+  availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
+    var _a;
+    const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
+    const props = themes.find((item) => item.name == selectedTheme);
+    setTheme(selectedTheme, props == null ? void 0 : props.properties);
+  });
+  const fontSelect = document.getElementById("uni-theme-font-family");
+  fontSelect == null ? void 0 : fontSelect.addEventListener("change", (e) => {
+    var _a;
+    const selectedFont = (_a = e.target) == null ? void 0 : _a.value;
+    if (!selectedFont) return;
+    loadGoogleFonts(selectedFont);
+    document.body.style.fontFamily = selectedFont;
+    localStorage.setItem("selectFont", selectedFont);
+  });
   return { themeToggler, themePanel };
 }
+var loadGoogleFonts = (font) => {
+  const linkId = "dynamic-font-link";
+  const existingLink = document.getElementById(linkId);
+  if (existingLink) existingLink.remove();
+  const linkHTML = document.createElement("link");
+  linkHTML.id = linkId;
+  linkHTML.rel = "stylesheet";
+  linkHTML.href = `https://fonts.googleapis.com/css2/?faimly=${font.replace(/ /g, "+")}wght@400;500;600;700&display=swap`;
+  document.head.appendChild(linkHTML);
+};
 
 // src/themeManager.ts
 function getAvailableThemes() {
@@ -312,6 +398,21 @@ function loadSavedTheme() {
   } else {
     setTheme(parsed.name);
   }
+  window.addEventListener("DOMContentLoaded", () => {
+    const savedFont = localStorage.getItem("selectedFont");
+    if (savedFont) {
+      loadGoogleFonts(savedFont);
+      const fontObj = fontOptions.find((f) => f.name === savedFont);
+      if (fontObj) {
+        document.body.style.fontFamily = fontObj.value;
+        const fontSelector = document.querySelector(
+          "#uni-theme-font-family"
+        );
+        if (!fontSelector) return;
+        fontSelector.value = fontObj.value;
+      }
+    }
+  });
 }
 function mountToggleTheme(options = {}) {
   injectStyles();

package/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "uni-theme-select",
-  "version": "1.0.2",
-  "description": "Framework-agnostic theme switcher",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --watch --dts"
-  },
-  "keywords": [
-    "theme",
-    "dark-mode",
-    "css-variables"
-  ],
-  "author": "sri_manohari",
-  "license": "ISC",
-  "devDependencies": {
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  },
-  "dependencies": {
-    "@melloware/coloris": "^0.25.0"
-  }
-}
+{
+  "name": "uni-theme-select",
+  "version": "1.0.4",
+  "description": "Framework-agnostic theme switcher",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts"
+  },
+  "keywords": [
+    "theme",
+    "dark-mode",
+    "css-variables"
+  ],
+  "author": "sri_manohari",
+  "license": "ISC",
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@melloware/coloris": "^0.25.0"
+  }
+}