@iyulab/components 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.1.3 (2025-11-17)
+- fixed a theme `useBuiltIn` Option, now it works as expected.
+- added `ProgressBar` component to show loading progress at the top of the page.
+
+## 0.1.2 (2025-11-13)
+- fixed a type issue in `theme` utility.
+
 ## 0.1.1 (2025-11-13)
 - added `BrowserStorage` which supports `localStorage` and `cookie` with async methods for getting, setting, and removing items.
 - changed theme `persist` option to `store` option, and fixed some issues.

package/dist/components/index.d.ts

@@ -8,7 +8,10 @@ export * from './icon-button';
 export * from './input';
 export * from './menu';
 export * from './panel';
+export * from './progress-bar';
 export * from './progress-ring';
 export * from './spinner';
 export * from './split-panel';
 export * from './tooltip';
+export * from './tree';
+export * from './tree-item';

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
+ * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
+ */
+export declare class ProgressBar extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    indicatorEl: HTMLElement;
+    /** 내부 진행 상태 */
+    progressState: 'turned-on' | 'turned-off' | 'determinate' | 'indeterminate';
+    /** 내부 진행 상태 (0과 1 사이 값) */
+    progress: number;
+    /** 불확정 상태 (로딩 애니메이션 표시) */
+    indeterminate: boolean;
+    /** 최소값 (기본값: 0) */
+    minValue: number;
+    /** 최대값 (기본값: 100) */
+    maxValue: number;
+    /** 현재값 */
+    value: number;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 내부 진행 상태 업데이트 */
+    private updateProgress;
+}

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,99 @@
+import { html } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './ProgressBar.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 ProgressBar extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.progressState = "turned-on";
+    this.progress = 0;
+    this.indeterminate = false;
+    this.minValue = 0;
+    this.maxValue = 100;
+    this.value = 0;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("indeterminate")) {
+      this.progressState = this.indeterminate ? "indeterminate" : "turned-on";
+    }
+    if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
+      this.updateProgress();
+    }
+  }
+  render() {
+    return html`
+      <div class="indicator" part="indicator"
+        state=${this.progressState}
+      ></div>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+  /** 내부 진행 상태 업데이트 */
+  async updateProgress() {
+    await this.updateComplete;
+    if (this.indeterminate) return;
+    const range = this.maxValue - this.minValue;
+    const clampedValue = Math.max(this.minValue, Math.min(this.maxValue, this.value));
+    const progress = range === 0 ? 0 : (clampedValue - this.minValue) / range;
+    if (isNaN(progress)) return;
+    if (this.progress <= 0 || progress < this.progress) {
+      this.progressState = "turned-on";
+      await this.updateComplete;
+      this.progressState = "determinate";
+    }
+    if (this.progressState === "determinate") {
+      this.indicatorEl.style.setProperty("--progress-value", progress.toString());
+    }
+    if (progress >= 1) {
+      setTimeout(() => {
+        this.progressState = "turned-off";
+        setTimeout(() => {
+          this.progressState = "turned-on";
+        }, 500);
+      }, 300);
+    }
+    this.progress = progress;
+  }
+}
+__decorateClass([
+  query(".indicator")
+], ProgressBar.prototype, "indicatorEl");
+__decorateClass([
+  state()
+], ProgressBar.prototype, "progressState");
+__decorateClass([
+  state()
+], ProgressBar.prototype, "progress");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ProgressBar.prototype, "indeterminate");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "minValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "maxValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "value");
+
+export { ProgressBar };

package/dist/components/progress-bar/ProgressBar.styles.d.ts

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

package/dist/components/progress-bar/ProgressBar.styles.js

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 12px;
+    border-radius: 9999px;
+    background-color: var(--u-neutral-200);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+
+    --progress-value: 0;
+  }
+
+  .indicator {
+    position: absolute;
+    inset: 0 0 0 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--u-blue-600);
+    transform-origin: left center;
+    will-change: transform, opacity;
+  }
+  .indicator[state="turned-on"] {
+    opacity: 0;
+    transform: scaleX(0);
+    transition: none;
+  }
+  .indicator[state="turned-off"] {
+    opacity: 0;
+    transform: scaleX(1);
+    transition: transform 0.3s ease, opacity 0.5s ease;
+  }
+  .indicator[state="determinate"] {
+    opacity: 1;
+    transform: scaleX(var(--progress-value));
+    transition: transform 0.3s ease;
+  }
+  .indicator[state="indeterminate"] {
+    opacity: 1;
+    transform: scaleX(1);
+    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    line-height: 12px;
+    color: var(--u-neutral-800);
+    white-space: nowrap;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+
+export { styles };

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,7 @@
+import { ProgressBar } from './ProgressBar';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-bar': ProgressBar;
+    }
+}
+export { ProgressBar };

package/dist/components/progress-ring/ProgressRing.d.ts

@@ -21,7 +21,9 @@ export declare class ProgressRing extends BaseElement {
     value: number;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
+    /**
+     * 진행 상태를 0과 1 사이의 값으로 반환합니다.
+     */
     private updateProgress;
     /**
      * variant에 따라 dasharray 값을 반환합니다.

package/dist/components/progress-ring/ProgressRing.js

@@ -32,10 +32,10 @@ class ProgressRing extends BaseElement {
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("variant")) {
-      this.dasharray = this.updateDashArray(this.variant);
+      this.updateDashArray();
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.progress = this.updateProgress(this.minValue, this.maxValue, this.value);
+      this.updateProgress();
     }
   }
   render() {
@@ -67,24 +67,25 @@ class ProgressRing extends BaseElement {
       <div class="label" part="label">${Math.round(this.progress * 100)}%</div>
     `;
   }
-  /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
-  updateProgress(min, max, val) {
-    min = Number(min ?? 0);
-    max = Number(max ?? 100);
-    val = Math.min(Math.max(Number(val ?? 0), min), max);
-    return max === min ? 0 : (val - min) / (max - min);
+  /** 
+   * 진행 상태를 0과 1 사이의 값으로 반환합니다. 
+   */
+  updateProgress() {
+    const range = this.maxValue - this.minValue;
+    const clampedValue = Math.max(this.minValue, Math.min(this.maxValue, this.value));
+    this.progress = range === 0 ? 0 : (clampedValue - this.minValue) / range;
   }
   /** 
    * variant에 따라 dasharray 값을 반환합니다. 
    * [dash-length] [gap-length] or [dash-length] 형식
    */
-  updateDashArray(variant) {
-    if (variant === "ticks") {
-      return "1 1";
-    } else if (variant === "blocks") {
-      return "8 2";
+  updateDashArray() {
+    if (this.variant === "ticks") {
+      this.dasharray = "1 1";
+    } else if (this.variant === "blocks") {
+      this.dasharray = "8 2";
     } else {
-      return PATH_LENGTH.toString();
+      this.dasharray = PATH_LENGTH.toString();
     }
   }
 }

package/dist/components/tooltip/Tooltip.d.ts

@@ -23,7 +23,7 @@ export declare class Tooltip extends BaseElement {
     distance: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 툴팁을 표시합니다. */
     show: (e?: Event) => Promise<void>;

package/dist/components/tooltip/Tooltip.js

@@ -87,8 +87,8 @@ class Tooltip extends BaseElement {
     this.detachTriggers(this.triggers);
     super.disconnectedCallback();
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("triggers") && this.triggers) {
       const oldTriggers = changedProperties.get("triggers");
       this.detachTriggers(oldTriggers);

package/dist/components/tree/Tree.d.ts

@@ -0,0 +1,49 @@
+import { BaseElement } from '../BaseElement.js';
+import { TreeItem } from '../tree-item/TreeItem.js';
+/**
+ * Tree 컴포넌트는 계층적 데이터 구조를 표시하는 트리 뷰를 제공합니다.
+ * u-tree-item 컴포넌트를 자식으로 사용하여 중첩된 구조를 구성할 수 있습니다.
+ */
+export declare class Tree extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 트리가 비활성화 상태인지 여부입니다. */
+    disabled: boolean;
+    /** 다중 선택을 허용할지 여부입니다. */
+    multiple: boolean;
+    /** 선택 가능한 트리인지 여부입니다. */
+    selectable: boolean;
+    private treeItems;
+    private selectedItems;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    private handleSlotChange;
+    /** 트리 항목의 레벨을 업데이트합니다. */
+    private updateTreeItemsLevel;
+    /** 트리 항목 선택 이벤트를 처리합니다. */
+    private handleItemSelect;
+    /** 트리 항목 확장/축소 이벤트를 처리합니다. */
+    private handleItemToggle;
+    /**
+     * 모든 트리 항목을 확장합니다.
+     */
+    expandAll(): void;
+    /**
+     * 모든 트리 항목을 축소합니다.
+     */
+    collapseAll(): void;
+    /**
+     * 선택된 모든 항목을 반환합니다.
+     */
+    getSelectedItems(): TreeItem[];
+    /**
+     * 모든 선택을 해제합니다.
+     */
+    clearSelection(): void;
+    /**
+     * 재귀적으로 모든 TreeItem을 가져옵니다.
+     */
+    private getAllTreeItems;
+}

package/dist/components/tree/Tree.js

@@ -0,0 +1,171 @@
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { TreeItem } from '../tree-item/TreeItem.js';
+import { styles } from './Tree.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 Tree extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.multiple = false;
+    this.selectable = true;
+    this.selectedItems = /* @__PURE__ */ new Set();
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    this.handleSlotChange = () => {
+      this.updateTreeItemsLevel();
+    };
+    /** 트리 항목 선택 이벤트를 처리합니다. */
+    this.handleItemSelect = (e) => {
+      if (!this.selectable || this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const item = e.detail.item;
+      if (!this.multiple) {
+        this.selectedItems.forEach((selectedItem) => {
+          if (selectedItem !== item) {
+            selectedItem.selected = false;
+          }
+        });
+        this.selectedItems.clear();
+      }
+      if (item.selected) {
+        this.selectedItems.add(item);
+      } else {
+        this.selectedItems.delete(item);
+      }
+      this.emit("u-tree-select", {
+        value: item.value,
+        item,
+        selectedItems: Array.from(this.selectedItems)
+      });
+    };
+    /** 트리 항목 확장/축소 이벤트를 처리합니다. */
+    this.handleItemToggle = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const item = e.detail.item;
+      this.emit("u-tree-toggle", {
+        expanded: item.expanded,
+        item
+      });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-tree-item": TreeItem
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tree");
+    this.addEventListener("u-select", this.handleItemSelect);
+    this.addEventListener("u-toggle", this.handleItemToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("u-select", this.handleItemSelect);
+    this.removeEventListener("u-toggle", this.handleItemToggle);
+  }
+  render() {
+    return html`
+      <div class="tree-container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  /** 트리 항목의 레벨을 업데이트합니다. */
+  updateTreeItemsLevel(items = this.treeItems, level = 0) {
+    items.forEach((item) => {
+      if (item instanceof TreeItem) {
+        item.level = level;
+        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
+        if (childrenSlot) {
+          const children = childrenSlot.assignedElements();
+          if (children.length > 0) {
+            this.updateTreeItemsLevel(children, level + 1);
+          }
+        }
+      }
+    });
+  }
+  /**
+   * 모든 트리 항목을 확장합니다.
+   */
+  expandAll() {
+    this.getAllTreeItems().forEach((item) => {
+      item.expand();
+    });
+  }
+  /**
+   * 모든 트리 항목을 축소합니다.
+   */
+  collapseAll() {
+    this.getAllTreeItems().forEach((item) => {
+      item.collapse();
+    });
+  }
+  /**
+   * 선택된 모든 항목을 반환합니다.
+   */
+  getSelectedItems() {
+    return Array.from(this.selectedItems);
+  }
+  /**
+   * 모든 선택을 해제합니다.
+   */
+  clearSelection() {
+    this.selectedItems.forEach((item) => {
+      item.selected = false;
+    });
+    this.selectedItems.clear();
+  }
+  /**
+   * 재귀적으로 모든 TreeItem을 가져옵니다.
+   */
+  getAllTreeItems(items = this.treeItems) {
+    let allItems = [];
+    items.forEach((item) => {
+      if (item instanceof TreeItem) {
+        allItems.push(item);
+        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
+        if (childrenSlot) {
+          const children = childrenSlot.assignedElements();
+          if (children.length > 0) {
+            allItems = allItems.concat(this.getAllTreeItems(children));
+          }
+        }
+      }
+    });
+    return allItems;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Tree.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean })
+], Tree.prototype, "multiple");
+__decorateClass([
+  property({ type: Boolean })
+], Tree.prototype, "selectable");
+__decorateClass([
+  queryAssignedElements({ selector: "u-tree-item" })
+], Tree.prototype, "treeItems");
+
+export { Tree };

package/dist/components/tree/Tree.styles.d.ts

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

package/dist/components/tree/Tree.styles.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .tree-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    background-color: transparent;
+    border-radius: 4px;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,3 @@
+import { Tree } from './Tree.js';
+export { Tree };
+export default Tree;

package/dist/components/tree-item/TreeItem.d.ts

@@ -0,0 +1,52 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * TreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
+ * u-tree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
+ */
+export declare class TreeItem extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 트리 항목이 비활성화 상태인지 여부입니다. */
+    disabled: boolean;
+    /** 트리 항목이 선택된 상태인지 여부입니다. */
+    selected: boolean;
+    /** 트리 항목이 확장된 상태인지 여부입니다. */
+    expanded: boolean;
+    /** 트리 항목이 리프 노드인지 여부입니다. */
+    leaf: boolean;
+    /** 트리 항목의 들여쓰기 레벨입니다. */
+    level: number;
+    /** 트리 항목의 값입니다. */
+    value: string;
+    /** 트리 항목의 아이콘입니다. */
+    icon: string;
+    private hasChildren;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 확장/축소 아이콘을 렌더링합니다. */
+    private renderExpandIcon;
+    /** 커스텀 아이콘을 렌더링합니다. */
+    private renderIcon;
+    /** 헤더 클릭 이벤트를 처리합니다. */
+    private handleHeaderClick;
+    /** 확장/축소 아이콘 클릭 이벤트를 처리합니다. */
+    private handleExpandClick;
+    /** 슬롯 변경 시 자식 노드 확인 */
+    private handleSlotChange;
+    /** 자식 노드가 있는지 확인합니다. */
+    private checkForChildren;
+    /**
+     * 트리 항목을 확장합니다.
+     */
+    expand(): void;
+    /**
+     * 트리 항목을 축소합니다.
+     */
+    collapse(): void;
+    /**
+     * 트리 항목의 확장 상태를 토글합니다.
+     */
+    toggle(): void;
+}

package/dist/components/tree-item/TreeItem.js

@@ -0,0 +1,163 @@
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './TreeItem.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 TreeItem extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.selected = false;
+    this.expanded = false;
+    this.leaf = false;
+    this.level = 0;
+    this.value = "";
+    this.icon = "";
+    this.hasChildren = false;
+    /** 헤더 클릭 이벤트를 처리합니다. */
+    this.handleHeaderClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      this.selected = true;
+      this.emit("u-select", { value: this.value, item: this });
+    };
+    /** 확장/축소 아이콘 클릭 이벤트를 처리합니다. */
+    this.handleExpandClick = (e) => {
+      e.stopPropagation();
+      if (this.disabled || this.leaf || !this.hasChildren) {
+        return;
+      }
+      this.expanded = !this.expanded;
+      this.emit("u-toggle", { expanded: this.expanded, item: this });
+    };
+    /** 슬롯 변경 시 자식 노드 확인 */
+    this.handleSlotChange = () => {
+      this.checkForChildren();
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "treeitem");
+    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.checkForChildren();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+    if (changedProperties.has("expanded")) {
+      this.setAttribute("aria-expanded", this.hasChildren ? String(this.expanded) : "false");
+    }
+    if (changedProperties.has("selected")) {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    }
+  }
+  render() {
+    return html`
+      <div class="header" @click=${this.handleHeaderClick} style="padding-left: calc(${this.level} * 20px)">
+        ${this.renderExpandIcon()}
+        ${this.renderIcon()}
+        <span class="label">
+          <slot name="label"></slot>
+          <slot></slot>
+        </span>
+      </div>
+      <div class="children" ?hidden=${!this.expanded}>
+        <slot name="children" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  /** 확장/축소 아이콘을 렌더링합니다. */
+  renderExpandIcon() {
+    if (this.leaf || !this.hasChildren) {
+      return html`<span class="expand-icon placeholder"></span>`;
+    }
+    return html`
+      <span class="expand-icon" @click=${this.handleExpandClick}>
+        ${this.expanded ? "▼" : "▶"}
+      </span>
+    `;
+  }
+  /** 커스텀 아이콘을 렌더링합니다. */
+  renderIcon() {
+    if (!this.icon) {
+      return nothing;
+    }
+    return html`<span class="icon">${this.icon}</span>`;
+  }
+  /** 자식 노드가 있는지 확인합니다. */
+  checkForChildren() {
+    const childrenSlot = this.shadowRoot?.querySelector('slot[name="children"]');
+    const children = childrenSlot?.assignedElements() || [];
+    this.hasChildren = children.length > 0;
+    this.setAttribute("aria-expanded", this.hasChildren ? String(this.expanded) : "false");
+  }
+  /**
+   * 트리 항목을 확장합니다.
+   */
+  expand() {
+    if (!this.leaf && this.hasChildren) {
+      this.expanded = true;
+    }
+  }
+  /**
+   * 트리 항목을 축소합니다.
+   */
+  collapse() {
+    this.expanded = false;
+  }
+  /**
+   * 트리 항목의 확장 상태를 토글합니다.
+   */
+  toggle() {
+    if (!this.leaf && this.hasChildren) {
+      this.expanded = !this.expanded;
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "selected");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "expanded");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "leaf");
+__decorateClass([
+  property({ type: Number, reflect: true })
+], TreeItem.prototype, "level");
+__decorateClass([
+  property({ type: String })
+], TreeItem.prototype, "value");
+__decorateClass([
+  property({ type: String })
+], TreeItem.prototype, "icon");
+__decorateClass([
+  state()
+], TreeItem.prototype, "hasChildren");
+
+export { TreeItem };

package/dist/components/tree-item/TreeItem.styles.d.ts

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

package/dist/components/tree-item/TreeItem.styles.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    --tree-indent: 20px;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .header {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    line-height: 1.5;
+    border-radius: 4px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  :host(:not([disabled])) .header:hover {
+    background-color: var(--u-bg-color-hover, #f5f5f5);
+  }
+
+  :host([selected]) .header {
+    color: var(--u-blue-600, #0066cc);
+    background-color: var(--u-blue-0, #e8f4f8);
+  }
+
+  .expand-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    color: var(--u-icon-color, #757575);
+    transition: transform 0.2s ease, color 0.2s ease;
+    cursor: pointer;
+  }
+
+  .expand-icon:hover {
+    color: var(--u-icon-color-hover, #0066cc);
+  }
+
+  .expand-icon.placeholder {
+    cursor: default;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    font-size: 14px;
+    color: var(--u-icon-color, #757575);
+  }
+
+  .label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    color: var(--u-text-color, #212121);
+  }
+
+  :host([selected]) .label {
+    color: var(--u-blue-700, #1976d2);
+  }
+
+  .children {
+    display: block;
+  }
+
+  .children[hidden] {
+    display: none;
+  }
+`;
+
+export { styles };

package/dist/components/tree-item/index.d.ts

@@ -0,0 +1,3 @@
+import { TreeItem } from './TreeItem.js';
+export { TreeItem };
+export default TreeItem;

package/dist/index.js

@@ -8,11 +8,14 @@ export { IconButton } from './components/icon-button/IconButton.js';
 export { Input } from './components/input/Input.js';
 export { Menu } from './components/menu/Menu.js';
 export { Panel } from './components/panel/Panel.js';
+export { ProgressBar } from './components/progress-bar/ProgressBar.js';
 export { ProgressRing } from './components/progress-ring/ProgressRing.js';
 export { Spinner } from './components/spinner/Spinner.js';
 export { SplitPanel } from './components/split-panel/SplitPanel.js';
 export { Tooltip } from './components/tooltip/Tooltip.js';
+export { Tree } from './components/tree/Tree.js';
+export { TreeItem } from './components/tree-item/TreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
 export { getPropertyMeta, propertyMeta, setPropertyMeta } from './utilities/decorators.js';
 export { notifier } from './utilities/notifier.js';
-export { theme } from './utilities/theme.js';
+export { Theme, theme } from './utilities/theme.js';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProgressBar } from '../../components/progress-bar/index';
+
+export declare const UProgressBar: React.ForwardRefExoticComponent<
+  Partial<ProgressBar> & React.HTMLAttributes<ProgressBar>
+>;
+
+export type UProgressBarProps = React.ComponentProps<typeof UProgressBar>;

package/dist/integrations/react/UProgressBar.js

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

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

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

package/dist/integrations/react/UTree.js

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeItem } from '../../components/tree-item/index';
+
+export declare const UTreeItem: React.ForwardRefExoticComponent<
+  Partial<TreeItem> & React.HTMLAttributes<TreeItem>
+>;
+
+export type UTreeItemProps = React.ComponentProps<typeof UTreeItem>;

package/dist/integrations/react/UTreeItem.js

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

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

@@ -17,7 +17,10 @@ export { UInput, UInputProps } from './UInput';
 export { UMenu, UMenuProps } from './UMenu';
 export { UMenuItem, UMenuItemProps } from './UMenuItem';
 export { UPanel, UPanelProps } from './UPanel';
+export { UProgressBar, UProgressBarProps } from './UProgressBar';
 export { UProgressRing, UProgressRingProps } from './UProgressRing';
 export { USpinner, USpinnerProps } from './USpinner';
 export { USplitPanel, USplitPanelProps } from './USplitPanel';
 export { UTooltip, UTooltipProps } from './UTooltip';
+export { UTree, UTreeProps } from './UTree';
+export { UTreeItem, UTreeItemProps } from './UTreeItem';

package/dist/integrations/react/index.js

@@ -10,7 +10,10 @@ export { UInput } from './UInput.js';
 export { UMenu } from './UMenu.js';
 export { UMenuItem } from './UMenuItem.js';
 export { UPanel } from './UPanel.js';
+export { UProgressBar } from './UProgressBar.js';
 export { UProgressRing } from './UProgressRing.js';
 export { USpinner } from './USpinner.js';
 export { USplitPanel } from './USplitPanel.js';
 export { UTooltip } from './UTooltip.js';
+export { UTree } from './UTree.js';
+export { UTreeItem } from './UTreeItem.js';

package/dist/utilities/theme.d.ts

@@ -27,18 +27,18 @@ export interface ThemeInitOptions {
 /**
  * Theme 클래스 — 싱글톤 패턴으로 사용합니다.
  */
-declare class Theme {
+export declare class Theme {
     private static _instance;
     private readonly STORAGE_KEY_DEFAULT;
     private storage;
-    private isInitialized;
-    private isDebugMode;
+    private _isInitialized;
+    private _isDebugMode;
     /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
     private constructor();
     /** 싱글톤 인스턴스 접근자 */
     static get instance(): Theme;
     /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
-    get initialized(): boolean;
+    get isInitialized(): boolean;
     /**
      * 테마 유틸리티 초기화
      */
@@ -64,4 +64,3 @@ declare class Theme {
  * 테마 유틸리티 싱글톤 인스턴스입니다.
  */
 export declare const theme: Theme;
-export {};

package/dist/utilities/theme.js

@@ -7,8 +7,8 @@ class Theme {
   constructor() {
     this.STORAGE_KEY_DEFAULT = "theme";
     this.storage = null;
-    this.isInitialized = false;
-    this.isDebugMode = false;
+    this._isInitialized = false;
+    this._isDebugMode = false;
     /**
      * 시스템 테마 변경을 처리하는 메서드
      */
@@ -27,21 +27,21 @@ class Theme {
     return this._instance;
   }
   /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
-  get initialized() {
-    return this.isInitialized;
+  get isInitialized() {
+    return this._isInitialized;
   }
   /**
    * 테마 유틸리티 초기화
    */
   async init(options) {
-    this.isDebugMode = options?.debug || false;
+    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);
     }
-    options?.useBuiltIn || true;
-    {
+    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
 
@@ -70,7 +70,7 @@ class Theme {
       }
     }
     this.set(theme2);
-    this.isInitialized = true;
+    this._isInitialized = true;
     this.log("theme initialized");
   }
   /**
@@ -125,9 +125,9 @@ class Theme {
    * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
    */
   log(...args) {
-    if (this.isDebugMode) console.log("[theme]", ...args);
+    if (this._isDebugMode) console.log("[theme]", ...args);
   }
 }
 const theme = Theme.instance;
 
-export { theme };
+export { Theme, theme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library by iyulab based on lit-element",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "keywords": [
     "iyulab",
     "web-components",