@commenda/pathfinder 0.0.0-stage → 0.2.0

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,57 @@
+"use client";
+import { overlayBackdropClassNames as e, overlaySurfaceClassNames as t, overlayTitleClassNames as n } from "../overlays/overlay-class-names.js";
+import { OverlayFrame as r } from "../overlays/OverlayFrame.js";
+import { useOverlayState as i } from "../overlays/useOverlayState.js";
+import a from "clsx";
+import { useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Dialog as l } from "@base-ui/react/dialog";
+//#region src/components/dialog/Dialog.tsx
+var u = {
+	sm: "pf:w-[400px]",
+	md: "pf:w-[480px]",
+	lg: "pf:w-[600px]",
+	xl: "pf:w-[800px]"
+};
+function d(d) {
+	let { trigger: f, title: p, description: m, size: h = "lg", children: g, footerConfig: _, dismissConfig: v, focusConfig: y, className: b } = d, x = i(d, v), S = o(null);
+	return /* @__PURE__ */ c(l.Root, {
+		open: x.open,
+		onOpenChange: x.handleOpenChange,
+		disablePointerDismissal: v?.outsidePress === !1,
+		children: [f && /* @__PURE__ */ s(l.Trigger, { render: f }), /* @__PURE__ */ c(l.Portal, { children: [/* @__PURE__ */ s(l.Backdrop, { className: a(e, !x.animate && "pf:transition-none") }), /* @__PURE__ */ s(l.Viewport, {
+			className: "pf:fixed pf:inset-0 pf:z-50 pf:flex pf:items-center pf:justify-center pf:p-xl",
+			children: /* @__PURE__ */ s(l.Popup, {
+				ref: S,
+				initialFocus: y?.initialFocusRef ?? (() => S.current?.querySelector("[data-overlay-body] input:not(:disabled), [data-overlay-body] textarea:not(:disabled), [data-overlay-body] button:not(:disabled), [data-overlay-body] a[href]") ?? S.current),
+				finalFocus: y?.returnFocusRef,
+				"aria-busy": x.pending || void 0,
+				className: a(t, u[h], "pf:max-w-full pf:max-h-[calc(100dvh-32px)]", x.animate && "pf:transition-[opacity,transform] pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:scale(0.98)] pf:motion-safe:data-[ending-style]:[transform:scale(0.98)]", b),
+				children: /* @__PURE__ */ s(r, {
+					closeConfig: d.closeConfig,
+					heading: /* @__PURE__ */ s(l.Title, {
+						className: n,
+						children: p
+					}),
+					description: m && /* @__PURE__ */ s(l.Description, {
+						render: /* @__PURE__ */ s("div", {}),
+						className: "pf:m-0 pf:mt-xs pf:text-copy-13 pf:text-soft-pearl-900 pf:wrap-anywhere",
+						children: m
+					}),
+					footerConfig: _,
+					pending: x.pending,
+					error: x.error,
+					onClose: (e) => {
+						x.requestClose("close", e);
+					},
+					onCancel: (e) => {
+						x.requestClose("cancel", e);
+					},
+					children: g
+				})
+			})
+		})] })]
+	});
+}
+//#endregion
+export { d as Dialog };

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,5 @@
+export type { OverlayAction, OverlayCloseReason, OverlayDismissConfig, OverlayFocusConfig, OverlayFooterConfig, OverlayOpenState, } from '../overlays/overlay-types.js';
+export { ConfirmDialog } from './ConfirmDialog.js';
+export type { ConfirmDialogProps } from './ConfirmDialog.js';
+export { Dialog } from './Dialog.js';
+export type { DialogProps } from './Dialog.js';

package/dist/components/dialog/index.js

@@ -0,0 +1,3 @@
+import { Dialog as e } from "./Dialog.js";
+import { ConfirmDialog as t } from "./ConfirmDialog.js";
+export { t as ConfirmDialog, e as Dialog };

package/dist/components/distribution-bar/DistributionBar.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+import { type DistributionSegment } from './distribution-helper.js';
+export interface DistributionBarProps {
+    label: string;
+    segments: readonly DistributionSegment[];
+    total?: number;
+    /** Hide only the visual heading; label still names the figure. The host owns regrouping. */
+    headerConfig?: false | {
+        meta?: ReactNode;
+        actions?: ReactNode;
+    };
+    size?: 'sm' | 'md';
+    legend?: 'inline' | 'list' | 'none';
+    formatValue?: (value: number) => string;
+    highlightConfig?: {
+        activeId: string | null;
+        onActiveChange: (id: string | null) => void;
+    };
+    className?: string;
+}
+/** DISTRIBUTION-001: Figma 876:59943. 6/8px track, 2px gaps, data palette; colors follow IDs, not ranks.
+ * DISTRIBUTION-002: Six visible groups maximum (five plus Other). Preserve members and original numeric shares.
+ * DISTRIBUTION-003: Remainder stays as track; overflow scales geometry to sum and announces the original total.
+ * DISTRIBUTION-005: Optional visual header retains the accessible label; regrouping and metadata belong to the host.
+ * DISTRIBUTION-004: Minimum 4px geometry aids visibility, not numeric precision. Text is always available.
+ */
+export declare function DistributionBar({ label, segments, total, headerConfig, size, legend, formatValue, highlightConfig, className, }: DistributionBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/distribution-bar/DistributionBar.js

@@ -0,0 +1,161 @@
+"use client";
+import { Tooltip as e } from "../tooltip/Tooltip.js";
+import { Alert as t } from "../alert/Alert.js";
+import { DistributionHelper as n, dataColors as r } from "./distribution-helper.js";
+import i from "clsx";
+import { useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/distribution-bar/DistributionBar.tsx
+function l({ label: l, segments: u, total: d, headerConfig: f, size: p = "md", legend: m = "inline", formatValue: h = (e) => new Intl.NumberFormat("en").format(e), highlightConfig: g, className: _ }) {
+	let [v, y] = o(!0), b = a(), [x, S] = o(null), C = g ? g.activeId : x, w = (e) => {
+		g || S(e), g?.onActiveChange(e);
+	}, T = n.prepare(u, d);
+	if (T.invalid) return /* @__PURE__ */ s(t, {
+		tone: "error",
+		title: l,
+		description: "Distribution requires unique IDs, finite non-negative values, and a positive total when values are present."
+	});
+	let E = (e) => n.percentage(e, T.base), D = T.visible.filter((e) => e.value > 0), O = (e) => C === null || e === C || e === T.otherId && T.grouped.some((e) => e.id === C);
+	return /* @__PURE__ */ c("figure", {
+		"aria-labelledby": b,
+		"data-motion": v ? "pointer" : void 0,
+		onPointerDownCapture: () => {
+			y(!0);
+		},
+		onPointerMoveCapture: () => {
+			y(!0);
+		},
+		onKeyDownCapture: () => {
+			y(!1);
+		},
+		className: i("pf:group/distribution pf:m-0 pf:flex pf:min-w-0 pf:flex-col pf:gap-md pf:font-body pf:text-label-13 pf:text-soft-pearl-1000", _),
+		children: [
+			/* @__PURE__ */ c("figcaption", {
+				className: i("pf:flex pf:flex-wrap pf:items-center pf:justify-between pf:gap-md", f === !1 && "pf:sr-only"),
+				children: [
+					/* @__PURE__ */ s("span", {
+						id: b,
+						className: "pf:min-w-0 pf:font-medium pf:wrap-anywhere",
+						children: l
+					}),
+					f && /* @__PURE__ */ s("span", {
+						className: "pf:flex pf:flex-wrap pf:items-center pf:gap-md pf:text-soft-pearl-800",
+						children: f.meta
+					}),
+					f && f.actions && /* @__PURE__ */ s("div", {
+						className: "pf:flex pf:flex-wrap pf:items-center pf:gap-md",
+						children: f.actions
+					})
+				]
+			}),
+			T.sum > T.base && /* @__PURE__ */ s(t, {
+				tone: "warning",
+				description: `Allocation totals ${E(T.sum)}. The bar is scaled to the allocated amount.`
+			}),
+			/* @__PURE__ */ s("div", {
+				className: i("pf:grid pf:w-full pf:min-w-0 pf:gap-xxs pf:rounded-[4px] pf:overflow-hidden pf:bg-soft-pearl-200 pf:transition-none pf:motion-safe:group-data-[motion=pointer]/distribution:transition-[grid-template-columns] pf:duration-200 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", p === "sm" ? "pf:h-[6px]" : "pf:h-[8px]"),
+				style: { gridTemplateColumns: [...D.map((e) => `minmax(4px, ${String(e.value)}fr)`), ...T.remainder ? [`minmax(0, ${String(T.remainder)}fr)`] : []].join(" ") },
+				children: D.map((t) => /* @__PURE__ */ s(e, {
+					content: t.id === T.otherId ? T.grouped.map((e) => `${e.label}: ${h(e.value)} (${E(e.value)})`).join("; ") : `${t.label}: ${h(t.value)} (${E(t.value)})`,
+					trigger: /* @__PURE__ */ s("button", {
+						type: "button",
+						tabIndex: -1,
+						"aria-label": `${t.label} segment`,
+						onPointerEnter: () => {
+							w(t.id);
+						},
+						onPointerLeave: () => {
+							w(null);
+						},
+						onClick: () => {
+							w(C === t.id ? null : t.id);
+						},
+						className: "pf:min-w-0 pf:border-0 pf:p-0 pf:cursor-pointer pf:transition-none pf:motion-safe:group-data-[motion=pointer]/distribution:transition-opacity pf:duration-120 pf:ease-out",
+						style: {
+							backgroundColor: r[t.color],
+							opacity: O(t.id) ? 1 : .45
+						}
+					})
+				}, t.id))
+			}),
+			/* @__PURE__ */ s("ul", {
+				className: i("pf:m-0 pf:p-0 pf:list-none pf:min-w-0", m === "none" ? "pf:sr-only pf:focus-within:not-sr-only" : m === "list" ? "pf:flex pf:flex-col" : "pf:flex pf:flex-wrap pf:gap-x-xl pf:gap-y-md"),
+				children: T.visible.map((t) => {
+					let n = `${t.label}: ${h(t.value)} (${E(t.value)})`, a = t.id === T.otherId ? `${n}. ${T.grouped.map((e) => `${e.label}: ${h(e.value)} (${E(e.value)})`).join("; ")}` : n;
+					return /* @__PURE__ */ c("li", {
+						className: i("pf:min-w-0", m === "list" && "pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
+						children: [/* @__PURE__ */ s(e, {
+							content: a,
+							trigger: /* @__PURE__ */ c("button", {
+								type: "button",
+								"aria-label": n,
+								onFocus: () => {
+									w(t.id);
+								},
+								onBlur: () => {
+									w(null);
+								},
+								onPointerEnter: () => {
+									w(t.id);
+								},
+								onPointerLeave: () => {
+									w(null);
+								},
+								onClick: () => {
+									w(C === t.id ? null : t.id);
+								},
+								className: i("pf:flex pf:w-full pf:min-w-0 pf:items-center pf:gap-sm pf:border-0 pf:rounded-xs pf:cursor-pointer pf:bg-transparent pf:p-0 pf:text-start pf:font-body pf:text-label-12 pf:text-soft-pearl-900 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700", m === "list" && "pf:py-sm"),
+								children: [
+									/* @__PURE__ */ s("span", {
+										"aria-hidden": "true",
+										className: "pf:size-[8px] pf:rounded-full pf:shrink-0",
+										style: { backgroundColor: r[t.color] }
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "pf:min-w-0 pf:flex-1 pf:wrap-anywhere",
+										children: t.label
+									}),
+									m === "list" && /* @__PURE__ */ s("span", {
+										className: "pf:tabular-nums pf:shrink-0",
+										children: h(t.value)
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "pf:tabular-nums pf:shrink-0 pf:text-soft-pearl-800",
+										children: E(t.value)
+									})
+								]
+							})
+						}), t.id === T.otherId && /* @__PURE__ */ s("ul", {
+							className: "pf:sr-only",
+							children: T.grouped.map((e) => /* @__PURE__ */ c("li", { children: [
+								/* @__PURE__ */ s("span", { children: e.label }),
+								": ",
+								h(e.value),
+								" (",
+								E(e.value),
+								")"
+							] }, e.id))
+						})]
+					}, t.id);
+				})
+			}),
+			T.remainder > 0 && /* @__PURE__ */ c("p", {
+				className: "pf:m-0 pf:text-copy-12 pf:text-soft-pearl-800",
+				children: [
+					"Unallocated: ",
+					h(T.remainder),
+					" (",
+					E(T.remainder),
+					")"
+				]
+			}),
+			T.sum === 0 && /* @__PURE__ */ s("p", {
+				role: "status",
+				className: "pf:m-0 pf:text-copy-12 pf:text-soft-pearl-800",
+				children: "No allocation yet."
+			})
+		]
+	});
+}
+//#endregion
+export { l as DistributionBar };

package/dist/components/distribution-bar/distribution-helper.d.ts

@@ -0,0 +1,20 @@
+export type DataColorToken = '1' | '2' | '3' | '4' | '5' | '6' | 'other' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface DistributionSegment {
+    id: string;
+    label: string;
+    value: number;
+    color: DataColorToken;
+}
+export declare const dataColors: Record<DataColorToken, string>;
+export declare class DistributionHelper {
+    static prepare(segments: readonly DistributionSegment[], total?: number): {
+        sum: number;
+        base: number;
+        invalid: boolean;
+        visible: DistributionSegment[];
+        grouped: DistributionSegment[];
+        otherId: string;
+        remainder: number;
+    };
+    static percentage(value: number, total: number): string;
+}

package/dist/components/distribution-bar/distribution-helper.js

@@ -0,0 +1,43 @@
+//#region src/components/distribution-bar/distribution-helper.ts
+var e = {
+	1: "var(--pf-color-data-1)",
+	2: "var(--pf-color-data-2)",
+	3: "var(--pf-color-data-3)",
+	4: "var(--pf-color-data-4)",
+	5: "var(--pf-color-data-5)",
+	6: "var(--pf-color-data-6)",
+	other: "var(--pf-color-soft-pearl-400)",
+	success: "var(--pf-color-green-600)",
+	warning: "var(--pf-color-amber-600)",
+	error: "var(--pf-color-red-600)",
+	info: "var(--pf-color-blue-600)",
+	neutral: "var(--pf-color-soft-pearl-600)"
+}, t = class {
+	static prepare(e, t) {
+		let n = e.reduce((e, t) => e + t.value, 0), r = t ?? n, i = e.some((e) => !Number.isFinite(e.value) || e.value < 0) || !Number.isFinite(r) || !Number.isFinite(n) || r < 0 || r === 0 && n > 0 || new Set(e.map((e) => e.id)).size !== e.length, a = [...e].sort((e, t) => t.value - e.value || e.id.localeCompare(t.id)), o = "__other__";
+		for (; e.some((e) => e.id === o);) o = `_${o}`;
+		let s = a.length > 6 ? a.slice(5) : [];
+		return {
+			sum: n,
+			base: r,
+			invalid: i,
+			visible: s.length ? [...a.slice(0, 5), {
+				id: o,
+				label: "Other",
+				value: s.reduce((e, t) => e + t.value, 0),
+				color: "other"
+			}] : a,
+			grouped: s,
+			otherId: o,
+			remainder: Math.max(0, r - n)
+		};
+	}
+	static percentage(e, t) {
+		return new Intl.NumberFormat("en", {
+			style: "percent",
+			maximumFractionDigits: 2
+		}).format(t > 0 ? e / t : 0);
+	}
+};
+//#endregion
+export { t as DistributionHelper, e as dataColors };

package/dist/components/distribution-bar/index.d.ts

@@ -0,0 +1,3 @@
+export type { DataColorToken, DistributionSegment, } from './distribution-helper.js';
+export { DistributionBar } from './DistributionBar.js';
+export type { DistributionBarProps } from './DistributionBar.js';

package/dist/components/distribution-bar/index.js

@@ -0,0 +1 @@
+export { DistributionBar } from "./DistributionBar.js";

package/dist/components/drag-handle/DragHandle.d.ts

@@ -0,0 +1,17 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+export interface DragHandleProps extends Omit<BaseButton.Props, 'className' | 'children' | 'aria-label'> {
+    label: string;
+    dragging?: boolean;
+    disabledReason?: string;
+    className?: string;
+}
+/**
+ * Design rules: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=694-2
+ * DRAG-ALTERNATIVES-01: Sortable owner supplies Space/Enter pickup/drop, arrows, Escape cancel, announcements.
+ * Also provide Move up/down/to top; touch owner uses 250ms long press and active-drag scroll prevention.
+ * DRAG-GEOMETRY-01: Leading inside row; reserve space, reveal on hover/focus, always show on touch.
+ * Desktop glyph 16 in 16x24; touch target 44. Pinned items need a reason.
+ * Whole-item tabs/cards do not get handles. Use ResizeHandle for resizing panes and edges.
+ * Full rules: /docs/components/drag-handle.
+ */
+export declare const DragHandle: import("react").ForwardRefExoticComponent<Omit<DragHandleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/drag-handle/DragHandle.js

@@ -0,0 +1,37 @@
+"use client";
+import { ControlHint as e } from "../controls/ControlHint.js";
+import { DragHandleIcon as t } from "../icons/DragHandleIcon.js";
+import n from "clsx";
+import { Button as r } from "@base-ui/react/button";
+import { forwardRef as i, useId as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/drag-handle/DragHandle.tsx
+var l = i(({ label: i, dragging: l = !1, disabled: u = !1, disabledReason: d, className: f, type: p = "button", focusableWhenDisabled: m, "aria-describedby": h, ...g }, _) => {
+	let v = a(), y = u ? d : void 0;
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(e, {
+		label: y ? `${i}: ${y}` : void 0,
+		children: /* @__PURE__ */ s(r, {
+			...g,
+			ref: _,
+			type: p,
+			"aria-label": i,
+			disabled: u,
+			focusableWhenDisabled: m ?? !!y,
+			"aria-describedby": [h, y ? v : void 0].filter(Boolean).join(" ") || void 0,
+			"data-dragging": l || void 0,
+			"data-unavailable": u || void 0,
+			className: n(n("pf-control pf-drag-handle pf:box-border pf:inline-flex pf:items-center pf:justify-center pf:w-[16px]", "pf:h-[24px] pf:min-h-[24px] pf:p-0 pf:border-0 pf:rounded-xs pf:bg-transparent pf:shrink-0 pf:cursor-grab", "pf:focus-visible:outline-1 pf:focus-visible:outline-solid pf:focus-visible:outline-blue-700", "pf:focus-visible:outline-offset-0 pf:focus-visible:shadow-[0_0_0_3px_var(--pf-color-blue-200)]", "pf:pointer-coarse:size-[44px] pf:pointer-coarse:min-h-[44px]"), u ? "pf:text-soft-pearl-400 pf:cursor-not-allowed" : l ? "pf:text-soft-pearl-900 pf:cursor-grabbing" : "pf:text-soft-pearl-700 pf:hover:text-soft-pearl-800 pf:active:text-soft-pearl-900 pf:active:cursor-grabbing", f),
+			children: /* @__PURE__ */ s(t, {
+				size: 16,
+				tone: "inherit"
+			})
+		})
+	}), y && /* @__PURE__ */ s("span", {
+		className: "pf-control-sr pf:sr-only",
+		id: v,
+		children: y
+	})] });
+});
+l.displayName = "PathfinderDragHandle";
+//#endregion
+export { l as DragHandle };

package/dist/components/drag-handle/index.d.ts

@@ -0,0 +1,2 @@
+export { DragHandle } from './DragHandle.js';
+export type { DragHandleProps } from './DragHandle.js';

package/dist/components/drag-handle/index.js

@@ -0,0 +1 @@
+export { DragHandle } from "./DragHandle.js";

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { DropdownProps } from './dropdown-types.js';
+/**
+ * Design rules: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=92-2
+ * DROPDOWN-SEMANTICS-01: Commands and native destinations. Future Select reuses presentation, not Menu semantics.
+ * DROPDOWN-RECURSION-01: Acyclic data, stable IDs; action, link and submenu are mutually exclusive.
+ * DROPDOWN-ACTIONS-01: Group actions; destructive last, never first/alone; app owns confirmation.
+ * CONTROL-CONFLICT-03: Rendered instance uses 8px padding/32px rows, unlike prose 6/36.
+ * Keyboard opening is immediate; pointer opening originates at the trigger.
+ * Full rules: /docs/components/dropdown.
+ */
+export declare const Dropdown: ({ menu, trigger, disabled, disabledReason, open, defaultOpen, onOpenChange, ...position }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { ControlHint as e } from "../controls/ControlHint.js";
+import { isPointerMenuEvent as t } from "./menu-motion.js";
+import { MenuContent as n } from "./MenuContent.js";
+import { useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Menu as s } from "@base-ui/react/menu";
+//#region src/components/dropdown/Dropdown.tsx
+var c = ({ menu: c, trigger: l, disabled: u = !1, disabledReason: d, open: f, defaultOpen: p, onOpenChange: m, ...h }) => {
+	let g = r(), [_, v] = i(!1), y = u ? d : void 0;
+	return /* @__PURE__ */ o(s.Root, {
+		open: f,
+		defaultOpen: p,
+		disabled: u,
+		onOpenChange: (e, n) => {
+			v(t(n.event)), m?.(e);
+		},
+		children: [
+			/* @__PURE__ */ a(e, {
+				label: y,
+				children: /* @__PURE__ */ a(s.Trigger, {
+					render: l,
+					disabled: u,
+					"aria-describedby": y ? g : void 0
+				})
+			}),
+			y && /* @__PURE__ */ a("span", {
+				className: "pf-control-sr pf:sr-only",
+				id: g,
+				children: y
+			}),
+			/* @__PURE__ */ a(n, {
+				animate: _,
+				menu: c,
+				...h
+			})
+		]
+	});
+};
+//#endregion
+export { c as Dropdown };

package/dist/components/dropdown/MenuContent.d.ts

@@ -0,0 +1,9 @@
+import type { DropdownMenu, DropdownPositionProps } from './dropdown-types.js';
+interface MenuContentProps extends DropdownPositionProps {
+    menu: DropdownMenu;
+    animate?: boolean;
+    finalFocus?: () => HTMLElement | boolean | null;
+}
+/** Presentation is shared by root and every submenu; Base UI owns their semantics. */
+export declare const MenuContent: ({ menu, animate, finalFocus, side, align, sideOffset, portalContainer, }: MenuContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/dropdown/MenuContent.js

@@ -0,0 +1,184 @@
+"use client";
+import { ControlIcon as e } from "../controls/ControlIcon.js";
+import { isPointerMenuEvent as t } from "./menu-motion.js";
+import { NavigationLink as n } from "../controls/NavigationLink.js";
+import { hoverHighlightClass as r, useHoverHighlight as i } from "../controls/useHoverHighlight.js";
+import { ChevronRightIcon as a } from "../icons/ChevronRightIcon.js";
+import { SearchMdIcon as o } from "../icons/SearchMdIcon.js";
+import { Input as s } from "../input/Input.js";
+import c from "clsx";
+import { Fragment as l, useId as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Menu as h } from "@base-ui/react/menu";
+import { useDirection as g } from "@base-ui/react/direction-provider";
+//#region src/components/dropdown/MenuContent.tsx
+var _ = ({ item: t }) => {
+	let n = g();
+	return /* @__PURE__ */ m(f, { children: [
+		t.leadingIcon && /* @__PURE__ */ p(e, {
+			size: 16,
+			children: t.leadingIcon
+		}),
+		/* @__PURE__ */ m("span", {
+			className: "pf-menu-text pf:flex pf:flex-col pf:flex-1 pf:min-w-0 pf:wrap-anywhere",
+			children: [
+				/* @__PURE__ */ p("span", { children: t.label }),
+				t.description && /* @__PURE__ */ p("span", {
+					className: "pf-menu-description pf:text-soft-pearl-800 pf:font-body pf:text-copy-12 pf:font-normal",
+					children: t.description
+				}),
+				t.disabled && t.disabledReason && /* @__PURE__ */ p("span", {
+					className: "pf-menu-description pf:text-soft-pearl-800 pf:font-body pf:text-copy-12 pf:font-normal",
+					children: t.disabledReason
+				})
+			]
+		}),
+		t.trailingText && /* @__PURE__ */ p("span", {
+			className: "pf-menu-meta pf:shrink pf:min-w-0 pf:max-w-[40%] pf:wrap-anywhere pf:text-soft-pearl-800 pf:font-body pf:text-[length:var(--pf-text-label-12)] pf:leading-[20px] pf:font-normal",
+			children: t.trailingText
+		}),
+		t.trailingIcon && /* @__PURE__ */ p(e, {
+			size: 16,
+			children: t.trailingIcon
+		}),
+		t.type === "submenu" && /* @__PURE__ */ p("span", {
+			className: c("pf-menu-chevron pf:flex pf:items-center pf:justify-center pf:shrink-0 pf:text-soft-pearl-800", n === "rtl" && "pf:rotate-180"),
+			children: /* @__PURE__ */ p(a, {
+				size: 16,
+				tone: "inherit"
+			})
+		})
+	] });
+}, v = ({ item: e, portalContainer: r, motionIndex: i }) => {
+	let a = u(), [o, s] = d(!1), l = [e.description, e.disabled ? e.disabledReason : void 0].filter(Boolean).join(". "), g = {
+		className: c([
+			"pf:delay-0",
+			"pf:delay-[18ms]",
+			"pf:delay-[36ms]",
+			"pf:delay-[54ms]",
+			"pf:delay-[72ms]",
+			"pf:delay-[90ms]"
+		][Math.min(i, 5)], "pf:relative pf-menu-row pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:py-sm pf:ps-md pf:pe-lg", "pf:rounded-sm pf:outline-none pf:cursor-pointer", "pf:[&>.pf-control-icon]:shrink-0 pf:[&>.pf-control-icon]:text-soft-pearl-800", "pf:data-highlighted:bg-soft-pearl-200 pf:data-popup-open:bg-soft-pearl-200", "pf:data-destructive:not-data-disabled:text-red-700", "pf:data-destructive:not-data-disabled:[&>.pf-control-icon]:text-red-700", "pf:data-destructive:data-highlighted:bg-red-100 pf:data-disabled:text-soft-pearl-600", "pf:data-disabled:cursor-not-allowed pf:data-disabled:[&>.pf-control-icon]:text-soft-pearl-600"),
+		disabled: e.disabled,
+		label: e.label,
+		"aria-label": e.label,
+		"aria-describedby": l ? a : void 0
+	};
+	return /* @__PURE__ */ m(f, { children: [e.disabled ? /* @__PURE__ */ p("div", {
+		className: g.className,
+		role: "menuitem",
+		"aria-disabled": "true",
+		"aria-label": e.label,
+		"aria-describedby": g["aria-describedby"],
+		"data-disabled": "",
+		children: /* @__PURE__ */ p(_, { item: e })
+	}) : e.type === "submenu" ? /* @__PURE__ */ m(h.SubmenuRoot, {
+		onOpenChange: (e, n) => {
+			s(t(n.event));
+		},
+		children: [/* @__PURE__ */ p(h.SubmenuTrigger, {
+			...g,
+			children: /* @__PURE__ */ p(_, { item: e })
+		}), /* @__PURE__ */ p(y, {
+			animate: o,
+			menu: e.menu,
+			side: "inline-end",
+			align: "start",
+			portalContainer: r
+		})]
+	}) : e.type === "link" ? /* @__PURE__ */ p(h.Item, {
+		...g,
+		nativeButton: !1,
+		render: /* @__PURE__ */ p(n, { linkConfig: e.linkConfig }),
+		children: /* @__PURE__ */ p(_, { item: e })
+	}) : /* @__PURE__ */ p(h.Item, {
+		...g,
+		"data-destructive": e.destructive || void 0,
+		onClick: e.onClick,
+		children: /* @__PURE__ */ p(_, { item: e })
+	}), l && /* @__PURE__ */ p("span", {
+		id: a,
+		className: "pf-control-sr pf:sr-only",
+		children: l
+	})] });
+}, y = ({ menu: e, animate: t = !1, finalFocus: n, side: a = "bottom", align: u = "start", sideOffset: g = 4, portalContainer: _ }) => {
+	let y = i(), [b, x] = d(""), S = e.searchConfig?.value ?? b, C = e.loadingConfig?.isLoading ? [] : e.groups.map((t) => ({
+		...t,
+		items: !e.searchConfig || e.searchConfig.filter === "manual" || !S.trim() ? t.items : t.items.filter((e) => `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(S.trim().toLocaleLowerCase()))
+	})).filter((e) => e.items.length);
+	return /* @__PURE__ */ p(h.Portal, {
+		container: _,
+		children: /* @__PURE__ */ p(h.Positioner, {
+			side: a,
+			align: u,
+			sideOffset: g,
+			collisionPadding: 8,
+			className: "pf-menu-positioner pf:z-50 pf:outline-none",
+			children: /* @__PURE__ */ m(h.Popup, {
+				...y.props,
+				finalFocus: n,
+				className: c(r, "pf-menu-popup pf:box-border pf:w-[240px] pf:max-w-(--available-width) pf:max-h-(--available-height)", "pf:overflow-y-auto pf:overscroll-contain pf:p-md pf:border-[0.5px] pf:border-solid", "pf:border-soft-pearl-300 pf:rounded-lg pf:bg-background pf:text-soft-pearl-1000", "pf:shadow-[0_1px_1px_#12121205,0_4px_10px_#12121214] pf:font-body pf:font-medium pf:text-[length:var(--pf-text-label-13)]", "pf:leading-[20px] pf:outline-none pf:origin-(--transform-origin)", "pf:motion-safe:data-animate:[&_.pf-menu-row]:transition-[opacity,transform] pf:motion-safe:data-animate:[&_.pf-menu-row]:duration-120 pf:motion-safe:data-animate:[&_.pf-menu-row]:ease-[cubic-bezier(0.23,1,0.32,1)]", "pf:motion-safe:data-animate:data-starting-style:[&_.pf-menu-row]:opacity-0 pf:motion-safe:data-animate:data-starting-style:[&_.pf-menu-row]:[transform:translateY(-3px)]", "pf:motion-safe:data-animate:data-ending-style:[&_.pf-menu-row]:delay-0 pf:motion-safe:data-animate:data-ending-style:[&_.pf-menu-row]:opacity-0", "pf:data-animate:motion-safe:transition-[opacity,transform] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", "pf:data-animate:motion-safe:data-starting-style:opacity-0 pf:data-animate:motion-safe:data-starting-style:[transform:scale(0.97)]", "pf:data-animate:motion-safe:data-ending-style:opacity-0 pf:data-animate:motion-safe:data-ending-style:[transform:scale(0.97)] pf:data-ending-style:duration-120"),
+				"data-animate": t || void 0,
+				children: [
+					y.highlight,
+					e.searchConfig && /* @__PURE__ */ p("div", {
+						className: "pf:pb-md",
+						children: /* @__PURE__ */ p(s, {
+							type: "search",
+							className: "pf:[&_input::-webkit-search-cancel-button]:appearance-none pf:[&_button]:cursor-pointer",
+							actionConfig: S ? { kind: "clear" } : void 0,
+							leadingIcon: /* @__PURE__ */ p(o, {}),
+							label: e.searchConfig.label,
+							hideLabel: !0,
+							value: S,
+							onValueChange: (t) => {
+								x(t), e.searchConfig?.onValueChange?.(t);
+							},
+							onKeyDown: (e) => {
+								if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+									e.preventDefault(), e.stopPropagation();
+									let t = e.currentTarget.closest("[role=\"menu\"]")?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
+									(e.key === "ArrowDown" ? t?.[0] : t?.[t.length - 1])?.focus();
+								} else e.key !== "Escape" && e.key !== "Tab" && e.stopPropagation();
+							}
+						})
+					}),
+					e.loadingConfig?.isLoading && /* @__PURE__ */ p("div", {
+						role: "status",
+						className: "pf:px-md pf:py-sm pf:text-copy-12 pf:text-soft-pearl-800",
+						children: e.loadingConfig.label ?? "Loading actions…"
+					}),
+					C.map((e, t) => /* @__PURE__ */ m(l, { children: [t > 0 && /* @__PURE__ */ p(h.Separator, { className: "pf-menu-separator pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), /* @__PURE__ */ m(h.Group, { children: [e.label && /* @__PURE__ */ p(h.GroupLabel, {
+						className: "pf-menu-group-label pf:py-sm pf:px-md pf:text-soft-pearl-800 pf:text-[length:var(--pf-text-label-12)]",
+						children: e.label
+					}), e.items.map((e, n) => /* @__PURE__ */ p(v, {
+						item: e,
+						motionIndex: C.slice(0, t).reduce((e, t) => e + t.items.length, 0) + n,
+						portalContainer: _
+					}, e.id))] })] }, e.id)),
+					!e.loadingConfig?.isLoading && C.length === 0 && /* @__PURE__ */ p("div", {
+						className: "pf-menu-empty pf:py-sm pf:px-md pf:text-soft-pearl-800 pf:text-[length:var(--pf-text-label-12)]",
+						children: e.emptyContent ?? (S ? "No matching actions" : "No actions available")
+					}),
+					e.footerContent && /* @__PURE__ */ p("div", {
+						className: "pf:border-0 pf:border-t-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:mt-xs pf:pt-md pf:px-md pf:text-copy-12 pf:text-soft-pearl-800",
+						children: e.footerContent
+					}),
+					e.footerConfig && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(h.Separator, { className: "pf:h-[0.5px] pf:bg-soft-pearl-300 pf:my-xs" }), e.footerConfig.disabled ? /* @__PURE__ */ p("div", {
+						role: "menuitem",
+						"aria-disabled": "true",
+						className: "pf:flex pf:min-h-[32px] pf:items-center pf:px-md pf:text-soft-pearl-600 pf:cursor-not-allowed",
+						children: e.footerConfig.label
+					}) : /* @__PURE__ */ p(h.Item, {
+						onClick: e.footerConfig.onAction,
+						disabled: e.footerConfig.disabled,
+						className: "pf:box-border pf:flex pf:w-full pf:min-h-[32px] pf:items-center pf:px-md pf:rounded-sm pf:text-blue-700 pf:data-highlighted:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-600",
+						children: e.footerConfig.label
+					})] })
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { y as MenuContent };