@nexus-cross/design-system 1.0.13 → 1.1.0

package/cursor-rules/nexus-ui-decisions.mdc

@@ -0,0 +1,259 @@
+---
+description: "@nexus-cross/design-system component selection guide — when to use which component, anti-patterns, and decision matrices for ambiguous cases (Combobox vs Select, Drawer vs Modal, Tooltip vs Popover, etc.)"
+globs: "**/*.tsx,**/*.jsx"
+alwaysApply: false
+---
+
+# NEXUS Component Selection Guide
+
+UI 작업 시 어떤 컴포넌트를 골라야 할지 결정하는 가이드. **`ui-components.md`로 1차 매핑 → 모호하면 이 문서 참조.**
+
+## Selection vs. Action
+
+옵션 중 **값을 고르는** 컴포넌트와 **액션을 트리거하는** 컴포넌트는 다릅니다.
+
+| 사용자 의도 | 컴포넌트 |
+|---|---|
+| 1개 값 선택 (form field) | Select / Combobox / RadioGroup |
+| 여러 값 선택 (form field) | CheckBox / Combobox(multiple) / TagInput |
+| 액션 메뉴 (저장/삭제/공유 등) | DropdownMenu |
+| 두 상태 토글 (on/off) | Switch |
+| n개 중 하나 선택 (즉시 적용) | ToggleGroup (single) |
+| n개 중 여러개 선택 (즉시 적용) | ToggleGroup (multiple) |
+
+> **핵심 차이**: form field는 "값"을 보유하고 submit 시 전송. DropdownMenu는 클릭 시 함수가 실행되는 액션. Switch/ToggleGroup은 즉시 상태 변경 (저장 버튼 없음).
+
+---
+
+## Single-select 입력: Select vs Combobox vs RadioGroup vs ToggleGroup
+
+| 상황 | 컴포넌트 | 이유 |
+|---|---|---|
+| 옵션 ≤ 4개, 모두 보여주고 싶음 | **RadioGroup** 또는 **ToggleGroup** | 한눈에 비교, 클릭 1회 |
+| 옵션 ≤ 7개, 공간 절약 필요 | **Select** | 가벼움, 빠른 마운트 |
+| 옵션 ≥ 7개 또는 라벨이 긺 | **Combobox** | 검색·필터·키보드 탐색 |
+| 옵션이 서버에서 비동기로 옴 | **Combobox** (`loading`, `onSearch`) | async 지원 |
+| 옵션이 동적 (사용자가 추가 가능) | **Combobox** + `creatable` 패턴 | 자유 입력 |
+| 시각적 비교가 핵심 (정렬·뷰모드 등) | **ToggleGroup** | 즉시 적용 + 시각 피드백 |
+
+```tsx
+// ❌ 옵션 20개에 Select
+<Select><SelectItem>...</SelectItem>...</Select>
+
+// ✅ 옵션 20개에 Combobox
+<Combobox options={options} placeholder="검색하여 선택" />
+
+// ❌ 옵션 3개에 Select
+<Select><SelectItem>S</SelectItem><SelectItem>M</SelectItem><SelectItem>L</SelectItem></Select>
+
+// ✅ 옵션 3개에 RadioGroup 또는 ToggleGroup
+<RadioGroup><RadioItem value="S">S</RadioItem>...</RadioGroup>
+<ToggleGroup type="single" items={[{value:'S',label:'S'},...]} />
+```
+
+---
+
+## Multi-select 입력: CheckBox vs Combobox(multiple) vs TagInput vs ToggleGroup(multiple)
+
+| 상황 | 컴포넌트 | 이유 |
+|---|---|---|
+| 옵션 ≤ 7개 모두 보여주기 | **CheckBox** 그룹 | 한눈에 체크 상태 비교 |
+| 옵션 ≥ 7개 검색 필요 | **Combobox** (`multiple`) | 칩 + 검색 |
+| 사용자가 자유 입력 (이메일·태그 등) | **TagInput** | enter로 토큰 생성 |
+| 즉시 필터 적용 (검색 페이지의 카테고리 필터) | **ToggleGroup** (`multiple`) | 토글 UI |
+
+---
+
+## 오버레이: Modal vs Drawer vs Popover vs Tooltip vs DropdownMenu
+
+| 상황 | 컴포넌트 | 이유 |
+|---|---|---|
+| 사용자 결정 강제 (확인/삭제/저장) | **Modal** | 백드롭 + focus trap |
+| 부수 정보 또는 부가 작업 | **Drawer** | 메인 콘텐츠 가림 적음 |
+| trigger 옆에 작은 컨텍스트 정보 | **Popover** | 위치 anchor, 클릭 dismiss |
+| trigger hover 시 짧은 힌트 | **Tooltip** | hover/focus만, 클릭 X |
+| 액션 메뉴 (저장/삭제/공유) | **DropdownMenu** | role=menu, 화살표 키 탐색 |
+
+```tsx
+// ❌ 단순 도움말에 Modal
+<Modal title="도움말">짧은 설명...</Modal>
+
+// ✅ 단순 도움말에 Tooltip
+<Tooltip content="짧은 설명...">
+  <button><HelpIcon /></button>
+</Tooltip>
+
+// ❌ 액션 메뉴에 Popover 안에 button 직접 작성
+<Popover><button onClick={save}>저장</button>...</Popover>
+
+// ✅ 액션 메뉴는 DropdownMenu (a11y 자동)
+<DropdownMenu items={[{label:'저장', onSelect: save}, ...]} />
+```
+
+**판단 기준**:
+- "사용자가 메인 작업으로부터 잠깐 분리되어야 하는가?" → Modal
+- "사용자가 사이드 패널에서 보조 작업을 하는가?" → Drawer
+- "trigger 가까이에 작은 보조 UI가 필요한가?" → Popover
+- "텍스트만 잠깐 보여주면 되는가?" → Tooltip
+
+---
+
+## 알림: toast vs Alert vs Modal vs EmptyState
+
+| 상황 | 컴포넌트 | 이유 |
+|---|---|---|
+| 일시적 피드백 (저장 완료, 복사됨 등) | **toast()** | 자동 dismiss, non-blocking |
+| 영구적 인라인 경고 (form 위 에러 요약) | **Alert** | 페이지 영역에 고정 |
+| 파괴적 액션 확인 ("정말 삭제?") | **modal.confirm()** | blocking, 명확한 결정 강제 |
+| 데이터 0개 상태 (목록·표) | **EmptyState** | 다음 액션 유도 |
+| 페이지 전체 에러 | **EmptyState** (variant: error) | 회복 액션 제공 |
+
+```tsx
+// ❌ "저장됨" 알림에 Alert
+<Alert>저장되었습니다</Alert>
+
+// ✅ "저장됨"은 toast
+toast.success('저장되었습니다');
+
+// ❌ 삭제 확인에 toast (사용자가 못 보고 지나칠 수 있음)
+toast('삭제하시겠습니까?', { action: { ... }});
+
+// ✅ 삭제 확인은 modal.confirm
+const ok = await modal.confirm({ title: '정말 삭제하시겠습니까?', danger: true });
+```
+
+---
+
+## 진행 상태: Spinner vs Skeleton vs Progress
+
+| 상황 | 컴포넌트 |
+|---|---|
+| 짧은 로딩 (< 1초), 결과만 기다림 | **Spinner** |
+| 긴 로딩, 레이아웃 미리 보여주기 | **Skeleton** (구조 그대로) |
+| 진행률을 알 수 있음 (업로드·동기화) | **Progress** |
+| 무한 스트림 더 불러오기 | (UI 없음) **InfiniteScroll** + 하단 Spinner |
+
+> Skeleton은 항상 **실제 컴포넌트와 동일한 형태**여야 함. 다른 모양이면 의미 없음.
+
+---
+
+## 리스트: DataList vs DataGrid vs VirtualList vs Carousel vs InfiniteScroll
+
+| 상황 | 컴포넌트 |
+|---|---|
+| 단순 카드/항목 그리드 | **DataList** (간단), **DataGrid** (정렬·필터) |
+| 항목 수 ≥ 100, 모두 같은 높이 | **VirtualList** |
+| 가로 슬라이드 (배너·갤러리) | **Carousel** |
+| 무한 스크롤 페이지네이션 | **InfiniteScroll** |
+| 페이지 단위 명시적 이동 | **Pagination** |
+
+---
+
+## 입력: TextInput vs TextArea vs NumberInput vs PriceInput vs DatePicker
+
+| 데이터 타입 | 컴포넌트 |
+|---|---|
+| 짧은 텍스트 (이름·이메일·검색) | **TextInput** |
+| 긴 텍스트 (메모·설명) | **TextArea** |
+| 정수·소수 (수량·점수) | **NumberInput** |
+| 통화 (천 단위 콤마·원/달러) | **PriceInput** |
+| 날짜·기간 | **DatePicker** |
+| 파일 (이미지) | **ImageUpload** |
+
+> ❌ `TextInput type="number"` 금지. `NumberInput` 쓸 것 (단위·step·키보드 ↑↓ 자동).
+
+---
+
+## Tab vs ToggleGroup vs RadioGroup
+
+세 개 다 "n개 중 하나 선택"인데 의미가 다릅니다.
+
+| 컴포넌트 | 의미 | 예시 |
+|---|---|---|
+| **Tab** | 영역 전환 (콘텐츠 스왑) | 설정 페이지의 General/Security/Billing |
+| **ToggleGroup** | 즉시 적용되는 옵션 | 정렬: 최신순/인기순, 뷰: 그리드/리스트 |
+| **RadioGroup** | form 필드의 단일 선택 | 결제 방법: 카드/계좌이체 |
+
+```tsx
+// ❌ 페이지 영역 전환에 RadioGroup
+<RadioGroup onValueChange={setView}>...</RadioGroup>
+{view === 'general' && <GeneralPanel />}
+
+// ✅ 페이지 영역 전환은 Tab
+<Tab.Root>
+  <Tab.List>
+    <Tab.Trigger value="general">General</Tab.Trigger>
+    ...
+  </Tab.List>
+  <Tab.Content value="general"><GeneralPanel /></Tab.Content>
+</Tab.Root>
+```
+
+---
+
+## Anti-patterns 자주 발견
+
+```tsx
+// ❌ raw 버튼 + 임의 색상
+<button className="bg-blue-500 text-white px-4 py-2">저장</button>
+// ✅
+<Button semantic="primary">저장</Button>
+
+// ❌ raw input + 라벨 따로
+<label>이메일<input type="email" /></label>
+// ✅
+<TextInput type="email" label="이메일" />
+
+// ❌ Tooltip 안에 클릭 가능한 콘텐츠
+<Tooltip content={<button onClick={...}>액션</button>}>...</Tooltip>
+// ✅ 클릭 가능 콘텐츠는 Popover 또는 DropdownMenu
+<Popover content={<Button onClick={...}>액션</Button>}>...</Popover>
+
+// ❌ 토글 스위치에 CheckBox
+<CheckBox label="알림 받기" />
+// ✅ 즉시 적용되는 binary 설정은 Switch
+<Switch label="알림 받기" />
+
+// ❌ 동일 form 안에 비슷한 모양 컴포넌트 혼용
+<RadioGroup>...</RadioGroup>
+<ToggleGroup type="single">...</ToggleGroup>
+// ✅ form field 통일 — 같은 form은 Radio 또는 Select 한 가지로
+
+// ❌ 직접 만든 dropdown
+<div onClick={() => setOpen(!open)}>{open && <div>...</div>}</div>
+// ✅
+<DropdownMenu items={...} />
+
+// ❌ !important로 NEXUS 스타일 강제 변경
+<Button className="!bg-red-500">...</Button>
+// ✅ semantic prop 사용
+<Button semantic="danger">...</Button>
+```
+
+---
+
+## 결정 트리 (가장 자주 묻는 케이스)
+
+```
+"드롭다운이 필요해"
+├─ 값 선택? ─ 옵션 ≤7? ─ Select
+│              ─ 옵션 >7? ─ Combobox
+└─ 액션 메뉴? ─ DropdownMenu
+
+"체크 같은 거 필요해"
+├─ 즉시 적용? ─ Switch (1개) / ToggleGroup (n개)
+├─ form field 다중 선택? ─ CheckBox 그룹
+└─ form field 단일 선택? ─ RadioGroup
+
+"팝업 띄워줘"
+├─ 결정 강제? ─ Modal
+├─ 보조 작업? ─ Drawer
+├─ 짧은 힌트? ─ Tooltip
+├─ trigger 옆 정보? ─ Popover
+└─ 액션 메뉴? ─ DropdownMenu
+
+"알림 보여줘"
+├─ 일시적? ─ toast()
+├─ 인라인 영구? ─ Alert
+└─ 확인 필요? ─ modal.confirm()
+```

package/dist/accordion.js

@@ -2,7 +2,6 @@
 
 var chunkCSJDDREF_js = require('./chunks/chunk-CSJDDREF.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/accordion.mjs

@@ -1,3 +1,2 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from './chunks/chunk-XG6QG65W.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/alert.js

@@ -2,7 +2,6 @@
 
 var chunk5PQ3UCKF_js = require('./chunks/chunk-5PQ3UCKF.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/alert.mjs

@@ -1,3 +1,2 @@
 export { Alert, alertVariants } from './chunks/chunk-2UPGFY6E.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/avatar.js

@@ -2,7 +2,6 @@
 
 var chunkMA2VCCIY_js = require('./chunks/chunk-MA2VCCIY.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/avatar.mjs

@@ -1,3 +1,2 @@
 export { Avatar, avatarVariants } from './chunks/chunk-YLO4UKSC.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/badge.js

@@ -2,7 +2,6 @@
 
 var chunkS2GMEC43_js = require('./chunks/chunk-S2GMEC43.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/badge.mjs

@@ -1,3 +1,2 @@
 export { Badge, badgeVariants } from './chunks/chunk-CUTMLBC3.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/breadcrumb.js

@@ -2,7 +2,6 @@
 
 var chunkWATCVNBT_js = require('./chunks/chunk-WATCVNBT.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/breadcrumb.mjs

@@ -1,3 +1,2 @@
 export { Breadcrumb, BreadcrumbItem } from './chunks/chunk-DDY7ENHX.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/button.js

@@ -2,7 +2,6 @@
 
 var chunkP3DZKXG4_js = require('./chunks/chunk-P3DZKXG4.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/button.mjs

@@ -1,3 +1,2 @@
 export { Button, buttonVariants } from './chunks/chunk-VVXQZ4XH.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/carousel.js

@@ -2,7 +2,6 @@
 
 var chunkYCG4FZC3_js = require('./chunks/chunk-YCG4FZC3.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/carousel.mjs

@@ -1,3 +1,2 @@
 export { Carousel, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, useCarousel } from './chunks/chunk-3HHJORN7.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/checkbox.js

@@ -2,7 +2,6 @@
 
 var chunkJ5ZKGPBY_js = require('./chunks/chunk-J5ZKGPBY.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/checkbox.mjs

@@ -1,3 +1,2 @@
 export { CheckBox, boxVariants, checkBoxVariants } from './chunks/chunk-MRRKW5QN.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/chip.js

@@ -2,7 +2,6 @@
 
 var chunkWKCXACMZ_js = require('./chunks/chunk-WKCXACMZ.js');
 require('./chunks/chunk-CZC76ZD5.js');
-require('./chunks/chunk-JNMCYWGY.js');
 
 
 

package/dist/chip.mjs

@@ -1,3 +1,2 @@
 export { Chip, chipVariants } from './chunks/chunk-RX5UKRYK.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';
-import './chunks/chunk-CVYXRSXT.mjs';

package/dist/chunks/chunk-2Z52NPWB.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var chunkRCIBLLSF_js = require('./chunk-RCIBLLSF.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var BREAKPOINT_VAR_MAP = {
+  base: "--nexus-dg-cols",
+  sm: "--nexus-dg-cols-sm",
+  md: "--nexus-dg-cols-md",
+  lg: "--nexus-dg-cols-lg",
+  xl: "--nexus-dg-cols-xl",
+  "2xl": "--nexus-dg-cols-2xl"
+};
+function buildColumnsStyle(columns) {
+  const style = {};
+  if (typeof columns === "number") {
+    style[BREAKPOINT_VAR_MAP.base] = columns;
+    return style;
+  }
+  for (const key of Object.keys(BREAKPOINT_VAR_MAP)) {
+    const value = columns[key];
+    if (typeof value === "number") {
+      style[BREAKPOINT_VAR_MAP[key]] = value;
+    }
+  }
+  return style;
+}
+function DataGrid({
+  list,
+  columns,
+  gap,
+  className,
+  ...rest
+}) {
+  const gridStyle = React__namespace.useMemo(() => {
+    const style = {
+      ...buildColumnsStyle(columns)
+    };
+    if (gap !== void 0) {
+      style["--nexus-dg-gap"] = typeof gap === "number" ? `${gap}px` : gap;
+    }
+    return style;
+  }, [columns, gap]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkRCIBLLSF_js.DataList,
+    {
+      list,
+      className: chunkCZC76ZD5_js.cn("nexus-data-grid", className),
+      style: gridStyle,
+      ...rest
+    }
+  );
+}
+DataGrid.displayName = "DataGrid";
+
+exports.DataGrid = DataGrid;

package/dist/chunks/chunk-46P52MFM.mjs

@@ -0,0 +1,56 @@
+import { DataList } from './chunk-THBE27U3.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var BREAKPOINT_VAR_MAP = {
+  base: "--nexus-dg-cols",
+  sm: "--nexus-dg-cols-sm",
+  md: "--nexus-dg-cols-md",
+  lg: "--nexus-dg-cols-lg",
+  xl: "--nexus-dg-cols-xl",
+  "2xl": "--nexus-dg-cols-2xl"
+};
+function buildColumnsStyle(columns) {
+  const style = {};
+  if (typeof columns === "number") {
+    style[BREAKPOINT_VAR_MAP.base] = columns;
+    return style;
+  }
+  for (const key of Object.keys(BREAKPOINT_VAR_MAP)) {
+    const value = columns[key];
+    if (typeof value === "number") {
+      style[BREAKPOINT_VAR_MAP[key]] = value;
+    }
+  }
+  return style;
+}
+function DataGrid({
+  list,
+  columns,
+  gap,
+  className,
+  ...rest
+}) {
+  const gridStyle = React.useMemo(() => {
+    const style = {
+      ...buildColumnsStyle(columns)
+    };
+    if (gap !== void 0) {
+      style["--nexus-dg-gap"] = typeof gap === "number" ? `${gap}px` : gap;
+    }
+    return style;
+  }, [columns, gap]);
+  return /* @__PURE__ */ jsx(
+    DataList,
+    {
+      list,
+      className: cn("nexus-data-grid", className),
+      style: gridStyle,
+      ...rest
+    }
+  );
+}
+DataGrid.displayName = "DataGrid";
+
+export { DataGrid };

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 }),