@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/switch/utils.esm.js

@@ -0,0 +1,39 @@
+//#region src/components/switch/utils.ts
+var e = {
+	small: {
+		track: "h-5 w-9",
+		thumb: "h-3.5 w-3.5",
+		translate: "peer-checked:translate-x-4"
+	},
+	medium: {
+		track: "h-6 w-11",
+		thumb: "h-4.5 w-4.5",
+		translate: "peer-checked:translate-x-5"
+	}
+};
+function t(t, n) {
+	let { track: r } = e[t];
+	return n ? [
+		"relative inline-flex shrink-0 items-center rounded-full",
+		r,
+		"bg-bg-disabled cursor-not-allowed"
+	].join(" ") : [
+		"relative inline-flex shrink-0 items-center rounded-full cursor-pointer",
+		r,
+		"bg-neutral-200 dark:bg-neutral-700",
+		"peer-checked:bg-primary-500",
+		"peer-focus-visible:ring-2 peer-focus-visible:ring-primary-300 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-card",
+		"transition-colors duration-200 ease-out"
+	].join(" ");
+}
+function n(t) {
+	let { thumb: n, translate: r } = e[t];
+	return [
+		"pointer-events-none absolute left-[3px] top-[3px] inline-block rounded-full bg-white shadow-sm",
+		n,
+		r,
+		"transition-transform duration-200 ease-out"
+	].join(" ");
+}
+//#endregion
+export { n as getSwitchThumbClasses, t as getSwitchTrackClasses };

package/dist/components/table/accordion-table.cjs.js

@@ -0,0 +1 @@
+const e=require("../checkbox/Checkbox.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs.js"),n=require("../loading-spinner/LoadingSpinner.cjs.js"),r=require("../select/Select.cjs.js"),i=require("./components/SortableHeaderCell.cjs.js"),a=require("./hooks/useColumnResize.cjs.js"),o=require("./hooks/useFillEmptyRows.cjs.js"),ee=require("./hooks/useTableSort.cjs.js"),s=require("./utils.cjs.js"),c=require("./components/KeyboardNavButton.cjs.js"),l=require("./components/PageJumpInput.cjs.js"),te=require("./components/Pagination.cjs.js");let u=require("react"),d=require("react/jsx-runtime"),f=require("@dnd-kit/core"),p=require("@dnd-kit/sortable");var ne=[30,50,100],m=36,h=(0,u.forwardRef)((h,g)=>{let{data:_,columns:v,rowHeight:y,loading:re=!1,emptyMessage:ie=`데이터가 없어요`,onRowClick:ae,selectedRows:b=[],onRowSelect:x,enableRowSelection:S=!1,enableSelectAll:C=!1,rowCompare:w,enableSorting:T=!1,serverSideSorting:E=!1,onSortChange:oe,initialSort:se,variant:ce=`default`,size:le=`medium`,stickyHeader:D=!0,height:O,maxHeight:k,currentPage:A,totalPages:j,onPageChange:M,pageSize:N,pageSizeOptions:ue=ne,onPageSizeChange:P,totalElements:F,storageKey:de,columnState:I,fillEmptyRows:L=!0,enableKeyboardPagination:R=!0,expandable:z,className:B=``,"data-testid":V,...H}=h,U=!!z,W=z?.stickyDetail??!0,{sort:fe,sortedData:G}=ee.useTableSort({initialSort:se,serverSide:E,onSort:oe||void 0}),K=(0,u.useMemo)(()=>!T||E?_:G(_,(e,t)=>{let n=v.find(e=>e.key===t);if(n?.accessor){let r=n.accessor(e);return typeof r==`string`||typeof r==`number`?r:e[t]}return e[t]}),[_,T,E,fe,G,v]),q=(0,u.useRef)(null),J=(0,u.useRef)(null),Y=(0,u.useRef)(null),X=(0,u.useRef)(null),[pe,me]=(0,u.useState)(0),he=!!I,ge=(0,f.useSensors)((0,f.useSensor)(f.PointerSensor,{activationConstraint:{distance:5}}),(0,f.useSensor)(f.KeyboardSensor,{coordinateGetter:p.sortableKeyboardCoordinates})),_e=e=>{let{active:t,over:n}=e;if(!I||!n||t.id===n.id||v.find(e=>e.key===n.id)?.excludeFromPreset)return;let r=I.columnOrder,i=r.indexOf(String(t.id)),a=r.indexOf(String(n.id));i===-1||a===-1||I.onColumnOrderChange((0,p.arrayMove)(r,i,a))},Z=(0,u.useMemo)(()=>{if(!I)return v.filter(e=>!e.hidden);let e=new Map(v.map(e=>[e.key,e])),t=new Set(I.hiddenColumns);return I.columnOrder.map(t=>e.get(t)).filter(e=>!!e).filter(e=>!e.hidden&&!t.has(e.key))},[v,I]),{handleMouseDown:ve,handleDoubleClick:ye,getColumnWidth:Q,measureRef:be}=a.useColumnResize({columns:Z,data:K,getCellContent:(e,t)=>{let n=Z.find(e=>e.key===t);return n?.accessor?n.accessor(e):e[t]},tableRef:q,...I?{controlledWidths:I.columnWidths,onColumnWidthsChange:I.onColumnWidthsChange}:{storageKey:de}}),xe=s.getTableBaseClasses(),Se=s.getTableVariantClasses(ce),Ce=s.getTableSizeClasses(le),we=(0,u.useMemo)(()=>{let e={};return O&&(e.height=typeof O==`number`?`${O}px`:O),k&&(e.maxHeight=typeof k==`number`?`${k}px`:k),e},[O,k]),{emptyRowCount:Te,measuredRowHeight:Ee}=o.useFillEmptyRows({enabled:L,containerRef:J,theadRef:Y,tbodyRef:X,excludeRowsSelector:`tr:not([data-empty-row]):not([data-expanded-row])`,remainingMode:`tbody-height`,observeTbody:!0,deps:[K,Z]});(0,u.useLayoutEffect)(()=>{if(!W||!U)return;let e=J.current;if(!e)return;let t=()=>{me(t=>t===e.clientWidth?t:e.clientWidth)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[W,U]);let De=e=>{e.altKey||e.metaKey||e.ctrlKey||e.shiftKey||(e.key===`ArrowLeft`&&A>1?(e.preventDefault(),M(A-1)):e.key===`ArrowRight`&&A<j&&(e.preventDefault(),M(A+1)))},$=e=>!S||b.length===0?!1:w?b.some(t=>w(t,e)):b.some(t=>t===e),Oe=(0,u.useMemo)(()=>!S||!C||K.length===0?!1:K.every(e=>$(e)),[S,C,K,$]),ke=()=>{!S||!x||(Oe?K.forEach(e=>{$(e)&&x(e,!1)}):K.forEach(e=>{$(e)||x(e,!0)}))},Ae=(e,t)=>{let n=[s.getStripedRowClasses(t)];return $(e)&&n.push(s.getSelectedRowClasses()),(ae||U)&&n.push(s.getHoverableRowClasses()),n.join(` `)},je=!!P||F!==void 0||typeof j==`number`&&j>0,Me=e=>{z&&z.onToggle(z.getRowId(e))},Ne=(e,t)=>{U&&(e.key===` `||e.key===`Enter`)&&(e.preventDefault(),Me(t))},Pe=(S&&C?1:0)+ +!!U+Z.length+1;return re?(0,d.jsx)(`div`,{ref:g,className:`flex items-center justify-center p-8 flex-1 ${B}`,style:we,"data-testid":V,...H,children:(0,d.jsx)(n.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,d.jsxs)(`div`,{ref:g,className:`relative flex flex-col min-h-0 ${B}`,style:we,"data-testid":V,...H,children:[(0,d.jsx)(`div`,{ref:be,className:`absolute invisible whitespace-nowrap`,style:{top:`-9999px`,left:`-9999px`}}),(0,d.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0`,children:[(0,d.jsx)(`div`,{ref:J,className:`overflow-auto flex-1 bg-[#f9fafb] dark:bg-slate-900/50`,children:K.length===0?(0,d.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,d.jsx)(`p`,{className:`text-neutral-600 dark:text-neutral-400`,children:ie})}):(0,d.jsx)(f.DndContext,{sensors:ge,collisionDetection:f.closestCenter,onDragEnd:_e,children:(0,d.jsxs)(`table`,{ref:q,className:`${xe} ${Se} ${Ce}`,style:{tableLayout:`fixed`,minWidth:`100%`,width:`100%`},children:[(0,d.jsxs)(`colgroup`,{children:[S&&C&&(0,d.jsx)(`col`,{style:{width:`48px`}}),U&&(0,d.jsx)(`col`,{style:{width:`${m}px`}}),Z.map(e=>(0,d.jsx)(`col`,{"data-col-key":e.key,style:{width:Q(e.key,e.width)}},e.key)),(0,d.jsx)(`col`,{style:{width:`100%`}})]}),(0,d.jsx)(`thead`,{ref:Y,className:s.getTableHeaderClasses(),style:{position:D?`sticky`:`relative`,top:D?0:void 0,zIndex:D?10:void 0,backgroundColor:D?`white`:void 0},children:(0,d.jsxs)(`tr`,{children:[S&&C&&(0,d.jsx)(`th`,{className:`${s.getTableHeaderCellClasses()} ${s.getColumnAlignClasses(`center`)} border-r-0 w-12`,children:(0,d.jsx)(e.Checkbox.Circle,{id:`accordion-table-select-all`,size:20,checked:Oe,onCheckedChange:ke})}),U&&(0,d.jsx)(`th`,{"aria-hidden":`true`,className:`${s.getTableHeaderCellClasses()} border-r-0`,style:{width:`${m}px`}}),(0,d.jsx)(p.SortableContext,{items:Z.map(e=>e.key),strategy:p.horizontalListSortingStrategy,children:Z.map(e=>{let t=!he||e.excludeFromPreset===!0;return(0,d.jsxs)(i.SortableHeaderCell,{id:e.key,disabled:t,as:`th`,className:`${s.getTableHeaderCellClasses()} ${s.getColumnAlignClasses(`center`)} bg-white ${e.sticky?`sticky left-0 z-20 bg-white dark:bg-neutral-800`:``} ${e.hideOnMobile?`hidden md:table-cell`:``} relative`,style:{width:Q(e.key,e.width),minWidth:e.minWidth||50},children:[(0,d.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 select-none`,children:(0,d.jsx)(`span`,{children:e.header})}),e.excludeFromPreset!==!0&&(0,d.jsx)(`div`,{className:`absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary-500/30 active:bg-primary-500/50 z-50`,onPointerDown:e=>e.stopPropagation(),onMouseDown:t=>{t.preventDefault(),t.stopPropagation(),ve(e.key,t)},onDoubleClick:t=>{t.preventDefault(),t.stopPropagation(),ye(e.key,t)},onClick:e=>{e.preventDefault(),e.stopPropagation()},style:{touchAction:`none`},title:`드래그하여 너비 조절, 더블 클릭하여 자동 조절`})]},e.key)})}),(0,d.jsx)(`th`,{"aria-hidden":`true`,className:`bg-white border-b border-l border-[#f2f3f5] dark:border-neutral-700 dark:bg-neutral-800`})]})}),(0,d.jsxs)(`tbody`,{ref:X,children:[K.map((n,r)=>{let i=$(n),a=z?z.getRowId(n):void 0,o=z?z.expandedIds.has(a):!1;return(0,d.jsxs)(u.Fragment,{children:[(0,d.jsxs)(`tr`,{className:Ae(n,r),onClick:e=>{let t=e.target;if(t!==e.currentTarget){let n=t.closest(`button, a, input, select, textarea, label`);if(n&&e.currentTarget.contains(n))return}ae?.(n,r),U&&Me(n)},onKeyDown:e=>Ne(e,n),tabIndex:U?0:void 0,role:U?`button`:void 0,"aria-expanded":U?o:void 0,style:y?{height:`${y}px`}:void 0,children:[S&&C&&(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} ${s.getColumnAlignClasses(`center`)} border-r-0 w-12`,onClick:e=>e.stopPropagation(),children:(0,d.jsx)(e.Checkbox.Circle,{size:20,checked:i,onCheckedChange:e=>x?.(n,e)})}),U&&(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} ${s.getColumnAlignClasses(`center`)} border-r-0`,style:{width:`${m}px`},children:(0,d.jsx)(t.ChevronRight,{"aria-hidden":`true`,className:`mx-auto h-4 w-4 text-neutral-500 transition-transform duration-200 ${o?`rotate-90`:``}`})}),Z.map((e,t)=>{let r=e.accessor?e.accessor(n):n[e.key],i=t===Z.length-1&&!S;return(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} ${s.getColumnAlignClasses(e.align)} ${i?`border-r-0`:``} ${e.sticky?`sticky left-0 z-10 bg-inherit`:``} ${e.hideOnMobile?`hidden md:table-cell`:``}`,style:{width:Q(e.key,e.width),minWidth:e.minWidth||50,...y?{height:`${y}px`,maxHeight:`${y}px`,overflow:`hidden`}:{}},children:r},e.key)}),(0,d.jsx)(`td`,{"aria-hidden":`true`,className:`border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent`})]}),U&&(0,d.jsx)(`tr`,{"data-expanded-row":!0,className:`bg-[#f9fafb] dark:bg-slate-900/50`,children:(0,d.jsx)(`td`,{colSpan:Pe,className:`p-0 border-b border-[#f2f3f5] dark:border-neutral-700`,children:(0,d.jsx)(`div`,{className:W?`sticky left-0`:void 0,style:W&&pe>0?{width:`${pe}px`}:void 0,children:(0,d.jsx)(`div`,{className:`grid transition-[grid-template-rows,opacity] duration-200 ease-out`,style:{gridTemplateRows:o?`1fr`:`0fr`,opacity:+!!o},"aria-hidden":!o,children:(0,d.jsx)(`div`,{className:`overflow-hidden`,children:z.renderRow(n)})})})})})]},r)}),L&&Array.from({length:Te}).map((e,t)=>{let n=K.length+t,r=y??Ee??void 0;return(0,d.jsxs)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:s.getStripedRowClasses(n),style:r?{height:`${r}px`}:void 0,children:[S&&C&&(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} border-r-0 w-12`,style:r?{height:`${r}px`}:void 0}),U&&(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} border-r-0`,style:{width:`${m}px`,...r?{height:`${r}px`}:{}}}),Z.map((e,t)=>{let n=t===Z.length-1&&!S;return(0,d.jsx)(`td`,{className:`${s.getTableCellClasses()} ${n?`border-r-0`:``} ${e.hideOnMobile?`hidden md:table-cell`:``}`,style:{width:Q(e.key,e.width),minWidth:e.minWidth||50,...r?{height:`${r}px`}:{}}},e.key)}),(0,d.jsx)(`td`,{"aria-hidden":`true`,className:`border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent`,style:r?{height:`${r}px`}:void 0})]},`empty-${t}`)})]})]})})}),je&&(0,d.jsxs)(`nav`,{"aria-label":`페이지 네비게이션`,className:`@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-neutral-200 px-4 py-2 shrink-0 dark:border-neutral-700`,children:[(0,d.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300`,children:[F!==void 0&&(0,d.jsxs)(`span`,{children:[`총 `,F.toLocaleString(),`건`]}),P&&N!==void 0&&(0,d.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(`span`,{className:`text-neutral-500`,children:`페이지당`}),(0,d.jsx)(`div`,{className:`w-20`,children:(0,d.jsx)(r.Select,{variant:`box`,selectSize:`mini`,value:String(N),onChange:e=>P(Number(e)),options:ue.map(e=>({value:String(e),label:String(e)})),"data-testid":V?`${V}-page-size`:void 0})})]}),(0,d.jsx)(`div`,{className:`contents @min-[640px]/pagebar:hidden`,children:j!==void 0&&A!==void 0&&M&&j>1&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(l.PageJumpInput,{currentPage:A,totalPages:j,onPageChange:M,"data-testid":V?`${V}-page-jump`:void 0}),R&&(0,d.jsx)(c.KeyboardNavButton,{onKeyDown:De})]})})]}),(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,d.jsx)(`div`,{className:`hidden @min-[640px]/pagebar:contents`,children:j!==void 0&&A!==void 0&&M&&j>1&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(l.PageJumpInput,{currentPage:A,totalPages:j,onPageChange:M,"data-testid":V?`${V}-page-jump`:void 0}),R&&(0,d.jsx)(c.KeyboardNavButton,{onKeyDown:De})]})}),j!==void 0&&A!==void 0&&M&&(0,d.jsx)(te.Pagination,{currentPage:A,totalPages:j,onPageChange:M,hasPreviousPage:A>1,hasNextPage:A<j,"data-testid":V?`${V}-pagination`:void 0})]})]})]})]})});h.displayName=`AccordionTable`,exports.AccordionTable=h;

package/dist/components/table/accordion-table.esm.js

@@ -0,0 +1,418 @@
+import { Checkbox as e } from "../checkbox/Checkbox.esm.js";
+import { ChevronRight as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { LoadingSpinner as n } from "../loading-spinner/LoadingSpinner.esm.js";
+import { Select as r } from "../select/Select.esm.js";
+import { SortableHeaderCell as i } from "./components/SortableHeaderCell.esm.js";
+import { useColumnResize as a } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as o } from "./hooks/useFillEmptyRows.esm.js";
+import { useTableSort as ee } from "./hooks/useTableSort.esm.js";
+import { getColumnAlignClasses as s, getHoverableRowClasses as te, getSelectedRowClasses as ne, getStripedRowClasses as c, getTableBaseClasses as re, getTableCellClasses as l, getTableHeaderCellClasses as u, getTableHeaderClasses as ie, getTableSizeClasses as ae, getTableVariantClasses as oe } from "./utils.esm.js";
+import { KeyboardNavButton as d } from "./components/KeyboardNavButton.esm.js";
+import { PageJumpInput as f } from "./components/PageJumpInput.esm.js";
+import { Pagination as se } from "./components/Pagination.esm.js";
+import { Fragment as ce, forwardRef as p, useLayoutEffect as le, useMemo as m, useRef as h, useState as ue } from "react";
+import { Fragment as de, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { DndContext as fe, KeyboardSensor as pe, PointerSensor as me, closestCenter as he, useSensor as v, useSensors as ge } from "@dnd-kit/core";
+import { SortableContext as _e, arrayMove as ve, horizontalListSortingStrategy as ye, sortableKeyboardCoordinates as be } from "@dnd-kit/sortable";
+//#region src/components/table/accordion-table.tsx
+var xe = [
+	30,
+	50,
+	100
+], y = 36, b = p((p, b) => {
+	let { data: x, columns: S, rowHeight: C, loading: Se = !1, emptyMessage: Ce = "데이터가 없어요", onRowClick: w, selectedRows: T = [], onRowSelect: E, enableRowSelection: D = !1, enableSelectAll: O = !1, rowCompare: we, enableSorting: k = !1, serverSideSorting: A = !1, onSortChange: Te, initialSort: Ee, variant: De = "default", size: Oe = "medium", stickyHeader: j = !0, height: M, maxHeight: N, currentPage: P, totalPages: F, onPageChange: I, pageSize: L, pageSizeOptions: ke = xe, onPageSizeChange: R, totalElements: z, storageKey: Ae, columnState: B, fillEmptyRows: V = !0, enableKeyboardPagination: H = !0, expandable: U, className: W = "", "data-testid": G, ...K } = p, q = !!U, J = U?.stickyDetail ?? !0, { sort: je, sortedData: Me } = ee({
+		initialSort: Ee,
+		serverSide: A,
+		onSort: Te || void 0
+	}), Y = m(() => !k || A ? x : Me(x, (e, t) => {
+		let n = S.find((e) => e.key === t);
+		if (n?.accessor) {
+			let r = n.accessor(e);
+			return typeof r == "string" || typeof r == "number" ? r : e[t];
+		}
+		return e[t];
+	}), [
+		x,
+		k,
+		A,
+		je,
+		Me,
+		S
+	]), Ne = h(null), X = h(null), Pe = h(null), Fe = h(null), [Ie, Le] = ue(0), Re = !!B, ze = ge(v(me, { activationConstraint: { distance: 5 } }), v(pe, { coordinateGetter: be })), Be = (e) => {
+		let { active: t, over: n } = e;
+		if (!B || !n || t.id === n.id || S.find((e) => e.key === n.id)?.excludeFromPreset) return;
+		let r = B.columnOrder, i = r.indexOf(String(t.id)), a = r.indexOf(String(n.id));
+		i === -1 || a === -1 || B.onColumnOrderChange(ve(r, i, a));
+	}, Z = m(() => {
+		if (!B) return S.filter((e) => !e.hidden);
+		let e = new Map(S.map((e) => [e.key, e])), t = new Set(B.hiddenColumns);
+		return B.columnOrder.map((t) => e.get(t)).filter((e) => !!e).filter((e) => !e.hidden && !t.has(e.key));
+	}, [S, B]), { handleMouseDown: Ve, handleDoubleClick: He, getColumnWidth: Q, measureRef: Ue } = a({
+		columns: Z,
+		data: Y,
+		getCellContent: (e, t) => {
+			let n = Z.find((e) => e.key === t);
+			return n?.accessor ? n.accessor(e) : e[t];
+		},
+		tableRef: Ne,
+		...B ? {
+			controlledWidths: B.columnWidths,
+			onColumnWidthsChange: B.onColumnWidthsChange
+		} : { storageKey: Ae }
+	}), We = re(), Ge = oe(De), Ke = ae(Oe), qe = m(() => {
+		let e = {};
+		return M && (e.height = typeof M == "number" ? `${M}px` : M), N && (e.maxHeight = typeof N == "number" ? `${N}px` : N), e;
+	}, [M, N]), { emptyRowCount: Je, measuredRowHeight: Ye } = o({
+		enabled: V,
+		containerRef: X,
+		theadRef: Pe,
+		tbodyRef: Fe,
+		excludeRowsSelector: "tr:not([data-empty-row]):not([data-expanded-row])",
+		remainingMode: "tbody-height",
+		observeTbody: !0,
+		deps: [Y, Z]
+	});
+	le(() => {
+		if (!J || !q) return;
+		let e = X.current;
+		if (!e) return;
+		let t = () => {
+			Le((t) => t === e.clientWidth ? t : e.clientWidth);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [J, q]);
+	let Xe = (e) => {
+		e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && P > 1 ? (e.preventDefault(), I(P - 1)) : e.key === "ArrowRight" && P < F && (e.preventDefault(), I(P + 1)));
+	}, $ = (e) => !D || T.length === 0 ? !1 : we ? T.some((t) => we(t, e)) : T.some((t) => t === e), Ze = m(() => !D || !O || Y.length === 0 ? !1 : Y.every((e) => $(e)), [
+		D,
+		O,
+		Y,
+		$
+	]), Qe = () => {
+		!D || !E || (Ze ? Y.forEach((e) => {
+			$(e) && E(e, !1);
+		}) : Y.forEach((e) => {
+			$(e) || E(e, !0);
+		}));
+	}, $e = (e, t) => {
+		let n = [c(t)];
+		return $(e) && n.push(ne()), (w || q) && n.push(te()), n.join(" ");
+	}, et = !!R || z !== void 0 || typeof F == "number" && F > 0, tt = (e) => {
+		U && U.onToggle(U.getRowId(e));
+	}, nt = (e, t) => {
+		q && (e.key === " " || e.key === "Enter") && (e.preventDefault(), tt(t));
+	}, rt = (D && O ? 1 : 0) + +!!q + Z.length + 1;
+	return Se ? /* @__PURE__ */ g("div", {
+		ref: b,
+		className: `flex items-center justify-center p-8 flex-1 ${W}`,
+		style: qe,
+		"data-testid": G,
+		...K,
+		children: /* @__PURE__ */ g(n, {
+			message: "데이터를 불러오는 중이에요...",
+			className: "min-h-0"
+		})
+	}) : /* @__PURE__ */ _("div", {
+		ref: b,
+		className: `relative flex flex-col min-h-0 ${W}`,
+		style: qe,
+		"data-testid": G,
+		...K,
+		children: [/* @__PURE__ */ g("div", {
+			ref: Ue,
+			className: "absolute invisible whitespace-nowrap",
+			style: {
+				top: "-9999px",
+				left: "-9999px"
+			}
+		}), /* @__PURE__ */ _("div", {
+			className: "flex flex-1 flex-col min-h-0",
+			children: [/* @__PURE__ */ g("div", {
+				ref: X,
+				className: "overflow-auto flex-1 bg-[#f9fafb] dark:bg-slate-900/50",
+				children: Y.length === 0 ? /* @__PURE__ */ g("div", {
+					className: "flex items-center justify-center p-8 h-full",
+					children: /* @__PURE__ */ g("p", {
+						className: "text-neutral-600 dark:text-neutral-400",
+						children: Ce
+					})
+				}) : /* @__PURE__ */ g(fe, {
+					sensors: ze,
+					collisionDetection: he,
+					onDragEnd: Be,
+					children: /* @__PURE__ */ _("table", {
+						ref: Ne,
+						className: `${We} ${Ge} ${Ke}`,
+						style: {
+							tableLayout: "fixed",
+							minWidth: "100%",
+							width: "100%"
+						},
+						children: [
+							/* @__PURE__ */ _("colgroup", { children: [
+								D && O && /* @__PURE__ */ g("col", { style: { width: "48px" } }),
+								q && /* @__PURE__ */ g("col", { style: { width: `${y}px` } }),
+								Z.map((e) => /* @__PURE__ */ g("col", {
+									"data-col-key": e.key,
+									style: { width: Q(e.key, e.width) }
+								}, e.key)),
+								/* @__PURE__ */ g("col", { style: { width: "100%" } })
+							] }),
+							/* @__PURE__ */ g("thead", {
+								ref: Pe,
+								className: ie(),
+								style: {
+									position: j ? "sticky" : "relative",
+									top: j ? 0 : void 0,
+									zIndex: j ? 10 : void 0,
+									backgroundColor: j ? "white" : void 0
+								},
+								children: /* @__PURE__ */ _("tr", { children: [
+									D && O && /* @__PURE__ */ g("th", {
+										className: `${u()} ${s("center")} border-r-0 w-12`,
+										children: /* @__PURE__ */ g(e.Circle, {
+											id: "accordion-table-select-all",
+											size: 20,
+											checked: Ze,
+											onCheckedChange: Qe
+										})
+									}),
+									q && /* @__PURE__ */ g("th", {
+										"aria-hidden": "true",
+										className: `${u()} border-r-0`,
+										style: { width: `${y}px` }
+									}),
+									/* @__PURE__ */ g(_e, {
+										items: Z.map((e) => e.key),
+										strategy: ye,
+										children: Z.map((e) => {
+											let t = !Re || e.excludeFromPreset === !0;
+											return /* @__PURE__ */ _(i, {
+												id: e.key,
+												disabled: t,
+												as: "th",
+												className: `${u()} ${s("center")} bg-white ${e.sticky ? "sticky left-0 z-20 bg-white dark:bg-neutral-800" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
+												style: {
+													width: Q(e.key, e.width),
+													minWidth: e.minWidth || 50
+												},
+												children: [/* @__PURE__ */ g("div", {
+													className: "flex items-center justify-center w-full pr-1 select-none",
+													children: /* @__PURE__ */ g("span", { children: e.header })
+												}), e.excludeFromPreset !== !0 && /* @__PURE__ */ g("div", {
+													className: "absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary-500/30 active:bg-primary-500/50 z-50",
+													onPointerDown: (e) => e.stopPropagation(),
+													onMouseDown: (t) => {
+														t.preventDefault(), t.stopPropagation(), Ve(e.key, t);
+													},
+													onDoubleClick: (t) => {
+														t.preventDefault(), t.stopPropagation(), He(e.key, t);
+													},
+													onClick: (e) => {
+														e.preventDefault(), e.stopPropagation();
+													},
+													style: { touchAction: "none" },
+													title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절"
+												})]
+											}, e.key);
+										})
+									}),
+									/* @__PURE__ */ g("th", {
+										"aria-hidden": "true",
+										className: "bg-white border-b border-l border-[#f2f3f5] dark:border-neutral-700 dark:bg-neutral-800"
+									})
+								] })
+							}),
+							/* @__PURE__ */ _("tbody", {
+								ref: Fe,
+								children: [Y.map((n, r) => {
+									let i = $(n), a = U ? U.getRowId(n) : void 0, o = U ? U.expandedIds.has(a) : !1;
+									return /* @__PURE__ */ _(ce, { children: [/* @__PURE__ */ _("tr", {
+										className: $e(n, r),
+										onClick: (e) => {
+											let t = e.target;
+											if (t !== e.currentTarget) {
+												let n = t.closest("button, a, input, select, textarea, label");
+												if (n && e.currentTarget.contains(n)) return;
+											}
+											w?.(n, r), q && tt(n);
+										},
+										onKeyDown: (e) => nt(e, n),
+										tabIndex: q ? 0 : void 0,
+										role: q ? "button" : void 0,
+										"aria-expanded": q ? o : void 0,
+										style: C ? { height: `${C}px` } : void 0,
+										children: [
+											D && O && /* @__PURE__ */ g("td", {
+												className: `${l()} ${s("center")} border-r-0 w-12`,
+												onClick: (e) => e.stopPropagation(),
+												children: /* @__PURE__ */ g(e.Circle, {
+													size: 20,
+													checked: i,
+													onCheckedChange: (e) => E?.(n, e)
+												})
+											}),
+											q && /* @__PURE__ */ g("td", {
+												className: `${l()} ${s("center")} border-r-0`,
+												style: { width: `${y}px` },
+												children: /* @__PURE__ */ g(t, {
+													"aria-hidden": "true",
+													className: `mx-auto h-4 w-4 text-neutral-500 transition-transform duration-200 ${o ? "rotate-90" : ""}`
+												})
+											}),
+											Z.map((e, t) => {
+												let r = e.accessor ? e.accessor(n) : n[e.key], i = t === Z.length - 1 && !D;
+												return /* @__PURE__ */ g("td", {
+													className: `${l()} ${s(e.align)} ${i ? "border-r-0" : ""} ${e.sticky ? "sticky left-0 z-10 bg-inherit" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													style: {
+														width: Q(e.key, e.width),
+														minWidth: e.minWidth || 50,
+														...C ? {
+															height: `${C}px`,
+															maxHeight: `${C}px`,
+															overflow: "hidden"
+														} : {}
+													},
+													children: r
+												}, e.key);
+											}),
+											/* @__PURE__ */ g("td", {
+												"aria-hidden": "true",
+												className: "border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent"
+											})
+										]
+									}), q && /* @__PURE__ */ g("tr", {
+										"data-expanded-row": !0,
+										className: "bg-[#f9fafb] dark:bg-slate-900/50",
+										children: /* @__PURE__ */ g("td", {
+											colSpan: rt,
+											className: "p-0 border-b border-[#f2f3f5] dark:border-neutral-700",
+											children: /* @__PURE__ */ g("div", {
+												className: J ? "sticky left-0" : void 0,
+												style: J && Ie > 0 ? { width: `${Ie}px` } : void 0,
+												children: /* @__PURE__ */ g("div", {
+													className: "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
+													style: {
+														gridTemplateRows: o ? "1fr" : "0fr",
+														opacity: +!!o
+													},
+													"aria-hidden": !o,
+													children: /* @__PURE__ */ g("div", {
+														className: "overflow-hidden",
+														children: U.renderRow(n)
+													})
+												})
+											})
+										})
+									})] }, r);
+								}), V && Array.from({ length: Je }).map((e, t) => {
+									let n = Y.length + t, r = C ?? Ye ?? void 0;
+									return /* @__PURE__ */ _("tr", {
+										"data-empty-row": !0,
+										"aria-hidden": "true",
+										className: c(n),
+										style: r ? { height: `${r}px` } : void 0,
+										children: [
+											D && O && /* @__PURE__ */ g("td", {
+												className: `${l()} border-r-0 w-12`,
+												style: r ? { height: `${r}px` } : void 0
+											}),
+											q && /* @__PURE__ */ g("td", {
+												className: `${l()} border-r-0`,
+												style: {
+													width: `${y}px`,
+													...r ? { height: `${r}px` } : {}
+												}
+											}),
+											Z.map((e, t) => {
+												let n = t === Z.length - 1 && !D;
+												return /* @__PURE__ */ g("td", {
+													className: `${l()} ${n ? "border-r-0" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													style: {
+														width: Q(e.key, e.width),
+														minWidth: e.minWidth || 50,
+														...r ? { height: `${r}px` } : {}
+													}
+												}, e.key);
+											}),
+											/* @__PURE__ */ g("td", {
+												"aria-hidden": "true",
+												className: "border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent",
+												style: r ? { height: `${r}px` } : void 0
+											})
+										]
+									}, `empty-${t}`);
+								})]
+							})
+						]
+					})
+				})
+			}), et && /* @__PURE__ */ _("nav", {
+				"aria-label": "페이지 네비게이션",
+				className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-neutral-200 px-4 py-2 shrink-0 dark:border-neutral-700",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300",
+					children: [
+						z !== void 0 && /* @__PURE__ */ _("span", { children: [
+							"총 ",
+							z.toLocaleString(),
+							"건"
+						] }),
+						R && L !== void 0 && /* @__PURE__ */ _("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ g("span", {
+								className: "text-neutral-500",
+								children: "페이지당"
+							}), /* @__PURE__ */ g("div", {
+								className: "w-20",
+								children: /* @__PURE__ */ g(r, {
+									variant: "box",
+									selectSize: "mini",
+									value: String(L),
+									onChange: (e) => R(Number(e)),
+									options: ke.map((e) => ({
+										value: String(e),
+										label: String(e)
+									})),
+									"data-testid": G ? `${G}-page-size` : void 0
+								})
+							})]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "contents @min-[640px]/pagebar:hidden",
+							children: F !== void 0 && P !== void 0 && I && F > 1 && /* @__PURE__ */ _(de, { children: [/* @__PURE__ */ g(f, {
+								currentPage: P,
+								totalPages: F,
+								onPageChange: I,
+								"data-testid": G ? `${G}-page-jump` : void 0
+							}), H && /* @__PURE__ */ g(d, { onKeyDown: Xe })] })
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ g("div", {
+						className: "hidden @min-[640px]/pagebar:contents",
+						children: F !== void 0 && P !== void 0 && I && F > 1 && /* @__PURE__ */ _(de, { children: [/* @__PURE__ */ g(f, {
+							currentPage: P,
+							totalPages: F,
+							onPageChange: I,
+							"data-testid": G ? `${G}-page-jump` : void 0
+						}), H && /* @__PURE__ */ g(d, { onKeyDown: Xe })] })
+					}), F !== void 0 && P !== void 0 && I && /* @__PURE__ */ g(se, {
+						currentPage: P,
+						totalPages: F,
+						onPageChange: I,
+						hasPreviousPage: P > 1,
+						hasNextPage: P < F,
+						"data-testid": G ? `${G}-pagination` : void 0
+					})]
+				})]
+			})]
+		})]
+	});
+});
+b.displayName = "AccordionTable";
+//#endregion
+export { b as AccordionTable };

package/dist/components/table/column-group-utils.cjs.js

@@ -0,0 +1 @@
+function e(e,t=[]){if(t.length===0)return e.map(e=>({kind:`column`,key:e.key,header:e.header,leafColumns:[e],hideOnMobile:e.hideOnMobile}));let n=new Map(e.map(e=>[e.key,e])),r=new Map;for(let e of t)for(let t of e.columnKeys)r.set(t,e.key);let i=[],a=new Set;for(let o of e){let e=r.get(o.key);if(e){if(a.has(e))continue;a.add(e);let r=t.find(t=>t.key===e);if(!r)continue;let o=r.columnKeys.map(e=>n.get(e)).filter(e=>!!e);i.push({kind:`group`,key:r.key,header:r.header,leafColumns:o,hideOnMobile:r.hideOnMobile,group:r})}else i.push({kind:`column`,key:o.key,header:o.header,leafColumns:[o],hideOnMobile:o.hideOnMobile})}return i}function t(e){return e.map(e=>e.key)}function n(e,t,n){let r=new Map(e.map(e=>[e.key,e])),i=new Set(t),a=t.map(e=>r.get(e)).filter(e=>!!e),o=e.filter(e=>!i.has(e.key));return[...a,...o].filter(e=>!(n.has(e.key)||e.kind===`column`&&e.leafColumns[0].hidden))}function r(e){return e.flatMap(e=>e.leafColumns)}function i(e){return e.some(e=>e.kind===`group`)}exports.applyColumnState=n,exports.buildColumnSlots=e,exports.flattenLeafColumns=r,exports.getDefaultSlotOrder=t,exports.hasGroupSlot=i;

package/dist/components/table/column-group-utils.esm.js

@@ -0,0 +1,53 @@
+//#region src/components/table/column-group-utils.ts
+function e(e, t = []) {
+	if (t.length === 0) return e.map((e) => ({
+		kind: "column",
+		key: e.key,
+		header: e.header,
+		leafColumns: [e],
+		hideOnMobile: e.hideOnMobile
+	}));
+	let n = new Map(e.map((e) => [e.key, e])), r = /* @__PURE__ */ new Map();
+	for (let e of t) for (let t of e.columnKeys) r.set(t, e.key);
+	let i = [], a = /* @__PURE__ */ new Set();
+	for (let o of e) {
+		let e = r.get(o.key);
+		if (e) {
+			if (a.has(e)) continue;
+			a.add(e);
+			let r = t.find((t) => t.key === e);
+			if (!r) continue;
+			let o = r.columnKeys.map((e) => n.get(e)).filter((e) => !!e);
+			i.push({
+				kind: "group",
+				key: r.key,
+				header: r.header,
+				leafColumns: o,
+				hideOnMobile: r.hideOnMobile,
+				group: r
+			});
+		} else i.push({
+			kind: "column",
+			key: o.key,
+			header: o.header,
+			leafColumns: [o],
+			hideOnMobile: o.hideOnMobile
+		});
+	}
+	return i;
+}
+function t(e) {
+	return e.map((e) => e.key);
+}
+function n(e, t, n) {
+	let r = new Map(e.map((e) => [e.key, e])), i = new Set(t), a = t.map((e) => r.get(e)).filter((e) => !!e), o = e.filter((e) => !i.has(e.key));
+	return [...a, ...o].filter((e) => !(n.has(e.key) || e.kind === "column" && e.leafColumns[0].hidden));
+}
+function r(e) {
+	return e.flatMap((e) => e.leafColumns);
+}
+function i(e) {
+	return e.some((e) => e.kind === "group");
+}
+//#endregion
+export { n as applyColumnState, e as buildColumnSlots, r as flattenLeafColumns, t as getDefaultSlotOrder, i as hasGroupSlot };

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

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