@xonic0506/sonic-ui 0.5.0 → 0.6.1

package/DESIGN.md

@@ -70,6 +70,7 @@ Figma Variable 이름이 그대로 CSS 변수가 돼요. `/`는 `-`로 바꾸고
 | `color/text/warning` | amber/700 `#85520A` | amber/300 `#EEC46A` | 주의 문구, 아이콘 |
 | `color/border/warning` | amber/600 | amber/400 | 주의 강조 테두리 |
 | `color/bg/danger-subtle` | red/50 `#FCEDEC` | red/950 `#2B1311` | danger Badge(subtle) |
+| `color/bg/selected` | cobalt/50 `#EEF1FF` | cobalt/950 `#18214D` | DataGrid 선택된 행 (hover `bg/subtle`과 구분) |
 
 글자와 바탕 조합은 모두 WCAG 4.5:1 이상이에요. 토큰을 바꾸면 `npm run check:contrast`로 다시 확인해요(배포 전 검사에도 들어 있어요).
 
@@ -254,7 +255,7 @@ hover, focus는 **컴포넌트 variant로 만들지 않아요.** React prop이
 
 | 계층 | 위치 | 기준 | 예 |
 |---|---|---|---|
-| **Core** | sonic-ui `src/components/` | 더 나눌 수 없고, 도메인을 전혀 모름 | Button, Input, Textarea, Checkbox, RadioGroup, Switch, Select, Text, Card, Avatar, Dialog, AlertDialog, Menu, Popover, Tooltip, Tabs, Separator, Toast, Badge, Progress, Link, Table, ToggleGroup, Accordion, FileDropzone, FileList, Field, Skeleton, EmptyState, ErrorState, ErrorPage |
+| **Core** | sonic-ui `src/components/` | 더 나눌 수 없고, 도메인을 전혀 모름 | Button, Input, Textarea, Checkbox, RadioGroup, Switch, Select, Text, Card, Avatar, Dialog, AlertDialog, Menu, Popover, Tooltip, Tabs, Separator, Toast, Badge, Progress, Link, Table, DataGrid, Pagination, ToggleGroup, Accordion, FileDropzone, FileList, Field, Skeleton, EmptyState, ErrorState, ErrorPage |
 | **Pattern** | sonic-ui `src/patterns/` | Core 조합이고 도메인을 모르지만, **두 프로젝트 이상에서 같은 형태로 복사됨** | (아직 없음) |
 | **Domain** | 각 프로젝트 | 도메인 타입, API, 비즈니스 로직 중 하나라도 앎 | `UserProfileCard`, `ApiKeyList` |
 
@@ -302,6 +303,7 @@ Figma Core 페이지의 컴포넌트 속성 이름 = React props 이름이에요
 | `disabled` | boolean | `false` |
 | `children` | 버튼 문구. 아이콘은 문구 앞뒤에 lucide 컴포넌트로 넣음 | — |
 | `loading` | boolean. 스피너 + 클릭 막기 + `aria-busy` | `false` |
+| `focusableWhenDisabled` | boolean. 비활성이 돼도 포커스를 유지해요(`aria-disabled`). 누른 뒤 비활성이 되는 버튼에 써요(Pagination의 처음·마지막) | `false` |
 | `aria-label` | icon 크기일 때 **필수** (타입으로 강제) | — |
 
 | | sm | md | lg |
@@ -716,8 +718,110 @@ toast.add({ title: 'API 키를 만들었어요', description: '키는 지금 한
 | prop | 값 |
 |---|---|
 | `TableHead`, `TableCell`의 `align` | `start` · `end` (숫자 열은 `end`) |
+| `TableHead`의 `sort`, `onSort` | `asc` · `desc` · `none`. `onSort`를 넘기면 머리글이 버튼이 되고 `aria-sort`가 붙어요 |
+| `TableRow`의 `selected`, `interactive`, `dragging` | 선택 `bg/selected`, hover `bg/subtle`(interactive일 때만), 이동 중 모양 |
+| `TableHead`의 `handle` | 컬럼 이동 손잡이. hover·포커스 때만 보이고 정렬 반대쪽 끝에 놓여요 (DataGrid가 씀) |
+| `TableHead`, `TableCell`의 `pinned` | `left` · `right`. 가로 스크롤 중에도 붙어 있고 경계에 1px `border/default`. 여러 열을 고정하면 `style.left`·`style.right`로 위치를 넘겨요 |
 
-여러 항목의 같은 속성을 비교할 때 써요. 행 높이 40(`space/10`), 좌우 padding `space/3`, 행 아래 1px `border/default`. 머리글 `label` + `text/muted`, 본문 `body` + `text/default`, `align="end"`인 본문 칸은 숫자라서 `mono`예요. 줄무늬나 hover 바탕은 쓰지 않아요. 표가 부모보다 넓으면 가로로 스크롤해요.
+여러 항목의 같은 속성을 비교할 때 써요. 행 높이 40(`space/10`), 좌우 padding `space/3`, 행 아래 1px `border/default`. 머리글 `label` + `text/muted`, 본문 `body` + `text/default`, `align="end"`인 본문 칸은 숫자라서 `mono`예요. 줄무늬는 쓰지 않고, hover 바탕은 `interactive` 행에만 써요. 표가 부모보다 넓으면 가로로 스크롤해요.
+
+위 상태 props는 모양만 바꿔요. 정렬·선택·이동 상태를 직접 관리하기 번거로우면 DataGrid를 써요. 정렬된 머리글은 `text/default` + `arrow-up`/`arrow-down` 16(간격 `space/1`)이고, 칸끼리 붙어 있어서 포커스 링은 안쪽(offset −2px)에 그려요.
+
+### DataGrid
+
+```tsx
+<DataGrid
+  aria-label="API 키"
+  rows={keys}
+  getRowId={row => row.id}
+  columns={[
+    { field: 'name', header: '이름', type: 'text', pinned: 'left', width: 160, sortable: true },
+    { field: 'requests', header: '요청 수', type: 'number', sortable: true },
+    { field: 'status', header: '상태', type: 'badge', tones: { active: 'success', revoked: 'danger' }, labels: { active: '활성', revoked: '폐기됨' } },
+    { field: 'createdAt', header: '만든 날', type: 'date' },
+    { field: 'enabled', header: '사용', type: 'switch', onChange: (row, on) => toggle(row.id, on) },
+    { id: 'actions', type: 'actions', pinned: 'right', actions: [
+      { label: '이름 바꾸기', icon: Pencil, onClick: rename },
+      { label: '삭제', icon: Trash2, tone: 'danger', onClick: confirmDelete },
+    ] },
+  ]}
+  selection={selected} onSelectionChange={setSelected}
+  onRowOrderChange={ids => saveOrder(ids)}
+  loading={isLoading}
+  emptyState={<EmptyState title="API 키가 없어요" action={<Button>API 키 만들기</Button>} />}
+/>
+```
+
+정렬, 행 선택, 좌/우 고정, 컬럼·행 이동이 필요한 목록에 써요. 보여 주기만 하는 표는 Table을 써요. 모양은 Table이 그리고, 상태는 DataGrid가 관리해요(TanStack Table, dnd-kit. 쓰는 쪽은 설치하지 않아요).
+
+| prop | 값 |
+|---|---|
+| `rows`, `getRowId` | 행 데이터와 행 id. `rows`에는 **원본 값**을 넣어요(숫자는 number, 날짜는 ISO 문자열) |
+| `columns` | 열 정의 배열. `type`에 따라 필요한 속성이 타입으로 강제돼요(아래 표) |
+| `aria-label` | 표 이름 (필수) |
+| `sorting`, `defaultSorting`, `onSortingChange` | `{ id, desc }` 또는 `null`. 한 번에 한 열만 정렬해요 |
+| `selection`, `onSelectionChange` | 선택된 행 id 배열. `onSelectionChange`를 넘기면 맨 앞에 체크박스 열이 생겨요 |
+| `columnOrder`, `onColumnOrderChange` | 열 id 순서. `onColumnOrderChange`를 넘기면 머리글을 끌어서 옮길 수 있어요 |
+| `onRowOrderChange` | `(ids) => void`. 넘기면 핸들 열이 생겨요. 정렬 중에는 핸들을 숨겨요 |
+| `loading` | Skeleton 행 5개 + `aria-busy` |
+| `emptyState`, `errorState` | 행이 없을 때, 불러오기 실패했을 때 본문 자리에 보여 줄 EmptyState·ErrorState |
+| `pagination` | 넘기면 표 아래에 Pagination이 붙어요. `{ page, defaultPage, onPageChange, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, showFirstLast, rowCount }` (모두 선택, 페이지는 1부터) |
+
+| `type` | 보여 주는 것 | 추가 속성 |
+|---|---|---|
+| `text` | `body` | — |
+| `number` | `mono`, 오른쪽 정렬, 천 단위 쉼표 | — |
+| `date` · `datetime` | `mono`, `YYYY-MM-DD` · `YYYY-MM-DD HH:mm:ss` (브라우저 현지 시간) | — |
+| `badge` | Badge subtle | `tones`(값 → tone, 필수), `labels`(값 → 문구). 없는 값은 neutral |
+| `switch` | Switch, 누르면 바로 적용 | `onChange(row, checked)` (필수) |
+| `actions` | 1개면 ghost `icon-sm` 버튼, 2개 이상이면 `ellipsis` Menu | `actions: { label, icon?, tone?, onClick(row) }[]` (필수) |
+
+공통 열 속성: `header`, `width`(px), `pinned`(`left` · `right`), `sortable`. 고정 열에는 `width`를 꼭 줘요(다음 고정 열 위치 계산에 써요). `select`·`handle` 열은 너비 40이고, 있으면 항상 왼쪽에 고정돼요.
+
+- 행 hover `bg/subtle`, 선택 `bg/selected`. 고정 열 경계는 1px `border/default`이고 그림자는 쓰지 않아요(§1 원칙 4).
+- 컬럼 이동 중인 머리글은 `bg/subtle`, 행 이동 중인 행은 `bg/surface` + 1px `border/default` + `radius/md`. 놓을 위치는 2px `border/focus` 선이에요.
+- 핸들은 `grip-vertical` 16(`text/muted`, hover `text/default`)이고 바깥 2px 포커스 링을 그려요. 키보드로도 옮겨요: 핸들에 포커스 → Space로 들기 → 화살표 → Space로 놓기(Esc 취소). 화면 낭독기 안내는 한국어 해요체예요.
+- 위험한 actions는 바로 실행하지 말고 `onClick`에서 AlertDialog를 열어요(§10 Menu).
+- 행이 많으면(100개 초과) 보이는 행만 그려요. 이때는 `className`으로 높이를 정해 주세요(예: `h-96`). 그 안에서 세로로 스크롤돼요.
+- Next.js: `columns`에 함수가 들어 있어서 서버 컴포넌트에서 넘길 수 없어요. DataGrid는 클라이언트 컴포넌트 안에서 정의해요.
+
+**페이지로 나누기**
+
+```tsx
+<DataGrid rows={allKeys} pagination={{ defaultPageSize: 20 }} … />                       // 클라이언트: rows 전체를 DataGrid가 나눠요
+<DataGrid rows={pageRows} pagination={{ page, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, rowCount: total }}
+  sorting={sort} onSortingChange={setSort} … />                                          // 서버: 현재 페이지 rows + 전체 개수
+```
+
+- `rowCount`가 없으면 클라이언트 모드예요. 정렬하거나 페이지당 행 수를 바꾸면 1페이지로 돌아가요.
+- `rowCount`를 넘기면 서버 모드예요. 받은 `rows`를 그대로 보여 주고, 정렬도 서버가 해요(`onSortingChange`로 받아 다시 불러와요). 한 페이지만 정렬하면 결과가 틀리기 때문이에요.
+- 전체 선택 체크박스는 **현재 페이지** 행만 골라요. 다른 페이지에서 고른 행은 그대로 남아요.
+- 행 이동은 현재 페이지 안에서만 돼요. 페이지네이션을 켜면 가상 스크롤은 쓰지 않아요.
+- 행이 없거나 불러오기 실패면 Pagination을 숨겨요.
+
+### Pagination
+
+```tsx
+<Pagination page={page} pageCount={20} onPageChange={setPage} />
+<Pagination page={page} pageCount={20} onPageChange={setPage} pageSize={pageSize} onPageSizeChange={setPageSize} showFirstLast={false} />
+```
+
+| prop | 값 | 기본값 |
+|---|---|---|
+| `page`, `onPageChange` | 현재 페이지(1부터)와 바뀔 때 | (필수) |
+| `pageCount` | 전체 페이지 수 | (필수) |
+| `pageSize`, `onPageSizeChange` | 넘기면 왼쪽에 "페이지당 행" Select가 생겨요 | — |
+| `pageSizeOptions` | 페이지당 행 수 목록 | `[10, 20, 50]` |
+| `showFirstLast` | 처음·마지막 버튼 | `true` |
+| `aria-label` | 페이지 이동 영역 이름 | "페이지" |
+
+목록을 페이지로 나눌 때 써요. Table이나 카드 목록과 함께 쓰고, DataGrid는 `pagination` prop으로 붙여요.
+
+- 왼쪽에 페이지당 행 수(라벨 `label` + `text/muted`, Select는 글자 너비에 맞춰요, 라벨과 `space/2`), 오른쪽에 `« ‹ 1 … 4 5 6 … 20 › »`. 둘 사이 `space/4`, 버튼 사이 `space/1`.
+- 번호 칸 28×28(`space/7`), `radius/md`, `mono`. 현재 페이지는 `bg/subtle` + `text/default` + `aria-current="page"`이고 강조색은 쓰지 않아요(§1 원칙 2). 다른 번호는 `text/muted`, hover `bg/subtle` + `text/default`. 포커스 링은 바깥 2px(offset 2px).
+- 번호는 처음·마지막과 현재 양옆 1개만 보이고, 나머지는 `…`로 줄여요. 항상 최대 7칸이라 너비가 흔들리지 않아요.
+- 처음·이전·다음·마지막은 ghost `icon-sm`(`chevrons-left`, `chevron-left`, `chevron-right`, `chevrons-right`)이고, 첫 페이지에서는 처음·이전이, 마지막 페이지에서는 다음·마지막이 비활성이에요.
+- 좁은 화면(640 미만)에서는 번호 대신 `4 / 20`(`mono-caption` + `text/muted`)만 보이고, 행 수 라벨도 숨겨요(Select 이름은 `aria-label`로 남아요). Figma `viewport=mobile`.
 
 ### ToggleGroup
 
@@ -862,11 +966,13 @@ Sonic 팀은 Figma Pro 요금제라 Code Connect(Organization 이상)를 쓸 수
 | Badge | `57:3498` | `<Badge tone variant>` (`children` → 자식 문구) | `src/components/badge.tsx` |
 | Progress | `58:5093` | `<Progress value max label>` (`value` variant는 채움 미리보기, `value text`는 코드가 자동 표시) | `src/components/progress.tsx` |
 | Link | `65:3733` | `<Link href external>` (`children` → 자식 문구) | `src/components/link.tsx` |
-| Table Cell · Table | `65:3742` · `65:3743` | `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell` (`type=header` → `TableHead`, `align` → 같은 prop) | `src/components/table.tsx` |
+| Table Cell · Table | `65:3742` · `65:3743` | `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell` (`type=header` → `TableHead`, `align`·`sort`·`pinned` → 같은 prop, `state=hover·selected` → `TableRow`의 `interactive`·`selected`) | `src/components/table.tsx` |
+| Pagination Item · Pagination | `138:5684` · `138:5747` | `<Pagination page pageCount onPageChange pageSize onPageSizeChange showFirstLast>` (`state=current` → 현재 `page`, `viewport` → prop 아님, 좁은 화면은 코드가 자동 처리) | `src/components/pagination.tsx` |
+| Data Grid Cell | `130:6234` | `<DataGrid columns>`의 `columns[].type` (`type` 값이 같음. `select`·`handle`은 `onSelectionChange`·`onRowOrderChange`로 생기는 열) | `src/components/data-grid.tsx` |
 | Toggle Item · Toggle Group | `66:3760` · `66:3761` | `<ToggleGroup multiple>` + `<ToggleGroupItem value disabled>` (`pressed` → 현재 값, `content=icon`이면 `aria-label`) | `src/components/toggle-group.tsx` |
 | Accordion Item · Accordion | `66:3792` · `66:3793` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionPanel` (`open` → 현재 값, `title`/`content` → 자식) | `src/components/accordion.tsx` |
 | File Dropzone · File Item | `71:4191` · `72:4251` | `<FileDropzone variant accept multiple maxSize maxFiles onFilesChange>` (`state` → 끌어다 놓기·거부·`disabled`), `<FileList layout items onRemove onRetry>` (`status` → `items[].status`) | `src/components/file-upload.tsx` |
 | Illustration (5개) | Foundations `Source illustrations` | 제품 화면은 EmptyState·ErrorState·ErrorPage 안에서 써요. 문서 화면은 `illustrations['error-404']`로 URL(§3.7) | `src/illustrations/*.webp` |
-| Icon (37개) | Foundations `Source icons` | `lucide-react`의 같은 이름 컴포넌트 (`Icon / chevron-down` → `<ChevronDown />`) | 쓰는 쪽에서 설치 |
+| Icon (42개) | Foundations `Source icons` | `lucide-react`의 같은 이름 컴포넌트 (`Icon / chevron-down` → `<ChevronDown />`) | 쓰는 쪽에서 설치 |
 
 Figma 속성 → props 변환 규칙: variant 속성은 같은 이름의 prop으로, 텍스트 속성 `children`은 자식으로, boolean `header`/`footer`는 해당 하위 컴포넌트를 넣을지 말지로 옮겨요. Button의 `iconLeft`/`iconRight`(+ `leftIcon`/`rightIcon` 교체)와 Button Icon의 `icon`은 prop이 아니라 **자식 순서**예요: `<Button><Plus />추가하기<ChevronDown /></Button>`.

package/dist/components/button.d.ts

@@ -6,6 +6,8 @@ interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     render?: React.ReactElement;
     /** 진행 중: 스피너 표시, 클릭 막기, 포커스 유지, aria-busy */
     loading?: boolean;
+    /** 비활성이 돼도 포커스를 잃지 않아요. 누른 뒤 비활성이 되는 버튼에 써요 (예: 마지막 페이지) */
+    focusableWhenDisabled?: boolean;
 }
 /** 아이콘만 있는 버튼은 읽을 글자가 없어서 aria-label이 필수예요 */
 export type ButtonProps = ButtonBaseProps & ({

package/dist/components/button.js

@@ -6,22 +6,22 @@ import { Button as r } from "@base-ui/react/button";
 import { LoaderCircle as i } from "lucide-react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/button.tsx
-var c = n.forwardRef(function({ variant: n, size: c, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
-	let g = /* @__PURE__ */ o(i, { className: "sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" });
+var c = n.forwardRef(function({ variant: n, size: c, className: l, render: u, loading: d, disabled: f, focusableWhenDisabled: p, children: m, ...h }, g) {
+	let _ = /* @__PURE__ */ o(i, { className: "sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" });
 	return /* @__PURE__ */ o(r, {
-		ref: h,
+		ref: g,
 		render: u,
 		nativeButton: !u || u.type === "button",
 		disabled: f || d,
-		focusableWhenDisabled: d,
+		focusableWhenDisabled: d || p,
 		"aria-busy": d || void 0,
 		"data-loading": d ? "" : void 0,
 		className: e(t({
 			variant: n,
 			size: c
 		}), l),
-		...m,
-		children: d && c?.startsWith("icon-") ? g : d ? /* @__PURE__ */ s(a, { children: [g, p] }) : p
+		...h,
+		children: d && c?.startsWith("icon-") ? _ : d ? /* @__PURE__ */ s(a, { children: [_, m] }) : m
 	});
 });
 //#endregion

package/dist/components/data-grid.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { type RowData } from '@tanstack/react-table';
+import { type BadgeProps } from './badge';
+type Field<Row> = Extract<keyof Row, string>;
+type BadgeTone = NonNullable<BadgeProps['tone']>;
+interface ColumnBase {
+    header?: string;
+    /** px. 고정 열에는 꼭 줘요 (다음 고정 열 위치 계산) */
+    width?: number;
+    pinned?: 'left' | 'right';
+}
+interface FieldColumn<Row> extends ColumnBase {
+    field: Field<Row>;
+    /** 기본은 field */
+    id?: string;
+    sortable?: boolean;
+}
+export interface DataGridAction<Row> {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** danger는 맨 아래 구분선 뒤에 놓여요. 실행 전에 AlertDialog로 확인해요 */
+    tone?: 'default' | 'danger';
+    onClick: (row: Row) => void;
+}
+/** Figma Data Grid Cell의 type과 같은 이름이에요 */
+export type DataGridColumn<Row> = (FieldColumn<Row> & {
+    type: 'text' | 'number' | 'date' | 'datetime';
+}) | (FieldColumn<Row> & {
+    type: 'badge';
+    tones: Record<string, BadgeTone>;
+    labels?: Record<string, string>;
+}) | (FieldColumn<Row> & {
+    type: 'switch';
+    onChange: (row: Row, checked: boolean) => void;
+}) | (ColumnBase & {
+    type: 'actions';
+    id: string;
+    actions: DataGridAction<Row>[];
+});
+export interface DataGridSort {
+    id: string;
+    desc: boolean;
+}
+export interface DataGridPagination {
+    /** 현재 페이지 (1부터) */
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    pageSize?: number;
+    /** 기본 20 */
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    showFirstLast?: boolean;
+    /** 서버에서 나눌 때 전체 행 수 */
+    rowCount?: number;
+}
+export interface DataGridProps<Row> {
+    /** 원본 값을 넣어요 (숫자는 number, 날짜는 ISO 문자열) */
+    rows: Row[];
+    getRowId: (row: Row) => string;
+    columns: DataGridColumn<Row>[];
+    'aria-label': string;
+    sorting?: DataGridSort | null;
+    defaultSorting?: DataGridSort | null;
+    onSortingChange?: (sorting: DataGridSort | null) => void;
+    /** 선택된 행 id. onSelectionChange를 넘기면 체크박스 열이 생겨요 */
+    selection?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** 열 id 순서. onColumnOrderChange를 넘기면 머리글을 끌어서 옮길 수 있어요 */
+    columnOrder?: string[];
+    onColumnOrderChange?: (ids: string[]) => void;
+    /** 넘기면 핸들 열이 생겨요. 정렬 중에는 핸들을 숨겨요 */
+    onRowOrderChange?: (ids: string[]) => void;
+    loading?: boolean;
+    emptyState?: React.ReactNode;
+    errorState?: React.ReactNode;
+    /** 넘기면 표 아래에 Pagination이 붙어요. rowCount를 넘기면 서버 모드(받은 rows를 그대로, 정렬도 서버) */
+    pagination?: DataGridPagination;
+    /** 행이 많으면 보이는 행만 그려요. 이때 높이를 정해 주세요 (예: h-96) */
+    className?: string;
+}
+/** Figma Data Grid Cell의 type 목록 (select·handle은 props로 생기는 열) */
+export declare const dataGridCellTypes: readonly ['text', 'number', 'date', 'datetime', 'badge', 'switch', 'actions', 'select', 'handle'];
+export declare function DataGrid<Row extends RowData>({ rows, getRowId, columns, 'aria-label': ariaLabel, sorting, defaultSorting, onSortingChange, selection, onSelectionChange, columnOrder, onColumnOrderChange, onRowOrderChange, loading, emptyState, errorState, pagination, className, }: DataGridProps<Row>): React.JSX.Element;
+export {};

package/dist/components/data-grid.js

@@ -0,0 +1,415 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { Button as t } from "./button.js";
+import { Checkbox as n } from "./checkbox.js";
+import { Switch as r } from "./switch.js";
+import { Skeleton as i } from "./skeleton.js";
+import { Menu as a, MenuItem as o, MenuPopup as s, MenuSeparator as c, MenuTrigger as l } from "./menu.js";
+import { Badge as u } from "./badge.js";
+import { TableBody as d, TableCell as f, TableHead as p, TableHeader as ee, TableRow as m, tableClass as te } from "./table.js";
+import { formatDate as h, formatDateTime as g, formatNumber as _ } from "../lib/format.js";
+import { Pagination as ne } from "./pagination.js";
+import * as v from "react";
+import { Ellipsis as y, GripVertical as b } from "lucide-react";
+import { Fragment as re, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { columnOrderingFeature as C, columnPinningFeature as w, columnSizingFeature as T, createPaginatedRowModel as ie, createSortedRowModel as E, rowPaginationFeature as D, rowSortingFeature as O, tableFeatures as k, useTable as ae } from "@tanstack/react-table";
+import { useVirtualizer as oe } from "@tanstack/react-virtual";
+import { DndContext as se, KeyboardSensor as ce, PointerSensor as le, closestCenter as ue, useSensor as de, useSensors as fe } from "@dnd-kit/core";
+import { SortableContext as pe, arrayMove as me, horizontalListSortingStrategy as he, sortableKeyboardCoordinates as ge, useSortable as A, verticalListSortingStrategy as _e } from "@dnd-kit/sortable";
+//#region src/components/data-grid.tsx
+var j = "__select", M = "__handle", ve = 100, ye = k({
+	rowSortingFeature: O,
+	sortedRowModel: E(),
+	rowPaginationFeature: D,
+	paginatedRowModel: ie(),
+	columnOrderingFeature: C,
+	columnSizingFeature: T,
+	columnPinningFeature: w
+}), be = (e, t, n) => {
+	let r = e.getValue(n), i = t.getValue(n);
+	return r == null || i == null ? r == null ? i == null ? 0 : -1 : 1 : typeof r == "number" && typeof i == "number" ? r - i : typeof r == "boolean" ? Number(r) - Number(i) : String(r).localeCompare(String(i), "ko", { numeric: !0 });
+}, N = (e) => "field" in e ? e.id ?? e.field : e.id, xe = {
+	before: "sn:shadow-[inset_0_2px_0_var(--sn-color-border-focus)]",
+	after: "sn:shadow-[inset_0_-2px_0_var(--sn-color-border-focus)]"
+}, P = {
+	before: "sn:shadow-[inset_2px_0_0_var(--sn-color-border-focus)]",
+	after: "sn:shadow-[inset_-2px_0_0_var(--sn-color-border-focus)]"
+}, F = "sn:flex sn:size-4 sn:cursor-grab sn:items-center sn:justify-center sn:rounded-md sn:border-0 sn:bg-transparent sn:p-0 sn:text-muted sn:hover:text-default sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:[&_svg]:size-4";
+function I(e, t) {
+	let n = (e) => t().indexOf(String(e)) + 1;
+	return {
+		onDragStart: ({ active: t }) => `${e}을 들었어요. 지금 ${n(t.id)}번째예요.`,
+		onDragOver: ({ over: e }) => e ? `${n(e.id)}번째 위치예요.` : "놓을 수 없는 위치예요.",
+		onDragEnd: ({ over: e }) => e ? `${n(e.id)}번째에 놓았어요.` : "옮기지 않았어요.",
+		onDragCancel: () => "옮기기를 취소했어요."
+	};
+}
+var Se = { draggable: "Space로 들고, 화살표로 옮긴 다음 Space로 놓아요. Esc로 취소해요." };
+function Ce(e, t) {
+	let [n, r] = v.useState(null);
+	return {
+		drop: n,
+		onDragOver: ({ active: t, over: n }) => {
+			if (!n || n.id === t.id) return r(null);
+			r({
+				id: String(n.id),
+				side: e.indexOf(String(n.id)) > e.indexOf(String(t.id)) ? "after" : "before"
+			});
+		},
+		onDragEnd: ({ active: n, over: i }) => {
+			r(null), i && i.id !== n.id && t(me(e, e.indexOf(String(n.id)), e.indexOf(String(i.id))));
+		},
+		onDragCancel: () => r(null)
+	};
+}
+function L(e, t, n) {
+	let [r, i] = v.useState(t);
+	return [e === void 0 ? r : e, (t) => {
+		e === void 0 && i(t), n?.(t);
+	}];
+}
+function we(e, t) {
+	let n = e.getIsPinned(), r = t || n ? e.getSize() : void 0;
+	return {
+		width: r,
+		minWidth: r,
+		left: n === "start" ? e.getStart("start") : void 0,
+		right: n === "end" ? e.getAfter("end") : void 0
+	};
+}
+function Te({ actions: e, row: n }) {
+	if (e.length === 1) {
+		let [r] = e, i = r.icon;
+		return i ? /* @__PURE__ */ x(t, {
+			size: "icon-sm",
+			variant: "ghost",
+			"aria-label": r.label,
+			onClick: () => r.onClick(n),
+			children: /* @__PURE__ */ x(i, {})
+		}) : /* @__PURE__ */ x(t, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => r.onClick(n),
+			children: r.label
+		});
+	}
+	let r = e.filter((e) => e.tone !== "danger"), i = e.filter((e) => e.tone === "danger"), u = (e) => {
+		let t = e.icon;
+		return /* @__PURE__ */ S(o, {
+			tone: e.tone,
+			onClick: () => e.onClick(n),
+			children: [t && /* @__PURE__ */ x(t, {}), e.label]
+		}, e.label);
+	};
+	return /* @__PURE__ */ S(a, { children: [/* @__PURE__ */ x(l, {
+		render: /* @__PURE__ */ x(t, {
+			size: "icon-sm",
+			variant: "ghost",
+			"aria-label": "더 보기"
+		}),
+		children: /* @__PURE__ */ x(y, {})
+	}), /* @__PURE__ */ S(s, { children: [
+		r.map(u),
+		r.length > 0 && i.length > 0 && /* @__PURE__ */ x(c, {}),
+		i.map(u)
+	] })] });
+}
+function Ee(e, t, n) {
+	switch (e.type) {
+		case "text": return n == null ? "" : String(n);
+		case "number": return _(n);
+		case "date": return h(n);
+		case "datetime": return g(n);
+		case "badge": {
+			let t = n == null ? "" : String(n);
+			return /* @__PURE__ */ x(u, {
+				tone: e.tones[t] ?? "neutral",
+				children: e.labels?.[t] ?? t
+			});
+		}
+		case "switch": return /* @__PURE__ */ x(r, {
+			checked: !!n,
+			onCheckedChange: (n) => e.onChange(t, n),
+			children: /* @__PURE__ */ x("span", {
+				className: "sn:sr-only",
+				children: e.header
+			})
+		});
+		case "actions": return /* @__PURE__ */ x(Te, {
+			actions: e.actions,
+			row: t
+		});
+	}
+}
+function De({ id: t, label: n, drop: r, className: i, ...a }) {
+	let { setNodeRef: o, setActivatorNodeRef: s, attributes: c, listeners: l, isDragging: u } = A({
+		id: t,
+		attributes: { roleDescription: "옮길 수 있는 열" }
+	});
+	return /* @__PURE__ */ x(p, {
+		ref: o,
+		className: e(i, u && "sn:bg-subtle", r && P[r]),
+		handle: /* @__PURE__ */ x("button", {
+			type: "button",
+			ref: s,
+			...c,
+			...l,
+			"aria-label": `${n} 열 옮기기`,
+			className: F,
+			children: /* @__PURE__ */ x(b, {})
+		}),
+		...a
+	});
+}
+function Oe({ id: e, draggable: t, renderCells: n, ...r }) {
+	let { setNodeRef: i, setActivatorNodeRef: a, attributes: o, listeners: s, isDragging: c } = A({
+		id: e,
+		disabled: !t,
+		attributes: { roleDescription: "옮길 수 있는 행" }
+	}), l = t ? /* @__PURE__ */ x("button", {
+		type: "button",
+		ref: a,
+		...o,
+		...s,
+		"aria-label": "행 옮기기",
+		className: F,
+		children: /* @__PURE__ */ x(b, {})
+	}) : null;
+	return /* @__PURE__ */ x(m, {
+		ref: i,
+		interactive: !0,
+		dragging: c,
+		...r,
+		children: n(l)
+	});
+}
+function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, defaultSorting: c = null, onSortingChange: l, selection: u, onSelectionChange: h, columnOrder: g, onColumnOrderChange: _, onRowOrderChange: y, loading: b, emptyState: C, errorState: w, pagination: T, className: ie }) {
+	let E = u !== void 0 || h !== void 0, D = y !== void 0, O = _ !== void 0, [k, me] = L(s, c, l), [A, P] = L(u, [], h), [F, Te] = L(g, a.map(N), _), [ke, R] = L(T?.page, T?.defaultPage ?? 1, T?.onPageChange), [z, Ae] = L(T?.pageSize, T?.defaultPageSize ?? 20, T?.onPageSizeChange), B = T?.rowCount !== void 0, je = T ? Math.max(1, Math.ceil((B ? T.rowCount : t.length) / z)) : 1, V = Math.min(ke, je), Me = v.useId(), H = v.useMemo(() => new Map(a.map((e) => [N(e), e])), [a]), Ne = v.useMemo(() => {
+		let e = [];
+		E && e.push({
+			id: j,
+			size: 40,
+			enableSorting: !1
+		}), D && e.push({
+			id: M,
+			size: 40,
+			enableSorting: !1
+		});
+		for (let t of a) {
+			let n = t.width ?? (t.type === "actions" ? 56 : void 0);
+			e.push("field" in t ? {
+				id: N(t),
+				accessorFn: (e) => e[t.field],
+				enableSorting: !!t.sortable,
+				sortFn: be,
+				...n && { size: n }
+			} : {
+				id: t.id,
+				enableSorting: !1,
+				...n && { size: n }
+			});
+		}
+		return e;
+	}, [
+		a,
+		E,
+		D
+	]), Pe = v.useMemo(() => ({
+		start: [
+			...E ? [j] : [],
+			...D ? [M] : [],
+			...a.filter((e) => e.pinned === "left").map(N)
+		],
+		end: a.filter((e) => e.pinned === "right").map(N)
+	}), [
+		a,
+		E,
+		D
+	]), U = ae({
+		features: ye,
+		columns: Ne,
+		data: t,
+		getRowId: (e) => r(e),
+		state: {
+			sorting: k ? [k] : [],
+			columnOrder: F,
+			columnPinning: Pe,
+			pagination: {
+				pageIndex: V - 1,
+				pageSize: T ? z : t.length
+			}
+		},
+		manualPagination: !T || B,
+		manualSorting: B
+	}), W = [
+		...U.getStartFlatHeaders(),
+		...U.getCenterFlatHeaders(),
+		...U.getEndFlatHeaders()
+	], G = U.getRowModel().rows, Fe = t.map(r), K = G.map((e) => e.id), q = U.getCenterFlatHeaders().map((e) => e.column.id), Ie = D && !k, Le = v.useRef(null), J = !T && G.length > ve, Re = oe({
+		count: J ? G.length : 0,
+		getScrollElement: () => Le.current,
+		estimateSize: () => 40,
+		overscan: 8
+	}), Y = J ? Re.getVirtualItems() : null, ze = Y ? Y.map((e) => G[e.index]) : G, Be = Y?.[0]?.start ?? 0, X = Y ? Re.getTotalSize() - (Y.at(-1)?.end ?? 0) : 0, Ve = typeof document > "u" ? void 0 : document.body, He = fe(de(le, { activationConstraint: { distance: 4 } }), de(ce, { coordinateGetter: ge })), Z = Ce(Fe, (e) => y?.(e)), Q = Ce(q, (e) => Te([...F.filter((t) => !e.includes(t)), ...e])), Ue = (e) => {
+		me(k?.id === e ? k.desc ? null : {
+			id: e,
+			desc: !0
+		} : {
+			id: e,
+			desc: !1
+		}), T && V !== 1 && R(1);
+	}, We = K.length > 0 && K.every((e) => A.includes(e)), Ge = !We && K.some((e) => A.includes(e)), Ke = (e) => P([...A.filter((e) => !K.includes(e)), ...e ? K : []]), qe = (t) => {
+		let { column: r } = t, i = r.id, a = r.getIsPinned(), o = a === "start" ? "left" : a === "end" ? "right" : void 0, s = {
+			pinned: o,
+			style: we(r, i === j || i === M || H.get(i)?.width !== void 0),
+			className: e("sn:sticky sn:top-0 sn:z-20 sn:bg-surface", o && "sn:z-30")
+		};
+		if (i === j) return /* @__PURE__ */ x(p, {
+			...s,
+			children: /* @__PURE__ */ x(n, {
+				checked: We,
+				indeterminate: Ge,
+				onCheckedChange: Ke,
+				children: /* @__PURE__ */ x("span", {
+					className: "sn:sr-only",
+					children: "모든 행 선택"
+				})
+			})
+		}, i);
+		if (i === M) return /* @__PURE__ */ x(p, {
+			...s,
+			children: /* @__PURE__ */ x("span", {
+				className: "sn:sr-only",
+				children: "순서"
+			})
+		}, i);
+		let c = H.get(i), l = c.header ?? "", u = "sortable" in c && c.sortable ? {
+			sort: k?.id === i ? k.desc ? "desc" : "asc" : "none",
+			onSort: () => Ue(i)
+		} : {}, d = c.type === "actions" && !c.header ? /* @__PURE__ */ x("span", {
+			className: "sn:sr-only",
+			children: "동작"
+		}) : l, f = c.type === "number" || c.type === "actions" ? "end" : "start";
+		return O && !o ? /* @__PURE__ */ x(De, {
+			id: i,
+			label: l || "동작",
+			align: f,
+			drop: Q.drop?.id === i ? Q.drop.side : void 0,
+			...s,
+			...u,
+			children: d
+		}, i) : /* @__PURE__ */ x(p, {
+			align: f,
+			...s,
+			...u,
+			children: d
+		}, i);
+	}, Je = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
+		colSpan: W.length,
+		className: "sn:h-auto sn:p-0",
+		children: e
+	}) }), $;
+	return $ = w ? Je(w) : b ? Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ x(m, { children: W.map((e) => /* @__PURE__ */ x(f, { children: e.column.id === j || e.column.id === M ? null : /* @__PURE__ */ x(i, {
+		shape: "text",
+		className: "sn:w-2/3"
+	}) }, e.id)) }, t)) : G.length === 0 ? C ? Je(C) : null : /* @__PURE__ */ S(re, { children: [
+		Be > 0 && /* @__PURE__ */ x("tr", {
+			"aria-hidden": !0,
+			style: { height: Be }
+		}),
+		ze.map((t) => {
+			let r = A.includes(t.id), i = Z.drop?.id === t.id ? xe[Z.drop.side] : void 0, a = [
+				...t.getStartVisibleCells(),
+				...t.getCenterVisibleCells(),
+				...t.getEndVisibleCells()
+			];
+			return /* @__PURE__ */ x(Oe, {
+				id: t.id,
+				draggable: Ie,
+				selected: r,
+				"aria-selected": E ? r : void 0,
+				"aria-rowindex": J ? t.index + 2 : void 0,
+				renderCells: (o) => a.map((a) => {
+					let { column: s } = a, c = s.id, l = s.getIsPinned(), u = l === "start" ? "left" : l === "end" ? "right" : void 0, d = H.get(c), p;
+					return p = c === j ? /* @__PURE__ */ x(n, {
+						checked: r,
+						onCheckedChange: (e) => P(e ? [...A, t.id] : A.filter((e) => e !== t.id)),
+						children: /* @__PURE__ */ x("span", {
+							className: "sn:sr-only",
+							children: "행 선택"
+						})
+					}) : c === M ? o : Ee(d, t.original, a.getValue()), /* @__PURE__ */ x(f, {
+						pinned: u,
+						style: we(s, c === j || c === M || d?.width !== void 0),
+						align: d?.type === "number" ? "end" : "start",
+						className: e((d?.type === "date" || d?.type === "datetime") && "sn:font-mono", d?.type === "actions" && "sn:text-right", i),
+						children: p
+					}, a.id);
+				})
+			}, t.id);
+		}),
+		X > 0 && /* @__PURE__ */ x("tr", {
+			"aria-hidden": !0,
+			style: { height: X }
+		})
+	] }), /* @__PURE__ */ S("div", {
+		className: e("sn:flex sn:w-full sn:flex-col sn:gap-4", ie),
+		children: [/* @__PURE__ */ x("div", {
+			ref: Le,
+			className: "sn:relative sn:min-h-0 sn:w-full sn:flex-1 sn:overflow-auto",
+			children: /* @__PURE__ */ S("table", {
+				"aria-label": o,
+				"aria-busy": b || void 0,
+				"aria-rowcount": J ? G.length + 1 : void 0,
+				className: e(te, "sn:bg-surface"),
+				children: [/* @__PURE__ */ x(se, {
+					id: `DndDescribedBy-${Me}-columns`,
+					sensors: He,
+					collisionDetection: ue,
+					accessibility: {
+						container: Ve,
+						announcements: I("열", () => q),
+						screenReaderInstructions: Se
+					},
+					onDragOver: Q.onDragOver,
+					onDragEnd: Q.onDragEnd,
+					onDragCancel: Q.onDragCancel,
+					children: /* @__PURE__ */ x(ee, { children: /* @__PURE__ */ x(pe, {
+						items: O ? q : [],
+						strategy: he,
+						children: /* @__PURE__ */ x(m, { children: W.map(qe) })
+					}) })
+				}), /* @__PURE__ */ x(se, {
+					id: `DndDescribedBy-${Me}-rows`,
+					sensors: He,
+					collisionDetection: ue,
+					accessibility: {
+						container: Ve,
+						announcements: I("행", () => K),
+						screenReaderInstructions: Se
+					},
+					onDragOver: Z.onDragOver,
+					onDragEnd: Z.onDragEnd,
+					onDragCancel: Z.onDragCancel,
+					children: /* @__PURE__ */ x(pe, {
+						items: Ie ? K : [],
+						strategy: _e,
+						children: /* @__PURE__ */ x(d, { children: $ })
+					})
+				})]
+			})
+		}), T && !w && (b || G.length > 0) && /* @__PURE__ */ x(ne, {
+			page: V,
+			pageCount: je,
+			onPageChange: R,
+			pageSize: z,
+			onPageSizeChange: (e) => {
+				Ae(e), V !== 1 && R(1);
+			},
+			pageSizeOptions: T.pageSizeOptions,
+			showFirstLast: T.showFirstLast
+		})]
+	});
+}
+//#endregion
+export { ke as DataGrid };

package/dist/components/pagination.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface PaginationProps {
+    /** 현재 페이지 (1부터) */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** onPageSizeChange를 넘기면 왼쪽에 페이지당 행 수 Select가 생겨요 */
+    pageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    /** 처음·마지막 버튼 */
+    showFirstLast?: boolean;
+    'aria-label'?: string;
+    className?: string;
+}
+/** 처음·마지막 + 현재 양옆 1개, 나머지는 줄임표. 항상 최대 7칸이라 너비가 흔들리지 않아요 */
+export declare function getPageItems(page: number, pageCount: number): Array<number | 'ellipsis'>;
+export declare function Pagination({ page, pageCount, onPageChange, pageSize, onPageSizeChange, pageSizeOptions, showFirstLast, 'aria-label': ariaLabel, className, }: PaginationProps): React.JSX.Element;

package/dist/components/pagination.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { Button as t } from "./button.js";
+import { Select as n } from "./select.js";
+import "react";
+import { ChevronLeft as r, ChevronRight as i, ChevronsLeft as a, ChevronsRight as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/pagination.tsx
+function l(e, t) {
+	return t <= 7 ? Array.from({ length: t }, (e, t) => t + 1) : e <= 4 ? [
+		1,
+		2,
+		3,
+		4,
+		5,
+		"ellipsis",
+		t
+	] : e >= t - 3 ? [
+		1,
+		"ellipsis",
+		...Array.from({ length: 5 }, (e, n) => t - 4 + n)
+	] : [
+		1,
+		"ellipsis",
+		e - 1,
+		e,
+		e + 1,
+		"ellipsis",
+		t
+	];
+}
+var u = "sn:box-border sn:flex sn:h-7 sn:min-w-7 sn:items-center sn:justify-center sn:rounded-md sn:border-0 sn:px-1 sn:font-mono sn:text-body";
+function d({ page: d, pageCount: f, onPageChange: p, pageSize: m, onPageSizeChange: h, pageSizeOptions: g = [
+	10,
+	20,
+	50
+], showFirstLast: _ = !0, "aria-label": v = "페이지", className: y }) {
+	let b = Math.max(1, f), x = Math.min(Math.max(1, d), b), S = (e) => e !== x && p(e), C = (e, n, r, i) => /* @__PURE__ */ s(t, {
+		size: "icon-sm",
+		variant: "ghost",
+		"aria-label": e,
+		disabled: r,
+		focusableWhenDisabled: !0,
+		onClick: () => S(n),
+		children: /* @__PURE__ */ s(i, {})
+	});
+	return /* @__PURE__ */ c("div", {
+		className: e("sn:flex sn:items-center sn:justify-between sn:gap-4 sn:font-sans", y),
+		children: [h && /* @__PURE__ */ c("div", {
+			className: "sn:flex sn:items-center sn:gap-2",
+			children: [/* @__PURE__ */ s("span", {
+				"aria-hidden": !0,
+				className: "sn:hidden sn:text-label sn:text-muted sn:sm:inline",
+				children: "페이지당 행"
+			}), /* @__PURE__ */ s(n, {
+				"aria-label": "페이지당 행",
+				className: "sn:w-auto",
+				options: g.map((e) => ({
+					value: String(e),
+					label: String(e)
+				})),
+				value: m === void 0 ? null : String(m),
+				onValueChange: (e) => e && h(Number(e))
+			})]
+		}), /* @__PURE__ */ c("nav", {
+			"aria-label": v,
+			className: "sn:ml-auto sn:flex sn:items-center sn:gap-1",
+			children: [
+				_ && C("처음 페이지", 1, x <= 1, a),
+				C("이전 페이지", x - 1, x <= 1, r),
+				/* @__PURE__ */ s("ul", {
+					className: "sn:m-0 sn:hidden sn:list-none sn:items-center sn:gap-1 sn:p-0 sn:sm:flex",
+					children: l(x, b).map((t, n) => t === "ellipsis" ? /* @__PURE__ */ s("li", {
+						"aria-hidden": !0,
+						className: e(u, "sn:text-muted"),
+						children: "…"
+					}, `e${n}`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+						type: "button",
+						"aria-label": `${t}페이지`,
+						"aria-current": t === x ? "page" : void 0,
+						onClick: () => S(t),
+						className: e(u, "sn:cursor-pointer sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:motion-reduce:transition-none", "sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus", t === x ? "sn:bg-subtle sn:text-default" : "sn:bg-transparent sn:text-muted sn:hover:bg-subtle sn:hover:text-default"),
+						children: t
+					}) }, t))
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "sn:px-1 sn:font-mono sn:text-caption sn:text-muted sn:sm:hidden",
+					children: [
+						x,
+						" / ",
+						b
+					]
+				}),
+				C("다음 페이지", x + 1, x >= b, i),
+				_ && C("마지막 페이지", b, x >= b, o)
+			]
+		})]
+	});
+}
+//#endregion
+export { d as Pagination, l as getPageItems };

package/dist/components/table.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+type Pinned = 'left' | 'right';
+export declare const tableClass = "sn:w-full sn:border-separate sn:border-spacing-0 sn:font-sans sn:text-body sn:text-default";
 /** 넓으면 가로로 스크롤해요 */
 export declare const Table: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableElement>, "className"> & {
     className?: string;
@@ -11,14 +13,29 @@ export declare const TableBody: React.ForwardRefExoticComponent<Omit<React.HTMLA
 } & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "className"> & {
     className?: string;
+} & {
+    /** 선택된 행 (bg/selected) */
+    selected?: boolean;
+    /** hover 바탕을 보여 줘요 (DataGrid처럼 행을 고르거나 옮길 때) */
+    interactive?: boolean;
+    /** 옮기는 중인 행 */
+    dragging?: boolean;
 } & React.RefAttributes<HTMLTableRowElement>>;
-export declare const TableHead: React.ForwardRefExoticComponent<Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align" | "className"> & {
-    /** 숫자 열은 end */
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align" | "className"> & {
     align?: 'start' | 'end';
+    pinned?: Pinned;
+    /** 정렬 표시. onSort를 넘기면 머리글이 버튼이 돼요 */
+    sort?: 'asc' | 'desc' | 'none';
+    onSort?: () => void;
+    /** 컬럼 이동 손잡이. hover·포커스 때만 보이고, 정렬 반대쪽 끝에 놓여요 */
+    handle?: React.ReactNode;
     className?: string;
 } & React.RefAttributes<HTMLTableCellElement>>;
 export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align" | "className"> & {
     /** 숫자 열은 end */
     align?: 'start' | 'end';
+    /** 가로 스크롤 중에도 붙어 있어요. 여러 열을 고정하면 style.left·right로 위치를 넘겨요 */
+    pinned?: Pinned;
     className?: string;
 } & React.RefAttributes<HTMLTableCellElement>>;
+export {};

package/dist/components/table.js

@@ -1,46 +1,70 @@
 "use client";
 import { cn as e } from "../lib/cn.js";
 import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { ArrowDown as n, ArrowUp as r } from "lucide-react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/table.tsx
-var r = t.forwardRef(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ n("div", {
+var s = "sn:w-full sn:border-separate sn:border-spacing-0 sn:font-sans sn:text-body sn:text-default", c = t.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ a("div", {
 		className: "sn:w-full sn:overflow-x-auto",
-		children: /* @__PURE__ */ n("table", {
-			ref: i,
-			className: e("sn:w-full sn:border-separate sn:border-spacing-0 sn:font-sans sn:text-body sn:text-default", t),
-			...r
+		children: /* @__PURE__ */ a("table", {
+			ref: r,
+			className: e(s, t),
+			...n
 		})
 	});
-}), i = t.forwardRef(function(e, t) {
-	return /* @__PURE__ */ n("thead", {
+}), l = t.forwardRef(function(e, t) {
+	return /* @__PURE__ */ a("thead", {
 		ref: t,
 		...e
 	});
-}), a = t.forwardRef(function(e, t) {
-	return /* @__PURE__ */ n("tbody", {
+}), u = t.forwardRef(function(e, t) {
+	return /* @__PURE__ */ a("tbody", {
 		ref: t,
 		...e
 	});
-}), o = t.forwardRef(function({ className: e, ...t }, r) {
-	return /* @__PURE__ */ n("tr", {
-		ref: r,
-		className: e,
-		...t
+}), d = t.forwardRef(function({ selected: t, interactive: n, dragging: r, className: i, ...o }, s) {
+	return /* @__PURE__ */ a("tr", {
+		ref: s,
+		"data-selected": t ? "" : void 0,
+		"data-interactive": n ? "" : void 0,
+		"data-dragging": r ? "" : void 0,
+		className: e("sn:group/row sn:data-interactive:hover:bg-subtle sn:data-selected:bg-selected", "sn:data-dragging:bg-surface sn:data-dragging:outline sn:data-dragging:outline-1 sn:data-dragging:-outline-offset-1 sn:data-dragging:outline-default", i),
+		...o
 	});
-}), s = "sn:box-border sn:h-10 sn:border-b sn:border-default sn:px-3 sn:py-0 sn:align-middle", c = t.forwardRef(function({ align: t = "start", className: r, ...i }, a) {
-	return /* @__PURE__ */ n("th", {
-		ref: a,
+}), f = "sn:box-border sn:h-10 sn:border-b sn:border-default sn:px-3 sn:py-0 sn:align-middle", p = {
+	left: "sn:sticky sn:left-0 sn:z-10 sn:border-r sn:border-r-default sn:bg-surface",
+	right: "sn:sticky sn:right-0 sn:z-10 sn:border-l sn:border-l-default sn:bg-surface"
+}, m = "sn:group-data-interactive/row:group-hover/row:bg-subtle sn:group-data-selected/row:bg-selected", h = t.forwardRef(function({ align: t = "start", sort: s, onSort: c, handle: l, pinned: u, className: d, children: m, ...h }, g) {
+	let _ = s === "asc" || s === "desc", v = _ ? /* @__PURE__ */ o(i, { children: [m, /* @__PURE__ */ a(s === "asc" ? r : n, {
+		className: "sn:size-4 sn:shrink-0",
+		"aria-hidden": !0
+	})] }) : m, y = e("sn:flex sn:h-10 sn:w-full sn:items-center sn:gap-1 sn:px-3", t === "end" && "sn:justify-end");
+	return /* @__PURE__ */ o("th", {
+		ref: g,
 		scope: "col",
-		className: e(s, "sn:text-label sn:text-muted", t === "end" ? "sn:text-right" : "sn:text-left", r),
-		...i
+		"aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : s === "none" ? "none" : void 0,
+		className: e(f, !!l && "sn:group/head sn:relative", "sn:text-label", _ ? "sn:text-default" : "sn:text-muted", t === "end" ? "sn:text-right" : "sn:text-left", u && p[u], (c || _) && "sn:px-0", d),
+		...h,
+		children: [c ? /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: c,
+			className: e(y, "sn:cursor-pointer sn:border-0 sn:bg-transparent sn:[font:inherit] sn:text-inherit sn:hover:text-default", "sn:focus-visible:outline-2 sn:focus-visible:-outline-offset-2 sn:focus-visible:outline-focus"),
+			children: v
+		}) : _ ? /* @__PURE__ */ a("span", {
+			className: y,
+			children: v
+		}) : m, l ? /* @__PURE__ */ a("span", {
+			className: e("sn:absolute sn:inset-y-0 sn:flex sn:items-center sn:opacity-0 sn:group-hover/head:opacity-100 sn:focus-within:opacity-100", t === "end" ? "sn:left-1" : "sn:right-1"),
+			children: l
+		}) : null]
 	});
-}), l = t.forwardRef(function({ align: t = "start", className: r, ...i }, a) {
-	return /* @__PURE__ */ n("td", {
-		ref: a,
-		className: e(s, t === "end" ? "sn:text-right sn:font-mono" : "sn:text-left", r),
+}), g = t.forwardRef(function({ align: t = "start", pinned: n, className: r, ...i }, o) {
+	return /* @__PURE__ */ a("td", {
+		ref: o,
+		className: e(f, t === "end" ? "sn:text-right sn:font-mono" : "sn:text-left", n && [p[n], m].join(" "), r),
 		...i
 	});
 });
 //#endregion
-export { r as Table, a as TableBody, l as TableCell, c as TableHead, i as TableHeader, o as TableRow };
+export { c as Table, u as TableBody, g as TableCell, h as TableHead, l as TableHeader, d as TableRow, s as tableClass };

package/dist/index.d.ts

@@ -27,6 +27,9 @@ export { Badge, type BadgeProps } from './components/badge';
 export { Progress, type ProgressProps } from './components/progress';
 export { Link, type LinkProps } from './components/link';
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './components/table';
+export { DataGrid, type DataGridProps, type DataGridColumn, type DataGridAction, type DataGridSort, type DataGridPagination } from './components/data-grid';
+export { Pagination, type PaginationProps } from './components/pagination';
+export { formatNumber, formatDate, formatDateTime } from './lib/format';
 export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './components/toggle-group';
 export { Accordion, AccordionItem, AccordionTrigger, AccordionPanel, type AccordionProps, type AccordionItemProps } from './components/accordion';
 export { FileDropzone, FileList, formatBytes, type FileDropzoneProps, type FileListProps, type FileItemData, type FileRejection } from './components/file-upload';

package/dist/index.js

@@ -27,7 +27,10 @@ import { Badge as re } from "./components/badge.js";
 import { Progress as ie } from "./components/progress.js";
 import { Link as ae } from "./components/link.js";
 import { Table as oe, TableBody as se, TableCell as ce, TableHead as le, TableHeader as ue, TableRow as de } from "./components/table.js";
-import { ToggleGroup as fe, ToggleGroupItem as pe } from "./components/toggle-group.js";
-import { Accordion as me, AccordionItem as he, AccordionPanel as ge, AccordionTrigger as _e } from "./components/accordion.js";
-import { FileDropzone as ve, FileList as ye, formatBytes as be } from "./components/file-upload.js";
-export { me as Accordion, he as AccordionItem, ge as AccordionPanel, _e as AccordionTrigger, j as AlertDialog, M as AlertDialogClose, N as AlertDialogDescription, P as AlertDialogFooter, F as AlertDialogPopup, I as AlertDialogTitle, L as AlertDialogTrigger, _ as Avatar, re as Badge, t as Button, d as Card, f as CardBody, p as CardDescription, m as CardFooter, h as CardHeader, g as CardTitle, i as Checkbox, a as CheckboxGroup, w as Dialog, T as DialogClose, E as DialogDescription, D as DialogFooter, O as DialogPopup, k as DialogTitle, A as DialogTrigger, x as EmptyState, C as ErrorPage, S as ErrorState, v as Field, ve as FileDropzone, ye as FileList, n as Input, ae as Link, R as Menu, z as MenuItem, B as MenuPopup, V as MenuSeparator, H as MenuTrigger, U as Popover, W as PopoverClose, G as PopoverDescription, K as PopoverPopup, q as PopoverTitle, J as PopoverTrigger, ie as Progress, o as Radio, s as RadioGroup, l as Select, ee as Separator, y as Skeleton, c as Switch, X as Tab, oe as Table, se as TableBody, ce as TableCell, le as TableHead, ue as TableHeader, de as TableRow, Z as Tabs, Q as TabsList, $ as TabsPanel, u as Text, r as Textarea, te as ToastProvider, fe as ToggleGroup, pe as ToggleGroupItem, Y as Tooltip, e as buttonVariants, be as formatBytes, b as illustrations, ne as useToast };
+import { formatDate as fe, formatDateTime as pe, formatNumber as me } from "./lib/format.js";
+import { Pagination as he } from "./components/pagination.js";
+import { DataGrid as ge } from "./components/data-grid.js";
+import { ToggleGroup as _e, ToggleGroupItem as ve } from "./components/toggle-group.js";
+import { Accordion as ye, AccordionItem as be, AccordionPanel as xe, AccordionTrigger as Se } from "./components/accordion.js";
+import { FileDropzone as Ce, FileList as we, formatBytes as Te } from "./components/file-upload.js";
+export { ye as Accordion, be as AccordionItem, xe as AccordionPanel, Se as AccordionTrigger, j as AlertDialog, M as AlertDialogClose, N as AlertDialogDescription, P as AlertDialogFooter, F as AlertDialogPopup, I as AlertDialogTitle, L as AlertDialogTrigger, _ as Avatar, re as Badge, t as Button, d as Card, f as CardBody, p as CardDescription, m as CardFooter, h as CardHeader, g as CardTitle, i as Checkbox, a as CheckboxGroup, ge as DataGrid, w as Dialog, T as DialogClose, E as DialogDescription, D as DialogFooter, O as DialogPopup, k as DialogTitle, A as DialogTrigger, x as EmptyState, C as ErrorPage, S as ErrorState, v as Field, Ce as FileDropzone, we as FileList, n as Input, ae as Link, R as Menu, z as MenuItem, B as MenuPopup, V as MenuSeparator, H as MenuTrigger, he as Pagination, U as Popover, W as PopoverClose, G as PopoverDescription, K as PopoverPopup, q as PopoverTitle, J as PopoverTrigger, ie as Progress, o as Radio, s as RadioGroup, l as Select, ee as Separator, y as Skeleton, c as Switch, X as Tab, oe as Table, se as TableBody, ce as TableCell, le as TableHead, ue as TableHeader, de as TableRow, Z as Tabs, Q as TabsList, $ as TabsPanel, u as Text, r as Textarea, te as ToastProvider, _e as ToggleGroup, ve as ToggleGroupItem, Y as Tooltip, e as buttonVariants, Te as formatBytes, fe as formatDate, pe as formatDateTime, me as formatNumber, b as illustrations, ne as useToast };

package/dist/lib/format.d.ts

@@ -0,0 +1,8 @@
+type DateInput = string | number | Date | null | undefined;
+/** 12480 → "12,480" */
+export declare function formatNumber(value: number | null | undefined): string;
+/** YYYY-MM-DD (브라우저 현지 시간) */
+export declare function formatDate(value: DateInput): string;
+/** YYYY-MM-DD HH:mm:ss (브라우저 현지 시간) */
+export declare function formatDateTime(value: DateInput): string;
+export {};

package/dist/lib/format.js

@@ -0,0 +1,20 @@
+//#region src/lib/format.ts
+var e = new Intl.NumberFormat("ko-KR"), t = (e) => String(e).padStart(2, "0"), n = (e) => {
+	if (e == null || e === "") return null;
+	let t = e instanceof Date ? e : new Date(e);
+	return Number.isNaN(t.getTime()) ? null : t;
+};
+function r(t) {
+	return t == null || Number.isNaN(t) ? "" : e.format(t);
+}
+function i(e) {
+	if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}$/.test(e)) return e;
+	let r = n(e);
+	return r ? `${r.getFullYear()}-${t(r.getMonth() + 1)}-${t(r.getDate())}` : "";
+}
+function a(e) {
+	let r = n(e);
+	return r ? `${i(r)} ${t(r.getHours())}:${t(r.getMinutes())}:${t(r.getSeconds())}` : "";
+}
+//#endregion
+export { i as formatDate, a as formatDateTime, r as formatNumber };

package/dist/styles.css

@@ -1,3 +1,3 @@
 /*! sonic-ui | 전체가 @layer sonic 안에 있어요. 쓰는 쪽: @layer theme, base, sonic, components, utilities; */
-@property --tw-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@layer sonic{/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer utilities{.sn\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sn\:absolute{position:absolute}.sn\:fixed{position:fixed}.sn\:relative{position:relative}.sn\:inset-0{inset:0}.sn\:top-1\/2{top:50%}.sn\:right-4{right:calc(var(--sn-space-1) * 4)}.sn\:bottom-4{bottom:calc(var(--sn-space-1) * 4)}.sn\:bottom-\[-1px\]{bottom:-1px}.sn\:left-0{left:0}.sn\:left-1\/2{left:50%}.sn\:z-50{z-index:50}.sn\:m-0{margin:0}.sn\:my-1{margin-block:var(--sn-space-1)}.sn\:-mt-2{margin-top:calc(var(--sn-space-1) * -2)}.sn\:-mt-3{margin-top:calc(var(--sn-space-1) * -3)}.sn\:mt-2{margin-top:calc(var(--sn-space-1) * 2)}.sn\:-mb-px{margin-bottom:-1px}.sn\:mb-0{margin-bottom:0}.sn\:ml-1{margin-left:var(--sn-space-1)}.sn\:box-border{box-sizing:border-box}.sn\:block{display:block}.sn\:flex{display:flex}.sn\:hidden{display:none}.sn\:inline-block{display:inline-block}.sn\:inline-flex{display:inline-flex}.sn\:size-2{width:calc(var(--sn-space-1) * 2);height:calc(var(--sn-space-1) * 2)}.sn\:size-3{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:size-4{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:size-6{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:size-7{width:calc(var(--sn-space-1) * 7);height:calc(var(--sn-space-1) * 7)}.sn\:size-8{width:calc(var(--sn-space-1) * 8);height:calc(var(--sn-space-1) * 8)}.sn\:size-10{width:calc(var(--sn-space-1) * 10);height:calc(var(--sn-space-1) * 10)}.sn\:size-12{width:calc(var(--sn-space-1) * 12);height:calc(var(--sn-space-1) * 12)}.sn\:size-24{width:calc(var(--sn-space-1) * 24);height:calc(var(--sn-space-1) * 24)}.sn\:size-full{width:100%;height:100%}.sn\:h-\(--accordion-panel-height\){height:var(--accordion-panel-height)}.sn\:h-0\.5{height:calc(var(--sn-space-1) * .5)}.sn\:h-1{height:var(--sn-space-1)}.sn\:h-3{height:calc(var(--sn-space-1) * 3)}.sn\:h-4{height:calc(var(--sn-space-1) * 4)}.sn\:h-5{height:calc(var(--sn-space-1) * 5)}.sn\:h-6{height:calc(var(--sn-space-1) * 6)}.sn\:h-7{height:calc(var(--sn-space-1) * 7)}.sn\:h-8{height:calc(var(--sn-space-1) * 8)}.sn\:h-10{height:calc(var(--sn-space-1) * 10)}.sn\:h-16{height:calc(var(--sn-space-1) * 16)}.sn\:h-auto{height:auto}.sn\:h-full{height:100%}.sn\:h-px{height:1px}.sn\:max-h-\(--available-height\){max-height:var(--available-height)}.sn\:max-h-\[calc\(100dvh-2\*var\(--sn-space-4\)\)\]{max-height:calc(100dvh - 2 * var(--sn-space-4))}.sn\:min-h-20{min-height:calc(var(--sn-space-1) * 20)}.sn\:w-\(--active-tab-width\){width:var(--active-tab-width)}.sn\:w-6{width:calc(var(--sn-space-1) * 6)}.sn\:w-7{width:calc(var(--sn-space-1) * 7)}.sn\:w-24{width:calc(var(--sn-space-1) * 24)}.sn\:w-80{width:calc(var(--sn-space-1) * 80)}.sn\:w-90{width:calc(var(--sn-space-1) * 90)}.sn\:w-110{width:calc(var(--sn-space-1) * 110)}.sn\:w-full{width:100%}.sn\:w-max{width:max-content}.sn\:w-px{width:1px}.sn\:max-w-\[calc\(100vw-2\*var\(--sn-space-4\)\)\]{max-width:calc(100vw - 2 * var(--sn-space-4))}.sn\:max-w-full{max-width:100%}.sn\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.sn\:min-w-0{min-width:0}.sn\:min-w-48{min-width:calc(var(--sn-space-1) * 48)}.sn\:min-w-full{min-width:100%}.sn\:flex-1{flex:1}.sn\:shrink-0{flex-shrink:0}.sn\:border-separate{border-collapse:separate}.sn\:border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.sn\:origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.sn\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:translate-x-\(--active-tab-left\){--tw-translate-x:var(--active-tab-left);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:animate-\[sn-pulse_var\(--sn-duration-loop\)_ease-in-out_infinite\]{animation:sn-pulse var(--sn-duration-loop) ease-in-out infinite}.sn\:animate-\[sn-spin_var\(--sn-duration-loop\)_linear_infinite\]{animation:sn-spin var(--sn-duration-loop) linear infinite}.sn\:cursor-default{cursor:default}.sn\:cursor-not-allowed{cursor:not-allowed}.sn\:cursor-pointer{cursor:pointer}.sn\:resize-y{resize:vertical}.sn\:\[scrollbar-width\:none\]{scrollbar-width:none}.sn\:list-none{list-style-type:none}.sn\:flex-col{flex-direction:column}.sn\:flex-col-reverse{flex-direction:column-reverse}.sn\:flex-wrap{flex-wrap:wrap}.sn\:items-center{align-items:center}.sn\:items-start{align-items:flex-start}.sn\:justify-between{justify-content:space-between}.sn\:justify-center{justify-content:center}.sn\:justify-end{justify-content:flex-end}.sn\:gap-1{gap:var(--sn-space-1)}.sn\:gap-2{gap:calc(var(--sn-space-1) * 2)}.sn\:gap-3{gap:calc(var(--sn-space-1) * 3)}.sn\:gap-4{gap:calc(var(--sn-space-1) * 4)}.sn\:gap-6{gap:calc(var(--sn-space-1) * 6)}.sn\:gap-10{gap:calc(var(--sn-space-1) * 10)}.sn\:self-stretch{align-self:stretch}.sn\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sn\:overflow-hidden{overflow:hidden}.sn\:overflow-x-auto{overflow-x:auto}.sn\:overflow-y-auto{overflow-y:auto}.sn\:rounded-full{border-radius:var(--sn-radius-full)}.sn\:rounded-lg{border-radius:var(--sn-radius-lg)}.sn\:rounded-md{border-radius:var(--sn-radius-md)}.sn\:rounded-sm{border-radius:var(--sn-radius-sm)}.sn\:border{border-style:var(--tw-border-style);border-width:1px}.sn\:border-0{border-style:var(--tw-border-style);border-width:0}.sn\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.sn\:border-dashed{--tw-border-style:dashed;border-style:dashed}.sn\:border-danger{border-color:var(--sn-color-border-danger)}.sn\:border-default{border-color:var(--sn-color-border-default)}.sn\:border-strong{border-color:var(--sn-color-border-strong)}.sn\:border-transparent{border-color:#0000}.sn\:bg-\(--sn-color-border-default\){background-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-text-on-primary\){background-color:var(--sn-color-text-on-primary)}.sn\:bg-canvas{background-color:var(--sn-color-bg-canvas)}.sn\:bg-danger{background-color:var(--sn-color-bg-danger)}.sn\:bg-danger-subtle{background-color:var(--sn-color-bg-danger-subtle)}.sn\:bg-inverse{background-color:var(--sn-color-bg-inverse)}.sn\:bg-overlay{background-color:var(--sn-color-bg-overlay)}.sn\:bg-primary{background-color:var(--sn-color-bg-primary)}.sn\:bg-subtle{background-color:var(--sn-color-bg-subtle)}.sn\:bg-success{background-color:var(--sn-color-bg-success)}.sn\:bg-success-subtle{background-color:var(--sn-color-bg-success-subtle)}.sn\:bg-surface{background-color:var(--sn-color-bg-surface)}.sn\:bg-transparent{background-color:#0000}.sn\:bg-warning{background-color:var(--sn-color-bg-warning)}.sn\:bg-warning-subtle{background-color:var(--sn-color-bg-warning-subtle)}.sn\:object-cover{object-fit:cover}.sn\:p-0{padding:0}.sn\:p-1{padding:var(--sn-space-1)}.sn\:p-3{padding:calc(var(--sn-space-1) * 3)}.sn\:p-4{padding:calc(var(--sn-space-1) * 4)}.sn\:p-5{padding:calc(var(--sn-space-1) * 5)}.sn\:p-6{padding:calc(var(--sn-space-1) * 6)}.sn\:p-px{padding:1px}.sn\:px-0{padding-inline:0}.sn\:px-2{padding-inline:calc(var(--sn-space-1) * 2)}.sn\:px-3{padding-inline:calc(var(--sn-space-1) * 3)}.sn\:px-4{padding-inline:calc(var(--sn-space-1) * 4)}.sn\:px-6{padding-inline:calc(var(--sn-space-1) * 6)}.sn\:py-0{padding-block:0}.sn\:py-1{padding-block:var(--sn-space-1)}.sn\:py-2{padding-block:calc(var(--sn-space-1) * 2)}.sn\:py-3{padding-block:calc(var(--sn-space-1) * 3)}.sn\:py-6{padding-block:calc(var(--sn-space-1) * 6)}.sn\:py-12{padding-block:calc(var(--sn-space-1) * 12)}.sn\:py-16{padding-block:calc(var(--sn-space-1) * 16)}.sn\:pt-1{padding-top:var(--sn-space-1)}.sn\:pb-4{padding-bottom:calc(var(--sn-space-1) * 4)}.sn\:pb-px{padding-bottom:1px}.sn\:text-center{text-align:center}.sn\:text-left{text-align:left}.sn\:text-right{text-align:right}.sn\:align-middle{vertical-align:middle}.sn\:align-text-bottom{vertical-align:text-bottom}.sn\:font-mono{font-family:var(--sn-font-mono)}.sn\:font-sans{font-family:var(--sn-font-sans)}.sn\:text-body{font-size:var(--sn-text-body);line-height:var(--tw-leading,var(--sn-text-body--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body--font-weight))}.sn\:text-body-strong{font-size:var(--sn-text-body-strong);line-height:var(--tw-leading,var(--sn-text-body-strong--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body-strong--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body-strong--font-weight))}.sn\:text-caption{font-size:var(--sn-text-caption);line-height:var(--tw-leading,var(--sn-text-caption--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-caption--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-caption--font-weight))}.sn\:text-display{font-size:var(--sn-text-display);line-height:var(--tw-leading,var(--sn-text-display--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-display--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-display--font-weight))}.sn\:text-label{font-size:var(--sn-text-label);line-height:var(--tw-leading,var(--sn-text-label--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-label--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-label--font-weight))}.sn\:text-title{font-size:var(--sn-text-title);line-height:var(--tw-leading,var(--sn-text-title--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-title--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-title--font-weight))}.sn\:whitespace-nowrap{white-space:nowrap}.sn\:text-danger{color:var(--sn-color-text-danger)}.sn\:text-default{color:var(--sn-color-text-default)}.sn\:text-inverse{color:var(--sn-color-text-inverse)}.sn\:text-muted{color:var(--sn-color-text-muted)}.sn\:text-on-danger{color:var(--sn-color-text-on-danger)}.sn\:text-on-primary{color:var(--sn-color-text-on-primary)}.sn\:text-on-success{color:var(--sn-color-text-on-success)}.sn\:text-on-warning{color:var(--sn-color-text-on-warning)}.sn\:text-success{color:var(--sn-color-text-success)}.sn\:text-warning{color:var(--sn-color-text-warning)}.sn\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.sn\:underline{text-decoration-line:underline}.sn\:underline-offset-2{text-underline-offset:2px}.sn\:opacity-\(--sn-opacity-disabled\){opacity:var(--sn-opacity-disabled)}.sn\:transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,translate\]{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[translate\,width\]{transition-property:translate,width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:duration-\(--sn-duration-fast\){--tw-duration:var(--sn-duration-fast);transition-duration:var(--sn-duration-fast)}.sn\:duration-\(--sn-duration-normal\){--tw-duration:var(--sn-duration-normal);transition-duration:var(--sn-duration-normal)}.sn\:ease-standard{--tw-ease:var(--sn-easing-standard);transition-timing-function:var(--sn-easing-standard)}.sn\:outline-none{--tw-outline-style:none;outline-style:none}.sn\:select-none{-webkit-user-select:none;user-select:none}.sn\:group-aria-invalid\:text-danger:is(:where(.sn\:group)[aria-invalid=true] *),.sn\:group-data-invalid\:text-danger:is(:where(.sn\:group)[data-invalid] *){color:var(--sn-color-text-danger)}.sn\:group-data-panel-open\:rotate-180:is(:where(.sn\:group)[data-panel-open] *),.sn\:group-data-popup-open\:rotate-180:is(:where(.sn\:group)[data-popup-open] *){rotate:180deg}.sn\:group-data-selected\:border-transparent:is(:where(.sn\:group)[data-selected] *){border-color:#0000}.sn\:group-data-selected\:bg-primary:is(:where(.sn\:group)[data-selected] *){background-color:var(--sn-color-bg-primary)}.sn\:placeholder\:text-muted::placeholder{color:var(--sn-color-text-muted)}@media (hover:hover){.sn\:hover\:text-muted:hover{color:var(--sn-color-text-muted)}.sn\:hover\:not-disabled\:bg-subtle:hover:not(:disabled){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:border-strong:hover:not([data-disabled]){border-color:var(--sn-color-border-strong)}.sn\:hover\:not-data-disabled\:bg-primary-hover:hover:not([data-disabled]){background-color:var(--sn-color-bg-primary-hover)}.sn\:hover\:not-data-disabled\:bg-subtle:hover:not([data-disabled]){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:text-default:hover:not([data-disabled]){color:var(--sn-color-text-default)}}.sn\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.sn\:focus-visible\:-outline-offset-2:focus-visible{outline-offset:calc(2px * -1)}.sn\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.sn\:focus-visible\:outline-focus:focus-visible{outline-color:var(--sn-color-border-focus)}.sn\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.sn\:disabled\:opacity-\(--sn-opacity-disabled\):disabled{opacity:var(--sn-opacity-disabled)}.sn\:aria-invalid\:border-danger[aria-invalid=true]{border-color:var(--sn-color-border-danger)}@media (hover:hover){.sn\:hover\:aria-invalid\:border-danger:hover[aria-invalid=true]{border-color:var(--sn-color-border-danger)}}.sn\:aria-invalid\:focus-visible\:outline-danger[aria-invalid=true]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-active\:text-default[data-active]{color:var(--sn-color-text-default)}.sn\:data-checked\:translate-x-3[data-checked]{--tw-translate-x:calc(var(--sn-space-1) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-checked\:border-transparent[data-checked]{border-color:#0000}.sn\:data-checked\:bg-\(--sn-color-text-on-primary\)[data-checked]{background-color:var(--sn-color-text-on-primary)}.sn\:data-checked\:bg-primary[data-checked]{background-color:var(--sn-color-bg-primary)}.sn\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.sn\:data-disabled\:opacity-\(--sn-opacity-disabled\)[data-disabled]{opacity:var(--sn-opacity-disabled)}.sn\:data-disabled\:not-data-loading\:cursor-not-allowed[data-disabled]:not([data-loading]){cursor:not-allowed}.sn\:data-disabled\:not-data-loading\:opacity-\(--sn-opacity-disabled\)[data-disabled]:not([data-loading]){opacity:var(--sn-opacity-disabled)}.sn\:data-dragging\:border-focus[data-dragging]{border-color:var(--sn-color-border-focus)}.sn\:data-dragging\:bg-subtle[data-dragging]{background-color:var(--sn-color-bg-subtle)}.sn\:data-ending-style\:h-0[data-ending-style]{height:0}.sn\:data-ending-style\:translate-y-2[data-ending-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-ending-style\:scale-98[data-ending-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.sn\:data-highlighted\:bg-subtle[data-highlighted]{background-color:var(--sn-color-bg-subtle)}.sn\:data-indeterminate\:border-transparent[data-indeterminate]{border-color:#0000}.sn\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--sn-color-bg-primary)}.sn\:data-invalid\:border-danger[data-invalid]{border-color:var(--sn-color-border-danger)}.sn\:data-invalid\:focus-visible\:outline-danger[data-invalid]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-limited\:hidden[data-limited]{display:none}.sn\:data-loading\:cursor-progress[data-loading]{cursor:progress}.sn\:data-placeholder\:text-muted[data-placeholder]{color:var(--sn-color-text-muted)}.sn\:data-popup-open\:border-focus[data-popup-open]{border-color:var(--sn-color-border-focus)}.sn\:data-pressed\:border-default[data-pressed]{border-color:var(--sn-color-border-default)}.sn\:data-pressed\:bg-surface[data-pressed]{background-color:var(--sn-color-bg-surface)}.sn\:data-pressed\:text-default[data-pressed]{color:var(--sn-color-text-default)}.sn\:data-starting-style\:h-0[data-starting-style]{height:0}.sn\:data-starting-style\:translate-y-2[data-starting-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-starting-style\:scale-98[data-starting-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}@media (prefers-reduced-motion:reduce){.sn\:motion-reduce\:animate-none{animation:none}.sn\:motion-reduce\:transition-none{transition-property:none}}@media not all and (min-width:40rem){.sn\:max-sm\:flex-col-reverse{flex-direction:column-reverse}.sn\:max-sm\:text-\[16px\]{font-size:16px}:is(.sn\:max-sm\:\*\:h-10>*){height:calc(var(--sn-space-1) * 10)}:is(.sn\:max-sm\:\*\:w-full>*){width:100%}}@media (pointer:coarse){.sn\:pointer-coarse\:hidden{display:none}.sn\:pointer-coarse\:inline{display:inline}}.sn\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.sn\:\[\&_svg\]\:size-3 svg{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:\[\&_svg\]\:size-4 svg{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:\[\&_svg\]\:size-5 svg{width:calc(var(--sn-space-1) * 5);height:calc(var(--sn-space-1) * 5)}.sn\:\[\&_svg\]\:size-6 svg{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--sn-space-0:0px;--sn-space-1:4px;--sn-space-2:8px;--sn-space-3:12px;--sn-space-4:16px;--sn-space-5:20px;--sn-space-6:24px;--sn-space-7:28px;--sn-space-8:32px;--sn-space-10:40px;--sn-space-12:48px;--sn-space-16:64px;--sn-radius-sm:2px;--sn-radius-md:4px;--sn-radius-lg:6px;--sn-radius-full:9999px;--sn-stroke-default:1px;--sn-stroke-focus:2px;--sn-duration-fast:.12s;--sn-duration-normal:.2s;--sn-easing-standard:cubic-bezier(.2, 0, 0, 1);--sn-duration-loop:1s;--sn-opacity-disabled:.45;--sn-font-sans:"IBM Plex Sans KR", ui-sans-serif, system-ui, sans-serif;--sn-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sn-text-display:32px;--sn-text-display--line-height:40px;--sn-text-display--font-weight:600;--sn-text-display--letter-spacing:-.02em;--sn-text-title:20px;--sn-text-title--line-height:28px;--sn-text-title--font-weight:600;--sn-text-title--letter-spacing:-.01em;--sn-text-body:14px;--sn-text-body--line-height:20px;--sn-text-body--font-weight:400;--sn-text-body--letter-spacing:0em;--sn-text-body-strong:14px;--sn-text-body-strong--line-height:20px;--sn-text-body-strong--font-weight:500;--sn-text-body-strong--letter-spacing:0em;--sn-text-label:13px;--sn-text-label--line-height:16px;--sn-text-label--font-weight:500;--sn-text-label--letter-spacing:0em;--sn-text-caption:12px;--sn-text-caption--line-height:16px;--sn-text-caption--font-weight:400;--sn-text-caption--letter-spacing:0em;--sn-text-mono:14px;--sn-text-mono--line-height:20px;--sn-text-mono--font-weight:400;--sn-text-mono--letter-spacing:0em;--sn-text-mono-caption:12px;--sn-text-mono-caption--line-height:16px;--sn-text-mono-caption--font-weight:400;--sn-text-mono-caption--letter-spacing:0em}:root,[data-theme=light]{color-scheme:light;--sn-color-bg-canvas:#f4f6f8;--sn-color-bg-surface:#fff;--sn-color-bg-subtle:#e6eaee;--sn-color-bg-primary:#2340d0;--sn-color-bg-primary-hover:#1b33ae;--sn-color-bg-danger:#c8312b;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#0e1216;--sn-color-text-muted:#5b6672;--sn-color-text-on-primary:#fff;--sn-color-text-on-danger:#fff;--sn-color-text-danger:#c8312b;--sn-color-border-default:#d5dbe1;--sn-color-border-strong:#8d99a6;--sn-color-border-focus:#2340d0;--sn-color-border-danger:#c8312b;--sn-color-bg-inverse:#0e1216;--sn-color-text-inverse:#fff;--sn-color-bg-success:#16804f;--sn-color-text-on-success:#fff;--sn-color-bg-success-subtle:#eaf7f0;--sn-color-text-success:#0f6640;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#fcf5e6;--sn-color-text-warning:#85520a;--sn-color-bg-danger-subtle:#fcedec;--sn-color-border-success:#16804f;--sn-color-border-warning:#a86c12}[data-theme=dark]{color-scheme:dark;--sn-color-bg-canvas:#0e1216;--sn-color-bg-surface:#161b21;--sn-color-bg-subtle:#1e252d;--sn-color-bg-primary:#6e86ff;--sn-color-bg-primary-hover:#8c9fff;--sn-color-bg-danger:#f06a5f;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#e6eaee;--sn-color-text-muted:#8d99a6;--sn-color-text-on-primary:#0e1216;--sn-color-text-on-danger:#0e1216;--sn-color-text-danger:#f06a5f;--sn-color-border-default:#2a323b;--sn-color-border-strong:#5b6672;--sn-color-border-focus:#6e86ff;--sn-color-border-danger:#f06a5f;--sn-color-bg-inverse:#e6eaee;--sn-color-text-inverse:#0e1216;--sn-color-bg-success:#3db882;--sn-color-text-on-success:#0e1216;--sn-color-bg-success-subtle:#0b2218;--sn-color-text-success:#6bd1a0;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#24190a;--sn-color-text-warning:#eec46a;--sn-color-bg-danger-subtle:#2b1311;--sn-color-border-success:#3db882;--sn-color-border-warning:#e3a43a}@keyframes sn-pulse{50%{opacity:.5}}@keyframes sn-spin{to{transform:rotate(360deg)}}}
+@property --tw-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@layer sonic{/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer utilities{.sn\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sn\:absolute{position:absolute}.sn\:fixed{position:fixed}.sn\:relative{position:relative}.sn\:sticky{position:sticky}.sn\:inset-0{inset:0}.sn\:inset-y-0{inset-block:0}.sn\:top-0{top:0}.sn\:top-1\/2{top:50%}.sn\:right-0{right:0}.sn\:right-1{right:var(--sn-space-1)}.sn\:right-4{right:calc(var(--sn-space-1) * 4)}.sn\:bottom-4{bottom:calc(var(--sn-space-1) * 4)}.sn\:bottom-\[-1px\]{bottom:-1px}.sn\:left-0{left:0}.sn\:left-1{left:var(--sn-space-1)}.sn\:left-1\/2{left:50%}.sn\:z-10{z-index:10}.sn\:z-20{z-index:20}.sn\:z-30{z-index:30}.sn\:z-50{z-index:50}.sn\:m-0{margin:0}.sn\:my-1{margin-block:var(--sn-space-1)}.sn\:-mt-2{margin-top:calc(var(--sn-space-1) * -2)}.sn\:-mt-3{margin-top:calc(var(--sn-space-1) * -3)}.sn\:mt-2{margin-top:calc(var(--sn-space-1) * 2)}.sn\:-mb-px{margin-bottom:-1px}.sn\:mb-0{margin-bottom:0}.sn\:ml-1{margin-left:var(--sn-space-1)}.sn\:ml-auto{margin-left:auto}.sn\:box-border{box-sizing:border-box}.sn\:block{display:block}.sn\:flex{display:flex}.sn\:hidden{display:none}.sn\:inline-block{display:inline-block}.sn\:inline-flex{display:inline-flex}.sn\:size-2{width:calc(var(--sn-space-1) * 2);height:calc(var(--sn-space-1) * 2)}.sn\:size-3{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:size-4{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:size-6{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:size-7{width:calc(var(--sn-space-1) * 7);height:calc(var(--sn-space-1) * 7)}.sn\:size-8{width:calc(var(--sn-space-1) * 8);height:calc(var(--sn-space-1) * 8)}.sn\:size-10{width:calc(var(--sn-space-1) * 10);height:calc(var(--sn-space-1) * 10)}.sn\:size-12{width:calc(var(--sn-space-1) * 12);height:calc(var(--sn-space-1) * 12)}.sn\:size-24{width:calc(var(--sn-space-1) * 24);height:calc(var(--sn-space-1) * 24)}.sn\:size-full{width:100%;height:100%}.sn\:h-\(--accordion-panel-height\){height:var(--accordion-panel-height)}.sn\:h-0\.5{height:calc(var(--sn-space-1) * .5)}.sn\:h-1{height:var(--sn-space-1)}.sn\:h-3{height:calc(var(--sn-space-1) * 3)}.sn\:h-4{height:calc(var(--sn-space-1) * 4)}.sn\:h-5{height:calc(var(--sn-space-1) * 5)}.sn\:h-6{height:calc(var(--sn-space-1) * 6)}.sn\:h-7{height:calc(var(--sn-space-1) * 7)}.sn\:h-8{height:calc(var(--sn-space-1) * 8)}.sn\:h-10{height:calc(var(--sn-space-1) * 10)}.sn\:h-16{height:calc(var(--sn-space-1) * 16)}.sn\:h-96{height:calc(var(--sn-space-1) * 96)}.sn\:h-auto{height:auto}.sn\:h-full{height:100%}.sn\:h-px{height:1px}.sn\:max-h-\(--available-height\){max-height:var(--available-height)}.sn\:max-h-\[calc\(100dvh-2\*var\(--sn-space-4\)\)\]{max-height:calc(100dvh - 2 * var(--sn-space-4))}.sn\:min-h-0{min-height:0}.sn\:min-h-20{min-height:calc(var(--sn-space-1) * 20)}.sn\:w-\(--active-tab-width\){width:var(--active-tab-width)}.sn\:w-2\/3{width:66.6667%}.sn\:w-6{width:calc(var(--sn-space-1) * 6)}.sn\:w-7{width:calc(var(--sn-space-1) * 7)}.sn\:w-24{width:calc(var(--sn-space-1) * 24)}.sn\:w-80{width:calc(var(--sn-space-1) * 80)}.sn\:w-90{width:calc(var(--sn-space-1) * 90)}.sn\:w-110{width:calc(var(--sn-space-1) * 110)}.sn\:w-auto{width:auto}.sn\:w-full{width:100%}.sn\:w-max{width:max-content}.sn\:w-px{width:1px}.sn\:max-w-\[calc\(100vw-2\*var\(--sn-space-4\)\)\]{max-width:calc(100vw - 2 * var(--sn-space-4))}.sn\:max-w-full{max-width:100%}.sn\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.sn\:min-w-0{min-width:0}.sn\:min-w-7{min-width:calc(var(--sn-space-1) * 7)}.sn\:min-w-48{min-width:calc(var(--sn-space-1) * 48)}.sn\:min-w-full{min-width:100%}.sn\:flex-1{flex:1}.sn\:shrink-0{flex-shrink:0}.sn\:border-separate{border-collapse:separate}.sn\:border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.sn\:origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.sn\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:translate-x-\(--active-tab-left\){--tw-translate-x:var(--active-tab-left);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:animate-\[sn-pulse_var\(--sn-duration-loop\)_ease-in-out_infinite\]{animation:sn-pulse var(--sn-duration-loop) ease-in-out infinite}.sn\:animate-\[sn-spin_var\(--sn-duration-loop\)_linear_infinite\]{animation:sn-spin var(--sn-duration-loop) linear infinite}.sn\:cursor-default{cursor:default}.sn\:cursor-grab{cursor:grab}.sn\:cursor-not-allowed{cursor:not-allowed}.sn\:cursor-pointer{cursor:pointer}.sn\:resize-y{resize:vertical}.sn\:\[scrollbar-width\:none\]{scrollbar-width:none}.sn\:list-none{list-style-type:none}.sn\:flex-col{flex-direction:column}.sn\:flex-col-reverse{flex-direction:column-reverse}.sn\:flex-wrap{flex-wrap:wrap}.sn\:items-center{align-items:center}.sn\:items-start{align-items:flex-start}.sn\:justify-between{justify-content:space-between}.sn\:justify-center{justify-content:center}.sn\:justify-end{justify-content:flex-end}.sn\:gap-1{gap:var(--sn-space-1)}.sn\:gap-2{gap:calc(var(--sn-space-1) * 2)}.sn\:gap-3{gap:calc(var(--sn-space-1) * 3)}.sn\:gap-4{gap:calc(var(--sn-space-1) * 4)}.sn\:gap-6{gap:calc(var(--sn-space-1) * 6)}.sn\:gap-10{gap:calc(var(--sn-space-1) * 10)}.sn\:self-stretch{align-self:stretch}.sn\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sn\:overflow-auto{overflow:auto}.sn\:overflow-hidden{overflow:hidden}.sn\:overflow-x-auto{overflow-x:auto}.sn\:overflow-y-auto{overflow-y:auto}.sn\:rounded-full{border-radius:var(--sn-radius-full)}.sn\:rounded-lg{border-radius:var(--sn-radius-lg)}.sn\:rounded-md{border-radius:var(--sn-radius-md)}.sn\:rounded-sm{border-radius:var(--sn-radius-sm)}.sn\:border{border-style:var(--tw-border-style);border-width:1px}.sn\:border-0{border-style:var(--tw-border-style);border-width:0}.sn\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.sn\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.sn\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.sn\:border-dashed{--tw-border-style:dashed;border-style:dashed}.sn\:border-danger{border-color:var(--sn-color-border-danger)}.sn\:border-default{border-color:var(--sn-color-border-default)}.sn\:border-strong{border-color:var(--sn-color-border-strong)}.sn\:border-transparent{border-color:#0000}.sn\:border-r-default{border-right-color:var(--sn-color-border-default)}.sn\:border-l-default{border-left-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-border-default\){background-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-text-on-primary\){background-color:var(--sn-color-text-on-primary)}.sn\:bg-canvas{background-color:var(--sn-color-bg-canvas)}.sn\:bg-danger{background-color:var(--sn-color-bg-danger)}.sn\:bg-danger-subtle{background-color:var(--sn-color-bg-danger-subtle)}.sn\:bg-inverse{background-color:var(--sn-color-bg-inverse)}.sn\:bg-overlay{background-color:var(--sn-color-bg-overlay)}.sn\:bg-primary{background-color:var(--sn-color-bg-primary)}.sn\:bg-subtle{background-color:var(--sn-color-bg-subtle)}.sn\:bg-success{background-color:var(--sn-color-bg-success)}.sn\:bg-success-subtle{background-color:var(--sn-color-bg-success-subtle)}.sn\:bg-surface{background-color:var(--sn-color-bg-surface)}.sn\:bg-transparent{background-color:#0000}.sn\:bg-warning{background-color:var(--sn-color-bg-warning)}.sn\:bg-warning-subtle{background-color:var(--sn-color-bg-warning-subtle)}.sn\:object-cover{object-fit:cover}.sn\:p-0{padding:0}.sn\:p-1{padding:var(--sn-space-1)}.sn\:p-3{padding:calc(var(--sn-space-1) * 3)}.sn\:p-4{padding:calc(var(--sn-space-1) * 4)}.sn\:p-5{padding:calc(var(--sn-space-1) * 5)}.sn\:p-6{padding:calc(var(--sn-space-1) * 6)}.sn\:p-px{padding:1px}.sn\:px-0{padding-inline:0}.sn\:px-1{padding-inline:var(--sn-space-1)}.sn\:px-2{padding-inline:calc(var(--sn-space-1) * 2)}.sn\:px-3{padding-inline:calc(var(--sn-space-1) * 3)}.sn\:px-4{padding-inline:calc(var(--sn-space-1) * 4)}.sn\:px-6{padding-inline:calc(var(--sn-space-1) * 6)}.sn\:py-0{padding-block:0}.sn\:py-1{padding-block:var(--sn-space-1)}.sn\:py-2{padding-block:calc(var(--sn-space-1) * 2)}.sn\:py-3{padding-block:calc(var(--sn-space-1) * 3)}.sn\:py-6{padding-block:calc(var(--sn-space-1) * 6)}.sn\:py-12{padding-block:calc(var(--sn-space-1) * 12)}.sn\:py-16{padding-block:calc(var(--sn-space-1) * 16)}.sn\:pt-1{padding-top:var(--sn-space-1)}.sn\:pb-4{padding-bottom:calc(var(--sn-space-1) * 4)}.sn\:pb-px{padding-bottom:1px}.sn\:text-center{text-align:center}.sn\:text-left{text-align:left}.sn\:text-right{text-align:right}.sn\:align-middle{vertical-align:middle}.sn\:align-text-bottom{vertical-align:text-bottom}.sn\:font-mono{font-family:var(--sn-font-mono)}.sn\:font-sans{font-family:var(--sn-font-sans)}.sn\:text-body{font-size:var(--sn-text-body);line-height:var(--tw-leading,var(--sn-text-body--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body--font-weight))}.sn\:text-body-strong{font-size:var(--sn-text-body-strong);line-height:var(--tw-leading,var(--sn-text-body-strong--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body-strong--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body-strong--font-weight))}.sn\:text-caption{font-size:var(--sn-text-caption);line-height:var(--tw-leading,var(--sn-text-caption--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-caption--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-caption--font-weight))}.sn\:text-display{font-size:var(--sn-text-display);line-height:var(--tw-leading,var(--sn-text-display--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-display--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-display--font-weight))}.sn\:text-label{font-size:var(--sn-text-label);line-height:var(--tw-leading,var(--sn-text-label--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-label--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-label--font-weight))}.sn\:text-title{font-size:var(--sn-text-title);line-height:var(--tw-leading,var(--sn-text-title--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-title--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-title--font-weight))}.sn\:whitespace-nowrap{white-space:nowrap}.sn\:text-danger{color:var(--sn-color-text-danger)}.sn\:text-default{color:var(--sn-color-text-default)}.sn\:text-inherit{color:inherit}.sn\:text-inverse{color:var(--sn-color-text-inverse)}.sn\:text-muted{color:var(--sn-color-text-muted)}.sn\:text-on-danger{color:var(--sn-color-text-on-danger)}.sn\:text-on-primary{color:var(--sn-color-text-on-primary)}.sn\:text-on-success{color:var(--sn-color-text-on-success)}.sn\:text-on-warning{color:var(--sn-color-text-on-warning)}.sn\:text-success{color:var(--sn-color-text-success)}.sn\:text-warning{color:var(--sn-color-text-warning)}.sn\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.sn\:underline{text-decoration-line:underline}.sn\:underline-offset-2{text-underline-offset:2px}.sn\:opacity-\(--sn-opacity-disabled\){opacity:var(--sn-opacity-disabled)}.sn\:opacity-0{opacity:0}.sn\:shadow-\[inset_-2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset -2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_-2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 -2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,translate\]{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[translate\,width\]{transition-property:translate,width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:duration-\(--sn-duration-fast\){--tw-duration:var(--sn-duration-fast);transition-duration:var(--sn-duration-fast)}.sn\:duration-\(--sn-duration-normal\){--tw-duration:var(--sn-duration-normal);transition-duration:var(--sn-duration-normal)}.sn\:ease-standard{--tw-ease:var(--sn-easing-standard);transition-timing-function:var(--sn-easing-standard)}.sn\:outline-none{--tw-outline-style:none;outline-style:none}.sn\:select-none{-webkit-user-select:none;user-select:none}.sn\:\[font\:inherit\]{font:inherit}@media (hover:hover){.sn\:group-hover\/head\:opacity-100:is(:where(.sn\:group\/head):hover *){opacity:1}}.sn\:group-aria-invalid\:text-danger:is(:where(.sn\:group)[aria-invalid=true] *){color:var(--sn-color-text-danger)}@media (hover:hover){.sn\:group-data-interactive\/row\:group-hover\/row\:bg-subtle:is(:where(.sn\:group\/row)[data-interactive] *):is(:where(.sn\:group\/row):hover *){background-color:var(--sn-color-bg-subtle)}}.sn\:group-data-invalid\:text-danger:is(:where(.sn\:group)[data-invalid] *){color:var(--sn-color-text-danger)}.sn\:group-data-panel-open\:rotate-180:is(:where(.sn\:group)[data-panel-open] *),.sn\:group-data-popup-open\:rotate-180:is(:where(.sn\:group)[data-popup-open] *){rotate:180deg}.sn\:group-data-selected\:border-transparent:is(:where(.sn\:group)[data-selected] *){border-color:#0000}.sn\:group-data-selected\:bg-primary:is(:where(.sn\:group)[data-selected] *){background-color:var(--sn-color-bg-primary)}.sn\:group-data-selected\/row\:bg-selected:is(:where(.sn\:group\/row)[data-selected] *){background-color:var(--sn-color-bg-selected)}.sn\:placeholder\:text-muted::placeholder{color:var(--sn-color-text-muted)}.sn\:focus-within\:opacity-100:focus-within{opacity:1}@media (hover:hover){.sn\:hover\:bg-subtle:hover{background-color:var(--sn-color-bg-subtle)}.sn\:hover\:text-default:hover{color:var(--sn-color-text-default)}.sn\:hover\:text-muted:hover{color:var(--sn-color-text-muted)}.sn\:hover\:not-disabled\:bg-subtle:hover:not(:disabled){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:border-strong:hover:not([data-disabled]){border-color:var(--sn-color-border-strong)}.sn\:hover\:not-data-disabled\:bg-primary-hover:hover:not([data-disabled]){background-color:var(--sn-color-bg-primary-hover)}.sn\:hover\:not-data-disabled\:bg-subtle:hover:not([data-disabled]){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:text-default:hover:not([data-disabled]){color:var(--sn-color-text-default)}}.sn\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.sn\:focus-visible\:-outline-offset-2:focus-visible{outline-offset:calc(2px * -1)}.sn\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.sn\:focus-visible\:outline-focus:focus-visible{outline-color:var(--sn-color-border-focus)}.sn\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.sn\:disabled\:opacity-\(--sn-opacity-disabled\):disabled{opacity:var(--sn-opacity-disabled)}.sn\:aria-invalid\:border-danger[aria-invalid=true]{border-color:var(--sn-color-border-danger)}@media (hover:hover){.sn\:hover\:aria-invalid\:border-danger:hover[aria-invalid=true]{border-color:var(--sn-color-border-danger)}}.sn\:aria-invalid\:focus-visible\:outline-danger[aria-invalid=true]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-active\:text-default[data-active]{color:var(--sn-color-text-default)}.sn\:data-checked\:translate-x-3[data-checked]{--tw-translate-x:calc(var(--sn-space-1) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-checked\:border-transparent[data-checked]{border-color:#0000}.sn\:data-checked\:bg-\(--sn-color-text-on-primary\)[data-checked]{background-color:var(--sn-color-text-on-primary)}.sn\:data-checked\:bg-primary[data-checked]{background-color:var(--sn-color-bg-primary)}.sn\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.sn\:data-disabled\:opacity-\(--sn-opacity-disabled\)[data-disabled]{opacity:var(--sn-opacity-disabled)}.sn\:data-disabled\:not-data-loading\:cursor-not-allowed[data-disabled]:not([data-loading]){cursor:not-allowed}.sn\:data-disabled\:not-data-loading\:opacity-\(--sn-opacity-disabled\)[data-disabled]:not([data-loading]){opacity:var(--sn-opacity-disabled)}.sn\:data-dragging\:border-focus[data-dragging]{border-color:var(--sn-color-border-focus)}.sn\:data-dragging\:bg-subtle[data-dragging]{background-color:var(--sn-color-bg-subtle)}.sn\:data-dragging\:bg-surface[data-dragging]{background-color:var(--sn-color-bg-surface)}.sn\:data-dragging\:outline[data-dragging],.sn\:data-dragging\:outline-1[data-dragging]{outline-style:var(--tw-outline-style);outline-width:1px}.sn\:data-dragging\:-outline-offset-1[data-dragging]{outline-offset:calc(1px * -1)}.sn\:data-dragging\:outline-default[data-dragging]{outline-color:var(--sn-color-border-default)}.sn\:data-ending-style\:h-0[data-ending-style]{height:0}.sn\:data-ending-style\:translate-y-2[data-ending-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-ending-style\:scale-98[data-ending-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.sn\:data-highlighted\:bg-subtle[data-highlighted]{background-color:var(--sn-color-bg-subtle)}.sn\:data-indeterminate\:border-transparent[data-indeterminate]{border-color:#0000}.sn\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--sn-color-bg-primary)}@media (hover:hover){.sn\:data-interactive\:hover\:bg-subtle[data-interactive]:hover{background-color:var(--sn-color-bg-subtle)}}.sn\:data-invalid\:border-danger[data-invalid]{border-color:var(--sn-color-border-danger)}.sn\:data-invalid\:focus-visible\:outline-danger[data-invalid]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-limited\:hidden[data-limited]{display:none}.sn\:data-loading\:cursor-progress[data-loading]{cursor:progress}.sn\:data-placeholder\:text-muted[data-placeholder]{color:var(--sn-color-text-muted)}.sn\:data-popup-open\:border-focus[data-popup-open]{border-color:var(--sn-color-border-focus)}.sn\:data-pressed\:border-default[data-pressed]{border-color:var(--sn-color-border-default)}.sn\:data-pressed\:bg-surface[data-pressed]{background-color:var(--sn-color-bg-surface)}.sn\:data-pressed\:text-default[data-pressed]{color:var(--sn-color-text-default)}.sn\:data-selected\:bg-selected[data-selected]{background-color:var(--sn-color-bg-selected)}.sn\:data-starting-style\:h-0[data-starting-style]{height:0}.sn\:data-starting-style\:translate-y-2[data-starting-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-starting-style\:scale-98[data-starting-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}@media (prefers-reduced-motion:reduce){.sn\:motion-reduce\:animate-none{animation:none}.sn\:motion-reduce\:transition-none{transition-property:none}}@media not all and (min-width:40rem){.sn\:max-sm\:flex-col-reverse{flex-direction:column-reverse}.sn\:max-sm\:text-\[16px\]{font-size:16px}:is(.sn\:max-sm\:\*\:h-10>*){height:calc(var(--sn-space-1) * 10)}:is(.sn\:max-sm\:\*\:w-full>*){width:100%}}@media (min-width:40rem){.sn\:sm\:flex{display:flex}.sn\:sm\:hidden{display:none}.sn\:sm\:inline{display:inline}}@media (pointer:coarse){.sn\:pointer-coarse\:hidden{display:none}.sn\:pointer-coarse\:inline{display:inline}}.sn\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.sn\:\[\&_svg\]\:size-3 svg{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:\[\&_svg\]\:size-4 svg{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:\[\&_svg\]\:size-5 svg{width:calc(var(--sn-space-1) * 5);height:calc(var(--sn-space-1) * 5)}.sn\:\[\&_svg\]\:size-6 svg{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--sn-space-0:0px;--sn-space-1:4px;--sn-space-2:8px;--sn-space-3:12px;--sn-space-4:16px;--sn-space-5:20px;--sn-space-6:24px;--sn-space-7:28px;--sn-space-8:32px;--sn-space-10:40px;--sn-space-12:48px;--sn-space-16:64px;--sn-radius-sm:2px;--sn-radius-md:4px;--sn-radius-lg:6px;--sn-radius-full:9999px;--sn-stroke-default:1px;--sn-stroke-focus:2px;--sn-duration-fast:.12s;--sn-duration-normal:.2s;--sn-easing-standard:cubic-bezier(.2, 0, 0, 1);--sn-duration-loop:1s;--sn-opacity-disabled:.45;--sn-font-sans:"IBM Plex Sans KR", ui-sans-serif, system-ui, sans-serif;--sn-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sn-text-display:32px;--sn-text-display--line-height:40px;--sn-text-display--font-weight:600;--sn-text-display--letter-spacing:-.02em;--sn-text-title:20px;--sn-text-title--line-height:28px;--sn-text-title--font-weight:600;--sn-text-title--letter-spacing:-.01em;--sn-text-body:14px;--sn-text-body--line-height:20px;--sn-text-body--font-weight:400;--sn-text-body--letter-spacing:0em;--sn-text-body-strong:14px;--sn-text-body-strong--line-height:20px;--sn-text-body-strong--font-weight:500;--sn-text-body-strong--letter-spacing:0em;--sn-text-label:13px;--sn-text-label--line-height:16px;--sn-text-label--font-weight:500;--sn-text-label--letter-spacing:0em;--sn-text-caption:12px;--sn-text-caption--line-height:16px;--sn-text-caption--font-weight:400;--sn-text-caption--letter-spacing:0em;--sn-text-mono:14px;--sn-text-mono--line-height:20px;--sn-text-mono--font-weight:400;--sn-text-mono--letter-spacing:0em;--sn-text-mono-caption:12px;--sn-text-mono-caption--line-height:16px;--sn-text-mono-caption--font-weight:400;--sn-text-mono-caption--letter-spacing:0em}:root,[data-theme=light]{color-scheme:light;--sn-color-bg-canvas:#f4f6f8;--sn-color-bg-surface:#fff;--sn-color-bg-subtle:#e6eaee;--sn-color-bg-primary:#2340d0;--sn-color-bg-primary-hover:#1b33ae;--sn-color-bg-danger:#c8312b;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#0e1216;--sn-color-text-muted:#5b6672;--sn-color-text-on-primary:#fff;--sn-color-text-on-danger:#fff;--sn-color-text-danger:#c8312b;--sn-color-border-default:#d5dbe1;--sn-color-border-strong:#8d99a6;--sn-color-border-focus:#2340d0;--sn-color-border-danger:#c8312b;--sn-color-bg-inverse:#0e1216;--sn-color-text-inverse:#fff;--sn-color-bg-success:#16804f;--sn-color-text-on-success:#fff;--sn-color-bg-success-subtle:#eaf7f0;--sn-color-text-success:#0f6640;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#fcf5e6;--sn-color-text-warning:#85520a;--sn-color-bg-danger-subtle:#fcedec;--sn-color-border-success:#16804f;--sn-color-border-warning:#a86c12;--sn-color-bg-selected:#eef1ff}[data-theme=dark]{color-scheme:dark;--sn-color-bg-canvas:#0e1216;--sn-color-bg-surface:#161b21;--sn-color-bg-subtle:#1e252d;--sn-color-bg-primary:#6e86ff;--sn-color-bg-primary-hover:#8c9fff;--sn-color-bg-danger:#f06a5f;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#e6eaee;--sn-color-text-muted:#8d99a6;--sn-color-text-on-primary:#0e1216;--sn-color-text-on-danger:#0e1216;--sn-color-text-danger:#f06a5f;--sn-color-border-default:#2a323b;--sn-color-border-strong:#5b6672;--sn-color-border-focus:#6e86ff;--sn-color-border-danger:#f06a5f;--sn-color-bg-inverse:#e6eaee;--sn-color-text-inverse:#0e1216;--sn-color-bg-success:#3db882;--sn-color-text-on-success:#0e1216;--sn-color-bg-success-subtle:#0b2218;--sn-color-text-success:#6bd1a0;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#24190a;--sn-color-text-warning:#eec46a;--sn-color-bg-danger-subtle:#2b1311;--sn-color-border-success:#3db882;--sn-color-border-warning:#e3a43a;--sn-color-bg-selected:#18214d}@keyframes sn-pulse{50%{opacity:.5}}@keyframes sn-spin{to{transform:rotate(360deg)}}}

package/dist/tailwind.css

@@ -69,4 +69,5 @@
   --outline-color-success: var(--sn-color-border-success);
   --border-color-warning: var(--sn-color-border-warning);
   --outline-color-warning: var(--sn-color-border-warning);
+  --background-color-selected: var(--sn-color-bg-selected);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xonic0506/sonic-ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Figma-first personal design system (Base UI + Tailwind v4, prebuilt CSS)",
   "license": "MIT",
   "repository": {
@@ -46,6 +46,11 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-table": "^9.3.1",
+    "@tanstack/react-virtual": "^3.14.22",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^1.59.0",
     "tailwind-merge": "^3.7.0"