@iyulab/components 0.1.11 → 0.2.1

package/dist/components/tooltip/UTooltip.component.js

@@ -1,13 +1,37 @@
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { FloatingElement } from '../FloatingElement.js';
 import { styles } from './UTooltip.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 UTooltip extends FloatingElement {
   constructor() {
     super(...arguments);
+    this.interactive = false;
     /** this 바인딩 이벤트 핸들러 */
-    this._show = () => this.show();
-    this._hide = () => this.hide();
+    this._show = (event) => {
+      const target = event.currentTarget;
+      if (!target) return;
+      this.show(target);
+    };
+    /** this 바인딩 이벤트 핸들러 */
+    this._hide = (event) => {
+      if (this.interactive) {
+        const target = this.target;
+        const related = event.relatedTarget;
+        if (!target || !related) return;
+        if (this.contains(related) || target.contains(related)) return;
+      }
+      this.hide();
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -17,30 +41,48 @@ class UTooltip extends FloatingElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("anchor")) {
-      const oldAnchor = changedProperties.get("anchor");
-      const newAnchor = this.anchor;
-      if (oldAnchor) this.unbind(oldAnchor);
-      if (newAnchor) this.bind(newAnchor);
+    if (changedProperties.has("anchors")) {
+      const oldAnchors = changedProperties.get("anchors");
+      const newAnchors = this.anchors;
+      if (oldAnchors) this.unbind(oldAnchors);
+      if (newAnchors) this.bind(newAnchors);
+    }
+    if (changedProperties.has("distance")) {
+      if (this.distance > 0) {
+        this.style.setProperty("--interactive-area", `${this.distance}px`);
+      } else {
+        this.style.removeProperty("--interactive-area");
+      }
     }
   }
   render() {
     return html`<slot></slot>`;
   }
   /** 바인딩 이벤트 핸들러 */
-  bind(target) {
-    target.addEventListener("pointerenter", this._show);
-    target.addEventListener("pointerleave", this._hide);
-    target.addEventListener("focusin", this._show);
-    target.addEventListener("focusout", this._hide);
+  bind(anchors) {
+    for (const anchor of anchors) {
+      anchor.addEventListener("pointerenter", this._show);
+      anchor.addEventListener("pointerleave", this._hide);
+      anchor.addEventListener("focusin", this._show);
+      anchor.addEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
   /** 바인딩 해제 이벤트 핸들러 */
-  unbind(target) {
-    target.removeEventListener("pointerenter", this._show);
-    target.removeEventListener("pointerleave", this._hide);
-    target.removeEventListener("focusin", this._show);
-    target.removeEventListener("focusout", this._hide);
+  unbind(anchors) {
+    for (const anchor of anchors) {
+      anchor.removeEventListener("pointerenter", this._show);
+      anchor.removeEventListener("pointerleave", this._hide);
+      anchor.removeEventListener("focusin", this._show);
+      anchor.removeEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
 }
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTooltip.prototype, "interactive");
 
 export { UTooltip };

package/dist/components/tooltip/UTooltip.styles.js

@@ -1,6 +1,10 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --interactive-area: 0px;
+  }
+
   :host {
     padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
@@ -18,6 +22,17 @@ const styles = css`
     opacity: 0.8;
     transform: scale(1);
   }
+
+  /* 툴팁을 distance만큼 감싸는 보이지 않는 영역 */
+  :host([interactive])::before {
+    content: '';
+    position: absolute;
+    /* 툴팁을 distance만큼 모든 방향으로 확장 */
+    inset: calc(var(--interactive-area) * -1);
+    background: transparent;
+    pointer-events: auto;
+    z-index: -1;
+  }
 `;
 
 export { styles };

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';
 export * from './components/form/UForm.js';
 export * from './components/icon/UIcon.js';
-export * from './components/icon-button/UIconButton.js';
 export * from './components/input/UInput.js';
 export * from './components/menu/UMenu.js';
 export * from './components/menu-item/UMenuItem.js';
@@ -14,6 +13,7 @@ export * from './components/progress-ring/UProgressRing.js';
 export * from './components/skeleton/USkeleton.js';
 export * from './components/spinner/USpinner.js';
 export * from './components/split-panel/USplitPanel.js';
+export * from './components/tag/UTag.js';
 export * from './components/tooltip/UTooltip.js';
 export * from './components/tree/UTree.js';
 export * from './components/tree-item/UTreeItem.js';
@@ -24,5 +24,6 @@ export * from './events/UResizeEvent';
 export * from './events/USelectEvent';
 export * from './events/UShowEvent';
 export * from './utilities/BrowserStorage.js';
-export * from './utilities/notifier.js';
-export * from './utilities/theme.js';
+export * from './utilities/IconRegistry.js';
+export * from './utilities/Notifier.js';
+export * from './utilities/Theme.js';

package/dist/index.js

@@ -5,7 +5,6 @@ import './components/divider/UDivider.js';
 import './components/drawer/UDrawer.js';
 import './components/form/UForm.js';
 import './components/icon/UIcon.js';
-import './components/icon-button/UIconButton.js';
 import './components/input/UInput.js';
 import './components/menu/UMenu.js';
 import './components/menu-item/UMenuItem.js';
@@ -14,12 +13,14 @@ import './components/progress-ring/UProgressRing.js';
 import './components/skeleton/USkeleton.js';
 import './components/spinner/USpinner.js';
 import './components/split-panel/USplitPanel.js';
+import './components/tag/UTag.js';
 import './components/tooltip/UTooltip.js';
 import './components/tree/UTree.js';
 import './components/tree-item/UTreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
-export { notifier } from './utilities/notifier.js';
-export { Theme, theme } from './utilities/theme.js';
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl } from './utilities/IconRegistry.js';
+export { Notifier } from './utilities/Notifier.js';
+export { Theme } from './utilities/Theme.js';
 export { UAlert } from './components/alert/UAlert.component.js';
 export { UButton } from './components/button/UButton.component.js';
 export { UDialog } from './components/dialog/UDialog.component.js';
@@ -27,7 +28,6 @@ export { UDivider } from './components/divider/UDivider.component.js';
 export { UDrawer } from './components/drawer/UDrawer.component.js';
 export { UForm } from './components/form/UForm.component.js';
 export { UIcon } from './components/icon/UIcon.component.js';
-export { UIconButton } from './components/icon-button/UIconButton.component.js';
 export { UInput } from './components/input/UInput.component.js';
 export { UMenu } from './components/menu/UMenu.component.js';
 export { UMenuItem } from './components/menu-item/UMenuItem.component.js';
@@ -36,6 +36,7 @@ export { UProgressRing } from './components/progress-ring/UProgressRing.componen
 export { USkeleton } from './components/skeleton/USkeleton.component.js';
 export { USpinner } from './components/spinner/USpinner.component.js';
 export { USplitPanel } from './components/split-panel/USplitPanel.component.js';
+export { UTag } from './components/tag/UTag.component.js';
 export { UTooltip } from './components/tooltip/UTooltip.component.js';
 export { UTree } from './components/tree/UTree.component.js';
 export { UTreeItem } from './components/tree-item/UTreeItem.component.js';

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

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

package/dist/react-components/UTag.js

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

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

@@ -12,7 +12,6 @@ export { UDivider, UDividerProps } from './UDivider';
 export { UDrawer, UDrawerProps } from './UDrawer';
 export { UForm, UFormProps } from './UForm';
 export { UIcon, UIconProps } from './UIcon';
-export { UIconButton, UIconButtonProps } from './UIconButton';
 export { UInput, UInputProps } from './UInput';
 export { UMenu, UMenuProps } from './UMenu';
 export { UMenuItem, UMenuItemProps } from './UMenuItem';
@@ -21,6 +20,7 @@ export { UProgressRing, UProgressRingProps } from './UProgressRing';
 export { USkeleton, USkeletonProps } from './USkeleton';
 export { USpinner, USpinnerProps } from './USpinner';
 export { USplitPanel, USplitPanelProps } from './USplitPanel';
+export { UTag, UTagProps } from './UTag';
 export { UTooltip, UTooltipProps } from './UTooltip';
 export { UTree, UTreeProps } from './UTree';
 export { UTreeItem, UTreeItemProps } from './UTreeItem';

package/dist/react-components/index.js

@@ -5,7 +5,6 @@ export { UDivider } from './UDivider.js';
 export { UDrawer } from './UDrawer.js';
 export { UForm } from './UForm.js';
 export { UIcon } from './UIcon.js';
-export { UIconButton } from './UIconButton.js';
 export { UInput } from './UInput.js';
 export { UMenu } from './UMenu.js';
 export { UMenuItem } from './UMenuItem.js';
@@ -14,6 +13,7 @@ export { UProgressRing } from './UProgressRing.js';
 export { USkeleton } from './USkeleton.js';
 export { USpinner } from './USpinner.js';
 export { USplitPanel } from './USplitPanel.js';
+export { UTag } from './UTag.js';
 export { UTooltip } from './UTooltip.js';
 export { UTree } from './UTree.js';
 export { UTreeItem } from './UTreeItem.js';

package/dist/utilities/{icons.d.ts → IconRegistry.d.ts}

@@ -1,46 +1,40 @@
+/**
+ * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
+ */
+declare function getDefaultBaseUrl(): string;
+/**
+ * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
+ *
+ * @example
+ * - `/assets/icons/`
+ * - `https://cdn.example.com/icons/`
+ */
+declare function setDefaultBaseUrl(url: string): void;
 type IconResolver = (name: string) => string | undefined | Promise<string | undefined>;
 /**
- * 아이콘 레지스트리 클래스입니다.
+ * 아이콘 레지스트리입니다.
  * 아이콘 라이브러리를 등록하고, 아이콘을 조회하는 기능을 제공합니다.
  */
 declare class IconRegistry {
-    private static _instance;
-    private libs;
+    private static libs;
+    /** 클래스 생성 방지 */
     private constructor();
-    static get instance(): IconRegistry;
     /**
      * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
      */
-    has(lib: string): boolean;
+    static has(lib: string): boolean;
     /**
      * 지정된 아이콘 라이브러리를 등록합니다.
      * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
      */
-    register(lib: string, resolver: IconResolver): void;
+    static register(lib: string, resolver: IconResolver): void;
     /**
      * 지정된 아이콘 라이브러리를 등록 해제합니다.
      */
-    unregister(lib: string): void;
+    static unregister(lib: string): void;
     /**
      * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
      */
-    resolve(lib: string, name: string): Promise<string | undefined>;
+    static resolve(lib: string, name: string): Promise<string | undefined>;
 }
-/**
- * 전역 아이콘 레지스트리 인스턴스에 접근합니다.
- * 기본 내장 아이콘 라이브러리가 포함되어 있습니다.
- */
-export declare const icons: IconRegistry;
-/**
- * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
- */
-export declare function getDefaultBaseUrl(): string;
-/**
- * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
- *
- * @example
- * - `/assets/icons/`
- * - `https://cdn.example.com/icons/`
- */
-export declare function setDefaultBaseUrl(url: string): void;
-export {};
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl, };

package/dist/utilities/{icons.js → IconRegistry.js}

@@ -1,8 +1,9 @@
-import * as arrowClockwise from '../assets/icons/arrow-clockwise.svg.js';
 import * as arrowDown from '../assets/icons/arrow-down.svg.js';
+import * as arrowRepeat from '../assets/icons/arrow-repeat.svg.js';
 import * as arrowUp from '../assets/icons/arrow-up.svg.js';
 import * as ban from '../assets/icons/ban.svg.js';
 import * as bellFill from '../assets/icons/bell-fill.svg.js';
+import * as boxArrowUpRight from '../assets/icons/box-arrow-up-right.svg.js';
 import * as checkCircleFill from '../assets/icons/check-circle-fill.svg.js';
 import * as checkLg from '../assets/icons/check-lg.svg.js';
 import * as chevronDown from '../assets/icons/chevron-down.svg.js';
@@ -15,6 +16,13 @@ import * as exclamationCircleFill from '../assets/icons/exclamation-circle-fill.
 import * as exclamationTriangleFill from '../assets/icons/exclamation-triangle-fill.svg.js';
 import * as eyeSlash from '../assets/icons/eye-slash.svg.js';
 import * as eye from '../assets/icons/eye.svg.js';
+import * as fileEarmark from '../assets/icons/file-earmark.svg.js';
+import * as flag from '../assets/icons/flag.svg.js';
+import * as globe from '../assets/icons/globe.svg.js';
+import * as handThumbsDownFill from '../assets/icons/hand-thumbs-down-fill.svg.js';
+import * as handThumbsDown from '../assets/icons/hand-thumbs-down.svg.js';
+import * as handThumbsUpFill from '../assets/icons/hand-thumbs-up-fill.svg.js';
+import * as handThumbsUp from '../assets/icons/hand-thumbs-up.svg.js';
 import * as infoCircleFill from '../assets/icons/info-circle-fill.svg.js';
 import * as layoutSidebar from '../assets/icons/layout-sidebar.svg.js';
 import * as lightbulbFill from '../assets/icons/lightbulb-fill.svg.js';
@@ -26,13 +34,21 @@ import * as paperclip from '../assets/icons/paperclip.svg.js';
 import * as pencilSquare from '../assets/icons/pencil-square.svg.js';
 import * as plusLg from '../assets/icons/plus-lg.svg.js';
 import * as search from '../assets/icons/search.svg.js';
-import * as speedometer from '../assets/icons/speedometer.svg.js';
+import * as share from '../assets/icons/share.svg.js';
+import * as stopCircle from '../assets/icons/stop-circle.svg.js';
+import * as tools from '../assets/icons/tools.svg.js';
 import * as xLg from '../assets/icons/x-lg.svg.js';
 
 let defaultIconBaseUrl = "/assets/icons/";
+function getDefaultBaseUrl() {
+  return defaultIconBaseUrl;
+}
+function setDefaultBaseUrl(url) {
+  defaultIconBaseUrl = url;
+}
 const defaultIconCache = /* @__PURE__ */ new Map();
 const internalIconBundle = new Map(
-  Object.entries(/* #__PURE__ */ Object.assign({"../assets/icons/arrow-clockwise.svg": arrowClockwise,"../assets/icons/arrow-down.svg": arrowDown,"../assets/icons/arrow-up.svg": arrowUp,"../assets/icons/ban.svg": ban,"../assets/icons/bell-fill.svg": bellFill,"../assets/icons/check-circle-fill.svg": checkCircleFill,"../assets/icons/check-lg.svg": checkLg,"../assets/icons/chevron-down.svg": chevronDown,"../assets/icons/chevron-left.svg": chevronLeft,"../assets/icons/chevron-right.svg": chevronRight,"../assets/icons/chevron-up.svg": chevronUp,"../assets/icons/copy.svg": copy,"../assets/icons/dash-lg.svg": dashLg,"../assets/icons/exclamation-circle-fill.svg": exclamationCircleFill,"../assets/icons/exclamation-triangle-fill.svg": exclamationTriangleFill,"../assets/icons/eye-slash.svg": eyeSlash,"../assets/icons/eye.svg": eye,"../assets/icons/info-circle-fill.svg": infoCircleFill,"../assets/icons/layout-sidebar.svg": layoutSidebar,"../assets/icons/lightbulb-fill.svg": lightbulbFill,"../assets/icons/lightbulb-off.svg": lightbulbOff,"../assets/icons/lightbulb.svg": lightbulb,"../assets/icons/mic-fill.svg": micFill,"../assets/icons/mic-mute-fill.svg": micMuteFill,"../assets/icons/paperclip.svg": paperclip,"../assets/icons/pencil-square.svg": pencilSquare,"../assets/icons/plus-lg.svg": plusLg,"../assets/icons/search.svg": search,"../assets/icons/speedometer.svg": speedometer,"../assets/icons/x-lg.svg": xLg
+  Object.entries(/* #__PURE__ */ Object.assign({"../assets/icons/arrow-down.svg": arrowDown,"../assets/icons/arrow-repeat.svg": arrowRepeat,"../assets/icons/arrow-up.svg": arrowUp,"../assets/icons/ban.svg": ban,"../assets/icons/bell-fill.svg": bellFill,"../assets/icons/box-arrow-up-right.svg": boxArrowUpRight,"../assets/icons/check-circle-fill.svg": checkCircleFill,"../assets/icons/check-lg.svg": checkLg,"../assets/icons/chevron-down.svg": chevronDown,"../assets/icons/chevron-left.svg": chevronLeft,"../assets/icons/chevron-right.svg": chevronRight,"../assets/icons/chevron-up.svg": chevronUp,"../assets/icons/copy.svg": copy,"../assets/icons/dash-lg.svg": dashLg,"../assets/icons/exclamation-circle-fill.svg": exclamationCircleFill,"../assets/icons/exclamation-triangle-fill.svg": exclamationTriangleFill,"../assets/icons/eye-slash.svg": eyeSlash,"../assets/icons/eye.svg": eye,"../assets/icons/file-earmark.svg": fileEarmark,"../assets/icons/flag.svg": flag,"../assets/icons/globe.svg": globe,"../assets/icons/hand-thumbs-down-fill.svg": handThumbsDownFill,"../assets/icons/hand-thumbs-down.svg": handThumbsDown,"../assets/icons/hand-thumbs-up-fill.svg": handThumbsUpFill,"../assets/icons/hand-thumbs-up.svg": handThumbsUp,"../assets/icons/info-circle-fill.svg": infoCircleFill,"../assets/icons/layout-sidebar.svg": layoutSidebar,"../assets/icons/lightbulb-fill.svg": lightbulbFill,"../assets/icons/lightbulb-off.svg": lightbulbOff,"../assets/icons/lightbulb.svg": lightbulb,"../assets/icons/mic-fill.svg": micFill,"../assets/icons/mic-mute-fill.svg": micMuteFill,"../assets/icons/paperclip.svg": paperclip,"../assets/icons/pencil-square.svg": pencilSquare,"../assets/icons/plus-lg.svg": plusLg,"../assets/icons/search.svg": search,"../assets/icons/share.svg": share,"../assets/icons/stop-circle.svg": stopCircle,"../assets/icons/tools.svg": tools,"../assets/icons/x-lg.svg": xLg
 
 
 })).map(([path, module]) => {
@@ -41,26 +57,23 @@ const internalIconBundle = new Map(
   }).filter(([name]) => name !== "")
 );
 class IconRegistry {
-  constructor() {
+  static {
     this.libs = /* @__PURE__ */ new Map();
   }
-  static get instance() {
-    if (!this._instance) {
-      this._instance = new IconRegistry();
-    }
-    return this._instance;
+  /** 클래스 생성 방지 */
+  constructor() {
   }
   /**
    * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
    */
-  has(lib) {
+  static has(lib) {
     return this.libs.has(lib);
   }
   /**
    * 지정된 아이콘 라이브러리를 등록합니다.
    * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
    */
-  register(lib, resolver) {
+  static register(lib, resolver) {
     if (this.libs.has(lib)) {
       console.warn(`Icon library "${lib}" is already registered`);
     } else {
@@ -70,23 +83,23 @@ class IconRegistry {
   /**
    * 지정된 아이콘 라이브러리를 등록 해제합니다.
    */
-  unregister(lib) {
+  static unregister(lib) {
     this.libs.delete(lib);
   }
   /**
    * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
    */
-  async resolve(lib, name) {
+  static async resolve(lib, name) {
     const resolver = this.libs.get(lib);
     if (!resolver) return void 0;
     const svg = await resolver(name);
     return svg?.trim();
   }
 }
-IconRegistry.instance.register("internal", (name) => {
+IconRegistry.register("internal", (name) => {
   return internalIconBundle.get(name);
 });
-IconRegistry.instance.register("default", async (name) => {
+IconRegistry.register("default", async (name) => {
   if (defaultIconCache.has(name)) {
     return defaultIconCache.get(name);
   }
@@ -103,9 +116,5 @@ IconRegistry.instance.register("default", async (name) => {
     return void 0;
   }
 });
-const icons = IconRegistry.instance;
-function getDefaultBaseUrl() {
-  return defaultIconBaseUrl;
-}
 
-export { getDefaultBaseUrl, icons };
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl };

package/dist/utilities/{notifier.d.ts → Notifier.d.ts}

@@ -1,4 +1,5 @@
 import { AlertType } from '../components/alert/UAlert.component.js';
+/** 토스트 알림의 화면 위치 타입 */
 export type ScreenPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
 /** 토스트 알림 옵션 */
 export interface ToastOptions {
@@ -14,23 +15,17 @@ export interface ToastOptions {
     position?: ScreenPosition;
 }
 /**
- * Notifier 클래스 — 싱글톤 패턴으로 사용합니다.
+ * 알림 유틸리티 전역 인스턴스입니다.
  */
-declare class Notifier {
-    private static _instance;
-    private containers;
-    private toasts;
+export declare class Notifier {
+    private static containers;
+    private static toasts;
+    /** 개별 인스턴스 생성을 방지합니다. */
     private constructor();
-    static get instance(): Notifier;
     /**
      * 토스트 알림을 생성합니다.
      */
-    toast(options: ToastOptions): Promise<void>;
+    static toast(options: ToastOptions): Promise<void>;
     /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
-    private getOrCreateContainer;
+    private static getOrCreateContainer;
 }
-/**
- * 알림 유틸리티 싱글톤 인스턴스입니다.
- */
-export declare const notifier: Notifier;
-export {};

package/dist/utilities/{notifier.js → Notifier.js}

@@ -2,20 +2,19 @@ import { UAlert } from '../components/alert/UAlert.component.js';
 
 UAlert.define("u-alert");
 class Notifier {
-  constructor() {
+  static {
     this.containers = /* @__PURE__ */ new Map();
+  }
+  static {
     this.toasts = /* @__PURE__ */ new Set();
   }
-  static get instance() {
-    if (!this._instance) {
-      this._instance = new Notifier();
-    }
-    return this._instance;
+  /** 개별 인스턴스 생성을 방지합니다. */
+  constructor() {
   }
   /**
    * 토스트 알림을 생성합니다.
    */
-  async toast(options) {
+  static async toast(options) {
     const el = new UAlert();
     el.type = options.type;
     el.heading = options.heading;
@@ -39,7 +38,7 @@ class Notifier {
     }, duration);
   }
   /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
-  getOrCreateContainer(position) {
+  static getOrCreateContainer(position) {
     let container = this.containers.get(position);
     if (container) return container;
     container = document.createElement("div");
@@ -76,6 +75,5 @@ class Notifier {
     return container;
   }
 }
-const notifier = Notifier.instance;
 
-export { notifier };
+export { Notifier };

package/dist/utilities/{theme.d.ts → Theme.d.ts}

@@ -25,36 +25,31 @@ export interface ThemeInitOptions {
     useBuiltIn?: boolean;
 }
 /**
- * 현재 문서에 테마를 적용하고 관리하는 유틸리티 클래스입니다.
+ * 현재 문서에 테마를 적용하고 관리하는 유틸리티 전역 인스턴스입니다.
  */
 export declare class Theme {
-    private static _instance;
-    private readonly STORAGE_THEME_KEY;
-    private storage;
-    private _isInitialized;
-    private _isDebugMode;
+    private static readonly STORAGE_THEME_KEY;
+    private static storage;
+    private static _isInitialized;
+    private static _isDebugMode;
+    /** 개별 인스턴스 생성을 방지합니다. */
     private constructor();
-    static get instance(): Theme;
-    get isInitialized(): boolean;
-    get isDebugMode(): boolean;
+    static get isInitialized(): boolean;
+    static get isDebugMode(): boolean;
     /**
      * 테마 유틸리티를 초기화합니다.
      */
-    init(options?: ThemeInitOptions): Promise<void>;
+    static init(options?: ThemeInitOptions): Promise<void>;
     /**
      * 현재 문서에 적용된 테마를 가져옵니다.
      */
-    get(): ThemeType | undefined;
+    static get(): ThemeType | undefined;
     /**
      * 현재 문서에 적용할 테마를 설정합니다.
      */
-    set(theme: ThemeType): void;
+    static set(theme: ThemeType): void;
     /** 시스템 테마 변경을 처리하는 메서드 */
-    private handleSystemThemeChanged;
+    private static handleSystemThemeChanged;
     /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
-    private log;
+    private static log;
 }
-/**
- * 테마 유틸리티의 싱글톤 인스턴스입니다.
- */
-export declare const theme: Theme;