@iyulab/components 1.9.0 → 1.12.0

package/dist/styles/light.css

@@ -132,34 +132,91 @@
   --u-pink-900:      #880E4F;
   --u-pink-1000:     #520830;
 
+  /* ==========================================================================
+     Role Colors — 의미 역할 층
+     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.
+     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.
+
+     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
+     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
+     단인지 같은 모순이 생긴다.
+     ========================================================================== */
+
+  /* primary — 브랜드 · 강조 · 포커스 · 링크 */
+  --u-primary-color-weakest:     var(--u-blue-200);
+  --u-primary-color-weaker:      var(--u-blue-300);
+  --u-primary-color-weak:        var(--u-blue-500);
+  --u-primary-color:             var(--u-blue-600);
+  --u-primary-color-strong:      var(--u-blue-700);
+
+  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */
+  --u-info-color-weakest:        var(--u-blue-200);
+  --u-info-color-weaker:         var(--u-blue-300);
+  --u-info-color-weak:           var(--u-blue-500);
+  --u-info-color:                var(--u-blue-600);
+  --u-info-color-strong:         var(--u-blue-700);
+
+  /* success — 성공 · 완료 */
+  --u-success-color-weakest:     var(--u-green-200);
+  --u-success-color-weaker:      var(--u-green-300);
+  --u-success-color-weak:        var(--u-green-500);
+  --u-success-color:             var(--u-green-600);
+  --u-success-color-strong:      var(--u-green-700);
+
+  /* warning — 주의 */
+  --u-warning-color-weakest:     var(--u-yellow-200);
+  --u-warning-color-weaker:      var(--u-yellow-300);
+  --u-warning-color-weak:        var(--u-yellow-500);
+  --u-warning-color:             var(--u-yellow-600);
+  --u-warning-color-strong:      var(--u-yellow-700);
+
+  /* danger — 오류 · 위험 · 유효성 실패 */
+  --u-danger-color-weakest:      var(--u-red-200);
+  --u-danger-color-weaker:       var(--u-red-300);
+  --u-danger-color-weak:         var(--u-red-500);
+  --u-danger-color:              var(--u-red-600);
+  --u-danger-color-strong:       var(--u-red-700);
+  /* ==========================================================================
+     Radius Scale — 모서리 반경
+     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
+     ========================================================================== */
+  --u-radius-none:   0;
+  --u-radius-sm:     3px;
+  --u-radius-md:     4px;
+  --u-radius-lg:     6px;
+  --u-radius-xl:     8px;
+  --u-radius-pill:   9999px;
+  --u-radius-circle: 50%;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-0);
-  --u-txt-color-hover:       var(--u-blue-600);
-  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-hover:       var(--u-primary-color);
+  --u-txt-color-active:      var(--u-primary-color);
   --u-txt-color-disabled:    var(--u-neutral-400);
   --u-txt-color-weak:        var(--u-neutral-500);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
-  --u-link-txt-color:        var(--u-blue-700);
+  --u-link-txt-color:        var(--u-primary-color-strong);
   --u-tooltip-txt-color:     var(--u-neutral-0);
 
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-700);
   --u-icon-color-inverse:    var(--u-neutral-0);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-hover:      var(--u-primary-color);
+  --u-icon-color-active:     var(--u-primary-color);
   --u-icon-color-disabled:   var(--u-neutral-400);
 
   /* Border Colors */
   --u-border-color:          var(--u-neutral-300);
   --u-border-color-weak:     var(--u-neutral-200);
   --u-border-color-strong:   var(--u-neutral-400);
+  --u-border-color-hover:    var(--u-neutral-400);
 
   --u-input-border-color:         var(--u-neutral-300);
   --u-input-border-color-hover:   var(--u-neutral-400);
-  --u-input-border-color-focus:   var(--u-blue-600);
-  --u-input-border-color-invalid: var(--u-red-600);
+  --u-input-border-color-focus:   var(--u-primary-color);
+  --u-input-border-color-invalid: var(--u-danger-color);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-0);

package/dist/styles/tokens.css

@@ -0,0 +1,17 @@
+/*
+ * 디자인 토큰 한 장 — 라이트 + 다크.
+ *
+ *   import '@iyulab/components/styles/tokens.css';
+ *
+ * `Theme.init()` 을 부르지 않는 소비자를 위한 **정적 진입점**이다. 토큰이 없으면 컴포넌트
+ * 시트의 `var(--u-…)` 가 전부 무효가 되어 테두리·배경이 에러 없이 사라진다.
+ *
+ * 다크는 `:root[theme="dark"]` 로 스코프돼 있어 두 시트가 안전하게 공존한다 —
+ * `<html theme="dark">` 일 때만 활성화된다. 테마 전환/저장/시스템 감지가 필요하면
+ * `Theme.init()` 을 쓰면 되고, 그 경우 이 파일은 필요 없다(중복 정의는 무해하다).
+ *
+ * ⚠ 이 파일은 `Theme.init()` 이 인라인하는 번들에서 제외된다(Theme.ts 의 glob 참조) —
+ *   인라인된 `<style>` 안에서는 아래 상대 `@import` 가 문서 기준으로 해석돼 깨진다.
+ */
+@import './light.css';
+@import './dark.css';

package/dist/utilities/Theme.js

@@ -5,6 +5,10 @@ import light_css_default from "../_virtual/_glob-assets_raw/light.css.637cb2f8.j
 /**
 * 스타일 시트 번들 로드, 내부 자산에서 CSS를 인라인으로 가져옵니다.
 * 빌드 시점에 정적 파일을 포함시키기 위해 vite의 `import.meta.glob`을 사용합니다.
+*
+* ⚠ 대상을 `{light,dark}` 로 **명시**한다. `*.css` 로 두면 정적 진입점용 `tokens.css`
+* (light/dark 를 `@import` 하는 한 장)까지 인라인돼, `<style>` 안의 상대 `@import` 가
+* 문서 기준으로 해석되면서 깨진다.
 */
 var internalStyleBundle = Object.entries(/* #__PURE__ */ Object.assign({
 	"../assets/styles/dark.css": dark_css_default,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.9.0",
+  "version": "1.12.0",
   "keywords": [
     "iyulab",
     "components",
@@ -44,9 +44,12 @@
     "test:browser": "vitest run --project=browser",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
-    "build:plugins": "tsc -p plugins/tsconfig.json",
-    "build": "eslint && vite build && npm run build:plugins && npm run test:react-types",
-    "test:react-types": "tsc -p tsconfig.react-smoke.json"
+    "build": "eslint && npm run typecheck:plugins && vite build && npm run test:react-types",
+    "test:react-types": "tsc -p tsconfig.react-smoke.json",
+    "typecheck:plugins": "tsc -p plugins/tsconfig.json",
+    "docs:cssprops": "node scripts/cssprops-doc.mjs --write",
+    "docs:react-events": "node scripts/react-events-doc.mjs --write",
+    "docs:tokens": "node scripts/design-tokens-doc.mjs --write"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",

package/plugins/vite-plugin-glob-resolve.d.ts

@@ -1,12 +0,0 @@
-import type { Plugin } from 'vite';
-/**
- * Rolldown의 preserveModules 모드에서 import.meta.glob의 query 옵션 사용 시
- * 빈 export가 생성되는 문제를 해결하는 플러그인.
- *
- * - `?raw`: 파일 내용을 문자열로 반환
- * - `?inline`: 파일 내용을 문자열로 반환
- * - `?url`: 파일을 asset으로 emit하고 URL을 반환
- *
- * 가상 모듈(\0 prefix)로 변환하여 파일명에 `?`가 포함되는 것을 방지합니다.
- */
-export default function globResolve(): Plugin;

package/plugins/vite-plugin-glob-resolve.js

@@ -1,66 +0,0 @@
-import { readFileSync } from 'fs';
-import { resolve, dirname, basename } from 'path';
-import { createHash } from 'crypto';
-const VIRTUAL_PREFIX = '\0glob-assets';
-const SUPPORTED_QUERIES = ['?raw', '?inline', '?url'];
-function shortHash(input) {
-    return createHash('md5').update(input).digest('hex').slice(0, 8);
-}
-/**
- * Rolldown의 preserveModules 모드에서 import.meta.glob의 query 옵션 사용 시
- * 빈 export가 생성되는 문제를 해결하는 플러그인.
- *
- * - `?raw`: 파일 내용을 문자열로 반환
- * - `?inline`: 파일 내용을 문자열로 반환
- * - `?url`: 파일을 asset으로 emit하고 URL을 반환
- *
- * 가상 모듈(\0 prefix)로 변환하여 파일명에 `?`가 포함되는 것을 방지합니다.
- */
-export default function globResolve() {
-    const idToAbsPath = new Map();
-    return {
-        name: 'vite:glob-resolve',
-        enforce: 'pre',
-        resolveId(source, importer) {
-            for (const query of SUPPORTED_QUERIES) {
-                if (source.endsWith(query)) {
-                    const rawPath = source.slice(0, -query.length);
-                    const absPath = importer
-                        ? resolve(dirname(importer), rawPath)
-                        : rawPath;
-                    const name = basename(absPath);
-                    const hash = shortHash(absPath);
-                    const queryName = query.slice(1);
-                    const virtualId = `${VIRTUAL_PREFIX}_${queryName}/${name}.${hash}`;
-                    idToAbsPath.set(virtualId, absPath);
-                    return virtualId;
-                }
-            }
-            return null;
-        },
-        load(id) {
-            if (!id.startsWith(VIRTUAL_PREFIX))
-                return null;
-            const absPath = idToAbsPath.get(id);
-            if (!absPath)
-                return null;
-            // virtualId에서 queryName 추출: "\0glob-assets_{queryName}/..."
-            const queryName = id.slice(VIRTUAL_PREFIX.length + 1).split('/')[0];
-            if (queryName === 'raw' || queryName === 'inline') {
-                const content = readFileSync(absPath, 'utf-8');
-                return `export default ${JSON.stringify(content)};`;
-            }
-            if (queryName === 'url') {
-                const source = readFileSync(absPath);
-                const fileName = basename(absPath);
-                const ref = this.emitFile({
-                    type: 'asset',
-                    name: fileName,
-                    source,
-                });
-                return `export default import.meta.ROLLUP_FILE_URL_${ref};`;
-            }
-            return null;
-        }
-    };
-}

package/plugins/vite-plugin-react-wrapper.d.ts

@@ -1,14 +0,0 @@
-import type { Plugin } from 'vite';
-interface PluginOptions {
-    /** 컴포넌트 소스 디렉토리 경로 (기본값: 'src/components') */
-    input?: string;
-    /** React 래퍼 출력 폴더 - 빌드 outDir 기준 상대 경로 (기본값: 'react') */
-    output?: string;
-    /** 래퍼 생성에서 제외할 glob 패턴 목록 (cwd: 프로젝트 루트) */
-    exclude?: string[];
-}
-/**
- * Lit Element 컴포넌트를 React 래퍼로 자동 생성하는 Vite 플러그인
- */
-export default function reactWrapperPlugin(options: PluginOptions): Plugin;
-export {};

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

@@ -1,235 +0,0 @@
-import { resolve, join, relative, dirname, basename } from 'path';
-import { readFileSync, writeFileSync, mkdirSync } from 'fs';
-import { gzipSync } from 'zlib';
-import { globSync } from 'glob';
-/**
- * Lit Element 컴포넌트를 React 래퍼로 자동 생성하는 Vite 플러그인
- */
-export default function reactWrapperPlugin(options) {
-    let rootDir;
-    let buildOutDir;
-    let outDir;
-    return {
-        name: 'vite-plugin-react-wrapper',
-        configResolved(config) {
-            rootDir = config.root;
-            buildOutDir = resolve(rootDir, config.build.outDir);
-            outDir = resolve(buildOutDir, options.output || 'react');
-        },
-        closeBundle() {
-            const log = (msg) => console.log(`\x1b[36m[react-wrapper]\x1b[0m ${msg}`);
-            log('Generating React wrappers...');
-            // 컴포넌트 수집
-            const inputPattern = (options.input || 'src/components') + '/**/*.ts';
-            let files = globSync(inputPattern, { cwd: rootDir, absolute: true });
-            if (options.exclude?.length) {
-                const excluded = new Set(options.exclude.flatMap(p => globSync(p, { cwd: rootDir, absolute: true })));
-                files = files.filter((f) => !excluded.has(f));
-            }
-            const components = files.flatMap((f) => parseComponent(f));
-            if (components.length === 0) {
-                log('No components found.');
-                return;
-            }
-            // 출력 디렉토리 생성
-            mkdirSync(outDir, { recursive: true });
-            // 래퍼 생성
-            const generated = [];
-            for (const comp of components) {
-                generated.push(...writeWrapper(comp, outDir, buildOutDir));
-            }
-            generated.push(...writeIndex(components, outDir, buildOutDir));
-            // 결과 출력
-            generated.sort((a, b) => a.size - b.size);
-            for (const f of generated) {
-                const kb = (f.size / 1024).toFixed(2);
-                const gzKb = (f.gzipSize / 1024).toFixed(2);
-                const pad = ' '.repeat(Math.max(0, 50 - f.path.length));
-                console.log(`${f.path}${pad}${kb.padStart(6)} kB │ gzip: ${gzKb.padStart(6)} kB`);
-            }
-            log(`Generated ${components.length} React wrappers.`);
-        }
-    };
-}
-// --- 컴포넌트 파싱 ---
-function parseComponent(filePath) {
-    const content = readFileSync(filePath, 'utf-8');
-    // @customElement('tag-name') 데코레이터 확인
-    const tagMatch = content.match(/@customElement\s*\(\s*['"]([^'"]+)['"]\s*\)/);
-    if (!tagMatch)
-        return [];
-    // export class ClassName 추출
-    const classMatch = content.match(/export\s+class\s+(\w+)/);
-    if (!classMatch)
-        return [];
-    const events = collectEvents(content);
-    // 이벤트를 발생시키지만(relay/dispatchEvent) 정적으로 이름을 도출할 수 없는 컴포넌트가
-    // @event 태그도 없으면 events 맵이 빈 채로 생성되어 React 소비자가 이벤트를 구독할 수 없다.
-    // (this.fire<T>('name')은 이름이 문자열 리터럴로 잡히므로 이 경고 대상이 아님)
-    if (events.length === 0 && /this\.(relay|dispatchEvent)\s*\(/.test(content)) {
-        console.warn(`\x1b[33m[react-wrapper]\x1b[0m ${classMatch[1]} (${tagMatch[1]}): ` +
-            `이벤트를 발생시키지만(relay/dispatchEvent) @event 태그가 없어 React 래퍼에 이벤트 prop이 노출되지 않습니다. ` +
-            `클래스 JSDoc에 '@event <name>'을 추가하세요.`);
-    }
-    return [{
-            className: classMatch[1],
-            tagName: tagMatch[1],
-            filePath,
-            events,
-        }];
-}
-function collectEvents(content) {
-    // import 구문에서 타입명 → 소스 경로 매핑 수집
-    // 예: import { ShowEventDetail } from '../../events/ShowEvent.js';
-    const typeImportMap = new Map();
-    for (const m of content.matchAll(/import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g)) {
-        const importPath = m[2];
-        for (const name of m[1].split(',')) {
-            const typeName = name.replace(/type\s+/, '').trim();
-            if (typeName)
-                typeImportMap.set(typeName, importPath);
-        }
-    }
-    const eventMap = new Map();
-    // JSDoc @event 패턴: @event eventName
-    for (const m of content.matchAll(/@event\s+([\w-]+)/g)) {
-        if (!eventMap.has(m[1]))
-            eventMap.set(m[1], { detailType: 'unknown', importPath: '' });
-    }
-    // this.fire<DetailType>('eventName') 패턴 - 제네릭 타입 추출
-    for (const m of content.matchAll(/this\.fire\s*(?:<([^>]+)>)?\s*\(\s*['"]([\w-]+)['"]/g)) {
-        const detailType = m[1] || 'unknown';
-        const importPath = typeImportMap.get(detailType) || '';
-        eventMap.set(m[2], { detailType, importPath });
-    }
-    return Array.from(eventMap, ([name, { detailType, importPath }]) => ({
-        name,
-        reactName: toCamelEvent(name),
-        detailType,
-        importPath,
-    }));
-}
-/** kebab-case 이벤트명을 onCamelCase로 변환 (예: shift-start → onShiftStart) */
-function toCamelEvent(name) {
-    return 'on' + name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
-}
-function writeFile(filePath, content, buildOutDir) {
-    writeFileSync(filePath, content, 'utf-8');
-    return {
-        path: relative(buildOutDir, filePath).replace(/\\/g, '/'),
-        size: Buffer.byteLength(content, 'utf-8'),
-        gzipSize: gzipSync(content).length,
-    };
-}
-function computeImportPath(from, to) {
-    let rel = relative(dirname(from), to).replace(/\\/g, '/').replace(/\.ts$/, '');
-    if (!rel.startsWith('.'))
-        rel = './' + rel;
-    return rel;
-}
-function writeWrapper(comp, outDir, buildOutDir) {
-    const { className, tagName, events } = comp;
-    const jsPath = join(outDir, `${className}.js`);
-    const dtsPath = join(outDir, `${className}.d.ts`);
-    // 소스 파일의 빌드 출력 경로 추정 (src/ → 빌드 outDir 매핑)
-    const srcIndex = comp.filePath.replace(/\\/g, '/').indexOf('/src/');
-    const relFromSrc = srcIndex >= 0
-        ? comp.filePath.substring(srcIndex + 5).replace(/\\/g, '/').replace(/\.ts$/, '')
-        : basename(comp.filePath, '.ts');
-    const builtModulePath = resolve(buildOutDir, relFromSrc + '.js');
-    const importPath = computeImportPath(jsPath, builtModulePath);
-    // events 객체 생성
-    const eventsObj = events.length > 0
-        ? `{\n${events.map(e => `    ${e.reactName}: '${e.name}',`).join('\n')}\n  }`
-        : '{}';
-    // .js
-    const js = `import React from 'react';
-import { createComponent } from '@lit/react';
-import { ${className} as ${className}Element } from '${importPath}';
-
-export const ${className} = createComponent({
-  react: React,
-  tagName: '${tagName}',
-  elementClass: ${className}Element,
-  events: ${eventsObj},
-});
-`;
-    // .d.ts - import 구문 생성
-    const dtsImportPath = importPath.replace(/\.js$/, '');
-    const dtsImports = [
-        `import React from 'react';`,
-        `import { ${className} as ${className}Element } from '${dtsImportPath}';`,
-    ];
-    // 이벤트 detail 타입별 import - 소스 원본 경로 기준으로 빌드 경로 계산
-    const srcDir = dirname(comp.filePath);
-    const detailImportMap = new Map(); // 빌드경로 → [타입명]
-    for (const e of events) {
-        if (e.detailType === 'unknown' || !e.importPath)
-            continue;
-        // 소스 상대경로를 절대경로로 변환 후 빌드 경로 계산
-        const absEventSrc = resolve(srcDir, e.importPath).replace(/\\/g, '/');
-        const eventSrcIndex = absEventSrc.indexOf('/src/');
-        const relFromSrc = eventSrcIndex >= 0
-            ? absEventSrc.substring(eventSrcIndex + 5).replace(/\.js$/, '')
-            : '';
-        if (!relFromSrc)
-            continue;
-        const absEventBuilt = resolve(buildOutDir, relFromSrc);
-        const eventImportPath = computeImportPath(dtsPath, absEventBuilt + '.js').replace(/\.js$/, '');
-        const types = detailImportMap.get(eventImportPath) || [];
-        if (!types.includes(e.detailType))
-            types.push(e.detailType);
-        detailImportMap.set(eventImportPath, types);
-    }
-    for (const [path, types] of detailImportMap) {
-        dtsImports.push(`import { type ${types.join(', type ')} } from '${path}';`);
-    }
-    const eventTypes = events.length > 0
-        ? events.map(e => {
-            const type = e.detailType !== 'unknown' ? `CustomEvent<${e.detailType}>` : 'CustomEvent';
-            return `  ${e.reactName}?: (event: ${type}) => void;`;
-        }).join('\n') + '\n'
-        : '';
-    // 래퍼 이벤트 prop(onChange 등)은 React.HTMLAttributes 의 동명 핸들러와 교집합되면
-    // 어떤 시그니처도 대입 불가가 된다. HTMLAttributes 쪽에서 해당 키를 제거해 CustomEvent
-    // 시그니처만 남긴다. 이벤트가 없으면 Omit<…, never> 로 HTMLAttributes 원형 유지.
-    const eventKeyUnion = events.length > 0
-        ? events.map(e => `'${e.reactName}'`).join(' | ')
-        : 'never';
-    // Partial<Element> 은 DOM 프로퍼티(children: HTMLCollection 등)를 포함해 React 의 JSX
-    // children/이벤트/className 등과 충돌한다. keyof React.HTMLAttributes 를 제거해 컴포넌트
-    // 고유 prop만 남기고, React 친화 타입(children: ReactNode 포함)은 HTMLAttributes 가 제공한다.
-    //
-    // `React.RefAttributes` 를 반드시 교집합에 넣는다 — `ForwardRefExoticComponent<P>` 는 P 에
-    // ref 를 자동으로 더해 주지 않는다. @lit/react 의 `ReactWebComponent` 자신이
-    // `PropsWithoutRef<…> & React.RefAttributes<I>` 로 선언돼 있으므로(런타임은 ref 를 전달한다),
-    // 이것을 빠뜨리면 **런타임은 되는데 타입만 거부하는** 괴리가 생긴다.
-    const dts = `${dtsImports.join('\n')}
-
-export declare const ${className}: React.ForwardRefExoticComponent<
-  Omit<Partial<${className}Element>, keyof React.HTMLAttributes<${className}Element>>
-    & Omit<React.HTMLAttributes<${className}Element>, ${eventKeyUnion}>
-    & React.RefAttributes<${className}Element>
-    & {
-${eventTypes}  }
->;
-
-export type ${className}Props = React.ComponentProps<typeof ${className}>;
-`;
-    return [
-        writeFile(jsPath, js, buildOutDir),
-        writeFile(dtsPath, dts, buildOutDir),
-    ];
-}
-function writeIndex(components, outDir, buildOutDir) {
-    const jsExports = components
-        .map(c => `export { ${c.className} } from './${c.className}.js';`)
-        .join('\n');
-    const dtsExports = components
-        .map(c => `export { ${c.className}, ${c.className}Props } from './${c.className}';`)
-        .join('\n');
-    return [
-        writeFile(join(outDir, 'index.js'), jsExports + '\n', buildOutDir),
-        writeFile(join(outDir, 'index.d.ts'), dtsExports + '\n', buildOutDir),
-    ];
-}