@datum-cloud/datum-ui 0.6.1 → 0.8.0

package/dist/multi-select-DM_dxnSV.mjs

@@ -0,0 +1,235 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Badge } from "./badge-DJR33ftJ.mjs";
+import { t as Separator } from "./separator-DXVTncCK.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-C2WDla6V.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-BXQOfyrK.mjs";
+import { cva } from "class-variance-authority";
+import { CheckIcon, ChevronDown, WandSparkles, XCircle, XIcon } from "lucide-react";
+import * as React$1 from "react";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/multi-select/multi-select.tsx
+/**
+* Variants for the multi-select component to handle different styles.
+* Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+*/
+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" }
+});
+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 }) {
+	const [isPopoverOpen, setIsPopoverOpen] = React$1.useState(false);
+	const [isAnimating, setIsAnimating] = React$1.useState(false);
+	const [internalValues, setInternalValues] = React$1.useState(defaultValue);
+	useEffect(() => {
+		if (value === void 0 && defaultValue) setInternalValues(defaultValue);
+	}, [defaultValue]);
+	const picker = useOptionPicker({
+		multiple: true,
+		options,
+		value,
+		defaultValue,
+		onValueChange: (next) => {
+			if (value === void 0) setInternalValues(next);
+			onValueChange(next);
+		},
+		open: isPopoverOpen,
+		onOpenChange: setIsPopoverOpen
+	});
+	const currentSelectedValues = value !== void 0 ? value : internalValues;
+	const handleClear = () => {
+		picker.clear();
+		if (value === void 0) setInternalValues([]);
+	};
+	const clearExtraOptions = () => {
+		const next = currentSelectedValues.slice(0, maxCount);
+		if (value === void 0) setInternalValues(next);
+		onValueChange(next);
+	};
+	const allSelected = options.length > 0 && currentSelectedValues.length === options.length;
+	const toggleAll = () => {
+		if (allSelected) handleClear();
+		else {
+			const allValues = options.map((o) => o.value);
+			if (value === void 0) setInternalValues(allValues);
+			onValueChange(allValues);
+		}
+	};
+	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 && currentSelectedValues.length > 0 || 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 && currentSelectedValues.length > 0 && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleClear,
+					className: "flex-1 cursor-pointer rounded px-2 py-1 text-sm",
+					children: "Clear"
+				}),
+				showClearButton && currentSelectedValues.length > 0 && 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", {
+		type: "button",
+		disabled: disabled || isLoading,
+		"data-slot": "multi-select-trigger",
+		onClick: () => 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: [currentSelectedValues.length > 0 && !isLoading && options.length > 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [currentSelectedValues.slice(0, maxCount === -1 ? void 0 : maxCount).map((val) => {
+					const option = options.find((o) => o.value === val);
+					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 ?? {
+									label: "",
+									value: ""
+								});
+							}
+						},
+						children: [
+							IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "text-muted-foreground size-3" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "max-w-[120px] truncate",
+								children: option?.label
+							}),
+							/* @__PURE__ */ jsx(XCircle, {
+								className: "text-muted-foreground ml-1 size-3 cursor-pointer",
+								onClick: (event) => {
+									event.stopPropagation();
+									event.preventDefault();
+									picker.toggle(val);
+								}
+							})
+						]
+					}, val);
+				}), currentSelectedValues.length > maxCount && maxCount !== -1 && /* @__PURE__ */ jsxs(Badge, {
+					className: cn(multiSelectVariants({ variant }), "text-muted-foreground", isAnimating && "animate-bounce"),
+					style: { animationDuration: `${animation}s` },
+					children: [`+ ${currentSelectedValues.length - maxCount} more`, /* @__PURE__ */ jsx(XCircle, {
+						className: "text-muted-foreground ml-1 size-3 cursor-pointer",
+						onClick: (event) => {
+							event.stopPropagation();
+							clearExtraOptions();
+						}
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsx(XIcon, {
+						className: "text-muted-foreground mx-2 h-4 cursor-pointer",
+						onClick: (event) => {
+							event.stopPropagation();
+							handleClear();
+						}
+					}),
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "flex h-full min-h-6"
+					}),
+					/* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground mx-2 h-4 cursor-pointer" })
+				]
+			})]
+		}) : /* @__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 cursor-pointer" })]
+		}), 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(OptionList, {
+				picker,
+				searchPlaceholder: `Search ${(placeholder ?? "options").toLowerCase()}...`,
+				emptyContent,
+				header,
+				footer,
+				loading: isLoading,
+				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 })
+				] })
+			})
+		}),
+		animation > 0 && currentSelectedValues.length > 0 && /* @__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: currentSelectedValues ?? [],
+			defaultValue: void 0,
+			className: "absolute top-0 left-0 h-0 w-0",
+			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-ChsnpBiH.mjs";
+import { t as PageTitle } from "../page-title-ChLiv6gB.mjs";
 export { PageTitle };

package/dist/{page-title-ChsnpBiH.mjs → page-title-ChLiv6gB.mjs}

@@ -8,10 +8,11 @@ function PageTitle({ title, description, actions, className, titleClassName, des
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("flex", isInline ? "flex-col justify-start gap-1" : "w-full flex-col gap-1"),
 			children: [title && /* @__PURE__ */ jsx("span", {
-				className: cn("text-2xl leading-none font-medium", titleClassName),
+				"data-e2e": "page-title",
+				className: cn("font-title text-3xl leading-none", titleClassName),
 				children: title
 			}), description && /* @__PURE__ */ jsx("div", {
-				className: cn("text-sm font-normal", descriptionClassName),
+				className: cn("max-w-2xl text-sm font-normal", descriptionClassName),
 				children: description
 			})]
 		}), actions && /* @__PURE__ */ jsx("div", {

package/dist/popover/index.mjs

@@ -1,2 +1,2 @@
-import { i as PopoverTrigger, n as PopoverAnchor, r as PopoverContent, t as Popover } from "../popover-FJAcbYoH.mjs";
+import { i as PopoverTrigger, n as PopoverAnchor, r as PopoverContent, t as Popover } from "../popover-JOuXJOZ2.mjs";
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/radio-group/index.mjs

@@ -1,2 +1,2 @@
-import { n as RadioGroupItem, t as RadioGroup } from "../radio-group-CiITR0LO.mjs";
+import { n as RadioGroupItem, t as RadioGroup } from "../radio-group-70UjJBb5.mjs";
 export { RadioGroup, RadioGroupItem };

package/dist/responsive-dropdown/index.mjs

@@ -0,0 +1,2 @@
+import { t as ResponsiveDropdown } from "../responsive-dropdown-IFroDgKn.mjs";
+export { ResponsiveDropdown };

package/dist/responsive-dropdown-IFroDgKn.mjs

@@ -0,0 +1,53 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { r as useInSheet, t as MobileSheet } from "./mobile-sheet-BxMvkzAj.mjs";
+import { t as useBreakpoint } from "./use-breakpoint-DGcVmB3c.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown/index.mjs";
+import { isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/base/responsive-dropdown/responsive-dropdown.tsx
+function ResponsiveDropdown({ open, onOpenChange, trigger, children, sheetTitle, sheetDescription, sheetFooter, align = "end", contentClassName, onCloseAutoFocus, responsive = true }) {
+	const breakpoint = useBreakpoint();
+	const inSheet = useInSheet();
+	if (responsive && breakpoint === "mobile" && !inSheet) {
+		const handleTriggerClick = (e) => {
+			if (e && isValidElement(trigger)) trigger.props.onClick?.(e);
+			if (!e?.defaultPrevented) onOpenChange(!open);
+		};
+		const handleTriggerKeyDown = (e) => {
+			if (!e) return;
+			if (isValidElement(trigger)) trigger.props.onKeyDown?.(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
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			className: cn("rounded-lg p-0", contentClassName),
+			onCloseAutoFocus,
+			children
+		})]
+	});
+}
+//#endregion
+export { ResponsiveDropdown as t };

package/dist/responsive-popover/index.mjs

@@ -0,0 +1,2 @@
+import { t as ResponsivePopover } from "../responsive-popover-D-t9bxSN.mjs";
+export { ResponsivePopover };

package/dist/responsive-popover-D-t9bxSN.mjs

@@ -0,0 +1,61 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { r as useInSheet, t as MobileSheet } from "./mobile-sheet-BxMvkzAj.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-JOuXJOZ2.mjs";
+import { t as useBreakpoint } from "./use-breakpoint-DGcVmB3c.mjs";
+import { isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/base/responsive-popover/responsive-popover.tsx
+function ResponsivePopover({ open, onOpenChange, trigger, children, sheetTitle, sheetDescription, sheetFooter, align = "start", side = "bottom", contentClassName, sideOffset, alignOffset, avoidCollisions, onOpenAutoFocus, onCloseAutoFocus, onInteractOutside, onEscapeKeyDown, responsive = true, modal }) {
+	const breakpoint = useBreakpoint();
+	const inSheet = useInSheet();
+	if (responsive && breakpoint === "mobile" && !inSheet) {
+		const handleTriggerClick = (e) => {
+			if (e && isValidElement(trigger)) trigger.props.onClick?.(e);
+			if (!e?.defaultPrevented) onOpenChange(!open);
+		};
+		const handleTriggerKeyDown = (e) => {
+			if (!e) return;
+			if (isValidElement(trigger)) trigger.props.onKeyDown?.(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
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align,
+			side,
+			sideOffset,
+			alignOffset,
+			avoidCollisions,
+			className: cn("p-0", contentClassName),
+			onOpenAutoFocus,
+			onCloseAutoFocus,
+			onInteractOutside,
+			onEscapeKeyDown,
+			children
+		})]
+	});
+}
+//#endregion
+export { ResponsivePopover as t };

package/dist/rich-text-editor/index.mjs

@@ -0,0 +1,2 @@
+import { n as useRichTextEditor, r as RichTextContent, t as RichTextEditor } from "../rich-text-editor-CQH_U4T5.mjs";
+export { RichTextContent, RichTextEditor, useRichTextEditor };