uni-theme-select 1.0.3 → 1.0.4

package/dist/index.js

@@ -121,8 +121,26 @@ 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" },
@@ -132,14 +150,16 @@ var colorFields = [
   { 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: "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: "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", 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", class: "uni-text-input" }
+  { 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");
@@ -243,6 +263,9 @@ function injectStyles() {
             cursor: pointer;
             padding: 0;
         }
+        .font-family-input{
+            width: 100px;
+        }
         .uni-text-input{
             width: 50px;
             height: 19px;
@@ -282,8 +305,6 @@ function setTheme(name, customProps = {}) {
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
-  const title = document.createElement("h3");
-  title.textContent = "Select Custom Theme";
   const selectThemes = document.createElement("select");
   selectThemes.id = "available-themes";
   selectThemes.innerHTML = `
@@ -291,35 +312,57 @@ function constructPanel(container) {
         <option value="beige">Beige</option>
         <option value="dark">Dark</option>
         <option value="light">Light</option>
+        <option value="custom">Custom</option>
     `;
-  panel.appendChild(title);
   panel.appendChild(selectThemes);
-  colorFields.forEach((field) => {
+  const customThemePanel = document.createElement("div");
+  customThemePanel.id = "csutom-theme-panel";
+  customThemePanel.style.display = "none";
+  const title = document.createElement("h3");
+  title.textContent = "Select Custom Theme";
+  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");
-      inputUnits.disabled = true;
-      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 = {}) {
@@ -360,8 +403,27 @@ function initThemeElements() {
     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() {
@@ -376,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,8 +81,26 @@ 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" },
@@ -92,14 +110,16 @@ var colorFields = [
   { 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: "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: "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", 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", class: "uni-text-input" }
+  { 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");
@@ -203,6 +223,9 @@ function injectStyles() {
             cursor: pointer;
             padding: 0;
         }
+        .font-family-input{
+            width: 100px;
+        }
         .uni-text-input{
             width: 50px;
             height: 19px;
@@ -242,8 +265,6 @@ function setTheme(name, customProps = {}) {
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
-  const title = document.createElement("h3");
-  title.textContent = "Select Custom Theme";
   const selectThemes = document.createElement("select");
   selectThemes.id = "available-themes";
   selectThemes.innerHTML = `
@@ -251,35 +272,57 @@ function constructPanel(container) {
         <option value="beige">Beige</option>
         <option value="dark">Dark</option>
         <option value="light">Light</option>
+        <option value="custom">Custom</option>
     `;
-  panel.appendChild(title);
   panel.appendChild(selectThemes);
-  colorFields.forEach((field) => {
+  const customThemePanel = document.createElement("div");
+  customThemePanel.id = "csutom-theme-panel";
+  customThemePanel.style.display = "none";
+  const title = document.createElement("h3");
+  title.textContent = "Select Custom Theme";
+  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");
-      inputUnits.disabled = true;
-      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 = {}) {
@@ -320,8 +363,27 @@ function initThemeElements() {
     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() {
@@ -336,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.3",
-  "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"
+  }
+}