@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/attachment/AttachmentCard.js

@@ -4,74 +4,87 @@ import { IconButton as t } from "../icon-button/IconButton.js";
 import { FolderPlusIcon as n } from "../icons/FolderPlusIcon.js";
 import { ProgressRing as r } from "../status-icons/ProgressRing.js";
 import { XCloseIcon as i } from "../icons/XCloseIcon.js";
-import { FileTypeHelper as a } from "../file-types/file-type-helper.js";
-import { FileUploadHelper as o } from "../file-upload/file-upload-helper.js";
-import { Download01Icon as s } from "../icons/Download01Icon.js";
-import { FolderCheckIcon as c } from "../icons/FolderCheckIcon.js";
-import l from "clsx";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Popover as a } from "../popover/Popover.js";
+import { FileTypeHelper as o } from "../file-types/file-type-helper.js";
+import { FileUploadHelper as s } from "../file-upload/file-upload-helper.js";
+import { Download01Icon as c } from "../icons/Download01Icon.js";
+import { FolderCheckIcon as l } from "../icons/FolderCheckIcon.js";
+import u from "clsx";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/attachment/AttachmentCard.tsx
-function f({ item: f, onPreview: p, onRetry: m, onRemove: h, onDownload: g, saveConfig: _, className: v }) {
-	let y = f.upload, b = !y || y.status === "ready", x = y?.status === "failed", S = x ? m : b ? p : void 0, C = f.kind === "folder" ? "folder" : f.kind === "image" || f.mediaType?.startsWith("image/") ? "image" : a.fromFilename(f.filename), w = x ? y.error : y?.status === "uploading" ? "Uploading…" : [f.kind === "folder" ? "Folder" : f.filename.split(".").at(-1)?.toUpperCase(), f.size === void 0 ? void 0 : o.size(f.size)].filter(Boolean).join(" · ");
-	return /* @__PURE__ */ d("div", {
+function p({ item: p, onPreview: m, onRetry: h, onRemove: g, onDownload: _, saveConfig: v, className: y, previewConfig: b }) {
+	let x = p.upload, S = !x || x.status === "ready", C = x?.status === "failed", w = C ? h : S ? m : void 0, T = p.kind === "folder" ? "folder" : p.kind === "image" || p.mediaType?.startsWith("image/") ? "image" : o.fromFilename(p.filename), E = C ? x.error : x?.status === "uploading" ? "Uploading…" : [p.kind === "folder" ? "Folder" : p.filename.split(".").at(-1)?.toUpperCase(), p.size === void 0 ? void 0 : s.size(p.size)].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ f("div", {
 		"data-pf-attachment": "",
 		"data-layout": "card",
-		"data-status": y?.status ?? "ready",
-		className: l("pf:box-border pf:relative pf:flex pf:w-full pf:min-w-0 pf:min-h-[64px] pf:items-center pf:gap-lg pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:bg-background pf:p-lg pf:font-body", x ? "pf:border-red-300" : "pf:border-soft-pearl-300", v),
+		"data-status": x?.status ?? "ready",
+		className: u("pf:box-border pf:relative pf:flex pf:w-full pf:min-w-0 pf:min-h-[64px] pf:items-center pf:gap-lg pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:bg-background pf:p-lg pf:font-body pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none", C ? "pf:border-red-300" : "pf:border-soft-pearl-300", y),
 		children: [
-			/* @__PURE__ */ u(e, {
+			/* @__PURE__ */ d(e, {
 				size: 40,
-				kind: C
+				kind: T
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "pf:min-w-0 pf:flex-1",
-				children: [S ? /* @__PURE__ */ u("button", {
+				children: [w ? b && S ? /* @__PURE__ */ d(a, {
+					mode: "preview",
+					title: p.filename,
+					loadingConfig: { isLoading: b.isLoading ?? !1 },
+					trigger: /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: () => {
+							w(p);
+						},
+						className: "pf:block pf:w-full pf:truncate pf:border-0 pf:bg-transparent pf:p-0 pf:text-start pf:font-body pf:text-label-13-strong pf:text-soft-pearl-1000 pf:cursor-pointer pf:after:absolute pf:after:inset-0 pf:after:rounded-lg pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
+						children: p.filename
+					}),
+					children: b.content
+				}) : /* @__PURE__ */ d("button", {
 					type: "button",
 					onClick: () => {
-						S(f);
+						w(p);
 					},
-					title: f.filename,
 					className: "pf:block pf:w-full pf:truncate pf:border-0 pf:bg-transparent pf:p-0 pf:text-start pf:font-body pf:text-label-13-strong pf:text-soft-pearl-1000 pf:cursor-pointer pf:after:absolute pf:after:inset-0 pf:after:rounded-lg pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
-					children: f.filename
-				}) : /* @__PURE__ */ u("div", {
-					title: f.filename,
+					children: p.filename
+				}) : /* @__PURE__ */ d("div", {
+					title: p.filename,
 					className: "pf:truncate pf:text-label-13-strong pf:text-soft-pearl-1000",
-					children: f.filename
-				}), /* @__PURE__ */ u("div", {
-					role: x ? "status" : void 0,
-					className: l("pf:mt-xxs pf:text-copy-12 pf:wrap-anywhere", x ? "pf:text-red-800" : "pf:text-soft-pearl-800"),
-					children: w
+					children: p.filename
+				}), /* @__PURE__ */ d("div", {
+					role: C ? "status" : void 0,
+					className: u("pf:mt-xxs pf:text-copy-12 pf:wrap-anywhere", C ? "pf:text-red-800" : "pf:text-soft-pearl-800"),
+					children: E
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "pf:relative pf:flex pf:shrink-0 pf:items-center pf:gap-xs",
 				children: [
-					y?.status === "uploading" && /* @__PURE__ */ u(r, {
-						value: y.progress,
-						label: `Uploading ${f.filename}`
+					x?.status === "uploading" && /* @__PURE__ */ d(r, {
+						value: x.progress,
+						label: `Uploading ${p.filename}`
 					}),
-					b && _ && /* @__PURE__ */ u(t, {
+					S && v && /* @__PURE__ */ d(t, {
 						size: "sm",
-						label: _.isSaved ? "Saved to Documents" : "Save to Documents",
-						disabled: _.isSaved ? !_.onOpen : !_.onSave,
-						onClick: () => _.isSaved ? _.onOpen?.(f) : _.onSave?.(f),
-						children: _.isSaved ? /* @__PURE__ */ u(c, {}) : /* @__PURE__ */ u(n, {})
+						label: v.isSaved ? "Saved to Documents" : "Save to Documents",
+						disabled: v.isSaved ? !v.onOpen : !v.onSave,
+						onClick: () => v.isSaved ? v.onOpen?.(p) : v.onSave?.(p),
+						children: v.isSaved ? /* @__PURE__ */ d(l, {}) : /* @__PURE__ */ d(n, {})
 					}),
-					b && g && /* @__PURE__ */ u(t, {
+					S && _ && /* @__PURE__ */ d(t, {
 						size: "sm",
-						label: `Download ${f.filename}`,
+						label: `Download ${p.filename}`,
 						onClick: () => {
-							g(f);
+							_(p);
 						},
-						children: /* @__PURE__ */ u(s, {})
+						children: /* @__PURE__ */ d(c, {})
 					}),
-					h && /* @__PURE__ */ u(t, {
+					g && /* @__PURE__ */ d(t, {
 						size: "sm",
-						label: `Remove ${f.filename}`,
+						label: `Remove ${p.filename}`,
 						onClick: () => {
-							h(f);
+							g(p);
 						},
-						children: /* @__PURE__ */ u(i, {})
+						children: /* @__PURE__ */ d(i, {})
 					})
 				]
 			})
@@ -79,4 +92,4 @@ function f({ item: f, onPreview: p, onRetry: m, onRemove: h, onDownload: g, save
 	});
 }
 //#endregion
-export { f as AttachmentCard };
+export { p as AttachmentCard };

package/dist/components/attachment/attachment-class-names.d.ts

@@ -1,3 +1,3 @@
-export declare const attachmentShellClass = "pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong";
+export declare const attachmentShellClass = "pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong";
 export declare const attachmentBodyClass = "pf:flex pf:min-w-0 pf:flex-1 pf:items-center pf:gap-sm pf:border-0 pf:bg-transparent pf:p-0 pf:font-body pf:text-label-12-strong pf:text-inherit pf:text-start pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:rounded-xs";
 export declare const attachmentRemoveClass = "pf:flex pf:shrink-0 pf:size-xl pf:items-center pf:justify-center pf:rounded-xs pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700";

package/dist/components/attachment/attachment-class-names.js

@@ -1,4 +1,4 @@
 //#region src/components/attachment/attachment-class-names.ts
-var e = "pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong", t = "pf:flex pf:min-w-0 pf:flex-1 pf:items-center pf:gap-sm pf:border-0 pf:bg-transparent pf:p-0 pf:font-body pf:text-label-12-strong pf:text-inherit pf:text-start pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:rounded-xs", n = "pf:flex pf:shrink-0 pf:size-xl pf:items-center pf:justify-center pf:rounded-xs pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700";
+var e = "pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong", t = "pf:flex pf:min-w-0 pf:flex-1 pf:items-center pf:gap-sm pf:border-0 pf:bg-transparent pf:p-0 pf:font-body pf:text-label-12-strong pf:text-inherit pf:text-start pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:rounded-xs", n = "pf:flex pf:shrink-0 pf:size-xl pf:items-center pf:justify-center pf:rounded-xs pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700";
 //#endregion
 export { t as attachmentBodyClass, n as attachmentRemoveClass, e as attachmentShellClass };

package/dist/components/attachment-group/AttachmentGroup.js

@@ -56,7 +56,7 @@ var c = ({ items: c, align: l = "start", maxRows: u = 3, getPreview: d, onRemove
 				trigger: /* @__PURE__ */ s("button", {
 					type: "button",
 					"aria-label": `Show ${String(C.length)} more attachments`,
-					className: a("pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong", "pf:border-[0.5px] pf:border-soft-pearl-300 pf:px-sm pf:cursor-pointer pf:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700"),
+					className: a("pf:box-border pf:inline-flex pf:h-[var(--pf-control-sm)] pf:min-w-0 pf:max-w-[min(240px,100%)] pf:shrink-0 pf:items-center pf:gap-sm pf:rounded-sm pf:border-solid pf:bg-background pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:pl-sm pf:pr-xs pf:font-body pf:text-label-12-strong", "pf:border-[0.5px] pf:border-soft-pearl-300 pf:px-sm pf:cursor-pointer pf:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700"),
 					children: ["+", C.length]
 				}),
 				children: /* @__PURE__ */ o("div", {

package/dist/components/avatar/avatar-helper.d.ts

@@ -1,7 +1,7 @@
 import type { AvatarIdentity, AvatarSize } from './avatar-types.js';
 export declare class AvatarHelper {
     static readonly tones: readonly ["clay", "apricot", "ochre", "olive", "sage", "dusk", "plum", "rose"];
-    static getTone(identity: AvatarIdentity): "olive" | "plum" | "neutral" | "clay" | "apricot" | "ochre" | "sage" | "dusk" | "rose";
+    static getTone(identity: AvatarIdentity): "neutral" | "clay" | "apricot" | "ochre" | "olive" | "sage" | "dusk" | "plum" | "rose";
     static getName(identity: AvatarIdentity, unknownLabel?: string): string;
     static getInitials(identity: AvatarIdentity, size: AvatarSize): string;
 }

package/dist/components/banner/Banner.js

@@ -13,9 +13,12 @@ var u = ({ description: u, title: d, tone: f = "neutral", actionConfig: p, dismi
 	dismissConfig: m,
 	children: (o) => /* @__PURE__ */ l("div", {
 		role: i(f === "announcement" ? "info" : f, h),
-		className: s("pf:relative pf:box-border pf:flex pf:items-start pf:gap-[10px] pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:py-[10px] pf:font-body", f === "announcement" ? "pf:px-[40px]" : "pf:ps-xl pf:pe-lg", r[f === "announcement" ? "info" : f], g),
+		className: s("pf:relative pf:box-border pf:flex pf:items-center pf:gap-[10px] pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:py-[10px] pf:font-body", f === "announcement" ? "pf:px-[40px]" : "pf:ps-xl pf:pe-lg", r[f === "announcement" ? "info" : f], g),
 		children: [
-			f !== "announcement" && /* @__PURE__ */ c(a, { tone: f }),
+			f !== "announcement" && /* @__PURE__ */ c(a, {
+				tone: f,
+				className: "pf:mt-0"
+			}),
 			/* @__PURE__ */ l("div", {
 				className: s("pf:flex pf:min-w-0 pf:flex-1 pf:flex-wrap pf:items-center pf:gap-md pf:text-copy-13 pf:wrap-anywhere", f === "announcement" ? "pf:justify-center pf:text-center pf:text-blue-900" : "pf:text-soft-pearl-900"),
 				children: [/* @__PURE__ */ l("span", { children: [d && /* @__PURE__ */ l("strong", {

package/dist/components/button/Button.js

@@ -33,7 +33,7 @@ var f = s(({ variant: s = "primary", size: f = "md", destructive: p = !1, loadin
 					destructive: p,
 					disabled: v,
 					loading: O
-				}), b),
+				}), s !== "link" && s !== "link-subtle" && "pf:motion-safe:transition-[background-color,border-color,color,scale]! pf:motion-safe:duration-150! pf:motion-safe:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-safe:not-focus-visible:not-data-disabled:active:scale-[0.98] pf:motion-safe:active:duration-100! pf:focus-visible:transition-none!", b),
 				children: [
 					O ? /* @__PURE__ */ u(r, { size: j }) : k ? /* @__PURE__ */ u(n, {
 						size: j,

package/dist/components/calendar/CalendarAgenda.js

@@ -14,7 +14,7 @@ var g = ({ event: s, config: g, state: _ }) => {
 	let v = g.eventConfig?.getMenu?.(s);
 	return /* @__PURE__ */ h("div", {
 		"data-draft": s.status?.appearance === "draft" ? "" : void 0,
-		className: "pf:data-draft:outline pf:data-draft:outline-dashed pf:data-draft:outline-soft-pearl-500 pf:data-draft:-outline-offset-1 pf:data-draft:bg-soft-pearl-100 pf:group/event pf:relative pf:flex pf:min-w-0 pf:flex-wrap pf:items-center pf:gap-md pf:px-[10px] pf:py-md pf:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200",
+		className: "pf:data-draft:bg-soft-pearl-100 pf:group/event pf:relative pf:flex pf:min-w-0 pf:flex-wrap pf:items-center pf:gap-md pf:px-[10px] pf:py-md pf:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200",
 		children: [
 			/* @__PURE__ */ m("span", {
 				"aria-hidden": "true",

package/dist/components/calendar/CalendarArtwork.js

@@ -1,34 +1,28 @@
-import { Tooltip as e } from "../tooltip/Tooltip.js";
-import { CheckIcon as t } from "../icons/CheckIcon.js";
+import { CheckIcon as e } from "../icons/CheckIcon.js";
+import { IconButton as t } from "../icon-button/IconButton.js";
 import { AlertCircleIcon as n } from "../icons/AlertCircleIcon.js";
-import { calendarFocus as r } from "./calendar-class-names.js";
-import { cloneElement as i, isValidElement as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { cloneElement as r, isValidElement as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/calendar/CalendarArtwork.tsx
-var s = ({ flag: e }) => a(e) ? /* @__PURE__ */ o("span", {
+var o = ({ flag: e }) => i(e) ? /* @__PURE__ */ a("span", {
 	"aria-hidden": "true",
 	className: "pf:inline-flex pf:size-lg pf:shrink-0 pf:items-center pf:justify-center pf:leading-none",
-	children: i(e, {
+	children: r(e, {
 		size: 12,
 		width: 12,
 		height: 12
 	})
-}) : null, c = ({ event: i }) => {
-	let a = i.status?.appearance;
-	if (a !== "filed" && a !== "overdue") return null;
-	let s = a === "filed" ? "Completed" : "Overdue";
-	return /* @__PURE__ */ o(e, {
-		content: s,
-		trigger: /* @__PURE__ */ o("button", {
-			type: "button",
-			"aria-label": `${s}: ${i.title}`,
-			className: `pf:inline-flex pf:size-xl pf:shrink-0 pf:items-center pf:justify-center pf:rounded-xs pf:border-0 pf:bg-transparent pf:p-0 ${r} ${a === "filed" ? "pf:text-green-700" : "pf:text-red-700"}`,
-			children: o(a === "filed" ? t : n, {
-				size: 12,
-				tone: "inherit"
-			})
+}) : null, s = ({ event: r }) => {
+	let i = r.status?.appearance;
+	return i !== "filed" && i !== "overdue" ? null : /* @__PURE__ */ a(t, {
+		label: `${i === "filed" ? "Completed" : "Overdue"}: ${r.title}`,
+		size: "xs",
+		className: i === "filed" ? "pf:[&.pf-icon-button]:text-green-700" : "pf:[&.pf-icon-button]:text-red-700",
+		children: a(i === "filed" ? e : n, {
+			size: 12,
+			tone: "inherit"
 		})
 	});
 };
 //#endregion
-export { s as CalendarFlag, c as CalendarStatusMark };
+export { o as CalendarFlag, s as CalendarStatusMark };

package/dist/components/calendar/CalendarEventContent.js

@@ -10,7 +10,7 @@ var c = a(function({ event: r, className: a, ...c }, l) {
 		ref: l,
 		type: "button",
 		"aria-label": r.title || "Untitled event",
-		className: i("pf:box-border pf:flex pf:h-2xl pf:w-full pf:min-w-0 pf:cursor-pointer pf:items-center pf:gap-xs pf:rounded-xs pf:border-0 pf:bg-transparent pf:py-0 pf:ps-[3px] pf:pe-sm pf:text-start pf:font-body pf:text-[12px] pf:leading-[16px] pf:font-medium pf:hover:bg-soft-pearl-200 pf:aria-expanded:bg-soft-pearl-300", t, r.status?.appearance === "filed" || r.status?.appearance === "draft" ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000", (r.status?.appearance === "extended" || r.status?.appearance === "draft") && "pf:outline pf:outline-dashed pf:outline-soft-pearl-500 pf:-outline-offset-1", r.status?.appearance === "draft" && "pf:bg-soft-pearl-100", a),
+		className: i("pf:box-border pf:flex pf:h-2xl pf:w-full pf:min-w-0 pf:cursor-pointer pf:items-center pf:gap-xs pf:rounded-xs pf:border-0 pf:bg-transparent pf:py-0 pf:ps-[3px] pf:pe-sm pf:text-start pf:font-body pf:text-[12px] pf:leading-[16px] pf:font-medium pf:hover:bg-soft-pearl-200 pf:aria-expanded:bg-soft-pearl-300 pf:group-hover/calendar-row:bg-transparent pf:group-focus-within/calendar-row:bg-transparent", t, r.status?.appearance === "filed" || r.status?.appearance === "draft" ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000", (r.status?.appearance === "extended" || r.status?.appearance === "draft") && "pf:outline pf:outline-dashed pf:outline-soft-pearl-500 pf:-outline-offset-1", r.status?.appearance === "draft" && "pf:bg-soft-pearl-100", a),
 		children: [
 			/* @__PURE__ */ o("span", {
 				"aria-hidden": "true",
@@ -25,7 +25,7 @@ var c = a(function({ event: r, className: a, ...c }, l) {
 		]
 	});
 }), l = ({ event: e, children: t }) => /* @__PURE__ */ s("div", {
-	className: "pf:relative pf:flex pf:min-w-0 pf:items-center pf:gap-xxs",
+	className: "pf:group/calendar-row pf:relative pf:flex pf:min-w-0 pf:items-center pf:gap-xxs pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-within:bg-soft-pearl-200 pf:[&:has([aria-expanded=true])]:bg-soft-pearl-300 pf:motion-safe:transition-colors pf:duration-120",
 	children: [t, /* @__PURE__ */ o(r, { event: e })]
 });
 //#endregion

package/dist/components/calendar/CalendarPopup.js

@@ -1,116 +1,136 @@
 import { Button as e } from "../button/Button.js";
-import { IconButton as t } from "../icon-button/IconButton.js";
-import { XCloseIcon as n } from "../icons/XCloseIcon.js";
-import { Dropdown as r } from "../dropdown/Dropdown.js";
-import { Avatar as i } from "../avatar/Avatar.js";
+import { Popover as t } from "../popover/Popover.js";
+import { Dropdown as n } from "../dropdown/Dropdown.js";
+import { Avatar as r } from "../avatar/Avatar.js";
+import { ChevronLeftIcon as i } from "../icons/ChevronLeftIcon.js";
 import { Badge as a } from "../badge/Badge.js";
 import { CalendarDateHelper as o } from "./calendar-date-helper.js";
 import { CalendarFlag as s } from "./CalendarArtwork.js";
 import { CalendarEventContent as c } from "./CalendarEventContent.js";
-import { useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Popover as p } from "@base-ui/react/popover";
+import { useLayoutEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/calendar/CalendarPopup.tsx
-var m = ({ trigger: e, title: r, children: i, onOpenChange: a }) => {
-	let [o, s] = l(!1), c = (e) => {
-		s(e), a?.(e);
+var h = ({ trigger: e, title: n, children: r, onOpenChange: i }) => {
+	let [a, o] = d(!1), s = (e) => {
+		o(e), i?.(e);
 	};
-	return /* @__PURE__ */ f(p.Root, {
-		open: o,
-		onOpenChange: c,
-		children: [/* @__PURE__ */ d(p.Trigger, { render: e }), /* @__PURE__ */ d(p.Portal, { children: /* @__PURE__ */ d(p.Positioner, {
-			sideOffset: 6,
-			align: "start",
-			className: "pf:z-[60] pf:max-w-[calc(100vw-24px)]",
-			children: /* @__PURE__ */ f(p.Popup, {
-				"aria-label": r,
-				className: "pf:box-border pf:w-[320px] pf:max-w-full pf:max-h-[min(400px,var(--available-height))] pf:overflow-auto pf:rounded-lg pf:border pf:border-soft-pearl-300 pf:bg-background pf:p-xl pf:font-body pf:text-soft-pearl-1000 pf:shadow-menu pf:outline-none",
-				children: [/* @__PURE__ */ f("div", {
-					className: "pf:mb-lg pf:flex pf:items-start pf:gap-md",
-					children: [/* @__PURE__ */ d(p.Title, {
-						className: "pf:m-0 pf:min-w-0 pf:flex-1 pf:break-words pf:text-[14px] pf:font-medium",
-						children: r
-					}), /* @__PURE__ */ d(p.Close, { render: /* @__PURE__ */ d(t, {
-						label: "Close preview",
-						size: "xs",
-						tooltip: !1,
-						children: /* @__PURE__ */ d(n, {})
-					}) })]
-				}), typeof i == "function" ? i(() => {
-					c(!1);
-				}) : i]
-			})
-		}) })]
+	return /* @__PURE__ */ p(t, {
+		open: a,
+		onOpenChange: s,
+		trigger: e,
+		title: n,
+		closeConfig: { label: "Close preview" },
+		positionConfig: { align: "start" },
+		children: typeof r == "function" ? r(() => {
+			s(!1);
+		}) : r
 	});
-}, h = ({ event: t, config: n, locale: c }) => /* @__PURE__ */ f(u, { children: [n?.renderPreview ? n.renderPreview(t) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+}, g = ({ event: t, config: i, locale: c }) => /* @__PURE__ */ m(f, { children: [i?.renderPreview ? i.renderPreview(t) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
 	className: "pf:mb-xl pf:flex pf:items-center pf:gap-md pf:break-words pf:text-[12px] pf:text-soft-pearl-800",
-	children: [/* @__PURE__ */ d(s, { flag: t.entity.flag }), t.entity.label]
-}), /* @__PURE__ */ f("dl", {
+	children: [/* @__PURE__ */ p(s, { flag: t.entity.flag }), t.entity.label]
+}), /* @__PURE__ */ m("dl", {
 	className: "pf:m-0 pf:grid pf:grid-cols-[80px_minmax(0,1fr)] pf:items-center pf:gap-x-lg pf:gap-y-lg pf:border-t pf:border-soft-pearl-300 pf:pt-xl pf:text-[12px] pf:[&>dd]:m-0 pf:[&>dd]:break-words pf:[&>dt]:text-soft-pearl-800",
 	children: [
-		t.status && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Status" }), /* @__PURE__ */ d("dd", { children: /* @__PURE__ */ d(a, {
+		t.status && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("dt", { children: "Status" }), /* @__PURE__ */ p("dd", { children: /* @__PURE__ */ p(a, {
 			label: t.status.label,
 			tone: t.status.tone
 		}) })] }),
-		/* @__PURE__ */ d("dt", { children: "Due date" }),
-		/* @__PURE__ */ d("dd", { children: o.label(t.date, c) }),
-		/* @__PURE__ */ d("dt", { children: "Category" }),
-		/* @__PURE__ */ d("dd", { children: t.category.label }),
-		/* @__PURE__ */ d("dt", { children: "Assignee" }),
-		/* @__PURE__ */ d("dd", { children: t.assignee ? /* @__PURE__ */ f("span", {
+		/* @__PURE__ */ p("dt", { children: "Due date" }),
+		/* @__PURE__ */ p("dd", { children: o.label(t.date, c) }),
+		/* @__PURE__ */ p("dt", { children: "Category" }),
+		/* @__PURE__ */ p("dd", { children: t.category.label }),
+		/* @__PURE__ */ p("dt", { children: "Assignee" }),
+		/* @__PURE__ */ p("dd", { children: t.assignee ? /* @__PURE__ */ m("span", {
 			className: "pf:flex pf:items-center pf:gap-md",
-			children: [/* @__PURE__ */ d(i, {
+			children: [/* @__PURE__ */ p(r, {
 				identity: t.assignee,
 				size: 24
 			}), t.assignee.name ?? t.assignee.email ?? "Unknown"]
 		}) : "Unassigned" })
 	]
-})] }), /* @__PURE__ */ f("div", {
-	className: "pf:mt-xl pf:flex pf:flex-wrap pf:items-center pf:gap-md",
-	children: [n?.onOpen && /* @__PURE__ */ d(e, {
+})] }), (i?.onOpen || i?.getMenu) && /* @__PURE__ */ m("div", {
+	className: "pf:mt-lg pf:flex pf:flex-wrap pf:items-center pf:gap-md",
+	children: [i.onOpen && /* @__PURE__ */ p(e, {
 		size: "sm",
 		variant: "secondary",
 		onClick: () => {
-			n.onOpen?.(t);
+			i.onOpen?.(t);
 		},
 		children: "Open record"
-	}), n?.getMenu && /* @__PURE__ */ d(r, {
-		menu: n.getMenu(t),
-		trigger: /* @__PURE__ */ d(e, {
+	}), i.getMenu && /* @__PURE__ */ p(n, {
+		menu: i.getMenu(t),
+		trigger: /* @__PURE__ */ p(e, {
 			variant: "tertiary",
 			size: "sm",
 			children: "Record actions"
 		})
 	})]
-})] }), g = ({ events: t, locale: n, config: r }) => {
-	let [i, a] = l();
-	return i ? /* @__PURE__ */ f(u, { children: [
-		/* @__PURE__ */ d(e, {
-			size: "sm",
-			variant: "tertiary",
-			onClick: () => {
-				a(void 0);
-			},
-			children: "Back to day"
-		}),
-		/* @__PURE__ */ d("h3", {
-			className: "pf:my-lg pf:break-words pf:text-[14px] pf:font-medium",
-			children: i.title
-		}),
-		/* @__PURE__ */ d(h, {
-			event: i,
-			locale: n,
-			config: r
+})] }), _ = ({ events: t, locale: n, config: r }) => {
+	let [a, o] = d(), s = u(null), h = u(null), _ = u(), v = u(null), y = u(!1), b = (e, t) => {
+		y.current = !0, a && (_.current = a.id), v.current = t > 0 ? {
+			direction: e ? 1 : -1,
+			height: s.current?.offsetHeight ?? 0
+		} : null, o(e);
+	};
+	return l(() => {
+		let e = s.current;
+		if (!e || !y.current) return;
+		a ? h.current?.focus({ preventScroll: !0 }) : Array.from(e.querySelectorAll("[data-event-id]")).find((e) => e.dataset.eventId === _.current)?.focus({ preventScroll: !0 });
+		let t = v.current;
+		if (!t || typeof e.animate != "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let n = e.offsetHeight, r = e.animate([{
+			opacity: 0,
+			transform: `translateX(${String(t.direction * 6)}px)`,
+			height: `${String(t.height)}px`
+		}, {
+			opacity: 1,
+			transform: "translateX(0)",
+			height: `${String(n)}px`
+		}], {
+			duration: 160,
+			easing: "cubic-bezier(0.23,1,0.32,1)"
+		});
+		return () => {
+			r.cancel();
+		};
+	}, [a]), /* @__PURE__ */ p("div", {
+		ref: s,
+		className: "pf:min-w-0 pf:overflow-clip pf:p-px",
+		children: a ? /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ m(e, {
+				ref: h,
+				size: "sm",
+				variant: "link",
+				leadingIcon: /* @__PURE__ */ p(i, {}),
+				onClick: (e) => {
+					b(void 0, e.detail);
+				},
+				children: [
+					"All filings (",
+					t.length,
+					")"
+				]
+			}),
+			/* @__PURE__ */ p("h3", {
+				className: "pf:mt-md pf:mb-lg pf:break-words pf:text-label-13-strong",
+				children: a.title
+			}),
+			/* @__PURE__ */ p(g, {
+				event: a,
+				locale: n,
+				config: r
+			})
+		] }) : /* @__PURE__ */ p("div", {
+			className: "pf:flex pf:flex-col pf:gap-xs",
+			children: t.map((e) => /* @__PURE__ */ p(c, {
+				"data-event-id": e.id,
+				event: e,
+				onClick: (t) => {
+					b(e, t.detail);
+				}
+			}, e.id))
 		})
-	] }) : /* @__PURE__ */ d("div", {
-		className: "pf:flex pf:flex-col pf:gap-xs",
-		children: t.map((e) => /* @__PURE__ */ d(c, {
-			event: e,
-			onClick: () => {
-				a(e);
-			}
-		}, e.id))
 	});
 };
 //#endregion
-export { g as CalendarDayPreview, h as CalendarEventPreview, m as CalendarPopup };
+export { _ as CalendarDayPreview, g as CalendarEventPreview, h as CalendarPopup };

package/dist/components/calendar/CalendarToolbar.js

@@ -3,10 +3,10 @@ import { IconButton as t } from "../icon-button/IconButton.js";
 import { ChevronRightIcon as n } from "../icons/ChevronRightIcon.js";
 import { ChevronLeftIcon as r } from "../icons/ChevronLeftIcon.js";
 import { PlusIcon as i } from "../icons/PlusIcon.js";
-import { CalendarDateHelper as a } from "./calendar-date-helper.js";
-import { MultiSelect as o } from "../multi-select/MultiSelect.js";
-import { SegmentedControl as s } from "../segmented-control/SegmentedControl.js";
-import { SplitButton as c } from "../split-button/SplitButton.js";
+import { SplitButton as a } from "../split-button/SplitButton.js";
+import { CalendarDateHelper as o } from "./calendar-date-helper.js";
+import { MultiSelect as s } from "../multi-select/MultiSelect.js";
+import { SegmentedControl as c } from "../segmented-control/SegmentedControl.js";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/calendar/CalendarToolbar.tsx
 var d = ({ config: d, state: f }) => {
@@ -32,7 +32,7 @@ var d = ({ config: d, state: f }) => {
 					size: "sm",
 					disabled: f.month === "1000-01",
 					onClick: () => {
-						f.changeMonth(a.moveMonth(f.month, -1));
+						f.changeMonth(o.moveMonth(f.month, -1));
 					},
 					children: /* @__PURE__ */ l(r, {})
 				}), /* @__PURE__ */ l(t, {
@@ -40,7 +40,7 @@ var d = ({ config: d, state: f }) => {
 					size: "sm",
 					disabled: f.month === "9999-12",
 					onClick: () => {
-						f.changeMonth(a.moveMonth(f.month, 1));
+						f.changeMonth(o.moveMonth(f.month, 1));
 					},
 					children: /* @__PURE__ */ l(n, {})
 				})]
@@ -48,14 +48,14 @@ var d = ({ config: d, state: f }) => {
 			/* @__PURE__ */ l("h2", {
 				"aria-live": "polite",
 				className: "pf:m-0 pf:me-auto pf:text-[18px] pf:leading-[24px] pf:font-medium",
-				children: a.format(`${f.month}-01`, f.locale, {
+				children: o.format(`${f.month}-01`, f.locale, {
 					month: "long",
 					year: "numeric"
 				})
 			}),
 			d.entityFilterConfig && /* @__PURE__ */ l("div", {
 				className: "pf:w-[176px] pf:max-w-full",
-				children: /* @__PURE__ */ l(o, {
+				children: /* @__PURE__ */ l(s, {
 					label: d.entityFilterConfig.label ?? "Filter entities",
 					hideLabel: !0,
 					placeholder: "All entities",
@@ -68,7 +68,7 @@ var d = ({ config: d, state: f }) => {
 					onValueChange: f.changeEntities
 				})
 			}),
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ l(c, {
 				label: "Calendar view",
 				size: "sm",
 				value: f.view,
@@ -83,7 +83,7 @@ var d = ({ config: d, state: f }) => {
 					label: "Agenda"
 				}]
 			}),
-			m && (p.length > 1 ? /* @__PURE__ */ l(c, {
+			m && (p.length > 1 ? /* @__PURE__ */ l(a, {
 				label: m.label,
 				size: "sm",
 				leadingIcon: /* @__PURE__ */ l(i, {}),