@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/table/components/ColumnPresetSelector.esm.js

@@ -0,0 +1,165 @@
+import { Settings as e } from "../../../node_modules/lucide-react/dist/esm/icons/settings.esm.js";
+import { useIsMobile as t } from "../../../hooks/useMediaQuery.esm.js";
+import { Modal as n } from "../../modal/Modal.esm.js";
+import { ColumnSettingsTable as r } from "./ColumnSettingsTable.esm.js";
+import { useId as ee, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { motion as te } from "motion/react";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, size as f, useClick as p, useDismiss as ne, useFloating as re, useInteractions as m, useRole as h } from "@floating-ui/react";
+import g from "react-hot-toast";
+//#region src/components/table/components/ColumnPresetSelector.tsx
+var _ = 500, v = 12, y = 5, b = [
+	1,
+	2,
+	3
+];
+function x({ columns: x, columnGroups: S, activePreset: C, columnOrder: w, hiddenColumns: T, columnWidths: E, isDirty: D, hasPreset: O, onApplyPreset: k, onSaveActivePreset: A, onResetActivePreset: j, onColumnOrderChange: M, onHiddenColumnsChange: N, onSetColumnWidth: P, className: F = "" }) {
+	let I = x.filter((e) => !e.excludeFromPreset), L = new Set(x.filter((e) => e.excludeFromPreset).map((e) => e.key)), [R, z] = i(!1), B = t(), V = ee(), { refs: H, floatingStyles: U, context: W } = re({
+		open: !B && R,
+		onOpenChange: z,
+		placement: "bottom-start",
+		whileElementsMounted: c,
+		middleware: [
+			u(y),
+			l(),
+			d({ padding: v }),
+			f({ apply({ availableWidth: e, elements: t }) {
+				let n = Math.min(_, e);
+				Object.assign(t.floating.style, {
+					width: `${n}px`,
+					maxWidth: `${_}px`
+				});
+			} })
+		]
+	}), { getReferenceProps: G, getFloatingProps: K } = m([
+		p(W),
+		ne(W),
+		h(W, { role: "dialog" })
+	]), q = (e) => {
+		C !== e && (k(e), z(!1), g.success(`프리셋 ${e}을(를) 적용했어요.`));
+	}, J = (e) => {
+		let t = w.map((e, t) => ({
+			key: e,
+			index: t
+		})).filter(({ key: e }) => L.has(e)), n = [...e];
+		t.sort((e, t) => e.index - t.index).forEach(({ key: e, index: t }) => {
+			let r = Math.min(t, n.length);
+			n.splice(r, 0, e);
+		}), M(n);
+	}, Y = (e, t) => {
+		if (t) N(T.filter((t) => t !== e));
+		else {
+			if (w.length - L.size - T.filter((e) => !L.has(e)).length <= 1) {
+				g.error("최소 1개 이상의 컬럼은 표시되어야 해요.");
+				return;
+			}
+			N([...T, e]);
+		}
+	}, X = () => {
+		if (!A()) {
+			g.error("저장할 수 없는 상태예요.");
+			return;
+		}
+		z(!1), g.success(`프리셋 ${C}에 저장했어요.`);
+	}, Z = () => {
+		j(), z(!1), g.success(`프리셋 ${C}을(를) 초기화했어요.`);
+	}, Q = w.filter((e) => !L.has(e)), $ = T.filter((e) => !L.has(e));
+	return /* @__PURE__ */ o("div", {
+		className: `inline-flex ${F}`,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "inline-flex h-7.5 items-center gap-0 rounded-full bg-bg-base-secondary p-0.75 sm:h-8.5",
+				role: "group",
+				"aria-label": "컬럼 프리셋 선택",
+				children: [
+					/* @__PURE__ */ o("button", {
+						ref: H.setReference,
+						...B ? {
+							type: "button",
+							onClick: () => z((e) => !e),
+							"aria-label": "테이블 프리셋 설정",
+							title: D ? "저장하지 않은 변경이 있어요" : "테이블 프리셋 설정",
+							className: "relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary sm:h-7 sm:w-7"
+						} : G({
+							type: "button",
+							"aria-label": "테이블 프리셋 설정",
+							title: D ? "저장하지 않은 변경이 있어요" : "테이블 프리셋 설정",
+							className: "relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary sm:h-7 sm:w-7"
+						}),
+						children: [/* @__PURE__ */ a(e, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }), D && /* @__PURE__ */ a("span", {
+							"aria-hidden": "true",
+							className: "absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-brand-blue-secondary"
+						})]
+					}),
+					/* @__PURE__ */ a("span", {
+						"aria-hidden": "true",
+						className: "ml-0.5 mr-1.5 h-4 w-px bg-bg-base-tertiary sm:h-4.5"
+					}),
+					b.map((e) => {
+						let t = C === e;
+						return /* @__PURE__ */ o("button", {
+							type: "button",
+							onClick: () => q(e),
+							"aria-pressed": t,
+							title: t ? "현재 활성화된 프리셋이에요" : O(e) ? `프리셋 ${e} 적용` : `프리셋 ${e} 기본값으로 초기화`,
+							className: `relative inline-flex h-6 w-8 items-center justify-center rounded-full px-2.5 py-1 text-sm font-medium transition-colors sm:h-7 sm:w-20 ${t ? "text-text-primary" : "text-text-secondary"}`,
+							children: [t && /* @__PURE__ */ a(te.span, {
+								layoutId: `preset-active-${V}`,
+								className: "absolute inset-0 rounded-full bg-white shadow-sm dark:bg-bg-base-tertiary",
+								transition: {
+									type: "spring",
+									stiffness: 500,
+									damping: 38
+								}
+							}), /* @__PURE__ */ o("span", {
+								className: "relative",
+								children: [/* @__PURE__ */ a("span", {
+									className: "hidden sm:inline",
+									children: "프리셋"
+								}), e]
+							})]
+						}, e);
+					})
+				]
+			}),
+			!B && R && /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a("div", {
+				ref: H.setFloating,
+				style: U,
+				...K(),
+				className: "z-50 overflow-hidden rounded-lg border-2 border-neutral-200 shadow-lg dark:border-neutral-700",
+				children: /* @__PURE__ */ a(r, {
+					num: String(C),
+					columns: I,
+					columnGroups: S,
+					columnOrder: Q,
+					hiddenColumns: $,
+					columnWidths: E,
+					onOrderChange: J,
+					onHiddenChange: Y,
+					onSetColumnWidth: P,
+					onSave: X,
+					onReset: Z
+				})
+			}) }),
+			B && /* @__PURE__ */ a(n, {
+				isOpen: R,
+				onClose: () => z(!1),
+				title: `프리셋 ${C} 설정`,
+				children: /* @__PURE__ */ a(r, {
+					num: String(C),
+					columns: I,
+					columnOrder: Q,
+					hiddenColumns: $,
+					columnWidths: E,
+					onOrderChange: J,
+					onHiddenChange: Y,
+					onSetColumnWidth: P,
+					onSave: X,
+					onReset: Z
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { x as ColumnPresetSelector };

package/dist/components/table/components/ColumnSettingsTable.cjs.js

@@ -0,0 +1,4 @@
+const e=require("../../../node_modules/lucide-react/dist/esm/icons/grip-vertical.cjs.js"),t=require("../../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.cjs.js"),n=require("../../../node_modules/lucide-react/dist/esm/icons/save.cjs.js"),r=require("../../table-checkbox/TableCheckbox.cjs.js"),i=require("../column-group-utils.cjs.js");let a=require("react"),o=require("react/jsx-runtime"),s=require("@dnd-kit/core"),c=require("@dnd-kit/sortable"),l=require("@dnd-kit/utilities");function u({slot:t,index:n,isHidden:i,width:a,onHiddenChange:s,onSetColumnWidth:u}){let{attributes:f,listeners:p,setNodeRef:m,transform:h,transition:g,isDragging:_}=(0,c.useSortable)({id:t.key}),v={transform:l.CSS.Transform.toString(h),transition:g,opacity:_?.5:1},y=typeof t.header==`string`?t.header:t.key,b=t.kind===`group`;return(0,o.jsxs)(`tr`,{ref:m,style:v,className:`
+        border-b border-neutral-200 dark:border-neutral-700 transition-colors
+        ${i?`bg-neutral-100 text-neutral-400 dark:bg-neutral-800 dark:text-neutral-500`:`bg-white text-neutral-900 hover:bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700`}
+      `,children:[(0,o.jsx)(`td`,{className:`w-10 px-2 py-2 text-center cursor-grab active:cursor-grabbing`,...f,...p,children:(0,o.jsx)(e.GripVertical,{size:16,className:`text-neutral-400 dark:text-neutral-500 mx-auto`})}),(0,o.jsxs)(`td`,{className:`px-2 py-2 text-sm whitespace-nowrap`,children:[y,b&&(0,o.jsxs)(`span`,{className:`ml-1.5 text-xs text-neutral-500 dark:text-neutral-400`,children:[`(그룹 · `,t.leafColumns.length,`개)`]})]}),(0,o.jsx)(`td`,{className:`w-14 px-2 py-2 text-center text-sm`,children:n+1}),(0,o.jsx)(`td`,{className:`w-20 px-2 py-2 text-center text-sm tabular-nums`,children:b?(0,o.jsx)(`span`,{className:`text-neutral-400 dark:text-neutral-500`,children:`—`}):u?(0,o.jsx)(d,{columnKey:t.key,width:a,onSetColumnWidth:u}):(0,o.jsx)(`span`,{className:`text-neutral-500 dark:text-neutral-400`,children:a?`${a}px`:`—`})}),(0,o.jsx)(`td`,{className:`w-14 px-2 py-2 text-center`,children:(0,o.jsx)(`div`,{className:`flex justify-center`,children:(0,o.jsx)(r.TableCheckbox,{checked:i,onChange:e=>s(t.key,!e),ariaLabel:`${y} 숨김`})})})]})}function d({columnKey:e,width:t,onSetColumnWidth:n}){let[r,i]=(0,a.useState)(t?String(t):``);return(0,a.useEffect)(()=>{i(t?String(t):``)},[t]),(0,o.jsx)(`input`,{type:`text`,inputMode:`numeric`,pattern:`[0-9]*`,value:r,placeholder:`auto`,onChange:e=>i(e.target.value.replace(/[^0-9]/g,``)),onBlur:()=>{if(r===``){n(e,0);return}let t=Number(r);if(!Number.isFinite(t)||t<=0){n(e,0),i(``);return}n(e,Math.max(20,Math.floor(t)))},onKeyDown:e=>{e.key===`Enter`?(e.preventDefault(),e.target.blur()):e.key===`Escape`&&(i(t?String(t):``),e.target.blur())},"aria-label":`${e} 컬럼 너비 (px)`,className:`w-16 rounded border border-neutral-300 bg-white px-1.5 py-0.5 text-center text-xs tabular-nums text-neutral-700 transition-colors hover:border-primary-300 focus:border-primary-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100`})}function f({columns:e,columnGroups:r,columnOrder:a,hiddenColumns:l,columnWidths:d,num:f,onOrderChange:p,onHiddenChange:m,onSetColumnWidth:h,onSave:g,onReset:_}){let v=(0,s.useSensors)((0,s.useSensor)(s.PointerSensor,{activationConstraint:{distance:5}}),(0,s.useSensor)(s.KeyboardSensor,{coordinateGetter:c.sortableKeyboardCoordinates})),y=i.buildColumnSlots(e,r),b=new Map(y.map(e=>[e.key,e])),x=a.map(e=>b.get(e)).filter(e=>!!e);return(0,o.jsxs)(`div`,{className:`w-full overflow-y-auto bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100`,style:{maxHeight:500},children:[(0,o.jsxs)(`div`,{className:`sticky top-0 bg-neutral-50 dark:bg-neutral-900 px-4 py-3 font-semibold z-10 border-b border-neutral-200 dark:border-neutral-700`,children:[(0,o.jsx)(`span`,{className:`text-base`,children:`컬럼 설정`}),(0,o.jsxs)(`span`,{className:`ml-2 text-sm text-neutral-500 dark:text-neutral-400`,children:[`프리셋 `,f]})]}),(0,o.jsx)(s.DndContext,{sensors:v,collisionDetection:s.closestCenter,onDragEnd:e=>{let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=a.indexOf(String(t.id)),i=a.indexOf(String(n.id));r===-1||i===-1||p((0,c.arrayMove)(a,r,i))},children:(0,o.jsxs)(`table`,{className:`w-full`,children:[(0,o.jsx)(`thead`,{className:`bg-neutral-50 dark:bg-neutral-900 sticky top-12 z-10`,children:(0,o.jsxs)(`tr`,{className:`border-y border-neutral-200 dark:border-neutral-700 font-bold`,children:[(0,o.jsx)(`th`,{className:`w-10 px-2 py-2`}),(0,o.jsx)(`th`,{className:`px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200 whitespace-nowrap`,children:`컬럼명`}),(0,o.jsx)(`th`,{className:`w-14 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200`,children:`순서`}),(0,o.jsx)(`th`,{className:`w-20 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200`,children:`너비`}),(0,o.jsx)(`th`,{className:`w-14 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200`,children:`숨김`})]})}),(0,o.jsx)(`tbody`,{children:(0,o.jsx)(c.SortableContext,{items:a,strategy:c.verticalListSortingStrategy,children:x.map((e,t)=>(0,o.jsx)(u,{slot:e,index:t,isHidden:l.includes(e.key),width:d[e.key],onHiddenChange:m,onSetColumnWidth:h},e.key))})})]})}),(0,o.jsxs)(`div`,{className:`sticky bottom-0 bg-white dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-700 px-4 py-3 flex justify-end gap-2 z-10`,children:[(0,o.jsxs)(`button`,{type:`button`,onClick:_,className:`px-3 py-1 border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 rounded text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors flex items-center gap-1`,children:[(0,o.jsx)(t.RotateCcw,{size:12}),(0,o.jsx)(`span`,{className:`text-xs`,children:`초기화`})]}),(0,o.jsxs)(`button`,{type:`button`,onClick:g,className:`px-3 py-1 bg-primary-500 text-white rounded transition-colors flex items-center gap-1 hover:bg-primary-600`,children:[(0,o.jsx)(n.Save,{size:12}),(0,o.jsx)(`span`,{className:`text-xs`,children:`저장`})]})]})]})}exports.ColumnSettingsTable=f;

package/dist/components/table/components/ColumnSettingsTable.esm.js

@@ -0,0 +1,196 @@
+import { GripVertical as e } from "../../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
+import { RotateCcw as t } from "../../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
+import { Save as n } from "../../../node_modules/lucide-react/dist/esm/icons/save.esm.js";
+import { TableCheckbox as r } from "../../table-checkbox/TableCheckbox.esm.js";
+import { buildColumnSlots as i } from "../column-group-utils.esm.js";
+import { useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { DndContext as l, KeyboardSensor as u, PointerSensor as d, closestCenter as f, useSensor as p, useSensors as m } from "@dnd-kit/core";
+import { SortableContext as h, arrayMove as g, sortableKeyboardCoordinates as _, useSortable as v, verticalListSortingStrategy as y } from "@dnd-kit/sortable";
+import { CSS as b } from "@dnd-kit/utilities";
+function x({ slot: t, index: n, isHidden: i, width: a, onHiddenChange: o, onSetColumnWidth: l }) {
+	let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = v({ id: t.key }), g = {
+		transform: b.Transform.toString(p),
+		transition: m,
+		opacity: h ? .5 : 1
+	}, _ = typeof t.header == "string" ? t.header : t.key, y = t.kind === "group";
+	return /* @__PURE__ */ c("tr", {
+		ref: f,
+		style: g,
+		className: `
+        border-b border-neutral-200 dark:border-neutral-700 transition-colors
+        ${i ? "bg-neutral-100 text-neutral-400 dark:bg-neutral-800 dark:text-neutral-500" : "bg-white text-neutral-900 hover:bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"}
+      `,
+		children: [
+			/* @__PURE__ */ s("td", {
+				className: "w-10 px-2 py-2 text-center cursor-grab active:cursor-grabbing",
+				...u,
+				...d,
+				children: /* @__PURE__ */ s(e, {
+					size: 16,
+					className: "text-neutral-400 dark:text-neutral-500 mx-auto"
+				})
+			}),
+			/* @__PURE__ */ c("td", {
+				className: "px-2 py-2 text-sm whitespace-nowrap",
+				children: [_, y && /* @__PURE__ */ c("span", {
+					className: "ml-1.5 text-xs text-neutral-500 dark:text-neutral-400",
+					children: [
+						"(그룹 · ",
+						t.leafColumns.length,
+						"개)"
+					]
+				})]
+			}),
+			/* @__PURE__ */ s("td", {
+				className: "w-14 px-2 py-2 text-center text-sm",
+				children: n + 1
+			}),
+			/* @__PURE__ */ s("td", {
+				className: "w-20 px-2 py-2 text-center text-sm tabular-nums",
+				children: y ? /* @__PURE__ */ s("span", {
+					className: "text-neutral-400 dark:text-neutral-500",
+					children: "—"
+				}) : l ? /* @__PURE__ */ s(S, {
+					columnKey: t.key,
+					width: a,
+					onSetColumnWidth: l
+				}) : /* @__PURE__ */ s("span", {
+					className: "text-neutral-500 dark:text-neutral-400",
+					children: a ? `${a}px` : "—"
+				})
+			}),
+			/* @__PURE__ */ s("td", {
+				className: "w-14 px-2 py-2 text-center",
+				children: /* @__PURE__ */ s("div", {
+					className: "flex justify-center",
+					children: /* @__PURE__ */ s(r, {
+						checked: i,
+						onChange: (e) => o(t.key, !e),
+						ariaLabel: `${_} 숨김`
+					})
+				})
+			})
+		]
+	});
+}
+function S({ columnKey: e, width: t, onSetColumnWidth: n }) {
+	let [r, i] = o(t ? String(t) : "");
+	return a(() => {
+		i(t ? String(t) : "");
+	}, [t]), /* @__PURE__ */ s("input", {
+		type: "text",
+		inputMode: "numeric",
+		pattern: "[0-9]*",
+		value: r,
+		placeholder: "auto",
+		onChange: (e) => i(e.target.value.replace(/[^0-9]/g, "")),
+		onBlur: () => {
+			if (r === "") {
+				n(e, 0);
+				return;
+			}
+			let t = Number(r);
+			if (!Number.isFinite(t) || t <= 0) {
+				n(e, 0), i("");
+				return;
+			}
+			n(e, Math.max(20, Math.floor(t)));
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" ? (e.preventDefault(), e.target.blur()) : e.key === "Escape" && (i(t ? String(t) : ""), e.target.blur());
+		},
+		"aria-label": `${e} 컬럼 너비 (px)`,
+		className: "w-16 rounded border border-neutral-300 bg-white px-1.5 py-0.5 text-center text-xs tabular-nums text-neutral-700 transition-colors hover:border-primary-300 focus:border-primary-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+	});
+}
+function C({ columns: e, columnGroups: r, columnOrder: a, hiddenColumns: o, columnWidths: v, num: b, onOrderChange: S, onHiddenChange: C, onSetColumnWidth: w, onSave: T, onReset: E }) {
+	let D = m(p(d, { activationConstraint: { distance: 5 } }), p(u, { coordinateGetter: _ })), O = i(e, r), k = new Map(O.map((e) => [e.key, e])), A = a.map((e) => k.get(e)).filter((e) => !!e);
+	return /* @__PURE__ */ c("div", {
+		className: "w-full overflow-y-auto bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100",
+		style: { maxHeight: 500 },
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "sticky top-0 bg-neutral-50 dark:bg-neutral-900 px-4 py-3 font-semibold z-10 border-b border-neutral-200 dark:border-neutral-700",
+				children: [/* @__PURE__ */ s("span", {
+					className: "text-base",
+					children: "컬럼 설정"
+				}), /* @__PURE__ */ c("span", {
+					className: "ml-2 text-sm text-neutral-500 dark:text-neutral-400",
+					children: ["프리셋 ", b]
+				})]
+			}),
+			/* @__PURE__ */ s(l, {
+				sensors: D,
+				collisionDetection: f,
+				onDragEnd: (e) => {
+					let { active: t, over: n } = e;
+					if (!n || t.id === n.id) return;
+					let r = a.indexOf(String(t.id)), i = a.indexOf(String(n.id));
+					r === -1 || i === -1 || S(g(a, r, i));
+				},
+				children: /* @__PURE__ */ c("table", {
+					className: "w-full",
+					children: [/* @__PURE__ */ s("thead", {
+						className: "bg-neutral-50 dark:bg-neutral-900 sticky top-12 z-10",
+						children: /* @__PURE__ */ c("tr", {
+							className: "border-y border-neutral-200 dark:border-neutral-700 font-bold",
+							children: [
+								/* @__PURE__ */ s("th", { className: "w-10 px-2 py-2" }),
+								/* @__PURE__ */ s("th", {
+									className: "px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200 whitespace-nowrap",
+									children: "컬럼명"
+								}),
+								/* @__PURE__ */ s("th", {
+									className: "w-14 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200",
+									children: "순서"
+								}),
+								/* @__PURE__ */ s("th", {
+									className: "w-20 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200",
+									children: "너비"
+								}),
+								/* @__PURE__ */ s("th", {
+									className: "w-14 px-2 py-2 text-center text-sm font-medium text-neutral-700 dark:text-neutral-200",
+									children: "숨김"
+								})
+							]
+						})
+					}), /* @__PURE__ */ s("tbody", { children: /* @__PURE__ */ s(h, {
+						items: a,
+						strategy: y,
+						children: A.map((e, t) => /* @__PURE__ */ s(x, {
+							slot: e,
+							index: t,
+							isHidden: o.includes(e.key),
+							width: v[e.key],
+							onHiddenChange: C,
+							onSetColumnWidth: w
+						}, e.key))
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "sticky bottom-0 bg-white dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-700 px-4 py-3 flex justify-end gap-2 z-10",
+				children: [/* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: E,
+					className: "px-3 py-1 border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 rounded text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors flex items-center gap-1",
+					children: [/* @__PURE__ */ s(t, { size: 12 }), /* @__PURE__ */ s("span", {
+						className: "text-xs",
+						children: "초기화"
+					})]
+				}), /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: T,
+					className: "px-3 py-1 bg-primary-500 text-white rounded transition-colors flex items-center gap-1 hover:bg-primary-600",
+					children: [/* @__PURE__ */ s(n, { size: 12 }), /* @__PURE__ */ s("span", {
+						className: "text-xs",
+						children: "저장"
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { C as ColumnSettingsTable };

package/dist/components/table/components/KeyboardNavButton.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../node_modules/lucide-react/dist/esm/icons/keyboard.cjs.js");let t=require("react/jsx-runtime");function n({onKeyDown:n}){return(0,t.jsxs)(`button`,{type:`button`,onKeyDown:n,title:`키보드로 페이지 이동 (포커스 후 ← / → 키)`,"aria-label":`키보드로 페이지 이동 활성화`,className:`group/kbd inline-flex items-center gap-0 rounded border border-neutral-300 bg-white px-1.5 py-1 text-neutral-500 transition-[color,background-color,border-color,gap] duration-200 hover:border-primary-300 hover:text-primary-600 focus:gap-1.5 focus:border-primary-500 focus:bg-primary-50 focus:text-primary-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:border-primary-400 dark:focus:bg-primary-950/40 dark:focus:text-primary-300 pointer-coarse:hidden`,children:[(0,t.jsx)(e.Keyboard,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":`true`}),(0,t.jsx)(`span`,{className:`grid grid-cols-[0fr] overflow-hidden text-xs tabular-nums opacity-0 transition-[grid-template-columns,opacity] duration-200 group-focus/kbd:grid-cols-[1fr] group-focus/kbd:opacity-100`,children:(0,t.jsx)(`span`,{className:`min-w-0 whitespace-nowrap`,children:`← / → 키로 이동 중`})})]})}exports.KeyboardNavButton=n;

package/dist/components/table/components/KeyboardNavButton.esm.js

@@ -0,0 +1,24 @@
+import { Keyboard as e } from "../../../node_modules/lucide-react/dist/esm/icons/keyboard.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/table/components/KeyboardNavButton.tsx
+function r({ onKeyDown: r }) {
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		onKeyDown: r,
+		title: "키보드로 페이지 이동 (포커스 후 ← / → 키)",
+		"aria-label": "키보드로 페이지 이동 활성화",
+		className: "group/kbd inline-flex items-center gap-0 rounded border border-neutral-300 bg-white px-1.5 py-1 text-neutral-500 transition-[color,background-color,border-color,gap] duration-200 hover:border-primary-300 hover:text-primary-600 focus:gap-1.5 focus:border-primary-500 focus:bg-primary-50 focus:text-primary-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:border-primary-400 dark:focus:bg-primary-950/40 dark:focus:text-primary-300 pointer-coarse:hidden",
+		children: [/* @__PURE__ */ t(e, {
+			className: "h-3.5 w-3.5 shrink-0",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ t("span", {
+			className: "grid grid-cols-[0fr] overflow-hidden text-xs tabular-nums opacity-0 transition-[grid-template-columns,opacity] duration-200 group-focus/kbd:grid-cols-[1fr] group-focus/kbd:opacity-100",
+			children: /* @__PURE__ */ t("span", {
+				className: "min-w-0 whitespace-nowrap",
+				children: "← / → 키로 이동 중"
+			})
+		})]
+	});
+}
+//#endregion
+export { r as KeyboardNavButton };

package/dist/components/table/components/PageJumpInput.cjs.js

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime");function n({currentPage:n,totalPages:r,onPageChange:i,className:a=``,"data-testid":o}){let[s,c]=(0,e.useState)(``),l=e=>{let t=e.replace(/[^0-9]/g,``);if(t===``){c(``);return}let n=Number(t);if(n<=0){c(``);return}c(String(Math.min(r,n)))},u=()=>{if(s===``)return;let e=Number(s),t=Math.max(1,Math.min(r,Math.floor(e)));t!==n&&i(t),c(``)},d=e=>{e.key===`Enter`?(e.preventDefault(),u()):e.key===`Escape`&&(c(``),e.target.blur())},f=String(r).length,p=f<=2?`w-12`:f===3?`w-14`:`w-16`;return(0,t.jsxs)(`label`,{className:`flex items-center gap-1 text-sm text-neutral-600 dark:text-neutral-300 ${a}`,children:[(0,t.jsx)(`span`,{className:`text-neutral-500`,children:`이동`}),(0,t.jsx)(`input`,{type:`text`,inputMode:`numeric`,pattern:`[0-9]*`,maxLength:f,value:s,placeholder:String(n),onChange:e=>l(e.target.value),onKeyDown:d,onBlur:u,"aria-label":`페이지 번호 입력 (1-${r})`,"data-testid":o,className:`${p} rounded border border-neutral-300 bg-white px-2 py-0.5 text-center tabular-nums text-neutral-700 transition-colors hover:border-primary-300 focus:border-primary-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-primary-400`}),(0,t.jsxs)(`span`,{className:`text-neutral-500 tabular-nums`,children:[`/ `,r.toLocaleString()]})]})}exports.PageJumpInput=n;

package/dist/components/table/components/PageJumpInput.esm.js

@@ -0,0 +1,53 @@
+import { useState as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/table/components/PageJumpInput.tsx
+function r({ currentPage: r, totalPages: i, onPageChange: a, className: o = "", "data-testid": s }) {
+	let [c, l] = e(""), u = (e) => {
+		let t = e.replace(/[^0-9]/g, "");
+		if (t === "") {
+			l("");
+			return;
+		}
+		let n = Number(t);
+		if (n <= 0) {
+			l("");
+			return;
+		}
+		l(String(Math.min(i, n)));
+	}, d = () => {
+		if (c === "") return;
+		let e = Number(c), t = Math.max(1, Math.min(i, Math.floor(e)));
+		t !== r && a(t), l("");
+	}, f = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), d()) : e.key === "Escape" && (l(""), e.target.blur());
+	}, p = String(i).length, m = p <= 2 ? "w-12" : p === 3 ? "w-14" : "w-16";
+	return /* @__PURE__ */ n("label", {
+		className: `flex items-center gap-1 text-sm text-neutral-600 dark:text-neutral-300 ${o}`,
+		children: [
+			/* @__PURE__ */ t("span", {
+				className: "text-neutral-500",
+				children: "이동"
+			}),
+			/* @__PURE__ */ t("input", {
+				type: "text",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				maxLength: p,
+				value: c,
+				placeholder: String(r),
+				onChange: (e) => u(e.target.value),
+				onKeyDown: f,
+				onBlur: d,
+				"aria-label": `페이지 번호 입력 (1-${i})`,
+				"data-testid": s,
+				className: `${m} rounded border border-neutral-300 bg-white px-2 py-0.5 text-center tabular-nums text-neutral-700 transition-colors hover:border-primary-300 focus:border-primary-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-primary-400`
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "text-neutral-500 tabular-nums",
+				children: ["/ ", i.toLocaleString()]
+			})
+		]
+	});
+}
+//#endregion
+export { r as PageJumpInput };

package/dist/components/table/components/Pagination.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs.js"),t=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs.js"),n=require("../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.cjs.js"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[9,7,5,3,1],s=16,c=`px-0.5 text-xs text-text-tertiary font-mono @min-[640px]/pagebar:px-1 @min-[640px]/pagebar:text-sm`,l=`inline-flex h-7 min-w-6 items-center justify-center rounded-md px-1.5 font-mono text-xs tabular-nums transition-colors @min-[640px]/pagebar:h-8 @min-[640px]/pagebar:min-w-7 @min-[640px]/pagebar:px-2 @min-[640px]/pagebar:text-sm`,u=`text-text-disabled hover:bg-bg-base-secondary hover:text-text-secondary`,d=`font-bold text-text-secondary`,f=`outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500`,p=`disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-text-tertiary`;function m({active:e=!1,className:t=``,children:n,...r}){return(0,a.jsx)(`button`,{type:`button`,"aria-current":e?`page`:void 0,className:`${l} ${e?d:u} ${f} ${p} ${t}`,...r,children:n})}function h(e,t,n){let r=Math.floor(n/2),i=Math.max(1,e-r),a=Math.min(t,i+n-1);a-i<n-1&&(i=Math.max(1,a-n+1));let o=[];for(let e=i;e<=a;e++)o.push(e);return o}function g(e,t){let n=t<=28?4:8,r=t<=28,i=r?24:28,a=r?7:8;return e.reduce((e,t)=>{let n=String(t).length;return e+Math.max(i,i+(n-1)*a)},0)+n*Math.max(0,e.length-1)+s*2+24}function _(e,t,n,r,i,a){let s=e-r,c=o.filter(e=>e<=a);for(let e of c)if(g(h(t,n,e),i)<=s)return e;return 1}function v({currentPage:e,totalPages:t,pages:n,onPageChange:r,testId:i}){if(n.length===0)return null;let o=n[0]>1,s=n[n.length-1]<t;return(0,a.jsxs)(a.Fragment,{children:[o&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(m,{active:e===1,onClick:()=>r(1),"data-testid":i?`${i}-page-1`:void 0,children:`1`}),n[0]>2&&(0,a.jsx)(`span`,{className:c,children:`…`})]}),n.map(t=>(0,a.jsx)(m,{active:e===t,onClick:()=>r(t),"data-testid":i?`${i}-page-${t}`:void 0,children:t},t)),s&&(0,a.jsxs)(a.Fragment,{children:[n[n.length-1]<t-1&&(0,a.jsx)(`span`,{className:c,children:`…`}),(0,a.jsx)(m,{active:e===t,onClick:()=>r(t),"data-testid":i?`${i}-page-${t}`:void 0,children:t})]})]})}function y({currentPage:o,totalPages:s,onPageChange:c,hasPreviousPage:l,hasNextPage:u,maxPageButtons:d=9,className:f=``,"data-testid":p,...g}){let y=(0,i.useRef)(null),[b,x]=(0,i.useState)(d);if((0,i.useLayoutEffect)(()=>{let e=y.current;if(!e)return;let t=e.parentElement;if(!t)return;let n=()=>{let e=t.offsetWidth,n=e<640,r=n?28:32,i=n?4:8,a=_(e,o,s,r*4+i*5,r,d);x(e=>e===a?e:a)};n();let r=new ResizeObserver(n);return r.observe(t),()=>r.disconnect()},[o,s,d]),s<1)return null;if(s===1)return(0,a.jsx)(`div`,{ref:y,className:`flex items-center justify-center gap-1 sm:gap-2 ${f}`,"data-testid":p,...g,children:(0,a.jsx)(m,{active:!0,disabled:!0,"data-testid":p?`${p}-page-1`:void 0,children:`1`})});let S=h(o,s,b);return(0,a.jsxs)(`div`,{ref:y,className:`flex items-center justify-center gap-1 sm:gap-2 ${f}`,"data-testid":p,...g,children:[(0,a.jsx)(m,{disabled:o===1,onClick:()=>c(1),"data-testid":p?`${p}-first`:void 0,"aria-label":`첫 페이지`,children:(0,a.jsx)(n.ChevronsLeft,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,a.jsx)(m,{disabled:l===!1||o===1,onClick:()=>c(o-1),"data-testid":p?`${p}-prev`:void 0,"aria-label":`이전 페이지`,children:(0,a.jsx)(e.ChevronLeft,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,a.jsx)(v,{currentPage:o,totalPages:s,pages:S,onPageChange:c,testId:p}),(0,a.jsx)(m,{disabled:u===!1||o===s,onClick:()=>c(o+1),"data-testid":p?`${p}-next`:void 0,"aria-label":`다음 페이지`,children:(0,a.jsx)(t.ChevronRight,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,a.jsx)(m,{disabled:o===s,onClick:()=>c(s),"data-testid":p?`${p}-last`:void 0,"aria-label":`마지막 페이지`,children:(0,a.jsx)(r.ChevronsRight,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})})]})}exports.Pagination=y;

package/dist/components/table/components/Pagination.esm.js

@@ -0,0 +1,162 @@
+import { ChevronLeft as e } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as t } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { ChevronsLeft as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.esm.js";
+import { ChevronsRight as r } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.esm.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/table/components/Pagination.tsx
+var u = [
+	9,
+	7,
+	5,
+	3,
+	1
+], d = 16, f = "px-0.5 text-xs text-text-tertiary font-mono @min-[640px]/pagebar:px-1 @min-[640px]/pagebar:text-sm", p = "inline-flex h-7 min-w-6 items-center justify-center rounded-md px-1.5 font-mono text-xs tabular-nums transition-colors @min-[640px]/pagebar:h-8 @min-[640px]/pagebar:min-w-7 @min-[640px]/pagebar:px-2 @min-[640px]/pagebar:text-sm", m = "text-text-disabled hover:bg-bg-base-secondary hover:text-text-secondary", h = "font-bold text-text-secondary", g = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", _ = "disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-text-tertiary";
+function v({ active: e = !1, className: t = "", children: n, ...r }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		"aria-current": e ? "page" : void 0,
+		className: `${p} ${e ? h : m} ${g} ${_} ${t}`,
+		...r,
+		children: n
+	});
+}
+function y(e, t, n) {
+	let r = Math.floor(n / 2), i = Math.max(1, e - r), a = Math.min(t, i + n - 1);
+	a - i < n - 1 && (i = Math.max(1, a - n + 1));
+	let o = [];
+	for (let e = i; e <= a; e++) o.push(e);
+	return o;
+}
+function b(e, t) {
+	let n = t <= 28 ? 4 : 8, r = t <= 28, i = r ? 24 : 28, a = r ? 7 : 8;
+	return e.reduce((e, t) => {
+		let n = String(t).length;
+		return e + Math.max(i, i + (n - 1) * a);
+	}, 0) + n * Math.max(0, e.length - 1) + d * 2 + 24;
+}
+function x(e, t, n, r, i, a) {
+	let o = e - r, s = u.filter((e) => e <= a);
+	for (let e of s) if (b(y(t, n, e), i) <= o) return e;
+	return 1;
+}
+function S({ currentPage: e, totalPages: t, pages: n, onPageChange: r, testId: i }) {
+	if (n.length === 0) return null;
+	let a = n[0] > 1, o = n[n.length - 1] < t;
+	return /* @__PURE__ */ l(s, { children: [
+		a && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(v, {
+			active: e === 1,
+			onClick: () => r(1),
+			"data-testid": i ? `${i}-page-1` : void 0,
+			children: "1"
+		}), n[0] > 2 && /* @__PURE__ */ c("span", {
+			className: f,
+			children: "…"
+		})] }),
+		n.map((t) => /* @__PURE__ */ c(v, {
+			active: e === t,
+			onClick: () => r(t),
+			"data-testid": i ? `${i}-page-${t}` : void 0,
+			children: t
+		}, t)),
+		o && /* @__PURE__ */ l(s, { children: [n[n.length - 1] < t - 1 && /* @__PURE__ */ c("span", {
+			className: f,
+			children: "…"
+		}), /* @__PURE__ */ c(v, {
+			active: e === t,
+			onClick: () => r(t),
+			"data-testid": i ? `${i}-page-${t}` : void 0,
+			children: t
+		})] })
+	] });
+}
+function C({ currentPage: s, totalPages: u, onPageChange: d, hasPreviousPage: f, hasNextPage: p, maxPageButtons: m = 9, className: h = "", "data-testid": g, ..._ }) {
+	let b = a(null), [C, w] = o(m);
+	if (i(() => {
+		let e = b.current;
+		if (!e) return;
+		let t = e.parentElement;
+		if (!t) return;
+		let n = () => {
+			let e = t.offsetWidth, n = e < 640, r = n ? 28 : 32, i = n ? 4 : 8, a = x(e, s, u, r * 4 + i * 5, r, m);
+			w((e) => e === a ? e : a);
+		};
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(t), () => r.disconnect();
+	}, [
+		s,
+		u,
+		m
+	]), u < 1) return null;
+	if (u === 1) return /* @__PURE__ */ c("div", {
+		ref: b,
+		className: `flex items-center justify-center gap-1 sm:gap-2 ${h}`,
+		"data-testid": g,
+		..._,
+		children: /* @__PURE__ */ c(v, {
+			active: !0,
+			disabled: !0,
+			"data-testid": g ? `${g}-page-1` : void 0,
+			children: "1"
+		})
+	});
+	let T = y(s, u, C);
+	return /* @__PURE__ */ l("div", {
+		ref: b,
+		className: `flex items-center justify-center gap-1 sm:gap-2 ${h}`,
+		"data-testid": g,
+		..._,
+		children: [
+			/* @__PURE__ */ c(v, {
+				disabled: s === 1,
+				onClick: () => d(1),
+				"data-testid": g ? `${g}-first` : void 0,
+				"aria-label": "첫 페이지",
+				children: /* @__PURE__ */ c(n, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ c(v, {
+				disabled: f === !1 || s === 1,
+				onClick: () => d(s - 1),
+				"data-testid": g ? `${g}-prev` : void 0,
+				"aria-label": "이전 페이지",
+				children: /* @__PURE__ */ c(e, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ c(S, {
+				currentPage: s,
+				totalPages: u,
+				pages: T,
+				onPageChange: d,
+				testId: g
+			}),
+			/* @__PURE__ */ c(v, {
+				disabled: p === !1 || s === u,
+				onClick: () => d(s + 1),
+				"data-testid": g ? `${g}-next` : void 0,
+				"aria-label": "다음 페이지",
+				children: /* @__PURE__ */ c(t, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ c(v, {
+				disabled: s === u,
+				onClick: () => d(u),
+				"data-testid": g ? `${g}-last` : void 0,
+				"aria-label": "마지막 페이지",
+				children: /* @__PURE__ */ c(r, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { C as Pagination };

package/dist/components/table/components/PaginationFooter.cjs.js

@@ -0,0 +1 @@
+const e=require("../../select/Select.cjs.js"),t=require("./KeyboardNavButton.cjs.js"),n=require("./PageJumpInput.cjs.js"),r=require("./Pagination.cjs.js");let i=require("react/jsx-runtime");var a=[30,50,100];function o({currentPage:o,totalPages:s,onPageChange:c,pageSize:l,pageSizeOptions:u=a,onPageSizeChange:d,hasPreviousPage:f,hasNextPage:p,totalElements:m,showTotalCount:h=!0,enablePageJump:g=!0,enableKeyboardPagination:_=!0,"data-testid":v}){let y=f??o>1,b=p??o<s,x=e=>{_&&(e.altKey||e.metaKey||e.ctrlKey||e.shiftKey||(e.key===`ArrowLeft`&&y?(e.preventDefault(),c(o-1)):e.key===`ArrowRight`&&b&&(e.preventDefault(),c(o+1))))};return(0,i.jsxs)(`nav`,{"aria-label":`페이지 네비게이션`,className:`@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 shrink-0`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300`,children:[h&&m!==void 0&&(0,i.jsxs)(`span`,{children:[`총 `,m.toLocaleString(),`건`]}),d&&l!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`span`,{className:`text-neutral-500`,children:`페이지당`}),(0,i.jsx)(`div`,{className:`w-20`,children:(0,i.jsx)(e.Select,{variant:`box`,selectSize:`mini`,value:String(l),onChange:e=>d(Number(e)),options:u.map(e=>({value:String(e),label:String(e)})),placeholder:`선택`,"data-testid":v?`${v}-page-size`:void 0})})]}),(0,i.jsx)(`div`,{className:`contents @min-[640px]/pagebar:hidden`,children:g&&s>1&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.PageJumpInput,{currentPage:o,totalPages:s,onPageChange:c,"data-testid":v?`${v}-page-jump`:void 0}),_&&(0,i.jsx)(t.KeyboardNavButton,{onKeyDown:x})]})})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-3 @min-[640px]/pagebar:flex-1 @min-[640px]/pagebar:justify-end @max-[639px]/pagebar:w-full @max-[639px]/pagebar:justify-center`,children:[(0,i.jsx)(`div`,{className:`hidden @min-[640px]/pagebar:contents`,children:g&&s>1&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.PageJumpInput,{currentPage:o,totalPages:s,onPageChange:c,"data-testid":v?`${v}-page-jump`:void 0}),_&&(0,i.jsx)(t.KeyboardNavButton,{onKeyDown:x})]})}),(0,i.jsx)(r.Pagination,{currentPage:o,totalPages:s,onPageChange:c,hasPreviousPage:y,hasNextPage:b,"data-testid":v?`${v}-pagination`:void 0})]})]})}exports.PaginationFooter=o;