haze-ui 1.24.1 → 1.25.0

package/dist/components/Chip/Chip.js

@@ -1,44 +1,45 @@
 
 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/Chip/Chip.tsx
-var r = "haze-Chip__base", i = {
+var i = "haze-Chip__base", a = {
 	default: "haze-Chip__default",
 	primary: "haze-Chip__primary",
 	success: "haze-Chip__success",
 	warning: "haze-Chip__warning",
 	danger: "haze-Chip__danger"
-}, a = {
+}, o = {
 	default: "haze-Chip__default",
 	primary: "haze-Chip__primary",
 	success: "haze-Chip__success",
 	warning: "haze-Chip__warning",
 	danger: "haze-Chip__danger"
-}, o = "haze-Chip__iconStyle", s = "haze-Chip__closeBtn";
-function c({ variant: c = "solid", color: l = "default", icon: u, onClose: d, className: f, children: p }) {
-	let m = c === "outline" ? a[l] : i[l];
-	return /* @__PURE__ */ n("span", {
+}, s = "haze-Chip__iconStyle", c = "haze-Chip__closeBtn";
+function l({ variant: l = "solid", color: u = "default", icon: d, onClose: f, className: p, children: m }) {
+	let h = t("chip"), g = l === "outline" ? o[u] : a[u];
+	return /* @__PURE__ */ r("span", {
 		className: e([
-			r,
-			m,
-			f
+			i,
+			g,
+			p
 		]),
 		children: [
-			u && /* @__PURE__ */ t("span", {
-				className: e([o]),
-				children: u
+			d && /* @__PURE__ */ n("span", {
+				className: e([s]),
+				children: d
 			}),
-			p,
-			d && /* @__PURE__ */ t("button", {
+			m,
+			f && /* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: d,
-				"aria-label": "Remove",
-				className: e([s]),
+				onClick: f,
+				"aria-label": h.remove,
+				className: e([c]),
 				children: "×"
 			})
 		]
 	});
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -1,38 +1,40 @@
 
 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/ColorPicker/ColorPickerCore.tsx
-var r = "haze-ColorPickerCore__container", i = "haze-ColorPickerCore__previewRow", a = "haze-ColorPickerCore__colorInput", o = "haze-ColorPickerCore__textInput", s = "haze-ColorPickerCore__presetsRow", c = "haze-ColorPickerCore__presetBtn", l = "haze-ColorPickerCore__activePreset";
-function u({ value: u, onChange: d, presets: f, className: p }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, p]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([i]),
-			children: [/* @__PURE__ */ t("input", {
+var i = "haze-ColorPickerCore__container", a = "haze-ColorPickerCore__previewRow", o = "haze-ColorPickerCore__colorInput", s = "haze-ColorPickerCore__textInput", c = "haze-ColorPickerCore__presetsRow", l = "haze-ColorPickerCore__presetBtn", u = "haze-ColorPickerCore__activePreset";
+function d({ value: d, onChange: f, presets: p, className: m }) {
+	let h = t("colorPicker");
+	return /* @__PURE__ */ r("div", {
+		className: e([i, m]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([a]),
+			children: [/* @__PURE__ */ n("input", {
 				type: "color",
-				value: u,
-				"aria-label": "Pick color",
-				onChange: (e) => d(e.target.value),
-				className: e([a])
-			}), /* @__PURE__ */ t("input", {
-				type: "text",
-				value: u,
-				"aria-label": "Hex color",
-				onChange: (e) => d(e.target.value),
+				value: d,
+				"aria-label": h.pickColor,
+				onChange: (e) => f(e.target.value),
 				className: e([o])
+			}), /* @__PURE__ */ n("input", {
+				type: "text",
+				value: d,
+				"aria-label": h.hexColor,
+				onChange: (e) => f(e.target.value),
+				className: e([s])
 			})]
-		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
-			className: e([s]),
-			children: f.map((n) => /* @__PURE__ */ t("button", {
+		}), p && p.length > 0 && /* @__PURE__ */ n("div", {
+			className: e([c]),
+			children: p.map((t) => /* @__PURE__ */ n("button", {
 				type: "button",
-				style: { background: n },
-				"aria-label": n,
-				onClick: () => d(n),
-				className: e([c, u === n && l])
-			}, n))
+				style: { background: t },
+				"aria-label": t,
+				onClick: () => f(t),
+				className: e([l, d === t && u])
+			}, t))
 		})]
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/Combobox/Combobox.js

@@ -1,63 +1,84 @@
 
 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;
+	s(() => {
+		!V || !z.shown || j < 0 || R.current?.scrollToIndex(j, "auto");
+	}, [
+		V,
+		z.shown,
+		j
+	]), D !== N && (P(D), M(-1));
+	let H = (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,
+			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),
+			onFocus: () => A(!0),
+			onClick: () => A(!0),
 			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(), M((e) => Math.min(e + 1, B.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), M((e) => Math.max(e - 1, 0))) : e.key === "Enter" && j >= 0 && B[j] ? (e.preventDefault(), H(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,
+					highlighted: t === j,
+					selected: e.value === T,
+					onSelect: H,
+					className: v,
+					children: e.label
+				})
+			}) : B.map((e, t) => /* @__PURE__ */ a(i, {
 				value: e.value,
-				highlighted: t === w,
-				selected: e.value === v,
-				onSelect: N,
+				highlighted: t === j,
+				selected: e.value === T,
+				onSelect: H,
 				children: e.label
 			}, e.value))
 		})]
 	});
 }
 //#endregion
-export { p as default };
+export { y as default };

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -2,63 +2,64 @@
 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 +68,4 @@ function g({ open: g, onClose: _, onConfirm: v, onCancel: y, title: b, children:
 	});
 }
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/components/DataTable/DataTable.js

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

package/dist/components/DataTable/index.js

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

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -1,33 +1,35 @@
 
 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/Datepicker/Datepicker.js

@@ -2,17 +2,19 @@ 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, placeholder: s, className: c }) {
-	let [l, u] = n(r, ""), [d, f] = n(i, !1);
+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);
 	return /* @__PURE__ */ t(e, {
-		value: l,
-		onChange: u,
-		open: d,
-		onOpenChange: f,
+		value: d,
+		onChange: f,
+		open: p,
+		onOpenChange: m,
 		min: a,
 		max: o,
-		placeholder: s,
-		className: c
+		locale: s,
+		weekStartsOn: c,
+		placeholder: l,
+		className: u
 	});
 }
 //#endregion