@iyulab/components 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [1.2.1] - 2026-07-02
+
+### Fixed
+- `plugins/vite-plugin-react-wrapper.ts`: 생성된 `dist/react/*.js` 래퍼가 `import { X } from '...'`와 `export const X = ...`를 동일 스코프에 선언해 **모든** React 래퍼(및 barrel `@iyulab/components/react`)가 `SyntaxError: Identifier 'X' has already been declared`로 로드 자체가 실패하던 결함 수정. `.d.ts` 템플릿은 이미 `as ${className}Element` 별칭을 썼으나 `.js` 템플릿만 누락되어 있었음 — `.js` 생성기에 동일한 별칭을 적용해 근본 수정. 이 서브패스를 문서화·검증하는 과정에서 발견(README 예시를 실제로 import해보다가 SyntaxError 재현).
+
 ## [1.2.0] - 2026-07-02
 
 ### Added

package/README.md

@@ -21,6 +21,23 @@ import '@iyulab/components/u-button';
 import '@iyulab/components/u-input';
 ```
 
+## React
+
+React 프로젝트에서는 `@iyulab/components/react` 서브패스가 모든 컴포넌트를 `forwardRef` 래퍼로 제공합니다. Web Component를 직접 다루지 않고도 JSX props(`color`, `size`, 이벤트 `onXxx` 등)로 사용할 수 있습니다.
+
+```tsx
+import { UButton, UInput } from '@iyulab/components/react';
+
+function Form() {
+  return (
+    <>
+      <UInput label="Name" />
+      <UButton variant="solid" color="primary" size="sm">Submit</UButton>
+    </>
+  );
+}
+```
+
 ## Skills Usage
 
 LLM 코딩 에이전트(Claude Code, GitHub Copilot, Cursor 등)를 위한 스킬을 제공합니다.

package/dist/react/UAlert.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UAlert } from '../components/alert/UAlert.js';
+import { UAlert as UAlertElement } from '../components/alert/UAlert.js';
 
 export const UAlert = createComponent({
   react: React,
   tagName: 'u-alert',
-  elementClass: UAlert,
+  elementClass: UAlertElement,
   events: {
     onShow: 'show',
     onHide: 'hide',

package/dist/react/UAvatar.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UAvatar } from '../components/avatar/UAvatar.js';
+import { UAvatar as UAvatarElement } from '../components/avatar/UAvatar.js';
 
 export const UAvatar = createComponent({
   react: React,
   tagName: 'u-avatar',
-  elementClass: UAvatar,
+  elementClass: UAvatarElement,
   events: {},
 });

package/dist/react/UBadge.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UBadge } from '../components/badge/UBadge.js';
+import { UBadge as UBadgeElement } from '../components/badge/UBadge.js';
 
 export const UBadge = createComponent({
   react: React,
   tagName: 'u-badge',
-  elementClass: UBadge,
+  elementClass: UBadgeElement,
   events: {},
 });

package/dist/react/UBreadcrumb.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UBreadcrumb } from '../components/breadcrumb/UBreadcrumb.js';
+import { UBreadcrumb as UBreadcrumbElement } from '../components/breadcrumb/UBreadcrumb.js';
 
 export const UBreadcrumb = createComponent({
   react: React,
   tagName: 'u-breadcrumb',
-  elementClass: UBreadcrumb,
+  elementClass: UBreadcrumbElement,
   events: {},
 });

package/dist/react/UBreadcrumbItem.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UBreadcrumbItem } from '../components/breadcrumb-item/UBreadcrumbItem.js';
+import { UBreadcrumbItem as UBreadcrumbItemElement } from '../components/breadcrumb-item/UBreadcrumbItem.js';
 
 export const UBreadcrumbItem = createComponent({
   react: React,
   tagName: 'u-breadcrumb-item',
-  elementClass: UBreadcrumbItem,
+  elementClass: UBreadcrumbItemElement,
   events: {
     onNavigate: 'navigate',
   },

package/dist/react/UButton.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UButton } from '../components/button/UButton.js';
+import { UButton as UButtonElement } from '../components/button/UButton.js';
 
 export const UButton = createComponent({
   react: React,
   tagName: 'u-button',
-  elementClass: UButton,
+  elementClass: UButtonElement,
   events: {},
 });

package/dist/react/UButtonGroup.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UButtonGroup } from '../components/button-group/UButtonGroup.js';
+import { UButtonGroup as UButtonGroupElement } from '../components/button-group/UButtonGroup.js';
 
 export const UButtonGroup = createComponent({
   react: React,
   tagName: 'u-button-group',
-  elementClass: UButtonGroup,
+  elementClass: UButtonGroupElement,
   events: {},
 });

package/dist/react/UCard.js

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

package/dist/react/UCarousel.js

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

package/dist/react/UCheckbox.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UCheckbox } from '../components/checkbox/UCheckbox.js';
+import { UCheckbox as UCheckboxElement } from '../components/checkbox/UCheckbox.js';
 
 export const UCheckbox = createComponent({
   react: React,
   tagName: 'u-checkbox',
-  elementClass: UCheckbox,
+  elementClass: UCheckboxElement,
   events: {},
 });

package/dist/react/UChip.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UChip } from '../components/chip/UChip.js';
+import { UChip as UChipElement } from '../components/chip/UChip.js';
 
 export const UChip = createComponent({
   react: React,
   tagName: 'u-chip',
-  elementClass: UChip,
+  elementClass: UChipElement,
   events: {
     onPick: 'pick',
     onRemove: 'remove',

package/dist/react/UDialog.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UDialog } from '../components/dialog/UDialog.js';
+import { UDialog as UDialogElement } from '../components/dialog/UDialog.js';
 
 export const UDialog = createComponent({
   react: React,
   tagName: 'u-dialog',
-  elementClass: UDialog,
+  elementClass: UDialogElement,
   events: {},
 });

package/dist/react/UDivider.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UDivider } from '../components/divider/UDivider.js';
+import { UDivider as UDividerElement } from '../components/divider/UDivider.js';
 
 export const UDivider = createComponent({
   react: React,
   tagName: 'u-divider',
-  elementClass: UDivider,
+  elementClass: UDividerElement,
   events: {},
 });

package/dist/react/UDrawer.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UDrawer } from '../components/drawer/UDrawer.js';
+import { UDrawer as UDrawerElement } from '../components/drawer/UDrawer.js';
 
 export const UDrawer = createComponent({
   react: React,
   tagName: 'u-drawer',
-  elementClass: UDrawer,
+  elementClass: UDrawerElement,
   events: {},
 });

package/dist/react/UField.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UField } from '../components/field/UField.js';
+import { UField as UFieldElement } from '../components/field/UField.js';
 
 export const UField = createComponent({
   react: React,
   tagName: 'u-field',
-  elementClass: UField,
+  elementClass: UFieldElement,
   events: {},
 });

package/dist/react/UForm.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UForm } from '../components/form/UForm.js';
+import { UForm as UFormElement } from '../components/form/UForm.js';
 
 export const UForm = createComponent({
   react: React,
   tagName: 'u-form',
-  elementClass: UForm,
+  elementClass: UFormElement,
   events: {
     onChange: 'change',
   },

package/dist/react/UIcon.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UIcon } from '../components/icon/UIcon.js';
+import { UIcon as UIconElement } from '../components/icon/UIcon.js';
 
 export const UIcon = createComponent({
   react: React,
   tagName: 'u-icon',
-  elementClass: UIcon,
+  elementClass: UIconElement,
   events: {},
 });

package/dist/react/UIconButton.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UIconButton } from '../components/icon-button/UIconButton.js';
+import { UIconButton as UIconButtonElement } from '../components/icon-button/UIconButton.js';
 
 export const UIconButton = createComponent({
   react: React,
   tagName: 'u-icon-button',
-  elementClass: UIconButton,
+  elementClass: UIconButtonElement,
   events: {},
 });

package/dist/react/UInput.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UInput } from '../components/input/UInput.js';
+import { UInput as UInputElement } from '../components/input/UInput.js';
 
 export const UInput = createComponent({
   react: React,
   tagName: 'u-input',
-  elementClass: UInput,
+  elementClass: UInputElement,
   events: {
     onInput: 'input',
     onChange: 'change',

package/dist/react/UMenu.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UMenu } from '../components/menu/UMenu.js';
+import { UMenu as UMenuElement } from '../components/menu/UMenu.js';
 
 export const UMenu = createComponent({
   react: React,
   tagName: 'u-menu',
-  elementClass: UMenu,
+  elementClass: UMenuElement,
   events: {
     onChange: 'change',
   },

package/dist/react/UMenuItem.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UMenuItem } from '../components/menu-item/UMenuItem.js';
+import { UMenuItem as UMenuItemElement } from '../components/menu-item/UMenuItem.js';
 
 export const UMenuItem = createComponent({
   react: React,
   tagName: 'u-menu-item',
-  elementClass: UMenuItem,
+  elementClass: UMenuItemElement,
   events: {
     onPick: 'pick',
   },

package/dist/react/UOption.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UOption } from '../components/option/UOption.js';
+import { UOption as UOptionElement } from '../components/option/UOption.js';
 
 export const UOption = createComponent({
   react: React,
   tagName: 'u-option',
-  elementClass: UOption,
+  elementClass: UOptionElement,
   events: {},
 });

package/dist/react/UPanel.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UPanel } from '../components/panel/UPanel.js';
+import { UPanel as UPanelElement } from '../components/panel/UPanel.js';
 
 export const UPanel = createComponent({
   react: React,
   tagName: 'u-panel',
-  elementClass: UPanel,
+  elementClass: UPanelElement,
   events: {},
 });

package/dist/react/UPopover.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UPopover } from '../components/popover/UPopover.js';
+import { UPopover as UPopoverElement } from '../components/popover/UPopover.js';
 
 export const UPopover = createComponent({
   react: React,
   tagName: 'u-popover',
-  elementClass: UPopover,
+  elementClass: UPopoverElement,
   events: {
     onShow: 'show',
     onHide: 'hide',

package/dist/react/UProgressBar.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UProgressBar } from '../components/progress-bar/UProgressBar.js';
+import { UProgressBar as UProgressBarElement } from '../components/progress-bar/UProgressBar.js';
 
 export const UProgressBar = createComponent({
   react: React,
   tagName: 'u-progress-bar',
-  elementClass: UProgressBar,
+  elementClass: UProgressBarElement,
   events: {},
 });

package/dist/react/UProgressRing.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UProgressRing } from '../components/progress-ring/UProgressRing.js';
+import { UProgressRing as UProgressRingElement } from '../components/progress-ring/UProgressRing.js';
 
 export const UProgressRing = createComponent({
   react: React,
   tagName: 'u-progress-ring',
-  elementClass: UProgressRing,
+  elementClass: UProgressRingElement,
   events: {},
 });

package/dist/react/URadio.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { URadio } from '../components/radio/URadio.js';
+import { URadio as URadioElement } from '../components/radio/URadio.js';
 
 export const URadio = createComponent({
   react: React,
   tagName: 'u-radio',
-  elementClass: URadio,
+  elementClass: URadioElement,
   events: {
     onChange: 'change',
   },

package/dist/react/URating.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { URating } from '../components/rating/URating.js';
+import { URating as URatingElement } from '../components/rating/URating.js';
 
 export const URating = createComponent({
   react: React,
   tagName: 'u-rating',
-  elementClass: URating,
+  elementClass: URatingElement,
   events: {
     onChange: 'change',
   },

package/dist/react/USelect.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USelect } from '../components/select/USelect.js';
+import { USelect as USelectElement } from '../components/select/USelect.js';
 
 export const USelect = createComponent({
   react: React,
   tagName: 'u-select',
-  elementClass: USelect,
+  elementClass: USelectElement,
   events: {
     onChange: 'change',
   },

package/dist/react/USkeleton.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USkeleton } from '../components/skeleton/USkeleton.js';
+import { USkeleton as USkeletonElement } from '../components/skeleton/USkeleton.js';
 
 export const USkeleton = createComponent({
   react: React,
   tagName: 'u-skeleton',
-  elementClass: USkeleton,
+  elementClass: USkeletonElement,
   events: {},
 });

package/dist/react/USlider.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USlider } from '../components/slider/USlider.js';
+import { USlider as USliderElement } from '../components/slider/USlider.js';
 
 export const USlider = createComponent({
   react: React,
   tagName: 'u-slider',
-  elementClass: USlider,
+  elementClass: USliderElement,
   events: {
     onChange: 'change',
   },

package/dist/react/USpinner.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USpinner } from '../components/spinner/USpinner.js';
+import { USpinner as USpinnerElement } from '../components/spinner/USpinner.js';
 
 export const USpinner = createComponent({
   react: React,
   tagName: 'u-spinner',
-  elementClass: USpinner,
+  elementClass: USpinnerElement,
   events: {},
 });

package/dist/react/USplitPanel.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USplitPanel } from '../components/split-panel/USplitPanel.js';
+import { USplitPanel as USplitPanelElement } from '../components/split-panel/USplitPanel.js';
 
 export const USplitPanel = createComponent({
   react: React,
   tagName: 'u-split-panel',
-  elementClass: USplitPanel,
+  elementClass: USplitPanelElement,
   events: {
     onShiftStart: 'shift-start',
     onShift: 'shift',

package/dist/react/USwitch.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USwitch } from '../components/switch/USwitch.js';
+import { USwitch as USwitchElement } from '../components/switch/USwitch.js';
 
 export const USwitch = createComponent({
   react: React,
   tagName: 'u-switch',
-  elementClass: USwitch,
+  elementClass: USwitchElement,
   events: {
     onChange: 'change',
   },

package/dist/react/UTab.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTab } from '../components/tab/UTab.js';
+import { UTab as UTabElement } from '../components/tab/UTab.js';
 
 export const UTab = createComponent({
   react: React,
   tagName: 'u-tab',
-  elementClass: UTab,
+  elementClass: UTabElement,
   events: {
     onRemove: 'remove',
   },

package/dist/react/UTabPanel.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTabPanel } from '../components/tab-panel/UTabPanel.js';
+import { UTabPanel as UTabPanelElement } from '../components/tab-panel/UTabPanel.js';
 
 export const UTabPanel = createComponent({
   react: React,
   tagName: 'u-tab-panel',
-  elementClass: UTabPanel,
+  elementClass: UTabPanelElement,
   events: {},
 });

package/dist/react/UTag.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTag } from '../components/tag/UTag.js';
+import { UTag as UTagElement } from '../components/tag/UTag.js';
 
 export const UTag = createComponent({
   react: React,
   tagName: 'u-tag',
-  elementClass: UTag,
+  elementClass: UTagElement,
   events: {},
 });

package/dist/react/UTextarea.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTextarea } from '../components/textarea/UTextarea.js';
+import { UTextarea as UTextareaElement } from '../components/textarea/UTextarea.js';
 
 export const UTextarea = createComponent({
   react: React,
   tagName: 'u-textarea',
-  elementClass: UTextarea,
+  elementClass: UTextareaElement,
   events: {
     onInput: 'input',
     onChange: 'change',

package/dist/react/UTooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTooltip } from '../components/tooltip/UTooltip.js';
+import { UTooltip as UTooltipElement } from '../components/tooltip/UTooltip.js';
 
 export const UTooltip = createComponent({
   react: React,
   tagName: 'u-tooltip',
-  elementClass: UTooltip,
+  elementClass: UTooltipElement,
   events: {
     onShow: 'show',
     onHide: 'hide',

package/dist/react/UTree.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTree } from '../components/tree/UTree.js';
+import { UTree as UTreeElement } from '../components/tree/UTree.js';
 
 export const UTree = createComponent({
   react: React,
   tagName: 'u-tree',
-  elementClass: UTree,
+  elementClass: UTreeElement,
   events: {
     onChange: 'change',
   },

package/dist/react/UTreeItem.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTreeItem } from '../components/tree-item/UTreeItem.js';
+import { UTreeItem as UTreeItemElement } from '../components/tree-item/UTreeItem.js';
 
 export const UTreeItem = createComponent({
   react: React,
   tagName: 'u-tree-item',
-  elementClass: UTreeItem,
+  elementClass: UTreeItemElement,
   events: {
     onExpand: 'expand',
     onCollapse: 'collapse',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "keywords": [
     "iyulab",
     "components",

package/plugins/vite-plugin-react-wrapper.js

@@ -137,12 +137,12 @@ function writeWrapper(comp, outDir, buildOutDir) {
     // .js
     const js = `import React from 'react';
 import { createComponent } from '@lit/react';
-import { ${className} } from '${importPath}';
+import { ${className} as ${className}Element } from '${importPath}';
 
 export const ${className} = createComponent({
   react: React,
   tagName: '${tagName}',
-  elementClass: ${className},
+  elementClass: ${className}Element,
   events: ${eventsObj},
 });
 `;