@iyulab/components 0.3.0 → 1.0.0

package/dist/components/alert/UAlert.d.ts

@@ -1,8 +1,63 @@
-import { UAlert } from './UAlert.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type AlertStatus = "error" | "warning" | "success" | "info" | "notice";
+export type AlertVariant = "solid" | "filled" | "outlined" | "glass";
+/**
+ * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
+ * 자동 닫힘 타이머, 닫기 버튼, 다양한 상태(status) 및 형태(variant)를 지원합니다.
+ * open 속성이 토글될 때 opacity/scale 트랜지션으로 표시·숨김 처리됩니다.
+ *
+ * @slot - Alert 본문 콘텐츠
+ * @slot footer - Alert 하단 콘텐츠 (예: 액션 버튼)
+ *
+ * @csspart container - 전체 Alert 컨테이너 (flex column)
+ * @csspart header - 아이콘·타이틀·닫기 버튼을 포함하는 상단 행
+ * @csspart icon - 상태 아이콘 (status 없으면 hidden)
+ * @csspart title - 타이틀 텍스트 (title 미지정 시 status 대문자 또는 'MESSAGE')
+ * @csspart close-btn - 닫기 버튼 (closable=true 일 때만 표시)
+ * @csspart content - 스크롤 가능한 본문 영역
+ * @csspart footer - 하단 슬롯 영역
+ *
+ * @cssprop --alert-background-color - 배경색 (status에 따라 자동 설정, variant="outlined"는 transparent)
+ * @cssprop --alert-border-color - 테두리 색상 (status에 따라 자동 설정, variant="filled"는 transparent)
+ * @cssprop --alert-icon-color - 아이콘 색상 (status에 따라 자동 설정)
+ *
+ * @event show - Alert가 표시되기 직전 발생 (취소 가능)
+ * @event hide - Alert가 닫히기 직전 발생 (취소 가능)
+ */
+export declare class UAlert extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 표시 여부 */
+    open: boolean;
+    /** 닫기 버튼 표시 여부 */
+    closable: boolean;
+    /** 형태 스타일 (solid, filled, outlined, glass) */
+    variant: AlertVariant;
+    /** 상태 (warning, error, info, success, notice) */
+    status?: AlertStatus;
+    /** 타이틀 라벨 */
+    title: string;
+    /** 자동 닫힘 타이머 (밀리초 단위, 0이하면 비활성화) */
+    duration: number;
+    /** 자동 닫힘 타이머 ID */
+    private timeoutId?;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Alert를 표시합니다.
+     */
+    show(): boolean;
+    /**
+     * Alert를 숨깁니다.
+     */
+    hide(): boolean;
+    /** Alert 상태에 따른 아이콘 이름을 반환합니다. */
+    private mapIcon;
+    /** 자동 닫힘 타이머를 설정하거나 해제합니다. */
+    private setTimer;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-alert': UAlert;
     }
 }
-export { UAlert };
-export type { AlertType } from './UAlert.component.js';

package/dist/components/alert/UAlert.js

@@ -1,5 +1,116 @@
-import { UAlert } from './UAlert.component.js';
-
-UAlert.define("u-alert");
-
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import "../button/UButton.js";
+import { styles } from "./UAlert.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/alert/UAlert.ts
+var UAlert = class UAlert extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.closable = false;
+		this.variant = "solid";
+		this.title = "";
+		this.duration = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open")) this.setTimer(this.open);
+	}
+	render() {
+		return html`
+      <div class="container" part="container">
+        <div class="header" part="header">
+          <u-icon class="icon" part="icon"
+            ?hidden=${!this.status}
+            lib="internal"
+            name=${this.mapIcon(this.status)}
+          ></u-icon>
+          <div class="title" part="title">
+            ${this.title || this.status?.toUpperCase() || "MESSAGE"}
+          </div>
+          <u-button class="close-btn" part="close-btn"
+            variant="ghost"
+            ?hidden=${!this.closable}
+            @click=${this.hide}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </u-button>
+        </div>
+        <div class="content" part="content" scrollable>
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* Alert를 표시합니다. 
+	*/
+	show() {
+		if (this.open) return true;
+		if (this.fire("show")) {
+			this.open = true;
+			return true;
+		}
+		return false;
+	}
+	/** 
+	* Alert를 숨깁니다. 
+	*/
+	hide() {
+		if (!this.open) return true;
+		if (this.fire("hide")) {
+			this.open = false;
+			return true;
+		}
+		return false;
+	}
+	/** Alert 상태에 따른 아이콘 이름을 반환합니다. */
+	mapIcon(status) {
+		switch (status) {
+			case "error": return "exclamation-circle-fill";
+			case "warning": return "exclamation-triangle-fill";
+			case "success": return "check-circle-fill";
+			case "info": return "info-circle-fill";
+			case "notice": return "bell-fill";
+			default: return "bell-fill";
+		}
+	}
+	/** 자동 닫힘 타이머를 설정하거나 해제합니다. */
+	setTimer(open) {
+		if (open) {
+			if (this.duration && this.duration > 0) this.timeoutId = window.setTimeout(() => {
+				this.hide();
+			}, this.duration);
+		} else clearTimeout(this.timeoutId);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAlert.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAlert.prototype, "closable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAlert.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAlert.prototype, "status", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAlert.prototype, "title", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UAlert.prototype, "duration", void 0);
+UAlert = __decorate([customElement("u-alert")], UAlert);
+//#endregion
 export { UAlert };

package/dist/components/alert/UAlert.styles.js

@@ -1,58 +1,91 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/alert/UAlert.styles.ts
+var styles = css`
+  /* === Status Colors === */
   :host {
-    --icon-primary-color: var(--u-neutral-700);
-    --min-content-rows: 1;
-    --max-content-rows: 3;
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-border-color: var(--u-neutral-300);
+    --alert-background-color: var(--u-neutral-200);
+  }
+  :host([status="error"]) {
+    --alert-icon-color: var(--u-red-700);
+    --alert-border-color: var(--u-red-300);
+    --alert-background-color: var(--u-red-200);
+  }
+  :host([status="warning"]) {
+    --alert-icon-color: var(--u-yellow-700);
+    --alert-border-color: var(--u-yellow-300);
+    --alert-background-color: var(--u-yellow-200);
+  }
+  :host([status="info"]) {
+    --alert-icon-color: var(--u-blue-700);
+    --alert-border-color: var(--u-blue-300);
+    --alert-background-color: var(--u-blue-200);
+  }
+  :host([status="success"]) {
+    --alert-icon-color: var(--u-green-700);
+    --alert-border-color: var(--u-green-300);
+    --alert-background-color: var(--u-green-200);
+  }
+  :host([status="notice"]) {
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-border-color: var(--u-neutral-300);
+    --alert-background-color: var(--u-neutral-200);
   }
 
   :host {
     display: block;
-    min-width: 300px;
-    max-width: 500px;
-
+    width: fit-content;
+    min-width: 200px;
+    max-width: 100%;
+    max-height: 50vh;
+    padding: 8px 12px;
     border-radius: 8px;
     box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     
     opacity: 0;
     transform: scale(0.8);
-    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);    
+    visibility: hidden;
+    pointer-events: none;
+    transition: 
+      visibility 0s 0.2s,
+      opacity 0.2s ease,
+      transform 0.2s ease-out;
   }
   :host([open]) {
     opacity: 1;
     transform: scale(1);
+    visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s;
   }
-  :host([type="error"]) {
-    --icon-primary-color: var(--u-red-700);
-    border-color: var(--u-red-300);
-    background-color: var(--u-red-200);
-  }
-  :host([type="warning"]) {
-    --icon-primary-color: var(--u-yellow-700);
-    border-color: var(--u-yellow-300);
-    background-color: var(--u-yellow-200);
-  }
-  :host([type="info"]) {
-    --icon-primary-color: var(--u-blue-700);
-    border-color: var(--u-blue-300);
-    background-color: var(--u-blue-200);
-  }
-  :host([type="success"]) {
-    --icon-primary-color: var(--u-green-700);
-    border-color: var(--u-green-300);
-    background-color: var(--u-green-200);
-  }
-  :host([type="notice"]) {
-    --icon-primary-color: var(--u-neutral-700);
-    border-color: var(--u-neutral-300);
-    background-color: var(--u-neutral-200);
+
+  /* === Variant Styles === */
+  :host([variant="solid"]) {
+    border: 1px solid var(--alert-border-color);
+    background-color: var(--alert-background-color);
+  }
+  :host([variant="filled"]) {
+    border: 1px solid transparent;
+    background-color: var(--alert-background-color);
+  }
+  :host([variant="outlined"]) {
+    border: 1px solid var(--alert-border-color);
+    background-color: transparent;
+  }
+  /* From https://css.glass */
+  :host([variant="glass"]) {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
   .container {
     display: flex;
     flex-direction: column;
-    padding: 8px 12px;
     overflow: hidden;
   }
 
@@ -68,7 +101,7 @@ const styles = css`
   }
   .header .icon {
     flex-shrink: 0;
-    color: var(--icon-primary-color);
+    color: var(--alert-icon-color);
   }
   .header .title {
     flex-grow: 1;
@@ -77,23 +110,15 @@ const styles = css`
   }
   .header .close-btn {
     flex-shrink: 0;
-    color: var(--u-icon-color);
-    cursor: pointer;
-  }
-  .header .close-btn:hover {
-    color: var(--u-icon-color-hover);
-  }
-  .header .close-btn:active {
-    color: var(--u-icon-color-active);
-    transform: scale(0.9);
+    padding: 4px;
+    font-size: inherit;
+    border-radius: 4px;
   }
 
   .content {
     font-size: 14px;
     font-weight: 300;
     line-height: 1.5;
-    min-height: calc(1.6em * var(--min-content-rows));
-    max-height: calc(1.6em * var(--max-content-rows));
     overflow-y: auto;
   }
 
@@ -101,5 +126,5 @@ const styles = css`
     display: inline-block;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/avatar/UAvatar.d.ts

@@ -0,0 +1,27 @@
+import { UElement } from '../UElement.js';
+export type AvatarShape = "circle" | "square" | "rounded";
+/**
+ * 이미지, 라벨, 또는 슬롯 콘텐츠를 표시하는 아바타 컴포넌트입니다.
+ *
+ * @slot - 이미지나 라벨이 없을 때 표시할 커스텀 콘텐츠
+ *
+ * @csspart image - 아바타 이미지 요소
+ * @csspart label - 이니셜 라벨 텍스트 요소
+ */
+export declare class UAvatar extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 아바타 형태 */
+    shape: AvatarShape;
+    /** 아웃라인 표시 */
+    outline: boolean;
+    /** 이미지 URL */
+    image?: string;
+    /** 이니셜 라벨 텍스트 (이미지가 없을 때 표시) */
+    label?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-avatar': UAvatar;
+    }
+}

package/dist/components/avatar/UAvatar.js

@@ -0,0 +1,42 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UAvatar.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/avatar/UAvatar.ts
+var UAvatar = class UAvatar extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.shape = "circle";
+		this.outline = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.image) return html`
+        <img part="image"
+          src=${this.image}
+          alt=${this.label || "Avatar"}
+        />`;
+		if (this.label) return html`
+        <span part="label" class="label">
+          ${this.label.slice(0, 2)}
+        </span>`;
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAvatar.prototype, "shape", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAvatar.prototype, "outline", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAvatar.prototype, "image", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAvatar.prototype, "label", void 0);
+UAvatar = __decorate([customElement("u-avatar")], UAvatar);
+//#endregion
+export { UAvatar };

package/dist/components/avatar/UAvatar.styles.d.ts

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

package/dist/components/avatar/UAvatar.styles.js

@@ -0,0 +1,45 @@
+import { css } from "lit";
+//#region src/components/avatar/UAvatar.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5em;
+    height: 2.5em;
+    font-family: var(--u-font-base);
+    font-weight: 600;
+    color: var(--u-neutral-0);
+    background-color: var(--u-neutral-500);
+    vertical-align: middle;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  :host([shape="circle"]) {
+    border-radius: 50%;
+  }
+  :host([shape="square"]) {
+    border-radius: 0;
+  }
+  :host([shape="rounded"]) {
+    border-radius: 0.375em;
+  }
+  :host([outline]) {
+    box-shadow: 0 0 0 0.125em var(--u-border-color);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: 1;
+    text-transform: uppercase;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/badge/UBadge.d.ts

@@ -0,0 +1,28 @@
+import { nothing } from 'lit';
+import { UElement } from '../UElement.js';
+export type BadgeVariant = "pill" | "dot" | "square";
+export type BadgeColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+export type BadgeAnchor = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * 상태, 숫자, 알림 등의 정보를 배지로 표시하는 컴포넌트입니다.
+ * anchor 속성으로 특정 요소 위치에 배치할 수 있습니다.
+ *
+ * @slot prefix - 배지 앞에 배치할 컨텐츠
+ * @slot - 배지의 주요 컨텐츠 (텍스트, 아이콘)
+ * @slot suffix - 배지 뒤에 배치할 컨텐츠
+ */
+export declare class UBadge extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 배지 유형 */
+    variant: BadgeVariant;
+    /** 배지 색상 */
+    color: BadgeColor;
+    /** 부모 요소 기준 배치 위치 (설정 시 position: absolute) */
+    anchor?: BadgeAnchor;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-badge': UBadge;
+    }
+}

package/dist/components/badge/UBadge.js

@@ -0,0 +1,40 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UBadge.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+//#region src/components/badge/UBadge.ts
+var UBadge = class UBadge extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "pill";
+		this.color = "neutral";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.variant === "dot") return nothing;
+		return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "color", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UBadge.prototype, "anchor", void 0);
+UBadge = __decorate([customElement("u-badge")], UBadge);
+//#endregion
+export { UBadge };

package/dist/components/badge/UBadge.styles.d.ts

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

package/dist/components/badge/UBadge.styles.js

@@ -0,0 +1,113 @@
+import { css } from "lit";
+//#region src/components/badge/UBadge.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+    font-size: inherit;
+    font-weight: 600;
+    font-family: var(--u-font-base);
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* === Variant (형태) === */
+  :host([variant="square"]) {
+    padding: 0.2em 0.5em;
+    border-radius: 0.2em;
+  }
+  :host([variant="pill"]) {
+    padding: 0.2em 0.5em;
+    border-radius: 999px;
+  }
+  :host([variant="dot"]) {
+    width: 0.6em;
+    height: 0.6em;
+    min-width: 0.6em;
+    min-height: 0.6em;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  /* === Color (색상) === */
+  :host([color="neutral"]) {
+    color: var(--u-neutral-800);
+    background-color: var(--u-neutral-200);
+  }
+  :host([color="blue"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-blue-500);
+  }
+  :host([color="green"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-green-500);
+  }
+  :host([color="yellow"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-yellow-600);
+  }
+  :host([color="red"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-red-500);
+  }
+  :host([color="orange"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-orange-500);
+  }
+  :host([color="teal"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-teal-500);
+  }
+  :host([color="cyan"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-cyan-500);
+  }
+  :host([color="purple"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-purple-500);
+  }
+  :host([color="pink"]) {
+    color: var(--u-neutral-0);
+    background-color: var(--u-pink-500);
+  }
+
+  /* === Anchor (위치 고정) === */
+  :host([anchor]) {
+    position: absolute;
+    z-index: 1;
+  }
+  :host([anchor="top-right"]) {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+  :host([anchor="top-left"]) {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+  :host([anchor="bottom-right"]) {
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
+  }
+  :host([anchor="bottom-left"]) {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  /* === Slots === */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.25em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.25em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/breadcrumb/UBreadcrumb.d.ts

@@ -0,0 +1,24 @@
+import { UElement } from '../UElement.js';
+/**
+ * 현재 페이지 위치를 계층 구조로 표시하는 브레드크럼 컴포넌트입니다.
+ * 하위 u-breadcrumb-item을 조합하여 사용합니다.
+ *
+ * @slot - u-breadcrumb-item 요소들
+ * @slot separator - 구분자 커스텀 콘텐츠 (기본값: chevron-right 아이콘)
+ *
+ * @csspart nav - 내비게이션 요소
+ */
+export declare class UBreadcrumb extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    private separator?;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+    private handleSeparatorSlotChange;
+    private appendSeparator;
+    private createSeparator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-breadcrumb': UBreadcrumb;
+    }
+}