@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/milestone-table.d.mts

@@ -0,0 +1,35 @@
+import * as React from "react";
+//#region src/milestone-table.d.ts
+/** One milestone row: a colored swatch + id, an actual date (or none), and a planned date. */
+export interface MilestoneRow {
+  /** Milestone id / label, e.g. "M35". */
+  id: string;
+  /** Swatch color (any CSS color). */
+  color: string;
+  /** Actual date, e.g. "Aug-26"; `null` when not yet reached (renders "—"). */
+  actual: string | null;
+  /** Planned date, e.g. "Sep-26". */
+  planned: string;
+}
+export interface MilestoneTableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** The milestone rows, in order. */
+  milestones: MilestoneRow[];
+  /** Section title. Default "Milestones". */
+  title?: React.ReactNode;
+  /** Wrap the table in a collapsible section with a toggle header. Default true. */
+  collapsible?: boolean;
+  /** Initial open state (collapsible only). Default true. */
+  defaultOpen?: boolean;
+  /** Column headers. Default `["Milestone", "Actual", "Planned"]`. */
+  columns?: [string, string, string];
+}
+/**
+ * A milestones table: one row per milestone with a colored swatch + id, its actual date (or "—"), and
+ * its planned date, with zebra striping. Collapsible by default — a toggle header (with a chevron) shows
+ * / hides the table; pass `collapsible={false}` for a static title + table. Complements
+ * `ProgressComparison` (which shows milestones as a stepper) when a dated table reads better.
+ */
+declare const MilestoneTable: React.ForwardRefExoticComponent<MilestoneTableProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MilestoneTable };
+//# sourceMappingURL=milestone-table.d.mts.map

package/dist/milestone-table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-table.d.mts","names":[],"sources":["../src/milestone-table.tsx"],"mappings":";;;iBAKiB;;EAEhB;;EAEA;;EAEA;;EAEA;;iBAGgB,4BAA4B,KAAK,MAAM,eAAe;;EAEtE,YAAY;;EAEZ,QAAQ,MAAM;;EAEd;;EAEA;;EAEA;;;;;;;;cASK,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/milestone-table.mjs

@@ -0,0 +1,84 @@
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/milestone-table.tsx
+/**
+* A milestones table: one row per milestone with a colored swatch + id, its actual date (or "—"), and
+* its planned date, with zebra striping. Collapsible by default — a toggle header (with a chevron) shows
+* / hides the table; pass `collapsible={false}` for a static title + table. Complements
+* `ProgressComparison` (which shows milestones as a stepper) when a dated table reads better.
+*/
+const MilestoneTable = React.forwardRef(({ className, milestones, title = "Milestones", collapsible = true, defaultOpen = true, columns = [
+	"Milestone",
+	"Actual",
+	"Planned"
+], ...props }, ref) => {
+	const [open, setOpen] = React.useState(defaultOpen);
+	const show = collapsible ? open : true;
+	const table = /* @__PURE__ */ jsxs("div", {
+		className: "wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-center wwc:bg-muted wwc:px-3 wwc:py-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:w-[86px] wwc:shrink-0 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground",
+					children: columns[0]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground",
+					children: columns[1]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground",
+					children: columns[2]
+				})
+			]
+		}), milestones.map((m, i) => /* @__PURE__ */ jsxs("div", {
+			className: cn("wwc:flex wwc:items-center wwc:border-t wwc:border-border wwc:px-3 wwc:py-2.5", i % 2 === 1 && "wwc:bg-muted"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:w-[86px] wwc:shrink-0 wwc:items-center wwc:gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:size-2.5 wwc:shrink-0 wwc:rounded-sm",
+						style: { backgroundColor: m.color }
+					}), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:font-semibold wwc:text-foreground",
+						children: m.id
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex-1 wwc:text-xs wwc:text-muted-foreground",
+					children: m.actual ?? "—"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex-1 wwc:text-xs wwc:text-foreground",
+					children: m.planned
+				})
+			]
+		}, m.id))]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col wwc:gap-2.5", className),
+		...props,
+		children: [collapsible ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen((v) => !v),
+			className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:text-left wwc:focus-visible:outline-none",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "wwc:text-[13px] wwc:font-semibold wwc:text-foreground",
+				children: title
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("wwc:size-3.5 wwc:text-muted-foreground wwc:transition-transform", !open && "wwc:-rotate-90") })]
+		}) : title != null && /* @__PURE__ */ jsx("span", {
+			className: "wwc:text-[13px] wwc:font-semibold wwc:text-foreground",
+			children: title
+		}), show && table]
+	});
+});
+MilestoneTable.displayName = "MilestoneTable";
+//#endregion
+export { MilestoneTable };
+
+//# sourceMappingURL=milestone-table.mjs.map

package/dist/milestone-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-table.mjs","names":[],"sources":["../src/milestone-table.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown} from \"lucide-react\";\nimport * as React from \"react\";\n\n/** One milestone row: a colored swatch + id, an actual date (or none), and a planned date. */\nexport interface MilestoneRow {\n\t/** Milestone id / label, e.g. \"M35\". */\n\tid: string;\n\t/** Swatch color (any CSS color). */\n\tcolor: string;\n\t/** Actual date, e.g. \"Aug-26\"; `null` when not yet reached (renders \"—\"). */\n\tactual: string | null;\n\t/** Planned date, e.g. \"Sep-26\". */\n\tplanned: string;\n}\n\nexport interface MilestoneTableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/** The milestone rows, in order. */\n\tmilestones: MilestoneRow[];\n\t/** Section title. Default \"Milestones\". */\n\ttitle?: React.ReactNode;\n\t/** Wrap the table in a collapsible section with a toggle header. Default true. */\n\tcollapsible?: boolean;\n\t/** Initial open state (collapsible only). Default true. */\n\tdefaultOpen?: boolean;\n\t/** Column headers. Default `[\"Milestone\", \"Actual\", \"Planned\"]`. */\n\tcolumns?: [string, string, string];\n}\n\n/**\n * A milestones table: one row per milestone with a colored swatch + id, its actual date (or \"—\"), and\n * its planned date, with zebra striping. Collapsible by default — a toggle header (with a chevron) shows\n * / hides the table; pass `collapsible={false}` for a static title + table. Complements\n * `ProgressComparison` (which shows milestones as a stepper) when a dated table reads better.\n */\nconst MilestoneTable = React.forwardRef<HTMLDivElement, MilestoneTableProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tmilestones,\n\t\t\ttitle = \"Milestones\",\n\t\t\tcollapsible = true,\n\t\t\tdefaultOpen = true,\n\t\t\tcolumns = [\"Milestone\", \"Actual\", \"Planned\"],\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [open, setOpen] = React.useState(defaultOpen);\n\t\tconst show = collapsible ? open : true;\n\n\t\tconst table = (\n\t\t\t<div className=\"wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border\">\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:bg-muted wwc:px-3 wwc:py-2\">\n\t\t\t\t\t<span className=\"wwc:w-[86px] wwc:shrink-0 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground\">\n\t\t\t\t\t\t{columns[0]}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"wwc:flex-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground\">\n\t\t\t\t\t\t{columns[1]}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"wwc:flex-1 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground\">\n\t\t\t\t\t\t{columns[2]}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t{milestones.map((m, i) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={m.id}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:flex wwc:items-center wwc:border-t wwc:border-border wwc:px-3 wwc:py-2.5\",\n\t\t\t\t\t\t\ti % 2 === 1 && \"wwc:bg-muted\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:w-[86px] wwc:shrink-0 wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t\t<span className=\"wwc:size-2.5 wwc:shrink-0 wwc:rounded-sm\" style={{backgroundColor: m.color}} />\n\t\t\t\t\t\t\t<span className=\"wwc:text-xs wwc:font-semibold wwc:text-foreground\">{m.id}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:text-xs wwc:text-muted-foreground\">{m.actual ?? \"—\"}</span>\n\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:text-xs wwc:text-foreground\">{m.planned}</span>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:flex wwc:flex-col wwc:gap-2.5\", className)} {...props}>\n\t\t\t\t{collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-expanded={open}\n\t\t\t\t\t\tonClick={() => setOpen((v) => !v)}\n\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:text-left wwc:focus-visible:outline-none\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"wwc:text-[13px] wwc:font-semibold wwc:text-foreground\">{title}</span>\n\t\t\t\t\t\t<ChevronDown\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:size-3.5 wwc:text-muted-foreground wwc:transition-transform\",\n\t\t\t\t\t\t\t\t!open && \"wwc:-rotate-90\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\ttitle != null && <span className=\"wwc:text-[13px] wwc:font-semibold wwc:text-foreground\">{title}</span>\n\t\t\t\t)}\n\t\t\t\t{show && table}\n\t\t\t</div>\n\t\t);\n\t},\n);\nMilestoneTable.displayName = \"MilestoneTable\";\n\nexport {MilestoneTable};\n"],"mappings":";;;;;;;;;;;AAmCA,MAAM,iBAAiB,MAAM,YAE3B,EACC,WACA,YACA,QAAQ,cACR,cAAc,MACd,cAAc,MACd,UAAU;CAAC;CAAa;CAAU;AAAS,GAC3C,GAAG,SAEJ,QACI;CACJ,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,WAAW;CAClD,MAAM,OAAO,cAAc,OAAO;CAElC,MAAM,QACL,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,QAAQ;IACJ,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,QAAQ;IACJ,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,QAAQ;IACJ,CAAA;GACF;EACJ,CAAA,GAAA,WAAW,KAAK,GAAG,MACnB,qBAAC,OAAD;GAEC,WAAW,GACV,gFACA,IAAI,MAAM,KAAK,cAChB;GALD,UAAA;IAOC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,oBAAC,QAAD;MAAM,WAAU;MAA2C,OAAO,EAAC,iBAAiB,EAAE,MAAK;KAAI,CAAA,GAC/F,oBAAC,QAAD;MAAM,WAAU;MAAqD,UAAA,EAAE;KAAS,CAAA,CAC5E;;IACL,oBAAC,QAAD;KAAM,WAAU;KAAoD,UAAA,EAAE,UAAU;IAAU,CAAA;IAC1F,oBAAC,QAAD;KAAM,WAAU;KAA8C,UAAA,EAAE;IAAc,CAAA;GAC1E;EAZC,GAAA,EAAE,EAYH,CACL,CACG;;CAGN,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,qCAAqC,SAAS;EAAG,GAAI;EAAlF,UAAA,CACE,cACA,qBAAC,UAAD;GACC,MAAK;GACL,iBAAe;GACf,eAAe,SAAS,MAAM,CAAC,CAAC;GAChC,WAAU;GAJX,UAAA,CAMC,oBAAC,QAAD;IAAM,WAAU;IAAyD,UAAA;GAAY,CAAA,GACrF,oBAAC,aAAD,EACC,WAAW,GACV,mEACA,CAAC,QAAQ,gBACV,EACA,CAAA,CACM;EAER,CAAA,IAAA,SAAS,QAAQ,oBAAC,QAAD;GAAM,WAAU;GAAyD,UAAA;EAAY,CAAA,GAEtG,QAAQ,KACL;;AAEP,CACD;AACA,eAAe,cAAc"}

package/dist/minimap.d.mts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/minimap.d.ts
+declare const minimapVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MinimapProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof minimapVariants> {
+  /** Longitude of the site the minimap is centred on. */
+  lon: number;
+  /** Latitude of the site the minimap is centred on. */
+  lat: number;
+  /** Compass heading, in degrees, the viewer is currently facing. The map rotates opposite to it. */
+  heading?: number;
+  /** Label rendered in the top-left corner chip. */
+  label?: string;
+  /** Override the map tile image source. Defaults to an ArcGIS World Imagery export for `lon`/`lat`. */
+  src?: string;
+}
+/** A compact, north-rotating satellite minimap with a centre pin and heading view-cone. */
+declare const Minimap: React.ForwardRefExoticComponent<MinimapProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Minimap, minimapVariants };
+//# sourceMappingURL=minimap.d.mts.map

package/dist/minimap.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimap.d.mts","names":[],"sources":["../src/minimap.tsx"],"mappings":";;;cAmBM,kBAAe;;6CAWnB;iBAEe,qBAAqB,MAAM,eAAe,iBAAiB,oBAAoB;;EAE/F;;EAEA;;EAEA;;EAEA;;EAEA;;;cAIK,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}

package/dist/minimap.mjs

@@ -0,0 +1,64 @@
+import { cn } from "@corensystem/coren-utils";
+import { MapPin } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/minimap.tsx
+/** Builds an ArcGIS World Imagery export URL centred on a lon/lat, covering a small bbox. */
+function arcgisTile(lon, lat) {
+	const dLon = .0042;
+	const dLat = .0029;
+	return `https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export?bbox=${`${lon - dLon},${lat - dLat},${lon + dLon},${lat + dLat}`}&bboxSR=4326&imageSR=4326&size=400,280&format=png32&transparent=false&f=image`;
+}
+const MINIMAP_CARD_SHADOW = "0 8px 24px rgba(0,0,0,0.35)";
+const minimapVariants = cva("wwc:relative wwc:overflow-hidden wwc:rounded-lg wwc:border-2 wwc:border-white/30", {
+	variants: { size: {
+		sm: "wwc:size-[140px]",
+		md: "wwc:size-[185px]",
+		lg: "wwc:size-[240px]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A compact, north-rotating satellite minimap with a centre pin and heading view-cone. */
+const Minimap = React.forwardRef(({ className, size, lon, lat, heading = 0, label = "Site", src, ...props }, ref) => {
+	const imageSrc = src ?? arcgisTile(lon, lat);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(minimapVariants({ size }), className),
+		style: { boxShadow: MINIMAP_CARD_SHADOW },
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:inset-0 wwc:origin-center wwc:transition-transform wwc:duration-150 wwc:ease-out",
+				style: { transform: `rotate(${-heading}deg) scale(1.5)` },
+				children: /* @__PURE__ */ jsx("img", {
+					src: imageSrc,
+					alt: `${label} location`,
+					className: "wwc:h-full wwc:w-full wwc:object-cover"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:rounded-[inherit]",
+				style: { boxShadow: "inset 0 0 18px 12px #b6a798" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:size-0 wwc:-translate-x-1/2 wwc:-translate-y-[130%] wwc:border-x-[7px] wwc:border-b-[12px] wwc:border-solid wwc:border-x-transparent wwc:border-b-white/85"
+			}),
+			/* @__PURE__ */ jsx(MapPin, {
+				"aria-hidden": "true",
+				className: "wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:size-5 wwc:-translate-x-1/2 wwc:-translate-y-full wwc:fill-[#22c55e] wwc:text-white wwc:drop-shadow-[0_2px_4px_rgba(0,0,0,0.45)]"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:absolute wwc:left-2 wwc:top-1.5 wwc:rounded wwc:bg-black/45 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-medium wwc:text-white wwc:backdrop-blur-sm",
+				children: label
+			})
+		]
+	});
+});
+Minimap.displayName = "Minimap";
+//#endregion
+export { Minimap, minimapVariants };
+
+//# sourceMappingURL=minimap.mjs.map

package/dist/minimap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimap.mjs","names":[],"sources":["../src/minimap.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport {MapPin} from \"lucide-react\";\nimport * as React from \"react\";\n\n/** Builds an ArcGIS World Imagery export URL centred on a lon/lat, covering a small bbox. */\nfunction arcgisTile(lon: number, lat: number): string {\n\tconst dLon = 0.0042;\n\tconst dLat = 0.0029;\n\tconst bbox = `${lon - dLon},${lat - dLat},${lon + dLon},${lat + dLat}`;\n\treturn (\n\t\t\"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export\" +\n\t\t`?bbox=${bbox}&bboxSR=4326&imageSR=4326&size=400,280&format=png32&transparent=false&f=image`\n\t);\n}\n\n// Card drop-shadow lifting the minimap off the scene it floats over.\nconst MINIMAP_CARD_SHADOW = \"0 8px 24px rgba(0,0,0,0.35)\";\n\nconst minimapVariants = cva(\"wwc:relative wwc:overflow-hidden wwc:rounded-lg wwc:border-2 wwc:border-white/30\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"wwc:size-[140px]\",\n\t\t\tmd: \"wwc:size-[185px]\",\n\t\t\tlg: \"wwc:size-[240px]\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nexport interface MinimapProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof minimapVariants> {\n\t/** Longitude of the site the minimap is centred on. */\n\tlon: number;\n\t/** Latitude of the site the minimap is centred on. */\n\tlat: number;\n\t/** Compass heading, in degrees, the viewer is currently facing. The map rotates opposite to it. */\n\theading?: number;\n\t/** Label rendered in the top-left corner chip. */\n\tlabel?: string;\n\t/** Override the map tile image source. Defaults to an ArcGIS World Imagery export for `lon`/`lat`. */\n\tsrc?: string;\n}\n\n/** A compact, north-rotating satellite minimap with a centre pin and heading view-cone. */\nconst Minimap = React.forwardRef<HTMLDivElement, MinimapProps>(\n\t({className, size, lon, lat, heading = 0, label = \"Site\", src, ...props}, ref) => {\n\t\tconst imageSrc = src ?? arcgisTile(lon, lat);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(minimapVariants({size}), className)}\n\t\t\t\tstyle={{boxShadow: MINIMAP_CARD_SHADOW}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Rotating map layer, scaled up so the corners never expose the container edge while spinning. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wwc:absolute wwc:inset-0 wwc:origin-center wwc:transition-transform wwc:duration-150 wwc:ease-out\"\n\t\t\t\t\tstyle={{transform: `rotate(${-heading}deg) scale(1.5)`}}\n\t\t\t\t>\n\t\t\t\t\t<img src={imageSrc} alt={`${label} location`} className=\"wwc:h-full wwc:w-full wwc:object-cover\" />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Sandy inner vignette (Figma spec). */}\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:rounded-[inherit]\"\n\t\t\t\t\tstyle={{boxShadow: \"inset 0 0 18px 12px #b6a798\"}}\n\t\t\t\t/>\n\n\t\t\t\t{/* Fixed chrome (never rotates): view cone pointing up = the direction you're facing in 3D. */}\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:size-0 wwc:-translate-x-1/2 wwc:-translate-y-[130%] wwc:border-x-[7px] wwc:border-b-[12px] wwc:border-solid wwc:border-x-transparent wwc:border-b-white/85\"\n\t\t\t\t/>\n\n\t\t\t\t{/* Green pin at centre = where the building sits (the rotation pivot); its tip marks the spot. */}\n\t\t\t\t<MapPin\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-1/2 wwc:size-5 wwc:-translate-x-1/2 wwc:-translate-y-full wwc:fill-[#22c55e] wwc:text-white wwc:drop-shadow-[0_2px_4px_rgba(0,0,0,0.45)]\"\n\t\t\t\t/>\n\n\t\t\t\t<span className=\"wwc:absolute wwc:left-2 wwc:top-1.5 wwc:rounded wwc:bg-black/45 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-medium wwc:text-white wwc:backdrop-blur-sm\">\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t},\n);\nMinimap.displayName = \"Minimap\";\n\nexport {Minimap, minimapVariants};\n"],"mappings":";;;;;;;AAMA,SAAS,WAAW,KAAa,KAAqB;CACrD,MAAM,OAAO;CACb,MAAM,OAAO;CAEb,OACC,4FACS,GAHM,MAAM,KAAK,GAAG,MAAM,KAAK,GAAG,MAAM,KAAK,GAAG,MAAM,OAGjD;AAEhB;AAGA,MAAM,sBAAsB;AAE5B,MAAM,kBAAkB,IAAI,oFAAoF;CAC/G,UAAU,EACT,MAAM;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;CACL,EACD;CACA,iBAAiB,EAChB,MAAM,KACP;AACD,CAAC;;AAgBD,MAAM,UAAU,MAAM,YACpB,EAAC,WAAW,MAAM,KAAK,KAAK,UAAU,GAAG,QAAQ,QAAQ,KAAK,GAAG,SAAQ,QAAQ;CACjF,MAAM,WAAW,OAAO,WAAW,KAAK,GAAG;CAC3C,OACC,qBAAC,OAAD;EACM;EACL,WAAW,GAAG,gBAAgB,EAAC,KAAI,CAAC,GAAG,SAAS;EAChD,OAAO,EAAC,WAAW,oBAAmB;EACtC,GAAI;EAJL,UAAA;GAOC,oBAAC,OAAD;IACC,WAAU;IACV,OAAO,EAAC,WAAW,UAAU,CAAC,QAAQ,iBAAgB;IAEtD,UAAA,oBAAC,OAAD;KAAK,KAAK;KAAU,KAAK,GAAG,MAAM;KAAY,WAAU;IAA0C,CAAA;GAC9F,CAAA;GAGL,oBAAC,QAAD;IACC,eAAY;IACZ,WAAU;IACV,OAAO,EAAC,WAAW,8BAA6B;GAChD,CAAA;GAGD,oBAAC,QAAD;IACC,eAAY;IACZ,WAAU;GACV,CAAA;GAGD,oBAAC,QAAD;IACC,eAAY;IACZ,WAAU;GACV,CAAA;GAED,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA;GACI,CAAA;EACF;;AAEP,CACD;AACA,QAAQ,cAAc"}

package/dist/more-menu.d.mts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/more-menu.d.ts
+export interface MoreMenuOption {
+  label: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+export interface MoreMenuProps {
+  /** Menu options */
+  options: MoreMenuOption[];
+  /** Orientation of the more icon */
+  orientation?: "horizontal" | "vertical";
+  /** Callback when option is selected */
+  onSelect?: (value: string) => void;
+  /** Tooltip text */
+  tooltip?: string;
+  /** Side to open the menu */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Alignment */
+  align?: "start" | "center" | "end";
+}
+/** A three-dot menu button that opens a dropdown with options. */
+declare const MoreMenu: React.ForwardRefExoticComponent<MoreMenuProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { MoreMenu };
+//# sourceMappingURL=more-menu.d.mts.map

package/dist/more-menu.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-menu.d.mts","names":[],"sources":["../src/more-menu.tsx"],"mappings":";;iBAMiB;EAChB,OAAO,MAAM;EACb;EACA;EACA;;iBAGgB;;EAEhB,SAAS;;EAET;;EAEA,YAAY;;EAEZ;;EAEA;;EAEA;;;cAIK,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/more-menu.mjs

@@ -0,0 +1,34 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.mjs";
+import { IconButton } from "./icon-button.mjs";
+import { MoreHorizontal, MoreVertical } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/more-menu.tsx
+/** A three-dot menu button that opens a dropdown with options. */
+const MoreMenu = React.forwardRef(({ options, orientation = "horizontal", onSelect, tooltip = "More options", side = "bottom", align = "end" }, ref) => {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(IconButton, {
+			ref,
+			variant: "ghost",
+			tooltip,
+			children: /* @__PURE__ */ jsx(orientation === "horizontal" ? MoreHorizontal : MoreVertical, {})
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		side,
+		align,
+		children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			disabled: option.disabled,
+			onSelect: () => {
+				option.onSelect?.();
+				onSelect?.(option.value);
+			},
+			children: option.label
+		}, option.value))
+	})] });
+});
+MoreMenu.displayName = "MoreMenu";
+//#endregion
+export { MoreMenu };
+
+//# sourceMappingURL=more-menu.mjs.map

package/dist/more-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-menu.mjs","names":[],"sources":["../src/more-menu.tsx"],"sourcesContent":["import {MoreHorizontal, MoreVertical} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from \"./dropdown-menu\";\nimport {IconButton} from \"./icon-button\";\n\nexport interface MoreMenuOption {\n\tlabel: React.ReactNode;\n\tvalue: string;\n\tdisabled?: boolean;\n\tonSelect?: () => void;\n}\n\nexport interface MoreMenuProps {\n\t/** Menu options */\n\toptions: MoreMenuOption[];\n\t/** Orientation of the more icon */\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** Callback when option is selected */\n\tonSelect?: (value: string) => void;\n\t/** Tooltip text */\n\ttooltip?: string;\n\t/** Side to open the menu */\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\t/** Alignment */\n\talign?: \"start\" | \"center\" | \"end\";\n}\n\n/** A three-dot menu button that opens a dropdown with options. */\nconst MoreMenu = React.forwardRef<HTMLButtonElement, MoreMenuProps>(\n\t({options, orientation = \"horizontal\", onSelect, tooltip = \"More options\", side = \"bottom\", align = \"end\"}, ref) => {\n\t\tconst Icon = orientation === \"horizontal\" ? MoreHorizontal : MoreVertical;\n\n\t\treturn (\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<IconButton ref={ref} variant=\"ghost\" tooltip={tooltip}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent side={side} align={align}>\n\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\toption.onSelect?.();\n\t\t\t\t\t\t\t\tonSelect?.(option.value);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t);\n\t},\n);\nMoreMenu.displayName = \"MoreMenu\";\n\nexport {MoreMenu};\n"],"mappings":";;;;;;;AA6BA,MAAM,WAAW,MAAM,YACrB,EAAC,SAAS,cAAc,cAAc,UAAU,UAAU,gBAAgB,OAAO,UAAU,QAAQ,SAAQ,QAAQ;CAGnH,OACC,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,qBAAD;EAAqB,SAAA;EACpB,UAAA,oBAAC,YAAD;GAAiB;GAAK,SAAQ;GAAiB;GAC9C,UAAA,oBANS,gBAAgB,eAAe,iBAAiB,cAMzD,CAAO,CAAA;EACI,CAAA;CACQ,CAAA,GACrB,oBAAC,qBAAD;EAA2B;EAAa;EACtC,UAAA,QAAQ,KAAK,WACb,oBAAC,kBAAD;GAEC,UAAU,OAAO;GACjB,gBAAgB;IACf,OAAO,WAAW;IAClB,WAAW,OAAO,KAAK;GACxB;GAEC,UAAA,OAAO;EACS,GARZ,OAAO,KAQK,CAClB;CACmB,CAAA,CACR,EAAA,CAAA;AAEhB,CACD;AACA,SAAS,cAAc"}

package/dist/multi-select.d.mts

@@ -0,0 +1,38 @@
+//#region src/multi-select.d.ts
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface MultiSelectProps {
+  /** Applied to the trigger, so a `<Label htmlFor>` can address the field. */
+  id?: string;
+  options: MultiSelectOption[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  /** Marks the field as invalid — sets aria-invalid and a destructive border. */
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Render the selected options as removable pills below the field. Defaults to true. */
+  showPills?: boolean;
+  /**
+   * Cap on how many pills are drawn before the rest collapse behind a `+N` chip that opens them in a
+   * popover. Keeps a long selection from growing the field's height without bound. Default `4`; pass
+   * `0` to always show every pill.
+   */
+  maxPills?: number;
+  className?: string;
+  /** Class applied to the popover content. The popover matches the trigger width by default. */
+  popoverClassName?: string;
+}
+/**
+ * A searchable multi-select field combining a Popover, Command palette, and Button.
+ * Selections stay open for rapid picking and are shown as removable pills below the field.
+ */
+declare function MultiSelect({ id, options, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, invalid, disabled, showPills, maxPills, className, popoverClassName }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MultiSelect };
+//# sourceMappingURL=multi-select.d.mts.map

package/dist/multi-select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.mts","names":[],"sources":["../src/multi-select.tsx"],"mappings":";iBAUiB;EAChB;EACA;EACA;;iBAGgB;;EAEhB;EACA,SAAS;EACT;EACA,gBAAgB;EAChB;EACA;EACA;;EAEA;EACA;;EAEA;;;;;;EAMA;EACA;;EAEA;;;;;;iBAiCQ,cACR,IACA,SACA,OACA,eACA,aACA,mBACA,cACA,SACA,UACA,WACA,UACA,WACA,oBACE,+CAAgB,IAAA"}

package/dist/multi-select.mjs

@@ -0,0 +1,106 @@
+import { Badge } from "./badge.mjs";
+import { Button } from "./button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Checkbox } from "./checkbox.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronsUpDown, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/multi-select.tsx
+/** One removable pill. Shared so the inline row and the overflow popover cannot drift apart. */
+function Pill({ option, onRemove, disabled }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "neutralSoft",
+		className: "wwc:gap-1 wwc:pr-1",
+		children: [option.label, /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onRemove(option.value),
+			disabled,
+			"aria-label": `Remove ${option.label}`,
+			className: "wwc:rounded-sm wwc:p-0.5 wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-background/60 wwc:hover:text-foreground wwc:disabled:pointer-events-none wwc:disabled:opacity-50",
+			children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3 wwc:w-3" })
+		})]
+	});
+}
+/**
+* A searchable multi-select field combining a Popover, Command palette, and Button.
+* Selections stay open for rapid picking and are shown as removable pills below the field.
+*/
+function MultiSelect({ id, options, value, onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyMessage = "No option found.", invalid = false, disabled = false, showPills = true, maxPills = 4, className, popoverClassName }) {
+	const [open, setOpen] = React.useState(false);
+	const toggle = (optionValue) => onValueChange(value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]);
+	const selectedOptions = options.filter((option) => value.includes(option.value));
+	const [overflowOpen, setOverflowOpen] = React.useState(false);
+	const capped = maxPills > 0 && selectedOptions.length > maxPills;
+	const shownPills = capped ? selectedOptions.slice(0, maxPills) : selectedOptions;
+	const overflowPills = capped ? selectedOptions.slice(maxPills) : [];
+	const triggerLabel = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				id,
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-invalid": invalid || void 0,
+				disabled,
+				className: cn("wwc:w-full wwc:justify-between wwc:font-normal", "wwc:aria-invalid:border-destructive wwc:aria-invalid:focus-visible:ring-destructive", className),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("wwc:truncate", selectedOptions.length === 0 && "wwc:text-muted-foreground"),
+					children: triggerLabel
+				}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "wwc:ml-2 wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			style: { width: "var(--radix-popover-trigger-width)" },
+			className: cn("wwc:min-w-[240px] wwc:p-0", popoverClassName),
+			children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+				value: option.label,
+				onSelect: () => toggle(option.value),
+				disabled: option.disabled,
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: value.includes(option.value),
+					className: "wwc:mr-2"
+				}), option.label]
+			}, option.value)) })] })] })
+		})]
+	}), showPills && selectedOptions.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "wwc:mt-2 wwc:flex wwc:flex-wrap wwc:gap-1.5",
+		children: [shownPills.map((option) => /* @__PURE__ */ jsx(Pill, {
+			option,
+			onRemove: toggle,
+			disabled
+		}, option.value)), overflowPills.length > 0 && /* @__PURE__ */ jsxs(Popover, {
+			open: overflowOpen,
+			onOpenChange: setOverflowOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": `Show ${overflowPills.length} more selected`,
+					className: "wwc:inline-flex wwc:items-center wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted wwc:px-2 wwc:py-0.5 wwc:text-xs wwc:font-semibold wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-muted/70",
+					children: ["+", overflowPills.length]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: "wwc:w-auto wwc:max-w-[280px] wwc:p-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:flex-wrap wwc:gap-1.5",
+					children: overflowPills.map((option) => /* @__PURE__ */ jsx(Pill, {
+						option,
+						onRemove: toggle,
+						disabled
+					}, option.value))
+				})
+			})]
+		})]
+	})] });
+}
+//#endregion
+export { MultiSelect };
+
+//# sourceMappingURL=multi-select.mjs.map

package/dist/multi-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.mjs","names":[],"sources":["../src/multi-select.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronsUpDown, X} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Badge} from \"./badge\";\nimport {Button} from \"./button\";\nimport {Checkbox} from \"./checkbox\";\nimport {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from \"./command\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\n\nexport interface MultiSelectOption {\n\tvalue: string;\n\tlabel: string;\n\tdisabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n\t/** Applied to the trigger, so a `<Label htmlFor>` can address the field. */\n\tid?: string;\n\toptions: MultiSelectOption[];\n\tvalue: string[];\n\tonValueChange: (value: string[]) => void;\n\tplaceholder?: string;\n\tsearchPlaceholder?: string;\n\temptyMessage?: string;\n\t/** Marks the field as invalid — sets aria-invalid and a destructive border. */\n\tinvalid?: boolean;\n\tdisabled?: boolean;\n\t/** Render the selected options as removable pills below the field. Defaults to true. */\n\tshowPills?: boolean;\n\t/**\n\t * Cap on how many pills are drawn before the rest collapse behind a `+N` chip that opens them in a\n\t * popover. Keeps a long selection from growing the field's height without bound. Default `4`; pass\n\t * `0` to always show every pill.\n\t */\n\tmaxPills?: number;\n\tclassName?: string;\n\t/** Class applied to the popover content. The popover matches the trigger width by default. */\n\tpopoverClassName?: string;\n}\n\n/** One removable pill. Shared so the inline row and the overflow popover cannot drift apart. */\nfunction Pill({\n\toption,\n\tonRemove,\n\tdisabled,\n}: {\n\toption: MultiSelectOption;\n\tonRemove: (value: string) => void;\n\tdisabled?: boolean;\n}) {\n\treturn (\n\t\t<Badge variant=\"neutralSoft\" className=\"wwc:gap-1 wwc:pr-1\">\n\t\t\t{option.label}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => onRemove(option.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={`Remove ${option.label}`}\n\t\t\t\tclassName=\"wwc:rounded-sm wwc:p-0.5 wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-background/60 wwc:hover:text-foreground wwc:disabled:pointer-events-none wwc:disabled:opacity-50\"\n\t\t\t>\n\t\t\t\t<X className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t</button>\n\t\t</Badge>\n\t);\n}\n\n/**\n * A searchable multi-select field combining a Popover, Command palette, and Button.\n * Selections stay open for rapid picking and are shown as removable pills below the field.\n */\nfunction MultiSelect({\n\tid,\n\toptions,\n\tvalue,\n\tonValueChange,\n\tplaceholder = \"Select options...\",\n\tsearchPlaceholder = \"Search...\",\n\temptyMessage = \"No option found.\",\n\tinvalid = false,\n\tdisabled = false,\n\tshowPills = true,\n\tmaxPills = 4,\n\tclassName,\n\tpopoverClassName,\n}: MultiSelectProps) {\n\tconst [open, setOpen] = React.useState(false);\n\n\tconst toggle = (optionValue: string) =>\n\t\tonValueChange(value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]);\n\n\tconst selectedOptions = options.filter((option) => value.includes(option.value));\n\tconst [overflowOpen, setOverflowOpen] = React.useState(false);\n\t// A cap of 0 means \"no cap\"; anything past the cap collapses into the +N chip.\n\tconst capped = maxPills > 0 && selectedOptions.length > maxPills;\n\tconst shownPills = capped ? selectedOptions.slice(0, maxPills) : selectedOptions;\n\tconst overflowPills = capped ? selectedOptions.slice(maxPills) : [];\n\tconst triggerLabel = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n\n\treturn (\n\t\t<div>\n\t\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\taria-expanded={open}\n\t\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:w-full wwc:justify-between wwc:font-normal\",\n\t\t\t\t\t\t\t\"wwc:aria-invalid:border-destructive wwc:aria-invalid:focus-visible:ring-destructive\",\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className={cn(\"wwc:truncate\", selectedOptions.length === 0 && \"wwc:text-muted-foreground\")}>\n\t\t\t\t\t\t\t{triggerLabel}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<ChevronsUpDown className=\"wwc:ml-2 wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tstyle={{width: \"var(--radix-popover-trigger-width)\"}}\n\t\t\t\t\tclassName={cn(\"wwc:min-w-[240px] wwc:p-0\", popoverClassName)}\n\t\t\t\t>\n\t\t\t\t\t<Command>\n\t\t\t\t\t\t<CommandInput placeholder={searchPlaceholder} />\n\t\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t\t<CommandEmpty>{emptyMessage}</CommandEmpty>\n\t\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\t\t// Search matches the human-readable label, not the (possibly opaque) value.\n\t\t\t\t\t\t\t\t\t\tvalue={option.label}\n\t\t\t\t\t\t\t\t\t\tonSelect={() => toggle(option.value)}\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Checkbox checked={value.includes(option.value)} className=\"wwc:mr-2\" />\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t\t</CommandList>\n\t\t\t\t\t</Command>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\n\t\t\t{/* Selected values as removable pills below the field — visible without opening the dropdown. */}\n\t\t\t{showPills && selectedOptions.length > 0 && (\n\t\t\t\t<div className=\"wwc:mt-2 wwc:flex wwc:flex-wrap wwc:gap-1.5\">\n\t\t\t\t\t{shownPills.map((option) => (\n\t\t\t\t\t\t<Pill key={option.value} option={option} onRemove={toggle} disabled={disabled} />\n\t\t\t\t\t))}\n\n\t\t\t\t\t{overflowPills.length > 0 && (\n\t\t\t\t\t\t<Popover open={overflowOpen} onOpenChange={setOverflowOpen}>\n\t\t\t\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\taria-label={`Show ${overflowPills.length} more selected`}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:inline-flex wwc:items-center wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted wwc:px-2 wwc:py-0.5 wwc:text-xs wwc:font-semibold wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-muted/70\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t+{overflowPills.length}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</PopoverTrigger>\n\t\t\t\t\t\t\t<PopoverContent align=\"start\" className=\"wwc:w-auto wwc:max-w-[280px] wwc:p-2\">\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t\t{overflowPills.map((option) => (\n\t\t\t\t\t\t\t\t\t\t<Pill key={option.value} option={option} onRemove={toggle} disabled={disabled} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</PopoverContent>\n\t\t\t\t\t\t</Popover>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport {MultiSelect};\n"],"mappings":"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"}