@nexus-cross/design-system 1.0.12 → 1.0.14

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-X3CTJ7TD.js → chunk-4KBFVIKX.js}

@@ -41,10 +41,38 @@ var stepperVariants = classVarianceAuthority.cva("nexus-stepper", {
     size: "md"
   }
 });
-var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5l3 3 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 7.5l3 3 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+  }
+);
 var Stepper = React__namespace.forwardRef(
-  ({ className, orientation, size, steps, current = 0, status = "process", ...props }, ref) => {
+  ({
+    className,
+    orientation,
+    size,
+    steps,
+    current = 0,
+    status = "process",
+    ...props
+  }, ref) => {
     const isHorizontal = orientation !== "vertical";
+    const prevCurrentRef = React__namespace.useRef(current);
+    const [animatingIdx, setAnimatingIdx] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+      if (prevCurrentRef.current !== current) {
+        setAnimatingIdx(current);
+        prevCurrentRef.current = current;
+        const timer = setTimeout(() => setAnimatingIdx(null), 600);
+        return () => clearTimeout(timer);
+      }
+    }, [current]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -56,12 +84,15 @@ var Stepper = React__namespace.forwardRef(
           const state = i < current ? "completed" : i === current ? status === "error" ? "error" : "active" : "pending";
           const isFirst = i === 0;
           const isLast = i === steps.length - 1;
-          const prevCompleted = i <= current;
-          const nextCompleted = i < current;
+          const isAnimating = animatingIdx === i;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: chunkCZC76ZD5_js.cn("nexus-stepper__step", `nexus-stepper__step--${state}`),
+              className: chunkCZC76ZD5_js.cn(
+                "nexus-stepper__step",
+                `nexus-stepper__step--${state}`,
+                isAnimating && "nexus-stepper__step--animating"
+              ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator-wrap", children: isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -69,8 +100,7 @@ var Stepper = React__namespace.forwardRef(
                     {
                       className: chunkCZC76ZD5_js.cn(
                         "nexus-stepper__connector",
-                        isFirst && "nexus-stepper__connector--hidden",
-                        prevCompleted && "nexus-stepper__connector--completed"
+                        isFirst && "nexus-stepper__connector--hidden"
                       )
                     }
                   ),
@@ -80,14 +110,14 @@ var Stepper = React__namespace.forwardRef(
                     {
                       className: chunkCZC76ZD5_js.cn(
                         "nexus-stepper__connector",
-                        isLast && "nexus-stepper__connector--hidden",
-                        nextCompleted && "nexus-stepper__connector--completed"
+                        isLast && "nexus-stepper__connector--hidden"
                       )
                     }
                   )
                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  !isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-stepper__connector", prevCompleted && "nexus-stepper__connector--completed") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) })
+                  !isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__connector" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) }),
+                  !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__connector" })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-stepper__content", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__label", children: step.label }),

package/dist/chunks/{chunk-2WM23PO6.js → chunk-K574BYHQ.js}

@@ -31,7 +31,8 @@ var toggleGroupVariants = classVarianceAuthority.cva("nexus-toggle-group", {
   variants: {
     variant: {
       default: "nexus-toggle-group--default",
-      outline: "nexus-toggle-group--outline"
+      primary: "nexus-toggle-group--primary",
+      secondary: "nexus-toggle-group--secondary"
     },
     size: {
       sm: "nexus-toggle-group--sm",
@@ -45,7 +46,7 @@ var toggleGroupVariants = classVarianceAuthority.cva("nexus-toggle-group", {
   }
 });
 var ToggleGroup = React__namespace.forwardRef(
-  ({ className, variant, size, items, disabled, required, ...props }, ref) => {
+  ({ className, variant, size, items, disabled, required = true, ...props }, ref) => {
     const rootRef = React__namespace.useRef(null);
     const [animated, setAnimated] = React__namespace.useState(false);
     const [pos, setPos] = React__namespace.useState(null);
@@ -62,10 +63,9 @@ var ToggleGroup = React__namespace.forwardRef(
     React__namespace.useEffect(() => {
       if (currentValue !== void 0) setTrackedValue(currentValue);
     }, [currentValue]);
-    const isDefault = variant !== "outline";
     React__namespace.useLayoutEffect(() => {
       const root = rootRef.current;
-      if (!root || !isDefault) return;
+      if (!root) return;
       const activeVal = Array.isArray(trackedValue) ? trackedValue[0] : trackedValue;
       if (!activeVal) {
         setPos(null);
@@ -89,7 +89,7 @@ var ToggleGroup = React__namespace.forwardRef(
         x: elRect.left - rootRect.left,
         y: elRect.top - rootRect.top
       });
-    }, [trackedValue, items, isDefault]);
+    }, [trackedValue, items]);
     React__namespace.useEffect(() => {
       const frame = requestAnimationFrame(() => {
         requestAnimationFrame(() => setAnimated(true));
@@ -141,7 +141,7 @@ var ToggleGroup = React__namespace.forwardRef(
         disabled,
         ...rootProps,
         children: [
-          isDefault && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: chunkCZC76ZD5_js.cn(
@@ -157,7 +157,7 @@ var ToggleGroup = React__namespace.forwardRef(
             {
               value: item.value,
               disabled: item.disabled,
-              className: "nexus-toggle-group__item",
+              className: chunkCZC76ZD5_js.cn("nexus-toggle-group__item", item.className),
               children: [
                 item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-toggle-group__icon", children: item.icon }),
                 item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })