haze-ui 1.25.0 → 1.27.0

package/dist/components/Anchor/Anchor.js

@@ -0,0 +1,78 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                 */
+import { jsx as t } from "react/jsx-runtime";
+import { useEffect as n } from "react";
+import { useControl as r } from "react-use-control";
+//#region src/lib/components/Anchor/Anchor.tsx
+var i = "haze-Anchor__nav", a = "haze-Anchor__list", o = "haze-Anchor__link", s = "haze-Anchor__linkActive";
+function c({ items: c, activeId: l, onClick: u, offsetTop: d = 0, bounds: f = 5, getContainer: p, className: m, ...h }) {
+	let [g, _] = r(l, () => c[0]?.id ?? ""), v = (e) => {
+		let t = document.getElementById(e);
+		if (!t) return;
+		let n = p?.() ?? window;
+		if (n instanceof HTMLElement) {
+			n.scrollTop = t.getBoundingClientRect().top - n.getBoundingClientRect().top + n.scrollTop - d;
+			return;
+		}
+		n.scrollTo({
+			top: t.getBoundingClientRect().top + window.scrollY - d,
+			behavior: "smooth"
+		});
+	};
+	return n(() => {
+		if (typeof IntersectionObserver > "u") return;
+		let e = /* @__PURE__ */ new Set(), t = p?.() ?? window, n = new IntersectionObserver((t) => {
+			for (let n of t) n.isIntersecting ? e.add(n.target.id) : e.delete(n.target.id);
+			let n = c.find((t) => e.has(t.id));
+			n && _(n.id);
+		}, {
+			root: t instanceof HTMLElement ? t : null,
+			rootMargin: `${-d}px 0px 0px 0px`
+		});
+		for (let e of c) {
+			let t = document.getElementById(e.id);
+			t && n.observe(t);
+		}
+		return () => n.disconnect();
+	}, [
+		c,
+		d,
+		p,
+		_
+	]), n(() => {
+		if (typeof IntersectionObserver < "u") return;
+		let e = p?.() ?? window, t = e instanceof HTMLElement ? e : window, n = e instanceof HTMLElement ? e.getBoundingClientRect().top : 0, r = () => {
+			let e;
+			for (let t of c) {
+				let r = document.getElementById(t.id);
+				r && r.getBoundingClientRect().top - n <= f && (e = t.id);
+			}
+			e && _(e);
+		};
+		return t.addEventListener("scroll", r, { passive: !0 }), () => t.removeEventListener("scroll", r);
+	}, [
+		c,
+		f,
+		p,
+		_
+	]), /* @__PURE__ */ t("nav", {
+		...h,
+		className: e([i, m]),
+		children: t("ul", {
+			className: e([a]),
+			children: c.map((n) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t("a", {
+				href: `#${n.id}`,
+				"aria-current": g === n.id ? "true" : void 0,
+				onClick: (e) => {
+					e.preventDefault(), _(n.id), u?.(n.id), v(n.id);
+				},
+				className: e([o, g === n.id && s]),
+				children: n.label
+			}) }, n.id))
+		})
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/Anchor/index.js

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

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,44 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                   */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+//#region src/lib/components/AppShell/AppShell.tsx
+var i = "haze-AppShell__shell", a = "haze-AppShell__withSidebar", o = "haze-AppShell__header", s = "haze-AppShell__sidebar", c = "haze-AppShell__content", l = "haze-AppShell__footer";
+function u({ header: u, sidebar: d, footer: f, sidebarCollapsed: p, sidebarWidth: m = "calc(var(--haze-space-16) * 4)", className: h, style: g, children: _, ...v }) {
+	let [y] = r(p, !1);
+	return /* @__PURE__ */ n("div", {
+		style: {
+			"--haze-appshell-sidebar-width": m,
+			...g
+		},
+		...v,
+		className: e([
+			i,
+			d != null && a,
+			h
+		]),
+		children: [
+			u != null && /* @__PURE__ */ t("header", {
+				className: e(o),
+				children: u
+			}),
+			d != null && /* @__PURE__ */ t("aside", {
+				"data-state": y ? "collapsed" : "expanded",
+				className: e(s),
+				children: d
+			}),
+			/* @__PURE__ */ t("main", {
+				className: e(c),
+				children: _
+			}),
+			f != null && /* @__PURE__ */ t("footer", {
+				className: e(l),
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/AppShell/index.js

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

package/dist/components/ApprovalCard/ApprovalCard.js

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

package/dist/components/ApprovalCard/index.js

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

package/dist/components/AsyncSection/AsyncSection.js

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

package/dist/components/AsyncSection/index.js

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

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

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

package/dist/components/AvatarGroup/AvatarGroup.js

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

package/dist/components/AvatarGroup/index.js

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

package/dist/components/BackToTop/BackToTop.js

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

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,25 +1,14 @@
-
 import { classnames as e } from "../../utils/classnames.js";
-/* empty css                */
-import { jsx as t } from "react/jsx-runtime";
+import { base as t, sizes as n, variants as r } from "./badge-styles.js";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/Badge/Badge.tsx
-var n = "haze-Badge__base", r = {
-	default: "haze-Badge__default",
-	success: "haze-Badge__success",
-	warning: "haze-Badge__warning",
-	danger: "haze-Badge__danger",
-	info: "haze-Badge__info"
-}, i = {
-	sm: "haze-Badge__sm",
-	md: "haze-Badge__md"
-};
 function a({ variant: a = "default", size: o = "md", className: s, style: c, children: l }) {
-	return /* @__PURE__ */ t("span", {
+	return /* @__PURE__ */ i("span", {
 		style: c,
 		className: e([
-			n,
+			t,
 			r[a],
-			i[o],
+			n[o],
 			s
 		]),
 		children: l

package/dist/components/Badge/badge-styles.js

@@ -0,0 +1,15 @@
+
+/* empty css                       */
+//#region src/lib/components/Badge/badge-styles.ts
+var e = "haze-badge-styles__base", t = {
+	default: "haze-badge-styles__default",
+	success: "haze-badge-styles__success",
+	warning: "haze-badge-styles__warning",
+	danger: "haze-badge-styles__danger",
+	info: "haze-badge-styles__info"
+}, n = {
+	sm: "haze-badge-styles__sm",
+	md: "haze-badge-styles__md"
+};
+//#endregion
+export { e as base, n as sizes, t as variants };

package/dist/components/Badge/index.js

@@ -1,2 +1,3 @@
-import e from "./Badge.js";
-export { e as Badge };
+import { sizes as e, variants as t } from "./badge-styles.js";
+import n from "./Badge.js";
+export { n as Badge, e as badgeSizes, t as badgeVariants };

package/dist/components/Banner/Banner.js

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

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,40 +1,152 @@
 
+"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 { Presence 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 { useControl as a } from "react-use-control";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import { useControl as d } from "react-use-control";
 //#region src/lib/components/BottomSheet/BottomSheet.tsx
-var o = "haze-BottomSheet__overlay", s = "haze-BottomSheet__sheet", c = "haze-BottomSheet__handle";
-function l({ open: l, onClose: u, children: d, className: f, ...p }) {
-	let [m, h] = a(l, !1), g = t({
-		enabled: m,
+var f = "haze-BottomSheet__overlay", p = "haze-BottomSheet__sheet", m = "haze-BottomSheet__handle", h = "haze-BottomSheet__swipeable", g = 88, _ = 8;
+function v(e, t) {
+	let n = e instanceof Element ? e : null;
+	for (; n;) {
+		if (n.scrollTop > 0) return !1;
+		if (n === t) return !0;
+		n = n.parentElement;
+	}
+	return !0;
+}
+function y(e, t) {
+	let [n, r] = u(0);
+	return s(() => {
+		if (!e || !t) return;
+		let n = window.visualViewport;
+		if (!n) return;
+		let i = () => {
+			let e = Math.max(0, Math.round(window.innerHeight - n.height - n.offsetTop));
+			r((t) => t === e ? t : e);
+		};
+		return i(), n.addEventListener("resize", i), n.addEventListener("scroll", i), () => {
+			n.removeEventListener("resize", i), n.removeEventListener("scroll", i);
+		};
+	}, [e, t]), n;
+}
+function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1, virtualKeyboard: C = !1, children: w, className: T, style: E, ref: D, ...O }) {
+	let [k, A] = d(u, !1), j = r(x, A), M = l(null);
+	s(() => {
+		if (!k) return;
+		let e = document.activeElement;
+		M.current = e instanceof HTMLElement ? e : null;
+	}, [k]);
+	let N = n({
+		enabled: k,
 		trapped: !0
-	}), _ = () => {
-		h(!1), u?.();
+	}), P = o(() => {
+		j(!1), b?.();
+	}, [j, b]);
+	c(D, () => ({
+		open: () => {
+			j(!0);
+		},
+		close: P,
+		focusTrigger: () => {
+			let e = M.current;
+			e?.isConnected && e.focus();
+		}
+	}), [j, P]);
+	let F = y(C, k), I = C ? {
+		"--haze-sheet-kb-inset": `${F}px`,
+		maxHeight: `min(80dvh, calc(100dvh - ${F}px))`,
+		...F > 0 ? { transform: `translateY(${-F}px)` } : null
+	} : void 0, L = l(null), R = o((e) => {
+		N(e), L.current = e;
+	}, [N]), z = l(null), B = o((e) => {
+		let t = z.current, n = L.current;
+		if (!t || !n || e.touches.length !== 1 || e.defaultPrevented) return;
+		let [r] = e.touches;
+		if (!r) return;
+		let i = r.clientY - t.startY;
+		i <= 0 || (t.dragging || v(e.target, n)) && (t.dragging || i > _) && e.preventDefault();
+	}, []), V = (e, t) => {
+		try {
+			e.setPointerCapture(t);
+		} catch {}
+		e.style.transition = "none", e.style.userSelect = "none", document.addEventListener("touchmove", B, { passive: !1 });
+	}, H = (e) => {
+		e.style.userSelect = "", document.removeEventListener("touchmove", B);
+	}, U = (e) => {
+		e.style.transition = "transform var(--haze-duration-fast) var(--haze-ease)", e.style.transform = F > 0 ? `translateY(${-F}px)` : "";
+		let t = (n) => {
+			n.target === e && (e.style.transition = "", e.removeEventListener("transitionend", t));
+		};
+		e.addEventListener("transitionend", t);
+	}, W = (e) => {
+		e.button !== 0 || z.current || (z.current = {
+			pointerId: e.pointerId,
+			startY: e.clientY,
+			dragging: !1
+		});
+	}, G = (e) => {
+		let t = z.current, n = L.current;
+		if (!t || !n || t.pointerId !== e.pointerId) return;
+		let r = e.clientY - t.startY;
+		if (!t.dragging) {
+			if (r <= _ || !v(e.target, n)) return;
+			t.dragging = !0, V(n, e.pointerId);
+		}
+		n.style.transform = `translateY(${Math.max(0, r) - F}px)`;
+	}, K = (e) => {
+		let t = z.current, n = L.current;
+		if (!t || !n || t.pointerId !== e.pointerId || (z.current = null, H(n), !t.dragging)) return;
+		let r = Math.max(1, Math.min(g, n.getBoundingClientRect().height / 4)), i = Math.max(0, e.clientY - t.startY);
+		if (n.style.transition = "", i >= r) {
+			P();
+			return;
+		}
+		U(n);
+	}, q = (e) => {
+		let t = z.current, n = L.current;
+		t && n && t.pointerId === e.pointerId && (z.current = null, H(n), t.dragging && U(n));
 	};
-	return /* @__PURE__ */ r(n, {
-		present: m,
-		children: r("div", {
+	return s(() => {
+		if (k) return;
+		z.current = null;
+		let e = L.current;
+		e && (e.style.userSelect = "", e.style.transition = ""), document.removeEventListener("touchmove", B);
+	}, [k, B]), /* @__PURE__ */ i(t, {
+		present: k,
+		children: i("div", {
 			onClick: () => {
-				m && _();
+				k && P();
 			},
 			onKeyDown: (e) => {
-				e.key === "Escape" && m && _();
+				e.key === "Escape" && k && P();
 			},
-			className: e([o, f]),
-			children: /* @__PURE__ */ i("div", {
-				ref: g,
+			className: e([f, T]),
+			children: /* @__PURE__ */ a("div", {
+				ref: R,
 				role: "dialog",
 				"aria-modal": "true",
-				...p,
+				style: {
+					...E,
+					...I
+				},
+				...O,
+				...S && {
+					onPointerDown: W,
+					onPointerMove: G,
+					onPointerUp: K,
+					onPointerCancel: q
+				},
 				onClick: (e) => e.stopPropagation(),
-				className: e([s]),
-				children: [/* @__PURE__ */ r("div", { className: e([c]) }), d]
+				className: e([p, S && h]),
+				children: [/* @__PURE__ */ i("div", { className: e([m]) }), w]
 			})
 		})
 	});
 }
 //#endregion
-export { l as default };
+export { b as default };

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,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                     */

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,5 @@
-import e from "./Button.js";
-import t from "./ButtonLink.js";
-export { e as Button, t as ButtonLink };
+"use client";
+import { sizes as e, variants as t } from "./styles.js";
+import n from "./Button.js";
+import r from "./ButtonLink.js";
+export { n as Button, r as ButtonLink, e as buttonSizes, t as buttonVariants };

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 = {