@iyulab/components 0.1.11 → 0.2.0

package/dist/components/menu/UMenu.component.js

@@ -94,14 +94,16 @@ class UMenu extends FloatingElement {
             e.preventDefault();
             e.stopPropagation();
             await this.hide();
-            this.anchor?.focus();
+            if (this.target instanceof HTMLElement) {
+              this.target.focus();
+            }
           }
           break;
         case "ArrowRight":
           if (item.submenu) {
             e.preventDefault();
             e.stopPropagation();
-            await item.submenu.show();
+            await item.submenu.show(item);
             await item.submenu.focusAt(0);
           }
           break;
@@ -125,11 +127,11 @@ class UMenu extends FloatingElement {
         }
         await this.hide();
       } else if (this.type === "dropdown") {
-        const anchor = this.anchor;
-        if (!anchor) return;
+        const currentTarget = this.target;
+        if (!currentTarget || !(currentTarget instanceof HTMLElement)) return;
         const targets = e.composedPath().filter((v) => v instanceof HTMLElement);
         for (const target of targets) {
-          if (this.contains(target) || anchor.contains(target)) return;
+          if (this.contains(target) || currentTarget.contains(target)) return;
         }
         await this.hide();
       }
@@ -138,16 +140,18 @@ class UMenu extends FloatingElement {
     //#region 'dropdown' 이벤트 핸들러
     this.handleAnchorPointerDown = async (e) => {
       if (e.button !== 0) return;
-      if (this.visible)
+      const target = e.currentTarget;
+      if (this.visible && this.target === target)
         await this.hide();
       else
-        await this.show();
+        await this.show(target);
     };
     this.handleAnchorKeydown = async (e) => {
       if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
         e.preventDefault();
+        const target = e.currentTarget;
         if (this.visible) return;
-        await this.show();
+        await this.show(target);
       }
     };
     //#endregion
@@ -171,29 +175,29 @@ class UMenu extends FloatingElement {
     };
     //#endregion
     //#region 'submenu' 이벤트 핸들러
-    this.handleSubmenuAnchorPointerEnter = () => {
-      const anchor = this.anchor;
-      if (anchor?.disabled) return;
-      this.show();
+    this.handleSubmenuAnchorPointerEnter = (e) => {
+      const target = e.currentTarget;
+      if (target?.disabled) return;
+      this.show(target);
     };
     this.handleSubmenuAnchorPointerLeave = (e) => {
       const related = e.relatedTarget;
       if (related) {
-        const anchor = this.anchor;
-        if (anchor?.contains(related) || this.contains(related)) return;
+        const target = this.target;
+        if (target?.contains(related) || this.contains(related)) return;
       }
       this.hide();
     };
-    this.handleSubmenuAnchorFocusIn = () => {
-      const anchor = this.anchor;
-      if (anchor?.disabled) return;
-      this.show();
+    this.handleSubmenuAnchorFocusIn = (e) => {
+      const target = e.currentTarget;
+      if (target?.disabled) return;
+      this.show(target);
     };
     this.handleSubmenuAnchorFocusOut = (e) => {
       const related = e.relatedTarget;
       if (related) {
-        const anchor = this.anchor;
-        if (anchor?.contains(related) || this.contains(related)) return;
+        const target = this.target;
+        if (target?.contains(related) || this.contains(related)) return;
       }
       this.hide();
     };
@@ -216,13 +220,13 @@ class UMenu extends FloatingElement {
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-    if (changedProperties.has("anchor") || changedProperties.has("type")) {
+    if (changedProperties.has("anchors") || changedProperties.has("type")) {
       const oldType = changedProperties.get("type") || "default";
       const newType = this.type || "default";
-      const oldAnchor = changedProperties.get("anchor");
-      const newAnchor = this.anchor;
-      if (oldAnchor) this.unbind(oldType, oldAnchor);
-      if (newAnchor) this.bind(newType, newAnchor);
+      const oldAnchors = changedProperties.get("anchors");
+      const newAnchors = this.anchors;
+      if (oldAnchors) this.unbind(oldType, oldAnchors);
+      if (newAnchors) this.bind(newType, newAnchors);
     }
     if (changedProperties.has("mode")) {
       this.clearAll();
@@ -273,23 +277,29 @@ class UMenu extends FloatingElement {
     }
   }
   /** 앵커에 이벤트 바인딩 */
-  bind(type, target) {
+  bind(type, anchors) {
     if (type === "dropdown") {
       this.visible = false;
       this.placement ||= "bottom-start";
-      target.addEventListener("pointerdown", this.handleAnchorPointerDown);
-      target.addEventListener("keydown", this.handleAnchorKeydown);
+      for (const anchor of anchors) {
+        anchor.addEventListener("pointerdown", this.handleAnchorPointerDown);
+        anchor.addEventListener("keydown", this.handleAnchorKeydown);
+      }
     } else if (type === "contextmenu") {
       this.visible = false;
       this.placement ||= "bottom-start";
-      target.addEventListener("contextmenu", this.handleAnchorContextMenu);
+      for (const anchor of anchors) {
+        anchor.addEventListener("contextmenu", this.handleAnchorContextMenu);
+      }
     } else if (type === "submenu") {
       this.visible = false;
       this.placement ||= "right-start";
-      target.addEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
-      target.addEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
-      target.addEventListener("focusin", this.handleSubmenuAnchorFocusIn);
-      target.addEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+      for (const anchor of anchors) {
+        anchor.addEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+        anchor.addEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+        anchor.addEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+        anchor.addEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+      }
     } else {
       this.visible = true;
       return;
@@ -299,17 +309,19 @@ class UMenu extends FloatingElement {
     window.addEventListener("pointerdown", this.handleWindowPointerDown);
   }
   /** 앵커에서 이벤트 바인딩 해제 */
-  unbind(_, target) {
+  unbind(_, anchors) {
     window.removeEventListener("focusout", this.handleWindowFocusOut);
     window.removeEventListener("keydown", this.handleWindowKeydown);
     window.removeEventListener("pointerdown", this.handleWindowPointerDown);
-    target.removeEventListener("pointerdown", this.handleAnchorPointerDown);
-    target.removeEventListener("keydown", this.handleAnchorKeydown);
-    target.removeEventListener("contextmenu", this.handleAnchorContextMenu);
-    target.removeEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
-    target.removeEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
-    target.removeEventListener("focusin", this.handleSubmenuAnchorFocusIn);
-    target.removeEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+    for (const anchor of anchors) {
+      anchor.removeEventListener("pointerdown", this.handleAnchorPointerDown);
+      anchor.removeEventListener("keydown", this.handleAnchorKeydown);
+      anchor.removeEventListener("contextmenu", this.handleAnchorContextMenu);
+      anchor.removeEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+      anchor.removeEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+      anchor.removeEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+      anchor.removeEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+    }
   }
   //#endregion
 }

package/dist/components/menu-item/UMenuItem.component.d.ts

@@ -14,8 +14,8 @@ export declare class UMenuItem extends BaseElement {
     checked: boolean;
     /** 선택 여부(single mode) @default false */
     selected: boolean;
-    /** 값 */
-    value: string;
+    /** 메뉴 아이템 값 */
+    value?: string;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 기본 슬롯 변경 감지 */

package/dist/components/menu-item/UMenuItem.component.js

@@ -23,7 +23,6 @@ class UMenuItem extends BaseElement {
     this.loading = false;
     this.checked = false;
     this.selected = false;
-    this.value = "";
     /** 기본 슬롯 변경 감지 */
     this.handleSlotChange = (e) => {
       const slot = e.target;
@@ -38,7 +37,7 @@ class UMenuItem extends BaseElement {
       const menu = elements.find((el) => el instanceof UMenu);
       if (menu) {
         menu.type = "submenu";
-        menu.anchor = this;
+        menu.anchors = [this];
         this.submenu = menu;
       } else {
         this.submenu = null;

package/dist/components/split-panel/USplitPanel.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { queryAssignedElements, state, property } from 'lit/decorators.js';
-import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
+import { arrayAttrConverter } from '../../utilities/converters.js';
 import { BaseElement } from '../BaseElement.js';
 import { styles } from './USplitPanel.styles.js';
 
@@ -173,13 +173,13 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], USplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, attribute: "init-ratio", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "init-ratio", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "initRatio");
 __decorateClass([
-  property({ type: Array, attribute: "min-sizes", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "min-sizes", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "minSizes");
 __decorateClass([
-  property({ type: Array, attribute: "max-sizes", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "max-sizes", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "maxSizes");
 
 export { USplitPanel };

package/dist/components/tag/UTag.component.d.ts

@@ -0,0 +1,23 @@
+import { BaseElement } from '../BaseElement.js';
+export type TagVariant = "default" | "info" | "success" | "warning" | "danger";
+/**
+ * Tag 컴포넌트는 레이블, 카테고리, 상태 등을 표시하는데 사용됩니다.
+ * @slot - 태그 내부에 표시할 콘텐츠를 삽입합니다.
+ * @slot prefix - 태그의 접두사로 표시할 콘텐츠를 삽입합니다.
+ * @slot suffix - 태그의 접미사로 표시할 콘텐츠를 삽입합니다.
+ */
+export declare class UTag extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 태그의 스타일 변형을 설정합니다. */
+    variant: TagVariant;
+    /** 태그를 둥글게 표시합니다. */
+    rounded: boolean;
+    /** 태그를 제거 가능하게 설정합니다. */
+    removable: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleRemoveButtonClick;
+    private handleTransitionEnd;
+}

package/dist/components/tag/UTag.component.js

@@ -0,0 +1,72 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './UTag.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 UTag extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.rounded = false;
+    this.removable = false;
+    this.handleRemoveButtonClick = (e) => {
+      e.stopPropagation();
+      this.emit("u-remove");
+      requestAnimationFrame(() => {
+        this.style.transform = "scale(0.8)";
+        this.style.opacity = "0";
+      });
+    };
+    this.handleTransitionEnd = (e) => {
+      if (e.propertyName === "opacity" && this.style.opacity === "0") {
+        this.remove();
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("transitionend", this.handleTransitionEnd);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("transitionend", this.handleTransitionEnd);
+    super.disconnectedCallback();
+  }
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+      <button class="remove-btn" part="remove-btn"
+        ?hidden=${!this.removable}
+        @click=${this.handleRemoveButtonClick}>
+        &times;
+      </button>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], UTag.prototype, "variant");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTag.prototype, "rounded");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTag.prototype, "removable");
+
+export { UTag };

package/dist/components/tag/UTag.d.ts

@@ -0,0 +1,8 @@
+import { UTag } from './UTag.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tag': UTag;
+    }
+}
+export { UTag };
+export type { TagVariant } from './UTag.component.js';

package/dist/components/tag/UTag.js

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

package/dist/components/tag/UTag.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    padding: 0.25em 0.5em;
+    border-radius: 4px;
+    font-weight: 500;
+    line-height: 1.5em;
+    white-space: nowrap;
+    user-select: none;
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+  /* Style variants */
+  :host([variant="default"]) {
+    color: var(--u-neutral-800);
+    border: 1px solid var(--u-neutral-300);
+    background-color: var(--u-neutral-100);
+  }
+  :host([variant="info"]) {
+    color: var(--u-blue-800);
+    border: 1px solid var(--u-blue-300);
+    background-color: var(--u-blue-100);
+  }
+  :host([variant="success"]) {
+    color: var(--u-green-800);
+    border: 1px solid var(--u-green-300);
+    background-color: var(--u-green-100);
+  }
+  :host([variant="warning"]) {
+    color: var(--u-yellow-800);
+    border: 1px solid var(--u-yellow-300);
+    background-color: var(--u-yellow-100);
+  }
+  :host([variant="danger"]) {
+    color: var(--u-red-800);
+    border: 1px solid var(--u-red-300);
+    background-color: var(--u-red-100);
+  }
+  /* Rounded variant */
+  :host([rounded]) {
+    border-radius: 999px;
+  }
+
+  /* Slot styles */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+
+  /* Remove button */
+  .remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    width: 1em;
+    height: 1em;
+    line-height: 1.2em;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    color: currentColor;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+  }
+  .remove-btn:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .remove-btn:active {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export { styles };

package/dist/components/tooltip/UTooltip.component.d.ts

@@ -7,10 +7,18 @@ import { FloatingElement } from '../FloatingElement.js';
 export declare class UTooltip extends FloatingElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /**
+     * 툴팁 내부로 마우스를 이동해도 툴팁이 유지되는지 여부입니다.
+     * true일 경우 툴팁 위에 마우스를 올려놓을 수 있습니다.
+     *
+     * @default false
+     */
+    interactive: boolean;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** this 바인딩 이벤트 핸들러 */
     private _show;
+    /** this 바인딩 이벤트 핸들러 */
     private _hide;
     /** 바인딩 이벤트 핸들러 */
     private bind;

package/dist/components/tooltip/UTooltip.component.js

@@ -1,13 +1,37 @@
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { FloatingElement } from '../FloatingElement.js';
 import { styles } from './UTooltip.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 UTooltip extends FloatingElement {
   constructor() {
     super(...arguments);
+    this.interactive = false;
     /** this 바인딩 이벤트 핸들러 */
-    this._show = () => this.show();
-    this._hide = () => this.hide();
+    this._show = (event) => {
+      const target = event.currentTarget;
+      if (!target) return;
+      this.show(target);
+    };
+    /** this 바인딩 이벤트 핸들러 */
+    this._hide = (event) => {
+      if (this.interactive) {
+        const target = this.target;
+        const related = event.relatedTarget;
+        if (!target || !related) return;
+        if (this.contains(related) || target.contains(related)) return;
+      }
+      this.hide();
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -17,30 +41,48 @@ class UTooltip extends FloatingElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("anchor")) {
-      const oldAnchor = changedProperties.get("anchor");
-      const newAnchor = this.anchor;
-      if (oldAnchor) this.unbind(oldAnchor);
-      if (newAnchor) this.bind(newAnchor);
+    if (changedProperties.has("anchors")) {
+      const oldAnchors = changedProperties.get("anchors");
+      const newAnchors = this.anchors;
+      if (oldAnchors) this.unbind(oldAnchors);
+      if (newAnchors) this.bind(newAnchors);
+    }
+    if (changedProperties.has("distance")) {
+      if (this.distance > 0) {
+        this.style.setProperty("--interactive-area", `${this.distance}px`);
+      } else {
+        this.style.removeProperty("--interactive-area");
+      }
     }
   }
   render() {
     return html`<slot></slot>`;
   }
   /** 바인딩 이벤트 핸들러 */
-  bind(target) {
-    target.addEventListener("pointerenter", this._show);
-    target.addEventListener("pointerleave", this._hide);
-    target.addEventListener("focusin", this._show);
-    target.addEventListener("focusout", this._hide);
+  bind(anchors) {
+    for (const anchor of anchors) {
+      anchor.addEventListener("pointerenter", this._show);
+      anchor.addEventListener("pointerleave", this._hide);
+      anchor.addEventListener("focusin", this._show);
+      anchor.addEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
   /** 바인딩 해제 이벤트 핸들러 */
-  unbind(target) {
-    target.removeEventListener("pointerenter", this._show);
-    target.removeEventListener("pointerleave", this._hide);
-    target.removeEventListener("focusin", this._show);
-    target.removeEventListener("focusout", this._hide);
+  unbind(anchors) {
+    for (const anchor of anchors) {
+      anchor.removeEventListener("pointerenter", this._show);
+      anchor.removeEventListener("pointerleave", this._hide);
+      anchor.removeEventListener("focusin", this._show);
+      anchor.removeEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
 }
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTooltip.prototype, "interactive");
 
 export { UTooltip };

package/dist/components/tooltip/UTooltip.styles.js

@@ -1,6 +1,10 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --interactive-area: 0px;
+  }
+
   :host {
     padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
@@ -18,6 +22,17 @@ const styles = css`
     opacity: 0.8;
     transform: scale(1);
   }
+
+  /* 툴팁을 distance만큼 감싸는 보이지 않는 영역 */
+  :host([interactive])::before {
+    content: '';
+    position: absolute;
+    /* 툴팁을 distance만큼 모든 방향으로 확장 */
+    inset: calc(var(--interactive-area) * -1);
+    background: transparent;
+    pointer-events: auto;
+    z-index: -1;
+  }
 `;
 
 export { styles };

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';
 export * from './components/form/UForm.js';
 export * from './components/icon/UIcon.js';
-export * from './components/icon-button/UIconButton.js';
 export * from './components/input/UInput.js';
 export * from './components/menu/UMenu.js';
 export * from './components/menu-item/UMenuItem.js';
@@ -14,6 +13,7 @@ export * from './components/progress-ring/UProgressRing.js';
 export * from './components/skeleton/USkeleton.js';
 export * from './components/spinner/USpinner.js';
 export * from './components/split-panel/USplitPanel.js';
+export * from './components/tag/UTag.js';
 export * from './components/tooltip/UTooltip.js';
 export * from './components/tree/UTree.js';
 export * from './components/tree-item/UTreeItem.js';
@@ -24,5 +24,6 @@ export * from './events/UResizeEvent';
 export * from './events/USelectEvent';
 export * from './events/UShowEvent';
 export * from './utilities/BrowserStorage.js';
-export * from './utilities/notifier.js';
-export * from './utilities/theme.js';
+export * from './utilities/IconRegistry.js';
+export * from './utilities/Notifier.js';
+export * from './utilities/Theme.js';

package/dist/index.js

@@ -5,7 +5,6 @@ import './components/divider/UDivider.js';
 import './components/drawer/UDrawer.js';
 import './components/form/UForm.js';
 import './components/icon/UIcon.js';
-import './components/icon-button/UIconButton.js';
 import './components/input/UInput.js';
 import './components/menu/UMenu.js';
 import './components/menu-item/UMenuItem.js';
@@ -14,12 +13,14 @@ import './components/progress-ring/UProgressRing.js';
 import './components/skeleton/USkeleton.js';
 import './components/spinner/USpinner.js';
 import './components/split-panel/USplitPanel.js';
+import './components/tag/UTag.js';
 import './components/tooltip/UTooltip.js';
 import './components/tree/UTree.js';
 import './components/tree-item/UTreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
-export { notifier } from './utilities/notifier.js';
-export { Theme, theme } from './utilities/theme.js';
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl } from './utilities/IconRegistry.js';
+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 { UDialog } from './components/dialog/UDialog.component.js';
@@ -27,7 +28,6 @@ export { UDivider } from './components/divider/UDivider.component.js';
 export { UDrawer } from './components/drawer/UDrawer.component.js';
 export { UForm } from './components/form/UForm.component.js';
 export { UIcon } from './components/icon/UIcon.component.js';
-export { UIconButton } from './components/icon-button/UIconButton.component.js';
 export { UInput } from './components/input/UInput.component.js';
 export { UMenu } from './components/menu/UMenu.component.js';
 export { UMenuItem } from './components/menu-item/UMenuItem.component.js';
@@ -36,6 +36,7 @@ export { UProgressRing } from './components/progress-ring/UProgressRing.componen
 export { USkeleton } from './components/skeleton/USkeleton.component.js';
 export { USpinner } from './components/spinner/USpinner.component.js';
 export { USplitPanel } from './components/split-panel/USplitPanel.component.js';
+export { UTag } from './components/tag/UTag.component.js';
 export { UTooltip } from './components/tooltip/UTooltip.component.js';
 export { UTree } from './components/tree/UTree.component.js';
 export { UTreeItem } from './components/tree-item/UTreeItem.component.js';

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

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