haze-ui 1.24.1 → 1.26.0

package/dist/components/BackToTop/BackToTop.js

@@ -1,29 +1,31 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as n, useEffect as r, useState as i } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useState as a } from "react";
 //#region src/lib/components/BackToTop/BackToTop.tsx
-var a = "haze-BackToTop__button", o = "haze-BackToTop__hidden";
-function s({ threshold: s = 300, children: c = "↑", className: l }) {
-	let [u, d] = i(!1), f = n(() => {
-		d(window.scrollY > s);
-	}, [s]);
-	return r(() => (window.addEventListener("scroll", f, { passive: !0 }), () => window.removeEventListener("scroll", f)), [f]), /* @__PURE__ */ t("button", {
+var o = "haze-BackToTop__button", s = "haze-BackToTop__hidden";
+function c({ threshold: c = 300, children: l = "↑", className: u }) {
+	let [d, f] = a(!1), p = t("backToTop"), m = r(() => {
+		f(window.scrollY > c);
+	}, [c]);
+	return i(() => (window.addEventListener("scroll", m, { passive: !0 }), () => window.removeEventListener("scroll", m)), [m]), /* @__PURE__ */ n("button", {
 		onClick: () => {
 			window.scrollTo({
 				top: 0,
 				behavior: "smooth"
 			});
 		},
-		"aria-label": "Back to top",
+		"aria-label": p.label,
 		className: e([
-			a,
-			!u && o,
-			l
+			o,
+			!d && s,
+			u
 		]),
-		children: c
+		children: l
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/BackToTop/index.js

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

package/dist/components/Badge/Badge.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/Badge/index.js

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

package/dist/components/Banner/Banner.js

@@ -1,37 +1,39 @@
 
+"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 { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Banner/Banner.tsx
-var i = "haze-Banner__banner", a = {
+var a = "haze-Banner__banner", o = {
 	info: "haze-Banner__info",
 	success: "haze-Banner__success",
 	warning: "haze-Banner__warning",
 	danger: "haze-Banner__danger"
-}, o = "haze-Banner__closeBtn", s = "haze-Banner__content";
-function c({ visible: c, onClose: l, variant: u = "info", children: d, className: f }) {
-	let [p, m] = r(c, !0);
-	return p ? /* @__PURE__ */ n("div", {
+}, s = "haze-Banner__closeBtn", c = "haze-Banner__content";
+function l({ visible: l, onClose: u, variant: d = "info", children: f, className: p }) {
+	let [m, h] = i(l, !0), g = t("banner");
+	return m ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		className: e([
-			i,
-			a[u],
-			f
+			a,
+			o[d],
+			p
 		]),
-		children: [/* @__PURE__ */ t("div", {
-			className: e([s]),
-			children: d
-		}), l && /* @__PURE__ */ t("button", {
+		children: [/* @__PURE__ */ n("div", {
+			className: e([c]),
+			children: f
+		}), u && /* @__PURE__ */ n("button", {
 			type: "button",
 			onClick: () => {
-				m(!1), l?.();
+				h(!1), u?.();
 			},
-			"aria-label": "Close",
-			className: e([o]),
+			"aria-label": g.close,
+			className: e([s]),
 			children: "x"
 		})]
 	}) : null;
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/Banner/index.js

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

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,4 +1,5 @@
 
+"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";

package/dist/components/BottomSheet/index.js

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

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,27 +1,29 @@
 
+"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 { Children as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Children as i } from "react";
 //#region src/lib/components/Breadcrumb/Breadcrumb.tsx
-var i = "haze-Breadcrumb__nav", a = "haze-Breadcrumb__list", o = "haze-Breadcrumb__sep";
-function s({ separator: s = "/", className: c, children: l }) {
-	let u = r.toArray(l);
-	return /* @__PURE__ */ t("nav", {
-		"aria-label": "Breadcrumb",
-		className: e([i, c]),
-		children: t("ol", {
-			className: a,
-			children: u.map((e, r) => /* @__PURE__ */ n("li", {
-				"aria-current": r === u.length - 1 ? "page" : void 0,
-				children: [e, r < u.length - 1 && /* @__PURE__ */ t("span", {
-					className: o,
+var a = "haze-Breadcrumb__nav", o = "haze-Breadcrumb__list", s = "haze-Breadcrumb__sep";
+function c({ separator: c = "/", className: l, children: u }) {
+	let d = t("breadcrumb"), f = i.toArray(u);
+	return /* @__PURE__ */ n("nav", {
+		"aria-label": d.label,
+		className: e([a, l]),
+		children: n("ol", {
+			className: o,
+			children: f.map((e, t) => /* @__PURE__ */ r("li", {
+				"aria-current": t === f.length - 1 ? "page" : void 0,
+				children: [e, t < f.length - 1 && /* @__PURE__ */ n("span", {
+					className: s,
 					"aria-hidden": "true",
-					children: s
+					children: c
 				})]
-			}, r))
+			}, t))
 		})
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/Breadcrumb/BreadcrumbItem.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/Breadcrumb/index.js

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

package/dist/components/Button/Button.js

@@ -1,3 +1,4 @@
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
 import { jsx as a } from "react/jsx-runtime";

package/dist/components/Button/ButtonLink.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
 /* empty css                     */

package/dist/components/Button/index.js

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

package/dist/components/Button/styles.js

@@ -1,4 +1,5 @@
 
+"use client";
 /* empty css                 */
 //#region src/lib/components/Button/styles.ts
 var e = "haze-styles__base", t = {

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,124 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { addMonths as n, buildMonthCells as r, formatDate as i, parseCivilDate as a } from "./date.js";
+/* empty css                   */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { useControl as l } from "react-use-control";
+//#region src/lib/components/Calendar/Calendar.tsx
+var u = "haze-Calendar__calendarWrapper", d = "haze-Calendar__header", f = "haze-Calendar__headerBtn", p = "haze-Calendar__headerTitle", m = "haze-Calendar__headerTrailing", h = "haze-Calendar__grid", g = "haze-Calendar__rowContents", _ = "haze-Calendar__cellContents", v = "haze-Calendar__weekday", y = "haze-Calendar__dayBtn", b = "haze-Calendar__daySelected", x = "haze-Calendar__dayOutside", S = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function C(e, t) {
+	if (t !== void 0) return t;
+	if (e === void 0) return 0;
+	try {
+		let t = new Intl.Locale(e).getWeekInfo?.().firstDay;
+		return t === void 0 || t === 7 ? 0 : t;
+	} catch {
+		return 0;
+	}
+}
+function w(e, t) {
+	if (e === void 0) return Array.from({ length: 7 }, (e, n) => S[(t + n) % 7]);
+	let n = new Intl.DateTimeFormat(e, { weekday: "short" }), r = Array.from({ length: 7 }, (e, t) => n.format(new Date(2024, 0, 7 + t)));
+	return Array.from({ length: 7 }, (e, n) => r[(t + n) % 7]);
+}
+function T({ value: S, min: T, max: E, locale: D, weekStartsOn: O, onSelect: k, className: A, ...j }) {
+	let [M, N] = l(S, ""), P = t("calendar"), F = M && a(M) || /* @__PURE__ */ new Date(), [I, L] = c(F.getFullYear()), [R, z] = c(F.getMonth()), B = C(D, O), V = w(D, B), H = r(I, R, B), U = () => {
+		let e = n(I, R, -1);
+		L(e.year), z(e.month);
+	}, W = () => {
+		let e = n(I, R, 1);
+		L(e.year), z(e.month);
+	}, G = () => {
+		let e = /* @__PURE__ */ new Date();
+		L(e.getFullYear()), z(e.getMonth());
+	}, K = (e) => !!(T && e < T || E && e > E), q = new Intl.DateTimeFormat(D ?? "default", {
+		month: "long",
+		year: "numeric"
+	}).format(new Date(I, R)), J = [];
+	for (let e = 0; e < H.length; e += 7) J.push(H.slice(e, e + 7));
+	return /* @__PURE__ */ s("div", {
+		...j,
+		className: e([u, A]),
+		children: [/* @__PURE__ */ s("div", {
+			className: e([d]),
+			children: [
+				/* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: U,
+					"aria-label": P.previousMonth,
+					className: e([f]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ o("span", {
+					className: e([p]),
+					children: q
+				}),
+				/* @__PURE__ */ s("span", {
+					className: e([m]),
+					children: [/* @__PURE__ */ o("button", {
+						type: "button",
+						onClick: G,
+						className: e([f]),
+						children: P.today
+					}), /* @__PURE__ */ o("button", {
+						type: "button",
+						onClick: W,
+						"aria-label": P.nextMonth,
+						className: e([f]),
+						children: "›"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ s("div", {
+			role: "grid",
+			"aria-label": q,
+			className: e([h]),
+			children: [/* @__PURE__ */ o("div", {
+				role: "row",
+				className: e([g]),
+				children: V.map((t, n) => /* @__PURE__ */ o("span", {
+					role: "columnheader",
+					className: e([v]),
+					children: t
+				}, n))
+			}), J.map((t, n) => /* @__PURE__ */ o("div", {
+				role: "row",
+				className: e([g]),
+				children: t.map((t) => {
+					let n = i(t.year, t.month, t.day);
+					return /* @__PURE__ */ o("span", {
+						role: "gridcell",
+						"aria-selected": n === M,
+						className: e([_]),
+						children: /* @__PURE__ */ o("button", {
+							type: "button",
+							disabled: K(n),
+							onClick: () => {
+								N(n), k?.(n);
+							},
+							className: e([
+								y,
+								n === M && b,
+								t.outside && x
+							]),
+							children: t.day
+						})
+					}, n);
+				})
+			}, n))]
+		})]
+	});
+}
+//#endregion
+export { T as default };

package/dist/components/Calendar/date.js

@@ -0,0 +1,54 @@
+"use client";
+//#region src/lib/components/Calendar/date.ts
+function e(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function t(e, t, n) {
+	let r = e * 12 + t + n;
+	return {
+		year: Math.floor(r / 12),
+		month: (r % 12 + 12) % 12
+	};
+}
+function n(e, t, n) {
+	return (new Date(e, t, 1).getDay() - n + 7) % 7;
+}
+function r(r, i, a) {
+	let o = [], s = e(r, i), c = n(r, i, a), l = t(r, i, -1), u = e(l.year, l.month);
+	for (let e = c - 1; e >= 0; e--) o.push({
+		day: u - e,
+		month: l.month,
+		year: l.year,
+		outside: !0
+	});
+	for (let e = 1; e <= s; e++) o.push({
+		day: e,
+		month: i,
+		year: r,
+		outside: !1
+	});
+	let d = 7 - o.length % 7;
+	if (d < 7) {
+		let e = t(r, i, 1);
+		for (let t = 1; t <= d; t++) o.push({
+			day: t,
+			month: e.month,
+			year: e.year,
+			outside: !0
+		});
+	}
+	return o;
+}
+function i(e, t, n) {
+	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+}
+function a(t) {
+	let n = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t);
+	if (!n) return null;
+	let r = Number(n[1]), i = Number(n[2]) - 1, a = Number(n[3]);
+	if (i < 0 || i > 11 || a < 1 || a > e(r, i)) return null;
+	let o = new Date(r, i, a);
+	return o.getFullYear() !== r || o.getMonth() !== i || o.getDate() !== a ? null : o;
+}
+//#endregion
+export { t as addMonths, r as buildMonthCells, i as formatDate, e as getDaysInMonth, n as getLeadingDays, a as parseCivilDate };

package/dist/components/Calendar/index.js

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

package/dist/components/Card/Card.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/Card/index.js

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

package/dist/components/Carousel/Carousel.js

@@ -1,68 +1,71 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                   */
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, useEffect as a, useRef as o } from "react";
-import { useControl as s } from "react-use-control";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Children as o, useEffect as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
-var c = "haze-Carousel__wrapper", l = "haze-Carousel__track", u = "haze-Carousel__navBtn", d = "haze-Carousel__prevBtn", f = "haze-Carousel__nextBtn", p = "haze-Carousel__indicators", m = "haze-Carousel__dot", h = "haze-Carousel__dotActive";
-function g({ value: g, autoPlay: _ = !1, interval: v = 5e3, className: y, children: b }) {
-	let [x, S] = s(g, 0), C = o(null), w = i.count(b);
-	return a(() => {
-		let e = C.current;
+var u = "haze-Carousel__wrapper", d = "haze-Carousel__track", f = "haze-Carousel__navBtn", p = "haze-Carousel__prevBtn", m = "haze-Carousel__nextBtn", h = "haze-Carousel__indicators", g = "haze-Carousel__dot", _ = "haze-Carousel__dotActive";
+function v({ value: v, autoPlay: y = !1, interval: b = 5e3, className: x, children: S }) {
+	let [C, w] = l(v, 0), T = c(null), E = o.count(S), D = n("carousel");
+	return s(() => {
+		let e = T.current;
 		if (!e) return;
-		let t = e.children[x];
+		let t = e.children[C];
 		t && t.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, [x]), a(() => {
-		if (!_ || w <= 1) return;
+	}, [C]), s(() => {
+		if (!y || E <= 1) return;
 		let e = setInterval(() => {
-			S((e) => (e + 1) % w);
-		}, v);
+			w((e) => (e + 1) % E);
+		}, b);
 		return () => clearInterval(e);
 	}, [
-		_,
-		v,
-		w,
-		S
-	]), /* @__PURE__ */ r("div", {
+		y,
+		b,
+		E,
+		w
+	]), /* @__PURE__ */ a("div", {
 		role: "region",
 		"aria-roledescription": "carousel",
-		"aria-label": "Carousel",
-		className: e([c, y]),
-		children: [/* @__PURE__ */ n("div", {
-			ref: C,
-			className: l,
-			children: b
-		}), w > 1 && /* @__PURE__ */ r(t, { children: [
-			/* @__PURE__ */ n("button", {
+		"aria-label": D.label,
+		className: e([u, x]),
+		children: [/* @__PURE__ */ i("div", {
+			ref: T,
+			className: d,
+			children: S
+		}), E > 1 && /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i("button", {
 				type: "button",
-				onClick: () => S((e) => (e - 1 + w) % w),
-				"aria-label": "Previous slide",
-				className: e([u, d]),
+				onClick: () => w((e) => (e - 1 + E) % E),
+				"aria-label": D.previousSlide,
+				className: e([f, p]),
 				children: "‹"
 			}),
-			/* @__PURE__ */ n("button", {
+			/* @__PURE__ */ i("button", {
 				type: "button",
-				onClick: () => S((e) => (e + 1) % w),
-				"aria-label": "Next slide",
-				className: e([u, f]),
+				onClick: () => w((e) => (e + 1) % E),
+				"aria-label": D.nextSlide,
+				className: e([f, m]),
 				children: "›"
 			}),
-			/* @__PURE__ */ n("div", {
-				className: p,
-				children: Array.from({ length: w }, (t, r) => /* @__PURE__ */ n("button", {
+			/* @__PURE__ */ i("div", {
+				className: h,
+				children: Array.from({ length: E }, (n, r) => /* @__PURE__ */ i("button", {
 					type: "button",
-					onClick: () => S(r),
-					"aria-label": `Go to slide ${r + 1}`,
-					className: e([m, r === x && h])
+					onClick: () => w(r),
+					"aria-label": t(D.goToSlide, { index: r + 1 }),
+					className: e([g, r === C && _])
 				}, r))
 			})
 		] })]
 	});
 }
 //#endregion
-export { g as default };
+export { v as default };

package/dist/components/Carousel/CarouselSlide.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/Carousel/index.js

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