@nexus-cross/design-system 1.1.1 → 2.0.0-beta.1

package/claude-rules/nexus/CLAUDE.md

@@ -34,7 +34,13 @@
 
 ---
 
-## Quick Component Import
+## Quick Install (단일 패키지)
+
+```bash
+npm install @nexus-cross/design-system   # 토큰/도메인 토큰까지 자동 transitive install
+```
+
+## Quick Component / Token Import
 
 ```tsx
 import {
@@ -47,25 +53,47 @@ import {
 } from '@nexus-cross/design-system';
 
 import { modal, useModal, ModalTemplate, ModalContainer } from '@nexus-cross/design-system/modal';
+
+// 토큰 JS API (sub-path)
+import { getTheme } from '@nexus-cross/design-system/tokens';
+import { getPredictionTheme } from '@nexus-cross/design-system/tokens-domains';
 ```
 
 ---
 
 ## CSS Setup (한 번만)
 
-### Tailwind v4
+### Tailwind v4 (Next + Turbopack / Vite 등 모든 환경) — **2줄 셋업**
+
+**design-system + 토큰을 함께 쓸 때 (대부분의 경우):**
 ```css
+/* globals.css */
 @import 'tailwindcss';
-@import '@nexus-cross/tokens/company.css';
-/* Next.js Turbopack only: */
+@import '@nexus-cross/design-system/tailwind-v4.css';
+/* 도메인 토큰 사용 시 한 줄 추가 */
+/* @import '@nexus-cross/design-system/tokens-domains/prediction.css'; */
+```
+
+`tailwind-v4.css` 안에서 회사 공통 토큰이 sub-path를 통해 자동 로드되므로 **토큰 import를 따로 쓸 필요 없습니다.** 컴포넌트 CSS는 Tailwind의 `components` 레이어에 주입되어 `className="bg-red-500"` 오버라이드가 항상 utility에 우선합니다.
+
+**디자인 토큰만 쓸 때 (design-system 없이):** `@nexus-cross/tokens`를 별도 설치하고 `@import '@nexus-cross/tokens/company.css';` 사용.
+
+**`@layer base, nexus, components, utilities;` statement를 직접 쓰지 마세요.** Tailwind v4 프로세서가 자동 정리/제거하기 때문에 의도와 다르게 동작합니다.
+
+### Tailwind v3 / 순수 CSS
+```css
+/* globals.css */
+@import '@nexus-cross/design-system/tokens/css';
 @import '@nexus-cross/design-system/styles.css';
+@tailwind base; @tailwind components; @tailwind utilities;
 ```
+또는 entry에서 `import '@nexus-cross/design-system/styles'`.
 
-### Next.js Turbopack
+### Next.js (모든 버전)
 ```js
 // next.config.mjs
 const nextConfig = {
-  transpilePackages: ['@nexus-cross/design-system', '@nexus-cross/tokens'],
+  transpilePackages: ['@nexus-cross/design-system'],
 }
 ```
 

package/cursor-rules/CLAUDE.md

@@ -25,33 +25,62 @@
 
 4. **`className` 오버라이드 시 `!important` 금지.** `cn()` 유틸이 프리픽스 충돌 자동 해소.
 
-## Component Import
+## 설치 (단일 패키지)
+
+v2.0부터 `@nexus-cross/design-system` 1개 install로 토큰까지 모두 사용 가능합니다.
+
+```bash
+npm install @nexus-cross/design-system
+```
+
+## Component / Token Import
 
 ```tsx
+// UI 컴포넌트
 import { Button, TextInput, TextArea, Select, Switch, Chip, Spinner, Divider } from '@nexus-cross/design-system';
 import { Tooltip, Popover, Drawer, Accordion } from '@nexus-cross/design-system';
 import { toast, Toaster } from '@nexus-cross/design-system';
 import { modal, useModal, ModalTemplate, ModalContainer } from '@nexus-cross/design-system/modal';
-import { NumberInput, numberInputBind } from '@nexus-cross/design-system';
-import { Avatar, Tab, ToggleGroup } from '@nexus-cross/design-system';
-import { cn } from '@nexus-cross/design-system';
+import { NumberInput, numberInputBind, Avatar, Tab, ToggleGroup, cn } from '@nexus-cross/design-system';
+
+// 토큰 JS API (sub-path)
+import { getTheme } from '@nexus-cross/design-system/tokens';
+import { getPredictionTheme } from '@nexus-cross/design-system/tokens-domains';
 ```
 
 ## CSS Setup
 
-### Tailwind v4
+### Tailwind v4 (Next + Turbopack / Vite 등 모든 환경) — **2줄 셋업**
+
+**design-system + 토큰을 함께 쓸 때 (대부분의 경우):**
 ```css
+/* globals.css */
 @import 'tailwindcss';
-@import '@nexus-cross/tokens/company.css';
-/* Next.js Turbopack only: */
+@import '@nexus-cross/design-system/tailwind-v4.css';
+/* 도메인 토큰 사용 시 한 줄 추가 */
+/* @import '@nexus-cross/design-system/tokens-domains/prediction.css'; */
+```
+
+`tailwind-v4.css` 안에서 회사 공통 토큰이 자동 로드되므로 **토큰 import를 따로 쓸 필요 없습니다.** 컴포넌트 CSS는 Tailwind의 `components` 레이어에 주입되어 `className="bg-red-500"` 오버라이드가 항상 utility에 우선합니다.
+
+**디자인 토큰만 쓸 때 (design-system 없이):** `@nexus-cross/tokens`를 별도 설치하고 `@import '@nexus-cross/tokens/company.css';` 사용.
+
+**절대 직접 `@layer base, nexus, components, utilities;` 같은 statement를 globals.css에 쓰지 말 것.** Tailwind v4 프로세서가 자동 정리해버려 의도와 다르게 동작합니다.
+
+### Tailwind v3 / 순수 CSS
+```css
+/* globals.css */
+@import '@nexus-cross/design-system/tokens/css';
 @import '@nexus-cross/design-system/styles.css';
+@tailwind base; @tailwind components; @tailwind utilities;
 ```
+또는 entry에서 `import '@nexus-cross/design-system/styles'`.
 
-### Next.js Turbopack
+### Next.js (모든 버전)
 ```js
 // next.config.mjs
 const nextConfig = {
-  transpilePackages: ['@nexus-cross/design-system', '@nexus-cross/tokens'],
+  transpilePackages: ['@nexus-cross/design-system'],
 }
 ```
 

package/cursor-rules/nexus-project-setup.mdc

@@ -13,28 +13,41 @@ This project uses NEXUS Design System. All generated code MUST follow the rules
 - **UI Components**: `@nexus-cross/design-system` (React, CVA + Plain CSS)
 - **Styling**: Tailwind CSS v4 + NEXUS semantic tokens
 
-## Design System CSS Setup
+## Install (단일 패키지)
 
-Choose one of two CSS entry points depending on the project environment:
+v2.0부터 design-system 1개 install로 토큰까지 모두 가능합니다.
 
-| Environment | import | Description |
-|---|---|---|
-| Tailwind v3 / Plain CSS / CSS Modules | `@nexus-cross/design-system/styles` | unlayered CSS |
-| Tailwind v4 | `@nexus-cross/design-system/styles/layer` | wrapped in `@layer nexus` |
+```bash
+npm install @nexus-cross/design-system   # @nexus-cross/tokens, tokens-domains 자동 transitive install
+```
 
-```tsx
-// Tailwind v3, Plain CSS, CSS Modules
-import '@nexus-cross/design-system/styles'
+토큰만 단독으로 쓰는 경우엔 `npm install @nexus-cross/tokens` (또는 `tokens-domains`) 가능.
 
-// Tailwind v4
-import '@nexus-cross/design-system/styles/layer'
-```
+## Design System CSS Setup
 
-For Tailwind v4 projects, also declare layer order in `globals.css`:
+| Environment | Setup |
+|---|---|
+| **Tailwind v4** (Next + Turbopack / Vite 등) | `globals.css`에서 2줄: `@import 'tailwindcss';` + `@import '@nexus-cross/design-system/tailwind-v4.css';` |
+| Tailwind v3 | `globals.css`에 `@import '@nexus-cross/design-system/tokens/css';` + `@import '@nexus-cross/design-system/styles.css';` |
+| Plain CSS / CSS Modules | `@import '@nexus-cross/design-system/tokens/css';` + entry에서 `import '@nexus-cross/design-system/styles'` |
+
+### Tailwind v4 — **2줄 셋업** (권장)
+
+**design-system + 토큰을 함께 쓸 때 (대부분의 경우):**
 ```css
-@layer base, nexus, components, utilities;
+/* globals.css */
+@import 'tailwindcss';
+@import '@nexus-cross/design-system/tailwind-v4.css';
+/* 도메인 토큰 사용 시 */
+/* @import '@nexus-cross/design-system/tokens-domains/prediction.css'; */
 ```
 
+`tailwind-v4.css` 안에서 회사 공통 토큰이 sub-path를 통해 자동 로드되므로 **토큰 import를 따로 쓸 필요 없습니다.** 컴포넌트 CSS는 Tailwind의 `components` 레이어에 주입되어 `className="bg-red-500"` 오버라이드가 항상 utility에 우선합니다.
+
+**디자인 토큰만 쓸 때 (design-system 없이):** `@nexus-cross/tokens`를 별도 설치하고 `@import '@nexus-cross/tokens/company.css';` 사용.
+
+**`@layer base, nexus, components, utilities;` 같은 statement를 직접 쓰지 마세요.** Tailwind v4 프로세서가 자동으로 정리/제거하기 때문에 의도와 다르게 동작합니다.
+
 ## Absolute Rules
 
 1. **Always use NEXUS tokens for colors.** Hardcoding is prohibited.
@@ -225,8 +238,9 @@ import { toast, Toaster } from '@nexus-cross/design-system';
 // Modal system (separate subpath)
 import { modal, useModal, ModalTemplate, ModalContainer } from '@nexus-cross/design-system/modal';
 
-// Tokens (only when JS API is needed)
-import { getTheme } from '@nexus-cross/tokens';
+// Tokens (sub-path — design-system 1개 install로 사용 가능)
+import { getTheme } from '@nexus-cross/design-system/tokens';
+import { getPredictionTheme } from '@nexus-cross/design-system/tokens-domains';
 ```
 
 ## Modal Writing Rules

package/dist/index.js

@@ -1,9 +1,8 @@
-require('./styles.css');
 'use strict';
 
+var chunkAZ2URLDD_js = require('./chunks/chunk-AZ2URLDD.js');
 var chunkYB5ZKHVB_js = require('./chunks/chunk-YB5ZKHVB.js');
 var chunk3RK3UT2O_js = require('./chunks/chunk-3RK3UT2O.js');
-var chunkAZ2URLDD_js = require('./chunks/chunk-AZ2URLDD.js');
 var chunkC2DSAJTL_js = require('./chunks/chunk-C2DSAJTL.js');
 var chunkK3CK7NTP_js = require('./chunks/chunk-K3CK7NTP.js');
 var chunkDICN6GKE_js = require('./chunks/chunk-DICN6GKE.js');
@@ -45,13 +44,13 @@ var chunkXGIJZ3NZ_js = require('./chunks/chunk-XGIJZ3NZ.js');
 var chunk2T7RUYEK_js = require('./chunks/chunk-2T7RUYEK.js');
 var chunk4ENXP7WH_js = require('./chunks/chunk-4ENXP7WH.js');
 var chunkMA2VCCIY_js = require('./chunks/chunk-MA2VCCIY.js');
-var chunk7F4SOLAC_js = require('./chunks/chunk-7F4SOLAC.js');
+var chunkU53UA76K_js = require('./chunks/chunk-U53UA76K.js');
+var chunkHHXDOKXY_js = require('./chunks/chunk-HHXDOKXY.js');
 var chunkNHDGKOAM_js = require('./chunks/chunk-NHDGKOAM.js');
 var chunkT2IY2TSR_js = require('./chunks/chunk-T2IY2TSR.js');
 var chunkXEHFB62A_js = require('./chunks/chunk-XEHFB62A.js');
 var chunkINP2AH3B_js = require('./chunks/chunk-INP2AH3B.js');
 var chunkHUPAHDJ7_js = require('./chunks/chunk-HUPAHDJ7.js');
-var chunkHHXDOKXY_js = require('./chunks/chunk-HHXDOKXY.js');
 var chunkP3DZKXG4_js = require('./chunks/chunk-P3DZKXG4.js');
 var chunkWKCXACMZ_js = require('./chunks/chunk-WKCXACMZ.js');
 var chunkS2GMEC43_js = require('./chunks/chunk-S2GMEC43.js');
@@ -341,6 +340,10 @@ var buttonTokenSchema = {
   }
 };
 
+Object.defineProperty(exports, "useInView", {
+  enumerable: true,
+  get: function () { return chunkAZ2URLDD_js.useInView; }
+});
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
   get: function () { return chunkYB5ZKHVB_js.Toaster; }
@@ -377,10 +380,6 @@ Object.defineProperty(exports, "useTableHighlight", {
   enumerable: true,
   get: function () { return chunk3RK3UT2O_js.useTableHighlight; }
 });
-Object.defineProperty(exports, "useInView", {
-  enumerable: true,
-  get: function () { return chunkAZ2URLDD_js.useInView; }
-});
 Object.defineProperty(exports, "DropdownMenu", {
   enumerable: true,
   get: function () { return chunkC2DSAJTL_js.DropdownMenu; }
@@ -795,39 +794,43 @@ Object.defineProperty(exports, "avatarVariants", {
 });
 Object.defineProperty(exports, "ModalContainer", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalContainer_default; }
+  get: function () { return chunkU53UA76K_js.ModalContainer_default; }
 });
 Object.defineProperty(exports, "ModalPortalTarget", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalPortalTarget_default; }
+  get: function () { return chunkU53UA76K_js.ModalPortalTarget_default; }
 });
 Object.defineProperty(exports, "ModalTemplate", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalTemplate_default; }
+  get: function () { return chunkU53UA76K_js.ModalTemplate_default; }
 });
 Object.defineProperty(exports, "checkModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.checkModal; }
+  get: function () { return chunkU53UA76K_js.checkModal; }
 });
 Object.defineProperty(exports, "closeModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.closeModal; }
+  get: function () { return chunkU53UA76K_js.closeModal; }
 });
 Object.defineProperty(exports, "getModalDefaultOption", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.getModalDefaultOption; }
+  get: function () { return chunkU53UA76K_js.getModalDefaultOption; }
 });
 Object.defineProperty(exports, "modal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "openModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "resetModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.resetModal; }
+  get: function () { return chunkU53UA76K_js.resetModal; }
+});
+Object.defineProperty(exports, "useDraggableBottomSheet", {
+  enumerable: true,
+  get: function () { return chunkHHXDOKXY_js.useDraggableBottomSheet; }
 });
 Object.defineProperty(exports, "useDraggableWindow", {
   enumerable: true,
@@ -853,10 +856,6 @@ Object.defineProperty(exports, "useModal", {
   enumerable: true,
   get: function () { return chunkHUPAHDJ7_js.useModal; }
 });
-Object.defineProperty(exports, "useDraggableBottomSheet", {
-  enumerable: true,
-  get: function () { return chunkHHXDOKXY_js.useDraggableBottomSheet; }
-});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () { return chunkP3DZKXG4_js.Button; }

package/dist/index.mjs

@@ -1,7 +1,6 @@
-import './styles.css';
+export { useInView } from './chunks/chunk-2JTPRBHZ.mjs';
 export { Toaster, toast, useToast } from './chunks/chunk-ZWSIIGA3.mjs';
 export { Table, TableHighlightProvider, TableRow, TdColumn, tableRowVariants, useTableHighlight } from './chunks/chunk-AAITRHED.mjs';
-export { useInView } from './chunks/chunk-2JTPRBHZ.mjs';
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from './chunks/chunk-6DBRL6NA.mjs';
 export { ToggleGroup, toggleGroupVariants } from './chunks/chunk-PIGHBDK5.mjs';
 export { Slider, sliderVariants } from './chunks/chunk-H2G5FMRN.mjs';
@@ -43,13 +42,13 @@ export { TextArea, textAreaVariants } from './chunks/chunk-ZU4AWAFT.mjs';
 export { NumberInput, numberInputBind, numberInputVariants } from './chunks/chunk-BJM3NDT2.mjs';
 export { PriceInput, priceInputVariants } from './chunks/chunk-WGGBE4ZD.mjs';
 export { Avatar, avatarVariants } from './chunks/chunk-YLO4UKSC.mjs';
-export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from './chunks/chunk-5ZVPTIL3.mjs';
+export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from './chunks/chunk-3VFBPFZF.mjs';
+export { useDraggableBottomSheet } from './chunks/chunk-U56AGSLE.mjs';
 export { useDraggableWindow } from './chunks/chunk-4J3GCZ7W.mjs';
 export { scrollFreeze, scrollRelease } from './chunks/chunk-54IA2P2Z.mjs';
 export { useCheckDevice_default as useCheckDevice } from './chunks/chunk-YEWKPWK3.mjs';
 export { useClickOutside_default as useClickOutside } from './chunks/chunk-OTGS6BDQ.mjs';
 export { useModal } from './chunks/chunk-6H7V2I3X.mjs';
-export { useDraggableBottomSheet } from './chunks/chunk-U56AGSLE.mjs';
 export { Button, buttonVariants } from './chunks/chunk-VVXQZ4XH.mjs';
 export { Chip, chipVariants } from './chunks/chunk-RX5UKRYK.mjs';
 export { Badge, badgeVariants } from './chunks/chunk-CUTMLBC3.mjs';

package/dist/modal/index.js

@@ -1,51 +1,51 @@
 'use strict';
 
-var chunk7F4SOLAC_js = require('../chunks/chunk-7F4SOLAC.js');
+var chunkU53UA76K_js = require('../chunks/chunk-U53UA76K.js');
+require('../chunks/chunk-HHXDOKXY.js');
 require('../chunks/chunk-NHDGKOAM.js');
 require('../chunks/chunk-T2IY2TSR.js');
 require('../chunks/chunk-XEHFB62A.js');
 require('../chunks/chunk-INP2AH3B.js');
 var chunkHUPAHDJ7_js = require('../chunks/chunk-HUPAHDJ7.js');
-require('../chunks/chunk-HHXDOKXY.js');
 require('../chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "ModalContainer", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalContainer_default; }
+  get: function () { return chunkU53UA76K_js.ModalContainer_default; }
 });
 Object.defineProperty(exports, "ModalPortalTarget", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalPortalTarget_default; }
+  get: function () { return chunkU53UA76K_js.ModalPortalTarget_default; }
 });
 Object.defineProperty(exports, "ModalTemplate", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.ModalTemplate_default; }
+  get: function () { return chunkU53UA76K_js.ModalTemplate_default; }
 });
 Object.defineProperty(exports, "checkModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.checkModal; }
+  get: function () { return chunkU53UA76K_js.checkModal; }
 });
 Object.defineProperty(exports, "closeModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.closeModal; }
+  get: function () { return chunkU53UA76K_js.closeModal; }
 });
 Object.defineProperty(exports, "getModalDefaultOption", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.getModalDefaultOption; }
+  get: function () { return chunkU53UA76K_js.getModalDefaultOption; }
 });
 Object.defineProperty(exports, "modal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "openModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.openModal; }
+  get: function () { return chunkU53UA76K_js.openModal; }
 });
 Object.defineProperty(exports, "resetModal", {
   enumerable: true,
-  get: function () { return chunk7F4SOLAC_js.resetModal; }
+  get: function () { return chunkU53UA76K_js.resetModal; }
 });
 Object.defineProperty(exports, "useModal", {
   enumerable: true,

package/dist/modal/index.mjs

@@ -1,8 +1,8 @@
-export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from '../chunks/chunk-5ZVPTIL3.mjs';
+export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from '../chunks/chunk-3VFBPFZF.mjs';
+import '../chunks/chunk-U56AGSLE.mjs';
 import '../chunks/chunk-4J3GCZ7W.mjs';
 import '../chunks/chunk-54IA2P2Z.mjs';
 import '../chunks/chunk-YEWKPWK3.mjs';
 import '../chunks/chunk-OTGS6BDQ.mjs';
 export { useModal } from '../chunks/chunk-6H7V2I3X.mjs';
-import '../chunks/chunk-U56AGSLE.mjs';
 import '../chunks/chunk-MCKOWMLS.mjs';

package/dist/tailwind-v4.css

@@ -0,0 +1,19 @@
+/*!
+ * @nexus-cross/design-system — Tailwind v4 Single-Import Preset
+ *
+ * Use after `@import 'tailwindcss';` in your app's globals.css:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@nexus-cross/design-system/tailwind-v4.css';
+ *
+ * Loads NEXUS company tokens (vendored sub-path) and design-system component
+ * CSS into Tailwind's `components` layer (Tailwind order: base < components <
+ * utilities), so `className="bg-red-500"` overrides ALWAYS win over component
+ * styles.
+ *
+ * Need domain tokens? Add a third import in your globals.css:
+ *   @import '@nexus-cross/design-system/tokens-domains/prediction.css';
+ */
+
+@import './tokens/company.css';
+@import './styles.css' layer(components);