@nexus-cross/design-system 1.0.11 → 1.0.13

package/cursor-rules/CLAUDE.md

@@ -0,0 +1,80 @@
+# NEXUS Design System — Rules for AI Assistants
+
+## Tech Stack
+
+- **Design Tokens**: `@nexus-cross/tokens` (CSS variable based)
+- **UI Components**: `@nexus-cross/design-system` (React, CVA + Plain CSS)
+- **Styling**: Tailwind CSS v4 + NEXUS semantic tokens
+
+## Absolute Rules
+
+1. **색상은 반드시 NEXUS 토큰 사용.** hex, rgb, 기본 Tailwind 색상 (`bg-blue-500` 등) 금지.
+   - 배경: `bg-bg-*`, `bg-surface-*`
+   - 텍스트: `text-text-*`
+   - 아이콘: `text-icon-*`
+   - 테두리: `border-border-*`
+   - 액센트: `bg-accent-*`
+   - 상태: `bg-status-*`
+
+2. **UI 컴포넌트는 `@nexus-cross/design-system`에서 import.** 직접 구현 금지.
+   - `<button>` → `<Button>`, `<input>` → `<TextInput>`, `<select>` → `<Select>` 등
+   - Radix UI, Headless UI 등 직접 import 금지 (design-system이 내부적으로 사용)
+
+3. **Figma MCP 코드 그대로 사용 금지.** MCP 출력은 "디자인 의도 파악용"으로만 참고.
+   - Step 1: MCP로 구조 파악 → Step 2: NEXUS 컴포넌트 매핑 → Step 3: NEXUS 코드 작성
+
+4. **`className` 오버라이드 시 `!important` 금지.** `cn()` 유틸이 프리픽스 충돌 자동 해소.
+
+## Component Import
+
+```tsx
+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';
+```
+
+## CSS Setup
+
+### Tailwind v4
+```css
+@import 'tailwindcss';
+@import '@nexus-cross/tokens/company.css';
+/* Next.js Turbopack only: */
+@import '@nexus-cross/design-system/styles.css';
+```
+
+### Next.js Turbopack
+```js
+// next.config.mjs
+const nextConfig = {
+  transpilePackages: ['@nexus-cross/design-system', '@nexus-cross/tokens'],
+}
+```
+
+## Token Path Convention
+
+모든 디자인 토큰은 5-segment 형식: `color.semantic.{namespace}.{slot}.{state}`
+
+```
+# CORRECT
+color.semantic.domain-market.bullish.base
+color.semantic.domain-market.bullish-bg.hover
+
+# WRONG (6+ segments)
+color.semantic.domain-market.trend.bullish.base
+```
+
+## Detailed References
+
+상세 API, 토큰 목록, 컴포넌트 매핑 가이드는 아래 파일 참조:
+
+- **토큰 전체 목록**: `.cursor/rules/nexus-tokens.mdc`
+- **도메인 토큰**: `.cursor/rules/nexus-domains.mdc`
+- **컴포넌트 매핑 가이드**: `.cursor/rules/nexus-ui-components.mdc`
+- **컴포넌트 API (props)**: `.cursor/rules/nexus-ui-api.mdc`
+- **프로젝트 셋업 상세**: `.cursor/rules/nexus-project-setup.mdc`
+- **토큰 5-segment 규칙**: `.cursor/rules/token-path-5segment.mdc`

package/dist/chunks/{chunk-XKJO5Y4J.mjs → chunk-5J63FUAS.mjs}

@@ -171,15 +171,15 @@ var ImageUpload = React.forwardRef(
           !hasField && className
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "nexus-image-upload__preview-wrapper", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "nexus-image-upload__preview-area", children: [
+            /* @__PURE__ */ jsx("div", { className: "nexus-image-upload__preview-wrapper", children: /* @__PURE__ */ jsx(
               "img",
               {
                 src: preview,
                 alt: "Uploaded preview",
                 className: "nexus-image-upload__preview"
               }
-            ),
+            ) }),
             !disabled && /* @__PURE__ */ jsx(
               "button",
               {