@iyulab/components 0.4.0 → 1.0.0

package/dist/components/carousel/UCarousel.js

@@ -1,5 +1,222 @@
-import { UCarousel } from './UCarousel.component.js';
+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 "./UCarousel.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/carousel/UCarousel.ts
+var UCarousel = class UCarousel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.autoplay = false;
+		this.autoplayInterval = 3e3;
+		this.loop = false;
+		this.navigation = false;
+		this.pagination = false;
+		this.draggable = false;
+		this.slidesPerView = 1;
+		this.slidesPerMove = 1;
+		this.gap = 0;
+		this.index = 0;
+		this.slideCount = 0;
+		this.isDragging = false;
+		this.dragOffset = 0;
+		this.dragStartX = 0;
+		this.dragStartTime = 0;
+		this.pointerDown = false;
+		this.prev = () => {
+			const target = Math.max(0, this.index - this.perMove);
+			if (target !== this.index) this.goTo(target);
+			else if (this.loop) this.goTo(Math.min((this.pageCount - 1) * this.perMove, this.maxIndex));
+		};
+		this.next = () => {
+			const target = Math.min(this.maxIndex, this.index + this.perMove);
+			if (target !== this.index) this.goTo(target);
+			else if (this.loop) this.goTo(0);
+		};
+		this.goTo = (index) => {
+			if (index < 0 || index > this.maxIndex || index === this.index) return;
+			this.index = index;
+			if (this.autoplay) this.startAutoplay();
+		};
+		this.handleDragStart = (e) => {
+			e.preventDefault();
+		};
+		this.handlePointerDown = (e) => {
+			if (e.button !== 0) return;
+			this.pointerDown = true;
+			this.dragStartX = e.clientX;
+			this.dragOffset = 0;
+			this.dragStartTime = Date.now();
+			if (this.autoplay) this.stopAutoplay();
+		};
+		this.handlePointerMove = (e) => {
+			if (!this.pointerDown) return;
+			const wrapper = e.currentTarget;
+			const offset = (e.clientX - this.dragStartX) / wrapper.offsetWidth * 100;
+			if (!this.isDragging && Math.abs(e.clientX - this.dragStartX) > 5) {
+				this.isDragging = true;
+				wrapper.setPointerCapture(e.pointerId);
+			}
+			if (this.isDragging) this.dragOffset = offset;
+		};
+		this.handlePointerUp = (e) => {
+			if (!this.pointerDown) return;
+			const elapsed = Date.now() - this.dragStartTime;
+			const absDrag = Math.abs(this.dragOffset);
+			if (this.isDragging && (absDrag > 20 || absDrag > 5 && elapsed < 300)) {
+				if (this.dragOffset < 0) this.next();
+				else this.prev();
+				this.addEventListener("click", this.handleClickCancel, {
+					capture: true,
+					once: true
+				});
+			}
+			if (this.isDragging) e.currentTarget.releasePointerCapture(e.pointerId);
+			this.pointerDown = false;
+			this.isDragging = false;
+			this.dragOffset = 0;
+			if (this.autoplay) this.startAutoplay();
+		};
+		this.handleClickCancel = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get perView() {
+		return Math.max(1, this.slidesPerView);
+	}
+	get perMove() {
+		return Math.max(1, this.slidesPerMove);
+	}
+	get maxIndex() {
+		return Math.max(0, this.slideCount - this.perView);
+	}
+	get pageCount() {
+		return this.maxIndex <= 0 ? 1 : Math.ceil(this.maxIndex / this.perMove) + 1;
+	}
+	get currentPage() {
+		return this.index >= this.maxIndex ? this.pageCount - 1 : Math.floor(this.index / this.perMove);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.autoplay) this.startAutoplay();
+	}
+	disconnectedCallback() {
+		this.stopAutoplay();
+		super.disconnectedCallback();
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("slidesPerView")) this.style.setProperty("--slides-per-view", String(this.perView));
+		if (changedProperties.has("gap")) this.style.setProperty("--slide-gap", `${this.gap}px`);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("autoplay") || changedProperties.has("autoplayInterval")) if (this.autoplay) this.startAutoplay();
+		else this.stopAutoplay();
+	}
+	render() {
+		const pct = -(this.index * (100 / this.perView)) + this.dragOffset;
+		const gapPx = this.gap > 0 ? -(this.index * this.gap / this.perView) : 0;
+		const style = `transform: ${gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`}${this.isDragging ? "; transition: none" : ""}`;
+		return html`
+      <div class="slides-wrapper"
+        @dragstart=${this.handleDragStart}
+        @pointerdown=${this.draggable ? this.handlePointerDown : null}
+        @pointermove=${this.draggable ? this.handlePointerMove : null}
+        @pointerup=${this.draggable ? this.handlePointerUp : null}
+        @pointerleave=${this.draggable ? this.handlePointerUp : null}>
+        <div part="slides" class="slides" style="${style}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
 
-UCarousel.define("u-carousel");
+      <u-button part="prev-button" class="nav-button prev"
+        ?hidden=${!this.navigation || !this.loop && this.index <= 0}
+        variant="ghost"
+        rounded
+        @click=${this.prev}>
+        <u-icon lib="internal" name="chevron-left"></u-icon>
+      </u-button>
+      <u-button part="next-button" class="nav-button next"
+        ?hidden=${!this.navigation || !this.loop && this.index >= this.maxIndex}
+        variant="ghost"
+        rounded
+        @click=${this.next}>
+        <u-icon lib="internal" name="chevron-right"></u-icon>
+      </u-button>
 
+      <div part="indicator" class="indicator"
+        ?hidden=${!this.pagination || this.pageCount <= 1}>
+        ${Array.from({ length: this.pageCount }, (_, i) => html`
+          <button part="dot" class="dot"
+            ?active=${i === this.currentPage}
+            @click=${() => this.goTo(Math.min(i * this.perMove, this.maxIndex))}>
+          </button>
+        `)}
+      </div>
+    `;
+	}
+	startAutoplay() {
+		this.stopAutoplay();
+		this.autoplayTimer = window.setInterval(() => {
+			this.next();
+		}, this.autoplayInterval);
+	}
+	stopAutoplay() {
+		if (this.autoplayTimer) {
+			clearInterval(this.autoplayTimer);
+			this.autoplayTimer = void 0;
+		}
+	}
+	handleSlotChange(e) {
+		this.slideCount = e.target.assignedElements().length;
+		if (this.index >= this.slideCount) this.index = Math.max(0, this.slideCount - 1);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "autoplay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "autoplay-interval"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "autoplayInterval", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "loop", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "navigation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "pagination", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "draggable", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "slides-per-view"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slidesPerView", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "slides-per-move"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slidesPerMove", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UCarousel.prototype, "gap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UCarousel.prototype, "index", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slideCount", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "isDragging", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "dragOffset", void 0);
+UCarousel = __decorate([customElement("u-carousel")], UCarousel);
+//#endregion
 export { UCarousel };

package/dist/components/carousel/UCarousel.styles.js

@@ -1,10 +1,11 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/carousel/UCarousel.styles.ts
+var styles = css`
   :host {
     --slide-gap: 0px;
     --slides-per-view: 1;
   }
+
   :host {
     position: relative;
     display: block;
@@ -12,8 +13,8 @@ const styles = css`
     overflow: hidden;
   }
   :host([draggable]) .slides-wrapper {
-    cursor: grab;
     user-select: none;
+    cursor: grab;
   }
   :host([draggable]) .slides-wrapper:active {
     cursor: grabbing;
@@ -55,25 +56,24 @@ const styles = css`
     z-index: 10;
     top: 50%;
     transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
+    padding: 8px;
+    font-size: 20px;
     color: var(--u-neutral-900);
-    border: none;
-    background-color: transparent;
+    background-color: var(--u-neutral-100);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   .nav-button:hover {
-    opacity: 0.5;
-    transform: scale(1.2) translateY(-40%);
+    background-color: var(--u-neutral-200);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {
-    opacity: 0.8;
-    transform: scale(1.1) translateY(-45%);
+    background-color: var(--u-neutral-300);
+    transform: translateY(-50%) scale(0.95);
   }
 
-  .nav-button.prev { left: 16px; }
-  .nav-button.next { right: 16px; }
+  .nav-button.prev { left: 12px; }
+  .nav-button.next { right: 12px; }
 
   /* ── Pagination ── */
   .indicator {
@@ -108,5 +108,5 @@ const styles = css`
     background-color: var(--u-neutral-100);
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/checkbox/UCheckbox.d.ts

@@ -0,0 +1,39 @@
+import { UFormControlElement } from '../UFormControlElement.js';
+export type CheckboxVariant = "filled" | "outline";
+export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
+/**
+ * 선택/해제 상태를 토글하는 체크박스 컴포넌트입니다.
+ * indeterminate 상태도 지원합니다.
+ *
+ * @slot - 체크박스 옆에 표시할 라벨 텍스트
+ *
+ * @csspart wrapper - 체크박스 전체 래퍼
+ * @csspart input - 실제 체크박스 input 요소
+ * @csspart checkbox - 체크박스 시각 요소
+ * @csspart label - 라벨 텍스트 요소
+ * @csspart description - 설명 텍스트 요소
+ *
+ * @cssprop --checkbox-color - 체크 표시 색상 (outline variant)
+ * @cssprop --checkbox-border-color - 체크박스 테두리 색상
+ * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
+ */
+export declare class UCheckbox extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 스타일 변형 */
+    variant: CheckboxVariant;
+    /** 체크박스 강조 색상 */
+    color: CheckboxColor;
+    /** 중간 상태 */
+    indeterminate: boolean;
+    /** 체크 여부 */
+    checked: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private handleInputChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-checkbox': UCheckbox;
+    }
+}

package/dist/components/checkbox/UCheckbox.js

@@ -0,0 +1,88 @@
+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 { UFormControlElement } from "../UFormControlElement.js";
+import "../icon/UIcon.js";
+import { styles } from "./UCheckbox.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+//#region src/components/checkbox/UCheckbox.ts
+var UCheckbox = class UCheckbox extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "filled";
+		this.color = "blue";
+		this.indeterminate = false;
+		this.checked = false;
+		this.handleInputChange = (e) => {
+			e.stopImmediatePropagation();
+			if (this.readonly || this.disabled) return;
+			const input = e.target;
+			this.indeterminate = false;
+			this.checked = input.checked;
+			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
+			this.internals?.setValidity(input.validity, this.validationMessage || input.validationMessage, this.shadowRoot?.querySelector(".checkbox") || void 0);
+			if (!this.novalidate) this.validate();
+			this.relay(e);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <label class="wrapper" part="wrapper">
+        <input part="input"
+          type="checkbox"
+          ?disabled=${this.disabled || this.readonly}
+          ?required=${this.required}
+          .checked=${live(this.checked)}
+          @change=${this.handleInputChange}
+        />
+        <span class="checkbox" part="checkbox">
+          <u-icon
+            lib="internal"
+            name=${this.indeterminate ? "dash-lg" : "check-lg"}
+          ></u-icon>
+        </span>
+        <span class="label" part="label">
+          <slot></slot>
+          <span class="required" ?hidden=${!this.required}>*</span>
+        </span>
+      </label>
+
+      <div class="description" part="description" ?hidden=${!this.description}>
+        ${this.description}
+      </div>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.reportValidity();
+		else this.invalid = this.required && !this.checked;
+		return !this.invalid;
+	}
+	reset() {
+		this.checked = false;
+		this.indeterminate = false;
+		this.invalid = false;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCheckbox.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCheckbox.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "checked", void 0);
+UCheckbox = __decorate([customElement("u-checkbox")], UCheckbox);
+//#endregion
+export { UCheckbox };

package/dist/components/checkbox/UCheckbox.styles.d.ts

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

package/dist/components/checkbox/UCheckbox.styles.js

@@ -0,0 +1,211 @@
+import { css } from "lit";
+//#region src/components/checkbox/UCheckbox.styles.ts
+var styles = css`
+  :host {
+    --checkbox-color: inherit;
+    --checkbox-border-color: var(--u-input-border-color);
+    --checkbox-background-color: var(--u-input-bg-color);
+  }
+
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  /* === 상태 스타일 === */
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  :host([readonly]) {
+    cursor: default;
+  }
+  :host([invalid]) {
+    --checkbox-border-color: var(--u-red-600);
+  }
+  :host([invalid]) .footer {
+    color: var(--u-red-600);
+  }
+  :host([checked]) .checkbox u-icon,
+  :host([indeterminate]) .checkbox u-icon {
+    transform: scale(1);
+  }
+  :host(:not([disabled]):not([readonly]):hover) {
+    --checkbox-border-color: var(--u-input-border-color-hover);
+  }
+
+  /* === Variant: filled - 배경 채움 === */
+  :host([variant="filled"][checked]),
+  :host([variant="filled"][indeterminate]) {
+    --checkbox-color: var(--u-neutral-100);
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: var(--u-blue-600);
+  }
+
+  /* === Variant: outline - 테두리만 === */
+  :host([variant="outline"][checked]),
+  :host([variant="outline"][indeterminate]) {
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: transparent;
+  }
+
+  /* === Color variants (filled) === */
+  :host([variant="filled"][color="blue"][checked]),
+  :host([variant="filled"][color="blue"][indeterminate]) {
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: var(--u-blue-600);
+  }
+  :host([variant="filled"][color="green"][checked]),
+  :host([variant="filled"][color="green"][indeterminate]) {
+    --checkbox-border-color: var(--u-green-600);
+    --checkbox-background-color: var(--u-green-600);
+  }
+  :host([variant="filled"][color="red"][checked]),
+  :host([variant="filled"][color="red"][indeterminate]) {
+    --checkbox-border-color: var(--u-red-600);
+    --checkbox-background-color: var(--u-red-600);
+  }
+  :host([variant="filled"][color="orange"][checked]),
+  :host([variant="filled"][color="orange"][indeterminate]) {
+    --checkbox-border-color: var(--u-orange-600);
+    --checkbox-background-color: var(--u-orange-600);
+  }
+  :host([variant="filled"][color="teal"][checked]),
+  :host([variant="filled"][color="teal"][indeterminate]) {
+    --checkbox-border-color: var(--u-teal-600);
+    --checkbox-background-color: var(--u-teal-600);
+  }
+  :host([variant="filled"][color="cyan"][checked]),
+  :host([variant="filled"][color="cyan"][indeterminate]) {
+    --checkbox-border-color: var(--u-cyan-600);
+    --checkbox-background-color: var(--u-cyan-600);
+  }
+  :host([variant="filled"][color="purple"][checked]),
+  :host([variant="filled"][color="purple"][indeterminate]) {
+    --checkbox-border-color: var(--u-purple-600);
+    --checkbox-background-color: var(--u-purple-600);
+  }
+  :host([variant="filled"][color="pink"][checked]),
+  :host([variant="filled"][color="pink"][indeterminate]) {
+    --checkbox-border-color: var(--u-pink-600);
+    --checkbox-background-color: var(--u-pink-600);
+  }
+  :host([variant="filled"][color="neutral"][checked]),
+  :host([variant="filled"][color="neutral"][indeterminate]) {
+    --checkbox-border-color: var(--u-neutral-600);
+    --checkbox-background-color: var(--u-neutral-600);
+  }
+
+  /* === Color variants (outline) === */
+  :host([variant="outline"][color="blue"][checked]),
+  :host([variant="outline"][color="blue"][indeterminate]) {
+    --checkbox-color: var(--u-blue-600);
+    --checkbox-border-color: var(--u-blue-600);
+  }
+  :host([variant="outline"][color="green"][checked]),
+  :host([variant="outline"][color="green"][indeterminate]) {
+    --checkbox-color: var(--u-green-600);
+    --checkbox-border-color: var(--u-green-600);
+  }
+  :host([variant="outline"][color="red"][checked]),
+  :host([variant="outline"][color="red"][indeterminate]) {
+    --checkbox-color: var(--u-red-600);
+    --checkbox-border-color: var(--u-red-600);
+  }
+  :host([variant="outline"][color="orange"][checked]),
+  :host([variant="outline"][color="orange"][indeterminate]) {
+    --checkbox-color: var(--u-orange-600);
+    --checkbox-border-color: var(--u-orange-600);
+  }
+  :host([variant="outline"][color="teal"][checked]),
+  :host([variant="outline"][color="teal"][indeterminate]) {
+    --checkbox-color: var(--u-teal-600);
+    --checkbox-border-color: var(--u-teal-600);
+  }
+  :host([variant="outline"][color="cyan"][checked]),
+  :host([variant="outline"][color="cyan"][indeterminate]) {
+    --checkbox-color: var(--u-cyan-600);
+    --checkbox-border-color: var(--u-cyan-600);
+  }
+  :host([variant="outline"][color="purple"][checked]),
+  :host([variant="outline"][color="purple"][indeterminate]) {
+    --checkbox-color: var(--u-purple-600);
+    --checkbox-border-color: var(--u-purple-600);
+  }
+  :host([variant="outline"][color="pink"][checked]),
+  :host([variant="outline"][color="pink"][indeterminate]) {
+    --checkbox-color: var(--u-pink-600);
+    --checkbox-border-color: var(--u-pink-600);
+  }
+  :host([variant="outline"][color="neutral"][checked]),
+  :host([variant="outline"][color="neutral"][indeterminate]) {
+    --checkbox-color: var(--u-neutral-600);
+    --checkbox-border-color: var(--u-neutral-600);
+  }
+
+  .wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.5em;
+    cursor: inherit;
+  }
+
+  /* 네이티브 체크박스 */
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  input:focus-visible ~ .checkbox {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 3px rgba(59, 130, 246, 0.22);
+  }
+
+  /* 체크박스 외형 */
+  .checkbox {
+    flex-shrink: 0;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    color: var(--checkbox-color);
+    border: 2px solid var(--checkbox-border-color);
+    border-radius: 0.2em;
+    background-color: var(--checkbox-background-color);
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+
+  /* 체크박스 아이콘 */
+  .checkbox u-icon {
+    font-size: 0.85em;
+    transform: scale(0);
+    transition: transform 0.15s ease;
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: 1.2;
+  }
+
+  .required {
+    color: var(--u-red-600);
+    font-weight: 500;
+  }
+
+  .description {
+    margin-top: 0.5em;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.2;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/chip/UChip.d.ts

@@ -0,0 +1,43 @@
+import { UElement } from '../UElement.js';
+import { TagVariant, TagColor } from '../tag/UTag.js';
+/**
+ * 태그 상태 표시 또는 선택 UI와 인터랙션(선택, 삭제)을 지원하는 칩 컴포넌트입니다.
+ *
+ * @slot - 칩의 주요 콘텐츠
+ * @slot prefix - 칩의 앞에 표시할 콘텐츠
+ * @slot suffix - 칩의 뒤에 표시할 콘텐츠
+ * @slot tooltip - 툴팁 표시
+ *
+ * @csspart tag - 내부 UTag 요소
+ * @csspart check - 선택 상태를 나타내는 체크 아이콘
+ * @csspart remove - 삭제 버튼
+ * @csspart tooltip - 툴팁 요소
+ *
+ * @event pick - 선택 시 발생
+ * @event remove - 삭제 버튼 클릭 시 발생
+ */
+export declare class UChip extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 칩의 스타일 변형 */
+    variant: TagVariant;
+    /** 칩의 색상 */
+    color: TagColor;
+    /** 둥근 모서리 여부 */
+    rounded: boolean;
+    /** 삭제 가능 여부 */
+    removable: boolean;
+    /** 선택 가능 여부 */
+    selectable: boolean;
+    /** 선택 상태 */
+    selected: boolean;
+    /** 칩의 고유값 */
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleTagClick;
+    private handleRemoveClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-chip': UChip;
+    }
+}