@iyulab/components 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.0 (2026-02-26)
+
+### Features
+- **UCard**: Added card layout component with `header`, `footer`, `media` slots
+- **UCarousel**: Added carousel component with autoplay, drag, navigation, multi-slide view
+
+### Improvements
+- Moved `@lit/react`, `react` to optional peerDependencies
+- Updated devDependencies
+
 ## 0.2.3 (2026-02-09)
 
 ### Features

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

@@ -0,0 +1,21 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Card 컴포넌트는 콘텐츠를 카드 형태로 표시합니다.
+ * @slot - 카드의 메인 콘텐츠를 삽입합니다.
+ * @slot header - 카드 상단의 헤더 영역에 표시할 콘텐츠를 삽입합니다.
+ * @slot footer - 카드 하단의 푸터 영역에 표시할 콘텐츠를 삽입합니다.
+ * @slot media - 카드의 미디어 영역에 표시할 이미지, 비디오 등을 삽입합니다.
+ */
+export declare class UCard extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 카드의 그림자 효과를 제거할지 여부를 설정합니다. */
+    shadowless: boolean;
+    /** 카드의 경계선을 제거할지 여부를 설정합니다. */
+    borderless: boolean;
+    /** 카드에 호버 효과를 적용할지 여부를 설정합니다. */
+    hoverable: boolean;
+    /** 카드의 레이아웃 방향을 설정합니다. 'vertical'(세로) 또는 'horizontal'(가로) */
+    orientation: 'vertical' | 'horizontal';
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}

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

@@ -0,0 +1,66 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './UCard.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 UCard extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.shadowless = false;
+    this.borderless = false;
+    this.hoverable = false;
+    this.orientation = "vertical";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  render() {
+    return html`
+      <div part="media" class="media">
+        <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+      <div class="content">
+        <header part="header" class="header">
+          <slot name="header" @slotchange=${this.handleSlotChange}></slot>
+        </header>
+        <div part="body" class="body">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <footer part="footer" class="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);
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "shadowless");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "borderless");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "hoverable");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UCard.prototype, "orientation");
+
+export { UCard };

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

@@ -0,0 +1,7 @@
+import { UCard } from './UCard.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-card": UCard;
+    }
+}
+export { UCard };

package/dist/components/card/UCard.js

@@ -0,0 +1,5 @@
+import { UCard } from './UCard.component.js';
+
+UCard.define("u-card");
+
+export { UCard };

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

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

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

@@ -0,0 +1,76 @@
+import { css } from 'lit';
+
+const 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);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  :host([borderless]) {
+    border: none;
+  }
+  :host([shadowless]) {
+    box-shadow: none;
+  }
+  :host([hoverable]) {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  :host([hoverable]:hover) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
+  }
+
+  .media {
+    display: none;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .media.has-content {
+    display: block;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .header {
+    display: none;
+    padding: 16px;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .header.has-content {
+    display: block;
+  }
+
+  .body {
+    display: none;
+    flex: 1;
+    padding: 16px;
+  }
+  .body.has-content {
+    display: block;
+  }
+
+  .footer {
+    display: none;
+    padding: 16px;
+    border-top: 1px solid var(--u-border-color);
+  }
+  .footer.has-content {
+    display: block;
+  }
+
+`;
+
+export { styles };

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

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Carousel 컴포넌트는 여러 슬라이드를 회전하며 표시합니다.
+ *
+ * @slot - 슬라이드로 표시할 콘텐츠. 각 자식 요소가 하나의 슬라이드.
+ * @event u-change - 슬라이드 변경 시. detail: { currentIndex: number }
+ *
+ * @csspart slides - 슬라이드 컨테이너 (aspect-ratio 등 외부 스타일링)
+ * @csspart prev-button - 이전 버튼
+ * @csspart next-button - 다음 버튼
+ * @csspart indicator - 인디케이터 컨테이너
+ * @csspart dot - 인디케이터 도트
+ */
+export declare class UCarousel extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 활성 슬라이드 인덱스 */
+    currentIndex: number;
+    /** 자동 재생 활성화 */
+    autoplay: boolean;
+    /** 자동 재생 간격 (ms) */
+    autoplayInterval: number;
+    /** 이전/다음 네비게이션 버튼 표시 */
+    navigation: boolean;
+    /** 페이지 인디케이터 표시 */
+    pagination: boolean;
+    /** 처음/끝에서 순환 이동 */
+    loop: boolean;
+    /** 드래그로 슬라이드 전환 */
+    draggable: boolean;
+    /** 한 화면에 표시할 슬라이드 수 */
+    slidesPerView: number;
+    /** 한 번에 이동할 슬라이드 수 */
+    slidesPerMove: number;
+    /** 슬라이드 간 간격 (px) */
+    gap: number;
+    private _slideCount;
+    private _isDragging;
+    private _dragOffset;
+    private _autoplayTimer?;
+    private _dragStartX;
+    private _dragStartTime;
+    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 handleSlotChange;
+    private startAutoplay;
+    private stopAutoplay;
+    private handleDragStart;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+}

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

@@ -0,0 +1,243 @@
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { UButton } from '../button/UButton.component.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { styles } from './UCarousel.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 UCarousel extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.currentIndex = 0;
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.navigation = true;
+    this.pagination = true;
+    this.loop = true;
+    this.draggable = false;
+    this.slidesPerView = 1;
+    this.slidesPerMove = 1;
+    this.gap = 0;
+    this._slideCount = 0;
+    this._isDragging = false;
+    this._dragOffset = 0;
+    this._dragStartX = 0;
+    this._dragStartTime = 0;
+    this.handleDragStart = (e) => {
+      e.preventDefault();
+    };
+    this.handlePointerDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._dragStartX = e.clientX;
+      this._dragOffset = 0;
+      this._dragStartTime = Date.now();
+      if (this.autoplay) this.stopAutoplay();
+      const wrapper = e.currentTarget;
+      wrapper.setPointerCapture(e.pointerId);
+    };
+    this.handlePointerMove = (e) => {
+      if (!this._isDragging) return;
+      const wrapper = e.currentTarget;
+      this._dragOffset = (e.clientX - this._dragStartX) / wrapper.offsetWidth * 100;
+    };
+    this.handlePointerUp = (e) => {
+      if (!this._isDragging) return;
+      const elapsed = Date.now() - this._dragStartTime;
+      const absDrag = Math.abs(this._dragOffset);
+      if (absDrag > 20 || absDrag > 5 && elapsed < 300) {
+        if (this._dragOffset < 0) this.next();
+        else this.prev();
+      }
+      this._isDragging = false;
+      this._dragOffset = 0;
+      if (this.autoplay) this.startAutoplay();
+      const wrapper = e.currentTarget;
+      wrapper.releasePointerCapture(e.pointerId);
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-button": UButton,
+      "u-icon": UIcon
+    };
+  }
+  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.currentIndex >= this._maxIndex ? this._pageCount - 1 : Math.floor(this.currentIndex / 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.currentIndex * (100 / this._perView)) + this._dragOffset;
+    const gapPx = this.gap > 0 ? -(this.currentIndex * this.gap / this._perView) : 0;
+    const transform = gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`;
+    const style = `transform: ${transform}${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>
+
+      <u-button part="prev-button" class="nav-button prev" variant="borderless"
+        ?hidden=${!this.navigation}
+        ?disabled=${!this.loop && this.currentIndex <= 0}
+        @click=${this.prev}>
+        <u-icon lib="internal" name="chevron-left"></u-icon>
+      </u-button>
+      <u-button part="next-button" class="nav-button next" variant="borderless"
+        ?hidden=${!this.navigation}
+        ?disabled=${!this.loop && this.currentIndex >= this._maxIndex}
+        @click=${this.next}>
+        <u-icon lib="internal" name="chevron-right"></u-icon>
+      </u-button>
+
+      <div part="indicator" class="indicator"
+        ?hidden=${!this.pagination || !this._slideCount}>
+        ${Array.from({ length: this._pageCount }, (_, i) => html`
+          <button part="dot"
+            class="dot ${i === this._currentPage ? "active" : ""}"
+            @click=${() => this.goTo(Math.min(i * this._perMove, this._maxIndex))}>
+          </button>
+        `)}
+      </div>
+    `;
+  }
+  /** 이전 슬라이드로 이동 */
+  prev() {
+    const target = Math.max(0, this.currentIndex - this._perMove);
+    if (target !== this.currentIndex) {
+      this.goTo(target);
+    } else if (this.loop) {
+      this.goTo(Math.min((this._pageCount - 1) * this._perMove, this._maxIndex));
+    }
+  }
+  /** 다음 슬라이드로 이동 */
+  next() {
+    const target = Math.min(this._maxIndex, this.currentIndex + this._perMove);
+    if (target !== this.currentIndex) {
+      this.goTo(target);
+    } else if (this.loop) {
+      this.goTo(0);
+    }
+  }
+  /** 지정한 인덱스로 이동 */
+  goTo(index) {
+    if (index < 0 || index > this._maxIndex || index === this.currentIndex) return;
+    this.currentIndex = index;
+    this.emit("u-change", {
+      currentIndex: this.currentIndex
+    });
+    if (this.autoplay) this.startAutoplay();
+  }
+  handleSlotChange(e) {
+    const slot = e.target;
+    this._slideCount = slot.assignedElements().length;
+    if (this.currentIndex >= this._slideCount) {
+      this.currentIndex = Math.max(0, this._slideCount - 1);
+    }
+  }
+  startAutoplay() {
+    this.stopAutoplay();
+    this._autoplayTimer = window.setInterval(() => this.next(), this.autoplayInterval);
+  }
+  stopAutoplay() {
+    if (this._autoplayTimer) {
+      clearInterval(this._autoplayTimer);
+      this._autoplayTimer = void 0;
+    }
+  }
+}
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "current-index" })
+], UCarousel.prototype, "currentIndex");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "autoplay");
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], UCarousel.prototype, "autoplayInterval");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "navigation");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "pagination");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "loop");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "draggable");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "slides-per-view" })
+], UCarousel.prototype, "slidesPerView");
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-move" })
+], UCarousel.prototype, "slidesPerMove");
+__decorateClass([
+  property({ type: Number, reflect: true })
+], UCarousel.prototype, "gap");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_slideCount");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_isDragging");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_dragOffset");
+
+export { UCarousel };

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

@@ -0,0 +1,7 @@
+import { UCarousel } from './UCarousel.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-carousel": UCarousel;
+    }
+}
+export { UCarousel };

package/dist/components/carousel/UCarousel.js

@@ -0,0 +1,5 @@
+import { UCarousel } from './UCarousel.component.js';
+
+UCarousel.define("u-carousel");
+
+export { UCarousel };

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

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

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

@@ -0,0 +1,113 @@
+import { css } from 'lit';
+
+const styles = css`
+  /* ── Host ── */
+  :host {
+    --slide-gap: 0px;
+    --slides-per-view: 1;
+  }
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  
+  /* ── Draggable ── */
+  :host([draggable]) .slides-wrapper {
+    cursor: grab;
+    user-select: none;
+  }
+  :host([draggable]) .slides-wrapper:active {
+    cursor: grabbing;
+  }
+  :host([draggable]) ::slotted(*) {
+    -webkit-user-drag: none;
+    user-select: none;
+  }
+
+  /* ── Slides ── */
+  .slides-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+
+  .slides {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    gap: var(--slide-gap, 0px);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  ::slotted(*) {
+    flex: 0 0 calc(
+      (100% - (var(--slides-per-view) - 1) * var(--slide-gap, 0px))
+      / var(--slides-per-view)
+    );
+    min-width: 0;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  /* ── Navigation ── */
+  .nav-button {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 16px;
+    background-color: var(--u-panel-bg-color, #fff);
+    box-shadow: 0 2px 8px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
+    opacity: 0.9;
+  }
+  .nav-button:hover {
+    opacity: 1;
+    background-color: var(--u-bg-color-hover, #f3f4f6);
+  }
+
+  .nav-button.prev { left: 16px; }
+  .nav-button.next { right: 16px; }
+
+  /* ── Indicator ── */
+  .indicator {
+    position: absolute;
+    z-index: 10;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--u-neutral-400, rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .dot:hover {
+    background-color: var(--u-neutral-200, rgba(0, 0, 0, 0.5));
+  }
+  .dot.active {
+    background-color: var(--u-neutral-100, rgba(0, 0, 0, 0.8));
+    width: 24px;
+    border-radius: 5px;
+  }
+`;
+
+export { styles };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from './components/alert/UAlert.js';
 export * from './components/button/UButton.js';
+export * from './components/card/UCard.js';
+export * from './components/carousel/UCarousel.js';
 export * from './components/dialog/UDialog.js';
 export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';

package/dist/index.js

@@ -1,5 +1,7 @@
 import './components/alert/UAlert.js';
 import './components/button/UButton.js';
+import './components/card/UCard.js';
+import './components/carousel/UCarousel.js';
 import './components/dialog/UDialog.js';
 import './components/divider/UDivider.js';
 import './components/drawer/UDrawer.js';
@@ -23,6 +25,8 @@ export { Notifier } from './utilities/Notifier.js';
 export { Theme } from './utilities/Theme.js';
 export { UAlert } from './components/alert/UAlert.component.js';
 export { UButton } from './components/button/UButton.component.js';
+export { UCard } from './components/card/UCard.component.js';
+export { UCarousel } from './components/carousel/UCarousel.component.js';
 export { UDialog } from './components/dialog/UDialog.component.js';
 export { UDivider } from './components/divider/UDivider.component.js';
 export { UDrawer } from './components/drawer/UDrawer.component.js';

package/dist/react-components/UCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UCard } from '../components/card/UCard';
+
+export declare const UCard: React.ForwardRefExoticComponent<
+  Partial<UCard> & React.HTMLAttributes<UCard>
+>;
+
+export type UCardProps = React.ComponentProps<typeof UCard>;

package/dist/react-components/UCard.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UCard } from '../components/card/UCard';
+
+export const UCard = createComponent({
+  react: React,
+  tagName: 'u-card',
+  elementClass: UCard,
+  events: {}
+});

package/dist/react-components/UCarousel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UCarousel } from '../components/carousel/UCarousel';
+
+export declare const UCarousel: React.ForwardRefExoticComponent<
+  Partial<UCarousel> & React.HTMLAttributes<UCarousel>
+>;
+
+export type UCarouselProps = React.ComponentProps<typeof UCarousel>;

package/dist/react-components/UCarousel.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UCarousel } from '../components/carousel/UCarousel';
+
+export const UCarousel = createComponent({
+  react: React,
+  tagName: 'u-carousel',
+  elementClass: UCarousel,
+  events: {}
+});

package/dist/react-components/index.d.ts

@@ -7,6 +7,8 @@
 
 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';

package/dist/react-components/index.js

@@ -1,5 +1,7 @@
 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "keywords": [
     "iyulab",
     "components",
@@ -39,22 +39,33 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@lit/react": "^1.0.8",
+    "@floating-ui/dom": "^1.7.5",
     "lit": "^3.3.2",
-    "react": "^19.2.3",
+    "quill": "2.0.3",
     "reflect-metadata": "^0.2.2"
   },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@lit/react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.9",
-    "eslint": "^9.39.2",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^17.0.0",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "eslint": "^10.0.2",
+    "eslint-plugin-lit": "^2.2.1",
+    "globals": "^17.3.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.5"
+    "vite-plugin-static-copy": "^3.2.0"
   }
 }