@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/card/Card.js

@@ -8,74 +8,80 @@ import { CardBody as a } from "./CardBody.js";
 import o from "clsx";
 import { forwardRef as s, useId as c, useState as l } from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Collapsible as p } from "@base-ui/react/collapsible";
 //#region src/components/card/Card.tsx
-var p = s(function({ children: s, headerConfig: p, footerConfig: m, disclosureConfig: h, elevation: g = "raised", padding: _ = "default", scrollConfig: v, className: y, ...b }, x) {
-	let S = c(), C = c(), [w, T] = l(h?.defaultValue ?? !0), E = h?.value ?? w, D = {
+var m = s(function({ children: s, headerConfig: m, footerConfig: h, disclosureConfig: g, elevation: _ = "raised", padding: v = "default", scrollConfig: y, className: b, ...x }, S) {
+	let [C, w] = l(!1), T = c(), E = c(), [D, O] = l(g?.defaultValue ?? !0), k = g?.value ?? D, A = {
 		2: "h2",
 		3: "h3",
 		4: "h4",
 		5: "h5",
 		6: "h6"
-	}[p?.headingLevel ?? 3];
-	return /* @__PURE__ */ f("div", {
-		...b,
-		ref: x,
-		className: o(i, "pf:flex pf:flex-col", g === "raised" && "pf:shadow-raised", y),
-		children: [(p || h) && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+	}[m?.headingLevel ?? 3];
+	return /* @__PURE__ */ f(p.Root, {
+		open: k,
+		"data-motion": C ? "pointer" : void 0,
+		...x,
+		ref: S,
+		className: o(i, "pf:group/card pf:flex pf:flex-col", _ === "raised" && "pf:shadow-raised", b),
+		children: [(m || g) && /* @__PURE__ */ d(u, { children: /* @__PURE__ */ f("div", {
 			className: "pf:flex pf:items-center pf:gap-md pf:ps-xl pf:pe-lg pf:py-lg",
 			children: [
 				/* @__PURE__ */ f("div", {
 					className: "pf:flex pf:flex-col pf:gap-xxs pf:flex-1 pf:min-w-0",
-					children: [/* @__PURE__ */ d(D, {
-						id: S,
+					children: [/* @__PURE__ */ d(A, {
+						id: T,
 						className: "pf:m-0 pf:font-body pf:text-label-13-strong pf:wrap-anywhere",
-						children: p?.title ?? h?.label ?? "Details"
-					}), p?.description && /* @__PURE__ */ d("p", {
+						children: m?.title ?? g?.label ?? "Details"
+					}), m?.description && /* @__PURE__ */ d("p", {
 						className: "pf:m-0 pf:text-copy-12 pf:text-soft-pearl-800 pf:wrap-anywhere",
-						children: p.description
+						children: m.description
 					})]
 				}),
-				p?.actionConfig && /* @__PURE__ */ d("span", {
+				m?.actionConfig && /* @__PURE__ */ d("span", {
 					className: "pf:min-w-0 pf:max-w-[45%]",
 					children: /* @__PURE__ */ d(t, {
-						action: p.actionConfig,
+						action: m.actionConfig,
 						variant: "link"
 					})
 				}),
-				h && /* @__PURE__ */ d(e, {
+				g && /* @__PURE__ */ d(e, {
 					size: "xs",
-					label: `${E ? "Collapse" : "Expand"} ${h.label ?? p?.title ?? "details"}`,
-					"aria-expanded": E,
-					"aria-controls": C,
-					onClick: () => {
-						T(!E), h.onValueChange?.(!E);
+					label: `${k ? "Collapse" : "Expand"} ${g.label ?? m?.title ?? "details"}`,
+					"aria-expanded": k,
+					"aria-controls": E,
+					onClick: (e) => {
+						w(e.detail > 0), O(!k), g.onValueChange?.(!k);
 					},
 					children: /* @__PURE__ */ d(r, {
 						size: 16,
-						className: E ? "pf:rotate-180" : void 0
+						className: o("pf:transition-none pf:motion-safe:group-data-[motion=pointer]/card:transition-transform pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", k && "pf:rotate-180")
 					})
 				})
 			]
-		}), E && /* @__PURE__ */ d(n, {})] }), /* @__PURE__ */ f("div", {
-			id: C,
-			hidden: !E,
-			className: E ? "pf:flex pf:flex-1 pf:min-h-0 pf:flex-col" : "pf:hidden",
-			children: [/* @__PURE__ */ d(a, {
-				padding: _,
-				scrollConfig: v,
-				children: s
-			}), m && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, {}), /* @__PURE__ */ f("div", {
-				className: "pf:flex pf:flex-wrap pf:justify-end pf:items-center pf:gap-md pf:ps-xl pf:pe-lg pf:py-lg",
-				children: [m.secondaryAction && /* @__PURE__ */ d(t, {
-					action: m.secondaryAction,
-					variant: "secondary"
-				}), m.primaryAction && /* @__PURE__ */ d(t, {
-					action: m.primaryAction,
-					variant: "primary"
-				})]
-			})] })]
+		}) }), /* @__PURE__ */ f(p.Panel, {
+			id: E,
+			keepMounted: !0,
+			className: o("pf:min-h-0 pf:h-(--collapsible-panel-height) pf:overflow-hidden pf:transition-none pf:motion-safe:group-data-[motion=pointer]/card:transition-[height] pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:data-starting-style:h-0 pf:data-ending-style:h-0", k && "pf:flex-1"),
+			children: [(m || g) && /* @__PURE__ */ d(n, {}), /* @__PURE__ */ f("div", {
+				className: "pf:flex pf:min-h-0 pf:flex-col",
+				children: [/* @__PURE__ */ d(a, {
+					padding: v,
+					scrollConfig: y,
+					children: s
+				}), h && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, {}), /* @__PURE__ */ f("div", {
+					className: "pf:flex pf:flex-wrap pf:justify-end pf:items-center pf:gap-md pf:ps-xl pf:pe-lg pf:py-lg",
+					children: [h.secondaryAction && /* @__PURE__ */ d(t, {
+						action: h.secondaryAction,
+						variant: "secondary"
+					}), h.primaryAction && /* @__PURE__ */ d(t, {
+						action: h.primaryAction,
+						variant: "primary"
+					})]
+				})] })]
+			})]
 		})]
 	});
 });
 //#endregion
-export { p as Card };
+export { m as Card };

package/dist/components/checkbox/Checkbox.js

@@ -1,9 +1,8 @@
 "use client";
-import { CheckIcon as e } from "../icons/CheckIcon.js";
-import { getChoiceClassNames as t, getChoiceMarkClassNames as n } from "../choices/choice-class-names.js";
-import { ChoiceLeading as r } from "../choices/ChoiceLeading.js";
-import { ChoiceText as i } from "../choices/ChoiceText.js";
-import { MinusIcon as a } from "../icons/MinusIcon.js";
+import { getChoiceClassNames as e, getChoiceMarkClassNames as t } from "../choices/choice-class-names.js";
+import { choiceMotionProps as n, choicePressClass as r } from "../choices/choice-motion.js";
+import { ChoiceLeading as i } from "../choices/ChoiceLeading.js";
+import { ChoiceText as a } from "../choices/ChoiceText.js";
 import o from "clsx";
 import { forwardRef as s, useId as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
@@ -13,6 +12,12 @@ var f = s(function({ label: s, hideLabel: f, description: p, disabledReason: m,
 	let T = c(), E = h ? m : void 0;
 	return /* @__PURE__ */ u(d.Root, {
 		...C,
+		onPointerDownCapture: (e) => {
+			n.onPointerDownCapture(e), C.onPointerDownCapture?.(e);
+		},
+		onKeyDownCapture: (e) => {
+			n.onKeyDownCapture(e), C.onKeyDownCapture?.(e);
+		},
 		ref: w,
 		disabled: h,
 		indeterminate: y,
@@ -20,21 +25,34 @@ var f = s(function({ label: s, hideLabel: f, description: p, disabledReason: m,
 		"aria-label": s,
 		"aria-describedby": [S, p || E || _?.length ? T : void 0].filter(Boolean).join(" ") || void 0,
 		"data-variant": g,
-		className: o("pf-choice pf-checkbox", t(g), b),
+		className: o("pf-choice pf-checkbox", e(g), b),
 		children: [
 			/* @__PURE__ */ l("span", {
-				className: o("pf-choice-mark", n(g)),
+				className: o("pf-choice-mark", t(g), r),
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ l(d.Indicator, {
-					className: "pf-checkbox-indicator pf:flex",
-					children: l(y ? a : e, {
-						size: 12,
-						tone: "inherit"
+					keepMounted: !0,
+					className: "pf-checkbox-indicator pf:flex pf:data-unchecked:opacity-0 pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-opacity pf:duration-150",
+					children: /* @__PURE__ */ l("svg", {
+						width: "12",
+						height: "12",
+						viewBox: "0 0 12 12",
+						fill: "none",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ l("path", {
+							d: y ? "M2.5 6H9.5" : "M2.5 6L5 8.5L9.5 3.5",
+							pathLength: "1",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							className: "pf:[stroke-dasharray:1] pf:[stroke-dashoffset:1] pf:group-data-checked/choice:[stroke-dashoffset:0] pf:group-data-indeterminate/choice:[stroke-dashoffset:0] pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-[stroke-dashoffset] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]"
+						})
 					})
 				})
 			}),
-			/* @__PURE__ */ l(r, { children: v }),
-			/* @__PURE__ */ l(i, {
+			/* @__PURE__ */ l(i, { children: v }),
+			/* @__PURE__ */ l(a, {
 				label: s,
 				hideLabel: f,
 				description: p,

package/dist/components/choices/choice-motion.d.ts

@@ -0,0 +1,12 @@
+import type { KeyboardEvent, PointerEvent } from 'react';
+/** Pointer feedback is decorative; keyboard changes stay immediate. */
+export declare const choiceMotionProps: {
+    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    onKeyDownCapture: (event: KeyboardEvent<HTMLElement>) => void;
+};
+export declare const choicePressClass = "pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-transform pf:motion-safe:group-data-[motion=pointer]/choice:duration-100 pf:motion-safe:group-data-[motion=pointer]/choice:group-active/choice:duration-150 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-safe:group-data-[motion=pointer]/choice:group-not-data-disabled/choice:group-not-data-readonly/choice:group-active/choice:scale-[0.9]";
+/** Composite options own interaction while their checkboxes only mirror selection. */
+export declare const choiceIndicatorMotionProps: {
+    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    onKeyDownCapture: (event: KeyboardEvent<HTMLElement>) => void;
+};

package/dist/components/choices/choice-motion.js

@@ -0,0 +1,22 @@
+//#region src/components/choices/choice-motion.ts
+var e = {
+	onPointerDownCapture: (e) => {
+		e.currentTarget.setAttribute("data-motion", "pointer");
+	},
+	onKeyDownCapture: (e) => {
+		e.currentTarget.removeAttribute("data-motion");
+	}
+}, t = "pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-transform pf:motion-safe:group-data-[motion=pointer]/choice:duration-100 pf:motion-safe:group-data-[motion=pointer]/choice:group-active/choice:duration-150 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-safe:group-data-[motion=pointer]/choice:group-not-data-disabled/choice:group-not-data-readonly/choice:group-active/choice:scale-[0.9]", n = {
+	onPointerDownCapture: (e) => {
+		e.currentTarget.querySelectorAll(".pf-checkbox").forEach((e) => {
+			e.setAttribute("data-motion", "pointer");
+		});
+	},
+	onKeyDownCapture: (e) => {
+		e.currentTarget.querySelectorAll(".pf-checkbox").forEach((e) => {
+			e.removeAttribute("data-motion");
+		});
+	}
+};
+//#endregion
+export { n as choiceIndicatorMotionProps, e as choiceMotionProps, t as choicePressClass };

package/dist/components/code-block/CodeBlock.js

@@ -42,13 +42,14 @@ var c = ({ code: c, language: l = "text", filename: u, variant: d = "code", line
 				})] }), /* @__PURE__ */ o("span", {
 					className: "pf:truncate pf:text-soft-pearl-800",
 					title: l,
-					children: l
+					children: l.toUpperCase()
 				})]
 			}), m?.enabled !== !1 && /* @__PURE__ */ o("span", {
 				className: "pf:shrink-0",
 				children: /* @__PURE__ */ o(e, {
 					text: c,
-					config: m
+					config: m,
+					size: "sm"
 				})
 			})]
 		}), /* @__PURE__ */ o("div", {

package/dist/components/controls/control-class-names.d.ts

@@ -1,3 +1,4 @@
+export declare const controlPressClassNames = "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!";
 export declare const controlFocusClassNames: string;
 declare const sizeClassNames: {
     xs: string;

package/dist/components/controls/control-class-names.js

@@ -1,29 +1,29 @@
 import e from "clsx";
 //#region src/components/controls/control-class-names.ts
-var t = e("pf:focus-visible:outline-2 pf:focus-visible:outline-solid pf:focus-visible:outline-blue-700", "pf:focus-visible:outline-offset-2 pf:focus-visible:shadow-[0_0_0_2px_var(--pf-color-background)]"), n = e("pf:box-border pf:relative pf:inline-flex pf:items-center pf:justify-center pf:min-w-0 pf:max-w-full", "pf:border-solid pf:font-body pf:font-medium pf:no-underline pf:cursor-pointer pf:align-middle", "pf:[-webkit-tap-highlight-color:transparent] pf:transition-[background-color,border-color,color]", "pf:duration-(--pf-duration-instant) pf:motion-reduce:transition-none"), r = {
+var t = "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!", n = e("pf:focus-visible:outline-2 pf:focus-visible:outline-solid pf:focus-visible:outline-blue-700", "pf:focus-visible:outline-offset-2 pf:focus-visible:shadow-[0_0_0_2px_var(--pf-color-background)]"), r = e("pf:box-border pf:relative pf:inline-flex pf:items-center pf:justify-center pf:min-w-0 pf:max-w-full", "pf:border-solid pf:font-body pf:font-medium pf:no-underline pf:cursor-pointer pf:align-middle", "pf:[-webkit-tap-highlight-color:transparent] pf:transition-[background-color,border-color,color]", "pf:duration-(--pf-duration-instant) pf:motion-reduce:transition-none"), i = {
 	xs: "pf:min-h-[24px] pf:gap-sm pf:px-lg pf:py-xs pf:text-label-13-strong",
 	sm: "pf:min-h-[28px] pf:gap-xs pf:px-md pf:py-xs pf:text-label-13-strong",
 	md: "pf:min-h-[32px] pf:gap-sm pf:px-lg pf:py-xs pf:text-label-13-strong",
 	lg: "pf:min-h-[36px] pf:gap-sm pf:px-lg pf:py-xs pf:text-label-15-strong"
-}, i = {
+}, a = {
 	primary: e("pf:border-0 pf:rounded-md pf:text-background pf:bg-blue-700 pf:not-data-disabled:hover:bg-blue-800", "pf:not-data-disabled:active:bg-blue-800 pf:data-popup-open:bg-blue-800 pf:aria-expanded:bg-blue-800"),
 	secondary: e("pf:border pf:rounded-md pf:border-soft-pearl-400 pf:text-soft-pearl-1000 pf:bg-background", "pf:not-data-disabled:hover:bg-soft-pearl-200 pf:not-data-disabled:hover:border-soft-pearl-500", "pf:not-data-disabled:active:bg-soft-pearl-300 pf:data-popup-open:bg-soft-pearl-200", "pf:aria-expanded:bg-soft-pearl-200"),
 	tertiary: e("pf:border-0 pf:rounded-md pf:bg-transparent pf:not-data-disabled:hover:bg-soft-pearl-200", "pf:not-data-disabled:active:bg-soft-pearl-300 pf:data-popup-open:bg-soft-pearl-200", "pf:aria-expanded:bg-soft-pearl-200"),
 	plain: "pf:border-0 pf:rounded-md pf:bg-transparent pf:text-soft-pearl-800 pf:not-data-disabled:hover:text-soft-pearl-1000",
 	link: "pf:border-0 pf:rounded-xs pf:bg-transparent pf:text-blue-700 pf:not-data-disabled:hover:text-blue-800 pf:not-data-disabled:hover:underline",
 	"link-subtle": e("pf:border-0 pf:rounded-xs pf:bg-transparent pf:text-soft-pearl-1000 pf:font-normal pf:underline", "pf:decoration-soft-pearl-500 pf:underline-offset-2 pf:not-data-disabled:hover:decoration-current")
-}, a = {
+}, o = {
 	primary: "pf:border-0 pf:rounded-md pf:bg-red-700 pf:text-background pf:not-data-disabled:hover:bg-red-800 pf:not-data-disabled:active:bg-red-800",
 	secondary: e("pf:border pf:rounded-md pf:border-red-400 pf:bg-background pf:text-red-700", "pf:not-data-disabled:hover:bg-red-100 pf:not-data-disabled:hover:border-red-500", "pf:not-data-disabled:active:bg-red-200 pf:not-data-disabled:active:text-red-800"),
 	tertiary: "pf:border-0 pf:rounded-md pf:bg-transparent pf:text-red-700 pf:not-data-disabled:hover:bg-red-100 pf:not-data-disabled:active:bg-red-200 pf:not-data-disabled:active:text-red-800"
-}, o = ({ variant: o, size: s, destructive: c, disabled: l, loading: u, iconOnly: d }) => {
-	let f = o === "link" || o === "link-subtle", p = c && (o === "primary" || o === "secondary" || o === "tertiary") ? a[o] : void 0;
-	return e(n, t, f ? e("pf:min-h-0 pf:p-0 pf:gap-sm", s === "lg" ? "pf:text-label-15-strong" : "pf:text-label-13-strong") : r[s], l ? e("pf:text-soft-pearl-600 pf:cursor-not-allowed", f ? "pf:rounded-xs" : "pf:rounded-md", o === "link-subtle" && "pf:font-normal pf:underline pf:decoration-soft-pearl-500 pf:underline-offset-2", o === "primary" || o === "secondary" ? "pf:bg-soft-pearl-100 pf:border pf:border-soft-pearl-300" : "pf:bg-transparent pf:border-0") : p ?? i[o], u && "pf:cursor-progress", d && "pf:p-0! pf:shrink-0", d && {
+}, s = ({ variant: t, size: s, destructive: c, disabled: l, loading: u, iconOnly: d }) => {
+	let f = t === "link" || t === "link-subtle", p = c && (t === "primary" || t === "secondary" || t === "tertiary") ? o[t] : void 0;
+	return e(r, n, f ? e("pf:min-h-0 pf:p-0 pf:gap-sm", s === "lg" ? "pf:text-label-15-strong" : "pf:text-label-13-strong") : i[s], l ? e("pf:text-soft-pearl-600 pf:cursor-not-allowed", f ? "pf:rounded-xs" : "pf:rounded-md", t === "link-subtle" && "pf:font-normal pf:underline pf:decoration-soft-pearl-500 pf:underline-offset-2", t === "primary" || t === "secondary" ? "pf:bg-soft-pearl-100 pf:border pf:border-soft-pearl-300" : "pf:bg-transparent pf:border-0") : p ?? a[t], u && "pf:cursor-progress", d && "pf:p-0! pf:shrink-0", d && {
 		xs: "pf:size-[24px]",
 		sm: "pf:size-[28px]",
 		md: "pf:size-[32px]",
 		lg: "pf:size-[36px]"
-	}[s], o === "tertiary" && !l && !c && (d ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000"));
+	}[s], t === "tertiary" && !l && !c && (d ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000"));
 };
 //#endregion
-export { t as controlFocusClassNames, o as getControlClassNames };
+export { n as controlFocusClassNames, t as controlPressClassNames, s as getControlClassNames };

package/dist/components/controls/useHoverHighlight.d.ts

@@ -0,0 +1,12 @@
+import { type PointerEvent } from 'react';
+/** One decorative highlight; primitives retain focus, selection and activation. */
+export declare const useHoverHighlight: () => {
+    props: {
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: () => void;
+        onKeyDownCapture: () => void;
+        onScrollCapture: () => void;
+    };
+    highlight: import("react/jsx-runtime").JSX.Element;
+};
+export declare const hoverHighlightClass = "pf:relative pf:[&[data-pointer-highlight]_[data-highlighted]]:bg-transparent!";

package/dist/components/controls/useHoverHighlight.js

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/controls/useHoverHighlight.tsx
+var r = () => {
+	let r = t(null), i = t(null), a = t(null), o = t(null), s = () => {
+		o.current?.cancel(), i.current?.removeAttribute("data-pointer-highlight"), r.current && (r.current.hidden = !0), a.current = null;
+	};
+	return e(() => () => {
+		o.current?.cancel();
+	}, []), {
+		props: {
+			onPointerMove: (e) => {
+				if (e.pointerType !== "mouse" || typeof matchMedia != "function" || !matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+				let t = e.currentTarget, n = e.target.closest("[role=\"menuitem\"], [role=\"option\"]"), c = r.current;
+				if (!n || !t.contains(n) || n.getAttribute("aria-disabled") === "true") {
+					(n || !e.target.closest("[role=\"listbox\"], [role=\"menu\"]")) && s();
+					return;
+				}
+				if (!c || n === a.current) return;
+				let l = t.getBoundingClientRect(), u = n.getBoundingClientRect(), d = a.current && !c.hidden ? c.getBoundingClientRect() : null, f = l.width / t.offsetWidth || 1;
+				o.current?.cancel(), i.current = t, a.current = n, c.hidden = !1, t.setAttribute("data-pointer-highlight", ""), c.toggleAttribute("data-destructive", n.hasAttribute("data-destructive")), Object.assign(c.style, {
+					left: `${String((u.left - l.left) / f + t.scrollLeft - t.clientLeft)}px`,
+					top: `${String((u.top - l.top) / f + t.scrollTop - t.clientTop)}px`,
+					width: `${String(u.width / f)}px`,
+					height: `${String(u.height / f)}px`
+				}), !(matchMedia("(prefers-reduced-motion: reduce)").matches || typeof c.animate != "function") && (o.current = c.animate([{
+					transform: d ? `translate(${String((d.left - u.left) / f)}px, ${String((d.top - u.top) / f)}px) scale(${String(d.width / u.width)}, ${String(d.height / u.height)})` : "none",
+					opacity: +!!d
+				}, {
+					transform: "none",
+					opacity: 1
+				}], {
+					duration: 180,
+					easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+				}));
+			},
+			onPointerLeave: s,
+			onKeyDownCapture: s,
+			onScrollCapture: s
+		},
+		highlight: /* @__PURE__ */ n("div", {
+			ref: r,
+			hidden: !0,
+			"aria-hidden": "true",
+			className: "pf:absolute pf:pointer-events-none pf:origin-top-left pf:rounded-sm pf:bg-soft-pearl-200 pf:data-destructive:bg-red-100"
+		})
+	};
+}, i = "pf:relative pf:[&[data-pointer-highlight]_[data-highlighted]]:bg-transparent!";
+//#endregion
+export { i as hoverHighlightClass, r as useHoverHighlight };

package/dist/components/controls/useSelectionIndicator.d.ts

@@ -1,6 +1,5 @@
-import { type CSSProperties } from 'react';
-/** Measures selection changes and resizing, never React updates on animation frames. */
-export declare function useSelectionIndicator(): {
+/** A single moving surface; only transform animates, including unequal segment widths. */
+export declare function useSelectionIndicator(activeAttribute?: string, itemSelector?: string): {
     rootRef: import("react").RefObject<HTMLDivElement>;
-    indicator: CSSProperties | undefined;
+    indicatorRef: import("react").RefObject<HTMLSpanElement>;
 };

package/dist/components/controls/useSelectionIndicator.js

@@ -1,41 +1,56 @@
-import { useLayoutEffect as e, useRef as t, useState as n } from "react";
+import { useLayoutEffect as e, useRef as t } from "react";
 //#region src/components/controls/useSelectionIndicator.ts
-function r() {
-	let r = t(null), [i, a] = n();
+function n(n = "data-checked", r = "[role=\"radio\"]") {
+	let i = t(null), a = t(null);
 	return e(() => {
-		let e = r.current;
-		if (!e) return;
-		let t = () => {
-			let t = e.querySelector("[data-checked]");
-			if (!t) {
-				a(void 0);
+		let e = i.current, t = a.current;
+		if (!e || !t) return;
+		let o = !1, s, c = null, l = "", u = (r = !1) => {
+			let i = e.querySelector(`[${n}]`);
+			if (!i) {
+				s?.cancel(), l = "", t.hidden = !0, e.removeAttribute("data-indicator"), c = null;
 				return;
 			}
-			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = {
-				width: r.width,
-				height: r.height,
-				transform: `translate(${String(r.left - n.left - e.clientLeft + e.scrollLeft)}px, ${String(r.top - n.top - e.clientTop + e.scrollTop)}px)`
-			};
-			a((e) => e?.width === i.width && e.height === i.height && e.transform === i.transform ? e : i);
+			let a = e.getBoundingClientRect(), u = i.getBoundingClientRect(), d = a.width / e.offsetWidth || 1, f = (u.left - a.left) / d - e.clientLeft + e.scrollLeft, p = (u.top - a.top) / d - e.clientTop + e.scrollTop, m = u.width / d, h = u.height / d, g = `${String(f)},${String(p)},${String(m)},${String(h)}`;
+			if (l === g) return;
+			let _ = t.hidden ? null : t.getBoundingClientRect(), v = r && c !== i && o && _ && typeof matchMedia == "function" && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+			s?.cancel(), c = i, l = g, o = !1;
+			let y = `translate(${String(f)}px, ${String(p)}px)`;
+			Object.assign(t.style, {
+				width: `${String(m)}px`,
+				height: `${String(h)}px`,
+				transform: y
+			}), t.hidden = !1, e.setAttribute("data-indicator", ""), v && typeof t.animate == "function" && (s = t.animate([{ transform: `translate(${String(f + (_.left - u.left) / d)}px, ${String(p + (_.top - u.top) / d)}px) scale(${String(_.width / u.width)}, ${String(_.height / u.height)})` }, { transform: y }], {
+				duration: 200,
+				easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+			}));
+		}, d = () => {
+			o = !0;
+		}, f = () => {
+			o = !1, s?.cancel();
+		}, p = () => {
+			u();
 		};
-		t();
-		let n = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(t);
-		n?.observe(e);
-		for (let t of e.querySelectorAll("[role=\"radio\"]")) n?.observe(t);
-		let i = new MutationObserver(t);
-		return i.observe(e, {
+		u();
+		let m = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
+		m?.observe(e);
+		for (let t of e.querySelectorAll(r)) m?.observe(t);
+		let h = new MutationObserver(() => {
+			u(!0);
+		});
+		return h.observe(e, {
 			subtree: !0,
 			attributes: !0,
-			attributeFilter: ["data-checked"],
+			attributeFilter: [n],
 			childList: !0,
 			characterData: !0
-		}), e.addEventListener("scroll", t, { passive: !0 }), () => {
-			n?.disconnect(), i.disconnect(), e.removeEventListener("scroll", t);
+		}), e.addEventListener("pointerdown", d, !0), e.addEventListener("keydown", f, !0), e.addEventListener("scroll", p, { passive: !0 }), () => {
+			s?.cancel(), m?.disconnect(), h.disconnect(), e.removeEventListener("pointerdown", d, !0), e.removeEventListener("keydown", f, !0), e.removeEventListener("scroll", p);
 		};
-	}, []), {
-		rootRef: r,
-		indicator: i
+	}, [n, r]), {
+		rootRef: i,
+		indicatorRef: a
 	};
 }
 //#endregion
-export { r as useSelectionIndicator };
+export { n as useSelectionIndicator };

package/dist/components/data-grid/DataGrid.js

@@ -5,8 +5,8 @@ import { Skeleton as n } from "../skeleton/Skeleton.js";
 import { EmptyState as r } from "../empty-state/EmptyState.js";
 import { ChevronDownIcon as i } from "../icons/ChevronDownIcon.js";
 import { tabularAlignment as a, tabularClassNames as o } from "../tabular/tabular-class-names.js";
-import { TableEditCell as s } from "../tabular/TableEditCell.js";
-import { useTabularPinning as c } from "../tabular/useTabularPinning.js";
+import { useTabularPinning as s } from "../tabular/useTabularPinning.js";
+import { TableEditCell as c } from "../tabular/TableEditCell.js";
 import { DataGridHeaders as l } from "./DataGridHeaders.js";
 import { DataGridToolbar as u } from "./DataGridToolbar.js";
 import { GridModel as d } from "./grid-model.js";
@@ -17,18 +17,18 @@ import { useId as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/data-grid/DataGrid.tsx
 function y(y) {
-	let [b, x] = g(y.expansionConfig?.defaultValue ?? []), S = y.expansionConfig?.value ?? b, [C, w] = g(null), T = h(), E = d.columns(y.columns), { ref: D, canPin: O } = c((y.rowHeaderConfig.width ?? 240) + Math.min(...E.leaves.map((e) => e.width ?? 128), 240)), k = f(y), A = d.rows(y, S, k.visibleIds), j = A.some((e) => e.kind === "record"), M = p(A.map((e) => e.id), ["", ...E.leaves.map((e) => e.id)]), N = y.stateConfig?.isLoading, P = y.stateConfig?.error, F = (y.rowHeaderConfig.width ?? 240) + E.leaves.reduce((e, t) => e + (t.width ?? 128), 0), I = (e) => {
+	let [b, x] = g(y.expansionConfig?.defaultValue ?? []), S = y.expansionConfig?.value ?? b, [C, w] = g(null), T = h(), E = d.columns(y.columns), { ref: D, canPin: O } = s((y.rowHeaderConfig.width ?? 240) + Math.min(...E.leaves.map((e) => e.width ?? 128), 240)), k = f(y), A = d.rows(y, S, k.visibleIds), j = A.some((e) => e.kind === "record"), M = p(A.map((e) => e.id), ["", ...E.leaves.map((e) => e.id)]), N = y.stateConfig?.isLoading, P = y.stateConfig?.error, F = (y.rowHeaderConfig.width ?? 240) + E.leaves.reduce((e, t) => e + (t.width ?? 128), 0), I = (e) => {
 		if (k.filtered) return;
 		let t = y.rowConfig.getId(e), n = S.includes(t) ? S.filter((e) => e !== t) : [...S, t];
 		x(n), y.expansionConfig?.onValueChange?.(n);
 	}, L = (n) => {
-		let r = n.label ?? y.rowHeaderConfig.getLabel(n.row), c = n.kind === "total", l = n.kind === "subtotal", u = c || l ? "pf:bg-soft-pearl-100" : "pf:bg-background";
+		let r = n.label ?? y.rowHeaderConfig.getLabel(n.row), s = n.kind === "total", l = n.kind === "subtotal", u = s || l ? "pf:bg-soft-pearl-100" : "pf:bg-background";
 		return /* @__PURE__ */ v("tr", { children: [/* @__PURE__ */ _("th", {
 			scope: "row",
 			role: "rowheader",
 			"aria-expanded": n.hasChildren ? n.expanded : void 0,
 			...M.cell(n.id, ""),
-			className: m(o.cell, o.activeCell, "pf:h-[40px] pf:border-e-[0.5px] pf:text-start", O && "pf:sticky pf:start-0 pf:z-10", u, (n.hasChildren || c || l) && "pf:font-medium", c && "pf:sticky pf:bottom-0 pf:z-20 pf:border-t pf:border-t-soft-pearl-400"),
+			className: m(o.cell, o.activeCell, "pf:h-[40px] pf:border-e-[0.5px] pf:text-start", O && "pf:sticky pf:start-0 pf:z-10", O && o.pinnedEdge, u, (n.hasChildren || s || l) && "pf:font-medium", s && "pf:sticky pf:bottom-0 pf:z-20 pf:shadow-[0_-0.5px_0_var(--pf-color-soft-pearl-400)]"),
 			children: /* @__PURE__ */ v("span", {
 				className: "pf:flex pf:items-center pf:gap-md",
 				style: { paddingInlineStart: n.depth * 16 },
@@ -58,8 +58,8 @@ function y(y) {
 				...M.cell(n.id, t.id),
 				"aria-invalid": !!g || void 0,
 				"aria-label": g ? `${r}, ${t.header}: ${String(p ?? "")}. ${g}` : void 0,
-				className: m(f ? o.editableCell : o.cell, o.activeCell, "pf:h-[40px] pf:border-e-[0.5px]", u, a[t.align ?? "end"], (c || l) && "pf:font-medium", c && "pf:sticky pf:bottom-0 pf:z-10 pf:border-t pf:border-t-soft-pearl-400", g && "pf:text-red-800"),
-				children: n.hasChildren && n.expanded ? null : f ? /* @__PURE__ */ _(s, {
+				className: m(f ? o.editableCell : o.cell, o.activeCell, "pf:h-[40px] pf:border-e-[0.5px]", u, a[t.align ?? "end"], (s || l) && "pf:font-medium", s && "pf:sticky pf:bottom-0 pf:z-10 pf:shadow-[0_-0.5px_0_var(--pf-color-soft-pearl-400)]", g && "pf:text-red-800"),
+				children: n.hasChildren && n.expanded ? null : f ? /* @__PURE__ */ _(c, {
 					label: `${r}, ${t.header}`,
 					value: d.getValue(n.row),
 					display: h,

package/dist/components/data-grid/DataGridHeaders.js

@@ -6,7 +6,7 @@ function a({ headers: a, label: o, alignment: s, pinned: c }) {
 	return /* @__PURE__ */ r("thead", { children: a.map((l, u) => /* @__PURE__ */ i("tr", { children: [u === 0 && /* @__PURE__ */ r("th", {
 		scope: "col",
 		rowSpan: a.length,
-		className: n(t.header, "pf:sticky pf:top-0 pf:z-30 pf:bg-soft-pearl-100 pf:text-start pf:align-bottom pf:border-e-[0.5px]", c && "pf:start-0"),
+		className: n(t.header, "pf:sticky pf:top-0 pf:z-30 pf:bg-soft-pearl-100 pf:text-start pf:align-bottom pf:border-e-[0.5px]", c && "pf:start-0", c && t.pinnedEdge),
 		children: o
 	}), l.map((i) => /* @__PURE__ */ r("th", {
 		scope: i.leaf ? "col" : "colgroup",

package/dist/components/date-picker/DateCalendar.js

@@ -32,9 +32,9 @@ var m = {
 	outside: "pf:text-soft-pearl-800",
 	disabled: "pf:text-soft-pearl-600",
 	hidden: "pf:invisible",
-	range_middle: "pf-date-range-middle pf:bg-blue-100 pf:[&.pf-date-range-middle>button:hover]:bg-blue-100 pf:[&.pf-date-range-middle>button]:bg-blue-100 pf:[&.pf-date-range-middle>button]:text-blue-900 pf:[&.pf-date-range-middle>button]:rounded-none pf:[&.pf-date-range-middle>button]:font-normal",
-	range_start: "pf:before:absolute pf:before:inset-y-0 pf:before:start-1/2 pf:before:end-0 pf:before:bg-blue-100",
-	range_end: "pf:before:absolute pf:before:inset-y-0 pf:before:start-0 pf:before:end-1/2 pf:before:bg-blue-100"
+	range_middle: "pf-date-range-middle pf:bg-blue-200 pf:[&.pf-date-range-middle>button:hover]:bg-blue-200 pf:[&.pf-date-range-middle>button]:bg-blue-200 pf:[&.pf-date-range-middle>button]:text-blue-900 pf:[&.pf-date-range-middle>button]:rounded-none pf:[&.pf-date-range-middle>button]:font-normal",
+	range_start: "pf:before:absolute pf:before:inset-y-0 pf:before:start-1/2 pf:before:end-0 pf:before:bg-blue-200",
+	range_end: "pf:before:absolute pf:before:inset-y-0 pf:before:start-0 pf:before:end-1/2 pf:before:bg-blue-200"
 };
 function h({ config: t, value: n, onChange: u }) {
 	let [d, f] = a(!1);

package/dist/components/date-picker/DatePicker.js

@@ -1,10 +1,10 @@
 "use client";
 import { XCloseIcon as e } from "../icons/XCloseIcon.js";
 import { FieldFrame as t, fieldShellClass as n } from "../fields/FieldFrame.js";
-import { useCompositeField as r } from "../fields/useCompositeField.js";
-import { CalendarIcon as i } from "../icons/CalendarIcon.js";
-import { DateValueHelper as a } from "./date-value-helper.js";
-import { DateCalendar as o } from "./DateCalendar.js";
+import { DateValueHelper as r } from "./date-value-helper.js";
+import { DateCalendar as i } from "./DateCalendar.js";
+import { useCompositeField as a } from "../fields/useCompositeField.js";
+import { CalendarIcon as o } from "../icons/CalendarIcon.js";
 import { DateField as s } from "./field/DateField.js";
 import c from "clsx";
 import { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
@@ -17,10 +17,10 @@ var _ = {
 }, v = l(function(l, v) {
 	let y = (e) => {
 		l.mode === "range" ? e && typeof e == "object" && l.onValueChange?.(e) : (typeof e == "string" || e === null) && l.onValueChange?.(e);
-	}, b = r({
+	}, b = a({
 		...l,
 		onValueChange: y
-	}, l.mode === "range" ? _ : null), [x, S] = f(!1), [C, w] = f(), [T, E] = f(), [D, O] = f(0), k = d(null), A = b.value && typeof b.value == "object" ? b.value : _, j = typeof b.value == "string" ? b.value : null, M = (e) => l.mode === "month" ? a.monthError(e, l.constraintConfig) : a.dateError(e, l.constraintConfig), N = l.mode === "range" ? a.rangeError(A, l.constraintConfig) : M(j), P = C || T || N, F = b.error || P, I = l.label ?? l["aria-label"], L = l.disableConfig?.isDisabled, R = L || l.readOnly, z = [b.describedBy, P ? b.supportId : void 0].filter(Boolean).join(" ") || void 0, B = (e) => {
+	}, l.mode === "range" ? _ : null), [x, S] = f(!1), [C, w] = f(), [T, E] = f(), [D, O] = f(0), k = d(null), A = b.value && typeof b.value == "object" ? b.value : _, j = typeof b.value == "string" ? b.value : null, M = (e) => l.mode === "month" ? r.monthError(e, l.constraintConfig) : r.dateError(e, l.constraintConfig), N = l.mode === "range" ? r.rangeError(A, l.constraintConfig) : M(j), P = C || T || N, F = b.error || P, I = l.label ?? l["aria-label"], L = l.disableConfig?.isDisabled, R = L || l.readOnly, z = [b.describedBy, P ? b.supportId : void 0].filter(Boolean).join(" ") || void 0, B = (e) => {
 		b.change(e);
 	}, V = u((e) => {
 		w(e);
@@ -57,7 +57,7 @@ var _ = {
 							disabled: R,
 							"aria-label": `Choose ${I.toLowerCase()}`,
 							className: U,
-							children: /* @__PURE__ */ m(i, { size: 16 })
+							children: /* @__PURE__ */ m(o, { size: 16 })
 						}),
 						/* @__PURE__ */ h("div", {
 							className: "pf:flex pf:flex-1 pf:min-w-0 pf:flex-wrap pf:items-center pf:gap-md",
@@ -74,7 +74,7 @@ var _ = {
 								describedBy: z,
 								invalid: !!b.error,
 								onDraftError: V,
-								validate: (e) => l.mode === "range" ? a.rangeError({
+								validate: (e) => l.mode === "range" ? r.rangeError({
 									...A,
 									start: e
 								}, l.constraintConfig) : M(e),
@@ -99,7 +99,7 @@ var _ = {
 								describedBy: z,
 								invalid: !!b.error,
 								onDraftError: H,
-								validate: (e) => a.rangeError({
+								validate: (e) => r.rangeError({
 									...A,
 									end: e
 								}, l.constraintConfig),
@@ -129,7 +129,7 @@ var _ = {
 					children: /* @__PURE__ */ m(g.Popup, {
 						"aria-label": `${I} calendar`,
 						className: "pf:box-border pf:max-w-[calc(100vw-24px)] pf:overflow-auto pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:shadow-menu pf:font-body pf:text-soft-pearl-1000",
-						children: /* @__PURE__ */ m(o, {
+						children: /* @__PURE__ */ m(i, {
 							config: l,
 							value: b.value,
 							onChange: (e) => {

package/dist/components/date-picker/field/DateField.js

@@ -69,7 +69,7 @@ function h({ id: h, form: g, label: _, value: v, onChange: y, format: b, monthOn
 			placeholder: n[e].placeholder,
 			maxLength: n[e].maxLength,
 			value: A[e],
-			className: o("pf:box-border pf:shrink-0 pf:min-w-0 pf:border-0 pf:bg-transparent pf:font-body pf:text-label-13 pf:text-soft-pearl-1000 pf:p-0 pf:h-[24px] pf:text-center pf:rounded-[2px] pf:outline-none pf:placeholder:text-soft-pearl-700 pf:selection:bg-blue-200 pf:selection:text-soft-pearl-1000", e === "year" ? "pf:w-[40px]" : "pf:w-[28px]"),
+			className: o("pf:box-border pf:shrink-0 pf:min-w-0 pf:border-0 pf:bg-transparent pf:font-body pf:text-label-13 pf:text-soft-pearl-1000 pf:p-0 pf:h-[24px] pf:text-center pf:rounded-[4px] pf:outline-none pf:focus:not-disabled:bg-blue-100 pf:focus:not-disabled:text-blue-900 pf:placeholder:text-soft-pearl-700 pf:selection:bg-transparent pf:selection:text-soft-pearl-1000", e === "year" ? "pf:w-[40px]" : "pf:w-[28px]"),
 			onFocus: (e) => {
 				e.currentTarget.select();
 			},