@nexus-cross/design-system 1.0.3-beta.1 → 1.0.5-beta.1

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

@@ -32,12 +32,39 @@ alwaysApply: true
    - Figma 디자인과 공용 UI의 스타일이 다를 경우, `className`으로 Figma에 맞게 오버라이드한다
    - Figma에 없는 커스텀 스타일만 Tailwind 유틸리티로 작성한다
 
-## Figma MCP 코드 변환 체크리스트
+## Figma MCP → NEXUS 변환 워크플로우
 
-**Figma MCP에서 받은 코드를 그대로 사용하지 않는다.** 반드시 아래 교체를 수행한다:
+**Figma MCP 도구(get_design_context, get_code 등)의 출력을 절대 그대로 사용하지 않는다.**
+Figma MCP는 바닐라 HTML + Tailwind를 출력하지만, 이 프로젝트는 `@nexus-cross/design-system`을 사용한다.
+**MCP 출력은 "디자인 의도를 파악하는 참고 자료"일 뿐, 최종 코드가 아니다.**
 
-| Figma MCP 결과 (네이티브 HTML) | 교체 대상 (`@nexus-cross/design-system`) |
-|-------------------------------|------------------------------|
+### 필수 3단계 워크플로우
+
+**1단계: 디자인 분석 (MCP 호출)**
+- `get_design_context`로 구조와 레이아웃 파악
+- `get_screenshot`으로 시각적 참조 확인
+- 이 단계에서 MCP가 출력하는 코드는 **읽기만 하고 사용하지 않는다**
+
+**2단계: 컴포넌트 매핑 (코드 작성 전에 반드시 수행)**
+MCP 출력의 각 요소를 NEXUS 컴포넌트로 매핑한다. **코드를 한 줄이라도 쓰기 전에** 이 매핑을 먼저 완료한다.
+
+```
+MCP 출력 분석:
+- <button> 2개 발견 → Button (primary, ghost)
+- <input type="text"> 1개 → TextInput
+- <select> 1개 → Select + SelectItem
+- 색상 #09B498 → bg-accent-primary (NEXUS 토큰)
+- 색상 #1E232E → text-text-primary (NEXUS 토큰)
+- 간격 16px → var(--spacing-padding-md)
+```
+
+**3단계: NEXUS 코드 생성**
+매핑을 기반으로 코드를 작성한다. 이 단계에서는 MCP 출력 코드를 참조하지 않는다.
+
+### 컴포넌트 변환 테이블
+
+| MCP 출력 (네이티브 HTML) | → NEXUS 컴포넌트 |
+|---|---|
 | `<button>`, `<a>` 버튼 스타일 | `<Button>` (variant, size 지정) |
 | `<input type="text">` | `<TextInput>` (prefixIcon, suffixIcon 지원) |
 | `<textarea>` | `<TextArea>` (showCount, maxLength 지원) |
@@ -59,10 +86,65 @@ alwaysApply: true
 | 토스트/알림 | `toast()` |
 | 드로어/바텀시트 | `<Drawer>` |
 | 로딩 스피너 | `<Spinner>` |
+| 스켈레톤 로딩 | `<Skeleton>` |
+| 데이터 리스트 | `<DataList>` |
+| 테이블 | `<Table>` + `<TableRow>` + `<TdColumn>` |
+| 숫자 카운트 애니메이션 | `<Counter>` |
+| 카운트다운 타이머 | `<Countdown>` |
+| 텍스트 말줄임 | `<Ellipsis>` |
 | 흐르는 텍스트 | `<Marquee>` |
+| 무한 스크롤 리스트 | `<InfiniteScroll>` |
+| 대량 리스트 (가상 스크롤) | `<VirtualList>` / `<VirtualGrid>` |
 
 **위 교체를 하지 않고 네이티브 HTML을 사용하면 규칙 위반이다.**
 
+### 색상 변환 테이블
+
+MCP가 출력하는 색상값을 NEXUS 토큰으로 변환한다:
+
+| MCP 출력 색상 | → NEXUS 토큰 |
+|---|---|
+| `#FFFFFF`, `bg-white` | `bg-bg-default` |
+| `#F3F6F8`, `bg-gray-50` | `bg-bg-subtle` |
+| `#1E232E`, `text-gray-900` | `text-text-primary` |
+| `#7E8597`, `text-gray-500` | `text-text-secondary` |
+| `#A2AABA`, `text-gray-400` | `text-text-muted` |
+| `#ECF0F2`, `border-gray-200` | `border-border-default` |
+| `#09B498`, `bg-green-*`, `bg-teal-*` | `bg-accent-primary` |
+| `#7346F3`, `bg-purple-*`, `bg-violet-*` | `bg-accent-secondary` |
+| `#DB0A2D`, `bg-red-*` | `bg-status-danger` |
+| `#00B784` | `bg-status-success` |
+| `#FF9D00`, `bg-amber-*` | `bg-status-warning` |
+| `#0095FF`, `bg-blue-*` | `bg-status-info` |
+
+위에 정확히 매칭되지 않는 색상은 가장 가까운 NEXUS 토큰을 선택한다.
+**어떤 경우에도 hex 값이나 Tailwind 기본 색상(bg-blue-500 등)을 사용하지 않는다.**
+
+### Button variant 판단 기준
+
+Figma에서 버튼의 시각적 스타일을 보고 variant를 결정한다:
+
+| Figma 시각적 특징 | → variant |
+|---|---|
+| 채워진 accent 색상 배경 (초록/틸) | `variant="primary"` |
+| 채워진 회색/중립 배경 | `variant="secondary"` |
+| 테두리만 있고 배경 투명 | `variant="outline"` |
+| 배경/테두리 없이 텍스트만 | `variant="ghost"` |
+| 빨간색/위험 표시 | `variant="danger"` |
+
+### 자기 검증 체크리스트
+
+코드를 출력하기 전에 아래를 확인한다:
+
+- [ ] `<button>`, `<input>`, `<select>`, `<textarea>` 등 네이티브 HTML 폼 요소가 없는가?
+- [ ] hex 색상값(`#...`)이 없는가?
+- [ ] Tailwind 기본 색상(`bg-blue-500`, `text-gray-900` 등)이 없는가?
+- [ ] 모든 import가 `@nexus-cross/design-system`에서 오는가?
+- [ ] 모달은 `ModalTemplate`으로 감쌌는가?
+- [ ] 간격/크기에 하드코딩 px이 없는가?
+
+**하나라도 실패하면 코드를 수정한 후 출력한다.**
+
 ```tsx
 // ❌ Figma MCP 코드 그대로 사용 (금지)
 <button className="bg-[#09B498] text-white px-4 py-2 rounded-lg">확인</button>

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

@@ -1,5 +1,5 @@
 ---
-description: "@nexus-cross/design-system 공용 컴포넌트 사용 규칙 — AI가 코드 생성 시 반드시 따라야 하는 컴포넌트 사용 지침"
+description: '@nexus-cross/design-system 공용 컴포넌트 사용 규칙 — AI가 코드 생성 시 반드시 따라야 하는 컴포넌트 사용 지침'
 alwaysApply: true
 ---
 
@@ -14,51 +14,54 @@ alwaysApply: true
 2. **동일 기능의 컴포넌트를 직접 구현하지 않는다.** 예: 직접 `<button className="...">` 대신 `<Button>`을 사용.
 3. **스타일 커스텀은 `className` prop으로 오버라이드**한다. 래퍼 div를 추가하지 않는다.
 4. **`asChild` prop**을 지원하는 컴포넌트는 렌더링 요소를 변경할 수 있다.
-5. **variants 함수만 가져다 쓸 수도 있다** (예: `buttonVariants({ variant: 'primary', size: 'lg' })`).
+5. **variants 함수만 가져다 쓸 수도 있다** (예: `buttonVariants({ semantic: 'primary', variant: 'contained', size: 'lg' })`).
 
 ## 컴포넌트 매핑 가이드
 
-| Figma 요소 | 사용할 컴포넌트 | import |
-|---|---|---|
-| 버튼 | `<Button>` | `import { Button } from '@nexus-cross/design-system'` |
-| 텍스트 입력 필드 | `<TextInput>` | `import { TextInput } from '@nexus-cross/design-system'` |
-| 텍스트 영역 | `<TextArea>` | `import { TextArea } from '@nexus-cross/design-system'` |
-| 셀렉트/드롭다운 | `<Select>` + `<SelectItem>` | `import { Select, SelectItem } from '@nexus-cross/design-system'` |
-| 체크박스 | `<CheckBox>` | `import { CheckBox } from '@nexus-cross/design-system'` |
-| 라디오 그룹 | `<RadioGroup>` + `<RadioItem>` | `import { RadioGroup, RadioItem } from '@nexus-cross/design-system'` |
-| 토글/스위치 | `<Switch>` | `import { Switch } from '@nexus-cross/design-system'` |
-| 칩/태그/뱃지 | `<Chip>` | `import { Chip } from '@nexus-cross/design-system'` |
-| 로딩 스피너 | `<Spinner>` | `import { Spinner } from '@nexus-cross/design-system'` |
-| 구분선 | `<Divider>` | `import { Divider } from '@nexus-cross/design-system'` |
-| 툴팁 | `<Tooltip>` | `import { Tooltip } from '@nexus-cross/design-system'` |
-| 팝오버 | `<Popover>` | `import { Popover } from '@nexus-cross/design-system'` |
-| 아코디언/접기 | `<Accordion>` | `import { Accordion } from '@nexus-cross/design-system'` |
-| 드로어/바텀시트 | `<Drawer>` | `import { Drawer } from '@nexus-cross/design-system'` |
-| 모달/다이얼로그 | `openModal()` | `import { openModal } from '@nexus-cross/design-system'` |
-| 토스트/알림 | `toast()` | `import { toast } from '@nexus-cross/design-system'` |
-| 테이블 | `<Table>` | `import { Table, TableRow, TdColumn } from '@nexus-cross/design-system'` |
-| 무한 스크롤 | `<InfiniteScroll>` | `import { InfiniteScroll } from '@nexus-cross/design-system'` |
-| 텍스트 말줄임 | `<Ellipsis>` | `import { Ellipsis } from '@nexus-cross/design-system'` |
-| 페이지네이션 | `<Pagination>` | `import { Pagination } from '@nexus-cross/design-system'` |
-| 숫자 입력 | `<NumberInput>` | `import { NumberInput } from '@nexus-cross/design-system'` |
-| 아바타/프로필 | `<Avatar>` | `import { Avatar } from '@nexus-cross/design-system'` |
-| 숫자 카운트 | `<Counter>` | `import { Counter } from '@nexus-cross/design-system'` |
-| 카운트다운 | `<Countdown>` | `import { Countdown } from '@nexus-cross/design-system'` |
-| 마퀴/흐르는 텍스트 | `<Marquee>` | `import { Marquee } from '@nexus-cross/design-system'` |
-| 탭 | `<Tab>` | `import { Tab } from '@nexus-cross/design-system'` |
-| 캐러셀/슬라이더 | `<Carousel>` | `import { Carousel, CarouselSlide } from '@nexus-cross/design-system'` |
-| 가상 스크롤 리스트 | `<VirtualList>` | `import { VirtualList } from '@nexus-cross/design-system'` |
-| 가상 스크롤 그리드 | `<VirtualGrid>` | `import { VirtualGrid } from '@nexus-cross/design-system'` |
+| Figma 요소         | 사용할 컴포넌트                | import                                                                   |
+| ------------------ | ------------------------------ | ------------------------------------------------------------------------ |
+| 버튼               | `<Button>`                     | `import { Button } from '@nexus-cross/design-system'`                    |
+| 텍스트 입력 필드   | `<TextInput>`                  | `import { TextInput } from '@nexus-cross/design-system'`                 |
+| 텍스트 영역        | `<TextArea>`                   | `import { TextArea } from '@nexus-cross/design-system'`                  |
+| 셀렉트/드롭다운    | `<Select>` + `<SelectItem>`    | `import { Select, SelectItem } from '@nexus-cross/design-system'`        |
+| 체크박스           | `<CheckBox>`                   | `import { CheckBox } from '@nexus-cross/design-system'`                  |
+| 라디오 그룹        | `<RadioGroup>` + `<RadioItem>` | `import { RadioGroup, RadioItem } from '@nexus-cross/design-system'`     |
+| 토글/스위치        | `<Switch>`                     | `import { Switch } from '@nexus-cross/design-system'`                    |
+| 칩/태그/뱃지       | `<Chip>`                       | `import { Chip } from '@nexus-cross/design-system'`                      |
+| 로딩 스피너        | `<Spinner>`                    | `import { Spinner } from '@nexus-cross/design-system'`                   |
+| 구분선             | `<Divider>`                    | `import { Divider } from '@nexus-cross/design-system'`                   |
+| 툴팁               | `<Tooltip>`                    | `import { Tooltip } from '@nexus-cross/design-system'`                   |
+| 팝오버             | `<Popover>`                    | `import { Popover } from '@nexus-cross/design-system'`                   |
+| 아코디언/접기      | `<Accordion>`                  | `import { Accordion } from '@nexus-cross/design-system'`                 |
+| 드로어/바텀시트    | `<Drawer>`                     | `import { Drawer } from '@nexus-cross/design-system'`                    |
+| 모달/다이얼로그    | `openModal()`                  | `import { openModal } from '@nexus-cross/design-system'`                 |
+| 토스트/알림        | `toast()`                      | `import { toast } from '@nexus-cross/design-system'`                     |
+| 테이블             | `<Table>`                      | `import { Table, TableRow, TdColumn } from '@nexus-cross/design-system'` |
+| 무한 스크롤        | `<InfiniteScroll>`             | `import { InfiniteScroll } from '@nexus-cross/design-system'`            |
+| 텍스트 말줄임      | `<Ellipsis>`                   | `import { Ellipsis } from '@nexus-cross/design-system'`                  |
+| 페이지네이션       | `<Pagination>`                 | `import { Pagination } from '@nexus-cross/design-system'`                |
+| 숫자 입력          | `<NumberInput>`                | `import { NumberInput } from '@nexus-cross/design-system'`               |
+| 아바타/프로필      | `<Avatar>`                     | `import { Avatar } from '@nexus-cross/design-system'`                    |
+| 숫자 카운트        | `<Counter>`                    | `import { Counter } from '@nexus-cross/design-system'`                   |
+| 카운트다운         | `<Countdown>`                  | `import { Countdown } from '@nexus-cross/design-system'`                 |
+| 마퀴/흐르는 텍스트 | `<Marquee>`                    | `import { Marquee } from '@nexus-cross/design-system'`                   |
+| 탭                 | `<Tab>`                        | `import { Tab } from '@nexus-cross/design-system'`                       |
+| 캐러셀/슬라이더    | `<Carousel>`                   | `import { Carousel, CarouselSlide } from '@nexus-cross/design-system'`   |
+| 가상 스크롤 리스트 | `<VirtualList>`                | `import { VirtualList } from '@nexus-cross/design-system'`               |
+| 가상 스크롤 그리드 | `<VirtualGrid>`                | `import { VirtualGrid } from '@nexus-cross/design-system'`               |
+| 데이터 리스트      | `<DataList>`                   | `import { DataList } from '@nexus-cross/design-system'`                  |
+| 스켈레톤 로딩      | `<Skeleton>`                   | `import { Skeleton } from '@nexus-cross/design-system'`                  |
 
 ## 유틸리티 & 훅
 
-| 기능 | 사용 | import |
-|---|---|---|
-| 클래스 병합 | `cn()` | `import { cn } from '@nexus-cross/design-system'` |
-| 모달 훅 | `useModal()` | `import { useModal } from '@nexus-cross/design-system'` |
-| 뷰포트 감지 | `useInView()` | `import { useInView } from '@nexus-cross/design-system'` |
-| 디바이스 체크 | `useCheckDevice()` | `import { useCheckDevice } from '@nexus-cross/design-system'` |
-| 외부 클릭 | `useClickOutside()` | `import { useClickOutside } from '@nexus-cross/design-system'` |
+| 기능                    | 사용                              | import                                                                              |
+| ----------------------- | --------------------------------- | ----------------------------------------------------------------------------------- |
+| 클래스 병합             | `cn()`                            | `import { cn } from '@nexus-cross/design-system'`                                   |
+| 모달 훅                 | `useModal()`                      | `import { useModal } from '@nexus-cross/design-system'`                             |
+| 뷰포트 감지             | `useInView()`                     | `import { useInView } from '@nexus-cross/design-system'`                            |
+| 디바이스 체크           | `useCheckDevice()`                | `import { useCheckDevice } from '@nexus-cross/design-system'`                       |
+| 외부 클릭               | `useClickOutside()`               | `import { useClickOutside } from '@nexus-cross/design-system'`                      |
+| NumberInput 외부 바인딩 | `numberInputBind(ref, direction)` | `import { numberInputBind, type NumberInputRef } from '@nexus-cross/design-system'` |
 
 ## asChild 패턴
 
@@ -66,7 +69,7 @@ alwaysApply: true
 
 ```tsx
 // Button을 <a> 태그로 렌더링
-<Button asChild variant="primary">
+<Button asChild semantic="primary" variant="contained">
   <a href="/about">About</a>
 </Button>
 
@@ -81,10 +84,17 @@ alwaysApply: true
 컴포넌트를 사용하지 않고 variant 클래스만 필요할 때:
 
 ```tsx
-import { buttonVariants } from '@nexus-cross/design-system';
+import { buttonVariants } from '@nexus-cross/design-system'
 
 // 직접 <a> 태그에 Button 스타일 적용
-<a href="/link" className={buttonVariants({ variant: 'outline', size: 'sm' })}>
+;<a
+  href="/link"
+  className={buttonVariants({
+    semantic: 'primary',
+    variant: 'outlined',
+    size: 'sm',
+  })}
+>
   링크
 </a>
 ```

package/dist/avatar.d.mts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "circle" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {

package/dist/avatar.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "circle" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {

package/dist/button.d.mts

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    semantic?: "primary" | "secondary" | "normal" | "danger" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | null | undefined;
+    radius?: "default" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/button.d.ts

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    semantic?: "primary" | "secondary" | "normal" | "danger" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | null | undefined;
+    radius?: "default" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6MRM5K2N_js = require('./chunks/chunk-6MRM5K2N.js');
+var chunkWVIEIRK2_js = require('./chunks/chunk-WVIEIRK2.js');
 require('./chunks/chunk-QJNQCLMV.js');
 require('./chunks/chunk-JNMCYWGY.js');
 
@@ -8,9 +8,9 @@ require('./chunks/chunk-JNMCYWGY.js');
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunk6MRM5K2N_js.Button; }
+  get: function () { return chunkWVIEIRK2_js.Button; }
 });
 Object.defineProperty(exports, "buttonVariants", {
   enumerable: true,
-  get: function () { return chunk6MRM5K2N_js.buttonVariants; }
+  get: function () { return chunkWVIEIRK2_js.buttonVariants; }
 });

package/dist/button.mjs

@@ -1,3 +1,3 @@
-export { Button, buttonVariants } from './chunks/chunk-4ITJA3IS.mjs';
+export { Button, buttonVariants } from './chunks/chunk-NTN55ZIX.mjs';
 import './chunks/chunk-XALPBGSC.mjs';
 import './chunks/chunk-CVYXRSXT.mjs';

package/dist/checkbox.d.mts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const checkBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     shape?: "round" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const boxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     shape?: "round" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, VariantProps<typeof checkBoxVariants> {

package/dist/checkbox.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const checkBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     shape?: "round" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const boxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     shape?: "round" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, VariantProps<typeof checkBoxVariants> {

package/dist/chip.d.mts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const chipVariants: (props?: ({
-    variant?: "accent" | "outline" | "default" | "filled" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "accent" | "default" | "filled" | "outline" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {
     asChild?: boolean;

package/dist/chip.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const chipVariants: (props?: ({
-    variant?: "accent" | "outline" | "default" | "filled" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "accent" | "default" | "filled" | "outline" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {
     asChild?: boolean;

package/dist/chunks/chunk-5XVEYVYA.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.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 Skeleton = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    as: Tag = "div",
+    circle = false,
+    width,
+    height,
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      role: "status",
+      "aria-label": "Loading",
+      className: chunkQJNQCLMV_js.cn(
+        "nx:relative nx:overflow-hidden",
+        circle ? "nx:rounded-full" : "nx:rounded-md",
+        "nx:bg-gradient-to-r nx:from-surface-hover nx:via-surface-default nx:to-surface-hover",
+        "nx:bg-[length:300%_100%]",
+        "nx:animate-skeleton",
+        className
+      ),
+      style: { width, height, ...style },
+      ...props,
+      children: children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nx:opacity-0", children })
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+exports.Skeleton = Skeleton;

package/dist/chunks/chunk-B7UU3FSS.mjs

@@ -0,0 +1,37 @@
+import { cn } from './chunk-XALPBGSC.mjs';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var Skeleton = React.forwardRef(
+  ({
+    className,
+    children,
+    as: Tag = "div",
+    circle = false,
+    width,
+    height,
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(
+        "nx:relative nx:overflow-hidden",
+        circle ? "nx:rounded-full" : "nx:rounded-md",
+        "nx:bg-gradient-to-r nx:from-surface-hover nx:via-surface-default nx:to-surface-hover",
+        "nx:bg-[length:300%_100%]",
+        "nx:animate-skeleton",
+        className
+      ),
+      style: { width, height, ...style },
+      ...props,
+      children: children && /* @__PURE__ */ jsx("span", { className: "nx:opacity-0", children })
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

package/dist/chunks/{chunk-FKHW7QYG.js → chunk-DDMZSNTG.js}

@@ -1,11 +1,11 @@
 'use strict';
 
+var chunkHHXDOKXY_js = require('./chunk-HHXDOKXY.js');
+var chunkNHDGKOAM_js = require('./chunk-NHDGKOAM.js');
 var chunkT2IY2TSR_js = require('./chunk-T2IY2TSR.js');
 var chunkXEHFB62A_js = require('./chunk-XEHFB62A.js');
 var chunkINP2AH3B_js = require('./chunk-INP2AH3B.js');
 var chunkHUPAHDJ7_js = require('./chunk-HUPAHDJ7.js');
-var chunkHHXDOKXY_js = require('./chunk-HHXDOKXY.js');
-var chunkNHDGKOAM_js = require('./chunk-NHDGKOAM.js');
 var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -287,7 +287,7 @@ var modalInnerVariants = classVarianceAuthority.cva(
         "slide-right": "nx:h-full nx:rounded-none",
         "full-page": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
         "full-page-reverse": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
-        draggable: "nx:w-auto nx:min-w-[320px] nx:sm:w-auto nx:overflow-visible"
+        draggable: "nx:min-w-[320px] nx:overflow-visible"
       },
       hasFooter: {
         true: "",