@iyulab/components 0.1.2 → 0.1.4

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

@@ -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';
@@ -17,7 +18,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

@@ -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';
@@ -10,7 +11,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/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() {
@@ -40,33 +47,29 @@ class Theme {
       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
-
-
-}));
-      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.2",
-  "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"
+  }
 }

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

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

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

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

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

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

package/dist/internals/icons.d.ts

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