@iyulab/components 0.4.0 → 1.0.1

package/dist/{react-components → react}/index.d.ts

@@ -1,28 +1,41 @@
-/**
- * React wrapper components for @iyulab/components
- * 
- * This file is automatically generated.
- * Each component is prefixed with 'U' (e.g., UButton, UInput, etc.)
- */
-
-export { UAlert, UAlertProps } from './UAlert';
-export { UButton, UButtonProps } from './UButton';
-export { UCard, UCardProps } from './UCard';
-export { UCarousel, UCarouselProps } from './UCarousel';
-export { UDialog, UDialogProps } from './UDialog';
-export { UDivider, UDividerProps } from './UDivider';
-export { UDrawer, UDrawerProps } from './UDrawer';
-export { UForm, UFormProps } from './UForm';
-export { UIcon, UIconProps } from './UIcon';
-export { UInput, UInputProps } from './UInput';
-export { UMenu, UMenuProps } from './UMenu';
-export { UMenuItem, UMenuItemProps } from './UMenuItem';
-export { UProgressBar, UProgressBarProps } from './UProgressBar';
-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';
+export { UTree, UTreeProps } from './UTree';
+export { UTooltip, UTooltipProps } from './UTooltip';
+export { UTextarea, UTextareaProps } from './UTextarea';
+export { UTag, UTagProps } from './UTag';
+export { UTabPanel, UTabPanelProps } from './UTabPanel';
+export { UTab, UTabProps } from './UTab';
+export { USwitch, USwitchProps } from './USwitch';
+export { USplitPanel, USplitPanelProps } from './USplitPanel';
+export { USpinner, USpinnerProps } from './USpinner';
+export { USlider, USliderProps } from './USlider';
+export { USkeleton, USkeletonProps } from './USkeleton';
+export { USelect, USelectProps } from './USelect';
+export { URating, URatingProps } from './URating';
+export { URadio, URadioProps } from './URadio';
+export { UProgressRing, UProgressRingProps } from './UProgressRing';
+export { UProgressBar, UProgressBarProps } from './UProgressBar';
+export { UPopover, UPopoverProps } from './UPopover';
+export { UPanel, UPanelProps } from './UPanel';
+export { UOption, UOptionProps } from './UOption';
+export { UMenuItem, UMenuItemProps } from './UMenuItem';
+export { UMenu, UMenuProps } from './UMenu';
+export { UInput, UInputProps } from './UInput';
+export { UIconButton, UIconButtonProps } from './UIconButton';
+export { UIcon, UIconProps } from './UIcon';
+export { UForm, UFormProps } from './UForm';
+export { UField, UFieldProps } from './UField';
+export { UDrawer, UDrawerProps } from './UDrawer';
+export { UDivider, UDividerProps } from './UDivider';
+export { UDialog, UDialogProps } from './UDialog';
+export { UChip, UChipProps } from './UChip';
+export { UCheckbox, UCheckboxProps } from './UCheckbox';
+export { UCarousel, UCarouselProps } from './UCarousel';
+export { UCard, UCardProps } from './UCard';
+export { UButtonGroup, UButtonGroupProps } from './UButtonGroup';
+export { UButton, UButtonProps } from './UButton';
+export { UBreadcrumbItem, UBreadcrumbItemProps } from './UBreadcrumbItem';
+export { UBreadcrumb, UBreadcrumbProps } from './UBreadcrumb';
+export { UBadge, UBadgeProps } from './UBadge';
+export { UAvatar, UAvatarProps } from './UAvatar';
+export { UAlert, UAlertProps } from './UAlert';

package/dist/{react-components → react}/index.js

@@ -1,21 +1,41 @@
-export { UAlert } from './UAlert.js';
-export { UButton } from './UButton.js';
-export { UCard } from './UCard.js';
-export { UCarousel } from './UCarousel.js';
-export { UDialog } from './UDialog.js';
-export { UDivider } from './UDivider.js';
-export { UDrawer } from './UDrawer.js';
-export { UForm } from './UForm.js';
-export { UIcon } from './UIcon.js';
-export { UInput } from './UInput.js';
-export { UMenu } from './UMenu.js';
-export { UMenuItem } from './UMenuItem.js';
-export { UProgressBar } from './UProgressBar.js';
-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';
+export { UTree } from './UTree.js';
+export { UTooltip } from './UTooltip.js';
+export { UTextarea } from './UTextarea.js';
+export { UTag } from './UTag.js';
+export { UTabPanel } from './UTabPanel.js';
+export { UTab } from './UTab.js';
+export { USwitch } from './USwitch.js';
+export { USplitPanel } from './USplitPanel.js';
+export { USpinner } from './USpinner.js';
+export { USlider } from './USlider.js';
+export { USkeleton } from './USkeleton.js';
+export { USelect } from './USelect.js';
+export { URating } from './URating.js';
+export { URadio } from './URadio.js';
+export { UProgressRing } from './UProgressRing.js';
+export { UProgressBar } from './UProgressBar.js';
+export { UPopover } from './UPopover.js';
+export { UPanel } from './UPanel.js';
+export { UOption } from './UOption.js';
+export { UMenuItem } from './UMenuItem.js';
+export { UMenu } from './UMenu.js';
+export { UInput } from './UInput.js';
+export { UIconButton } from './UIconButton.js';
+export { UIcon } from './UIcon.js';
+export { UForm } from './UForm.js';
+export { UField } from './UField.js';
+export { UDrawer } from './UDrawer.js';
+export { UDivider } from './UDivider.js';
+export { UDialog } from './UDialog.js';
+export { UChip } from './UChip.js';
+export { UCheckbox } from './UCheckbox.js';
+export { UCarousel } from './UCarousel.js';
+export { UCard } from './UCard.js';
+export { UButtonGroup } from './UButtonGroup.js';
+export { UButton } from './UButton.js';
+export { UBreadcrumbItem } from './UBreadcrumbItem.js';
+export { UBreadcrumb } from './UBreadcrumb.js';
+export { UBadge } from './UBadge.js';
+export { UAvatar } from './UAvatar.js';
+export { UAlert } from './UAlert.js';

package/dist/{assets/styles → styles}/dark.css

@@ -67,7 +67,72 @@
   --u-red-900:       #FFD2D2;
   --u-red-1000:      #FFF0F0;
 
-  /* text Colors */
+  /* Orange Colors */
+  --u-orange-0:      #2E1A00;
+  --u-orange-100:    #4D2E00;
+  --u-orange-200:    #6B4200;
+  --u-orange-300:    #8A5A00;
+  --u-orange-400:    #B07500;
+  --u-orange-500:    #D49212;
+  --u-orange-600:    #F5AE42;
+  --u-orange-700:    #FFC566;
+  --u-orange-800:    #FFD899;
+  --u-orange-900:    #FFEBCC;
+  --u-orange-1000:   #FFF5E6;
+
+  /* Teal Colors */
+  --u-teal-0:        #002018;
+  --u-teal-100:      #00382B;
+  --u-teal-200:      #005040;
+  --u-teal-300:      #006B55;
+  --u-teal-400:      #00886C;
+  --u-teal-500:      #1AA88A;
+  --u-teal-600:      #42C4A5;
+  --u-teal-700:      #6EDABD;
+  --u-teal-800:      #9EEAD5;
+  --u-teal-900:      #CFF5EA;
+  --u-teal-1000:     #EDFCF7;
+
+  /* Cyan Colors */
+  --u-cyan-0:        #002830;
+  --u-cyan-100:      #00404D;
+  --u-cyan-200:      #005A6B;
+  --u-cyan-300:      #00768A;
+  --u-cyan-400:      #0094B0;
+  --u-cyan-500:      #12B4D4;
+  --u-cyan-600:      #42CFF5;
+  --u-cyan-700:      #66DFFF;
+  --u-cyan-800:      #99EBFF;
+  --u-cyan-900:      #CCF5FF;
+  --u-cyan-1000:     #E6FAFF;
+
+  /* Purple Colors */
+  --u-purple-0:      #1A0A2E;
+  --u-purple-100:    #2E174D;
+  --u-purple-200:    #42246B;
+  --u-purple-300:    #5A358F;
+  --u-purple-400:    #7548B2;
+  --u-purple-500:    #9260D6;
+  --u-purple-600:    #AE78F5;
+  --u-purple-700:    #C494FF;
+  --u-purple-800:    #D8B3FF;
+  --u-purple-900:    #ECD2FF;
+  --u-purple-1000:   #F7F0FF;
+
+  /* Pink Colors */
+  --u-pink-0:        #2E0A1A;
+  --u-pink-100:      #4D172E;
+  --u-pink-200:      #6B2442;
+  --u-pink-300:      #8F355A;
+  --u-pink-400:      #B24875;
+  --u-pink-500:      #D66092;
+  --u-pink-600:      #F578AE;
+  --u-pink-700:      #FF94C4;
+  --u-pink-800:      #FFB3D8;
+  --u-pink-900:      #FFD2EB;
+  --u-pink-1000:     #FFF0F7;
+
+  /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
   --u-txt-color-hover:       var(--u-blue-600);
@@ -86,7 +151,7 @@
   --u-icon-color-active:     var(--u-blue-600);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
-  /* border Colors */
+  /* Border Colors */
   --u-border-color:          var(--u-neutral-400);
   --u-border-color-weak:     var(--u-neutral-300);
   --u-border-color-strong:   var(--u-neutral-500);
@@ -96,7 +161,7 @@
   --u-input-border-color-focus:   var(--u-blue-600);
   --u-input-border-color-invalid: var(--u-red-600);
 
-  /* background Colors */
+  /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);
   --u-bg-color-inverse:      var(--u-neutral-0);
   --u-bg-color-hover:        var(--u-neutral-300);

package/dist/{assets/styles → styles}/light.css

@@ -67,7 +67,72 @@
   --u-red-900:       #B71C1C;
   --u-red-1000:      #6B0F0F;
 
-  /* text Colors */
+  /* Orange Colors */
+  --u-orange-0:      #FFF3E0;
+  --u-orange-100:    #FFE0B2;
+  --u-orange-200:    #FFCC80;
+  --u-orange-300:    #FFB74D;
+  --u-orange-400:    #FFA726;
+  --u-orange-500:    #FF9800;
+  --u-orange-600:    #FB8C00;
+  --u-orange-700:    #F57C00;
+  --u-orange-800:    #EF6C00;
+  --u-orange-900:    #E65100;
+  --u-orange-1000:   #8C3100;
+
+  /* Teal Colors */
+  --u-teal-0:        #E0F2F1;
+  --u-teal-100:      #B2DFDB;
+  --u-teal-200:      #80CBC4;
+  --u-teal-300:      #4DB6AC;
+  --u-teal-400:      #26A69A;
+  --u-teal-500:      #009688;
+  --u-teal-600:      #00897B;
+  --u-teal-700:      #00796B;
+  --u-teal-800:      #00695C;
+  --u-teal-900:      #004D40;
+  --u-teal-1000:     #002E26;
+
+  /* Cyan Colors */
+  --u-cyan-0:        #E0F7FA;
+  --u-cyan-100:      #B2EBF2;
+  --u-cyan-200:      #80DEEA;
+  --u-cyan-300:      #4DD0E1;
+  --u-cyan-400:      #26C6DA;
+  --u-cyan-500:      #00BCD4;
+  --u-cyan-600:      #00ACC1;
+  --u-cyan-700:      #0097A7;
+  --u-cyan-800:      #00838F;
+  --u-cyan-900:      #006064;
+  --u-cyan-1000:     #003A3D;
+
+  /* Purple Colors */
+  --u-purple-0:      #F3E5F5;
+  --u-purple-100:    #E1BEE7;
+  --u-purple-200:    #CE93D8;
+  --u-purple-300:    #BA68C8;
+  --u-purple-400:    #AB47BC;
+  --u-purple-500:    #9C27B0;
+  --u-purple-600:    #8E24AA;
+  --u-purple-700:    #7B1FA2;
+  --u-purple-800:    #6A1B9A;
+  --u-purple-900:    #4A148C;
+  --u-purple-1000:   #2C0B54;
+
+  /* Pink Colors */
+  --u-pink-0:        #FCE4EC;
+  --u-pink-100:      #F8BBD0;
+  --u-pink-200:      #F48FB1;
+  --u-pink-300:      #F06292;
+  --u-pink-400:      #EC407A;
+  --u-pink-500:      #E91E63;
+  --u-pink-600:      #D81B60;
+  --u-pink-700:      #C2185B;
+  --u-pink-800:      #AD1457;
+  --u-pink-900:      #880E4F;
+  --u-pink-1000:     #520830;
+
+  /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-0);
   --u-txt-color-hover:       var(--u-blue-600);
@@ -86,7 +151,7 @@
   --u-icon-color-active:     var(--u-blue-600);
   --u-icon-color-disabled:   var(--u-neutral-400);
 
-  /* border Colors */
+  /* Border Colors */
   --u-border-color:          var(--u-neutral-300);
   --u-border-color-weak:     var(--u-neutral-200);
   --u-border-color-strong:   var(--u-neutral-400);
@@ -96,7 +161,7 @@
   --u-input-border-color-focus:   var(--u-blue-600);
   --u-input-border-color-invalid: var(--u-red-600);
 
-  /* background Colors */
+  /* Background Colors */
   --u-bg-color:              var(--u-neutral-0);
   --u-bg-color-inverse:      var(--u-neutral-900);
   --u-bg-color-hover:        var(--u-neutral-100);

package/dist/utilities/BrowserStorage.d.ts

@@ -11,6 +11,7 @@ export interface CookieOptions {
     sameSite?: CookieSameSite;
     partitioned?: boolean;
 }
+/** 브라우저 저장소 설정 옵션 */
 export type BrowserStorageOptions = (LocalStorageOptions | CookieOptions) & {
     /** 키 앞에 붙일 접두사 (옵션) */
     prefix?: string;
@@ -22,7 +23,7 @@ export declare class BrowserStorage {
     private readonly options;
     constructor(options: BrowserStorageOptions);
     /** 키에 prefix를 붙인 실제 저장 키 */
-    private buildKey;
+    private makeKey;
     /**
      * 값 저장
      * @param key 키

package/dist/utilities/BrowserStorage.js

@@ -1,87 +1,70 @@
-class BrowserStorage {
-  constructor(options) {
-    if (window === void 0) {
-      throw new Error("BrowserStorage can only be used in a browser environment.");
-    }
-    if (options.type === "cookie" && !("cookieStore" in window)) {
-      throw new Error("Cookies are not supported in this browser.");
-    }
-    this.options = options;
-  }
-  /** 키에 prefix를 붙인 실제 저장 키 */
-  buildKey(key) {
-    return `${this.options.prefix || ""}${key}`;
-  }
-  /**
-   * 값 저장
-   * @param key 키
-   * @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
-   */
-  async set(key, value) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        window.localStorage.setItem(key, value);
-      } else if (this.options.type === "cookie") {
-        await window.cookieStore.set({
-          name: key,
-          value,
-          path: this.options.path,
-          domain: this.options.domain,
-          expires: this.options.expires,
-          sameSite: this.options.sameSite,
-          partitioned: this.options.partitioned
-        });
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: set]", e);
-    }
-  }
-  /**
-   * 값 조회
-   * @param key 키
-   * @returns 값 (없으면 null)
-   */
-  async get(key) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        return window.localStorage.getItem(key);
-      } else if (this.options.type === "cookie") {
-        const item = await window.cookieStore.get({
-          name: key
-        });
-        return item?.value || null;
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: get]", e);
-      return null;
-    }
-  }
-  /** 
-   * 값 삭제
-   * @param key 키
-   */
-  async remove(key) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        window.localStorage.removeItem(key);
-      } else if (this.options.type === "cookie") {
-        await window.cookieStore.delete({
-          name: key
-        });
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: remove]", e);
-    }
-  }
-}
-
+//#region src/utilities/BrowserStorage.ts
+/**
+* 웹 브라우저가 제공하는 저장소 유틸리티 클래스
+*/
+var BrowserStorage = class {
+	constructor(options) {
+		if (window === void 0) throw new Error("BrowserStorage can only be used in a browser environment.");
+		if (options.type === "cookie" && !("cookieStore" in window)) throw new Error("Cookies are not supported in this browser.");
+		this.options = options;
+	}
+	/** 키에 prefix를 붙인 실제 저장 키 */
+	makeKey(key) {
+		return `${this.options.prefix || ""}${key}`;
+	}
+	/**
+	* 값 저장
+	* @param key 키
+	* @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
+	*/
+	async set(key, value) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") window.localStorage.setItem(key, value);
+			else if (this.options.type === "cookie") await window.cookieStore.set({
+				name: key,
+				value,
+				path: this.options.path,
+				domain: this.options.domain,
+				expires: this.options.expires,
+				sameSite: this.options.sameSite,
+				partitioned: this.options.partitioned
+			});
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: set]", e);
+		}
+	}
+	/**
+	* 값 조회
+	* @param key 키
+	* @returns 값 (없으면 null)
+	*/
+	async get(key) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") return window.localStorage.getItem(key);
+			else if (this.options.type === "cookie") return (await window.cookieStore.get({ name: key }))?.value || null;
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: get]", e);
+			return null;
+		}
+	}
+	/** 
+	* 값 삭제
+	* @param key 키
+	*/
+	async remove(key) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") window.localStorage.removeItem(key);
+			else if (this.options.type === "cookie") await window.cookieStore.delete({ name: key });
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: remove]", e);
+		}
+	}
+};
+//#endregion
 export { BrowserStorage };

package/dist/utilities/Dialog.d.ts

@@ -0,0 +1,83 @@
+import { TemplateResult } from 'lit';
+import { DialogPlacement } from '../components/dialog/UDialog.js';
+import { ButtonVariant } from '../components/button/UButton.js';
+/** 공통 Dialog 옵션 */
+export interface DialogOptions {
+    /** 다이얼로그를 표시할 대상 엘리먼트, 지정 시 contained 모드로 동작 */
+    target?: HTMLElement;
+    /** 헤더 제목 */
+    title?: string;
+    /** 배치 위치 */
+    placement?: DialogPlacement;
+    /** 가장자리로부터의 간격 (px) */
+    offset?: number;
+    /** 모달 모드 여부 (기본: true) */
+    modal?: boolean;
+    /** 닫기 버튼 표시 여부 (기본: false) */
+    buttonClose?: boolean;
+    /** ESC 키로 닫기 허용 (기본: true) */
+    escapeClose?: boolean;
+    /** 백드롭 클릭으로 닫기 허용 (기본: true) */
+    backdropClose?: boolean;
+}
+/** Confirm Dialog 옵션 */
+export interface ConfirmDialogOptions extends DialogOptions {
+    /** 확인 버튼 텍스트 (기본: 'Confirm') */
+    confirmLabel?: string;
+    /** 취소 버튼 텍스트 (기본: 'Cancel') */
+    cancelLabel?: string;
+}
+/** Prompt Dialog 옵션 */
+export interface PromptDialogOptions extends ConfirmDialogOptions {
+    /** 입력 필드 type */
+    type?: string;
+    /** 입력 필드 기본값 */
+    defaultValue?: string;
+    /** 입력 필드 placeholder */
+    placeholder?: string;
+}
+/** Custom Dialog 옵션 */
+export interface CustomDialogOptions extends DialogOptions {
+    /** 본문 콘텐츠 (HTML 문자열 또는 TemplateResult) */
+    content: string | TemplateResult;
+    /** 액션 버튼 목록 */
+    actions?: DialogAction[];
+}
+/** Custom Dialog 버튼 정의 */
+export interface DialogAction {
+    /** 버튼 텍스트 */
+    label: string;
+    /** 반환될 값 */
+    value: string;
+    /** 버튼 스타일 */
+    variant?: ButtonVariant;
+}
+/**
+ * Dialog 유틸리티 클래스입니다.
+ * 프로그래밍 방식으로 alert, confirm, prompt 다이얼로그를 표시합니다.
+ */
+export declare class Dialog {
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /**
+     * 알림 다이얼로그를 표시합니다.
+     */
+    static alert(message: string, options?: DialogOptions): Promise<void>;
+    /**
+     * 확인 다이얼로그를 표시합니다. (확인/취소 버튼)
+     * @returns 확인이면 true, 취소이면 false
+     */
+    static confirm(message: string, options?: ConfirmDialogOptions): Promise<boolean>;
+    /**
+     * 입력 다이얼로그를 표시합니다. (텍스트 입력 + 확인/취소)
+     * @returns 입력값 또는 취소 시 null
+     */
+    static prompt(message: string, options?: PromptDialogOptions): Promise<string | null>;
+    /**
+     * 커스텀 다이얼로그를 표시합니다.
+     * @returns 클릭된 액션의 value 또는 닫힌 경우 null
+     */
+    static show(options: CustomDialogOptions): Promise<string | null>;
+    /** 다이얼로그 엘리먼트를 생성하고 옵션을 적용합니다. */
+    private static createDialog;
+}