haze-ui 1.26.0 → 1.27.0

package/dist/components/DataTable/features.js

@@ -0,0 +1,25 @@
+"use client";
+import { columnFilteringFeature as e, columnResizingFeature as t, columnSizingFeature as n, columnVisibilityFeature as r, createExpandedRowModel as i, createFilteredRowModel as a, createPaginatedRowModel as o, createSortedRowModel as s, filterFn_includesString as c, metaHelper as l, rowExpandingFeature as u, rowPaginationFeature as d, rowSelectionFeature as f, rowSortingFeature as p, sortFn_alphanumeric as m, sortFn_text as h, tableFeatures as g } from "@tanstack/react-table";
+//#region src/lib/components/DataTable/features.ts
+var _ = g({
+	rowPaginationFeature: d,
+	paginatedRowModel: o(),
+	rowSelectionFeature: f,
+	rowSortingFeature: p,
+	sortedRowModel: s(),
+	sortFns: {
+		alphanumeric: m,
+		text: h
+	},
+	rowExpandingFeature: u,
+	expandedRowModel: i(),
+	columnVisibilityFeature: r,
+	columnFilteringFeature: e,
+	filteredRowModel: a(),
+	filterFns: { includesString: c },
+	columnSizingFeature: n,
+	columnResizingFeature: t,
+	columnMeta: l()
+});
+//#endregion
+export { _ as dataTableFeatures };

package/dist/components/DataTable/index.js

@@ -1,3 +1,4 @@
 "use client";
 import e from "./DataTable.js";
-export { e as DataTable };
+import { dataTableAvg as t, dataTableCount as n, dataTableSum as r } from "./summary.js";
+export { e as DataTable, t as dataTableAvg, n as dataTableCount, r as dataTableSum };

package/dist/components/DataTable/summary.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/lib/components/DataTable/summary.ts
+function e(e, t) {
+	return e.map((e) => e.getValue(t)).filter((e) => typeof e == "number");
+}
+function t(t, n) {
+	return e(t, n).reduce((e, t) => e + t, 0);
+}
+function n(n, r) {
+	let i = e(n, r);
+	if (i.length !== 0) return t(n, r) / i.length;
+}
+function r(e) {
+	return e.length;
+}
+//#endregion
+export { n as dataTableAvg, r as dataTableCount, t as dataTableSum };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -3,19 +3,22 @@ import e from "./DateRangePickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/DateRangePicker/DateRangePicker.tsx
-function r({ startDate: r, endDate: i, onStartChange: a, onEndChange: o, separator: s, className: c }) {
-	let [l, u] = n(r, ""), [d, f] = n(i, "");
+function r({ startDate: r, endDate: i, onStartChange: a, onEndChange: o, separator: s, months: c, disabledDate: l, presets: u, className: d }) {
+	let [f, p] = n(r, ""), [m, h] = n(i, "");
 	return /* @__PURE__ */ t(e, {
-		startDate: l,
-		endDate: d,
+		startDate: f,
+		endDate: m,
 		onStartChange: (e) => {
-			u(e), a?.(e);
+			p(e), a?.(e);
 		},
 		onEndChange: (e) => {
-			f(e), o?.(e);
+			h(e), o?.(e);
 		},
 		separator: s,
-		className: c
+		months: c,
+		disabledDate: l,
+		presets: u,
+		className: d
 	});
 }
 //#endregion

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -2,35 +2,67 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import n from "../Calendar/Calendar.js";
 /* empty css                              */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/DateRangePicker/DateRangePickerCore.tsx
-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__ */ n("input", {
-				type: "date",
-				"aria-label": p.startDate,
-				value: s,
-				onChange: (e) => l(e.target.value),
-				className: e([a])
-			}),
-			/* @__PURE__ */ n("span", {
-				className: e([o]),
-				children: d
-			}),
-			/* @__PURE__ */ n("input", {
-				type: "date",
-				"aria-label": p.endDate,
-				value: c,
-				onChange: (e) => u(e.target.value),
-				className: e([a])
-			})
-		]
+var o = "haze-DateRangePickerCore__container", s = "haze-DateRangePickerCore__stackedContainer", c = "haze-DateRangePickerCore__inputsRow", l = "haze-DateRangePickerCore__panel", u = "haze-DateRangePickerCore__input", d = "haze-DateRangePickerCore__sep", f = "haze-DateRangePickerCore__presetList", p = "haze-DateRangePickerCore__presetRow";
+function m({ startDate: m, endDate: h, onStartChange: g, onEndChange: _, separator: v = "–", months: y = 1, disabledDate: b, presets: x, className: S }) {
+	let C = t("dateRangePicker"), w = (e) => {
+		!m || h ? (g(e), _("")) : e < m ? g(e) : _(e);
+	}, T = x !== void 0 && x.length > 0, E = /* @__PURE__ */ a(r, { children: [
+		/* @__PURE__ */ i("input", {
+			type: "date",
+			"aria-label": C.startDate,
+			value: m,
+			onChange: (e) => g(e.target.value),
+			className: e([u])
+		}),
+		/* @__PURE__ */ i("span", {
+			className: e([d]),
+			children: v
+		}),
+		/* @__PURE__ */ i("input", {
+			type: "date",
+			"aria-label": C.endDate,
+			value: h,
+			onChange: (e) => _(e.target.value),
+			className: e([u])
+		})
+	] });
+	return y !== 2 && !T ? /* @__PURE__ */ i("div", {
+		className: e([o, S]),
+		children: E
+	}) : /* @__PURE__ */ a("div", {
+		className: e([
+			o,
+			s,
+			S
+		]),
+		children: [/* @__PURE__ */ i("div", {
+			className: e([c]),
+			children: E
+		}), /* @__PURE__ */ a("div", {
+			className: e([l]),
+			children: [T && /* @__PURE__ */ i("div", {
+				className: e([f]),
+				children: x.map((t) => /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: () => {
+						g(t.range[0]), _(t.range[1]);
+					},
+					className: e([p]),
+					children: t.label
+				}, `${t.label}:${t.range.join("~")}`))
+			}), y === 2 && /* @__PURE__ */ i(n, {
+				months: 2,
+				rangeStart: m,
+				rangeEnd: h,
+				disabledDate: b,
+				onSelect: w
+			})]
+		})]
 	});
 }
 //#endregion
-export { s as default };
+export { m as default };

package/dist/components/Datepicker/Datepicker.js

@@ -3,19 +3,23 @@ import e from "./DatepickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Datepicker/Datepicker.tsx
-function r({ value: r, open: i, min: a, max: o, locale: s, weekStartsOn: c, placeholder: l, className: u }) {
-	let [d, f] = n(r, ""), [p, m] = n(i, !1);
+function r({ value: r, open: i, picker: a, min: o, max: s, disabledDate: c, presets: l, locale: u, weekStartsOn: d, placeholder: f, className: p, ref: m }) {
+	let [h, g] = n(r, ""), [_, v] = n(i, !1);
 	return /* @__PURE__ */ t(e, {
-		value: d,
-		onChange: f,
-		open: p,
-		onOpenChange: m,
-		min: a,
-		max: o,
-		locale: s,
-		weekStartsOn: c,
-		placeholder: l,
-		className: u
+		ref: m,
+		value: h,
+		onChange: g,
+		open: _,
+		onOpenChange: v,
+		picker: a,
+		min: o,
+		max: s,
+		disabledDate: c,
+		presets: l,
+		locale: u,
+		weekStartsOn: d,
+		placeholder: f,
+		className: p
 	});
 }
 //#endregion

package/dist/components/Datepicker/DatepickerCore.js

@@ -1,54 +1,67 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import r from "../Calendar/Calendar.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { FloatingPanel as n, useFloating as r } from "../../utils/floating.js";
+import i from "../Calendar/Calendar.js";
 /* empty css                         */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useId as s, useRef as c } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useId as c, useRef as l } from "react";
 //#region src/lib/components/Datepicker/DatepickerCore.tsx
-var l = "haze-DatepickerCore__wrapper", u = "haze-DatepickerCore__input", d = "haze-DatepickerCore__dropdown";
-function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, locale: v, weekStartsOn: y, placeholder: b = "Select date", className: x }) {
-	let S = c(null), C = c(null), w = s(), T = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), E = n({
-		open: m,
-		setOpen: T,
-		triggerRef: S,
-		panelRef: C,
+var u = "haze-DatepickerCore__wrapper", d = "haze-DatepickerCore__input", f = "haze-DatepickerCore__dropdown", p = "haze-DatepickerCore__presetList", m = "haze-DatepickerCore__presetRow";
+function h({ value: h, onChange: g, open: _, onOpenChange: v, picker: y, min: b, max: x, disabledDate: S, presets: C, locale: w, weekStartsOn: T, placeholder: E = "Select date", className: D, ref: O }) {
+	let k = l(null), A = s((e) => t(k, O)(e), [k, O]), j = l(null), M = c(), N = s((e) => v(typeof e == "function" ? e(_) : e), [v, _]), P = r({
+		open: _,
+		setOpen: N,
+		triggerRef: k,
+		panelRef: j,
 		animated: !0
 	});
-	return /* @__PURE__ */ a("div", {
-		className: e([l, x]),
-		children: [/* @__PURE__ */ i("input", {
-			ref: S,
+	return /* @__PURE__ */ o("div", {
+		className: e([u, D]),
+		children: [/* @__PURE__ */ a("input", {
+			ref: A,
 			readOnly: !0,
-			style: E.triggerStyle,
-			className: u,
-			value: f,
-			placeholder: b,
+			style: P.triggerStyle,
+			className: d,
+			value: h,
+			placeholder: E,
 			role: "combobox",
 			"aria-haspopup": "dialog",
-			"aria-expanded": m,
-			"aria-controls": w,
-			onPointerDown: E.onTriggerPointerDown,
-			onClick: E.onTriggerClick
-		}), /* @__PURE__ */ i(t, {
-			ref: C,
-			behavior: E,
+			"aria-expanded": _,
+			"aria-controls": M,
+			onPointerDown: P.onTriggerPointerDown,
+			onClick: P.onTriggerClick
+		}), /* @__PURE__ */ o(n, {
+			ref: j,
+			behavior: P,
 			placement: "bottom",
-			visualClass: d,
-			id: w,
-			children: /* @__PURE__ */ i(r, {
-				value: f,
-				min: g,
-				max: _,
-				locale: v,
-				weekStartsOn: y,
+			visualClass: f,
+			id: M,
+			children: [C && C.length > 0 && /* @__PURE__ */ a("div", {
+				className: e([p]),
+				children: C.map((t) => /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: () => {
+						g(t.value), v(!1);
+					},
+					className: e([m]),
+					children: t.label
+				}, `${t.label}:${t.value}`))
+			}), /* @__PURE__ */ a(i, {
+				picker: y,
+				value: h,
+				min: b,
+				max: x,
+				disabledDate: S,
+				locale: w,
+				weekStartsOn: T,
 				onSelect: (e) => {
-					p(e), h(!1);
+					g(e), v(!1);
 				}
-			})
+			})]
 		})]
 	});
 }
 //#endregion
-export { f as default };
+export { h as default };

package/dist/components/Dialog/Dialog.js

@@ -1,52 +1,76 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { whenExitSettles as n } from "../../utils/presence.js";
+import { whenExitSettles as t } from "../../utils/presence.js";
+import { useFocusScope as n } from "../../utils/focus-scope.js";
+import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
 /* empty css                 */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o, useId as s, useRef as c } from "react";
-import { useControl as l } from "react-use-control";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useId as c, useImperativeHandle as l, useRef as u } from "react";
+import { useControl as d } from "react-use-control";
 //#region src/lib/components/Dialog/Dialog.tsx
-var u = "haze-Dialog__overlay", d = "haze-Dialog__titleText";
-function f({ open: f, onClose: p, title: m, className: h, children: g }) {
-	let [_, v] = l(f, !1), y = c(null), b = t({
-		enabled: _,
+var f = "haze-Dialog__overlay", p = "haze-Dialog__titleText";
+function m({ open: m, onClose: h, title: g, viewTransition: _ = !1, classNames: v, className: y, children: b, ref: x }) {
+	let [S, C] = d(m, !1), w = r(_, C), T = u(null);
+	s(() => {
+		if (!S) return;
+		let e = document.activeElement;
+		T.current = e instanceof HTMLElement ? e : null;
+	}, [S]);
+	let E = u(null), D = n({
+		enabled: S,
 		trapped: !1
-	}), x = `haze-dialog-title-${s()}`, S = a((e) => {
-		y.current = e, b(e);
-	}, [b]);
-	return o(() => {
-		let e = y.current;
+	}), O = `haze-dialog-title-${c()}`;
+	l(x, () => ({
+		open: () => {
+			w(!0);
+		},
+		close: () => {
+			w(!1);
+		},
+		focusTrigger: () => {
+			let e = T.current;
+			e?.isConnected && e.focus();
+		}
+	}), [w]);
+	let k = o((e) => {
+		E.current = e, D(e);
+	}, [D]);
+	return s(() => {
+		let e = E.current;
 		if (e) {
-			if (_ && !e.open) e.showModal();
-			else if (!_ && e.open) {
-				let t = n(e), r = () => {
+			if (S && !e.open) e.showModal();
+			else if (!S && e.open) {
+				let n = t(e), r = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				t ? t.then(r) : r();
+				n ? n.then(r) : r();
 			}
 		}
-	}, [_]), /* @__PURE__ */ i("dialog", {
-		ref: S,
-		"data-state": _ ? "open" : "closed",
-		"aria-labelledby": m === void 0 ? void 0 : x,
+	}, [S]), /* @__PURE__ */ a("dialog", {
+		ref: k,
+		"data-state": S ? "open" : "closed",
+		"aria-labelledby": g === void 0 ? void 0 : O,
 		onClose: () => {
-			v(!1), p?.();
+			C(!1), h?.();
 		},
 		onCancel: (e) => {
-			e.preventDefault(), v(!1);
+			e.preventDefault(), w(!1);
 		},
 		onClick: (e) => {
-			e.target === y.current && v(!1);
+			e.target === E.current && w(!1);
 		},
-		className: e([u, h]),
-		children: [m !== void 0 && /* @__PURE__ */ r("h2", {
-			id: x,
-			className: e([d]),
-			children: m
-		}), g]
+		className: e([
+			f,
+			y,
+			v?.root
+		]),
+		children: [g !== void 0 && /* @__PURE__ */ i("h2", {
+			id: O,
+			className: e([p, v?.header]),
+			children: g
+		}), b]
 	});
 }
 //#endregion
-export { f as default };
+export { m as default };

package/dist/components/Divider/Divider.js

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

package/dist/components/Divider/index.js

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

package/dist/components/Drawer/Drawer.js

@@ -1,56 +1,76 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { whenExitSettles as n } from "../../utils/presence.js";
+import { whenExitSettles as t } from "../../utils/presence.js";
+import { useFocusScope as n } from "../../utils/focus-scope.js";
+import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
 /* empty css                 */
-import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useEffect as a, useRef as o } from "react";
-import { useControl as s } from "react-use-control";
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useImperativeHandle as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Drawer/Drawer.tsx
-var c = "haze-Drawer__overlay", l = {
+var u = "haze-Drawer__overlay", d = {
 	left: "haze-Drawer__left",
 	right: "haze-Drawer__right",
 	top: "haze-Drawer__top",
 	bottom: "haze-Drawer__bottom"
 };
-function u({ open: u, placement: d = "right", onClose: f, className: p, children: m }) {
-	let [h, g] = s(u, !1), _ = o(null), v = t({
-		enabled: h,
+function f({ open: f, placement: p = "right", onClose: m, viewTransition: h = !1, className: g, children: _, ref: v }) {
+	let [y, b] = l(f, !1), x = r(h, b), S = c(null);
+	o(() => {
+		if (!y) return;
+		let e = document.activeElement;
+		S.current = e instanceof HTMLElement ? e : null;
+	}, [y]);
+	let C = c(null), w = n({
+		enabled: y,
 		trapped: !1
-	}), y = i((e) => {
-		_.current = e, v(e);
-	}, [v]);
-	return a(() => {
-		let e = _.current;
+	});
+	s(v, () => ({
+		open: () => {
+			x(!0);
+		},
+		close: () => {
+			x(!1);
+		},
+		focusTrigger: () => {
+			let e = S.current;
+			e?.isConnected && e.focus();
+		}
+	}), [x]);
+	let T = a((e) => {
+		C.current = e, w(e);
+	}, [w]);
+	return o(() => {
+		let e = C.current;
 		if (e) {
-			if (h && !e.open) e.showModal();
-			else if (!h && e.open) {
-				let t = n(e), r = () => {
+			if (y && !e.open) e.showModal();
+			else if (!y && e.open) {
+				let n = t(e), r = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				t ? t.then(r) : r();
+				n ? n.then(r) : r();
 			}
 		}
-	}, [h]), /* @__PURE__ */ r("dialog", {
-		ref: y,
-		"data-state": h ? "open" : "closed",
+	}, [y]), /* @__PURE__ */ i("dialog", {
+		ref: T,
+		"data-state": y ? "open" : "closed",
 		onClose: () => {
-			g(!1), f?.();
+			b(!1), m?.();
 		},
 		onCancel: (e) => {
-			e.preventDefault(), g(!1);
+			e.preventDefault(), x(!1);
 		},
 		onClick: (e) => {
-			e.target === _.current && g(!1);
+			e.target === C.current && x(!1);
 		},
 		className: e([
-			c,
-			l[d],
-			p
+			u,
+			d[p],
+			g
 		]),
-		children: m
+		children: _
 	});
 }
 //#endregion
-export { u as default };
+export { f as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -5,41 +5,53 @@ import { useFloating as t } from "../../utils/floating.js";
 import { DropdownMenuProvider as n } from "./DropdownMenuContext.js";
 /* empty css                       */
 import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useId as a, useMemo as o, useRef as s } from "react";
-import { useControl as c } from "react-use-control";
+import { useCallback as i, useId as a, useImperativeHandle as o, useMemo as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/DropdownMenu/DropdownMenu.tsx
-var l = "haze-DropdownMenu__wrapper";
-function u({ open: u, onOpenChange: d, collisionPadding: f, children: p, className: m }) {
-	let [h, g] = c(u, !1), _ = s(null), v = s(null), y = a(), b = s(null), x = i((e) => {
-		let t = typeof e == "function" ? e(h) : e;
-		g(t), d?.(t);
+var u = "haze-DropdownMenu__wrapper";
+function d({ open: d, onOpenChange: f, collisionPadding: p, children: m, className: h, ref: g }) {
+	let [_, v] = l(d, !1), y = c(null), b = c(null), x = a(), S = c(null), C = i((e) => {
+		let t = typeof e == "function" ? e(_) : e;
+		v(t), f?.(t);
 	}, [
-		h,
-		g,
-		d
-	]), S = o(() => f === void 0 ? void 0 : { collisionPadding: f }, [f]), C = t({
-		open: h,
-		setOpen: x,
-		triggerRef: _,
-		panelRef: v,
+		_,
+		v,
+		f
+	]);
+	o(g, () => ({
+		open: () => {
+			C(!0);
+		},
+		close: () => {
+			C(!1);
+		},
+		focusTrigger: () => {
+			y.current?.focus();
+		}
+	}), [C]);
+	let w = s(() => p === void 0 ? void 0 : { collisionPadding: p }, [p]), T = t({
+		open: _,
+		setOpen: C,
+		triggerRef: y,
+		panelRef: b,
 		animated: !0,
-		collision: S
+		collision: w
 	});
 	return /* @__PURE__ */ r(n, {
 		value: {
-			open: h,
-			setOpen: x,
-			triggerRef: _,
-			contentRef: v,
-			contentId: y,
-			focusRequestRef: b,
-			floating: C
+			open: _,
+			setOpen: C,
+			triggerRef: y,
+			contentRef: b,
+			contentId: x,
+			focusRequestRef: S,
+			floating: T
 		},
 		children: r("div", {
-			className: e([l, m]),
-			children: p
+			className: e([u, h]),
+			children: m
 		})
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/DropdownMenu/DropdownMenuSub.js

@@ -0,0 +1,23 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { SubmenuProvider as t, useSubmenu as n } from "../../utils/submenu.js";
+/* empty css                          */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/lib/components/DropdownMenu/DropdownMenuSub.tsx
+var i = "haze-DropdownMenuSub__wrapper";
+function a({ open: a, onOpenChange: o, className: s, children: c }) {
+	let l = n({
+		open: a,
+		onOpenChange: o
+	});
+	return /* @__PURE__ */ r(t, {
+		value: l,
+		children: r("div", {
+			className: e([i, s]),
+			children: c
+		})
+	});
+}
+//#endregion
+export { a as default };