@iyulab/components 1.1.1 → 1.2.1

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.1.1",
+  "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},
 });
 `;

package/skills/iyulab-components/references/components/button.md

@@ -14,6 +14,14 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 <u-button variant="ghost" loading>Loading</u-button>
 <u-button href="https://example.com" target="_blank">Link</u-button>
 
+<!-- Semantic color (independent of variant) -->
+<u-button variant="solid" color="red">Delete</u-button>
+<u-button variant="surface" color="green">Approve</u-button>
+
+<!-- Size -->
+<u-button size="sm">Small</u-button>
+<u-button size="lg">Large</u-button>
+
 <!-- With prefix/suffix icons -->
 <u-button variant="solid">
   <u-icon slot="prefix" lib="tabler" name="download"></u-icon>
@@ -37,6 +45,8 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `variant` | `'solid'\|'surface'\|'filled'\|'outlined'\|'ghost'\|'link'` | `'solid'` | ✓ | Visual style |
+| `color` | `'neutral'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Semantic color, independent of `variant`. `ghost` is unaffected (see notes below). |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | ✓ | Button size (12px/14px/16px font-size; padding, spinner, and icon slots scale proportionally). |
 | `rounded` | `boolean` | `false` | ✓ | Pill-shaped border radius |
 | `disabled` | `boolean` | `false` | ✓ | Disable the button |
 | `loading` | `boolean` | `false` | ✓ | Show loading spinner; disables interaction |
@@ -46,6 +56,12 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | `rel` | `string` | — | — | Link `rel` |
 | `download` | `string` | — | — | Download filename |
 
+### `color` notes
+
+- `solid`/`surface`/`filled`/`outlined`: background/border switch to the chosen color's scale.
+- `link`: text color switches, but only when `color` is set to something other than `"neutral"` — the default `link` look stays blue (backward compatible).
+- `ghost`: no visual effect — its hover/active backgrounds use generic surface tokens (`--u-bg-color-hover`/`--u-bg-color-active`), not the neutral color scale.
+
 ## CSS Parts
 
 | Part | Description |