@exem-ui/core 0.1.0-next.bf3c711

package/README.en.md

@@ -0,0 +1,98 @@
+<p align="center">
+  <h1 align="center">@exem-ui/core</h1>
+  <p align="center">Core foundation of the EXEM Design System</p>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@exem-ui/core"><img src="https://img.shields.io/npm/v/@exem-ui/core?style=flat-square&color=blue" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@exem-ui/core"><img src="https://img.shields.io/npm/dm/@exem-ui/core?style=flat-square" alt="npm downloads" /></a>
+  <img src="https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
+  <a href="https://github.com/CloudMOA/exem-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-green?style=flat-square" alt="license" /></a>
+</p>
+
+<p align="center">
+  English | <a href="./README.md">한국어</a>
+</p>
+
+---
+
+## Introduction
+
+`@exem-ui/core` is the shared foundation for all EXEM Design System packages. It provides CSS variable-based design tokens, utility functions, TypeScript type definitions, and original SVG icons.
+
+## Key Features
+
+- **450+ CSS Variables** — 442 color tokens + radius/shadow/breakpoint tokens defined as CSS custom properties
+- **366 SVG Icons** — Original SVG sources with Lucide-compatible metadata
+- **Utility Functions** — `cn()` (clsx + tailwind-merge), CVA-based variant styling
+- **Auto-generated Tokens** — Script-based TypeScript type generation ensuring design-development sync
+- **Dual Output** — CJS + ESM support with complete type definitions
+- **Tree-shakeable** — Subpath exports for selective module imports
+
+## Installation
+
+```bash
+# npm
+npm install @exem-ui/core
+
+# pnpm
+pnpm add @exem-ui/core
+
+# yarn
+yarn add @exem-ui/core
+```
+
+## Usage
+
+### CSS Variables (Global Styles)
+
+```ts
+import '@exem-ui/core/css';
+```
+
+### Utility Functions
+
+```ts
+import { cn } from '@exem-ui/core/utils';
+
+const className = cn('px-4 py-2', isActive && 'bg-primary text-white');
+```
+
+### Design Tokens
+
+```ts
+import { colorTokens } from '@exem-ui/core/tokens';
+import { colorTokens as colors } from '@exem-ui/core/tokens/color';
+```
+
+### Tailwind CSS Integration
+
+```ts
+import { exemColors, exemPlugin } from '@exem-ui/core/tailwindcss';
+```
+
+## Export Map
+
+| Path | Description |
+|------|-------------|
+| `@exem-ui/core` | Main entry (types, constants) |
+| `@exem-ui/core/css` | Global CSS variables |
+| `@exem-ui/core/utils` | `cn()`, utility functions |
+| `@exem-ui/core/icon` | Icon metadata types |
+| `@exem-ui/core/tokens` | Design tokens |
+| `@exem-ui/core/tokens/color` | Detailed color tokens |
+| `@exem-ui/core/tailwindcss` | Tailwind CSS plugin/colors |
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [@exem-ui/react](https://www.npmjs.com/package/@exem-ui/react) | React UI components |
+| [@exem-ui/tailwindcss3](https://www.npmjs.com/package/@exem-ui/tailwindcss3) | Tailwind CSS v3 plugin |
+| [@exem-ui/tailwindcss4](https://www.npmjs.com/package/@exem-ui/tailwindcss4) | Tailwind CSS v4 theme |
+
+## License
+
+Apache License 2.0 - Copyright 2026 Exem Co., Ltd.
+
+See [LICENSE](https://github.com/CloudMOA/exem-ui/blob/main/LICENSE) for details.

package/README.md

@@ -0,0 +1,98 @@
+<p align="center">
+  <h1 align="center">@exem-ui/core</h1>
+  <p align="center">EXEM 디자인 시스템의 핵심 기반 패키지</p>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@exem-ui/core"><img src="https://img.shields.io/npm/v/@exem-ui/core?style=flat-square&color=blue" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@exem-ui/core"><img src="https://img.shields.io/npm/dm/@exem-ui/core?style=flat-square" alt="npm downloads" /></a>
+  <img src="https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
+  <a href="https://github.com/CloudMOA/exem-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-green?style=flat-square" alt="license" /></a>
+</p>
+
+<p align="center">
+  <a href="./README.en.md">English</a> | 한국어
+</p>
+
+---
+
+## 소개
+
+`@exem-ui/core`는 EXEM 디자인 시스템의 모든 패키지가 공유하는 핵심 기반입니다. CSS 변수 기반 디자인 토큰, 유틸리티 함수, TypeScript 타입 정의, SVG 아이콘 원본을 제공합니다.
+
+## 주요 특징
+
+- **450+ CSS 변수** — 442개 색상 토큰 + 반경/그림자/브레이크포인트 토큰을 CSS 커스텀 프로퍼티로 정의
+- **366개 SVG 아이콘** — Lucide 호환 메타데이터와 함께 원본 SVG 제공
+- **유틸리티 함수** — `cn()` (clsx + tailwind-merge), CVA 기반 variant 스타일링
+- **자동 생성 토큰** — 스크립트 기반 TypeScript 타입 자동 생성으로 디자인-개발 동기화 보장
+- **듀얼 출력** — CJS + ESM 동시 지원, 완전한 타입 정의 포함
+- **트리 셰이킹** — 서브패스 export로 필요한 모듈만 선택적 임포트
+
+## 설치
+
+```bash
+# npm
+npm install @exem-ui/core
+
+# pnpm
+pnpm add @exem-ui/core
+
+# yarn
+yarn add @exem-ui/core
+```
+
+## 사용법
+
+### CSS 변수 (글로벌 스타일)
+
+```ts
+import '@exem-ui/core/css';
+```
+
+### 유틸리티 함수
+
+```ts
+import { cn } from '@exem-ui/core/utils';
+
+const className = cn('px-4 py-2', isActive && 'bg-primary text-white');
+```
+
+### 디자인 토큰
+
+```ts
+import { colorTokens } from '@exem-ui/core/tokens';
+import { colorTokens as colors } from '@exem-ui/core/tokens/color';
+```
+
+### Tailwind CSS 통합
+
+```ts
+import { exemColors, exemPlugin } from '@exem-ui/core/tailwindcss';
+```
+
+## Export Map
+
+| 경로 | 설명 |
+|------|------|
+| `@exem-ui/core` | 메인 엔트리 (타입, 상수) |
+| `@exem-ui/core/css` | 글로벌 CSS 변수 |
+| `@exem-ui/core/utils` | `cn()`, 유틸리티 함수 |
+| `@exem-ui/core/icon` | 아이콘 메타데이터 타입 |
+| `@exem-ui/core/tokens` | 디자인 토큰 |
+| `@exem-ui/core/tokens/color` | 색상 토큰 상세 |
+| `@exem-ui/core/tailwindcss` | Tailwind CSS 플러그인/색상 |
+
+## 관련 패키지
+
+| 패키지 | 설명 |
+|--------|------|
+| [@exem-ui/react](https://www.npmjs.com/package/@exem-ui/react) | React UI 컴포넌트 |
+| [@exem-ui/tailwindcss3](https://www.npmjs.com/package/@exem-ui/tailwindcss3) | Tailwind CSS v3 플러그인 |
+| [@exem-ui/tailwindcss4](https://www.npmjs.com/package/@exem-ui/tailwindcss4) | Tailwind CSS v4 테마 |
+
+## 라이선스
+
+Apache License 2.0 - Copyright 2026 Exem Co., Ltd.
+
+자세한 내용은 [LICENSE](https://github.com/CloudMOA/exem-ui/blob/main/LICENSE)를 참조하세요.

package/dist/chunk-5FZNP5G5.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var chunk6HPRWOQ2_js = require('./chunk-6HPRWOQ2.js');
+var chunkXTSIZ7P3_js = require('./chunk-XTSIZ7P3.js');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+
+var customTwMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": Object.keys(chunk6HPRWOQ2_js.textPreset_default).map((k) => `text-${k}`),
+      "font-style": Object.keys(chunk6HPRWOQ2_js.fontPreset_default).map((k) => `font-${k}`),
+      rounded: Object.keys(chunkXTSIZ7P3_js.radiusTokens_default).map((k) => `rounded-${k}`)
+    }
+  }
+});
+var cn = (...inputs) => customTwMerge(clsx.clsx(inputs));
+
+Object.defineProperty(exports, "cva", {
+  enumerable: true,
+  get: function () { return classVarianceAuthority.cva; }
+});
+exports.cn = cn;
+//# sourceMappingURL=chunk-5FZNP5G5.js.map
+//# sourceMappingURL=chunk-5FZNP5G5.js.map

package/dist/chunk-5FZNP5G5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts"],"names":["extendTailwindMerge","textPreset_default","fontPreset_default","radiusTokens_default","clsx"],"mappings":";;;;;;;;AAKA,IAAM,gBAAgBA,iCAAA,CAAoB;AAAA,EACxC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,WAAA,EAAa,MAAA,CAAO,IAAA,CAAKC,mCAAU,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,KAAA,EAAQ,CAAC,CAAA,CAAE,CAAA;AAAA,MAC3D,YAAA,EAAc,MAAA,CAAO,IAAA,CAAKC,mCAAU,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,KAAA,EAAQ,CAAC,CAAA,CAAE,CAAA;AAAA,MAC5D,OAAA,EAAS,MAAA,CAAO,IAAA,CAAKC,qCAAM,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,QAAA,EAAW,CAAC,CAAA,CAAE;AAAA;AACxD;AAEJ,CAAC,CAAA;AAkBM,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,aAAA,CAAcC,SAAA,CAAK,MAAM,CAAC","file":"chunk-5FZNP5G5.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { radius } from '../generated';\nimport { fontPreset, textPreset } from '../tailwindcss';\n\nconst customTwMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': Object.keys(textPreset).map((k) => `text-${k}`),\n      'font-style': Object.keys(fontPreset).map((k) => `font-${k}`),\n      rounded: Object.keys(radius).map((k) => `rounded-${k}`),\n    },\n  },\n});\n\n/**\n * Tailwind CSS 클래스를 조건부로 병합합니다.\n * EXEM UI 커스텀 토큰(rounded, font-size, font-style) 간 충돌을 자동 해소합니다.\n *\n * @param inputs - 병합할 클래스 값 (문자열, 객체, 배열)\n * @returns 병합된 클래스 문자열\n *\n * @example\n * ```ts\n * cn('bg-primary', isActive && 'bg-secondary')\n * // → 'bg-secondary' (isActive가 true일 때)\n *\n * cn('rounded-weak', 'rounded-strong')\n * // → 'rounded-strong' (커스텀 radius 충돌 해소)\n * ```\n */\nexport const cn = (...inputs: ClassValue[]): string => customTwMerge(clsx(inputs));\n"]}

package/dist/chunk-6HPRWOQ2.js

@@ -0,0 +1,47 @@
+'use strict';
+
+// src/tailwindcss/fontPreset.ts
+var fontPreset = {
+  regular: { fontWeight: "400", lineHeight: "140%" },
+  medium: { fontWeight: "500", lineHeight: "140%" },
+  semibold: { fontWeight: "600", lineHeight: "140%" },
+  bold: { fontWeight: "700", lineHeight: "140%" },
+  readable: { fontWeight: "400", lineHeight: "160%" }
+};
+var fontPreset_default = fontPreset;
+
+// src/tailwindcss/gradient.ts
+var gradientTokens = {
+  "exem-logo": "#FF470E 0%, #3E81F6 50%, #FFE100 100%"
+};
+var gradientDirections = {
+  "to-right": "to right",
+  "to-left": "to left",
+  "to-top": "to top",
+  "to-bottom": "to bottom",
+  "to-top-right": "to top right",
+  "to-top-left": "to top left",
+  "to-bottom-right": "to bottom right",
+  "to-bottom-left": "to bottom left"
+};
+
+// src/tailwindcss/textPreset.ts
+var textPreset = {
+  "header-1": "28px",
+  "header-2": "24px",
+  "title-1": "20px",
+  "title-2": "18px",
+  "body-1": "16px",
+  "body-2": "14px",
+  "body-3": "12px",
+  caption: "11px",
+  code: "14px"
+};
+var textPreset_default = textPreset;
+
+exports.fontPreset_default = fontPreset_default;
+exports.gradientDirections = gradientDirections;
+exports.gradientTokens = gradientTokens;
+exports.textPreset_default = textPreset_default;
+//# sourceMappingURL=chunk-6HPRWOQ2.js.map
+//# sourceMappingURL=chunk-6HPRWOQ2.js.map

package/dist/chunk-6HPRWOQ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwindcss/fontPreset.ts","../src/tailwindcss/gradient.ts","../src/tailwindcss/textPreset.ts"],"names":[],"mappings":";;;AAcA,IAAM,UAAA,GAAa;AAAA,EACjB,OAAA,EAAS,EAAE,UAAA,EAAY,KAAA,EAAO,YAAY,MAAA,EAAO;AAAA,EACjD,MAAA,EAAQ,EAAE,UAAA,EAAY,KAAA,EAAO,YAAY,MAAA,EAAO;AAAA,EAChD,QAAA,EAAU,EAAE,UAAA,EAAY,KAAA,EAAO,YAAY,MAAA,EAAO;AAAA,EAClD,IAAA,EAAM,EAAE,UAAA,EAAY,KAAA,EAAO,YAAY,MAAA,EAAO;AAAA,EAC9C,QAAA,EAAU,EAAE,UAAA,EAAY,KAAA,EAAO,YAAY,MAAA;AAC7C,CAAA;AAEA,IAAO,kBAAA,GAAQ;;;ACVf,IAAM,cAAA,GAAiB;AAAA,EACrB,WAAA,EAAa;AACf;AAGA,IAAM,kBAAA,GAAqB;AAAA,EACzB,UAAA,EAAY,UAAA;AAAA,EACZ,SAAA,EAAW,SAAA;AAAA,EACX,QAAA,EAAU,QAAA;AAAA,EACV,WAAA,EAAa,WAAA;AAAA,EACb,cAAA,EAAgB,cAAA;AAAA,EAChB,aAAA,EAAe,aAAA;AAAA,EACf,iBAAA,EAAmB,iBAAA;AAAA,EACnB,gBAAA,EAAkB;AACpB;;;ACZA,IAAM,UAAA,GAAqC;AAAA,EACzC,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,QAAA,EAAU,MAAA;AAAA,EACV,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"chunk-6HPRWOQ2.js","sourcesContent":["/**\n * `font-*` 유틸리티 프리셋 토큰.\n * 각 키는 Tailwind `font-{key}` 클래스로 매핑되며,\n * fontWeight와 lineHeight를 함께 지정합니다.\n *\n * text-* 유틸리티는 font-size만 담당하므로,\n * line-height는 font-* 유틸리티가 단독으로 관리합니다.\n *\n * @example\n * ```\n * text-body-2 font-regular  → 14px, weight 400, lh 140%\n * text-body-2 font-readable → 14px, weight 400, lh 160%\n * ```\n */\nconst fontPreset = {\n  regular: { fontWeight: '400', lineHeight: '140%' },\n  medium: { fontWeight: '500', lineHeight: '140%' },\n  semibold: { fontWeight: '600', lineHeight: '140%' },\n  bold: { fontWeight: '700', lineHeight: '140%' },\n  readable: { fontWeight: '400', lineHeight: '160%' },\n} as const;\n\nexport default fontPreset;\nexport type FontPresetKeys = keyof typeof fontPreset;\n","/**\n * 그라데이션 정의.\n * 이름별 색상 스톱과 방향 값을 제공합니다.\n *\n * @example\n * ```\n * bg-gradient-exem-logo-to-right\n * → linear-gradient(to right, #FF470E 0%, #3E81F6 50%, #FFE100 100%)\n * ```\n */\n\n/** 그라데이션 이름별 색상 스톱 */\nconst gradientTokens = {\n  'exem-logo': '#FF470E 0%, #3E81F6 50%, #FFE100 100%',\n} as const;\n\n/** 그라데이션 방향 값 */\nconst gradientDirections = {\n  'to-right': 'to right',\n  'to-left': 'to left',\n  'to-top': 'to top',\n  'to-bottom': 'to bottom',\n  'to-top-right': 'to top right',\n  'to-top-left': 'to top left',\n  'to-bottom-right': 'to bottom right',\n  'to-bottom-left': 'to bottom left',\n} as const;\n\nexport { gradientDirections, gradientTokens };\nexport type gradientDirectionKeys = keyof typeof gradientDirections;\nexport type gradientTokenKeys = keyof typeof gradientTokens;\n","/**\n * `text-*` 유틸리티 프리셋 토큰.\n * 각 키는 Tailwind `text-{key}` 클래스로 매핑되며, font-size를 설정합니다.\n * `code`는 플러그인에서 font-family를 추가로 주입합니다.\n *\n * line-height는 `font-*` 유틸리티(fontPreset 토큰)에서 관리합니다.\n *\n * @example\n * ```\n * text-header-1 font-regular  → 28px, weight 400, lh 140%\n * text-body-2 font-readable   → 14px, weight 400, lh 160%\n * text-code font-regular      → 14px, JetBrains Mono, weight 400, lh 140%\n * ```\n */\nconst textPreset: Record<string, string> = {\n  'header-1': '28px',\n  'header-2': '24px',\n  'title-1': '20px',\n  'title-2': '18px',\n  'body-1': '16px',\n  'body-2': '14px',\n  'body-3': '12px',\n  caption: '11px',\n  code: '14px',\n};\n\nexport default textPreset;\nexport type TextPresetKeys =\n  | 'header-1'\n  | 'header-2'\n  | 'title-1'\n  | 'title-2'\n  | 'body-1'\n  | 'body-2'\n  | 'body-3'\n  | 'caption'\n  | 'code';\n"]}

package/dist/chunk-GFGH6GWQ.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-GFGH6GWQ.mjs.map
+//# sourceMappingURL=chunk-GFGH6GWQ.mjs.map

package/dist/chunk-GFGH6GWQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-GFGH6GWQ.mjs"}

package/dist/chunk-HM4HRGV5.mjs

@@ -0,0 +1,20 @@
+import { fontPreset_default, textPreset_default } from './chunk-R3J2LRVQ.mjs';
+import { radiusTokens_default } from './chunk-Y64GSCMG.mjs';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+export { cva } from 'class-variance-authority';
+
+var customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": Object.keys(textPreset_default).map((k) => `text-${k}`),
+      "font-style": Object.keys(fontPreset_default).map((k) => `font-${k}`),
+      rounded: Object.keys(radiusTokens_default).map((k) => `rounded-${k}`)
+    }
+  }
+});
+var cn = (...inputs) => customTwMerge(clsx(inputs));
+
+export { cn };
+//# sourceMappingURL=chunk-HM4HRGV5.mjs.map
+//# sourceMappingURL=chunk-HM4HRGV5.mjs.map

package/dist/chunk-HM4HRGV5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts"],"names":[],"mappings":";;;;;;AAKA,IAAM,gBAAgB,mBAAA,CAAoB;AAAA,EACxC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,kBAAU,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,KAAA,EAAQ,CAAC,CAAA,CAAE,CAAA;AAAA,MAC3D,YAAA,EAAc,MAAA,CAAO,IAAA,CAAK,kBAAU,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,KAAA,EAAQ,CAAC,CAAA,CAAE,CAAA;AAAA,MAC5D,OAAA,EAAS,MAAA,CAAO,IAAA,CAAK,oBAAM,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,QAAA,EAAW,CAAC,CAAA,CAAE;AAAA;AACxD;AAEJ,CAAC,CAAA;AAkBM,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,aAAA,CAAc,IAAA,CAAK,MAAM,CAAC","file":"chunk-HM4HRGV5.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { radius } from '../generated';\nimport { fontPreset, textPreset } from '../tailwindcss';\n\nconst customTwMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': Object.keys(textPreset).map((k) => `text-${k}`),\n      'font-style': Object.keys(fontPreset).map((k) => `font-${k}`),\n      rounded: Object.keys(radius).map((k) => `rounded-${k}`),\n    },\n  },\n});\n\n/**\n * Tailwind CSS 클래스를 조건부로 병합합니다.\n * EXEM UI 커스텀 토큰(rounded, font-size, font-style) 간 충돌을 자동 해소합니다.\n *\n * @param inputs - 병합할 클래스 값 (문자열, 객체, 배열)\n * @returns 병합된 클래스 문자열\n *\n * @example\n * ```ts\n * cn('bg-primary', isActive && 'bg-secondary')\n * // → 'bg-secondary' (isActive가 true일 때)\n *\n * cn('rounded-weak', 'rounded-strong')\n * // → 'rounded-strong' (커스텀 radius 충돌 해소)\n * ```\n */\nexport const cn = (...inputs: ClassValue[]): string => customTwMerge(clsx(inputs));\n"]}