@datum-cloud/datum-ui 1.3.1 → 1.4.0

package/dist/loader-overlay/index.mjs

@@ -1,2 +1,2 @@
-import { t as LoaderOverlay } from "../loader-overlay-CumsP4Xh.mjs";
+import { t as LoaderOverlay } from "../loader-overlay-DD94azZX.mjs";
 export { LoaderOverlay };

package/dist/{loader-overlay-CumsP4Xh.mjs → loader-overlay-DD94azZX.mjs}

@@ -1,7 +1,7 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
-import { t as SpinnerIcon } from "./spinner.icon-DSvVwPjx.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as SpinnerIcon } from "./spinner.icon-BYUMQ8H-.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/features/loader-overlay/loader-overlay.tsx
+//#region src/components/base/loader-overlay/loader-overlay.tsx
 function LoaderOverlay({ message, className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("bg-background/80 absolute inset-0 z-10 flex items-center justify-center gap-2 backdrop-blur-[1px]", className),

package/dist/logo/index.mjs

@@ -1,3 +1,3 @@
-import { a as logoStyles, i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "../logo-text-DMp3dH-h.mjs";
-import { t as Logo } from "../logo-BhV6hnzH.mjs";
+import { a as logoStyles, i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "../logo-text-Dpm5O6Kg.mjs";
+import { t as Logo } from "../logo-C3FxD7jb.mjs";
 export { Logo, LogoFlat, LogoIcon, LogoStacked, LogoText, logoStyles };

package/dist/logo/themed/index.mjs

@@ -1,5 +1,5 @@
-import { i as ClientOnly, n as useTheme } from "../../themes-CAmRnjUM.mjs";
-import { i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "../../logo-text-DMp3dH-h.mjs";
+import { i as ClientOnly, n as useTheme } from "../../themes-BK5atywZ.mjs";
+import { i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "../../logo-text-Dpm5O6Kg.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/features/logo/themed/logo-themed.tsx

package/dist/{logo-BhV6hnzH.mjs → logo-C3FxD7jb.mjs}

@@ -1,4 +1,4 @@
-import { i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "./logo-text-DMp3dH-h.mjs";
+import { i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "./logo-text-Dpm5O6Kg.mjs";
 //#region src/components/features/logo/logo.tsx
 /**
 * Datum logo namespace.

package/dist/{logo-text-DMp3dH-h.mjs → logo-text-Dpm5O6Kg.mjs}

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/features/logo/logo.styles.ts

package/dist/map/index.mjs

@@ -1,2 +1,2 @@
-import { A as useLeaflet, C as MapPolyline, D as MapTileLayer, E as MapSearchControl, O as MapTooltip, S as MapPolygon, T as MapRectangle, _ as MapLayers, a as MapDrawCircle, b as MapMarker, c as MapDrawEdit, d as MapDrawPolyline, f as MapDrawRectangle, g as MapLayerGroup, h as MapFullscreenControl, i as MapControlContainer, j as PlaceAutocomplete, k as MapZoomControl, l as MapDrawMarker, m as MapFeatureGroup, n as MapCircle, o as MapDrawControl, p as MapDrawUndo, r as MapCircleMarker, s as MapDrawDelete, t as Map, u as MapDrawPolygon, v as MapLayersControl, w as MapPopup, x as MapMarkerClusterGroup, y as MapLocateControl } from "../map-_GaPwJUi.mjs";
+import { A as useLeaflet, C as MapMarkerClusterGroup, D as MapRectangle, E as MapPopup, O as MapTooltip, S as MapMarker, T as MapPolyline, _ as MapLocateControl, a as MapTileLayer, b as MapCircle, c as MapDrawDelete, d as MapDrawPolygon, f as MapDrawPolyline, g as MapFullscreenControl, h as MapControlContainer, i as MapLayersControl, j as PlaceAutocomplete, k as Map, l as MapDrawEdit, m as MapDrawUndo, n as MapLayerGroup, o as MapDrawCircle, p as MapDrawRectangle, r as MapLayers, s as MapDrawControl, t as MapFeatureGroup, u as MapDrawMarker, v as MapSearchControl, w as MapPolygon, x as MapCircleMarker, y as MapZoomControl } from "../layers-CGp0ceSG.mjs";
 export { Map, MapCircle, MapCircleMarker, MapControlContainer, MapDrawCircle, MapDrawControl, MapDrawDelete, MapDrawEdit, MapDrawMarker, MapDrawPolygon, MapDrawPolyline, MapDrawRectangle, MapDrawUndo, MapFeatureGroup, MapFullscreenControl, MapLayerGroup, MapLayers, MapLayersControl, MapLocateControl, MapMarker, MapMarkerClusterGroup, MapPolygon, MapPolyline, MapPopup, MapRectangle, MapSearchControl, MapTileLayer, MapTooltip, MapZoomControl, PlaceAutocomplete, useLeaflet };

package/dist/mobile-sheet/index.mjs

@@ -1,2 +1,2 @@
-import { n as InSheetContext, r as useInSheet, t as MobileSheet } from "../mobile-sheet-Cx8B89jB.mjs";
-export { InSheetContext, MobileSheet, useInSheet };
+import { i as useInSheet, n as MobileSheet, r as InSheetContext, t as ResponsiveSheetTrigger } from "../mobile-sheet-D9L-JOee.mjs";
+export { InSheetContext, MobileSheet, ResponsiveSheetTrigger, useInSheet };

package/dist/{mobile-sheet-Cx8B89jB.mjs → mobile-sheet-D9L-JOee.mjs}

@@ -1,8 +1,9 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
-import { a as SheetHeader, o as SheetTitle, r as SheetDescription } from "./sheet-CIdmO-NE.mjs";
-import { r as SheetContent, t as Sheet } from "./sheet-C6-WAHk2.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { a as SheetHeader, o as SheetTitle, r as SheetDescription } from "./sheet-DXCZyMHI.mjs";
+import { r as SheetContent, t as Sheet } from "./sheet-BZViad2U.mjs";
 import { createContext, use } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 //#region src/components/base/mobile-sheet/context.ts
 /**
 * Signals that children are rendered inside a MobileSheet. Responsive
@@ -58,4 +59,38 @@ function MobileSheet({ open, onOpenChange, title, description, children, footer,
 	});
 }
 //#endregion
-export { InSheetContext as n, useInSheet as r, MobileSheet as t };
+//#region src/components/base/mobile-sheet/responsive-sheet-trigger.tsx
+/**
+* Shared mobile branch for ResponsivePopover and ResponsiveDropdown: renders the
+* trigger via Radix Slot and opens a MobileSheet.
+*
+* Slot already composes the child trigger's own onClick/onKeyDown before running
+* ours, so we must NOT invoke `trigger.props.onClick` manually (that would fire
+* the child handler twice). We only toggle open state, and only when the child
+* handler has not already called preventDefault.
+*/
+function ResponsiveSheetTrigger({ open, onOpenChange, trigger, children, sheetTitle, sheetDescription, sheetFooter }) {
+	const handleTriggerClick = (e) => {
+		if (!e.defaultPrevented) onOpenChange(!open);
+	};
+	const handleTriggerKeyDown = (e) => {
+		if (!e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onOpenChange(!open);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Slot, {
+		onClick: handleTriggerClick,
+		onKeyDown: handleTriggerKeyDown,
+		children: trigger
+	}), /* @__PURE__ */ jsx(MobileSheet, {
+		open,
+		onOpenChange,
+		title: sheetTitle,
+		description: sheetDescription,
+		footer: sheetFooter,
+		children
+	})] });
+}
+//#endregion
+export { useInSheet as i, MobileSheet as n, InSheetContext as r, ResponsiveSheetTrigger as t };

package/dist/more-actions/index.mjs

@@ -1,3 +1,3 @@
-import { t as ActionRow } from "../action-row-BhMyMSep.mjs";
-import { t as MoreActions } from "../more-actions-DJKEXHy7.mjs";
+import { t as ActionRow } from "../action-row-DTvs91_3.mjs";
+import { t as MoreActions } from "../more-actions-G9hs0rpJ.mjs";
 export { ActionRow, MoreActions };

package/dist/{more-actions-DJKEXHy7.mjs → more-actions-G9hs0rpJ.mjs}

@@ -1,13 +1,14 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
-import { t as Button } from "./button-B_N7A8gv.mjs";
-import { t as ResponsiveDropdown } from "./responsive-dropdown-BhvBzT_1.mjs";
-import { t as Tooltip } from "./tooltip-BqrOCH8l.mjs";
-import { t as ActionRow } from "./action-row-BhMyMSep.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as Button } from "./button-A1qTjZ8U.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-fCmduKaz.mjs";
+import { t as Tooltip } from "./tooltip-BhatUaar.mjs";
+import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { Ellipsis } from "lucide-react";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/features/more-actions/more-actions.tsx
-function MoreActions({ row, actions, className, disabled = false, iconClassName, responsive = true, sheetTitle = "Actions" }) {
+function MoreActions(props) {
+	const { row, actions, className, disabled = false, iconClassName, responsive = true, sheetTitle = "Actions" } = props;
 	const [open, setOpen] = useState(false);
 	const visibleActions = actions.filter((action) => {
 		if (action.hidden === void 0) return true;
@@ -23,6 +24,8 @@ function MoreActions({ row, actions, className, disabled = false, iconClassName,
 			theme: "borderless",
 			size: "icon",
 			disabled,
+			"aria-label": sheetTitle,
+			"aria-haspopup": "menu",
 			className: cn("data-[state=open]:bg-accent size-7 p-0 focus-visible:ring-0 focus-visible:ring-offset-0", className),
 			children: /* @__PURE__ */ jsx(Ellipsis, { className: cn("size-5", iconClassName) })
 		}),

package/dist/multi-select/index.mjs

@@ -1,2 +1,2 @@
-import { t as MultiSelect } from "../multi-select-C9ocz07C.mjs";
+import { t as MultiSelect } from "../multi-select-DIWTdi0i.mjs";
 export { MultiSelect };

package/dist/multi-select-DIWTdi0i.mjs

@@ -0,0 +1,310 @@
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as Badge } from "./badge-BTNW_FEU.mjs";
+import { t as Separator } from "./separator-vbPD_WFQ.mjs";
+import { t as useControllableState } from "./use-controllable-state-Dna7u3r9.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-DJZgXWIE.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-DD94azZX.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-CV-9CyBV.mjs";
+import { cva } from "class-variance-authority";
+import { CheckIcon, ChevronDown, WandSparkles, XCircle, XIcon } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/multi-select/multi-select-options.tsx
+/**
+* Presentational popover command list for the multi-select: the searchable
+* option list with a checkbox affordance per row. Selection state and search
+* are owned by the `picker` engine.
+*/
+function MultiSelectOptions({ picker, searchPlaceholder, emptyContent, header, footer, loading, responsive }) {
+	return /* @__PURE__ */ jsx(OptionList, {
+		picker,
+		searchPlaceholder,
+		emptyContent,
+		header,
+		footer,
+		loading,
+		listClassName: cn("min-h-[200px] max-h-[50svh]", !responsive && "max-h-[250px]"),
+		renderOption: (opt, isSelected) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("border-primary mr-2 flex size-4 items-center justify-center rounded-sm border", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+				children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-background size-4" })
+			}),
+			opt.icon && /* @__PURE__ */ jsx(opt.icon, { className: "text-muted-foreground mr-2 size-4" }),
+			/* @__PURE__ */ jsx("span", { children: opt.label })
+		] })
+	});
+}
+MultiSelectOptions.displayName = "MultiSelectOptions";
+//#endregion
+//#region src/components/features/multi-select/multi-select-shared.ts
+/**
+* Variants for the multi-select badges to handle different styles.
+* Uses class-variance-authority (cva) to define styles based on the `variant` prop.
+*
+* Lives in a shared module so the badge subcomponent and the top-level
+* component can both consume it without creating an import cycle.
+*/
+const multiSelectVariants = cva("flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors whitespace-nowrap", {
+	variants: { variant: {
+		default: "border-input-border bg-input-background/80 text-input-foreground",
+		secondary: "border-secondary/40 bg-secondary/20 text-secondary-foreground",
+		destructive: "border-destructive/60 bg-destructive/20 text-destructive",
+		inverted: "border-transparent bg-foreground text-background"
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+//#region src/components/features/multi-select/selected-badge-list.tsx
+/**
+* A keyboard-operable icon control. The badge/clear affordances live inside the
+* trigger button, so they cannot be real nested `<button>`s (invalid DOM). We
+* expose them as `role="button"` elements with a tab stop, an accessible name,
+* and Enter/Space activation so keyboard and screen-reader users can operate
+* them.
+*/
+function IconAction({ label, onActivate, className, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		role: "button",
+		tabIndex: 0,
+		"aria-label": label,
+		className: cn("inline-flex cursor-pointer items-center", className),
+		onClick: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			onActivate();
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.stopPropagation();
+				event.preventDefault();
+				onActivate();
+			}
+		},
+		children
+	});
+}
+/**
+* Presentational list of selected-value chips rendered inside the trigger:
+* the visible badges, an overflow "+ N more" summary, and the clear-all icon.
+*/
+function SelectedBadgeList({ selectedOptions, maxCount, variant, badgeClassName, clickableBadges, isAnimating, animation, onRemove, onClearExtra, onClearAll, onBadgeClick }) {
+	const visibleOptions = selectedOptions.slice(0, maxCount === -1 ? void 0 : maxCount);
+	const overflowCount = maxCount === -1 ? 0 : selectedOptions.length - maxCount;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [visibleOptions.map((option) => {
+				const IconComponent = option.icon;
+				return /* @__PURE__ */ jsxs(Badge, {
+					className: cn(multiSelectVariants({ variant }), "truncate", isAnimating && "animate-bounce", clickableBadges && "cursor-pointer", badgeClassName),
+					style: { animationDuration: `${animation}s` },
+					onClick: (event) => {
+						if (clickableBadges) {
+							event.stopPropagation();
+							event.preventDefault();
+							onBadgeClick?.(option);
+						}
+					},
+					children: [
+						IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "text-muted-foreground size-3" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[120px] truncate",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx(IconAction, {
+							label: `Remove ${option.label}`,
+							onActivate: () => onRemove(option.value),
+							className: "text-muted-foreground ml-1",
+							children: /* @__PURE__ */ jsx(XCircle, {
+								className: "size-3",
+								"aria-hidden": "true"
+							})
+						})
+					]
+				}, option.value);
+			}), overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+				className: cn(multiSelectVariants({ variant }), "text-muted-foreground", isAnimating && "animate-bounce"),
+				style: { animationDuration: `${animation}s` },
+				children: [`+ ${overflowCount} more`, /* @__PURE__ */ jsx(IconAction, {
+					label: "Clear extra selected",
+					onActivate: onClearExtra,
+					className: "text-muted-foreground ml-1",
+					children: /* @__PURE__ */ jsx(XCircle, {
+						className: "size-3",
+						"aria-hidden": "true"
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ jsx(IconAction, {
+					label: "Clear all",
+					onActivate: onClearAll,
+					className: "text-muted-foreground mx-2",
+					children: /* @__PURE__ */ jsx(XIcon, {
+						className: "h-4",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "bg-border flex h-full min-h-6 w-px",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, {
+					className: "text-muted-foreground mx-2 h-4",
+					"aria-hidden": "true"
+				})
+			]
+		})]
+	});
+}
+SelectedBadgeList.displayName = "SelectedBadgeList";
+//#endregion
+//#region src/components/features/multi-select/multi-select.tsx
+const EMPTY_ARRAY = [];
+function MultiSelect({ options, onValueChange, variant, defaultValue = EMPTY_ARRAY, value, placeholder = "Select options", animation = 0, maxCount = 3, modalPopover = false, className, boxClassName, actions, onBadgeClick, badgeClassName, clickableBadges = false, showCloseButton = true, showClearButton = true, showSelectAll = false, disabled = false, id, name, isLoading = false, emptyContent = "No results found.", responsive = true, sheetTitle, asChild: _asChild, onClick: onTriggerClick, ...rest }) {
+	const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+	const [isAnimating, setIsAnimating] = React.useState(false);
+	const [selectedValues, setSelectedValues] = useControllableState(value, defaultValue, onValueChange);
+	const picker = useOptionPicker({
+		multiple: true,
+		options,
+		value: selectedValues,
+		onValueChange: setSelectedValues,
+		open: isPopoverOpen,
+		onOpenChange: setIsPopoverOpen
+	});
+	const selection = picker.selection;
+	const selectedOptions = picker.selectedOptions;
+	const hasSelection = selection.length > 0;
+	const handleClear = () => setSelectedValues(EMPTY_ARRAY);
+	const clearExtraOptions = () => {
+		setSelectedValues((prev) => maxCount === -1 ? prev : prev.slice(0, maxCount));
+	};
+	const allSelected = options.length > 0 && selection.length === options.length;
+	const toggleAll = () => {
+		if (allSelected) setSelectedValues(EMPTY_ARRAY);
+		else setSelectedValues(options.map((o) => o.value));
+	};
+	const header = showSelectAll ? /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		className: "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm",
+		onClick: toggleAll,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") toggleAll();
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("border-primary mr-2 flex size-4 items-center justify-center rounded-sm border", allSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+		}), /* @__PURE__ */ jsx("span", { children: "(Select All)" })]
+	}) : void 0;
+	const footer = showClearButton && hasSelection || showCloseButton || actions && actions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-1 py-1",
+		children: [actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-1",
+			children: actions.map((action) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: action.onClick,
+				className: cn("flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm", action.className),
+				children: [action.icon && /* @__PURE__ */ jsx(action.icon, { className: "text-muted-foreground mr-1 size-4" }), action.label]
+			}, action.label))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 items-center justify-between",
+			children: [
+				showClearButton && hasSelection && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleClear,
+					className: "flex-1 cursor-pointer rounded px-2 py-1 text-sm",
+					children: "Clear"
+				}),
+				showClearButton && hasSelection && showCloseButton && /* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "flex h-full min-h-6"
+				}),
+				showCloseButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => setIsPopoverOpen(false),
+					className: "max-w-full flex-1 cursor-pointer rounded px-2 py-1 text-sm",
+					children: "Close"
+				})
+			]
+		})]
+	})] }) : void 0;
+	const triggerJSX = /* @__PURE__ */ jsxs("button", {
+		...rest,
+		type: "button",
+		disabled: disabled || isLoading,
+		"data-slot": "multi-select-trigger",
+		onClick: (event) => {
+			onTriggerClick?.(event);
+			setIsPopoverOpen((prev) => !prev);
+		},
+		className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex min-h-10 w-full items-center justify-between rounded-lg border px-2 py-1 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", (disabled || isLoading) && "cursor-not-allowed opacity-50", className),
+		children: [hasSelection && !isLoading && options.length > 0 ? /* @__PURE__ */ jsx(SelectedBadgeList, {
+			selectedOptions,
+			maxCount,
+			variant,
+			badgeClassName,
+			clickableBadges,
+			isAnimating,
+			animation,
+			onRemove: picker.toggle,
+			onClearExtra: clearExtraOptions,
+			onClearAll: handleClear,
+			onBadgeClick
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center justify-between px-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-sm",
+				children: placeholder
+			}), /* @__PURE__ */ jsx(ChevronDown, {
+				className: "text-muted-foreground mx-1 h-4",
+				"aria-hidden": "true"
+			})]
+		}), isLoading && /* @__PURE__ */ jsx(LoaderOverlay, { className: "rounded-lg" })]
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ResponsivePopover, {
+			open: isPopoverOpen,
+			onOpenChange: setIsPopoverOpen,
+			responsive,
+			sheetTitle: sheetTitle ?? placeholder ?? "Select options",
+			trigger: triggerJSX,
+			align: "start",
+			contentClassName: cn("popover-content-width-full min-w-[300px] p-0", boxClassName),
+			modal: modalPopover,
+			onEscapeKeyDown: () => setIsPopoverOpen(false),
+			children: /* @__PURE__ */ jsx(MultiSelectOptions, {
+				picker,
+				searchPlaceholder: `Search ${(placeholder ?? "options").toLowerCase()}...`,
+				emptyContent,
+				header,
+				footer,
+				loading: isLoading,
+				responsive
+			})
+		}),
+		animation > 0 && hasSelection && /* @__PURE__ */ jsx(WandSparkles, {
+			className: cn("bg-background text-foreground my-2 h-3 w-3 cursor-pointer", isAnimating ? "" : "text-muted-foreground"),
+			onClick: () => setIsAnimating(!isAnimating)
+		}),
+		/* @__PURE__ */ jsxs("select", {
+			name,
+			id,
+			multiple: true,
+			value: selection,
+			defaultValue: void 0,
+			className: "absolute top-0 left-0 h-0 w-0",
+			tabIndex: -1,
+			"aria-hidden": "true",
+			onChange: () => void 0,
+			children: [/* @__PURE__ */ jsx("option", { value: "" }), options.map((option, idx) => /* @__PURE__ */ jsx("option", { value: option.value }, `${option.value}-${idx}`))]
+		})
+	] });
+}
+MultiSelect.displayName = "MultiSelect";
+//#endregion
+export { MultiSelect as t };

package/dist/page-title/index.mjs

@@ -1,2 +1,2 @@
-import { t as PageTitle } from "../page-title-Wj1lF0BP.mjs";
+import { t as PageTitle } from "../page-title-ipRWEOeM.mjs";
 export { PageTitle };

package/dist/{page-title-Wj1lF0BP.mjs → page-title-ipRWEOeM.mjs}

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/features/page-title/page-title.tsx
 function PageTitle({ title, description, actions, className, titleClassName, descriptionClassName, actionsClassName, actionsPosition = "inline" }) {