@iyulab/components 0.4.0 → 1.0.0

package/dist/components/button/UButton.styles.js

@@ -1,17 +1,17 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/button/UButton.styles.ts
+var styles = css`
   :host {
     position: relative;
     display: inline-flex;
-    
+
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
     padding: 0.5em;
-    border: 1px solid var(--u-border-color);
+    border: 1px solid transparent;
     border-radius: 6px;
-    background-color: var(--u-bg-color);
+    background-color: transparent;
 
     transition: all 0.2s ease;
     overflow: hidden;
@@ -19,82 +19,142 @@ const styles = css`
     cursor: pointer;
   }
 
-  /* Style variants */
-  :host([variant="default"]) {
+  /* === States === */
+  :host(:active) {
+    transform: translateY(1px);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([loading]) {
+    opacity: 0.8;
+    pointer-events: none;
+    cursor: wait;
+  }
+  :host([loading]) button,
+  :host([loading]) a {
+    visibility: hidden;
+  }
+  :host([rounded]) {
+    border-radius: 9999px;
+  }
+  :host([has-spinner]) u-spinner {
+    display: none;
+  }
+
+  /* === Variant styles === */
+
+  /* solid: 강한 채움 (neutral) */
+  :host([variant="solid"]) {
+    color: #fff;
+    background-color: var(--u-neutral-600, #525252);
+    border-color: var(--u-neutral-600, #525252);
+  }
+  :host([variant="solid"]:hover) {
+    background-color: var(--u-neutral-700, #404040);
+    border-color: var(--u-neutral-700, #404040);
+  }
+  :host([variant="solid"]:active) {
+    background-color: var(--u-neutral-800, #262626);
+    border-color: var(--u-neutral-800, #262626);
+  }
+
+  /* surface: 채우기 + 경계 */
+  :host([variant="surface"]) {
     color: var(--u-txt-color);
-    border-color: var(--u-border-color);
-    background-color: var(--u-bg-color);
+    background-color: var(--u-neutral-100, #f5f5f5);
+    border-color: var(--u-neutral-300, #d4d4d4);
   }
-  :host([variant="default"]:hover) {
-    background-color: var(--u-bg-color-hover);
+  :host([variant="surface"]:hover) {
+    background-color: var(--u-neutral-200, #e5e5e5);
+    border-color: var(--u-neutral-400, #a3a3a3);
   }
-  :host([variant="default"]:active) {
-    background-color: var(--u-bg-color-active);
+  :host([variant="surface"]:active) {
+    background-color: var(--u-neutral-300, #d4d4d4);
+    border-color: var(--u-neutral-500, #737373);
   }
 
-  :host([variant="borderless"]) {
+  /* filled: 채우기만 */
+  :host([variant="filled"]) {
     color: var(--u-txt-color);
+    background-color: var(--u-neutral-100, #f5f5f5);
     border-color: transparent;
-    background-color: transparent;
   }
-  :host([variant="borderless"]:hover) {
-    background-color: var(--u-bg-color-hover);
+  :host([variant="filled"]:hover) {
+    background-color: var(--u-neutral-200, #e5e5e5);
   }
-  :host([variant="borderless"]:active) {
-    background-color: var(--u-bg-color-active);
+  :host([variant="filled"]:active) {
+    background-color: var(--u-neutral-300, #d4d4d4);
   }
 
-  :host([variant="link"]) {
+  /* outlined: 경계만 */
+  :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: transparent;
+    border-color: var(--u-neutral-300, #d4d4d4);
     background-color: transparent;
   }
-  :host([variant="link"]:hover) {
-    color: var(--u-blue-500, #3b82f6);
+  :host([variant="outlined"]:hover) {
+    border-color: var(--u-neutral-400, #a3a3a3);
+    background-color: var(--u-neutral-50, #fafafa);
   }
-  :host([variant="link"]:active) {
-    color: var(--u-blue-600, #2563eb);
+  :host([variant="outlined"]:active) {
+    border-color: var(--u-neutral-500, #737373);
+    background-color: var(--u-neutral-100, #f5f5f5);
   }
 
-  :host(:active) {
-    transform: translateY(1px);
+  /* ghost: transparent */
+  :host([variant="ghost"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="ghost"]:hover) {
+    background-color: var(--u-bg-color-hover);
+  }
+  :host([variant="ghost"]:active) {
+    background-color: var(--u-bg-color-active);
   }
 
-  :host([disabled]) {
-    color: var(--u-txt-color-disabled);
-    cursor: not-allowed;
+  /* link: blue 링크 스타일 */
+  :host([variant="link"]) {
+    color: var(--u-blue-500, #3b82f6);
+    border-color: transparent;
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
   }
-  :host([loading]) {
-    cursor: wait;
+  :host([variant="link"]:hover) {
+    color: var(--u-blue-600, #2563eb);
+    text-decoration: underline;
   }
-  :host([loading]) button {
-    visibility: hidden;
+  :host([variant="link"]:active) {
+    color: var(--u-blue-700, #1d4ed8);
   }
 
-  button {
+  /* === Inner === */
+  button, a {
     all: unset;
     width: 100%;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
   }
-  button:focus-visible {
-    outline: 2px solid var(--u-blue-500, #3b82f6);
-    outline-offset: 2px;
+  a {
+    text-decoration: none;
+    color: inherit;
   }
-
-  slot {
-    flex: 1 0 auto;
-    min-width: 0;
-    display: inline-flex;
-    justify-content: center;
+  a[disabled] {
+    pointer-events: none;
   }
+
+  /* === Slots === */
   ::slotted(*) {
     color: inherit;
     font-size: inherit;
   }
-  /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
   }
@@ -102,6 +162,19 @@ const styles = css`
     margin-left: 0.5em;
   }
 
+  .content {
+    flex: 1 0 auto;
+    min-width: 0;
+    line-height: 1.5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* === Mask (로딩 오버레이) === */
   .mask {
     position: absolute;
     z-index: 100;
@@ -121,5 +194,5 @@ const styles = css`
     pointer-events: none;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/button-group/UButtonGroup.d.ts

@@ -0,0 +1,28 @@
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+import { ButtonVariant } from '../button/UButton.js';
+/**
+ * 여러 버튼을 묶어 그룹으로 표시하는 컴포넌트입니다.
+ * variant 또는 disabled 속성을 설정하면 하위 u-button, u-icon-button에 자동 적용됩니다.
+ *
+ * @slot - u-button 또는 u-icon-button 요소들
+ */
+export declare class UButtonGroup extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 하위 버튼에 자동 적용할 스타일 변형 */
+    variant: ButtonVariant;
+    /** 세로 방향 배치 여부 */
+    vertical: boolean;
+    /** 하위 버튼 자동 비활성화 */
+    disabled: boolean;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private propagate;
+    private getRadius;
+    private handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-button-group': UButtonGroup;
+    }
+}

package/dist/components/button-group/UButtonGroup.js

@@ -0,0 +1,93 @@
+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 { UButton } from "../button/UButton.js";
+import { UIconButton } from "../icon-button/UIconButton.js";
+import { styles } from "./UButtonGroup.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/button-group/UButtonGroup.ts
+var UButtonGroup = class UButtonGroup extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "solid";
+		this.vertical = false;
+		this.disabled = false;
+		this.handleSlotChange = () => {
+			this.propagate();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if ([
+			"variant",
+			"disabled",
+			"vertical"
+		].some((k) => changedProperties.has(k))) this.propagate();
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+	}
+	propagate() {
+		const buttons = (this.shadowRoot?.querySelector("slot"))?.assignedElements({ flatten: true }).filter((el) => el instanceof UButton || el instanceof UIconButton);
+		if (!buttons?.length) return;
+		const variant = this.variant;
+		const vertical = this.vertical;
+		const lastIndex = buttons.length - 1;
+		const isGhost = variant === "ghost" || variant === "link";
+		const isSolid = variant === "solid" || variant === "filled";
+		buttons.forEach((button, index) => {
+			button.variant = variant;
+			button.disabled = this.disabled;
+			const radius = this.getRadius(index, lastIndex, vertical);
+			const margin = index > 0 && !isGhost ? "-1px" : "";
+			const borderCollapse = isSolid && button instanceof UButton;
+			if (button instanceof UIconButton) {
+				const inner = button.shadowRoot?.querySelector("u-button");
+				if (inner) inner.style.borderRadius = radius;
+				button.style.borderRadius = "";
+				button.style.margin = vertical ? `${margin} 0 0 0` : `0 0 0 ${margin}`;
+			} else {
+				button.style.borderRadius = radius;
+				button.style.margin = vertical ? `${margin} 0 0 0` : `0 0 0 ${margin}`;
+				if (borderCollapse) if (vertical) {
+					button.style.borderBottomWidth = index < lastIndex ? "0" : "";
+					button.style.borderRightWidth = "";
+				} else {
+					button.style.borderRightWidth = index < lastIndex ? "0" : "";
+					button.style.borderBottomWidth = "";
+				}
+				else {
+					button.style.borderRightWidth = "";
+					button.style.borderBottomWidth = "";
+				}
+			}
+		});
+	}
+	getRadius(index, last, vertical) {
+		if (last === 0) return "6px";
+		if (index === 0) return vertical ? "6px 6px 0 0" : "6px 0 0 6px";
+		if (index === last) return vertical ? "0 0 6px 6px" : "0 6px 6px 0";
+		return "0";
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "vertical", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "disabled", void 0);
+UButtonGroup = __decorate([customElement("u-button-group")], UButtonGroup);
+//#endregion
+export { UButtonGroup };

package/dist/components/button-group/UButtonGroup.styles.d.ts

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

package/dist/components/button-group/UButtonGroup.styles.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+//#region src/components/button-group/UButtonGroup.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: stretch;
+    font-size: 14px;
+  }
+
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  ::slotted(u-button),
+  ::slotted(u-icon-button) {
+    font-size: inherit;
+  }
+
+  /* hover/focus 시 border 겹침 위로 올리기 */
+  ::slotted(u-button:hover),
+  ::slotted(u-button:focus-within),
+  ::slotted(u-icon-button:hover),
+  ::slotted(u-icon-button:focus-within) {
+    z-index: 1;
+  }
+
+  :host([variant="ghost"]),
+  :host([variant="link"]) {
+    gap: 2px;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/card/UCard.d.ts

@@ -1,7 +1,34 @@
-import { UCard } from './UCard.component.js';
+import { UElement } from '../UElement.js';
+export type CardOrientation = 'vertical' | 'horizontal';
+/**
+ * 콘텐츠를 카드 형태로 표시하는 컴포넌트입니다.
+ *
+ * @slot - 카드의 본문 콘텐츠
+ * @slot header - 카드 상단 헤더 영역
+ * @slot footer - 카드 하단 푸터 영역
+ * @slot media - 카드의 미디어 영역 (이미지, 동영상 등)
+ *
+ * @csspart media - 미디어 영역 컨테이너
+ * @csspart content - 콘텐츠 영역 컨테이너
+ * @csspart header - 헤더 영역 컨테이너
+ * @csspart body - 본문 영역 컨테이너
+ * @csspart footer - 푸터 영역 컨테이너
+ */
+export declare class UCard extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 카드 레이아웃 방향 */
+    orientation: CardOrientation;
+    /** 그림자 제거 여부 */
+    shadowless: boolean;
+    /** 테두리 제거 여부 */
+    borderless: boolean;
+    /** 마우스 오버 효과 적용 여부 */
+    hoverable: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-card": UCard;
+        'u-card': UCard;
     }
 }
-export { UCard };

package/dist/components/card/UCard.js

@@ -1,5 +1,62 @@
-import { UCard } from './UCard.component.js';
-
-UCard.define("u-card");
-
+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 "./UCard.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/card/UCard.ts
+var UCard = class UCard extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "vertical";
+		this.shadowless = false;
+		this.borderless = false;
+		this.hoverable = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="media" part="media">
+        <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+      <div class="content" part="content">
+        <header class="header" part="header">
+          <slot name="header" @slotchange=${this.handleSlotChange}></slot>
+        </header>
+        <div class="body" part="body">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <footer class="footer" part="footer">
+          <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
+        </footer>
+      </div>
+    `;
+	}
+	handleSlotChange(e) {
+		const slot = e.target;
+		const container = slot.parentElement;
+		const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+		if (container) container.classList.toggle("has-content", hasContent);
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "shadowless", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "borderless", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "hoverable", void 0);
+UCard = __decorate([customElement("u-card")], UCard);
+//#endregion
 export { UCard };

package/dist/components/card/UCard.styles.js

@@ -1,14 +1,19 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/card/UCard.styles.ts
+var styles = css`
   :host {
     display: flex;
-    flex-direction: column;
-    background-color: var(--u-panel-bg-color);
-    border-radius: 8px;
-    overflow: hidden;
     border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+  :host([orientation="vertical"]) {
+    flex-direction: column;
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
   }
   :host([borderless]) {
     border: none;
@@ -24,9 +29,6 @@ const styles = css`
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
-  :host([orientation="horizontal"]) {
-    flex-direction: row;
-  }
 
   .media {
     display: none;
@@ -70,7 +72,6 @@ const styles = css`
   .footer.has-content {
     display: block;
   }
-
 `;
-
+//#endregion
 export { styles };

package/dist/components/carousel/UCarousel.d.ts

@@ -1,7 +1,69 @@
-import { UCarousel } from './UCarousel.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+/**
+ * 여러 슬라이드를 전환하며 표시하는 캐러셀 컴포넌트입니다.
+ *
+ * @slot - 슬라이드로 표시할 콘텐츠 (각 자식 요소가 하나의 슬라이드)
+ *
+ * @csspart slides - 슬라이드 컨테이너
+ * @csspart prev-button - 이전 버튼
+ * @csspart next-button - 다음 버튼
+ * @csspart indicator - 페이지네이션 컨테이너
+ * @csspart dot - 페이지네이션 점
+ */
+export declare class UCarousel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 자동 재생 활성화 */
+    autoplay: boolean;
+    /** 자동 재생 간격 (ms) */
+    autoplayInterval: number;
+    /** 처음/끝에서 순환 이동 */
+    loop: boolean;
+    /** 이전/다음 내비게이션 버튼 표시 */
+    navigation: boolean;
+    /** 페이지 페이지네이션 표시 */
+    pagination: boolean;
+    /** 드래그로 슬라이드 이동 */
+    draggable: boolean;
+    /** 한 화면에 표시할 슬라이드 수 */
+    slidesPerView: number;
+    /** 한 번에 이동할 슬라이드 수 */
+    slidesPerMove: number;
+    /** 슬라이드 간 간격 (px) */
+    gap: number;
+    /** 현재 활성 슬라이드 인덱스 */
+    index: number;
+    private slideCount;
+    private isDragging;
+    private dragOffset;
+    private autoplayTimer?;
+    private dragStartX;
+    private dragStartTime;
+    private pointerDown;
+    private get perView();
+    private get perMove();
+    private get maxIndex();
+    private get pageCount();
+    private get currentPage();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    prev: () => void;
+    next: () => void;
+    goTo: (index: number) => void;
+    private startAutoplay;
+    private stopAutoplay;
+    private handleSlotChange;
+    private handleDragStart;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handleClickCancel;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-carousel": UCarousel;
+        'u-carousel': UCarousel;
     }
 }
-export { UCarousel };