@xonic0506/sonic-ui 0.4.3 → 0.6.0

package/dist/components/data-grid.js

@@ -0,0 +1,413 @@
+"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), H = v.useMemo(() => new Map(a.map((e) => [N(e), e])), [a]), Me = 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
+	]), Ne = 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: Me,
+		data: t,
+		getRowId: (e) => r(e),
+		state: {
+			sorting: k ? [k] : [],
+			columnOrder: F,
+			columnPinning: Ne,
+			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, Pe = t.map(r), K = G.map((e) => e.id), q = U.getCenterFlatHeaders().map((e) => e.column.id), Fe = D && !k, J = v.useRef(null), Y = !T && G.length > ve, Ie = oe({
+		count: Y ? G.length : 0,
+		getScrollElement: () => J.current,
+		estimateSize: () => 40,
+		overscan: 8
+	}), X = Y ? Ie.getVirtualItems() : null, Le = X ? X.map((e) => G[e.index]) : G, Re = X?.[0]?.start ?? 0, ze = X ? Ie.getTotalSize() - (X.at(-1)?.end ?? 0) : 0, Be = typeof document > "u" ? void 0 : document.body, Ve = fe(de(le, { activationConstraint: { distance: 4 } }), de(ce, { coordinateGetter: ge })), Z = Ce(Pe, (e) => y?.(e)), Q = Ce(q, (e) => Te([...F.filter((t) => !e.includes(t)), ...e])), He = (e) => {
+		me(k?.id === e ? k.desc ? null : {
+			id: e,
+			desc: !0
+		} : {
+			id: e,
+			desc: !1
+		}), T && V !== 1 && R(1);
+	}, Ue = K.length > 0 && K.every((e) => A.includes(e)), We = !Ue && K.some((e) => A.includes(e)), Ge = (e) => P([...A.filter((e) => !K.includes(e)), ...e ? K : []]), Ke = (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: Ue,
+				indeterminate: We,
+				onCheckedChange: Ge,
+				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: () => He(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);
+	}, qe = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
+		colSpan: W.length,
+		className: "sn:h-auto sn:p-0",
+		children: e
+	}) }), $;
+	return $ = w ? qe(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 ? qe(C) : null : /* @__PURE__ */ S(re, { children: [
+		Re > 0 && /* @__PURE__ */ x("tr", {
+			"aria-hidden": !0,
+			style: { height: Re }
+		}),
+		Le.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: Fe,
+				selected: r,
+				"aria-selected": E ? r : void 0,
+				"aria-rowindex": Y ? 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);
+		}),
+		ze > 0 && /* @__PURE__ */ x("tr", {
+			"aria-hidden": !0,
+			style: { height: ze }
+		})
+	] }), /* @__PURE__ */ S("div", {
+		className: e("sn:flex sn:w-full sn:flex-col sn:gap-4", ie),
+		children: [/* @__PURE__ */ x("div", {
+			ref: J,
+			className: "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": Y ? G.length + 1 : void 0,
+				className: e(te, "sn:bg-surface"),
+				children: [/* @__PURE__ */ x(se, {
+					sensors: Ve,
+					collisionDetection: ue,
+					accessibility: {
+						container: Be,
+						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(Ke) })
+					}) })
+				}), /* @__PURE__ */ x(se, {
+					sensors: Ve,
+					collisionDetection: ue,
+					accessibility: {
+						container: Be,
+						announcements: I("행", () => K),
+						screenReaderInstructions: Se
+					},
+					onDragOver: Z.onDragOver,
+					onDragEnd: Z.onDragEnd,
+					onDragCancel: Z.onDragCancel,
+					children: /* @__PURE__ */ x(pe, {
+						items: Fe ? 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/error-page.js

@@ -14,7 +14,7 @@ function a({ status: a, title: o = i[a][0], description: s = i[a][1], action: c,
 		className: e("sn:box-border sn:flex sn:w-full sn:flex-col sn:items-center sn:gap-6 sn:px-6 sn:py-16 sn:text-center sn:font-sans", l),
 		children: [
 			/* @__PURE__ */ n("img", {
-				src: t[a],
+				src: t[`error-${a}`],
 				alt: "",
 				width: 320,
 				height: 213,

package/dist/components/illustration.d.ts

@@ -1,7 +1,7 @@
 export declare const illustrations: {
     empty: string;
     error: string;
-    404: string;
-    403: string;
-    500: string;
+    'error-404': string;
+    'error-403': string;
+    'error-500': string;
 };

package/dist/components/illustration.js

@@ -2,9 +2,9 @@
 var e = {
 	empty: new URL("../illustrations/empty.webp", import.meta.url).href,
 	error: new URL("../illustrations/error.webp", import.meta.url).href,
-	404: new URL("../illustrations/error-404.webp", import.meta.url).href,
-	403: new URL("../illustrations/error-403.webp", import.meta.url).href,
-	500: new URL("../illustrations/error-500.webp", import.meta.url).href
+	"error-404": new URL("../illustrations/error-404.webp", import.meta.url).href,
+	"error-403": new URL("../illustrations/error-403.webp", import.meta.url).href,
+	"error-500": new URL("../illustrations/error-500.webp", import.meta.url).href
 };
 //#endregion
 export { e as illustrations };

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 {};