@iyulab/components 0.1.11 → 0.2.1

package/dist/utilities/{theme.js → Theme.js}

@@ -2,7 +2,7 @@ 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
+const styleSheetBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
 
 
 })).map(([path, module]) => {
@@ -10,36 +10,31 @@ const styleBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/sty
   return [name, module.default];
 }).filter(([name]) => name !== "");
 class Theme {
-  constructor() {
+  static {
     this.STORAGE_THEME_KEY = "theme";
+  }
+  static {
     this.storage = null;
+  }
+  static {
     this._isInitialized = false;
+  }
+  static {
     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;
+  /** 개별 인스턴스 생성을 방지합니다. */
+  constructor() {
   }
-  get isInitialized() {
+  static get isInitialized() {
     return this._isInitialized;
   }
-  get isDebugMode() {
+  static get isDebugMode() {
     return this._isDebugMode;
   }
   /**
    * 테마 유틸리티를 초기화합니다.
    */
-  async init(options) {
+  static async init(options) {
     this._isDebugMode = options?.debug || false;
     this.log("init called", { options });
     if (options?.store) {
@@ -52,7 +47,7 @@ class Theme {
     const useBuiltIn = options?.useBuiltIn ?? true;
     if (useBuiltIn) {
       this.log("Import enabled: loading styles via internal assets");
-      for (let [name, module] of styleBundle) {
+      for (let [name, module] of styleSheetBundle) {
         const style = document.createElement("style");
         style.setAttribute("data-name", name);
         style.textContent = module;
@@ -68,24 +63,24 @@ class Theme {
       styleHead.forEach((el) => el.remove());
       this.log("Import disabled: removed internal styles from head");
     }
-    let theme2 = options?.default ?? "system";
+    let theme = options?.default ?? "system";
     if (this.storage !== null) {
       const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
       if (savedTheme) {
-        theme2 = savedTheme;
-        this.log("loaded theme from storage", theme2);
+        theme = savedTheme;
+        this.log("loaded theme from storage", theme);
       } else {
-        this.log("no saved theme in storage, using default", theme2);
+        this.log("no saved theme in storage, using default", theme);
       }
     }
-    this.set(theme2);
+    this.set(theme);
     this._isInitialized = true;
     this.log("theme initialized");
   }
   /**
    * 현재 문서에 적용된 테마를 가져옵니다.
    */
-  get() {
+  static get() {
     const attr = document.documentElement.getAttribute("data-theme");
     switch (attr) {
       case "system":
@@ -101,40 +96,49 @@ class Theme {
   /**
    * 현재 문서에 적용할 테마를 설정합니다.
    */
-  set(theme2) {
+  static set(theme) {
     try {
       const media = window.matchMedia("(prefers-color-scheme: dark)");
-      if (theme2 === "system") {
+      if (theme === "system") {
         document.documentElement.setAttribute("data-theme", "system");
         media.addEventListener("change", this.handleSystemThemeChanged);
         this.handleSystemThemeChanged();
         this.log("system theme applied (data-theme=system)");
-      } else if (theme2 === "dark") {
+      } else if (theme === "dark") {
         media.removeEventListener("change", this.handleSystemThemeChanged);
         document.documentElement.setAttribute("data-theme", "dark");
         document.documentElement.setAttribute("theme", "dark");
         this.log("dark theme applied (data-theme=dark, theme=dark)");
-      } else if (theme2 === "light") {
+      } else if (theme === "light") {
         media.removeEventListener("change", this.handleSystemThemeChanged);
         document.documentElement.setAttribute("data-theme", "light");
         document.documentElement.setAttribute("theme", "light");
         this.log("light theme applied (data-theme=light, theme=light)");
       } else {
-        throw new Error(`Invalid theme: ${theme2}. Use 'light', 'dark', or 'system'.`);
+        throw new Error(`Invalid theme: ${theme}. Use 'light', 'dark', or 'system'.`);
       }
     } catch (e) {
       this.log("Error applying theme:", e);
     }
     if (this.storage !== null) {
-      this.storage.set(this.STORAGE_THEME_KEY, theme2);
-      this.log("saved theme to storage", theme2);
+      this.storage.set(this.STORAGE_THEME_KEY, theme);
+      this.log("saved theme to storage", theme);
     }
   }
+  static {
+    /** 시스템 테마 변경을 처리하는 메서드 */
+    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");
+      }
+    };
+  }
   /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
-  log(...args) {
+  static log(...args) {
     if (this._isDebugMode) console.log("[theme]", ...args);
   }
 }
-const theme = Theme.instance;
 
-export { Theme, theme };
+export { Theme };

package/dist/{internals/attribute-converters.d.ts → utilities/converters.d.ts}

@@ -6,7 +6,7 @@
  * @param separator - 구분자 문자열 (default: `,`)
  * @returns lit 속성 컨버터 객체
  */
-export declare function arrayAttributeConverter<T>(parser: (value: string) => T, separator?: string): {
+export declare function arrayAttrConverter<T>(parser: (value: string) => T, separator?: string): {
     fromAttribute: (value: string | null) => T[] | undefined;
     toAttribute: (value: T[] | undefined) => string | null;
 };

package/dist/{internals/attribute-converters.js → utilities/converters.js}

@@ -1,4 +1,4 @@
-function arrayAttributeConverter(parser, separator = ",") {
+function arrayAttrConverter(parser, separator = ",") {
   return {
     fromAttribute: (value) => {
       if (!value) return void 0;
@@ -11,4 +11,4 @@ function arrayAttributeConverter(parser, separator = ",") {
   };
 }
 
-export { arrayAttributeConverter };
+export { arrayAttrConverter };

package/dist/{internals/node-helpers.js → utilities/elements.js}

@@ -6,14 +6,15 @@ function getParentElement(element) {
     return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
   }
 }
-function querySelectorWithin(element, selectors) {
-  if (!selectors) return null;
+function querySelectorAllWithin(element, selectors) {
+  if (!selectors) return [];
   const rootNode = element.getRootNode({ composed: false });
   if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-    return rootNode.querySelector(selectors);
+    const nodeList = rootNode.querySelectorAll(selectors);
+    return Array.from(nodeList);
   } else {
-    return null;
+    return [];
   }
 }
 
-export { getParentElement, querySelectorWithin };
+export { getParentElement, querySelectorAllWithin };

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "@iyulab/components",
-  "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.1.11",
-  "keywords": [
-    "iyulab",
-    "components",
-    "web-components",
-    "lit",
-    "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.2",
-    "react": "^19.2.3",
-    "reflect-metadata": "^0.2.2"
-  },
-  "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.3",
-    "eslint": "^9.39.2",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^16.5.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1",
-    "vite": "^7.3.0",
-    "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.2.1",
+  "keywords": [
+    "iyulab",
+    "components",
+    "web-components",
+    "lit",
+    "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": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./dist/*": {
+      "types": "./src/*.d.ts",
+      "import": "./src/*"
+    }
+  },
+  "scripts": {
+    "test": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@lit/react": "^1.0.8",
+    "lit": "^3.3.2",
+    "react": "^19.2.3",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^25.0.9",
+    "eslint": "^9.39.2",
+    "eslint-plugin-lit": "^2.1.1",
+    "globals": "^17.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.5"
+  }
+}

package/dist/assets/icons/arrow-clockwise.svg.js

@@ -1,3 +0,0 @@
-const arrowClockwise = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill-rule=\"evenodd\" d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z\"/>\n  <path d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466\"/>\n</svg>";
-
-export { arrowClockwise as default };

package/dist/assets/icons/speedometer.svg.js

@@ -1,3 +0,0 @@
-const speedometer = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2M3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.39.39 0 0 0-.029-.518z\"/>\n  <path fill-rule=\"evenodd\" d=\"M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.95 11.95 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0\"/>\n</svg>";
-
-export { speedometer as default };

package/dist/components/icon-button/UIconButton.component.d.ts

@@ -1,20 +0,0 @@
-import { BaseElement } from '../BaseElement.js';
-import { IconLibrary } from '../icon/UIcon.component.js';
-/**
- * IconButton 컴포넌트는 아이콘만 표시하는 버튼입니다.
- */
-export declare class UIconButton extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 경계선이 없는 스타일을 적용합니다. */
-    borderless: boolean;
-    /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
-    disabled: boolean;
-    /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
-    loading: boolean;
-    /** 아이콘 라이브러리를 지정합니다. */
-    lib: IconLibrary;
-    /** 아이콘의 이름을 지정합니다. */
-    name?: string;
-    render(): import('lit-html').TemplateResult<1>;
-}

package/dist/components/icon-button/UIconButton.component.js

@@ -1,59 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { USpinner } from '../spinner/USpinner.component.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { styles } from './UIconButton.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 UIconButton extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.borderless = false;
-    this.disabled = false;
-    this.loading = false;
-    this.lib = "default";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-spinner": USpinner,
-      "u-icon": UIcon
-    };
-  }
-  render() {
-    return html`
-      <button part="base"
-        ?disabled=${this.disabled || this.loading}>
-        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon .lib=${this.lib} .name=${this.name}></u-icon>`}
-      </button>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UIconButton.prototype, "borderless");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UIconButton.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UIconButton.prototype, "loading");
-__decorateClass([
-  property({ type: String })
-], UIconButton.prototype, "lib");
-__decorateClass([
-  property({ type: String })
-], UIconButton.prototype, "name");
-
-export { UIconButton };

package/dist/components/icon-button/UIconButton.d.ts

@@ -1,7 +0,0 @@
-import { UIconButton } from './UIconButton.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-icon-button": UIconButton;
-    }
-}
-export { UIconButton };

package/dist/components/icon-button/UIconButton.js

@@ -1,5 +0,0 @@
-import { UIconButton } from './UIconButton.component.js';
-
-UIconButton.define("u-icon-button");
-
-export { UIconButton };

package/dist/components/icon-button/UIconButton.styles.js

@@ -1,54 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: relative;
-    display: inline-flex;
-    
-    font-size: 16px;
-    padding: 0.5em;
-    color: var(--u-icon-color);
-    border: 1px solid var(--u-border-color);
-    border-radius: 6px;
-    background-color: var(--u-bg-color);
-
-    transition: all 0.2s ease;
-    user-select: none;
-    cursor: pointer;
-  }
-  :host(:hover) {
-    color: var(--u-icon-color-hover);
-    background-color: var(--u-bg-color-hover);
-  }
-  :host(:active) {
-    color: var(--u-icon-color-active);
-    background-color: var(--u-bg-color-active);
-    transform: translateY(1px);
-  }
-  :host([borderless]) {
-    border: none;
-    background-color: transparent;
-  }
-  :host([loading]),
-  :host([disabled]) {
-    color: var(--u-icon-color-disabled);
-    pointer-events: none;
-  }
-
-  button {
-    all: unset;
-    display: inline-flex;
-  }
-  button:focus-visible {
-    outline: 2px solid var(--u-blue-500, #3b82f6);
-    outline-offset: 2px;
-  }
-
-  u-spinner,
-  u-icon {
-    color: inherit;
-    font-size: inherit;
-  }
-`;
-
-export { styles };

package/dist/internals/react-wrapper.d.ts

@@ -1,21 +0,0 @@
-type Constructor<T> = {
-    new (): T;
-};
-type EventName<T extends Event = Event> = string & {
-    __eventType: T;
-};
-type EventNames = Record<string, EventName | string>;
-interface Options<I extends HTMLElement, E extends EventNames = {}> {
-    tagName: string;
-    elementClass: Constructor<I>;
-    events?: E;
-    shadow?: 'open' | 'closed';
-    properties?: Record<string, unknown>;
-}
-/**
- * Converts a Lit Element to a React Component.
- * @param option - The options for the conversion.
- * @returns The converted React Component.
- */
-export declare function convertReact<I extends HTMLElement, E extends EventNames = {}>(option: Options<I, E>): import('@lit/react').ReactWebComponent<I, E>;
-export {};

package/dist/react-components/UIconButton.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { UIconButton } from '../components/icon-button/UIconButton';
-
-export declare const UIconButton: React.ForwardRefExoticComponent<
-  Partial<UIconButton> & React.HTMLAttributes<UIconButton>
->;
-
-export type UIconButtonProps = React.ComponentProps<typeof UIconButton>;

package/dist/react-components/UIconButton.js

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