haze-ui 1.24.1 → 1.26.0

package/dist/components/Combobox/Combobox.js

@@ -1,63 +1,92 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import r from "./ComboboxOption.js";
+import r from "../VirtualList/VirtualList.js";
+import i from "./ComboboxOption.js";
 /* empty css                   */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o, useRef as s, useState as c } from "react";
-import { useControl as l } from "react-use-control";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { useControl as d } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
-var u = "haze-Combobox__wrapper", d = "haze-Combobox__input", f = "haze-Combobox__listbox";
-function p({ value: p, open: m, options: h, placeholder: g, className: _ }) {
-	let [v, y] = l(p, ""), [b, x] = c(""), [S, C] = l(m, !1), [w, T] = c(-1), [E, D] = c(b), O = o(), k = s(null), A = s(null), j = n({
-		open: S,
-		setOpen: C,
-		triggerRef: k,
-		panelRef: A,
+var f = "haze-Combobox__wrapper", p = "haze-Combobox__input", m = "haze-Combobox__listbox", h = "haze-Combobox__listboxVirtual", g = 200, _ = 37, v = "haze-Combobox__virtualRow";
+function y({ value: y, open: b, options: x, placeholder: S, virtualThreshold: C = 100, className: w }) {
+	let [T, E] = d(y, ""), [D, O] = u(""), [k, A] = d(b, !1), [j, M] = u(-1), [N, P] = u(D), F = c(), I = l(null), L = l(null), R = l(null), z = n({
+		open: k,
+		setOpen: A,
+		triggerRef: I,
+		panelRef: L,
 		animated: !0
-	}), M = h.filter((e) => e.label.toLowerCase().includes(b.toLowerCase()));
-	b !== E && (D(b), T(-1));
-	let N = (e) => {
-		y(e);
-		let t = h.find((t) => t.value === e)?.label ?? e;
-		x(t), C(!1), k.current?.focus();
+	}), B = x.filter((e) => e.label.toLowerCase().includes(D.toLowerCase())), V = C > 0 && B.length > C, H = (e) => `${F}-option-${e}`, U = k && B[j] ? H(j) : void 0;
+	s(() => {
+		!V || !z.shown || j < 0 || R.current?.scrollToIndex(j, "auto");
+	}, [
+		V,
+		z.shown,
+		j
+	]), D !== N && (P(D), M(-1));
+	let W = (e) => {
+		E(e);
+		let t = x.find((t) => t.value === e)?.label ?? e;
+		O(t), A(!1), I.current?.focus();
 	};
-	return /* @__PURE__ */ a("div", {
-		className: e([u, _]),
-		children: [/* @__PURE__ */ i("input", {
-			ref: k,
+	return /* @__PURE__ */ o("div", {
+		className: e([f, w]),
+		children: [/* @__PURE__ */ a("input", {
+			ref: I,
 			role: "combobox",
-			style: j.triggerStyle,
-			"aria-expanded": S,
-			"aria-controls": O,
+			style: z.triggerStyle,
+			"aria-expanded": k,
+			"aria-controls": F,
 			"aria-autocomplete": "list",
-			className: d,
-			value: b,
-			placeholder: g,
+			"aria-activedescendant": U,
+			className: p,
+			value: D,
+			placeholder: S,
 			onChange: (e) => {
-				x(e.target.value), C(!0);
+				O(e.target.value), A(!0);
 			},
-			onFocus: () => C(!0),
-			onClick: () => C(!0),
+			onPointerDown: z.onTriggerPointerDown,
+			onClick: z.onTriggerClick,
 			onKeyDown: (e) => {
-				e.key === "ArrowDown" ? (e.preventDefault(), T((e) => Math.min(e + 1, M.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), T((e) => Math.max(e - 1, 0))) : e.key === "Enter" && w >= 0 && M[w] ? (e.preventDefault(), N(M[w].value)) : e.key === "Escape" && C(!1);
+				e.key === "ArrowDown" ? (e.preventDefault(), A(!0), M((e) => Math.min(e + 1, B.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), A(!0), M((e) => Math.max(e - 1, 0))) : e.key === "Enter" && j >= 0 && B[j] ? (e.preventDefault(), W(B[j].value)) : e.key === "Escape" && A(!1);
 			}
-		}), /* @__PURE__ */ i(t, {
-			ref: A,
-			behavior: j,
+		}), /* @__PURE__ */ a(t, {
+			ref: L,
+			behavior: z,
 			placement: "bottom-span",
-			id: O,
+			id: F,
 			role: "listbox",
-			visualClass: f,
-			children: M.map((e, t) => /* @__PURE__ */ i(r, {
+			visualClass: V ? h : m,
+			children: V ? /* @__PURE__ */ a(r, {
+				ref: R,
+				"data-virtualized": !0,
+				items: B,
+				height: g,
+				itemHeight: _,
+				renderItem: (e, t) => /* @__PURE__ */ a(i, {
+					value: e.value,
+					id: H(t),
+					setSize: B.length,
+					posInSet: t + 1,
+					highlighted: t === j,
+					selected: e.value === T,
+					onSelect: W,
+					className: v,
+					children: e.label
+				})
+			}) : B.map((e, t) => /* @__PURE__ */ a(i, {
 				value: e.value,
-				highlighted: t === w,
-				selected: e.value === v,
-				onSelect: N,
+				id: H(t),
+				setSize: B.length,
+				posInSet: t + 1,
+				highlighted: t === j,
+				selected: e.value === T,
+				onSelect: W,
 				children: e.label
 			}, e.value))
 		})]
 	});
 }
 //#endregion
-export { p as default };
+export { y as default };

package/dist/components/Combobox/ComboboxOption.js

@@ -1,21 +1,25 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                         */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Combobox/ComboboxOption.tsx
 var n = "haze-ComboboxOption__option", r = "haze-ComboboxOption__highlightedStyle", i = "haze-ComboboxOption__selectedStyle";
-function a({ value: a, highlighted: o = !1, selected: s = !1, onSelect: c, className: l, children: u }) {
+function a({ value: a, highlighted: o = !1, selected: s = !1, id: c, setSize: l, posInSet: u, onSelect: d, className: f, children: p }) {
 	return /* @__PURE__ */ t("div", {
 		role: "option",
-		"aria-selected": s,
-		onClick: () => c?.(a),
+		id: c,
+		"aria-selected": s || o,
+		"aria-setsize": l,
+		"aria-posinset": u,
+		onClick: () => d?.(a),
 		className: e([
 			n,
 			o && r,
 			s && i,
-			l
+			f
 		]),
-		children: u
+		children: p
 	});
 }
 //#endregion

package/dist/components/Combobox/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./ComboboxOption.js";
 import t from "./Combobox.js";
 export { t as Combobox, e as ComboboxOption };

package/dist/components/Command/Command.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
 /* empty css                  */

package/dist/components/Command/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e, { CommandInput as t, CommandItem as n, CommandList as r } from "./Command.js";
 export { e as Command, t as CommandInput, n as CommandItem, r as CommandList };

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1,64 +1,66 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useFocusScope as t } from "../../utils/focus-scope.js";
 import { Presence as n } from "../../utils/presence.js";
+import { useStrings as r } from "../LocaleProvider/useStrings.js";
 /* empty css                        */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useId as a } from "react";
-import { useControl as o } from "react-use-control";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/ConfirmDialog/ConfirmDialog.tsx
-var s = "haze-ConfirmDialog__overlay", c = "haze-ConfirmDialog__dialog", l = "haze-ConfirmDialog__header", u = "haze-ConfirmDialog__body", d = "haze-ConfirmDialog__footer", f = "haze-ConfirmDialog__btn", p = "haze-ConfirmDialog__cancelBtn", m = "haze-ConfirmDialog__confirmBtn", h = "haze-ConfirmDialog__dangerBtn";
-function g({ open: g, onClose: _, onConfirm: v, onCancel: y, title: b, children: x, confirmText: S = "Confirm", cancelText: C = "Cancel", variant: w = "default", className: T, ...E }) {
-	let [D, O] = o(g, !1), k = t({
-		enabled: D,
+var c = "haze-ConfirmDialog__overlay", l = "haze-ConfirmDialog__dialog", u = "haze-ConfirmDialog__header", d = "haze-ConfirmDialog__body", f = "haze-ConfirmDialog__footer", p = "haze-ConfirmDialog__btn", m = "haze-ConfirmDialog__cancelBtn", h = "haze-ConfirmDialog__confirmBtn", g = "haze-ConfirmDialog__dangerBtn";
+function _({ open: _, onClose: v, onConfirm: y, onCancel: b, title: x, children: S, confirmText: C, cancelText: w, variant: T = "default", className: E, ...D }) {
+	let [O, k] = s(_, !1), A = r("confirmDialog"), j = C ?? A.confirm, M = w ?? A.cancel, N = t({
+		enabled: O,
 		trapped: !0
-	}), A = `haze-confirm-title-${a()}`, j = () => {
-		O(!1), _?.();
-	}, M = () => {
-		y?.(), j();
-	}, N = () => {
-		v?.(), j();
+	}), P = `haze-confirm-title-${o()}`, F = () => {
+		k(!1), v?.();
+	}, I = () => {
+		b?.(), F();
+	}, L = () => {
+		y?.(), F();
 	};
-	return /* @__PURE__ */ r(n, {
-		present: D,
-		children: r("div", {
+	return /* @__PURE__ */ i(n, {
+		present: O,
+		children: i("div", {
 			onClick: () => {
-				D && j();
+				O && F();
 			},
 			onKeyDown: (e) => {
-				e.key === "Escape" && D && j();
+				e.key === "Escape" && O && F();
 			},
-			className: e([s, T]),
-			children: /* @__PURE__ */ i("div", {
-				ref: k,
+			className: e([c, E]),
+			children: /* @__PURE__ */ a("div", {
+				ref: N,
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-labelledby": b === void 0 ? void 0 : A,
-				...E,
+				"aria-labelledby": x === void 0 ? void 0 : P,
+				...D,
 				onClick: (e) => e.stopPropagation(),
-				className: e([c]),
+				className: e([l]),
 				children: [
-					b && /* @__PURE__ */ r("div", {
-						id: A,
-						className: e([l]),
-						children: b
-					}),
-					/* @__PURE__ */ r("div", {
+					x && /* @__PURE__ */ i("div", {
+						id: P,
 						className: e([u]),
 						children: x
 					}),
 					/* @__PURE__ */ i("div", {
 						className: e([d]),
-						children: [/* @__PURE__ */ r("button", {
+						children: S
+					}),
+					/* @__PURE__ */ a("div", {
+						className: e([f]),
+						children: [/* @__PURE__ */ i("button", {
 							type: "button",
-							onClick: M,
-							className: e([f, p]),
-							children: C
-						}), /* @__PURE__ */ r("button", {
+							onClick: I,
+							className: e([p, m]),
+							children: M
+						}), /* @__PURE__ */ i("button", {
 							type: "button",
-							onClick: N,
-							className: e([f, w === "danger" ? h : m]),
-							children: S
+							onClick: L,
+							className: e([p, T === "danger" ? g : h]),
+							children: j
 						})]
 					})
 				]
@@ -67,4 +69,4 @@ function g({ open: g, onClose: _, onConfirm: v, onCancel: y, title: b, children:
 	});
 }
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/components/ConfirmDialog/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./ConfirmDialog.js";
 export { e as ConfirmDialog };

package/dist/components/Container/Container.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Container/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Container.js";
 export { e as Container };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useFloating as t } from "../../utils/floating.js";
 import { ContextMenuProvider as n } from "./ContextMenuContext.js";

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { useFocusScope as e } from "../../utils/focus-scope.js";
 import { FloatingPanel as t } from "../../utils/floating.js";
 import { useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";

package/dist/components/ContextMenu/ContextMenuContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext as e, useContext as t } from "react";
 //#region src/lib/components/ContextMenu/ContextMenuContext.ts
 var n = e(void 0), r = n.Provider;

package/dist/components/ContextMenu/ContextMenuItem.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useContextMenuContext as t } from "./ContextMenuContext.js";
 /* empty css                          */

package/dist/components/ContextMenu/ContextMenuSeparator.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ContextMenu/ContextMenuTrigger.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useContextMenuContext as t } from "./ContextMenuContext.js";
 /* empty css                             */

package/dist/components/ContextMenu/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./ContextMenu.js";
 import t from "./ContextMenuTrigger.js";
 import n from "./ContextMenuContent.js";

package/dist/components/ConversationList/ConversationItem.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                           */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/ConversationList/ConversationList.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                           */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ConversationList/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./ConversationList.js";
 import t from "./ConversationItem.js";
 export { t as ConversationItem, e as ConversationList };

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,193 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Checkbox/CheckboxCore.js";
+import n from "../Skeleton/Skeleton.js";
+import r from "../VirtualList/VirtualList.js";
+import ee from "../Table/TableHead.js";
+import i from "../Table/TableBody.js";
+import a from "../Table/TableCell.js";
+import te from "../Empty/Empty.js";
+import o from "../Pagination/Pagination.js";
+/* empty css                    */
+import { Fragment as ne, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEffect as l, useMemo as u, useRef as d, useState as re } from "react";
+import { useControl as f } from "react-use-control";
+import { createPaginatedRowModel as p, createSortedRowModel as m, metaHelper as h, rowPaginationFeature as g, rowSelectionFeature as _, rowSortingFeature as v, sortFn_alphanumeric as y, sortFn_text as b, tableFeatures as x, useTable as S } from "@tanstack/react-table";
+//#region src/lib/components/DataTable/DataTable.tsx
+var C = x({
+	rowPaginationFeature: g,
+	paginatedRowModel: p(),
+	rowSelectionFeature: _,
+	rowSortingFeature: v,
+	sortedRowModel: m(),
+	sortFns: {
+		alphanumeric: y,
+		text: b
+	},
+	columnMeta: h()
+});
+function w(e, t) {
+	let n = {
+		...e,
+		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t
+	};
+	return "columns" in n && n.columns ? {
+		...n,
+		columns: n.columns.map((e) => w(e, t))
+	} : n;
+}
+var ie = 34, ae = "haze-DataTable__root", oe = "haze-DataTable__scrollArea", se = "haze-DataTable__stickyScrollArea", ce = "haze-DataTable__virtualArea", T = "haze-DataTable__fixedLayout", le = "haze-DataTable__virtualRowTable", ue = "haze-DataTable__virtualCheckCell", E = "haze-DataTable__tableBase", de = "haze-DataTable__stickyHead", fe = "haze-DataTable__sortButton", pe = "haze-DataTable__sortIcon", me = "haze-DataTable__rowHover", he = "haze-DataTable__rowSelected", ge = "haze-DataTable__clickableRow", D = "haze-DataTable__checkCell", O = "haze-DataTable__emptyCell", k = "haze-DataTable__footer";
+function A({ columns: p, data: m, sortable: h = !1, selectable: g = !1, rowSelection: _, sorting: v, pageSize: y, page: b, loading: x = !1, stickyHeader: A = !1, virtualized: j, getRowId: M, onRowClick: N, empty: P, className: F, ...I }) {
+	let [L, _e] = f(v, []), [ve, ye] = f(_, {}), [R, be, xe] = f(b, 1), z = j === !0 || typeof j == "object", B = typeof j == "object" ? j.rowHeight : ie, Se = typeof j == "object" ? j.overscan : void 0, V = y ?? Math.max(m.length, 1), Ce = u(() => p.map((e) => w(e, h)), [p, h]), H = S({
+		features: C,
+		columns: Ce,
+		data: m,
+		getRowId: M,
+		state: {
+			sorting: L,
+			rowSelection: ve,
+			pagination: {
+				pageIndex: R - 1,
+				pageSize: V
+			}
+		},
+		onSortingChange: _e,
+		onRowSelectionChange: ye,
+		onPaginationChange: (e) => {
+			let t = typeof e == "function" ? e({
+				pageIndex: R - 1,
+				pageSize: V
+			}) : e;
+			be(Math.max(1, t.pageIndex + 1));
+		}
+	}), U = d(null), we = H.getIsSomeRowsSelected() && !H.getIsAllRowsSelected();
+	l(() => {
+		let e = U.current?.querySelector("input");
+		e && (e.indeterminate = we);
+	});
+	let W = d(null), [Te, Ee] = re(0);
+	l(() => {
+		if (!z) return;
+		let e = W.current, t = e?.querySelector("thead");
+		if (!e || !t) return;
+		let n = () => {
+			let n = Math.floor(e.getBoundingClientRect().height), r = Math.floor(t.getBoundingClientRect().height);
+			Ee(Math.max(B, n - r));
+		};
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(e), r.observe(t), () => r.disconnect();
+	}, [z, B]);
+	let G = H.getHeaderGroups(), K = H.getLeafHeaders(), De = K.length + +!!g, q = H.getRowModel().rows, J = N ? (e, t) => {
+		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || N(e, t);
+	} : void 0, Y = z ? ue : D, X = /* @__PURE__ */ s(ee, {
+		className: A ? de : void 0,
+		children: G.map((n, r) => /* @__PURE__ */ c("tr", { children: [g && r === 0 && /* @__PURE__ */ s(a, {
+			as: "th",
+			rowSpan: G.length > 1 ? G.length : void 0,
+			className: e([Y]),
+			children: /* @__PURE__ */ s("span", {
+				ref: U,
+				children: /* @__PURE__ */ s(t, {
+					checked: H.getIsAllRowsSelected(),
+					onChange: (e) => H.toggleAllRowsSelected(e),
+					"aria-label": "Select all rows"
+				})
+			})
+		}), n.headers.map((t) => {
+			if (t.rowSpan === 0) return null;
+			if (t.isPlaceholder) return /* @__PURE__ */ s(a, {
+				as: "th",
+				children: null
+			}, t.placeholderId ?? t.id);
+			let n = t.column.getIsSorted();
+			return /* @__PURE__ */ s(a, {
+				as: "th",
+				colSpan: t.colSpan > 1 ? t.colSpan : void 0,
+				rowSpan: t.rowSpan > 1 ? t.rowSpan : void 0,
+				"aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : void 0,
+				children: t.column.getCanSort() ? /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: t.column.getToggleSortingHandler(),
+					className: e([fe]),
+					children: [/* @__PURE__ */ s(H.FlexRender, { header: t }), /* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: e([pe]),
+						children: n === "asc" ? "↑" : n === "desc" ? "↓" : "↕"
+					})]
+				}) : /* @__PURE__ */ s(H.FlexRender, { header: t })
+			}, t.id);
+		})] }, n.id))
+	}), Z = (n) => /* @__PURE__ */ c("tr", {
+		onClick: J ? (e) => J(n.original, e) : void 0,
+		className: e([
+			me,
+			n.getIsSelected() && he,
+			N && ge
+		]),
+		children: [g && /* @__PURE__ */ s(a, {
+			className: e([Y]),
+			children: /* @__PURE__ */ s(t, {
+				checked: n.getIsSelected(),
+				onChange: (e) => n.toggleSelected(e),
+				"aria-label": `Select row ${n.id}`
+			})
+		}), n.getAllCells().map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(H.FlexRender, { cell: e }) }, e.id))]
+	}, n.id), Oe = (t) => /* @__PURE__ */ c("tr", { children: [g && /* @__PURE__ */ s(a, {
+		className: e([Y]),
+		children: /* @__PURE__ */ s(n, {})
+	}), K.map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(n, {}) }, e.id))] }, `skeleton-${t}`), Q = Array.from({ length: y ?? 5 }, (e, t) => Oe(t)), $ = /* @__PURE__ */ s("tr", { children: s(a, {
+		colSpan: De,
+		className: e([O]),
+		children: P ?? /* @__PURE__ */ s(te, {})
+	}) });
+	return /* @__PURE__ */ c("div", {
+		className: e([ae, F]),
+		children: [z ? /* @__PURE__ */ c("div", {
+			ref: W,
+			className: e([ce]),
+			children: [/* @__PURE__ */ s("table", {
+				...I,
+				className: e([E, T]),
+				children: X
+			}), x ? /* @__PURE__ */ s("table", {
+				className: e([E, T]),
+				children: /* @__PURE__ */ s(i, { children: Q })
+			}) : q.length > 0 ? /* @__PURE__ */ s(r, {
+				items: q,
+				height: Te,
+				itemHeight: B,
+				overscan: Se,
+				renderItem: (t) => /* @__PURE__ */ s("table", {
+					className: e([
+						E,
+						T,
+						le
+					]),
+					children: /* @__PURE__ */ s(i, { children: Z(t) })
+				})
+			}) : /* @__PURE__ */ s("table", {
+				className: e([E, T]),
+				children: /* @__PURE__ */ s(i, { children: $ })
+			})]
+		}) : /* @__PURE__ */ s("div", {
+			className: e([A ? se : oe]),
+			children: /* @__PURE__ */ c("table", {
+				...I,
+				className: e([E]),
+				children: [X, /* @__PURE__ */ s(i, { children: x ? Q : /* @__PURE__ */ c(ne, { children: [q.map(Z), q.length === 0 && $] }) })]
+			})
+		}), y !== void 0 && /* @__PURE__ */ s("div", {
+			className: e([k]),
+			children: /* @__PURE__ */ s(o, {
+				page: xe,
+				total: m.length,
+				pageSize: y,
+				size: "sm"
+			})
+		})]
+	});
+}
+//#endregion
+export { A as default };

package/dist/components/DataTable/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./DataTable.js";
+export { e as DataTable };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./DateRangePickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -1,33 +1,36 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                              */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/DateRangePicker/DateRangePickerCore.tsx
-var r = "haze-DateRangePickerCore__container", i = "haze-DateRangePickerCore__input", a = "haze-DateRangePickerCore__sep";
-function o({ startDate: o, endDate: s, onStartChange: c, onEndChange: l, separator: u = "–", className: d }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, d]),
+var i = "haze-DateRangePickerCore__container", a = "haze-DateRangePickerCore__input", o = "haze-DateRangePickerCore__sep";
+function s({ startDate: s, endDate: c, onStartChange: l, onEndChange: u, separator: d = "–", className: f }) {
+	let p = t("dateRangePicker");
+	return /* @__PURE__ */ r("div", {
+		className: e([i, f]),
 		children: [
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ n("input", {
 				type: "date",
-				"aria-label": "Start date",
-				value: o,
-				onChange: (e) => c(e.target.value),
-				className: e([i])
+				"aria-label": p.startDate,
+				value: s,
+				onChange: (e) => l(e.target.value),
+				className: e([a])
 			}),
-			/* @__PURE__ */ t("span", {
-				className: e([a]),
-				children: u
+			/* @__PURE__ */ n("span", {
+				className: e([o]),
+				children: d
 			}),
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ n("input", {
 				type: "date",
-				"aria-label": "End date",
-				value: s,
-				onChange: (e) => l(e.target.value),
-				className: e([i])
+				"aria-label": p.endDate,
+				value: c,
+				onChange: (e) => u(e.target.value),
+				className: e([a])
 			})
 		]
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };

package/dist/components/DateRangePicker/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./DateRangePickerCore.js";
 import t from "./DateRangePicker.js";
 export { t as DateRangePicker, e as DateRangePickerCore };