@iyulab/components 0.1.3 → 0.1.5

package/dist/utilities/theme.js

@@ -2,71 +2,80 @@ import * as dark from '../assets/styles/dark.css.js';
 import * as light from '../assets/styles/light.css.js';
 import { BrowserStorage } from './BrowserStorage.js';
 
+const styleBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
+
+
+})).map(([path, module]) => {
+  const name = path.split("/").pop()?.replace(".css", "") || "";
+  return [name, module.default];
+}).filter(([name]) => name !== "");
 class Theme {
-  /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
   constructor() {
-    this.STORAGE_KEY_DEFAULT = "theme";
+    this.STORAGE_THEME_KEY = "theme";
     this.storage = null;
     this._isInitialized = false;
     this._isDebugMode = false;
-    /**
-     * 시스템 테마 변경을 처리하는 메서드
-     */
+    /** 시스템 테마 변경을 처리하는 메서드 */
     this.handleSystemThemeChanged = (_) => {
       if (document.documentElement.getAttribute("data-theme") === "system") {
         const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
         document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
+        this.log("system theme changed, applied", isDark ? "dark" : "light");
       }
     };
   }
-  /** 싱글톤 인스턴스 접근자 */
   static get instance() {
     if (!this._instance) {
       this._instance = new Theme();
     }
     return this._instance;
   }
-  /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
   get isInitialized() {
     return this._isInitialized;
   }
+  get isDebugMode() {
+    return this._isDebugMode;
+  }
   /**
-   * 테마 유틸리티 초기화
+   * 테마 유틸리티를 초기화합니다.
    */
   async init(options) {
     this._isDebugMode = options?.debug || false;
     this.log("init called", { options });
     if (options?.store) {
-      this.log("store option provided, initializing BrowserStorage");
       this.storage = new BrowserStorage(options.store);
+      this.log("store option provided, initializing BrowserStorage");
+    } else {
+      this.storage = null;
+      this.log("no store option provided, skipping BrowserStorage initialization");
     }
     const useBuiltIn = options?.useBuiltIn ?? true;
     if (useBuiltIn) {
       this.log("Import enabled: loading styles via internal assets");
-      const assets = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
-
-
-}));
-      this.log(`found ${assets.length} style assets`, assets.map((a) => a[0]));
-      for (let [path, module] of assets) {
-        const fileName = path.split("/").pop() || path;
+      for (let [name, module] of styleBundle) {
         const style = document.createElement("style");
-        style.setAttribute("data-path", fileName);
-        style.textContent = module.default;
-        if (document.head.querySelector(`style[data-path="${fileName}"]`)) {
-          this.log("style already present, skipping", fileName);
+        style.setAttribute("data-name", name);
+        style.textContent = module;
+        if (document.head.querySelector(`style[data-name="${name}"]`)) {
+          this.log("style already present, skipping", name);
           continue;
         }
         document.head.appendChild(style);
-        this.log("appended style to head", fileName);
+        this.log("appended style to head", name);
       }
+    } else {
+      const styleHead = document.head.querySelectorAll("style[data-name]");
+      styleHead.forEach((el) => el.remove());
+      this.log("Import disabled: removed internal styles from head");
     }
-    let theme2 = options?.default || "system";
+    let theme2 = options?.default ?? "system";
     if (this.storage !== null) {
-      const savedTheme = await this.storage.get(this.STORAGE_KEY_DEFAULT);
+      const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
       if (savedTheme) {
         theme2 = savedTheme;
         this.log("loaded theme from storage", theme2);
+      } else {
+        this.log("no saved theme in storage, using default", theme2);
       }
     }
     this.set(theme2);
@@ -90,7 +99,7 @@ class Theme {
     }
   }
   /**
-   * 현재 문서 테마를 설정합니다.
+   * 현재 문서에 적용할 테마를 설정합니다.
    */
   set(theme2) {
     try {
@@ -117,17 +126,15 @@ class Theme {
       this.log("Error applying theme:", e);
     }
     if (this.storage !== null) {
-      this.storage.set(this.STORAGE_KEY_DEFAULT, theme2);
+      this.storage.set(this.STORAGE_THEME_KEY, theme2);
       this.log("saved theme to storage", theme2);
     }
   }
-  /**
-   * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
-   */
+  /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
   log(...args) {
     if (this._isDebugMode) console.log("[theme]", ...args);
   }
 }
 const theme = Theme.instance;
 
-export { Theme, theme };
+export { theme };

package/package.json

@@ -1,58 +1,59 @@
-{
-  "name": "@iyulab/components",
-  "description": "web-components library by iyulab based on lit-element",
-  "version": "0.1.3",
-  "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/*.d.ts",
-      "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"
-  }
-}
+{
+  "name": "@iyulab/components",
+  "description": "web-components library based on lit-element made by iyulab",
+  "version": "0.1.5",
+  "keywords": [
+    "iyulab",
+    "components",
+    "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/*.d.ts",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "start": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "lit": "^3.3.1",
+    "react": "^19.2.1",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@lit/react": "^1.0.8",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-lit": "^2.1.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
+}

package/dist/components/panel/Panel.d.ts

@@ -1,10 +0,0 @@
-import { BaseElement } from '../BaseElement.js';
-/**
- * 각 패널은 독립적인 크기와 콘텐츠를 가질 수 있습니다.
- */
-export declare class Panel extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    connectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-}

package/dist/components/panel/Panel.js

@@ -1,21 +0,0 @@
-import { html } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-import { styles } from './Panel.styles.js';
-
-class Panel extends BaseElement {
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.classList.add("scrollable");
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-export { Panel };

package/dist/components/panel/Panel.styles.js

@@ -1,12 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-export { styles };

package/dist/components/panel/index.d.ts

@@ -1,7 +0,0 @@
-import { Panel } from './Panel.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-panel': Panel;
-    }
-}
-export { Panel };

package/dist/components/split-panel/SplitPanel.types.d.ts

@@ -1,2 +0,0 @@
-/** 분할 패널의 방향을 나타내는 타입입니다. */
-export type PanelOrientation = 'horizontal' | 'vertical';

package/dist/components/split-panel/Splitter.d.ts

@@ -1,17 +0,0 @@
-import { BaseElement } from '../BaseElement.js';
-import { PanelOrientation } from './SplitPanel.types.js';
-/**
- * Splitter 컴포넌트는 SplitPanel의 패널들 사이에 배치되는 디바이더입니다.
- * 사용자가 드래그하여 패널의 크기를 조절할 수 있습니다.
- */
-export declare class Splitter extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 드래그 중인지 여부를 나타냅니다. */
-    dragging: boolean;
-    /** 분할 방향을 설정합니다. */
-    orientation: PanelOrientation;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 스플리터의 크기를 반환합니다. */
-    get size(): number;
-}

package/dist/components/split-panel/Splitter.js

@@ -1,45 +0,0 @@
-import { html } from 'lit';
-import { state, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { styles } from './Splitter.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Splitter extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.dragging = false;
-    this.orientation = "horizontal";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    return html`
-      <div class="handler" ?dragging=${this.dragging}></div>
-    `;
-  }
-  /** 스플리터의 크기를 반환합니다. */
-  get size() {
-    const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
-    return parseFloat(sizeStr) || 2;
-  }
-}
-__decorateClass([
-  state()
-], Splitter.prototype, "dragging");
-__decorateClass([
-  property({ type: String, reflect: true })
-], Splitter.prototype, "orientation");
-
-export { Splitter };

package/dist/components/split-panel/Splitter.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;

package/dist/integrations/react/UPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Panel } from '../../components/panel/index';
-
-export declare const UPanel: React.ForwardRefExoticComponent<
-  Partial<Panel> & React.HTMLAttributes<Panel>
->;
-
-export type UPanelProps = React.ComponentProps<typeof UPanel>;

package/dist/integrations/react/UPanel.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { Panel } from '../../components/panel/index';
-
-export const UPanel = createComponent({
-  react: React,
-  tagName: 'u-panel',
-  elementClass: Panel,
-  events: {}
-});

package/dist/internals/icons.d.ts

@@ -1,6 +0,0 @@
-/**
- * 내부적으로 사용되는 아이콘 레지스트리입니다.
- * SVG 아이콘 파일을 이름과 매핑하여 저장합니다.
- * 아이콘 파일은 '../assets/icons/' 경로에서 자동으로 로드됩니다.
- */
-export declare const icons: Map<string, string>;