@iyulab/components 0.1.3 → 0.1.4

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

@@ -7,46 +7,27 @@ import { BaseElement } from '../BaseElement.js';
 export declare class TreeItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    headerEl: HTMLElement;
+    childrenItems: TreeItem[];
+    /** 트리 항목이 리프 노드인지 여부입니다. */
+    leaf: boolean;
+    /** 트리 항목의 들여쓰기 레벨입니다. */
+    level: number;
     /** 트리 항목이 비활성화 상태인지 여부입니다. */
     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 handleSlotChange;
+    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    private handleChildrenSlotChange;
     /** 헤더 클릭 이벤트를 처리합니다. */
     private handleHeaderClick;
-    /** 확장/축소 아이콘 클릭 이벤트를 처리합니다. */
-    private handleExpandClick;
-    /** 슬롯 변경 시 자식 노드 확인 */
-    private handleSlotChange;
-    /** 자식 노드가 있는지 확인합니다. */
-    private checkForChildren;
-    /**
-     * 트리 항목을 확장합니다.
-     */
-    expand(): void;
-    /**
-     * 트리 항목을 축소합니다.
-     */
-    collapse(): void;
-    /**
-     * 트리 항목의 확장 상태를 토글합니다.
-     */
-    toggle(): void;
 }

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

@@ -1,6 +1,7 @@
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
+import { Icon } from '../icon/Icon.js';
 import { styles } from './TreeItem.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -12,17 +13,32 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TreeItem extends BaseElement {
+const _TreeItem = class _TreeItem extends BaseElement {
   constructor() {
     super(...arguments);
+    this.leaf = true;
+    this.level = 0;
     this.disabled = false;
     this.selected = false;
     this.expanded = false;
-    this.leaf = false;
-    this.level = 0;
     this.value = "";
-    this.icon = "";
-    this.hasChildren = false;
+    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
+    this.handleSlotChange = (e) => {
+      const slot = e.target;
+      const nodes = slot.assignedNodes({ flatten: true });
+      nodes.forEach((node) => {
+        if (node instanceof _TreeItem) {
+          node.setAttribute("slot", "children");
+        }
+      });
+    };
+    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    this.handleChildrenSlotChange = () => {
+      this.leaf = this.childrenItems.length === 0;
+      this.childrenItems.forEach((child) => {
+        child.level = this.level + 1;
+      });
+    };
     /** 헤더 클릭 이벤트를 처리합니다. */
     this.handleHeaderClick = (e) => {
       if (this.disabled) {
@@ -30,34 +46,27 @@ class TreeItem extends BaseElement {
         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;
+      if (this.leaf) {
+        this.selected = true;
+        this.emit("u-select", { value: this.value, item: this });
+      } else {
+        this.expanded = !this.expanded;
+        this.emit("u-toggle", { expanded: this.expanded, item: this });
       }
-      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 = {};
+    this.dependencies = {
+      "u-icon": Icon
+    };
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "treeitem");
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    this.checkForChildren();
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -66,98 +75,57 @@ class TreeItem extends BaseElement {
       this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
     }
     if (changedProperties.has("expanded")) {
-      this.setAttribute("aria-expanded", this.hasChildren ? String(this.expanded) : "false");
+      this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
     }
     if (changedProperties.has("selected")) {
       this.setAttribute("aria-selected", this.selected ? "true" : "false");
     }
+    if (changedProperties.has("level")) {
+      this.setAttribute("aria-level", String(this.level + 1));
+      this.headerEl.style.paddingLeft = `calc(${this.level} * var(--indent-size, 20px))`;
+    }
   }
   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 class="header" @click=${this.handleHeaderClick}>
+        <u-icon class="expand-icon"
+          ?hidden=${this.leaf}
+          name=${this.expanded ? "chevron-down" : "chevron-right"}
+        ></u-icon>
+        <slot name="prefix"></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <slot name="suffix"></slot>
       </div>
       <div class="children" ?hidden=${!this.expanded}>
-        <slot name="children" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="children" @slotchange=${this.handleChildrenSlotChange}></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");
+  query(".header")
+], _TreeItem.prototype, "headerEl");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "selected");
+  queryAssignedElements({ slot: "children", selector: "u-tree-item", flatten: true })
+], _TreeItem.prototype, "childrenItems");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "expanded");
+  state()
+], _TreeItem.prototype, "leaf");
+__decorateClass([
+  state()
+], _TreeItem.prototype, "level");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "leaf");
+], _TreeItem.prototype, "disabled");
 __decorateClass([
-  property({ type: Number, reflect: true })
-], TreeItem.prototype, "level");
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "selected");
 __decorateClass([
-  property({ type: String })
-], TreeItem.prototype, "value");
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "expanded");
 __decorateClass([
   property({ type: String })
-], TreeItem.prototype, "icon");
-__decorateClass([
-  state()
-], TreeItem.prototype, "hasChildren");
+], _TreeItem.prototype, "value");
+let TreeItem = _TreeItem;
 
 export { TreeItem };

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

@@ -3,15 +3,14 @@ import { css } from 'lit';
 const styles = css`
   :host {
     display: block;
-    --tree-indent: 20px;
+    
+    --indent-size: 20px;
   }
-
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;
     cursor: not-allowed;
   }
-
   :host([disabled]) .header {
     cursor: not-allowed;
     pointer-events: none;
@@ -30,68 +29,38 @@ const styles = css`
     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;
+  
+  slot[name="prefix"],
+  slot[name="suffix"] {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 18px;
-    height: 18px;
-    font-size: 14px;
-    color: var(--u-icon-color, #757575);
   }
-
-  .label {
+  slot:not([name]) {
     flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
     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/index.js

@@ -2,6 +2,7 @@ export { Alert } from './components/alert/Alert.js';
 export { Button } from './components/button/Button.js';
 export { ContextMenu } from './components/context-menu/ContextMenu.js';
 export { Dialog } from './components/dialog/Dialog.js';
+export { Divider } from './components/divider/Divider.js';
 export { Form } from './components/form/Form.js';
 export { Icon } from './components/icon/Icon.js';
 export { IconButton } from './components/icon-button/IconButton.js';

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

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

package/dist/integrations/react/UDivider.js

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

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

@@ -10,6 +10,7 @@ export { UButton, UButtonProps } from './UButton';
 export { UContextMenu, UContextMenuProps } from './UContextMenu';
 export { UCopyButton, UCopyButtonProps } from './UCopyButton';
 export { UDialog, UDialogProps } from './UDialog';
+export { UDivider, UDividerProps } from './UDivider';
 export { UForm, UFormProps } from './UForm';
 export { UIcon, UIconProps } from './UIcon';
 export { UIconButton, UIconButtonProps } from './UIconButton';

package/dist/integrations/react/index.js

@@ -3,6 +3,7 @@ export { UButton } from './UButton.js';
 export { UContextMenu } from './UContextMenu.js';
 export { UCopyButton } from './UCopyButton.js';
 export { UDialog } from './UDialog.js';
+export { UDivider } from './UDivider.js';
 export { UForm } from './UForm.js';
 export { UIcon } from './UIcon.js';
 export { UIconButton } from './UIconButton.js';

package/dist/internals/icon-helpers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 아이콘 이름과 SVG 소스를 매핑하는 레지스트리입니다.
+ *
+ * - 키: SVG 파일명에서 확장자를 제거한 문자열 (예: `close.svg` → `"close"`)
+ * - 값: SVG 파일의 raw 문자열 (`?raw` 옵션으로 로드됨)
+ *
+ * Vite의 `import.meta.glob`을 사용하여
+ * `../assets/icons/*.svg` 경로의 모든 SVG 파일을 빌드 시점에 한 번에 로드합니다.
+ * 이 레지스트리는 런타임 동안 불변이며, 아이콘 조회 시 재사용됩니다.
+ */
+export declare const iconBundle: Map<string, string>;
+/**
+ * 현재 설정된 아이콘 기본 URL을 반환합니다.
+ *
+ * 이 값은 아이콘을 정적 경로 또는 CDN 등에서 동적으로 로드할 때
+ * prefix로 사용됩니다.
+ *
+ * @returns 아이콘 로딩에 사용되는 기본 URL (예: `/assets/icons/`)
+ */
+export declare function getBaseUrl(): string;
+/**
+ * 아이콘을 외부에서 로드할 때 사용할 기본 URL을 설정합니다.
+ *
+ * 예:
+ * - `/assets/icons/`
+ * - `https://cdn.example.com/icons/`
+ *
+ * 일반적으로 마지막에 슬래시(`/`)가 포함된 형태를 권장합니다.
+ *
+ * @param url 아이콘이 배포된 기본 경로
+ */
+export declare function setBaseUrl(url: string): void;

package/dist/internals/{icons.js → icon-helpers.js}

@@ -29,14 +29,20 @@ import * as search from '../assets/icons/search.svg.js';
 import * as speedometer from '../assets/icons/speedometer.svg.js';
 import * as xLg from '../assets/icons/x-lg.svg.js';
 
-const icons = 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
+let iconBaseUrl = "/assets/icons/";
+const iconBundle = 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
 
 
-})).map(([path, module]) => {
+})
+  ).map(([path, module]) => {
     const name = path.split("/").pop()?.replace(".svg", "") || "";
     return [name, module.default];
   }).filter(([name]) => name !== "")
 );
+function getBaseUrl() {
+  return iconBaseUrl;
+}
 
-export { icons };
+export { getBaseUrl, iconBundle };

package/dist/internals/index.d.ts

@@ -1,4 +1,4 @@
 export * from './attribute-converters.js';
-export * from './icons.js';
+export * from './icon-helpers.js';
 export * from './node-helpers.js';
 export * from './react-wrapper.js';

package/dist/utilities/theme.js

@@ -2,6 +2,13 @@ import * as dark from '../assets/styles/dark.css.js';
 import * as light from '../assets/styles/light.css.js';
 import { BrowserStorage } from './BrowserStorage.js';
 
+const styleAssets = 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() {
@@ -43,30 +50,26 @@ class Theme {
     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 styleAssets) {
         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-path", name);
+        style.textContent = module;
+        if (document.head.querySelector(`style[data-path="${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);
       }
     }
-    let theme2 = options?.default || "system";
+    let theme2 = options?.default ?? "system";
     if (this.storage !== null) {
       const savedTheme = await this.storage.get(this.STORAGE_KEY_DEFAULT);
       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);

package/package.json

@@ -1,58 +1,58 @@
-{
-  "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 by iyulab based on lit-element",
+  "version": "0.1.4",
+  "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.1",
+    "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.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
 }