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

package/dist/navigation/core-filter-strip.mjs

@@ -0,0 +1,289 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { MultiSelect } from "../select.mjs";
+import { DateRangePicker } from "../date-picker.mjs";
+import { Separator } from "../separator.mjs";
+import { X } from "lucide-react";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/navigation/core-filter-strip.tsx
+const projectOptions = [
+	{
+		value: "six-flags",
+		label: "Six Flags"
+	},
+	{
+		value: "aquarabia",
+		label: "Aquarabia"
+	},
+	{
+		value: "gaming-district",
+		label: "Gaming District"
+	},
+	{
+		value: "speed-park",
+		label: "Speed Park"
+	},
+	{
+		value: "stadium",
+		label: "Stadium"
+	},
+	{
+		value: "golf-course",
+		label: "Golf Course"
+	},
+	{
+		value: "mercedes-amg",
+		label: "Mercedes-AMG"
+	},
+	{
+		value: "arts-centre",
+		label: "Arts Centre"
+	},
+	{
+		value: "studios",
+		label: "Studios"
+	}
+];
+const zoneOptions = [
+	{
+		value: "zone-a",
+		label: "Construction Zone A"
+	},
+	{
+		value: "heavy-equipment",
+		label: "Heavy Equipment"
+	},
+	{
+		value: "foundation",
+		label: "Foundation Works"
+	},
+	{
+		value: "steel",
+		label: "Steel Structure"
+	},
+	{
+		value: "electrical",
+		label: "Electrical Works"
+	},
+	{
+		value: "finishing",
+		label: "Finishing Zone"
+	},
+	{
+		value: "excavation",
+		label: "Excavation Site"
+	},
+	{
+		value: "assembly",
+		label: "Assembly Area"
+	}
+];
+const tradeOptions = [
+	{
+		value: "civil",
+		label: "Civil"
+	},
+	{
+		value: "electrical",
+		label: "Electrical"
+	},
+	{
+		value: "mechanical",
+		label: "Mechanical"
+	},
+	{
+		value: "steel",
+		label: "Steel"
+	},
+	{
+		value: "finishing",
+		label: "Finishing"
+	},
+	{
+		value: "others",
+		label: "Others"
+	}
+];
+const statusOptions = [
+	{
+		value: "on-track",
+		label: "On Track"
+	},
+	{
+		value: "at-risk",
+		label: "At Risk"
+	},
+	{
+		value: "critical",
+		label: "Critical"
+	}
+];
+/** Horizontal filter strip with variant-specific controls for dashboards. */
+function CoreFilterStrip({ variant, size = "default", onFiltersChange }) {
+	const [dateRange, setDateRange] = useState({
+		from: void 0,
+		to: void 0
+	});
+	const [selectedProjects, setSelectedProjects] = useState([]);
+	const [selectedZones, setSelectedZones] = useState([]);
+	const [selectedTrades, setSelectedTrades] = useState([]);
+	const [selectedStatuses, setSelectedStatuses] = useState([]);
+	const isSmall = size === "sm";
+	const activeFilterCount = (dateRange.from !== void 0 ? 1 : 0) + selectedProjects.length + selectedZones.length + selectedTrades.length + selectedStatuses.length;
+	const handleClearAll = () => {
+		setDateRange({
+			from: void 0,
+			to: void 0
+		});
+		setSelectedProjects([]);
+		setSelectedZones([]);
+		setSelectedTrades([]);
+		setSelectedStatuses([]);
+		onFiltersChange?.({});
+	};
+	const notifyChange = () => {
+		onFiltersChange?.({
+			dateRange,
+			projects: selectedProjects,
+			zones: selectedZones,
+			trades: selectedTrades,
+			statuses: selectedStatuses
+		});
+	};
+	const selectWidth = isSmall ? "wwc:w-[120px]" : "wwc:w-[140px]";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `wwc:flex wwc:items-center wwc:flex-wrap wwc:gap-2 ${isSmall ? "wwc:py-1.5" : "wwc:py-2"}`,
+		children: [
+			/* @__PURE__ */ jsx(DateRangePicker, {
+				dateRange,
+				onDateRangeChange: (range) => {
+					setDateRange(range ?? {
+						from: void 0,
+						to: void 0
+					});
+					notifyChange();
+				},
+				placeholder: "Date range",
+				className: isSmall ? "wwc:w-[180px] wwc:h-7 wwc:text-xs" : "wwc:w-[220px] wwc:h-9 wwc:text-xs"
+			}),
+			/* @__PURE__ */ jsx(MultiSelect, {
+				options: projectOptions,
+				value: selectedProjects,
+				onValueChange: (selected) => {
+					setSelectedProjects(selected);
+					notifyChange();
+				},
+				placeholder: "Projects",
+				searchPlaceholder: "Search projects...",
+				className: selectWidth,
+				keepPlaceholder: true,
+				size
+			}),
+			variant === "performance" && /* @__PURE__ */ jsx(MultiSelect, {
+				options: statusOptions,
+				value: selectedStatuses,
+				onValueChange: (selected) => {
+					setSelectedStatuses(selected);
+					notifyChange();
+				},
+				placeholder: "Status",
+				searchPlaceholder: "Search status...",
+				className: selectWidth,
+				keepPlaceholder: true,
+				size
+			}),
+			variant === "workforce" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MultiSelect, {
+				options: zoneOptions,
+				value: selectedZones,
+				onValueChange: (selected) => {
+					setSelectedZones(selected);
+					notifyChange();
+				},
+				placeholder: "Zones",
+				searchPlaceholder: "Search zones...",
+				className: selectWidth,
+				keepPlaceholder: true,
+				size
+			}), /* @__PURE__ */ jsx(MultiSelect, {
+				options: tradeOptions,
+				value: selectedTrades,
+				onValueChange: (selected) => {
+					setSelectedTrades(selected);
+					notifyChange();
+				},
+				placeholder: "Trades",
+				searchPlaceholder: "Search trades...",
+				className: selectWidth,
+				keepPlaceholder: true,
+				size
+			})] }),
+			activeFilterCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: isSmall ? "wwc:h-4 wwc:mx-0.5" : "wwc:h-6 wwc:mx-1"
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: `wwc:gap-1.5 wwc:text-muted-foreground wwc:hover:text-foreground ${isSmall ? "wwc:h-7 wwc:text-[11px]" : "wwc:h-8 wwc:text-xs"}`,
+					onClick: handleClearAll,
+					children: [/* @__PURE__ */ jsx(X, { className: isSmall ? "wwc:h-3 wwc:w-3" : "wwc:h-3.5 wwc:w-3.5" }), "Clear all"]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:flex-wrap wwc:gap-1.5",
+					children: [
+						selectedProjects.map((val) => {
+							const opt = projectOptions.find((o) => o.value === val);
+							return opt ? /* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								className: `wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? "wwc:h-5 wwc:text-[10px]" : "wwc:h-6 wwc:text-xs"}`,
+								children: [opt.label, /* @__PURE__ */ jsx(X, {
+									className: "wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive",
+									onClick: () => setSelectedProjects(selectedProjects.filter((v) => v !== val))
+								})]
+							}, val) : null;
+						}),
+						selectedZones.map((val) => {
+							const opt = zoneOptions.find((o) => o.value === val);
+							return opt ? /* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								className: `wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? "wwc:h-5 wwc:text-[10px]" : "wwc:h-6 wwc:text-xs"}`,
+								children: [opt.label, /* @__PURE__ */ jsx(X, {
+									className: "wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive",
+									onClick: () => setSelectedZones(selectedZones.filter((v) => v !== val))
+								})]
+							}, val) : null;
+						}),
+						selectedTrades.map((val) => {
+							const opt = tradeOptions.find((o) => o.value === val);
+							return opt ? /* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								className: `wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? "wwc:h-5 wwc:text-[10px]" : "wwc:h-6 wwc:text-xs"}`,
+								children: [opt.label, /* @__PURE__ */ jsx(X, {
+									className: "wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive",
+									onClick: () => setSelectedTrades(selectedTrades.filter((v) => v !== val))
+								})]
+							}, val) : null;
+						}),
+						selectedStatuses.map((val) => {
+							const opt = statusOptions.find((o) => o.value === val);
+							return opt ? /* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								className: `wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? "wwc:h-5 wwc:text-[10px]" : "wwc:h-6 wwc:text-xs"}`,
+								children: [opt.label, /* @__PURE__ */ jsx(X, {
+									className: "wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive",
+									onClick: () => setSelectedStatuses(selectedStatuses.filter((v) => v !== val))
+								})]
+							}, val) : null;
+						})
+					]
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { CoreFilterStrip };
+
+//# sourceMappingURL=core-filter-strip.mjs.map

package/dist/navigation/core-filter-strip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-filter-strip.mjs","names":[],"sources":["../../src/navigation/core-filter-strip.tsx"],"sourcesContent":["import {X} from \"lucide-react\";\nimport {useState} from \"react\";\n\nimport {Badge} from \"../badge\";\nimport {Button} from \"../button\";\nimport {DateRangePicker} from \"../date-picker\";\nimport {MultiSelect} from \"../select\";\nimport {Separator} from \"../separator\";\n\n// Filter option types\ninterface FilterOption {\n\tvalue: string;\n\tlabel: string;\n}\n\n// Projects list\nconst projectOptions: FilterOption[] = [\n\t{value: \"six-flags\", label: \"Six Flags\"},\n\t{value: \"aquarabia\", label: \"Aquarabia\"},\n\t{value: \"gaming-district\", label: \"Gaming District\"},\n\t{value: \"speed-park\", label: \"Speed Park\"},\n\t{value: \"stadium\", label: \"Stadium\"},\n\t{value: \"golf-course\", label: \"Golf Course\"},\n\t{value: \"mercedes-amg\", label: \"Mercedes-AMG\"},\n\t{value: \"arts-centre\", label: \"Arts Centre\"},\n\t{value: \"studios\", label: \"Studios\"},\n];\n\n// Zone options\nconst zoneOptions: FilterOption[] = [\n\t{value: \"zone-a\", label: \"Construction Zone A\"},\n\t{value: \"heavy-equipment\", label: \"Heavy Equipment\"},\n\t{value: \"foundation\", label: \"Foundation Works\"},\n\t{value: \"steel\", label: \"Steel Structure\"},\n\t{value: \"electrical\", label: \"Electrical Works\"},\n\t{value: \"finishing\", label: \"Finishing Zone\"},\n\t{value: \"excavation\", label: \"Excavation Site\"},\n\t{value: \"assembly\", label: \"Assembly Area\"},\n];\n\n// Trade options\nconst tradeOptions: FilterOption[] = [\n\t{value: \"civil\", label: \"Civil\"},\n\t{value: \"electrical\", label: \"Electrical\"},\n\t{value: \"mechanical\", label: \"Mechanical\"},\n\t{value: \"steel\", label: \"Steel\"},\n\t{value: \"finishing\", label: \"Finishing\"},\n\t{value: \"others\", label: \"Others\"},\n];\n\n// Status options\nconst statusOptions: FilterOption[] = [\n\t{value: \"on-track\", label: \"On Track\"},\n\t{value: \"at-risk\", label: \"At Risk\"},\n\t{value: \"critical\", label: \"Critical\"},\n];\n\n// Filter strip\nexport type FilterStripVariant = \"performance\" | \"workforce\" | \"reality-capture\";\nexport type FilterStripSize = \"default\" | \"sm\";\n\ninterface CoreFilterStripProps {\n\tvariant: FilterStripVariant;\n\tsize?: FilterStripSize;\n\tonFiltersChange?: (filters: Record<string, unknown>) => void;\n}\n\n/** Horizontal filter strip with variant-specific controls for dashboards. */\nexport function CoreFilterStrip({variant, size = \"default\", onFiltersChange}: CoreFilterStripProps) {\n\tconst [dateRange, setDateRange] = useState<{from: Date | undefined; to: Date | undefined}>({\n\t\tfrom: undefined,\n\t\tto: undefined,\n\t});\n\tconst [selectedProjects, setSelectedProjects] = useState<string[]>([]);\n\tconst [selectedZones, setSelectedZones] = useState<string[]>([]);\n\tconst [selectedTrades, setSelectedTrades] = useState<string[]>([]);\n\tconst [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);\n\n\tconst isSmall = size === \"sm\";\n\n\tconst hasDateFilter = dateRange.from !== undefined;\n\tconst activeFilterCount =\n\t\t(hasDateFilter ? 1 : 0) +\n\t\tselectedProjects.length +\n\t\tselectedZones.length +\n\t\tselectedTrades.length +\n\t\tselectedStatuses.length;\n\n\tconst handleClearAll = () => {\n\t\tsetDateRange({from: undefined, to: undefined});\n\t\tsetSelectedProjects([]);\n\t\tsetSelectedZones([]);\n\t\tsetSelectedTrades([]);\n\t\tsetSelectedStatuses([]);\n\t\tonFiltersChange?.({});\n\t};\n\n\tconst notifyChange = () => {\n\t\tonFiltersChange?.({\n\t\t\tdateRange,\n\t\t\tprojects: selectedProjects,\n\t\t\tzones: selectedZones,\n\t\t\ttrades: selectedTrades,\n\t\t\tstatuses: selectedStatuses,\n\t\t});\n\t};\n\n\tconst selectWidth = isSmall ? \"wwc:w-[120px]\" : \"wwc:w-[140px]\";\n\n\treturn (\n\t\t<div className={`wwc:flex wwc:items-center wwc:flex-wrap wwc:gap-2 ${isSmall ? \"wwc:py-1.5\" : \"wwc:py-2\"}`}>\n\t\t\t{/* Date Range Picker */}\n\t\t\t<DateRangePicker\n\t\t\t\tdateRange={dateRange}\n\t\t\t\tonDateRangeChange={(range) => {\n\t\t\t\t\tsetDateRange(range ?? {from: undefined, to: undefined});\n\t\t\t\t\tnotifyChange();\n\t\t\t\t}}\n\t\t\t\tplaceholder=\"Date range\"\n\t\t\t\tclassName={isSmall ? \"wwc:w-[180px] wwc:h-7 wwc:text-xs\" : \"wwc:w-[220px] wwc:h-9 wwc:text-xs\"}\n\t\t\t/>\n\n\t\t\t{/* Projects */}\n\t\t\t<MultiSelect\n\t\t\t\toptions={projectOptions}\n\t\t\t\tvalue={selectedProjects}\n\t\t\t\tonValueChange={(selected) => {\n\t\t\t\t\tsetSelectedProjects(selected);\n\t\t\t\t\tnotifyChange();\n\t\t\t\t}}\n\t\t\t\tplaceholder=\"Projects\"\n\t\t\t\tsearchPlaceholder=\"Search projects...\"\n\t\t\t\tclassName={selectWidth}\n\t\t\t\tkeepPlaceholder\n\t\t\t\tsize={size}\n\t\t\t/>\n\n\t\t\t{/* Variant-specific filters */}\n\t\t\t{variant === \"performance\" && (\n\t\t\t\t<MultiSelect\n\t\t\t\t\toptions={statusOptions}\n\t\t\t\t\tvalue={selectedStatuses}\n\t\t\t\t\tonValueChange={(selected) => {\n\t\t\t\t\t\tsetSelectedStatuses(selected);\n\t\t\t\t\t\tnotifyChange();\n\t\t\t\t\t}}\n\t\t\t\t\tplaceholder=\"Status\"\n\t\t\t\t\tsearchPlaceholder=\"Search status...\"\n\t\t\t\t\tclassName={selectWidth}\n\t\t\t\t\tkeepPlaceholder\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{variant === \"workforce\" && (\n\t\t\t\t<>\n\t\t\t\t\t<MultiSelect\n\t\t\t\t\t\toptions={zoneOptions}\n\t\t\t\t\t\tvalue={selectedZones}\n\t\t\t\t\t\tonValueChange={(selected) => {\n\t\t\t\t\t\t\tsetSelectedZones(selected);\n\t\t\t\t\t\t\tnotifyChange();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder=\"Zones\"\n\t\t\t\t\t\tsearchPlaceholder=\"Search zones...\"\n\t\t\t\t\t\tclassName={selectWidth}\n\t\t\t\t\t\tkeepPlaceholder\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t/>\n\t\t\t\t\t<MultiSelect\n\t\t\t\t\t\toptions={tradeOptions}\n\t\t\t\t\t\tvalue={selectedTrades}\n\t\t\t\t\t\tonValueChange={(selected) => {\n\t\t\t\t\t\t\tsetSelectedTrades(selected);\n\t\t\t\t\t\t\tnotifyChange();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder=\"Trades\"\n\t\t\t\t\t\tsearchPlaceholder=\"Search trades...\"\n\t\t\t\t\t\tclassName={selectWidth}\n\t\t\t\t\t\tkeepPlaceholder\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{/* Separator + Clear + Chips — only when filters are active */}\n\t\t\t{activeFilterCount > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<Separator orientation=\"vertical\" className={isSmall ? \"wwc:h-4 wwc:mx-0.5\" : \"wwc:h-6 wwc:mx-1\"} />\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tclassName={`wwc:gap-1.5 wwc:text-muted-foreground wwc:hover:text-foreground ${isSmall ? \"wwc:h-7 wwc:text-[11px]\" : \"wwc:h-8 wwc:text-xs\"}`}\n\t\t\t\t\t\tonClick={handleClearAll}\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className={isSmall ? \"wwc:h-3 wwc:w-3\" : \"wwc:h-3.5 wwc:w-3.5\"} />\n\t\t\t\t\t\tClear all\n\t\t\t\t\t</Button>\n\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:flex-wrap wwc:gap-1.5\">\n\t\t\t\t\t\t{selectedProjects.map((val) => {\n\t\t\t\t\t\t\tconst opt = projectOptions.find((o) => o.value === val);\n\t\t\t\t\t\t\treturn opt ? (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={val}\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tclassName={`wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? \"wwc:h-5 wwc:text-[10px]\" : \"wwc:h-6 wwc:text-xs\"}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t\t<X\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setSelectedProjects(selectedProjects.filter((v) => v !== val))}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t) : null;\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{selectedZones.map((val) => {\n\t\t\t\t\t\t\tconst opt = zoneOptions.find((o) => o.value === val);\n\t\t\t\t\t\t\treturn opt ? (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={val}\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tclassName={`wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? \"wwc:h-5 wwc:text-[10px]\" : \"wwc:h-6 wwc:text-xs\"}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t\t<X\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setSelectedZones(selectedZones.filter((v) => v !== val))}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t) : null;\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{selectedTrades.map((val) => {\n\t\t\t\t\t\t\tconst opt = tradeOptions.find((o) => o.value === val);\n\t\t\t\t\t\t\treturn opt ? (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={val}\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tclassName={`wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? \"wwc:h-5 wwc:text-[10px]\" : \"wwc:h-6 wwc:text-xs\"}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t\t<X\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setSelectedTrades(selectedTrades.filter((v) => v !== val))}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t) : null;\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{selectedStatuses.map((val) => {\n\t\t\t\t\t\t\tconst opt = statusOptions.find((o) => o.value === val);\n\t\t\t\t\t\t\treturn opt ? (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={val}\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tclassName={`wwc:gap-1 wwc:font-normal wwc:shrink-0 ${isSmall ? \"wwc:h-5 wwc:text-[10px]\" : \"wwc:h-6 wwc:text-xs\"}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t\t<X\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-3 wwc:w-3 wwc:cursor-pointer wwc:hover:text-destructive\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setSelectedStatuses(selectedStatuses.filter((v) => v !== val))}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t) : null;\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAM,iBAAiC;CACtC;EAAC,OAAO;EAAa,OAAO;CAAW;CACvC;EAAC,OAAO;EAAa,OAAO;CAAW;CACvC;EAAC,OAAO;EAAmB,OAAO;CAAiB;CACnD;EAAC,OAAO;EAAc,OAAO;CAAY;CACzC;EAAC,OAAO;EAAW,OAAO;CAAS;CACnC;EAAC,OAAO;EAAe,OAAO;CAAa;CAC3C;EAAC,OAAO;EAAgB,OAAO;CAAc;CAC7C;EAAC,OAAO;EAAe,OAAO;CAAa;CAC3C;EAAC,OAAO;EAAW,OAAO;CAAS;AACpC;AAGA,MAAM,cAA8B;CACnC;EAAC,OAAO;EAAU,OAAO;CAAqB;CAC9C;EAAC,OAAO;EAAmB,OAAO;CAAiB;CACnD;EAAC,OAAO;EAAc,OAAO;CAAkB;CAC/C;EAAC,OAAO;EAAS,OAAO;CAAiB;CACzC;EAAC,OAAO;EAAc,OAAO;CAAkB;CAC/C;EAAC,OAAO;EAAa,OAAO;CAAgB;CAC5C;EAAC,OAAO;EAAc,OAAO;CAAiB;CAC9C;EAAC,OAAO;EAAY,OAAO;CAAe;AAC3C;AAGA,MAAM,eAA+B;CACpC;EAAC,OAAO;EAAS,OAAO;CAAO;CAC/B;EAAC,OAAO;EAAc,OAAO;CAAY;CACzC;EAAC,OAAO;EAAc,OAAO;CAAY;CACzC;EAAC,OAAO;EAAS,OAAO;CAAO;CAC/B;EAAC,OAAO;EAAa,OAAO;CAAW;CACvC;EAAC,OAAO;EAAU,OAAO;CAAQ;AAClC;AAGA,MAAM,gBAAgC;CACrC;EAAC,OAAO;EAAY,OAAO;CAAU;CACrC;EAAC,OAAO;EAAW,OAAO;CAAS;CACnC;EAAC,OAAO;EAAY,OAAO;CAAU;AACtC;;AAaA,SAAgB,gBAAgB,EAAC,SAAS,OAAO,WAAW,mBAAwC;CACnG,MAAM,CAAC,WAAW,gBAAgB,SAAyD;EAC1F,MAAM,KAAA;EACN,IAAI,KAAA;CACL,CAAC;CACD,MAAM,CAAC,kBAAkB,uBAAuB,SAAmB,CAAC,CAAC;CACrE,MAAM,CAAC,eAAe,oBAAoB,SAAmB,CAAC,CAAC;CAC/D,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,CAAC,CAAC;CACjE,MAAM,CAAC,kBAAkB,uBAAuB,SAAmB,CAAC,CAAC;CAErE,MAAM,UAAU,SAAS;CAGzB,MAAM,qBADgB,UAAU,SAAS,KAAA,IAEvB,IAAI,KACrB,iBAAiB,SACjB,cAAc,SACd,eAAe,SACf,iBAAiB;CAElB,MAAM,uBAAuB;EAC5B,aAAa;GAAC,MAAM,KAAA;GAAW,IAAI,KAAA;EAAS,CAAC;EAC7C,oBAAoB,CAAC,CAAC;EACtB,iBAAiB,CAAC,CAAC;EACnB,kBAAkB,CAAC,CAAC;EACpB,oBAAoB,CAAC,CAAC;EACtB,kBAAkB,CAAC,CAAC;CACrB;CAEA,MAAM,qBAAqB;EAC1B,kBAAkB;GACjB;GACA,UAAU;GACV,OAAO;GACP,QAAQ;GACR,UAAU;EACX,CAAC;CACF;CAEA,MAAM,cAAc,UAAU,kBAAkB;CAEhD,OACC,qBAAC,OAAD;EAAK,WAAW,qDAAqD,UAAU,eAAe;EAA9F,UAAA;GAEC,oBAAC,iBAAD;IACY;IACX,oBAAoB,UAAU;KAC7B,aAAa,SAAS;MAAC,MAAM,KAAA;MAAW,IAAI,KAAA;KAAS,CAAC;KACtD,aAAa;IACd;IACA,aAAY;IACZ,WAAW,UAAU,sCAAsC;GAC3D,CAAA;GAGD,oBAAC,aAAD;IACC,SAAS;IACT,OAAO;IACP,gBAAgB,aAAa;KAC5B,oBAAoB,QAAQ;KAC5B,aAAa;IACd;IACA,aAAY;IACZ,mBAAkB;IAClB,WAAW;IACX,iBAAA;IACM;GACN,CAAA;GAGA,YAAY,iBACZ,oBAAC,aAAD;IACC,SAAS;IACT,OAAO;IACP,gBAAgB,aAAa;KAC5B,oBAAoB,QAAQ;KAC5B,aAAa;IACd;IACA,aAAY;IACZ,mBAAkB;IAClB,WAAW;IACX,iBAAA;IACM;GACN,CAAA;GAGD,YAAY,eACZ,qBAAA,YAAA,EAAA,UAAA,CACC,oBAAC,aAAD;IACC,SAAS;IACT,OAAO;IACP,gBAAgB,aAAa;KAC5B,iBAAiB,QAAQ;KACzB,aAAa;IACd;IACA,aAAY;IACZ,mBAAkB;IAClB,WAAW;IACX,iBAAA;IACM;GACN,CAAA,GACD,oBAAC,aAAD;IACC,SAAS;IACT,OAAO;IACP,gBAAgB,aAAa;KAC5B,kBAAkB,QAAQ;KAC1B,aAAa;IACd;IACA,aAAY;IACZ,mBAAkB;IAClB,WAAW;IACX,iBAAA;IACM;GACN,CAAA,CACA,EAAA,CAAA;GAIF,oBAAoB,KACpB,qBAAA,YAAA,EAAA,UAAA;IACC,oBAAC,WAAD;KAAW,aAAY;KAAW,WAAW,UAAU,uBAAuB;IAAqB,CAAA;IAEnG,qBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,WAAW,mEAAmE,UAAU,4BAA4B;KACpH,SAAS;KAJV,UAAA,CAMC,oBAAC,GAAD,EAAG,WAAW,UAAU,oBAAoB,sBAAwB,CAAA,GAAC,WAE9D;;IAER,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,iBAAiB,KAAK,QAAQ;OAC9B,MAAM,MAAM,eAAe,MAAM,MAAM,EAAE,UAAU,GAAG;OACtD,OAAO,MACN,qBAAC,OAAD;QAEC,SAAQ;QACR,WAAW,0CAA0C,UAAU,4BAA4B;QAH5F,UAAA,CAKE,IAAI,OACL,oBAAC,GAAD;SACC,WAAU;SACV,eAAe,oBAAoB,iBAAiB,QAAQ,MAAM,MAAM,GAAG,CAAC;QAC5E,CAAA,CACK;OATD,GAAA,GASC,IACJ;MACL,CAAC;MACA,cAAc,KAAK,QAAQ;OAC3B,MAAM,MAAM,YAAY,MAAM,MAAM,EAAE,UAAU,GAAG;OACnD,OAAO,MACN,qBAAC,OAAD;QAEC,SAAQ;QACR,WAAW,0CAA0C,UAAU,4BAA4B;QAH5F,UAAA,CAKE,IAAI,OACL,oBAAC,GAAD;SACC,WAAU;SACV,eAAe,iBAAiB,cAAc,QAAQ,MAAM,MAAM,GAAG,CAAC;QACtE,CAAA,CACK;OATD,GAAA,GASC,IACJ;MACL,CAAC;MACA,eAAe,KAAK,QAAQ;OAC5B,MAAM,MAAM,aAAa,MAAM,MAAM,EAAE,UAAU,GAAG;OACpD,OAAO,MACN,qBAAC,OAAD;QAEC,SAAQ;QACR,WAAW,0CAA0C,UAAU,4BAA4B;QAH5F,UAAA,CAKE,IAAI,OACL,oBAAC,GAAD;SACC,WAAU;SACV,eAAe,kBAAkB,eAAe,QAAQ,MAAM,MAAM,GAAG,CAAC;QACxE,CAAA,CACK;OATD,GAAA,GASC,IACJ;MACL,CAAC;MACA,iBAAiB,KAAK,QAAQ;OAC9B,MAAM,MAAM,cAAc,MAAM,MAAM,EAAE,UAAU,GAAG;OACrD,OAAO,MACN,qBAAC,OAAD;QAEC,SAAQ;QACR,WAAW,0CAA0C,UAAU,4BAA4B;QAH5F,UAAA,CAKE,IAAI,OACL,oBAAC,GAAD;SACC,WAAU;SACV,eAAe,oBAAoB,iBAAiB,QAAQ,MAAM,MAAM,GAAG,CAAC;QAC5E,CAAA,CACK;OATD,GAAA,GASC,IACJ;MACL,CAAC;KACG;;GACJ,EAAA,CAAA;EAEC;;AAEP"}

package/dist/navigation/core-org-project-switcher.d.mts

@@ -0,0 +1,12 @@
+import { Organization, Project } from "../types.mjs";
+//#region src/navigation/core-org-project-switcher.d.ts
+interface OrgProjectSwitcherProps {
+  selectedOrg: Organization | null;
+  selectedProject: Project | null;
+  onSelectOrg: (org: Organization) => void;
+  onSelectProject: (project: Project | null) => void;
+}
+/** Organization and project switcher with a two-column popover layout. */
+export declare function OrgProjectSwitcher({ selectedOrg, selectedProject, onSelectOrg, onSelectProject }: OrgProjectSwitcherProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=core-org-project-switcher.d.mts.map

package/dist/navigation/core-org-project-switcher.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-org-project-switcher.d.mts","names":[],"sources":["../../src/navigation/core-org-project-switcher.tsx"],"mappings":";;UAcU;EACT,aAAa;EACb,iBAAiB;EACjB,cAAc,KAAK;EACnB,kBAAkB,SAAS;;;wBAmBZ,qBACf,aACA,iBACA,aACA,mBACE,sDAAuB,IAAA"}

package/dist/navigation/core-org-project-switcher.mjs

@@ -0,0 +1,201 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { ScrollArea } from "../scroll-area.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.mjs";
+import { Input } from "../input.mjs";
+import { Avatar, AvatarFallback } from "../avatar.mjs";
+import { Separator } from "../separator.mjs";
+import { MOCK_ORGANIZATIONS, getProjectsByOrg } from "../data/mock-data.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Check, ChevronsUpDown, Plus, Search } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/navigation/core-org-project-switcher.tsx
+function getInitials(name) {
+	return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+function getAvatarColor(name) {
+	const colors = [
+		"wwc:bg-chart-1",
+		"wwc:bg-chart-2",
+		"wwc:bg-chart-3",
+		"wwc:bg-chart-4",
+		"wwc:bg-chart-5"
+	];
+	return colors[name.charCodeAt(0) % colors.length];
+}
+/** Organization and project switcher with a two-column popover layout. */
+function OrgProjectSwitcher({ selectedOrg, selectedProject, onSelectOrg, onSelectProject }) {
+	const [open, setOpen] = React.useState(false);
+	const [orgSearch, setOrgSearch] = React.useState("");
+	const [projectSearch, setProjectSearch] = React.useState("");
+	const projects = selectedOrg ? getProjectsByOrg(selectedOrg.id) : [];
+	const filteredOrgs = MOCK_ORGANIZATIONS.filter((org) => org.name.toLowerCase().includes(orgSearch.toLowerCase()));
+	const filteredProjects = projects.filter((project) => project.name.toLowerCase().includes(projectSearch.toLowerCase()));
+	const handleOrgSelect = (org) => {
+		onSelectOrg(org);
+		onSelectProject(null);
+		setOpen(false);
+		setOrgSearch("");
+		setProjectSearch("");
+	};
+	const handleProjectSelect = (project) => {
+		onSelectProject(project);
+		setOpen(false);
+		setOrgSearch("");
+		setProjectSearch("");
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-label": "Select organization and project",
+				className: "wwc:h-8 wwc:gap-2 wwc:px-2 wwc:font-normal",
+				children: [selectedOrg && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Avatar, {
+						className: "wwc:h-5 wwc:w-5",
+						children: /* @__PURE__ */ jsx(AvatarFallback, {
+							className: cn("wwc:text-[10px] wwc:font-medium wwc:text-foreground", getAvatarColor(selectedOrg.name)),
+							children: getInitials(selectedOrg.name)
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:hidden wwc:font-medium wwc:lg:inline",
+						children: selectedOrg.name
+					}),
+					selectedOrg.plan !== "free" && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "wwc:hidden wwc:h-5 wwc:px-1.5 wwc:text-[10px] wwc:xl:inline-flex",
+						children: selectedOrg.plan === "pro" ? "Pro" : "Enterprise"
+					})
+				] }), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "wwc:w-[500px] wwc:p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:w-1/2 wwc:border-r",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:p-2",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "wwc:relative",
+								children: [/* @__PURE__ */ jsx(Search, { className: "wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-3.5 wwc:w-3.5 wwc:-translate-y-1/2 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+									placeholder: "Find Organization...",
+									value: orgSearch,
+									onChange: (e) => setOrgSearch(e.target.value),
+									className: "wwc:h-8 wwc:pl-8 wwc:text-sm"
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:p-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "wwc:px-2 wwc:py-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+								children: "Organizations"
+							}), /* @__PURE__ */ jsxs(ScrollArea, {
+								className: "wwc:h-[200px]",
+								children: [filteredOrgs.map((org) => /* @__PURE__ */ jsxs("button", {
+									onClick: () => handleOrgSelect(org),
+									className: cn("wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:hover:bg-accent", selectedOrg?.id === org.id && "wwc:bg-accent"),
+									children: [
+										/* @__PURE__ */ jsx(Avatar, {
+											className: "wwc:h-5 wwc:w-5",
+											children: /* @__PURE__ */ jsx(AvatarFallback, {
+												className: cn("wwc:text-[10px] wwc:font-medium wwc:text-foreground", getAvatarColor(org.name)),
+												children: getInitials(org.name)
+											})
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "wwc:flex-1 wwc:truncate wwc:text-left",
+											children: org.name
+										}),
+										selectedOrg?.id === org.id && /* @__PURE__ */ jsx(Check, { className: "wwc:h-4 wwc:w-4 wwc:text-primary" })
+									]
+								}, org.id)), filteredOrgs.length === 0 && /* @__PURE__ */ jsx("p", {
+									className: "wwc:px-2 wwc:py-4 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+									children: "No organizations found."
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:p-1",
+							children: /* @__PURE__ */ jsxs("button", {
+								className: "wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-muted-foreground wwc:outline-none wwc:hover:bg-accent wwc:hover:text-foreground",
+								children: [/* @__PURE__ */ jsx(Plus, { className: "wwc:h-4 wwc:w-4" }), "Create Organization"]
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:w-1/2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:p-2",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "wwc:relative",
+								children: [/* @__PURE__ */ jsx(Search, { className: "wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-3.5 wwc:w-3.5 wwc:-translate-y-1/2 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+									placeholder: "Find Project...",
+									value: projectSearch,
+									onChange: (e) => setProjectSearch(e.target.value),
+									className: "wwc:h-8 wwc:pl-8 wwc:text-sm"
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:p-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "wwc:px-2 wwc:py-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+								children: "Projects"
+							}), /* @__PURE__ */ jsxs(ScrollArea, {
+								className: "wwc:h-[200px]",
+								children: [filteredProjects.map((project) => /* @__PURE__ */ jsxs("button", {
+									onClick: () => handleProjectSelect(project),
+									className: cn("wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:hover:bg-accent", selectedProject?.id === project.id && "wwc:bg-accent"),
+									children: [
+										/* @__PURE__ */ jsx(Avatar, {
+											className: "wwc:h-5 wwc:w-5",
+											children: /* @__PURE__ */ jsx(AvatarFallback, {
+												className: cn("wwc:text-[10px] wwc:font-medium", getAvatarColor(project.name)),
+												children: getInitials(project.name)
+											})
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "wwc:flex-1 wwc:truncate wwc:text-left",
+											children: project.name
+										}),
+										selectedProject?.id === project.id && /* @__PURE__ */ jsx(Check, { className: "wwc:h-4 wwc:w-4 wwc:text-primary" })
+									]
+								}, project.id)), filteredProjects.length === 0 && /* @__PURE__ */ jsx("p", {
+									className: "wwc:px-2 wwc:py-4 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+									children: selectedOrg ? "No projects found." : "Select an organization first."
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:p-1",
+							children: /* @__PURE__ */ jsxs("button", {
+								className: "wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-muted-foreground wwc:outline-none wwc:hover:bg-accent wwc:hover:text-foreground",
+								children: [/* @__PURE__ */ jsx(Plus, { className: "wwc:h-4 wwc:w-4" }), "Create Project"]
+							})
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { OrgProjectSwitcher };
+
+//# sourceMappingURL=core-org-project-switcher.mjs.map

package/dist/navigation/core-org-project-switcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-org-project-switcher.mjs","names":[],"sources":["../../src/navigation/core-org-project-switcher.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Check, ChevronsUpDown, Plus, Search} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Avatar, AvatarFallback} from \"../avatar\";\nimport {Badge} from \"../badge\";\nimport {Button} from \"../button\";\nimport {MOCK_ORGANIZATIONS, getProjectsByOrg} from \"../data/mock-data\";\nimport {Input} from \"../input\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"../popover\";\nimport {ScrollArea} from \"../scroll-area\";\nimport {Separator} from \"../separator\";\nimport type {Organization, Project} from \"../types\";\n\ninterface OrgProjectSwitcherProps {\n\tselectedOrg: Organization | null;\n\tselectedProject: Project | null;\n\tonSelectOrg: (org: Organization) => void;\n\tonSelectProject: (project: Project | null) => void;\n}\n\nfunction getInitials(name: string): string {\n\treturn name\n\t\t.split(\" \")\n\t\t.map((n) => n[0])\n\t\t.join(\"\")\n\t\t.toUpperCase()\n\t\t.slice(0, 2);\n}\n\nfunction getAvatarColor(name: string): string {\n\tconst colors = [\"wwc:bg-chart-1\", \"wwc:bg-chart-2\", \"wwc:bg-chart-3\", \"wwc:bg-chart-4\", \"wwc:bg-chart-5\"];\n\tconst index = name.charCodeAt(0) % colors.length;\n\treturn colors[index];\n}\n\n/** Organization and project switcher with a two-column popover layout. */\nexport function OrgProjectSwitcher({\n\tselectedOrg,\n\tselectedProject,\n\tonSelectOrg,\n\tonSelectProject,\n}: OrgProjectSwitcherProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [orgSearch, setOrgSearch] = React.useState(\"\");\n\tconst [projectSearch, setProjectSearch] = React.useState(\"\");\n\n\tconst projects = selectedOrg ? getProjectsByOrg(selectedOrg.id) : [];\n\n\tconst filteredOrgs = MOCK_ORGANIZATIONS.filter((org) => org.name.toLowerCase().includes(orgSearch.toLowerCase()));\n\n\tconst filteredProjects = projects.filter((project) =>\n\t\tproject.name.toLowerCase().includes(projectSearch.toLowerCase()),\n\t);\n\n\tconst handleOrgSelect = (org: Organization) => {\n\t\tonSelectOrg(org);\n\t\t// Clear project selection to return to org-level view\n\t\tonSelectProject(null);\n\t\tsetOpen(false);\n\t\tsetOrgSearch(\"\");\n\t\tsetProjectSearch(\"\");\n\t};\n\n\tconst handleProjectSelect = (project: Project) => {\n\t\tonSelectProject(project);\n\t\tsetOpen(false);\n\t\tsetOrgSearch(\"\");\n\t\tsetProjectSearch(\"\");\n\t};\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\taria-label=\"Select organization and project\"\n\t\t\t\t\tclassName=\"wwc:h-8 wwc:gap-2 wwc:px-2 wwc:font-normal\"\n\t\t\t\t>\n\t\t\t\t\t{selectedOrg && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Avatar className=\"wwc:h-5 wwc:w-5\">\n\t\t\t\t\t\t\t\t<AvatarFallback\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"wwc:text-[10px] wwc:font-medium wwc:text-foreground\",\n\t\t\t\t\t\t\t\t\t\tgetAvatarColor(selectedOrg.name),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{getInitials(selectedOrg.name)}\n\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t<span className=\"wwc:hidden wwc:font-medium wwc:lg:inline\">{selectedOrg.name}</span>\n\t\t\t\t\t\t\t{selectedOrg.plan !== \"free\" && (\n\t\t\t\t\t\t\t\t<Badge variant=\"secondary\" className=\"wwc:hidden wwc:h-5 wwc:px-1.5 wwc:text-[10px] wwc:xl:inline-flex\">\n\t\t\t\t\t\t\t\t\t{selectedOrg.plan === \"pro\" ? \"Pro\" : \"Enterprise\"}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t<ChevronsUpDown className=\"wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:opacity-50\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"wwc:w-[500px] wwc:p-0\" align=\"start\">\n\t\t\t\t<div className=\"wwc:flex\">\n\t\t\t\t\t{/* Organizations Column */}\n\t\t\t\t\t<div className=\"wwc:w-1/2 wwc:border-r\">\n\t\t\t\t\t\t<div className=\"wwc:p-2\">\n\t\t\t\t\t\t\t<div className=\"wwc:relative\">\n\t\t\t\t\t\t\t\t<Search className=\"wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-3.5 wwc:w-3.5 wwc:-translate-y-1/2 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tplaceholder=\"Find Organization...\"\n\t\t\t\t\t\t\t\t\tvalue={orgSearch}\n\t\t\t\t\t\t\t\t\tonChange={(e) => setOrgSearch(e.target.value)}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-8 wwc:pl-8 wwc:text-sm\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Separator />\n\t\t\t\t\t\t<div className=\"wwc:p-1\">\n\t\t\t\t\t\t\t<p className=\"wwc:px-2 wwc:py-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground\">Organizations</p>\n\t\t\t\t\t\t\t<ScrollArea className=\"wwc:h-[200px]\">\n\t\t\t\t\t\t\t\t{filteredOrgs.map((org) => (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tkey={org.id}\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleOrgSelect(org)}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:hover:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t\tselectedOrg?.id === org.id && \"wwc:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Avatar className=\"wwc:h-5 wwc:w-5\">\n\t\t\t\t\t\t\t\t\t\t\t<AvatarFallback\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\"wwc:text-[10px] wwc:font-medium wwc:text-foreground\", getAvatarColor(org.name))}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{getInitials(org.name)}\n\t\t\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:truncate wwc:text-left\">{org.name}</span>\n\t\t\t\t\t\t\t\t\t\t{selectedOrg?.id === org.id && <Check className=\"wwc:h-4 wwc:w-4 wwc:text-primary\" />}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{filteredOrgs.length === 0 && (\n\t\t\t\t\t\t\t\t\t<p className=\"wwc:px-2 wwc:py-4 wwc:text-center wwc:text-sm wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tNo organizations found.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Separator />\n\t\t\t\t\t\t<div className=\"wwc:p-1\">\n\t\t\t\t\t\t\t<button className=\"wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-muted-foreground wwc:outline-none wwc:hover:bg-accent wwc:hover:text-foreground\">\n\t\t\t\t\t\t\t\t<Plus className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t\tCreate Organization\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Projects Column */}\n\t\t\t\t\t<div className=\"wwc:w-1/2\">\n\t\t\t\t\t\t<div className=\"wwc:p-2\">\n\t\t\t\t\t\t\t<div className=\"wwc:relative\">\n\t\t\t\t\t\t\t\t<Search className=\"wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-3.5 wwc:w-3.5 wwc:-translate-y-1/2 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tplaceholder=\"Find Project...\"\n\t\t\t\t\t\t\t\t\tvalue={projectSearch}\n\t\t\t\t\t\t\t\t\tonChange={(e) => setProjectSearch(e.target.value)}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-8 wwc:pl-8 wwc:text-sm\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Separator />\n\t\t\t\t\t\t<div className=\"wwc:p-1\">\n\t\t\t\t\t\t\t<p className=\"wwc:px-2 wwc:py-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground\">Projects</p>\n\t\t\t\t\t\t\t<ScrollArea className=\"wwc:h-[200px]\">\n\t\t\t\t\t\t\t\t{filteredProjects.map((project) => (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tkey={project.id}\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleProjectSelect(project)}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:hover:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t\tselectedProject?.id === project.id && \"wwc:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Avatar className=\"wwc:h-5 wwc:w-5\">\n\t\t\t\t\t\t\t\t\t\t\t<AvatarFallback className={cn(\"wwc:text-[10px] wwc:font-medium\", getAvatarColor(project.name))}>\n\t\t\t\t\t\t\t\t\t\t\t\t{getInitials(project.name)}\n\t\t\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:truncate wwc:text-left\">{project.name}</span>\n\t\t\t\t\t\t\t\t\t\t{selectedProject?.id === project.id && <Check className=\"wwc:h-4 wwc:w-4 wwc:text-primary\" />}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{filteredProjects.length === 0 && (\n\t\t\t\t\t\t\t\t\t<p className=\"wwc:px-2 wwc:py-4 wwc:text-center wwc:text-sm wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{selectedOrg ? \"No projects found.\" : \"Select an organization first.\"}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Separator />\n\t\t\t\t\t\t<div className=\"wwc:p-1\">\n\t\t\t\t\t\t\t<button className=\"wwc:flex wwc:w-full wwc:items-center wwc:gap-2 wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-muted-foreground wwc:outline-none wwc:hover:bg-accent wwc:hover:text-foreground\">\n\t\t\t\t\t\t\t\t<Plus className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t\tCreate Project\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}

package/dist/navigation/switcher.d.mts

@@ -0,0 +1,38 @@
+import * as React from "react";
+//#region src/navigation/switcher.d.ts
+export type SwitcherGroup = {
+  label: string;
+  items: string[];
+};
+export type SwitcherDensity = "comfortable" | "compact";
+export interface SwitcherProps {
+  /** Content rendered inside the trigger button, before the chevron (e.g. a logo + label). */
+  children: React.ReactNode;
+  /** Flat list of options. Ignored when `groups` is provided. */
+  items?: readonly string[];
+  /** Grouped options — a header label with nested items. */
+  groups?: SwitcherGroup[];
+  /** The currently selected option (gets a check mark). */
+  selected?: string;
+  onSelect: (item: string) => void;
+  placeholder?: string;
+  emptyLabel?: string;
+  density?: SwitcherDensity;
+  align?: "start" | "end";
+  /** Popover width in px. Defaults to 300. */
+  contentWidth?: number;
+  /** Extra classes for the trigger button. */
+  triggerClassName?: string;
+  /** When set, renders a pinned footer action in the popover (e.g. "View all organizations"). */
+  onViewAll?: () => void;
+  /** Label for the `onViewAll` footer action. Defaults to "View all". */
+  viewAllLabel?: string;
+}
+/**
+ * The canonical searchable "pick from a list" dropdown used across the app shell — the app top bar's
+ * project switcher and the app sidebar's organization switcher render THIS component. Supports a flat list
+ * or grouped items, matches on type, marks the selected row, and closes on pick / Esc.
+ */
+export declare function Switcher({ children, items, groups, selected, onSelect, placeholder, emptyLabel, density, align, contentWidth, triggerClassName, onViewAll, viewAllLabel }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=switcher.d.mts.map

package/dist/navigation/switcher.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switcher.d.mts","names":[],"sources":["../../src/navigation/switcher.tsx"],"mappings":";;YASY;EAAiB;EAAe;;YAChC;iBAEK;;EAEhB,UAAU,MAAM;;EAEhB;;EAEA,SAAS;;EAET;EACA,WAAW;EACX;EACA;EACA,UAAU;EACV;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;wBAiCe,WACf,UACA,OACA,QACA,UACA,UACA,aACA,YACA,SACA,OACA,cACA,kBACA,WACA,gBACE,4CAAa,IAAA"}