@x-plat/design-system 0.1.5 → 0.2.0

package/dist/layout/Grid/FullGrid/index.cjs

@@ -24,7 +24,7 @@ __export(FullGrid_exports, {
 });
 module.exports = __toCommonJS(FullGrid_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/FullGrid/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/FullScreen/index.cjs

@@ -24,7 +24,7 @@ __export(FullScreen_exports, {
 });
 module.exports = __toCommonJS(FullScreen_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/FullScreen/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/Item/index.cjs

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(Item_exports);
 // src/tokens/breakpoints.ts
 var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/Item/index.js

@@ -1,7 +1,7 @@
 // src/tokens/breakpoints.ts
 var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/index.cjs

@@ -27,7 +27,7 @@ __export(Grid_exports, {
 });
 module.exports = __toCommonJS(Grid_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Grid/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/Header/index.css

@@ -4,8 +4,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid #E5E5E5;
-  background-color: #FFFFFF;
+  border-bottom: 1px solid var(--xplat-neutral-200);
+  background-color: var(--xplat-white);
   width: 100%;
   box-sizing: border-box;
 }

package/dist/layout/Layout/index.css

@@ -3,7 +3,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background-color: #FAFAFA;
+  background-color: var(--xplat-neutral-50);
 }
 .lib-xplat-layout > .lib-xplat-layout-content-wrapper {
   display: flex;

package/dist/layout/SideBar/index.cjs

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(SideBar_exports);
 // src/layout/SideBar/SideBar.tsx
 var import_react2 = __toESM(require("react"), 1);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/SideBar/index.js

@@ -1,7 +1,7 @@
 // src/layout/SideBar/SideBar.tsx
 import React2 from "react";
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/index.cjs

@@ -42,7 +42,7 @@ __export(layout_exports, {
 });
 module.exports = __toCommonJS(layout_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/layout/index.css

@@ -70,8 +70,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid #E5E5E5;
-  background-color: #FFFFFF;
+  border-bottom: 1px solid var(--xplat-neutral-200);
+  background-color: var(--xplat-white);
   width: 100%;
   box-sizing: border-box;
 }
@@ -81,7 +81,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background-color: #FAFAFA;
+  background-color: var(--xplat-neutral-50);
 }
 .lib-xplat-layout > .lib-xplat-layout-content-wrapper {
   display: flex;

package/dist/layout/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/tokens/index.d.cts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
-export { b as ColorDepth, a as ColorName, C as ColorNamespace, d as ColorProps, c as colors } from '../colors-BG91q_uV.cjs';
+export { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.cjs';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
-export { b as ColorDepth, a as ColorName, C as ColorNamespace, d as ColorProps, c as colors } from '../colors-BG91q_uV.js';
+export { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.js';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.1.5",
-  "description": "XPLAT UI Design System package",
+  "version": "0.2.0",
+  "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",
   "type": "module",
@@ -49,9 +49,8 @@
     "dist"
   ],
   "scripts": {
-    "generate-theme": "tsx generate_theme.ts",
     "generate-grid": "tsx generate_grid.ts",
-    "build": "npm run clean && npm run generate-theme && npm run generate-grid && tsc --noEmit && NODE_OPTIONS='--max-old-space-size=8192' tsup",
+    "build": "npm run clean && npm run generate-grid && tsc --noEmit && NODE_OPTIONS='--max-old-space-size=8192' tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "lint": "eslint src",
@@ -61,6 +60,15 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "dependencies": {
+    "@x-plat/tokens-default": "*",
+    "chart.js": "^4.5.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "framer-motion": "^12.23.19",
+    "react-chartjs-2": "^5.3.1",
+    "react-datepicker": "^9.1.0",
+    "swiper": "^12.0.2"
+  },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
     "@types/node": "^24.10.1",
@@ -79,13 +87,5 @@
     "tsx": "^4.21.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.15.0"
-  },
-  "dependencies": {
-    "chart.js": "^4.5.1",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "framer-motion": "^12.23.19",
-    "react-chartjs-2": "^5.3.1",
-    "react-datepicker": "^9.1.0",
-    "swiper": "^12.0.2"
   }
 }

package/README.md

@@ -1,123 +0,0 @@
-# @x-plat/design-system
-
-XPLAT UI 디자인 시스템. React 컴포넌트, 레이아웃, 토큰(색상·브레이크포인트)을 제공합니다.
-
----
-
-## 요구 사항
-
-| 항목 | 버전 |
-|------|------|
-| Node.js | 18+ |
-| React | 18+ |
-
----
-
-## 설치
-
-```bash
-yarn add @x-plat/design-system
-```
-
-또는
-
-```bash
-npm install @x-plat/design-system
-```
-
----
-
-## 사용법
-
-### 1. 스타일 로드 (필수)
-
-앱 진입점에서 한 번만 불러옵니다. **반드시 `style.css` 경로를 사용하세요.** (`index.css`는 패키지에서 export되지 않습니다.)
-
-```tsx
-import "@x-plat/design-system/style.css";
-```
-
-### 2. Import 방식 요약
-
-| 방식 | 예시 |
-|------|------|
-| **루트 barrel** | `import { Button, colors } from "@x-plat/design-system"` |
-| **서브패스 barrel** | `import { Button } from "@x-plat/design-system/components"` |
-| **Deep import** | `import Button from "@x-plat/design-system/components/Button"` |
-
-### 3. 루트 barrel
-
-```tsx
-import { Button, Layout, FullGrid, GridItem, colors } from "@x-plat/design-system";
-```
-
-### 4. 서브패스 barrel
-
-```tsx
-import { Button, Chip } from "@x-plat/design-system/components";
-import { Layout, Grid, Header, SideBar } from "@x-plat/design-system/layout";
-import { colors, breakpoints } from "@x-plat/design-system";
-```
-
-### 5. Deep import
-
-```tsx
-import Button from "@x-plat/design-system/components/Button";
-import Layout from "@x-plat/design-system/layout/Layout";
-import FullGrid from "@x-plat/design-system/layout/Grid/FullGrid";
-import GridItem from "@x-plat/design-system/layout/Grid/Item";
-```
-
----
-
-## 개발
-
-### 스크립트
-
-| 명령어 | 설명 |
-|--------|------|
-| `npm run build` | 테마·그리드 생성 후 빌드 |
-| `npm run generate-theme` | `tokens/colors.ts` → `styles/colors.scss` |
-| `npm run generate-grid` | `tokens/breakpoints.ts` → `styles/_screen-generated.scss` |
-| `npm run dev` | tsup watch |
-| `npm run clean` | `dist` 삭제 |
-| `npm run lint` | ESLint (import 순서 등) |
-| `npm run lint:fix` | import 순서 자동 수정 |
-
-### 코드 생성 흐름
-
-- **색상**: `src/tokens/colors.ts` 수정 → `npm run generate-theme` → `src/styles/colors.scss` 갱신
-- **브레이크포인트/그리드**: `src/tokens/breakpoints.ts` 수정 → `npm run generate-grid` → `src/styles/_screen-generated.scss` 갱신
-
----
-
-## 프로젝트 구조
-
-```
-src/
-├── index.ts
-├── components/     # Button, Card, Chart, CheckBox, Chip, DatePicker, Input, Modal, Radio, Switch, Tab, Table, TextArea, Tooltip, Swiper, ...
-├── layout/         # Layout, Header, SideBar, Grid(FullGrid, FullScreen, GapGrid, Item)
-├── tokens/         # colors, breakpoints, interface, hooks, svg
-├── styles/         # colors.scss, screen.scss, utils, _screen-generated.scss
-└── util/
-```
-
----
-
-## 세부 문서
-
-| 경로 | 내용 |
-|------|------|
-| [src/components/README.md](src/components/README.md) | 컴포넌트 목록, import |
-| [src/layout/README.md](src/layout/README.md) | 레이아웃 |
-| [src/layout/Grid/README.md](src/layout/Grid/README.md) | Grid, 브레이크포인트 |
-| [src/tokens/README.md](src/tokens/README.md) | 토큰(colors, breakpoints) |
-| [src/tokens/interface/README.md](src/tokens/interface/README.md) | 타입 정의 |
-| [src/styles/README.md](src/styles/README.md) | 글로벌 SCSS |
-
----
-
-## 라이선스
-
-Private. XPLAT WOONG.