@abydahana/aksara-ui 1.0.0 → 1.1.0

package/dist/aksara.esm.js

@@ -1,4 +1,4 @@
-/*! Aksara UI v0.1.0 | Static CSS, no JIT, vanilla JS */
+/*! Aksara UI v1.0.0 | Static CSS, no JIT, TypeScript */
 const registry = new Map();
 const instances = new Set();
 const focusableSelector = [
@@ -1522,6 +1522,76 @@ function setupArbitraryObserver() {
         attributeFilter: ["class"]
     });
 }
+let currentTheme = "system";
+function getSystemTheme() {
+    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    }
+    return "light";
+}
+function applyTheme(theme) {
+    if (typeof document === "undefined")
+        return;
+    const root = document.documentElement;
+    const effectiveTheme = theme === "system" ? getSystemTheme() : theme;
+    root.setAttribute("data-theme", effectiveTheme);
+    if (effectiveTheme === "dark") {
+        root.classList.add("dark");
+        root.classList.remove("light");
+    }
+    else {
+        root.classList.add("light");
+        root.classList.remove("dark");
+    }
+}
+function setupClipboard(root = document) {
+    if (typeof document === "undefined")
+        return;
+    root.querySelectorAll("[data-clipboard]").forEach((trigger) => {
+        if (trigger.dataset.aksaraClipboardBound)
+            return;
+        trigger.dataset.aksaraClipboardBound = "true";
+        trigger.addEventListener("click", async (e) => {
+            e.preventDefault();
+            const targetSelector = trigger.getAttribute("data-clipboard");
+            let textToCopy = "";
+            if (targetSelector && targetSelector.startsWith("#")) {
+                const targetEl = document.querySelector(targetSelector);
+                if (targetEl) {
+                    textToCopy = targetEl.value ?? targetEl.textContent ?? "";
+                }
+            }
+            else if (targetSelector) {
+                textToCopy = targetSelector;
+            }
+            else {
+                textToCopy = trigger.getAttribute("data-clipboard-text") || trigger.textContent || "";
+            }
+            if (navigator.clipboard && textToCopy) {
+                try {
+                    await navigator.clipboard.writeText(textToCopy);
+                    const originalText = trigger.getAttribute("data-clipboard-original") || trigger.innerHTML;
+                    const successText = trigger.getAttribute("data-clipboard-success");
+                    if (successText) {
+                        if (!trigger.hasAttribute("data-clipboard-original")) {
+                            trigger.setAttribute("data-clipboard-original", originalText);
+                        }
+                        trigger.innerHTML = successText;
+                        setTimeout(() => {
+                            trigger.innerHTML = originalText;
+                        }, 2000);
+                    }
+                    trigger.classList.add("is-copied");
+                    setTimeout(() => trigger.classList.remove("is-copied"), 2000);
+                    emit(trigger, "clipboard:copy", { text: textToCopy });
+                }
+                catch {
+                    // ignore error
+                }
+            }
+        });
+    });
+}
 export const Aksara = {
     Modal,
     Tooltip,
@@ -1568,7 +1638,72 @@ export const Aksara = {
         const args = resolveArgs(target, options, ".offcanvas");
         return createAll(args.target, Offcanvas, args.options);
     },
+    setTheme(theme) {
+        currentTheme = theme;
+        if (typeof localStorage !== "undefined") {
+            try {
+                localStorage.setItem("aksara-theme", theme);
+            }
+            catch {
+                // ignore storage errors
+            }
+        }
+        applyTheme(theme);
+        if (typeof document !== "undefined") {
+            emit(document.documentElement, "theme:change", { theme });
+        }
+        return theme;
+    },
+    getTheme() {
+        return currentTheme;
+    },
+    initTheme() {
+        if (typeof localStorage !== "undefined") {
+            try {
+                const saved = (localStorage.getItem("aksara-theme") || localStorage.getItem("aksara-docs-theme"));
+                if (saved && (saved === "light" || saved === "dark" || saved === "system")) {
+                    currentTheme = saved;
+                }
+            }
+            catch {
+                // ignore storage errors
+            }
+        }
+        applyTheme(currentTheme);
+        if (typeof window !== "undefined" && window.matchMedia) {
+            window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+                if (currentTheme === "system") {
+                    applyTheme("system");
+                }
+            });
+        }
+        return currentTheme;
+    },
+    async clipboard(target, text) {
+        if (typeof navigator === "undefined" || !navigator.clipboard)
+            return false;
+        let textToCopy = text ?? "";
+        if (!textToCopy && typeof document !== "undefined") {
+            const el = typeof target === "string" ? document.querySelector(target) : target;
+            if (el) {
+                textToCopy = el.value ?? el.textContent ?? "";
+            }
+        }
+        if (!textToCopy)
+            return false;
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    },
     init(root = document) {
+        if (root === document) {
+            this.initTheme();
+        }
+        setupClipboard(root);
         scanArbitraryDom(root);
         setupArbitraryObserver();
         createAll(root.querySelectorAll("[data-tooltip]"), Tooltip);

package/dist/aksara.js

@@ -1,4 +1,4 @@
-/*! Aksara UI v0.1.0 | Static CSS, no JIT, vanilla JS */
+/*! Aksara UI v1.0.0 | Static CSS, no JIT, TypeScript */
 (function(){
 const registry = new Map();
 const instances = new Set();
@@ -1523,6 +1523,76 @@ function setupArbitraryObserver() {
         attributeFilter: ["class"]
     });
 }
+let currentTheme = "system";
+function getSystemTheme() {
+    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    }
+    return "light";
+}
+function applyTheme(theme) {
+    if (typeof document === "undefined")
+        return;
+    const root = document.documentElement;
+    const effectiveTheme = theme === "system" ? getSystemTheme() : theme;
+    root.setAttribute("data-theme", effectiveTheme);
+    if (effectiveTheme === "dark") {
+        root.classList.add("dark");
+        root.classList.remove("light");
+    }
+    else {
+        root.classList.add("light");
+        root.classList.remove("dark");
+    }
+}
+function setupClipboard(root = document) {
+    if (typeof document === "undefined")
+        return;
+    root.querySelectorAll("[data-clipboard]").forEach((trigger) => {
+        if (trigger.dataset.aksaraClipboardBound)
+            return;
+        trigger.dataset.aksaraClipboardBound = "true";
+        trigger.addEventListener("click", async (e) => {
+            e.preventDefault();
+            const targetSelector = trigger.getAttribute("data-clipboard");
+            let textToCopy = "";
+            if (targetSelector && targetSelector.startsWith("#")) {
+                const targetEl = document.querySelector(targetSelector);
+                if (targetEl) {
+                    textToCopy = targetEl.value ?? targetEl.textContent ?? "";
+                }
+            }
+            else if (targetSelector) {
+                textToCopy = targetSelector;
+            }
+            else {
+                textToCopy = trigger.getAttribute("data-clipboard-text") || trigger.textContent || "";
+            }
+            if (navigator.clipboard && textToCopy) {
+                try {
+                    await navigator.clipboard.writeText(textToCopy);
+                    const originalText = trigger.getAttribute("data-clipboard-original") || trigger.innerHTML;
+                    const successText = trigger.getAttribute("data-clipboard-success");
+                    if (successText) {
+                        if (!trigger.hasAttribute("data-clipboard-original")) {
+                            trigger.setAttribute("data-clipboard-original", originalText);
+                        }
+                        trigger.innerHTML = successText;
+                        setTimeout(() => {
+                            trigger.innerHTML = originalText;
+                        }, 2000);
+                    }
+                    trigger.classList.add("is-copied");
+                    setTimeout(() => trigger.classList.remove("is-copied"), 2000);
+                    emit(trigger, "clipboard:copy", { text: textToCopy });
+                }
+                catch {
+                    // ignore error
+                }
+            }
+        });
+    });
+}
 const Aksara = {
     Modal,
     Tooltip,
@@ -1569,7 +1639,72 @@ const Aksara = {
         const args = resolveArgs(target, options, ".offcanvas");
         return createAll(args.target, Offcanvas, args.options);
     },
+    setTheme(theme) {
+        currentTheme = theme;
+        if (typeof localStorage !== "undefined") {
+            try {
+                localStorage.setItem("aksara-theme", theme);
+            }
+            catch {
+                // ignore storage errors
+            }
+        }
+        applyTheme(theme);
+        if (typeof document !== "undefined") {
+            emit(document.documentElement, "theme:change", { theme });
+        }
+        return theme;
+    },
+    getTheme() {
+        return currentTheme;
+    },
+    initTheme() {
+        if (typeof localStorage !== "undefined") {
+            try {
+                const saved = (localStorage.getItem("aksara-theme") || localStorage.getItem("aksara-docs-theme"));
+                if (saved && (saved === "light" || saved === "dark" || saved === "system")) {
+                    currentTheme = saved;
+                }
+            }
+            catch {
+                // ignore storage errors
+            }
+        }
+        applyTheme(currentTheme);
+        if (typeof window !== "undefined" && window.matchMedia) {
+            window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+                if (currentTheme === "system") {
+                    applyTheme("system");
+                }
+            });
+        }
+        return currentTheme;
+    },
+    async clipboard(target, text) {
+        if (typeof navigator === "undefined" || !navigator.clipboard)
+            return false;
+        let textToCopy = text ?? "";
+        if (!textToCopy && typeof document !== "undefined") {
+            const el = typeof target === "string" ? document.querySelector(target) : target;
+            if (el) {
+                textToCopy = el.value ?? el.textContent ?? "";
+            }
+        }
+        if (!textToCopy)
+            return false;
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    },
     init(root = document) {
+        if (root === document) {
+            this.initTheme();
+        }
+        setupClipboard(root);
         scanArbitraryDom(root);
         setupArbitraryObserver();
         createAll(root.querySelectorAll("[data-tooltip]"), Tooltip);