@kimkihwan/cytur-design-system 0.5.0 → 0.5.1

package/dist/index.js

@@ -9066,11 +9066,118 @@ var xm = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("caption", {
 }));
 xm.displayName = "TableCaption";
 //#endregion
+//#region src/components/table/DataTable.tsx
+function Sm({ columns: t, data: n, rowKey: r = "id", striped: i = !1, pagination: a = !1, pageSize: o = 10, pageSizeOptions: s = [
+	5,
+	10,
+	20,
+	50
+], showGoTo: c = !1, selectable: l = !1, selectedKey: d = null, onRowClick: p, emptyText: m = "No data", ...h }) {
+	let [g, _] = f(null), [v, y] = f("none"), [b, x] = f({}), [S, C] = f(1), [w, T] = f(o), E = u(() => {
+		let e = {};
+		return t.forEach((t) => {
+			t.filterable && (e[t.key] = [...new Set(n.map((e) => String(e[t.key])))]);
+		}), e;
+	}, [t, n]), D = u(() => {
+		let e = n;
+		return Object.entries(b).forEach(([t, n]) => {
+			n.length > 0 && (e = e.filter((e) => n.includes(String(e[t]))));
+		}), e;
+	}, [n, b]), O = u(() => !g || v === "none" ? D : [...D].sort((e, t) => {
+		let n = String(e[g] ?? ""), r = String(t[g] ?? ""), i = Number(n), a = Number(r);
+		return !isNaN(i) && !isNaN(a) ? v === "asc" ? i - a : a - i : v === "asc" ? n.localeCompare(r) : r.localeCompare(n);
+	}), [
+		D,
+		g,
+		v
+	]), k = a ? Math.max(1, Math.ceil(O.length / w)) : 1, A = Math.min(S, k), j = a ? O.slice((A - 1) * w, A * w) : O, M = (e) => {
+		g === e ? y((e) => e === "none" ? "asc" : e === "asc" ? "desc" : "none") : (_(e), y("asc"));
+	}, N = (e) => (t) => {
+		x((n) => ({
+			...n,
+			[e]: t
+		})), C(1);
+	}, P = (e, t) => typeof r == "function" ? r(e, t) : e[r] ?? t, F = (e) => g === e ? v : "none";
+	return /* @__PURE__ */ Y("div", {
+		...h,
+		children: [/* @__PURE__ */ J("div", {
+			css: e({
+				border: "1px solid #e5e7eb",
+				borderRadius: "8px",
+				overflow: "hidden",
+				background: "#fff"
+			}),
+			children: /* @__PURE__ */ Y(mm, {
+				striped: i,
+				children: [/* @__PURE__ */ J(hm, { children: /* @__PURE__ */ J(_m, { children: t.map((t) => /* @__PURE__ */ J(ym, {
+					sortable: t.sortable,
+					sortDirection: t.sortable ? F(t.key) : void 0,
+					onSort: t.sortable ? () => M(t.key) : void 0,
+					filterable: t.filterable,
+					filterOptions: t.filterable ? E[t.key] : void 0,
+					filterValue: t.filterable ? b[t.key] ?? [] : void 0,
+					onFilterChange: t.filterable ? N(t.key) : void 0,
+					css: e({
+						...t.width ? { width: t.width } : {},
+						...t.align ? { textAlign: t.align } : {}
+					}),
+					children: t.label
+				}, t.key)) }) }), /* @__PURE__ */ J(gm, { children: j.length === 0 ? /* @__PURE__ */ J(_m, { children: /* @__PURE__ */ J(bm, {
+					colSpan: t.length,
+					children: /* @__PURE__ */ J("div", {
+						css: e({
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							padding: "40px 0",
+							color: "#9ca3af",
+							fontSize: "14px",
+							fontFamily: W.family
+						}),
+						children: m
+					})
+				}) }) : j.map((n, r) => {
+					let i = P(n, r);
+					return /* @__PURE__ */ J(_m, {
+						selected: l && d === i,
+						onClick: p ? () => p(n, r) : void 0,
+						css: p ? e({ cursor: "pointer" }) : void 0,
+						children: t.map((t) => /* @__PURE__ */ J(bm, {
+							css: t.align ? e({ textAlign: t.align }) : void 0,
+							children: t.render ? t.render(n[t.key], n, r) : String(n[t.key] ?? "")
+						}, t.key))
+					}, i);
+				}) })]
+			})
+		}), a && k > 0 && /* @__PURE__ */ J("div", {
+			css: e({
+				display: "flex",
+				justifyContent: "center",
+				marginTop: "16px"
+			}),
+			children: /* @__PURE__ */ J(fm, {
+				size: "sm",
+				totalPages: k,
+				currentPage: A,
+				onChange: C,
+				showPageSize: !0,
+				pageSize: w,
+				pageSizeOptions: s,
+				onPageSizeChange: (e) => {
+					T(e), C(1);
+				},
+				showGoTo: c
+			})
+		})]
+	});
+}
+Sm.displayName = "DataTable";
+//#endregion
 //#region src/components/file/File.tsx
-var Sm = t`
+var Cm = t`
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`, Cm = i(({ state: t = "default", children: n, ...r }, i) => {
+`, wm = i(({ state: t = "default", children: n, ...r }, i) => {
 	let a = t === "loading";
 	return /* @__PURE__ */ Y("a", {
 		ref: i,
@@ -9101,7 +9208,7 @@ var Sm = t`
 		children: [a ? /* @__PURE__ */ J("span", {
 			css: e({
 				display: "inline-flex",
-				animation: `${Sm} 1s linear infinite`
+				animation: `${Cm} 1s linear infinite`
 			}),
 			children: /* @__PURE__ */ J(X, {
 				name: "autorenew",
@@ -9113,10 +9220,10 @@ var Sm = t`
 		}), n]
 	});
 });
-Cm.displayName = "File";
+wm.displayName = "File";
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-var wm = {
+var Tm = {
 	sm: {
 		px: "24px",
 		fontSize: "12px",
@@ -9132,8 +9239,8 @@ var wm = {
 		fontSize: "16px",
 		lineHeight: "24px"
 	}
-}, Tm = (e, t) => t === "circle" ? "50%" : e === "sm" ? "4px" : "8px", Em = i(({ size: t = "md", shape: n = "circle", src: r, alt: i = "", initials: a, children: o, ...s }, c) => {
-	let l = wm[t], u = !!r;
+}, Em = (e, t) => t === "circle" ? "50%" : e === "sm" ? "4px" : "8px", Dm = i(({ size: t = "md", shape: n = "circle", src: r, alt: i = "", initials: a, children: o, ...s }, c) => {
+	let l = Tm[t], u = !!r;
 	return /* @__PURE__ */ J("div", {
 		ref: c,
 		css: e({
@@ -9142,7 +9249,7 @@ var wm = {
 			justifyContent: "center",
 			width: l.px,
 			height: l.px,
-			borderRadius: Tm(t, n),
+			borderRadius: Em(t, n),
 			overflow: "hidden",
 			background: u ? ae.color.bg.image : ae.color.bg.default,
 			flexShrink: 0
@@ -9170,17 +9277,17 @@ var wm = {
 		})
 	});
 });
-Em.displayName = "Avatar";
+Dm.displayName = "Avatar";
 //#endregion
 //#region node_modules/@radix-ui/react-dialog/dist/index.mjs
-var Dm = "Dialog", [Om, km] = Cn(Dm), [Am, jm] = Om(Dm), Mm = (e) => {
+var Om = "Dialog", [km, Am] = Cn(Om), [jm, Mm] = km(Om), Nm = (e) => {
 	let { __scopeDialog: t, children: r, open: i, defaultOpen: a, onOpenChange: o, modal: s = !0 } = e, c = n.useRef(null), l = n.useRef(null), [u, d] = lo({
 		prop: i,
 		defaultProp: a ?? !1,
 		onChange: o,
-		caller: Dm
+		caller: Om
 	});
-	return /* @__PURE__ */ h(Am, {
+	return /* @__PURE__ */ h(jm, {
 		scope: t,
 		triggerRef: c,
 		contentRef: l,
@@ -9194,24 +9301,24 @@ var Dm = "Dialog", [Om, km] = Cn(Dm), [Am, jm] = Om(Dm), Mm = (e) => {
 		children: r
 	});
 };
-Mm.displayName = Dm;
-var Nm = "DialogTrigger", Pm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Nm, n), a = Q(t, i.triggerRef);
+Nm.displayName = Om;
+var Pm = "DialogTrigger", Fm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Pm, n), a = Q(t, i.triggerRef);
 	return /* @__PURE__ */ h($.button, {
 		type: "button",
 		"aria-haspopup": "dialog",
 		"aria-expanded": i.open,
 		"aria-controls": i.contentId,
-		"data-state": eh(i.open),
+		"data-state": th(i.open),
 		...r,
 		ref: a,
 		onClick: Z(e.onClick, i.onOpenToggle)
 	});
 });
-Pm.displayName = Nm;
-var Fm = "DialogPortal", [Im, Lm] = Om(Fm, { forceMount: void 0 }), Rm = (e) => {
-	let { __scopeDialog: t, forceMount: r, children: i, container: a } = e, o = jm(Fm, t);
-	return /* @__PURE__ */ h(Im, {
+Fm.displayName = Pm;
+var Im = "DialogPortal", [Lm, Rm] = km(Im, { forceMount: void 0 }), zm = (e) => {
+	let { __scopeDialog: t, forceMount: r, children: i, container: a } = e, o = Mm(Im, t);
+	return /* @__PURE__ */ h(Lm, {
 		scope: t,
 		forceMount: r,
 		children: n.Children.map(i, (e) => /* @__PURE__ */ h(zl, {
@@ -9224,26 +9331,26 @@ var Fm = "DialogPortal", [Im, Lm] = Om(Fm, { forceMount: void 0 }), Rm = (e) =>
 		}))
 	});
 };
-Rm.displayName = Fm;
-var zm = "DialogOverlay", Bm = n.forwardRef((e, t) => {
-	let n = Lm(zm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = jm(zm, e.__scopeDialog);
+zm.displayName = Im;
+var Bm = "DialogOverlay", Vm = n.forwardRef((e, t) => {
+	let n = Rm(Bm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = Mm(Bm, e.__scopeDialog);
 	return a.modal ? /* @__PURE__ */ h(zl, {
 		present: r || a.open,
-		children: /* @__PURE__ */ h(Hm, {
+		children: /* @__PURE__ */ h(Um, {
 			...i,
 			ref: t
 		})
 	}) : null;
 });
-Bm.displayName = zm;
-var Vm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Hm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(zm, n);
+Vm.displayName = Bm;
+var Hm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Um = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Bm, n);
 	return /* @__PURE__ */ h(Fs, {
-		as: Vm,
+		as: Hm,
 		allowPinchZoom: !0,
 		shards: [i.contentRef],
 		children: /* @__PURE__ */ h($.div, {
-			"data-state": eh(i.open),
+			"data-state": th(i.open),
 			...r,
 			ref: t,
 			style: {
@@ -9252,26 +9359,26 @@ var Vm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Hm = n.forwardRef((e,
 			}
 		})
 	});
-}), Um = "DialogContent", Wm = n.forwardRef((e, t) => {
-	let n = Lm(Um, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = jm(Um, e.__scopeDialog);
+}), Wm = "DialogContent", Gm = n.forwardRef((e, t) => {
+	let n = Rm(Wm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = Mm(Wm, e.__scopeDialog);
 	return /* @__PURE__ */ h(zl, {
 		present: r || a.open,
-		children: a.modal ? /* @__PURE__ */ h(Gm, {
+		children: a.modal ? /* @__PURE__ */ h(Km, {
 			...i,
 			ref: t
-		}) : /* @__PURE__ */ h(Km, {
+		}) : /* @__PURE__ */ h(qm, {
 			...i,
 			ref: t
 		})
 	});
 });
-Wm.displayName = Um;
-var Gm = n.forwardRef((e, t) => {
-	let r = jm(Um, e.__scopeDialog), i = n.useRef(null), a = Q(t, r.contentRef, i);
+Gm.displayName = Wm;
+var Km = n.forwardRef((e, t) => {
+	let r = Mm(Wm, e.__scopeDialog), i = n.useRef(null), a = Q(t, r.contentRef, i);
 	return n.useEffect(() => {
 		let e = i.current;
 		if (e) return Eo(e);
-	}, []), /* @__PURE__ */ h(qm, {
+	}, []), /* @__PURE__ */ h(Jm, {
 		...e,
 		ref: a,
 		trapFocus: r.open,
@@ -9285,9 +9392,9 @@ var Gm = n.forwardRef((e, t) => {
 		}),
 		onFocusOutside: Z(e.onFocusOutside, (e) => e.preventDefault())
 	});
-}), Km = n.forwardRef((e, t) => {
-	let r = jm(Um, e.__scopeDialog), i = n.useRef(!1), a = n.useRef(!1);
-	return /* @__PURE__ */ h(qm, {
+}), qm = n.forwardRef((e, t) => {
+	let r = Mm(Wm, e.__scopeDialog), i = n.useRef(!1), a = n.useRef(!1);
+	return /* @__PURE__ */ h(Jm, {
 		...e,
 		ref: t,
 		trapFocus: !1,
@@ -9301,8 +9408,8 @@ var Gm = n.forwardRef((e, t) => {
 			r.triggerRef.current?.contains(n) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && a.current && t.preventDefault();
 		}
 	});
-}), qm = n.forwardRef((e, t) => {
-	let { __scopeDialog: r, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, ...s } = e, c = jm(Um, r), l = n.useRef(null), u = Q(t, l);
+}), Jm = n.forwardRef((e, t) => {
+	let { __scopeDialog: r, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, ...s } = e, c = Mm(Wm, r), l = n.useRef(null), u = Q(t, l);
 	return er(), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(or, {
 		asChild: !0,
 		loop: !0,
@@ -9314,35 +9421,35 @@ var Gm = n.forwardRef((e, t) => {
 			id: c.contentId,
 			"aria-describedby": c.descriptionId,
 			"aria-labelledby": c.titleId,
-			"data-state": eh(c.open),
+			"data-state": th(c.open),
 			...s,
 			ref: u,
 			onDismiss: () => c.onOpenChange(!1)
 		})
-	}), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(ih, { titleId: c.titleId }), /* @__PURE__ */ h(oh, {
+	}), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(ah, { titleId: c.titleId }), /* @__PURE__ */ h(sh, {
 		contentRef: l,
 		descriptionId: c.descriptionId
 	})] })] });
-}), Jm = "DialogTitle", Ym = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Jm, n);
+}), Ym = "DialogTitle", Xm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Ym, n);
 	return /* @__PURE__ */ h($.h2, {
 		id: i.titleId,
 		...r,
 		ref: t
 	});
 });
-Ym.displayName = Jm;
-var Xm = "DialogDescription", Zm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Xm, n);
+Xm.displayName = Ym;
+var Zm = "DialogDescription", Qm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Zm, n);
 	return /* @__PURE__ */ h($.p, {
 		id: i.descriptionId,
 		...r,
 		ref: t
 	});
 });
-Zm.displayName = Xm;
-var Qm = "DialogClose", $m = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Qm, n);
+Qm.displayName = Zm;
+var $m = "DialogClose", eh = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm($m, n);
 	return /* @__PURE__ */ h($.button, {
 		type: "button",
 		...r,
@@ -9350,16 +9457,16 @@ var Qm = "DialogClose", $m = n.forwardRef((e, t) => {
 		onClick: Z(e.onClick, () => i.onOpenChange(!1))
 	});
 });
-$m.displayName = Qm;
-function eh(e) {
+eh.displayName = $m;
+function th(e) {
 	return e ? "open" : "closed";
 }
-var th = "DialogTitleWarning", [nh, rh] = Sn(th, {
-	contentName: Um,
-	titleName: Jm,
+var nh = "DialogTitleWarning", [rh, ih] = Sn(nh, {
+	contentName: Wm,
+	titleName: Ym,
 	docsSlug: "dialog"
-}), ih = ({ titleId: e }) => {
-	let t = rh(th), r = `\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
+}), ah = ({ titleId: e }) => {
+	let t = ih(nh), r = `\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
 
 If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.
 
@@ -9367,8 +9474,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 	return n.useEffect(() => {
 		e && (document.getElementById(e) || console.error(r));
 	}, [r, e]), null;
-}, ah = "DialogDescriptionWarning", oh = ({ contentRef: e, descriptionId: t }) => {
-	let r = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${rh(ah).contentName}}.`;
+}, oh = "DialogDescriptionWarning", sh = ({ contentRef: e, descriptionId: t }) => {
+	let r = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ih(oh).contentName}}.`;
 	return n.useEffect(() => {
 		let n = e.current?.getAttribute("aria-describedby");
 		t && n && (document.getElementById(t) || console.warn(r));
@@ -9377,7 +9484,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		e,
 		t
 	]), null;
-}, sh = Mm, ch = Rm, lh = Bm, uh = Wm, dh = Ym, fh = Zm, ph = $m, mh = {
+}, ch = Nm, lh = zm, uh = Vm, dh = Gm, fh = Xm, ph = Qm, mh = eh, hh = {
 	sm: {
 		width: "360px",
 		headerPt: "16px",
@@ -9414,24 +9521,24 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		footerPx: "24px",
 		scrollHeight: "640px"
 	}
-}, hh = t`
+}, gh = t`
   from { opacity: 0; }
   to { opacity: 1; }
-`, gh = t`
+`, _h = t`
   from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
   to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-`, _h = ({ open: t, onOpenChange: n, size: r = "md", showClose: i = !0, children: a }) => {
-	let o = mh[r];
-	return /* @__PURE__ */ J(sh, {
+`, vh = ({ open: t, onOpenChange: n, size: r = "md", showClose: i = !0, children: a }) => {
+	let o = hh[r];
+	return /* @__PURE__ */ J(ch, {
 		open: t,
 		onOpenChange: n,
-		children: /* @__PURE__ */ Y(ch, { children: [/* @__PURE__ */ J(lh, { css: e({
+		children: /* @__PURE__ */ Y(lh, { children: [/* @__PURE__ */ J(uh, { css: e({
 			position: "fixed",
 			inset: 0,
 			background: ie.overlay,
-			animation: `${hh} 150ms ease`,
+			animation: `${gh} 150ms ease`,
 			zIndex: 999
-		}) }), /* @__PURE__ */ Y(uh, {
+		}) }), /* @__PURE__ */ Y(dh, {
 			css: e({
 				position: "fixed",
 				top: "50%",
@@ -9447,12 +9554,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 				flexDirection: "column",
 				overflow: "hidden",
 				fontFamily: W.family,
-				animation: `${gh} 150ms ease`,
+				animation: `${_h} 150ms ease`,
 				zIndex: 1e3,
 				"&:focus": { outline: "none" }
 			}),
 			"data-modal-size": r,
-			children: [i && /* @__PURE__ */ J(ph, {
+			children: [i && /* @__PURE__ */ J(mh, {
 				asChild: !0,
 				children: /* @__PURE__ */ J("button", {
 					css: e({
@@ -9481,8 +9588,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		})] })
 	});
 };
-_h.displayName = "Modal";
-var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
+vh.displayName = "Modal";
+var yh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	ref: r,
 	css: e({
 		padding: "20px 24px 8px",
@@ -9490,7 +9597,7 @@ var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 		"[data-modal-size=\"lg\"] &": { padding: "24px 24px 12px" }
 	}),
 	...n,
-	children: /* @__PURE__ */ J(dh, {
+	children: /* @__PURE__ */ J(fh, {
 		css: e({
 			fontSize: "16px",
 			fontWeight: W.weight.bold,
@@ -9502,8 +9609,8 @@ var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 		children: t
 	})
 }));
-vh.displayName = "ModalHeader";
-var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div", {
+yh.displayName = "ModalHeader";
+var bh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div", {
 	ref: i,
 	css: e({
 		padding: "0 24px 20px",
@@ -9525,7 +9632,7 @@ var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div"
 		} : {}
 	}),
 	...r,
-	children: /* @__PURE__ */ J(fh, {
+	children: /* @__PURE__ */ J(ph, {
 		asChild: !0,
 		children: /* @__PURE__ */ J("div", {
 			css: e({
@@ -9538,8 +9645,8 @@ var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div"
 		})
 	})
 }));
-yh.displayName = "ModalBody";
-var bh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
+bh.displayName = "ModalBody";
+var xh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	ref: r,
 	css: e({
 		display: "flex",
@@ -9554,18 +9661,18 @@ var bh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	...n,
 	children: t
 }));
-bh.displayName = "ModalFooter";
+xh.displayName = "ModalFooter";
 //#endregion
 //#region src/components/toast/Toast.tsx
-var xh = {
+var Sh = {
 	success: "check-circle",
 	error: "error",
 	warning: "warning",
 	info: "info"
-}, Sh = t`
+}, Ch = t`
   from { transform: translateX(100%); opacity: 0; }
   to { transform: translateX(0); opacity: 1; }
-`, Ch = i(({ type: t = "success", title: n, description: r, action: i, showClose: a = !0, onClose: o, duration: c = 5e3, ...l }, u) => {
+`, wh = i(({ type: t = "success", title: n, description: r, action: i, showClose: a = !0, onClose: o, duration: c = 5e3, ...l }, u) => {
 	let d = re[t];
 	return s(() => {
 		if (c > 0 && o) {
@@ -9587,12 +9694,12 @@ var xh = {
 			borderRadius: "8px",
 			boxShadow: ue.md,
 			fontFamily: W.family,
-			animation: `${Sh} 200ms ease`
+			animation: `${Ch} 200ms ease`
 		}),
 		...l,
 		children: [
 			/* @__PURE__ */ J(X, {
-				name: xh[t],
+				name: Sh[t],
 				size: "md",
 				color: d.icon,
 				css: e({ flexShrink: 0 })
@@ -9663,10 +9770,10 @@ var xh = {
 		]
 	});
 });
-Ch.displayName = "Toast";
+wh.displayName = "Toast";
 //#endregion
 //#region src/components/alert-feed/AlertFeed.tsx
-var wh = {
+var Th = {
 	emergency: {
 		label: "Emergency",
 		bg: "var(--tag-danger-bg-solid)",
@@ -9687,17 +9794,17 @@ var wh = {
 		bg: "var(--tag-info-bg-solid)",
 		text: "var(--tag-info-text-solid)"
 	}
-}, Th = t`
+}, Eh = t`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
-`, Eh = ({ width: t, height: n, radius: r = "4px" }) => /* @__PURE__ */ J("div", { css: e({
+`, Dh = ({ width: t, height: n, radius: r = "4px" }) => /* @__PURE__ */ J("div", { css: e({
 	width: t,
 	height: n,
 	borderRadius: r,
 	background: "#f3f4f6",
-	animation: `${Th} 1.5s ease-in-out infinite`
-}) }), Dh = ({ severity: t }) => {
-	let n = wh[t];
+	animation: `${Eh} 1.5s ease-in-out infinite`
+}) }), Oh = ({ severity: t }) => {
+	let n = Th[t];
 	return /* @__PURE__ */ J("span", {
 		css: e({
 			display: "inline-flex",
@@ -9715,7 +9822,7 @@ var wh = {
 		}),
 		children: n.label
 	});
-}, Oh = {
+}, kh = {
 	emergency: {
 		bg: "var(--tag-danger-bg-solid)",
 		text: "var(--tag-danger-text-solid)"
@@ -9736,11 +9843,11 @@ var wh = {
 		bg: "#374151",
 		text: "#ffffff"
 	}
-}, kh = {
+}, Ah = {
 	bg: "var(--tag-default-bg-subtle)",
 	text: "var(--tag-default-text-subtle)"
-}, Ah = ({ label: t, count: n, active: r, filterKey: i }) => {
-	let a = r ? Oh[i] ?? kh : kh;
+}, jh = ({ label: t, count: n, active: r, filterKey: i }) => {
+	let a = r ? kh[i] ?? Ah : Ah;
 	return /* @__PURE__ */ J("span", {
 		css: e({
 			display: "inline-flex",
@@ -9761,7 +9868,7 @@ var wh = {
 		}),
 		children: `${t}  ${n}`
 	});
-}, jh = ({ item: t }) => /* @__PURE__ */ Y("div", {
+}, Mh = ({ item: t }) => /* @__PURE__ */ Y("div", {
 	css: e({
 		display: "flex",
 		flexDirection: "column",
@@ -9779,7 +9886,7 @@ var wh = {
 				alignItems: "center",
 				justifyContent: "space-between"
 			}),
-			children: [/* @__PURE__ */ J(Dh, { severity: t.severity }), /* @__PURE__ */ J("span", {
+			children: [/* @__PURE__ */ J(Oh, { severity: t.severity }), /* @__PURE__ */ J("span", {
 				css: e({
 					fontSize: "12px",
 					lineHeight: "18px",
@@ -9810,7 +9917,7 @@ var wh = {
 			children: t.meta
 		})
 	]
-}), Mh = () => /* @__PURE__ */ Y("div", {
+}), Nh = () => /* @__PURE__ */ Y("div", {
 	css: e({
 		display: "flex",
 		flexDirection: "column",
@@ -9828,25 +9935,25 @@ var wh = {
 				alignItems: "center",
 				justifyContent: "space-between"
 			}),
-			children: [/* @__PURE__ */ J(Eh, {
+			children: [/* @__PURE__ */ J(Dh, {
 				width: "72px",
 				height: "22px",
 				radius: "100px"
-			}), /* @__PURE__ */ J(Eh, {
+			}), /* @__PURE__ */ J(Dh, {
 				width: "40px",
 				height: "12px"
 			})]
 		}),
-		/* @__PURE__ */ J(Eh, {
+		/* @__PURE__ */ J(Dh, {
 			width: "80%",
 			height: "14px"
 		}),
-		/* @__PURE__ */ J(Eh, {
+		/* @__PURE__ */ J(Dh, {
 			width: "60%",
 			height: "12px"
 		})
 	]
-}), Nh = i(({ title: t = "Threat Event Alarms", subtitle: n = "(Last 7 Days)", items: r = [], loading: i = !1, height: a = 620, filterCounts: o, activeFilter: s = "all", onFilterChange: c, onViewAll: l, onSettingsClick: u, viewAllLabel: d = "View All Threat Events", ...f }, p) => {
+}), Ph = i(({ title: t = "Threat Event Alarms", subtitle: n = "(Last 7 Days)", items: r = [], loading: i = !1, height: a = 620, filterCounts: o, activeFilter: s = "all", onFilterChange: c, onViewAll: l, onSettingsClick: u, viewAllLabel: d = "View All Threat Events", ...f }, p) => {
 	let m = o ?? {
 		all: r.length,
 		emergency: r.filter((e) => e.severity === "emergency").length,
@@ -9899,20 +10006,20 @@ var wh = {
 							gap: "8px"
 						}),
 						children: [
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "16px",
 								height: "16px"
 							}),
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "140px",
 								height: "16px"
 							}),
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "64px",
 								height: "12px"
 							})
 						]
-					}), /* @__PURE__ */ J(Eh, {
+					}), /* @__PURE__ */ J(Dh, {
 						width: "16px",
 						height: "16px"
 					})]
@@ -9927,7 +10034,7 @@ var wh = {
 						52,
 						60,
 						56
-					].map((e, t) => /* @__PURE__ */ J(Eh, {
+					].map((e, t) => /* @__PURE__ */ J(Dh, {
 						width: `${e}px`,
 						height: "24px",
 						radius: "100px"
@@ -9990,7 +10097,7 @@ var wh = {
 					children: Object.entries(m).map(([t, n]) => /* @__PURE__ */ J("span", {
 						onClick: () => c?.(t),
 						css: e({ cursor: "pointer" }),
-						children: /* @__PURE__ */ J(Ah, {
+						children: /* @__PURE__ */ J(jh, {
 							filterKey: t,
 							label: _[t] ?? t,
 							count: n,
@@ -10021,7 +10128,7 @@ var wh = {
 						minHeight: 0,
 						overflowY: "auto"
 					}),
-					children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ J(Mh, {}, t))
+					children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ J(Nh, {}, t))
 				}), /* @__PURE__ */ J("div", {
 					css: e({
 						display: "flex",
@@ -10029,7 +10136,7 @@ var wh = {
 						padding: "8px",
 						flexShrink: 0
 					}),
-					children: /* @__PURE__ */ J(Eh, {
+					children: /* @__PURE__ */ J(Dh, {
 						width: "160px",
 						height: "16px"
 					})
@@ -10134,7 +10241,7 @@ var wh = {
 							borderRadius: "2px"
 						}
 					}),
-					children: h.map((e) => /* @__PURE__ */ J(jh, { item: e }, e.id))
+					children: h.map((e) => /* @__PURE__ */ J(Mh, { item: e }, e.id))
 				}), l && /* @__PURE__ */ J("button", {
 					onClick: l,
 					css: e({
@@ -10161,10 +10268,10 @@ var wh = {
 		]
 	});
 });
-Nh.displayName = "AlertFeed";
+Ph.displayName = "AlertFeed";
 //#endregion
 //#region src/tokens/index.ts
-var Ph = {
+var Fh = {
 	button: E,
 	checkbox: D,
 	radio: O,
@@ -10202,4 +10309,4 @@ var Ph = {
 	csc: T
 };
 //#endregion
-export { Nh as AlertFeed, bu as Autocomplete, Em as Avatar, Cl as Badge, gn as Button, wl as Card, Ol as CardAction, Al as CardContent, Dl as CardDescription, jl as CardFooter, Tl as CardHeader, El as CardTitle, pl as Checkbox, up as Dropdown, fp as DropdownItem, Cm as File, X as Icon, yn as Input, ol as InputWithButton, pm as Link, _h as Modal, yh as ModalBody, bh as ModalFooter, vh as ModalHeader, hp as MultiSelect, pp as NotificationBadge, fm as Pagination, bl as Radio, xl as RadioGroup, Ll as Search, al as Select, mm as Table, gm as TableBody, xm as TableCaption, bm as TableCell, ym as TableHead, hm as TableHeader, _m as TableRow, gp as Tabs, Fl as Tag, bn as Textarea, Ch as Toast, Nl as Toggle, cm as Tooltip, ae as avatar, x as base, A as color, T as csc, ve as dataviz, R as dropdown, oe as file, W as font, ge as gray, N as label, te as link, ie as modal, B as multiselect, ee as notificationBadge, U as pagination, le as radius, C as rm, ue as shadow, _e as status, H as table, V as tabs, I as tag, re as toast, Ph as tokens, ce as tooltip };
+export { Ph as AlertFeed, bu as Autocomplete, Dm as Avatar, Cl as Badge, gn as Button, wl as Card, Ol as CardAction, Al as CardContent, Dl as CardDescription, jl as CardFooter, Tl as CardHeader, El as CardTitle, pl as Checkbox, Sm as DataTable, up as Dropdown, fp as DropdownItem, wm as File, X as Icon, yn as Input, ol as InputWithButton, pm as Link, vh as Modal, bh as ModalBody, xh as ModalFooter, yh as ModalHeader, hp as MultiSelect, pp as NotificationBadge, fm as Pagination, bl as Radio, xl as RadioGroup, Ll as Search, al as Select, mm as Table, gm as TableBody, xm as TableCaption, bm as TableCell, ym as TableHead, hm as TableHeader, _m as TableRow, gp as Tabs, Fl as Tag, bn as Textarea, wh as Toast, Nl as Toggle, cm as Tooltip, ae as avatar, x as base, A as color, T as csc, ve as dataviz, R as dropdown, oe as file, W as font, ge as gray, N as label, te as link, ie as modal, B as multiselect, ee as notificationBadge, U as pagination, le as radius, C as rm, ue as shadow, _e as status, H as table, V as tabs, I as tag, re as toast, Fh as tokens, ce as tooltip };

package/dist/types/components/index.d.ts

@@ -20,6 +20,7 @@ export { Pagination, type PaginationProps, type PaginationSize } from './paginat
 export { Link, type LinkProps, type LinkType } from './link/Link';
 export { Icon, type IconProps, type IconSize, type IconName } from './icon/Icon';
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableRowProps, type TableHeadProps, type SortDirection } from './table/Table';
+export { DataTable, type DataTableProps, type DataTableColumn } from './table/DataTable';
 export { File, type FileProps, type FileState } from './file/File';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarShape } from './avatar/Avatar';
 export { Modal, ModalHeader, ModalBody, ModalFooter, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from './modal/Modal';

package/dist/types/components/table/DataTable.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: unknown, row: T, index: number) => ReactNode;
+}
+export interface DataTableProps<T = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    rowKey?: string | ((row: T, index: number) => string | number);
+    striped?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showGoTo?: boolean;
+    selectable?: boolean;
+    selectedKey?: string | number | null;
+    onRowClick?: (row: T, index: number) => void;
+    emptyText?: string;
+}
+export declare function DataTable<T extends Record<string, unknown>>({ columns, data, rowKey, striped, pagination, pageSize: initialPageSize, pageSizeOptions, showGoTo, selectable, selectedKey, onRowClick, emptyText, ...rest }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}

package/dist/types/lib.d.ts

@@ -20,6 +20,7 @@ export { Pagination, type PaginationProps, type PaginationSize } from "./compone
 export { Link, type LinkProps, type LinkType } from "./components/link/Link";
 export { Icon, type IconProps, type IconSize, type IconName } from "./components/icon/Icon";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableRowProps, type TableHeadProps, type SortDirection } from "./components/table/Table";
+export { DataTable, type DataTableProps, type DataTableColumn } from "./components/table/DataTable";
 export { File, type FileProps, type FileState } from "./components/file/File";
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarShape } from "./components/avatar/Avatar";
 export { Modal, ModalHeader, ModalBody, ModalFooter, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from "./components/modal/Modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimkihwan/cytur-design-system",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",