@iyulab/components 0.1.0

package/dist/utilities/theme.d.ts

@@ -0,0 +1,54 @@
+import { BrowserStorageOptions } from './storage.js';
+/** iyulab에서 제공하는 스타일 타입입니다. */
+export type ThemeType = 'light' | 'dark' | 'system';
+/** 테마 초기 설정 옵션 */
+export interface ThemeInitOptions {
+    /**
+     * 디버그 모드 활성화 여부
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * 기본 테마 설정
+     * @default 'system'
+     */
+    default?: ThemeType;
+    /**
+     * 테마 설정 유지 옵션
+     * @default false
+     */
+    persist?: false | BrowserStorageOptions;
+    /**
+     * 내부적으로 제공되는 스타일 시트를 자동으로 불러올지 여부
+     * @default true
+     */
+    useBuiltIn?: boolean;
+}
+/**
+ * iyulab에서 제공하는 스타일 시트 및 테마 유틸리티입니다.
+ */
+export declare const theme: {
+    readonly isInitialized: boolean;
+    /**
+     * 테마 유틸리티를 초기화합니다.
+     */
+    init(options?: ThemeInitOptions): void;
+    /**
+     * 현재 문서 테마를 가져옵니다.
+     * @returns 현재 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+     */
+    get(): ThemeType | undefined;
+    /**
+     * 문서 테마를 'light', 'dark' 또는 'system'으로 설정합니다.
+     * @param theme - 설정할 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+     * @throws 테마가 'light', 'dark' 또는 'system'이 아닌 경우 오류가 발생합니다.
+     */
+    set(theme: ThemeType): void;
+    /**
+     * 문서 테마를 토글합니다.
+     * 현재 테마가 'light'이면 'dark'로, 'dark'이면 'light'로 변경합니다.
+     * system 테마가 설정된 경우, 토글이 불가능하며 경고를 출력합니다.
+     * @return 변경된 테마입니다. system 테마인 경우 변경되지 않습니다.
+     */
+    toggle(): ThemeType;
+};

package/dist/utilities/theme.js

@@ -0,0 +1,108 @@
+import * as c from "../assets/styles/dark.css.js";
+import * as g from "../assets/styles/light.css.js";
+import { BrowserStorage as u } from "./storage.js";
+const l = "theme";
+let i = null, m = !1, o = !1;
+const a = {
+  get isInitialized() {
+    return m;
+  },
+  /**
+   * 테마 유틸리티를 초기화합니다.
+   */
+  init(e) {
+    if (o = e?.debug || !1, t("init called", { options: e }), e?.useBuiltIn !== !1) {
+      t("dynamicImport enabled: loading styles via import.meta.glob");
+      const s = Object.entries(/* @__PURE__ */ Object.assign({
+        "../assets/styles/dark.css": c,
+        "../assets/styles/light.css": g
+      }));
+      t(`found ${s.length} style assets`, s.map((r) => r[0]));
+      for (let [r, h] of s) {
+        r = r.split("/").pop() || r;
+        const d = document.createElement("style");
+        if (d.setAttribute("data-path", r), d.textContent = h.default, document.head.querySelector(`style[data-path="${r}"]`)) {
+          t("style already present, skipping", r);
+          return;
+        }
+        document.head.appendChild(d), t("appended style to head", r);
+      }
+    }
+    if (e?.persist !== void 0 && e?.persist !== !1) {
+      t("persist option provided, initializing BrowserStorage", e.persist), i = new u(e.persist);
+      const s = i.get(l);
+      t("retrieved savedTheme from storage", s), s && a.set(s);
+    } else e?.default ? (t(`Applying default theme: ${e.default}`), a.set(e.default)) : (t("No persist option or default theme provided, applying system theme by default"), a.set("system"));
+    m = !0, t("theme initialized", { isInitialized: m });
+  },
+  /**
+   * 현재 문서 테마를 가져옵니다.
+   * @returns 현재 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+   */
+  get() {
+    const e = document.documentElement.getAttribute("data-theme");
+    switch (t("get() called, data-theme attribute =", e), e) {
+      case "system":
+        return "system";
+      case "light":
+        return "light";
+      case "dark":
+        return "dark";
+      default:
+        return;
+    }
+  },
+  /**
+   * 문서 테마를 'light', 'dark' 또는 'system'으로 설정합니다.
+   * @param theme - 설정할 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+   * @throws 테마가 'light', 'dark' 또는 'system'이 아닌 경우 오류가 발생합니다.
+   */
+  set(e) {
+    if (t("set() called with", e), typeof window > "u")
+      throw t("set() aborted: not in browser environment"), new Error("setTheme can only be called in a browser environment.");
+    if (e === "system")
+      t("setting theme to system; attaching matchMedia listener"), document.documentElement.setAttribute("data-theme", "system"), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", n), n(), t("system theme applied (data-theme=system)");
+    else if (e === "dark") {
+      t("setting theme to dark; removing matchMedia listener if present");
+      try {
+        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", n);
+      } catch (s) {
+        t("removeEventListener may have failed or not supported", s);
+      }
+      document.documentElement.setAttribute("data-theme", "dark"), document.documentElement.setAttribute("theme", "dark"), t("dark theme applied (data-theme=dark, theme=dark)");
+    } else if (e === "light") {
+      t("setting theme to light; removing matchMedia listener if present");
+      try {
+        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", n);
+      } catch (s) {
+        t("removeEventListener may have failed or not supported", s);
+      }
+      document.documentElement.setAttribute("data-theme", "light"), document.documentElement.setAttribute("theme", "light"), t("light theme applied (data-theme=light, theme=light)");
+    } else
+      throw t("set() received invalid theme", e), new Error(`Invalid theme: ${e}. Use 'light', 'dark', or 'system'.`);
+    i && (i.set(l, e), t("persisted theme to storage", e));
+  },
+  /**
+   * 문서 테마를 토글합니다.
+   * 현재 테마가 'light'이면 'dark'로, 'dark'이면 'light'로 변경합니다.
+   * system 테마가 설정된 경우, 토글이 불가능하며 경고를 출력합니다.
+   * @return 변경된 테마입니다. system 테마인 경우 변경되지 않습니다.
+   */
+  toggle() {
+    const e = a.get();
+    if (t("toggle() called, current theme =", e), e === "system")
+      return console.warn("Cannot toggle theme when system theme is active. Please set a specific theme (light or dark) first."), t("toggle aborted: current theme is system"), e;
+    const s = e === "light" ? "dark" : "light";
+    return a.set(s), t("toggle completed, new theme =", s), s;
+  }
+}, n = () => {
+  if (document.documentElement.getAttribute("data-theme") === "system") {
+    const e = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.setAttribute("theme", e ? "dark" : "light");
+  }
+}, t = (...e) => {
+  o && console.log("[theme]", ...e);
+};
+export {
+  a as theme
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@iyulab/components",
+  "description": "web-components library by iyulab based on lit-element",
+  "version": "0.1.0",
+  "keywords": [
+    "iyulab",
+    "web-components",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "start": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "lit": "^3.3.1",
+    "react": "^19.2.0",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@lit/react": "^1.0.8",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-lit": "^2.1.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
+}